/*
  Header — esto SOLO resuelve la MECÁNICA de scroll (agregar/quitar clases para que el
  fondo cambie al pasar un umbral), no el layout. Las 3 clases de abajo (`--sticky`,
  `--float`, `--bar-to-pill`) comparten la MISMA estructura de una sola fila
  (logo/nav/CTA/hamburguesa en `.site-header .wrap`) — elegir entre ellas no es una
  decisión de diseño, es solo qué le pasa al fondo al hacer scroll. La disposición real
  de los elementos (logo centrado, nav dividida, franja utilitaria arriba, header partido
  en dos colores, etc.) es una decisión aparte — ver technical-patterns.md → "Versatilidad"
  → "Header" para varias ideas de layout genuinamente distintas antes de dar por bueno el
  layout de una sola fila tal cual viene aquí.

  Lo único que SÍ debe mantenerse igual entre proyectos es la mecánica: agregar/quitar
  clases (`is-scrolled`/`is-hidden`) — nunca alternar `position` por JS (ver
  technical-patterns.md: ya causó un bug real de header congelado en un bloque de color
  sólido al hacer scroll).

  Variables que cada proyecto define en su :root:
    --header-h              alto del header
    --header-bg             fondo del header en su estado inicial
    --header-bg-scrolled    fondo una vez pasado el umbral de scroll (opcional, cae a --header-bg)
    --header-text           color de texto/links del header
    --header-text-on-hero   color de texto cuando el header flota transparente sobre el hero (opcional)

  Elige UNA variante por proyecto agregando la clase modificadora al <header> —
  ver technical-patterns.md → "Versatilidad" antes de repetir siempre la misma.
*/

.site-header{
  position:sticky;
  top:0;
  z-index:70;
  width:100%;
  transition:background-color .3s ease, box-shadow .3s ease, transform .3s ease, border-radius .3s ease, margin .3s ease;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:var(--header-h, 76px);
}

/* Variante 1 — sticky simple: siempre sólido, sin transformación al hacer scroll */
.site-header--sticky{
  background:var(--header-bg);
  color:var(--header-text);
}

/* Variante 2 — flotante translúcido sobre el hero → sólido y en píldora al hacer scroll */
.site-header--float{
  background:transparent;
  color:var(--header-text-on-hero, var(--header-text));
}
.site-header--float.is-scrolled{
  margin:10px auto 0;
  max-width:min(1100px, 94vw);
  border-radius:999px;
  background:var(--header-bg-scrolled, var(--header-bg));
  color:var(--header-text);
  box-shadow:var(--shadow-3, 0 10px 30px rgba(0,0,0,.15));
}

/* Variante 3 — franja sólida completa hasta el scroll, luego píldora flotante */
.site-header--bar-to-pill{
  background:var(--header-bg);
  color:var(--header-text);
}
.site-header--bar-to-pill.is-scrolled{
  margin:10px auto 0;
  max-width:min(1100px, 94vw);
  border-radius:999px;
  background:var(--header-bg-scrolled, var(--header-bg));
  box-shadow:var(--shadow-3, 0 10px 30px rgba(0,0,0,.15));
}

/* Modificador opcional, combinable con cualquier variante — ocultar al bajar, mostrar al subir */
.site-header.is-hidden{ transform:translateY(-110%); }

/* El dropdown de mobile necesita su propio color de texto explícito — nunca heredar
   el del header transparente (ya causó links invisibles blanco-sobre-blanco) */
.main-nav.is-open{ color:var(--header-text); }

.site-header a:focus-visible,
.site-header button:focus-visible{ outline:2.5px solid currentColor; outline-offset:2px; }

/* Saltar al contenido principal — invisible salvo con foco de teclado (ver technical-patterns.md → Accesibilidad) */
.skip-link{
  position:absolute; left:12px; top:-100px; z-index:100;
  background:#fff; color:#111; padding:.8em 1.2em; border-radius:8px;
  box-shadow:var(--shadow-3, 0 8px 24px rgba(0,0,0,.2));
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

.nav-toggle{ min-width:44px; min-height:44px; } /* objetivo táctil mínimo aunque el ícono visual sea chico */

@media (prefers-reduced-motion: reduce){
  .site-header{ transition:none; }
}