/* ============================================================
   Barra superior, menú desplegable y panel móvil
   ============================================================ */

/* La barra va arriba del hero, no encima: sticky ocupa su propio alto en
   el flujo (el contenido empieza debajo) y sigue fija al hacer scroll.
   Por eso los heroes ya no suman var(--header-h) a su relleno superior. */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
body[data-hero-theme="light"] .site-header{ background:rgba(244,245,247,.92); backdrop-filter:blur(6px); border-color:var(--line); }
/* Fondo real de la barra: app.js le pone .is-solid en todas las páginas, así
   que esta regla manda sobre la de .site-header. #0A4272 (--navy-soft). */
.site-header.is-solid{ background:var(--navy-soft); border-color:var(--line-on-dark); }
body[data-hero-theme="light"] .site-header.is-solid{ background:rgba(244,245,247,.96); border-color:var(--line); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:center; gap:var(--sp-4); line-height:1; }
/* El logo es un lockup de un solo color: se monocromatiza según el fondo (blanco sobre oscuro, negro sobre claro) */
.brand-logo{ height:64px; width:auto; display:block; filter:brightness(0) invert(1); transition:filter .35s ease; }
body[data-hero-theme="light"] .brand-logo{ filter:brightness(0); }
.site-header.is-solid .brand-logo{ filter:brightness(0) invert(1); }
body[data-hero-theme="light"] .site-header.is-solid .brand-logo{ filter:brightness(0); }

.main-nav{ display:flex; align-items:center; gap:var(--sp-8); }

/* El color de la barra depende del fondo (hero oscuro, hero claro, header
   sólido al hacer scroll). Se resuelve con dos variables en .main-nav en vez
   de recolorear los <a> directamente: así el panel desplegable —que siempre
   va sobre blanco— nunca hereda el color de la barra y no se vuelve
   invisible al deslizar. */
.main-nav{ --nav-link:rgba(255,255,255,.78); --nav-link-on:var(--white); }
body[data-hero-theme="light"] .main-nav{ --nav-link:var(--steel); --nav-link-on:var(--navy); }
.site-header.is-solid .main-nav{ --nav-link:rgba(255,255,255,.78); --nav-link-on:var(--white); }
body[data-hero-theme="light"] .site-header.is-solid .main-nav{ --nav-link:var(--steel); --nav-link-on:var(--navy); }

.main-nav > .nav-item > a{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.01em;
  color:var(--nav-link); position:relative; padding:var(--sp-2) 0; white-space:nowrap;
  transition:color .2s ease;
}
.main-nav > .nav-item > a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--yellow-ochre); transition:width .25s ease; }
.main-nav > .nav-item > a:hover::after, .main-nav > .nav-item > a.active::after{ width:100%; }
.main-nav > .nav-item > a.active{ color:var(--nav-link-on); }
/* Ocre al pasar el cursor. Va al final para ganarle a .active y a los
   estados de tema, que tienen la misma o mayor especificidad. */
.main-nav > .nav-item > a:hover,
.main-nav > .nav-item > a.active:hover,
.nav-item.has-sub:hover > a,
.nav-item.has-sub:focus-within > a{ color:var(--yellow-ochre); }

/* ------------------------------------------------------------
   Desplegables. La barra mantiene seis entradas; las que agrupan
   varias páginas abren un panel al pasar el cursor o al tabular.
   El puente invisible sobre el panel evita que se cierre al bajar.
   ------------------------------------------------------------ */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-item > a{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.nav-chev{ transition:transform .25s ease; opacity:.7; }
.nav-item.has-sub:hover .nav-chev, .nav-item.has-sub:focus-within .nav-chev{ transform:rotate(180deg); }
.nav-sub{
  position:absolute; top:100%; left:-18px; z-index:5; min-width:290px;
  margin-top:var(--sp-4); padding:var(--sp-2); background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-sub::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub{
  opacity:1; visibility:visible; transform:none;
}
/* Va después de la regla de apertura a propósito: misma especificidad,
   gana la última. Lo pone renderNav() al hacer clic en una página. */
.nav-item.has-sub.is-closed .nav-sub{ opacity:0; visibility:hidden; transform:translateY(-6px); }
.nav-item.has-sub.is-closed .nav-chev{ transform:none; }
/* El panel siempre va sobre blanco: color propio, sin heredar el de la barra. */
.main-nav .nav-sub a{
  display:block; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:.01em;
  color:var(--navy); white-space:normal; transition:background .18s ease, color .18s ease;
}
.main-nav .nav-sub a:hover, .main-nav .nav-sub a:focus-visible{ background:var(--paper); color:var(--yellow-ochre); }
.main-nav .nav-sub a.active{ background:var(--paper); color:var(--navy); }
.nav-sub-label{ display:block; font-weight:600; color:inherit; }
.nav-sub-desc{
  display:block; margin-top:3px; font-family:var(--font-mono);
  font-size:var(--fs-lbl); letter-spacing:.02em; color:var(--steel-light); line-height:1.4;
}
.main-nav .nav-sub a:hover .nav-sub-desc{ color:var(--yellow-dim); }

/* ------------------------------------------------------------
   Mega menú de Productos: cinco columnas, una por mercado.
   El ítem deja de ser la referencia de posición (static) y el panel se
   ubica contra la barra (.site-header, sticky): ocupa el ancho del
   contenedor, centrado, justo bajo la barra. El puente (::before) cubre
   el espacio entre el enlace y el panel para que no se cierre al bajar.
   ------------------------------------------------------------ */
.nav-item.has-mega{ position:static; }
.nav-sub.nav-mega{
  left:var(--gutter); right:var(--gutter); margin:0 auto;
  max-width:calc(var(--container) - 2 * var(--gutter));
  padding:var(--sp-6);
}
.nav-sub.nav-mega::before{ top:-28px; height:28px; }
.nav-mega-cols{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--sp-6); }
.main-nav .nav-mega a.nav-mega-tit{
  display:block; padding:0 0 var(--sp-2); margin-bottom:var(--sp-2); border-radius:0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--yellow-dim);
}
.main-nav .nav-mega a.nav-mega-tit:hover, .main-nav .nav-mega a.nav-mega-tit.active{ background:none; color:var(--navy); }
.main-nav .nav-mega li a{ padding:var(--sp-1) var(--sp-2); margin-left:calc(-1 * var(--sp-2)); line-height:1.4; }
.nav-mega-pie{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.main-nav .nav-mega .nav-mega-pie a{
  display:inline-flex; align-items:center; gap:var(--sp-2); padding:0;
  font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-700);
}
.main-nav .nav-mega .nav-mega-pie a:hover{ background:none; color:var(--navy); }

.header-actions{ display:flex; align-items:center; gap:var(--sp-4); }
/* Cápsula con borde y rótulo, no un ícono suelto: es la puerta a resolver
   "¿tienen esto?" en segundos, así que tiene que notarse igual que un botón,
   no perderse entre el logo y el menú. Mismo lenguaje que .btn-outline —
   blanco sobre el hero oscuro, se enciende en amarillo al pasar el cursor. */
.search-toggle{
  display:flex; align-items:center; gap:var(--sp-2); height:38px; padding:0 var(--sp-4) 0 var(--sp-3);
  border:1px solid rgba(255,255,255,.5); border-radius:999px; background:transparent; cursor:pointer;
  color:var(--white); transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.search-toggle svg{ width:17px; height:17px; flex:0 0 auto; }
.search-toggle-label{
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.04em; white-space:nowrap;
}
body[data-hero-theme="light"] .search-toggle{ color:var(--navy); border-color:var(--line); }
.search-toggle:hover{ border-color:var(--yellow); color:var(--yellow); background:rgba(255,196,0,.1); }
body[data-hero-theme="light"] .search-toggle:hover{ background:rgba(255,196,0,.12); }
/* Bajo 1180 px el menú ya se aprieta (ver más abajo): la cápsula pierde el
   rótulo y el borde, y vuelve a ser sólo la lupa, para no competir por sitio. */
@media (max-width:1180px){
  .search-toggle{
    width:38px; height:38px; padding:0; border:0; border-radius:50%; gap:0;
  }
  .search-toggle-label{ display:none; }
  .search-toggle:hover{ background:rgba(255,255,255,.14); border-color:transparent; }
  body[data-hero-theme="light"] .search-toggle:hover{ background:rgba(0,23,43,.08); }
}
.nav-toggle{ display:none; width:44px; height:44px; border:none; background:transparent; position:relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:9px; right:9px; height:2px; background:var(--white);
  transition:transform .25s ease, opacity .25s ease;
}
body[data-hero-theme="light"] .nav-toggle span, body[data-hero-theme="light"] .nav-toggle span::before, body[data-hero-theme="light"] .nav-toggle span::after{ background:var(--navy); }
.nav-toggle span{ top:21px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ transform:translateY(7px) rotate(45deg); background:var(--white); }
body.nav-open .nav-toggle span::after{ transform:translateY(-7px) rotate(-45deg); background:var(--white); }

/* Con submenús la lista ya no cabe centrada: arranca bajo la cabecera y
   desplaza si hace falta. */
.mobile-panel{
  position:fixed; inset:0; z-index:99; background:var(--navy-deep);
  display:flex; flex-direction:column; justify-content:flex-start; gap:var(--sp-6);
  padding:calc(var(--header-h) + 28px) var(--sp-8) var(--sp-10); overflow-y:auto; overscroll-behavior:contain;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s linear .4s;
}
/* Cerrado, el panel sólo se desplazaba fuera de la pantalla: sus enlaces
   seguían en el orden del tabulador y en el árbol de accesibilidad, y en
   escritorio el teclado recorría una veintena de enlaces invisibles antes de
   llegar al contenido. visibility:hidden los saca de ambos. Al cerrar, el
   cambio de visibilidad espera los .4s del desplazamiento para no cortar la
   animación; al abrir es inmediato. */
body.nav-open .mobile-panel{ transform:translateY(0); visibility:visible; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.mobile-panel a{ font-family:var(--font-display); font-size:var(--fs-d4); letter-spacing:-.02em; color:var(--white); font-weight:700; }
.mobile-panel a.active{ color:var(--yellow); }
/* Submenú en móvil: siempre desplegado. Un acordeón obligaría a dos toques
   para llegar a una página que ya cabe en la lista. */
.mobile-sub{ display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-3) 0 var(--sp-1) var(--sp-4); padding-left:var(--sp-4); border-left:1px solid var(--line-on-dark); }
.mobile-panel .mobile-sub a{ font-family:var(--font-body); font-size:var(--fs-xs); font-weight:500; color:var(--on-dark-400); }
.mobile-panel .mobile-sub a.active{ color:var(--yellow); }
/* El botón vive dentro del panel, así que hay que devolverle su tipografía:
   `.mobile-panel a` (0,1,1) le gana a `.btn` (0,1,0) y lo convertía en un
   enlace de 24 px. */
.mobile-panel .btn{
  align-self:flex-start; margin-top:var(--sp-4); color:var(--navy);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.06em;
}

/* ------------------------------------------------------------
   Cabecera en pantallas medianas y móviles.
   El menú horizontal necesita ~1.080 px entre el logotipo y los seis enlaces;
   por debajo de eso pasa a un panel a pantalla completa.
   ------------------------------------------------------------ */
@media (max-width:1180px){
  .main-nav{ gap:var(--sp-6); }
  .brand-logo{ height:52px; }
}
@media (max-width:1000px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
}
@media (max-width:720px){
  :root{ --header-h:64px; }
  .brand-logo{ height:44px; }
  .mobile-panel{ padding:calc(var(--header-h) + 24px) var(--gutter) var(--sp-10); justify-content:flex-start; gap:var(--sp-4); overflow-y:auto; }
  .mobile-panel a{ font-size:var(--fs-d5); }
}
.mobile-panel-contact{
  display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-6);
  padding-top:var(--sp-6); border-top:1px solid var(--line-on-dark);
}
.mobile-panel-contact a{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.02em; color:var(--on-dark-400);
}
body.nav-open{ overflow:hidden; }