/* ============================================================
   UJP chrome · NAV dropdowns + menú mobile (webproX · staging)
   Extiende .ch-nav de chrome.css. Tokens --c-* del theming .is-ujp.
   Desktop: submenús en hover. Mobile: burger abre panel + acordeón.
   ============================================================ */

/* la barra principal es contexto de posicionamiento para el panel mobile */
.ujp-chrome .ch-main { position: relative; }

/* item con submenú */
.ujp-chrome .ch-nav-item { position: relative; }
.ujp-chrome .ch-nav-item > a { display: inline-flex; align-items: center; gap: .3rem; }
.ujp-chrome .ch-nav-item .chev { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.4; fill: none; opacity: .85; transition: transform .25s; }
.ujp-chrome .ch-sub a::after { display: none; } /* sin la rayita de los links del nav */

/* ===== DESKTOP (≥861px): submenú flotante Paper + texto magenta ===== */
@media (min-width: 861px) {
  .ujp-chrome .ch-nav-item { display: inline-flex; align-items: center; }
  .ujp-chrome .ch-sub {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 250px; background: #FBF8F4; border-radius: 14px; padding: .5rem;
    box-shadow: 0 20px 46px -14px rgba(46,8,28,.42), 0 4px 12px -8px rgba(46,8,28,.3);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; z-index: 130;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .ujp-chrome .ch-nav-item:hover > .ch-sub {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px);
  }
  .ujp-chrome .ch-sub a {
    color: #BD2453; font-family: var(--c-font-body);
    font-size: 1rem; font-weight: 500;
    padding: .64rem .95rem; border-radius: 9px; text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, padding-left .15s;
  }
  .ujp-chrome .ch-sub a:hover { background: #BD2453; color: #FBF8F4; padding-left: 1.15rem; }
}

/* ===== MOBILE (≤860px): panel wine + acordeón, con efecto premium al abrir ===== */
@media (max-width: 860px) {
  .ujp-chrome .ch-main { position: relative; }
  .ujp-chrome .ch-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, #4A1222, #2E0712);
    padding: .3rem 1.25rem 1.1rem;
    box-shadow: 0 24px 48px -12px rgba(0,0,0,.55);
    border-top: 1px solid rgba(237,214,164,.18);
    max-height: calc(100vh - 110px); overflow-y: auto; z-index: 120;
  }
  /* efecto premium: el panel entra con fade + slide suave */
  .ujp-chrome .ch-nav.open { display: flex; animation: chNavOpen .4s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes chNavOpen { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
  /* stagger sutil de cada item */
  .ujp-chrome .ch-nav.open > a,
  .ujp-chrome .ch-nav.open > .ch-nav-item { animation: chItem .45s cubic-bezier(.22,.61,.36,1) both; }
  .ujp-chrome .ch-nav.open > *:nth-child(1) { animation-delay: .06s; }
  .ujp-chrome .ch-nav.open > *:nth-child(2) { animation-delay: .12s; }
  .ujp-chrome .ch-nav.open > *:nth-child(3) { animation-delay: .18s; }
  .ujp-chrome .ch-nav.open > *:nth-child(4) { animation-delay: .24s; }
  @keyframes chItem { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

  .ujp-chrome .ch-nav-item { display: block; width: 100%; }
  .ujp-chrome .ch-nav > a,
  .ujp-chrome .ch-nav-item > a {
    display: flex; align-items: center; width: 100%;
    padding: 1rem .2rem; color: #fff; font-size: 1.06rem;
    border-bottom: 1px solid rgba(237,214,164,.14);
  }
  .ujp-chrome .ch-nav-item .chev { margin-left: auto; color: var(--c-accent, #FEDF20); opacity: 1; }
  .ujp-chrome .ch-nav-item.expanded > a,
  .ujp-chrome .ch-nav-item.expanded > a .chev { color: var(--c-accent, #FEDF20); }
  .ujp-chrome .ch-nav-item.expanded > a .chev { transform: rotate(180deg); }

  /* submenú = acordeón DENTRO del panel (nunca caja blanca flotante) */
  .ujp-chrome .ch-sub {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: block; min-width: 0; border-radius: 0; box-shadow: none;
    background: rgba(0,0,0,.22); padding-left: .8rem; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height .32s ease;
  }
  .ujp-chrome .ch-nav-item.expanded > .ch-sub { max-height: 520px; }
  .ujp-chrome .ch-sub a {
    display: block; color: rgba(237,214,164,.9); font-size: .98rem; font-weight: 500;
    padding: .82rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none;
  }
  .ujp-chrome .ch-sub a:hover { color: #fff; background: rgba(237,214,164,.1); }

  /* burger → X al abrir (efecto premium) */
  .ujp-chrome .ch-burger span { transition: transform .3s ease, opacity .2s ease; }
  .ujp-chrome .ch-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ujp-chrome .ch-burger.open span:nth-child(2) { opacity: 0; }
  .ujp-chrome .ch-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* topbar: links de utilidad (Plataforma / Biblioteca) alineados a la izquierda */
.ujp-chrome .ch-top-util { display: inline-flex; align-items: center; gap: 1rem; margin-right: auto; }
@media (max-width: 860px) { .ujp-chrome .ch-top-util { display: none; } } /* ocultar utilidades en mobile (van al panel) */

/* ============================================================
   Header CENTRADO (contenido en columna 1180px, barra full-bleed)
   + clearance: el hero arranca debajo del header flotante.
   ============================================================ */
.ujp-chrome .ch-top,
.ujp-chrome .ch-main {
  padding-left: max(2rem, calc((100% - 1180px) / 2));
  padding-right: max(2rem, calc((100% - 1180px) / 2));
}
/* el header .ch-header mide ~122px desktop / ~130px mobile → despejar el hero */
.ujp-home .home-header-zone .hero-inner { padding-top: 150px; }
@media (min-width: 861px) { .ujp-home .home-header-zone .hero-inner { padding-top: 185px; } }

/* ============================================================
   AJUSTES (feedback Augus) · submenú legible + header/footer más grandes y anchos
   ============================================================ */
/* (submenú Paper/magenta ahora vive en el @media desktop de arriba, no acá — no filtra a mobile) */

/* HEADER más grande (solo staging, scoped .ujp-home) */
.ujp-home .ujp-chrome .ch-nav a { font-size: 21px; }
@media (min-width: 861px) { .ujp-home .ujp-chrome .ch-sub a { font-size: 1rem; } }
.ujp-home .ujp-chrome .ch-top a,
.ujp-home .ujp-chrome .ch-top .ch-loc { font-size: .92rem; }
.ujp-home .ujp-chrome .ch-cta { font-size: 1rem; padding: .7rem 1.6rem; }

/* TOP BAR: magenta como la barra principal (cohesivo) */
.ujp-home .ujp-chrome.is-ujp .ch-top {
  background: #BD2453;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* FOOTER boxed + escudo grande + tipografía más grande y armónica (título↔subtexto) */
.ujp-home .ch-ft-main,
.ujp-home .ch-maps-grid { max-width: 1180px; }
.ujp-home .ch-ft-brand img { height: 180px; }
.ujp-home .ch-ft-col h4 { font-size: 1.4rem; margin-bottom: 1.15rem; letter-spacing: .005em; }
.ujp-home .ch-ft-col li { margin-bottom: .72rem; }
.ujp-home .ch-ft-col a { font-size: 1.12rem; line-height: 1.5; }
.ujp-home .ch-contact .row { font-size: 1.12rem; margin-bottom: .85rem; }
.ujp-home .ch-bottom { font-size: 1rem; }
.ujp-home .ch-map h4 { font-size: 1.18rem; margin-bottom: .7rem; }