/* =============================================================================
   EL HEADER · una sola cabecera para TODA la web.

   Vive aparte de styles.css porque las 16 fichas de producto NO cargan la hoja
   grande de la landing (tienen su propio CSS incrustado, en Mont): si el header
   viviera allí, en las fichas saldría sin estilar. Aquí es un archivo pequeño
   que cargan todas las páginas, y así hay UNA cabecera de verdad y no tres
   pintadas a mano que se descuadran solas.

   Los tokens van con VALOR DE RESPALDO — var(--gold, #feb300) — para que
   funcione tal cual en las páginas que no traen el :root de la landing. Donde sí
   está, manda el token. La tipografía se hereda a propósito: la landing habla en
   Poppins y las fichas en Mont, y el header habla el idioma de su página.

   Se edita AQUÍ. El HTML lo pinta tools/partes-web.mjs.
   ============================================================================= */

/* ---------- Header: se DISUELVE, no se separa con una línea ----------
   El blur progresivo apila 6 capas de desenfoque creciente, cada una recortada en
   su banda con una máscara. Resultado: nítido abajo → muy borroso arriba, sin corte
   visible. Es la receta de iOS/Apple y es lo que hace que un header no parezca una
   barra pegada encima de la página.
   SIN border-bottom (Juan, 16-jul: "esa línea divisoria la odio"). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: transform .45s var(--ease, cubic-bezier(.16,1,.3,1));
}
/* El blur SOLO existe si hay algo que difuminar. Arriba del todo no hay nada
   detrás del header, y encendido emborronaba el kicker del titular: se veía una
   mancha dorada bajo la barra (Juan, 16-jul: "tiene un error ese header"). */
.pblur {
  position: absolute; inset: 0 0 -30% 0; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .35s var(--ease, cubic-bezier(.16,1,.3,1));
}
.site-header.scrolled .pblur { opacity: 1; }
/* Cada capa: opaca desde arriba hasta --o, y de ahí se funde hasta morir en --c.
   Siempre termina en `transparent` → ninguna capa deja canto. */
.pblur > div {
  position: absolute; inset: 0;
  backdrop-filter: blur(var(--b));
  -webkit-backdrop-filter: blur(var(--b));
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--o), transparent var(--c));
  mask-image: linear-gradient(to bottom, #000 var(--o), transparent var(--c));
}
/* Un velo mínimo que oscurece SOLO lo justo para que el logo siempre se lea.
   La rampa NO es lineal a propósito. Un degradado de 2 paradas baja la opacidad a
   ritmo constante y el ojo lee ese final abrupto como un CANTO — se ve el borde
   del velo aunque técnicamente "termine en transparente" (Juan, 17-jul: "hace 2
   saltos, va a trompicones"). Estas 17 paradas siguen una curva SMOOTHSTEP, cuya
   pendiente es cero en los dos extremos: el velo nace y muere sin que se note
   dónde. De paso, tantas paradas parten las bandas de color de 8 bits, que en
   oscuros se ven como escalones. */
.site-header::after {
  content: ""; position: absolute; inset: 0 0 -30% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(8,6,5,.720) 0%,
    rgba(8,6,5,.712) 6.2%,
    rgba(8,6,5,.689) 12.5%,
    rgba(8,6,5,.654) 18.8%,
    rgba(8,6,5,.607) 25%,
    rgba(8,6,5,.553) 31.2%,
    rgba(8,6,5,.492) 37.5%,
    rgba(8,6,5,.427) 43.8%,
    rgba(8,6,5,.360) 50%,
    rgba(8,6,5,.293) 56.2%,
    rgba(8,6,5,.228) 62.5%,
    rgba(8,6,5,.167) 68.8%,
    rgba(8,6,5,.112) 75%,
    rgba(8,6,5,.066) 81.2%,
    rgba(8,6,5,.031) 87.5%,
    rgba(8,6,5,.008) 93.8%,
    rgba(8,6,5,0) 100%);
  opacity: 0; transition: opacity .4s var(--ease, cubic-bezier(.16,1,.3,1));
}
.site-header.scrolled::after { opacity: 1; }
/* al bajar se aparta; al subir vuelve. El contenido manda sobre el crómo. */
.site-header.hidden { transform: translateY(-104%); }
/* Logo CENTRADO (Juan, 17-jul). Con `space-between` y un solo hijo, el logo se
   pegaba a la izquierda — space-between reparte huecos ENTRE elementos, y con uno
   solo no hay nada que repartir. Con `center` manda el eje del centro.
   Y encaja con la web: la sección de Champions también se centró; el eje de la
   página es el centro, no el margen. */
/* Rejilla de 3 pistas con las laterales IGUALES (1fr · auto · 1fr): el logo cae en el
   eje exacto de la página pase lo que pase a los lados. Es lo que permite meter
   navegación sin romper la regla de Juan (17-jul: "el logo va centrado; no quiero
   cosas a los lados"). No hay UN lado con cosas: hay DOS, simétricos. */
.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 72px; gap: clamp(20px, 3.1vw, 50px);
}
.brand { grid-column: 2; justify-self: center; }
.brand img { height: 26px; width: auto; }

/* ---------- Navegación: se ve desde el primer momento, y entra ----------
   (Juan, 30-jul: "que no tenga que bajar para verlos, que se carguen con una
   animación, letra más fina y en dorado, y con algo más de separación para que
   sean más apple y pro")

   Estaban escondidos hasta que bajabas. Ya no: entran al cargar, saliendo del
   centro hacia fuera, y se quedan. El gesto sigue siendo el mismo — lo que
   cambia es que no hay que hacer nada para verlo.

   Dorado FINO y con aire: es la diferencia entre una barra de navegación y una
   cabecera de marca. El peso 400 con letter-spacing y separación amplia se lee
   como un rótulo, no como botones. */
.hnav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); min-width: 0; }
.hnav--a { grid-column: 1; justify-content: flex-end; }
.hnav--b { grid-column: 3; justify-content: flex-start; }
.hnav a {
  position: relative; display: inline-flex; align-items: center; height: 44px;
  font-size: 13px; font-weight: var(--fw-reg, 400); line-height: 1;
  letter-spacing: .015em;
  color: var(--gold, #feb300); text-decoration: none; white-space: nowrap;
  transition: color .22s ease, transform .18s var(--ease, cubic-bezier(.16,1,.3,1));
  /* Entra al cargar. `both` deja el estado final clavado, así que si el CSS llega
     tarde nunca se queda un enlace invisible. */
  animation: navEntra .68s var(--ease, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes navEntra {
  from { opacity: 0; transform: translateX(var(--dx, 0)); }
  to   { opacity: 1; transform: none; }
}
.hnav--a a { --dx: 16px; }   /* nacen pegados al logo y se separan */
.hnav--b a { --dx: -16px; }
/* El más cercano al logo abre; el de fuera entra 90 ms después. Ese desfase es lo
   que hace que se lea como UN gesto y no como cuatro cosas encendiéndose.
   El retardo de arranque (.34s) deja que el logo se asiente primero: primero la
   marca, después las herramientas. */
.hnav--a a:nth-last-child(1) { animation-delay: .34s; }
.hnav--a a:nth-last-child(2) { animation-delay: .43s; }
.hnav--b a:nth-child(1) { animation-delay: .34s; }
.hnav--b a:nth-child(2) { animation-delay: .43s; }

/* El filete crece desde el CENTRO del enlace hacia sus dos extremos. Un subrayado
   que aparece entero es un interruptor; uno que crece es un gesto. */
.hnav a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 11px; height: 1px;
  background: currentColor; border-radius: 2px; opacity: 0;
  transition: left .3s var(--ease, cubic-bezier(.16,1,.3,1)), right .3s var(--ease, cubic-bezier(.16,1,.3,1)), opacity .18s ease;
}
/* Al pasar por encima se ENCIENDE (oro claro), no cambia de familia de color. */
.hnav a:hover, .hnav a:focus-visible { color: var(--gold-2, #ffce5c); }
.hnav a:hover::after, .hnav a:focus-visible::after { left: 0; right: 0; opacity: .9; }
.hnav a:active { transform: translateY(1px); }
/* La página en la que estás: no se disfraza de botón, solo se queda subrayada. */
.hnav a[aria-current="page"] { color: var(--gold-2, #ffce5c); }
.hnav a[aria-current="page"]::after { left: 0; right: 0; opacity: .45; }

/* ---------- Botón de menú (móvil) ----------
   Dos trazos que se cruzan en aspa. Sin caja, sin píldora: el trazo ES el botón. */
.hmenu {
  grid-column: 3; justify-self: end; display: none;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; color: var(--cream, #f5efe3);
}
/* Dos trazos de 18px y 1px de grosor. Finos a propósito: un trazo grueso es un
   icono, uno fino es una marca. Al abrir, las dos líneas van al MISMO sitio y
   giran en sentidos opuestos — no se "convierten" en aspa, se cruzan.
   El press feedback (escala .92) hace que el botón se sienta físico. */
.hmenu i {
  position: absolute; left: 13px; width: 18px; height: 1px; border-radius: 1px;
  background: currentColor;
  transition: transform .52s var(--ease-fuera, cubic-bezier(.22,1,.28,1)), width .4s var(--ease, cubic-bezier(.16,1,.3,1));
}
.hmenu i:nth-child(1) { top: 20px; }
.hmenu i:nth-child(2) { top: 25px; }
/* Los dos a y=22.5 (el centro exacto entre 20 y 25) y giran ±45°. Como parten de
   sitios distintos, uno baja 2.5px y el otro sube 2.5px: el cruce cae clavado. */
body.menu-abierto .hmenu i:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
body.menu-abierto .hmenu i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }
.hmenu:active i { transform: scaleX(.86); }
body.menu-abierto .hmenu:active i:nth-child(1) { transform: translateY(2.5px) rotate(45deg) scale(.88); }
body.menu-abierto .hmenu:active i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg) scale(.88); }

/* ---------- Panel de menú: la página se aparta y deja ver el índice ----------
   Centrado, como el logo: el eje de esta web es el centro, y un índice alineado a
   la izquierda bajo un logo centrado deja la vista bailando entre dos ejes.
   El padding de arriba es mayor que el de abajo a propósito — compensa el header
   para que el bloque caiga en el centro ÓPTICO de la pantalla, no en el
   matemático. */
.hpanel {
  position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column;
  /* ANCLADO ARRIBA, no centrado (Juan, 30-jul: "mucho aire ahí").
     Centrado en vertical, el bloque caía en mitad de la pantalla y dejaba un
     hueco enorme entre el logo y el primer enlace — 164 px de nada, medidos. El
     índice tiene que estar donde el pulgar ya está mirando: justo debajo de la
     cabecera. El aire que sobre, que sobre ABAJO. */
  justify-content: flex-start; align-items: center; text-align: center;
  gap: 0; padding: clamp(96px, 15vh, 150px) var(--pad, 22px) 40px;
  /* El VELO y el DESENFOQUE son dos capas distintas a propósito. El desenfoque
     (::before) no se puede animar sin quemar la GPU —cada frame recalcularía el
     blur de la pantalla entera—, así que lo que se anima es su OPACIDAD, con el
     blur ya cocinado. Mismo efecto a la vista, coste de una transición normal. */
  background: linear-gradient(180deg, rgba(8, 6, 5, .96), rgba(8, 6, 5, .84) 55%, rgba(8, 6, 5, .96));
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease, cubic-bezier(.16,1,.3,1)), visibility .3s;
}
.hpanel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  opacity: 0; transition: opacity .44s var(--ease, cubic-bezier(.16,1,.3,1));
}
body.menu-abierto .hpanel { opacity: 1; visibility: visible; transition-duration: .34s; }
body.menu-abierto .hpanel::before { opacity: 1; }

/* ── LOS ENLACES: entran ENFOCÁNDOSE ──
   No suben y ya: llegan desenfocados y se enfocan al llegar. Es el mismo gesto
   que usa la web en el titular del héroe y en la banda de logos, y es lo que hace
   que un menú parezca caro: el ojo lee "esto estaba viniendo", no "esto ha
   aparecido". El `scale` es minúsculo (.96) — se siente, no se ve.

   Solo se animan opacity, transform y filter, y una sola vez por apertura. */
.hpanel a {
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  font-size: clamp(1.32rem, 6.2vw, 1.7rem); font-weight: var(--fw-semi, 600); letter-spacing: -.02em;
  color: var(--cream, #f5efe3); text-decoration: none;
  opacity: 0; transform: translateY(22px) scale(.96); filter: blur(7px);
  /* La SALIDA es más rápida que la entrada (.2s) y sin retardo: al cerrar, el
     usuario ya ha decidido y esperar molesta. Entrar es una invitación; salir,
     un trámite. */
  transition: opacity .2s ease, transform .2s var(--ease, cubic-bezier(.16,1,.3,1)), filter .2s ease;
  will-change: opacity, transform, filter;
}
body.menu-abierto .hpanel a {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .5s var(--ease, cubic-bezier(.16,1,.3,1)), transform .62s var(--ease, cubic-bezier(.16,1,.3,1)), filter .5s var(--ease, cubic-bezier(.16,1,.3,1));
}
/* 55 ms entre uno y otro: por debajo se lee como un bloque, por encima se ve
   lento. El primero espera 80 ms a que el velo haya empezado a cerrarse. */
body.menu-abierto .hpanel a:nth-child(1) { transition-delay: .08s; }
body.menu-abierto .hpanel a:nth-child(2) { transition-delay: .135s; }
body.menu-abierto .hpanel a:nth-child(3) { transition-delay: .19s; }
body.menu-abierto .hpanel a:nth-child(4) { transition-delay: .245s; }
body.menu-abierto .hpanel a:nth-child(5) { transition-delay: .30s; }

/* ── EL FILETE ──
   Una raya de 1px al 6% de opacidad entre enlace y enlace. Casi no se ve: su
   trabajo no es separar, es marcar el RITMO — que el ojo sepa que son cinco
   cosas iguales y no un bloque de texto. Es lo que hace Apple en sus listas.

   Ancho limitado a 62% y centrado: un filete de borde a borde sería una tabla.
   El del último enlace no se pinta (una lista no acaba en raya) y el del primero
   tampoco (arriba ya está el header).

   Entra CON su enlace y con el mismo retardo: si apareciera de golpe, se vería
   la rejilla antes que el contenido. */
.hpanel a + a::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 62%; max-width: 260px; height: 1px;
  background: currentColor; opacity: 0;
  transition: opacity .2s ease;
}
body.menu-abierto .hpanel a + a::before {
  opacity: .07;
  transition: opacity .5s var(--ease, cubic-bezier(.16,1,.3,1));
  transition-delay: inherit;
}
.hpanel a { position: relative; }

/* El dedo encima: el enlace se acerca un pelín. Feedback físico, sin color. */
.hpanel a:active { transform: scale(.97); transition-duration: .1s; }
.hpanel a[aria-current="page"] { color: var(--gold, #feb300); }

/* La firma de la marca cierra el índice. No es un enlace: es el eslogan, y ver
   una frase de marca al final del menú se lee como una tarjeta de visita. */
.hpanel__pie {
  margin: 26px 0 0; font-size: 13px; font-weight: var(--fw-med, 500); letter-spacing: .015em;
  color: var(--muted, #b9ad97);
  opacity: 0; transform: translateY(16px); filter: blur(5px);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
body.menu-abierto .hpanel__pie {
  opacity: 1; transform: none; filter: blur(0); transition-delay: .38s;
  transition: opacity .55s var(--ease, cubic-bezier(.16,1,.3,1)), transform .62s var(--ease, cubic-bezier(.16,1,.3,1)), filter .55s var(--ease, cubic-bezier(.16,1,.3,1));
}

/* ── LA PÁGINA DE DETRÁS SE ALEJA ──
   Un 1,5% de escala hacia atrás mientras el menú está abierto. Es el gesto de
   iOS al abrir el centro de control: no es un panel encima de la página, es la
   página que da un paso atrás para dejar sitio. Se nota sin verse. */
body.menu-abierto main,
body.menu-abierto .site-footer {
  transform: scale(.985);
  transform-origin: 50% 30%;
  transition: transform .6s var(--ease, cubic-bezier(.16,1,.3,1));
}
main, .site-footer { transition: transform .4s var(--ease, cubic-bezier(.16,1,.3,1)); }

@media (max-width: 880px) {
  .hnav { display: none; }
  .hmenu { display: inline-flex; }
  /* Las dos pistas laterales, del ANCHO DEL BOTÓN — no `1fr`.
     Con `1fr auto 1fr` y una pantalla estrecha, la columna de la derecha exige
     sus 44 px para el aspa y la de la izquierda cede lo que puede: el logo se
     iba hasta 12 px del centro en un Android de 360 px (medido). Con las dos
     fijas al mismo ancho, el logo cae en el eje exacto en cualquier pantalla. */
  .header__inner { grid-template-columns: 44px auto 44px; gap: 8px; }
}
@media (min-width: 881px) { .hpanel { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .site-header.hidden { transform: none; }
  .hnav a, .hpanel a, .hmenu i { transition-duration: .01ms; transform: none !important; }
  /* Sin animación de entrada, pero los enlaces SE VEN igual (opacity 1). */
  .hnav a { animation: none; opacity: 1; }
  /* El menú abre y cierra igual, pero sin nada que se mueva ni se desenfoque:
     quien pide menos movimiento no puede quedarse sin poder navegar. */
  .hpanel a, .hpanel__pie { filter: none !important; transform: none !important; transition: opacity .01ms !important; }
  body.menu-abierto .hpanel a, body.menu-abierto .hpanel__pie { opacity: 1; transition-delay: 0s !important; }
  body.menu-abierto main, body.menu-abierto .site-footer { transform: none; }
  .hpanel::before { transition: none; }
}

/* La caja del header. En la landing `.wrap` ya existe (1240px); aquí se repite
   ACOTADA al header para las páginas que no cargan styles.css. Al estar scoped,
   no puede pisar el .wrap del resto de la web. */
.site-header .wrap {
  width: 100%; max-width: var(--maxw, 1240px); margin-inline: auto;
  padding-inline: var(--pad, 22px);
}
.site-header .brand { display: inline-flex; text-decoration: none; }
.site-header .brand img { display: block; }
/* Las fichas pintan sus enlaces con subrayado al pasar; en el header manda el filete. */
.site-header a:hover, .hpanel a:hover { text-decoration: none; }