/* ═══════════════════════════════════════════════════════════════
   HEADER — calcado de la referencia.

   Las cuatro decisiones que lo definen, y en qué se diferencian del
   header anterior:

     1. NO hay franja. El header es transparente y encima del contenido;
        lo separa un degradado oscuro que baja desde el borde superior y
        muere solo. Sin fondo sólido, sin borde inferior, sin blur.
     2. Barra delgada (66px) y contenido en un contenedor centrado de
        1440px: en un monitor ancho el logo queda lejos del filo, en un
        portátil queda cerca. No es padding fijo, es el centrado.
     3. Los enlaces van pegados al logo, alineados a la izquierda. El
        header anterior los empujaba a la derecha con un spacer.
     4. Los enlaces son blancos, no grises, y todos se ven IGUAL: la
        barra no marca en qué página estás. Lo único que se enciende es
        el rótulo con submenú al acercarle el puntero.

   El color entra por las variables que define base.css. Este header es
   oscuro siempre, pero las variables se respetan por si vuelve a haber
   una sección de tema claro.
   ═══════════════════════════════════════════════════════════════ */

/* El header no es una franja: es transparente y flota sobre el
   contenido. Lo único que lo separa de lo que pasa por debajo es un
   velo oscuro que baja desde el borde superior y se desvanece.
   Por eso NO lleva fondo sólido, ni borde inferior, ni blur. */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-alto);
  background: none;
  border: none;
}

/* El velo. Es más alto que la barra a propósito (--hd-velo): si midiera
   lo mismo, el degradado terminaría de golpe justo bajo los enlaces y
   se vería el corte.
 *
 * Dos detalles que parecen manías y no lo son:
 *
 *   · Es NEGRO PURO. Antes estaba en rgb(8,8,8), que es más claro que el
 *     hero (#050505): en lugar de oscurecer, aclaraba, y sobre un negro
 *     plano eso se lee como una franja con borde. El negro puro solo
 *     puede oscurecer, así que sobre fondo oscuro desaparece.
 *   · Lleva ocho paradas en curva, no cuatro. Sobre superficies casi
 *     negras el ojo detecta saltos de 2 o 3 niveles (bandas de Mach);
 *     una rampa con pocas paradas se ve como un escalón. Con la curva
 *     el degradado se vuelve imperceptible al llegar arriba del todo.
 *
 * Sigue haciendo su trabajo donde importa: cuando debajo pasa una foto
 * o una sección clara, los enlaces se mantienen legibles. */
.hd::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--hd-velo);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--hd-velo-rgb, 0 0 0), 0.55) 0%,
    rgba(var(--hd-velo-rgb, 0 0 0), 0.43) 12%,
    rgba(var(--hd-velo-rgb, 0 0 0), 0.31) 25%,
    rgba(var(--hd-velo-rgb, 0 0 0), 0.20) 40%,
    rgba(var(--hd-velo-rgb, 0 0 0), 0.11) 55%,
    rgba(var(--hd-velo-rgb, 0 0 0), 0.05) 70%,
    rgba(var(--hd-velo-rgb, 0 0 0), 0.012) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* La barra es de borde a borde, pero su CONTENIDO va en un contenedor
   centrado de 1440px. Es lo que hace que en un monitor ancho el logo
   quede muy separado del filo (~240px en 1920) y en un portátil quede
   pegado (~36px en 1512): no es un padding fijo, es el sobrante del
   centrado. --hd-pad solo actúa como piso en pantallas angostas. */
.hd-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 42px;
  height: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--hd-pad);
}

/* El logo hereda el color de aquí: el SVG usa fill="currentColor". */
.hd-logo {
  display: flex; align-items: center; flex-shrink: 0;
  color: var(--nav-tinta-on); text-decoration: none;
  user-select: none; -webkit-user-select: none;
}
.hd-logo .logo-neiyoz { display: block; }

/* ── Los enlaces ───────────────────────────────────────────────── */
.hd-nav {
  display: flex; align-items: center; gap: 34px;
  flex: 1;            /* empuja la lupa al extremo derecho */
  min-width: 0;
}

.hd-link {
  position: relative;
  isolation: isolate;   /* encierra el z-index:-1 de la píldora aquí
                           dentro; sin esto se hunde tras el header */
  font-size: 15px; font-weight: 400; letter-spacing: -.01em;
  color: var(--nav-tinta-on);
  text-decoration: none; white-space: nowrap;
  padding: 4px 0;
  /* Acompaña al rodillo. Si fuera más corto, el rótulo cambiaría de
     color con la palabra a medio girar. */
  transition: color .42s cubic-bezier(.16, 1, .3, 1);
}

/* ── El rodillo ────────────────────────────────────────────────────
   El rótulo está escrito dos veces (rotulo_rodillo() en config). La
   ventana recorta a la altura de UNA línea; al pasar el puntero, las
   dos copias suben un 100%: la de arriba sale por el techo y la de
   abajo ocupa su sitio. Como dicen lo mismo, se lee como una palabra
   que rueda sobre sí misma en vez de dos que se cruzan.

   El overflow va aquí dentro y no en el enlace: la píldora es un
   pseudo-elemento del enlace con inset negativo, y si recortara ahí
   la píldora quedaría cortada por sus propios bordes. */
.hd-roll {
  display: block; position: relative;
  overflow: hidden;
  line-height: 1.4;   /* deja pasar las colas de la g de "Pages" */
}
.hd-roll-t {
  display: block;
  /* La curva importa más que la duración. Antes era
     cubic-bezier(.76, 0, .24, 1): una entrada-y-salida agresiva que se
     queda casi quieta el primer tercio y luego cruza de golpe. Ese
     arranque parado seguido del tirón es lo que se siente brusco.
     Esta es una salida exponencial: sale de inmediato y frena largo,
     que es como se mueven las cosas con peso. */
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.hd-roll-t:nth-child(2) { position: absolute; top: 0; left: 0; transform: translateY(100%); }

/* Mover texto obliga al navegador a redibujar las letras en cada
   fotograma, y eso se ve como un temblor. Con will-change las manda a
   su propia capa y solo las desplaza. Va bajo :hover a propósito: las
   capas se crean al interactuar y se sueltan al salir, en vez de tener
   doce vivas todo el tiempo sin que nadie las mire. */
.hd-nav:hover .hd-roll-t { will-change: transform; }

.hd-link:hover .hd-roll-t:nth-child(1),
.hd-drop:hover .hd-drop-trigger .hd-roll-t:nth-child(1),
.hd-drop:focus-within .hd-drop-trigger .hd-roll-t:nth-child(1) { transform: translateY(-100%); }

.hd-link:hover .hd-roll-t:nth-child(2),
.hd-drop:hover .hd-drop-trigger .hd-roll-t:nth-child(2),
.hd-drop:focus-within .hd-drop-trigger .hd-roll-t:nth-child(2) { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .hd-roll-t { transition-duration: .01ms !important; }
}

/* Sin marca de página activa en la barra: los enlaces se ven todos
   iguales, como en la referencia. La clase .is-active se sigue poniendo
   en el HTML —la usan el menú móvil y el panel del desplegable— pero
   aquí, a propósito, no pinta nada. */

/* Zona sensible de alto completo, invisible.
 *
 * Sin esto los rótulos NO se comportan igual: los que tienen submenú
 * viven dentro de .hd-drop, que se estira a los 66px de la barra, y
 * los sencillos —Pricing, Contact— solo miden los 29px del texto. Al
 * recorrer la fila con el puntero unos se encendían y otros no, y
 * parecía que el efecto fallaba justo en los sencillos.
 *
 * Va en ::after, que quedó libre al quitar el subrayado. No se ve, no
 * mueve nada de sitio y de paso hace el enlace más fácil de acertar.
 * El ensanche lateral es de 17px por lado, el mismo que la píldora:
 * con gap de 34 entre enlaces las zonas se tocan justo en el borde,
 * sin solaparse ni dejar un hueco muerto entre una y otra. */
.hd-link::after {
  content: '';
  position: absolute;
  top: 50%; left: -17px; right: -17px;   /* mismo ancho que la píldora:
                                            así se puede tocar entera */
  height: var(--nav-alto);
  transform: translateY(-50%);
}

/* ── Desplegable ───────────────────────────────────────────────────
   Sin chevron. Lo que anuncia que hay submenú es la píldora clara que
   crece bajo el rótulo al acercar el puntero, y el panel que baja.

   Tres detalles que hacen que se sienta suave y no brusco:

     · La píldora es un pseudo-elemento con 'inset' negativo, no padding.
       Si fuera padding, el rótulo ocuparía más ancho que sus vecinos y
       el menú entero se movería un pixel al pasar por encima.
     · El panel abre con una curva de salida larga (.36s) y cierra con
       una corta (.2s): abrir despacio se lee como elegante, cerrar
       despacio se lee como lento.
     · Los enlaces entran escalonados de 45 en 45 ms. El retraso vive
       solo en el estado :hover, así que al salir se van todos juntos y
       el cierre no se siente pegajoso. */

/* Ocupa todo el alto de la barra para que el panel cuelgue del borde
   inferior del header y no de la mitad del texto. */
.hd-drop {
  position: relative;
  display: flex; align-items: center;
  align-self: stretch;
}

.hd-drop-trigger { cursor: pointer; }

/* La píldora la llevan TODOS los rótulos, tengan submenú o no.
 *
 * Antes vivía en .hd-drop-trigger, así que Pricing y Contact rodaban
 * pero no se encendían: a media fila el efecto cambiaba y parecía roto.
 * Ahora vive en .hd-link, que es lo que todos son.
 *
 * Va en ::before con 'inset' negativo, no en padding: con padding el
 * rótulo ocuparía más ancho que sus vecinos y el menú entero se
 * movería un pixel al pasar por encima. */
.hd-link::before {
  content: '';
  position: absolute; inset: -3px -17px;   /* ~35px de alto en una barra
                                              de 66: envuelve el rótulo,
                                              no el header entero */
  z-index: -1;
  border-radius: 99px;
  background: var(--hd-pastilla);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .45s cubic-bezier(.16,1,.3,1),
              transform .45s cubic-bezier(.16,1,.3,1);
}

/* Los rótulos con submenú se encienden desde TODA su columna —.hd-drop
   se estira a los 66px de la barra—, no solo desde el texto: si no, la
   píldora se apagaría al bajar el puntero hacia el panel. */
.hd-link:hover::before,
.hd-drop:hover .hd-drop-trigger::before,
.hd-drop:focus-within .hd-drop-trigger::before { opacity: 1; transform: scale(1); }

/* Sobre la píldora blanca el rótulo se lee en oscuro. */
.hd-link:hover,
.hd-drop:hover .hd-drop-trigger,
.hd-drop:focus-within .hd-drop-trigger { color: var(--hd-pastilla-tinta); }

/* ── El panel ──────────────────────────────────────────────────── */
.hd-drop-menu {
  position: absolute; top: 100%; left: 50%;
  min-width: 186px;
  padding-top: 11px;   /* puente invisible: sin esto el menú se cierra
                          al cruzar el hueco entre rótulo y panel */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(.96);
  transform-origin: top center;
  transition: opacity .2s ease,
              transform .2s ease,
              visibility .2s;
}
.hd-drop:hover .hd-drop-menu,
.hd-drop:focus-within .hd-drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .36s cubic-bezier(.22,1,.36,1),
              transform .36s cubic-bezier(.22,1,.36,1),
              visibility .36s;
}

.hd-drop-inner {
  background: var(--hd-panel);
  border-radius: 14px;
  padding: 9px 7px;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.18);
}

.hd-drop-inner a {
  display: block;
  font-size: 14px; font-weight: 400; letter-spacing: -.01em;
  color: var(--hd-panel-tinta);
  text-decoration: none; white-space: nowrap;
  padding: 8px 13px; border-radius: 9px;
  opacity: 0; transform: translateY(-5px);
  transition: opacity .26s ease, transform .26s ease,
              background .15s ease, color .15s ease;
}
.hd-drop:hover .hd-drop-inner a,
.hd-drop:focus-within .hd-drop-inner a { opacity: 1; transform: none; }

/* El escalonado. Solo en :hover, para que el cierre sea de una pieza. */
.hd-drop:hover .hd-drop-inner a:nth-child(1),
.hd-drop:focus-within .hd-drop-inner a:nth-child(1) { transition-delay: .05s; }
.hd-drop:hover .hd-drop-inner a:nth-child(2),
.hd-drop:focus-within .hd-drop-inner a:nth-child(2) { transition-delay: .095s; }
.hd-drop:hover .hd-drop-inner a:nth-child(3),
.hd-drop:focus-within .hd-drop-inner a:nth-child(3) { transition-delay: .14s; }
.hd-drop:hover .hd-drop-inner a:nth-child(4),
.hd-drop:focus-within .hd-drop-inner a:nth-child(4) { transition-delay: .185s; }
.hd-drop:hover .hd-drop-inner a:nth-child(n+5),
.hd-drop:focus-within .hd-drop-inner a:nth-child(n+5) { transition-delay: .23s; }

.hd-drop-inner a:hover { background: var(--hd-panel-hover); }
.hd-drop-inner a.is-active { background: var(--hd-panel-hover); font-weight: 500; }

/* Hijos marcados con 'sangria' => true en config/sitio.php. */
.hd-drop-sub {
  position: relative;
  margin-left: 14px; padding-left: 14px !important;
  font-size: 13.5px !important; opacity: .72;
}
.hd-drop-sub::before {
  content: ''; position: absolute; left: 2px; top: 8px; bottom: 8px;
  width: 1px; background: var(--hd-panel-hover);
}

/* Quien pidió menos movimiento recibe el panel sin animación, pero
   funcionando igual. */
@media (prefers-reduced-motion: reduce) {
  .hd-drop-menu,
  .hd-drop-inner a,
  .hd-link::before { transition-duration: .01ms !important; transition-delay: 0 !important; }
}

/* ── La lupa y la hamburguesa ──────────────────────────────────── */
.hd-acciones {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: auto;
}

.hd-icono {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: none; padding: 0;
  color: var(--nav-tinta-on); cursor: pointer;
  transition: background .18s, opacity .18s;
}
.hd-icono:hover:not(:disabled) { background: var(--nav-hover); }
.hd-icono svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Sin buscador detrás todavía: se ve, no engaña. */
.hd-icono:disabled { opacity: .45; cursor: default; }

.hd-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; align-items: center;
  background: none; border: none; padding: 0; border-radius: 50%;
  cursor: pointer; transition: background .18s;
}
.hd-burger:hover { background: var(--nav-hover); }
.hd-burger .bar {
  display: block; width: 19px; height: 1.5px; border-radius: 2px;
  background: var(--nav-tinta-on);
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.hd-burger.open .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hd-burger.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hd-burger.open .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Menú móvil ────────────────────────────────────────────────── */
.hd-movil {
  display: none;
  position: fixed; top: var(--nav-alto); left: 0; right: 0; z-index: 99;
  max-height: calc(100vh - var(--nav-alto)); overflow-y: auto;
  background: var(--nav-movil-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--nav-borde);
  padding: 8px var(--hd-pad) 24px;
}
.hd-movil.open { display: block; }
/* Se alinea con el header, no con el filo de la pantalla. */
.hd-movil-inner {
  display: flex; flex-direction: column;
  max-width: var(--ancho-max); width: 100%; margin: 0 auto;
}
.hd-movil a {
  font-size: 17px; font-weight: 400; color: var(--nav-tinta-on);
  text-decoration: none; padding: 16px 0;
  border-bottom: 1px solid var(--nav-borde);
  transition: opacity .15s;
}
.hd-movil a:hover { opacity: .6; }
.hd-movil a.is-active { opacity: .5; }
.hd-movil-label {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 18px 0 6px;
}
.hd-movil-sub  { padding-left: 14px !important; }
.hd-movil-sub2 { padding-left: 28px !important; font-size: 15px !important; opacity: .8; }

/* ── Tamaños ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hd-inner { gap: 30px; }
  .hd-nav { gap: 24px; }
  .hd-link { font-size: 14px; }
}
@media (max-width: 860px) {
  .hd-nav { display: none; }
  .hd-burger { display: flex; }
}