/* ==========================================================================
   HEADER Y NAVEGACIÓN
   Mega-menú de dos familias en escritorio, drawer en mobile.

   El estado por defecto es OPACO. Sólo las páginas con foto full-bleed detrás
   del header llevan `data-hero` y arrancan transparentes. Al revés —
   transparente por defecto— las 11 páginas sin hero mostrarían tinta clara
   sobre fondo marfil, es decir nada.
   ========================================================================== */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--color-ink);
  transition:
    height var(--dur-sticky) var(--ease-micro),
    color var(--dur-sticky) var(--ease-micro);
}

/* Barra opaca. Visible salvo en el hero sin scrollear. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--color-border);
  background-color: rgb(250 248 245 / 0.92);
  backdrop-filter: blur(12px);
  transition: opacity var(--dur-sticky) var(--ease-micro);
}

/* Scrim sobre la foto del hero. Sin él los links de 12px quedan en 1.29:1
   contra la pared blanca del retrato de mobile. */
.header::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: -1;
  height: calc(var(--header-h) * 1.6);
  background-image: var(--overlay-header);
  opacity: 0;
  transition: opacity var(--dur-sticky) var(--ease-micro);
}

/* Páginas con hero: transparente mientras no se scrollee. */
.header[data-hero]:not([data-compact]) {
  color: var(--color-on-deep);
}

.header[data-hero]:not([data-compact])::before {
  opacity: 0;
}

.header[data-hero]:not([data-compact])::after {
  opacity: 1;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 100%;
}

.header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  margin-inline-end: auto;
  color: inherit;
  font-size: 1rem;
  text-decoration: none;
}

/* --- Botón de hamburguesa (sólo mobile) ---------------------------------- */

.header__toggle {
  display: grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.header__toggle-bars,
.header__toggle-bars::before,
.header__toggle-bars::after {
  display: block;
  width: 20px;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--dur-micro) var(--ease-micro);
}

.header__toggle-bars::before,
.header__toggle-bars::after {
  content: "";
  position: absolute;
}

.header__toggle-bars::before {
  transform: translateY(-6px);
}

.header__toggle-bars::after {
  transform: translateY(6px);
}

/* Hamburguesa → cruz. */
.header__toggle[aria-expanded="true"] .header__toggle-bars {
  background-color: transparent;
}

.header__toggle[aria-expanded="true"] .header__toggle-bars::before {
  transform: rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__toggle-bars::after {
  transform: rotate(-45deg);
}

/* --- Drawer de mobile ----------------------------------------------------- */

.header__nav {
  position: fixed;
  inset-block: var(--header-h) 0;
  inset-inline-end: 0;
  z-index: 60;
  width: min(22rem, 86vw);
  padding: var(--space-8) var(--gutter) var(--space-16);
  overflow-y: auto;
  border-inline-start: var(--hairline);
  background-color: var(--color-bg);
  color: var(--color-ink);
  transform: translateX(101%);
  visibility: hidden;
}

.header__nav[data-abierto] {
  transform: translateX(0);
  visibility: visible;
}

/* La transición del drawer se declara SOLO en el rango donde el drawer existe.
   Declarada en la regla base, un cambio de ancho de mobile a desktop dispara
   una animación de entrada del nav que no tiene ningún sentido ahí. */
@media (max-width: 63.999rem) {
  .header__nav {
    transition:
      transform var(--dur-sticky) var(--ease-micro),
      visibility var(--dur-sticky) var(--ease-micro);
  }
}

html[data-sin-scroll] {
  overflow: hidden;
}

/* --- Lista ---------------------------------------------------------------- */

.nav,
.nav__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav__link,
.nav__trigger {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-target);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-align: start;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

/* El título largo de la familia, dentro del panel. En la barra sólo entra
   "Ginecología"; acá entra el nombre completo. En el drawer sobra: el botón
   que acabás de tocar dice lo mismo tres píxeles más arriba. */
.nav__panel-titulo {
  display: none;
  margin: 0;
}

/* --- Filas del panel ------------------------------------------------------
   Dos líneas: nombre y, debajo, de qué se trata el área en lenguaje de
   paciente. Es lo que separa un menú de un índice: alguien que no sabe si lo
   suyo es "salud íntima" o "regenerativa" lo resuelve acá y no entrando a las
   cinco páginas. Y de paso le da al panel algo que mirar.                   */

.nav__sublink {
  display: grid;
  align-content: center;
  gap: 0.125rem;
  width: 100%;
  min-height: var(--touch-target);
  padding-block: var(--space-2);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid transparent;
  color: inherit;
  font-family: var(--font-body);
  text-align: start;
  text-decoration: none;
  transition:
    border-color var(--dur-micro) var(--ease-micro),
    background-color var(--dur-micro) var(--ease-micro);
}

.nav__sublink-nombre {
  font-size: var(--type-body);
  line-height: 1.3;
  transition: color var(--dur-micro) var(--ease-micro);
}

.nav__sublink-desc {
  color: var(--color-muted);
  font-size: var(--type-eyebrow);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.nav__sublink:hover,
.nav__sublink:focus-visible,
.nav__sublink[aria-current] {
  border-inline-start-color: var(--color-accent);
}

/* Página activa: el nude oscuro es el único color de estado del sistema. */
.nav__link[aria-current],
.nav__item--grupo.is-activo > .nav__trigger,
.nav__sublink[aria-current] .nav__sublink-nombre,
.nav__sublink:hover .nav__sublink-nombre,
.nav__sublink:focus-visible .nav__sublink-nombre {
  color: var(--color-accent-ink);
}

.nav__chevron {
  width: 0.45em;
  height: 0.45em;
  margin-inline-start: auto;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--dur-micro) var(--ease-micro);
}

.nav__trigger[aria-expanded="true"] .nav__chevron {
  transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

/* El panel se anima con grid-template-rows, no con height: es la única forma
   de animar "hasta el alto del contenido" sin medirlo en JS. */
.nav__item--grupo {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows var(--dur-sticky) var(--ease-micro);
}

.nav__item--grupo:has(> .nav__trigger[aria-expanded="true"]) {
  grid-template-rows: auto 1fr;
}

.nav__panel {
  overflow: hidden;
}

/* --- Escritorio ----------------------------------------------------------- */

/* En desktop el hero es un split y el header cruza DOS fondos a la vez:
   marfil a la izquierda, foto oscura a la derecha. Mantenerlo transparente
   obliga a parchear el color de cada elemento según sobre cuál cae — y se
   vuelve a romper cada vez que se agrega un link al menú. Acá la barra opaca
   va desde el primer píxel: el hero sigue siendo dramático por la foto a
   pantalla completa, no por la transparencia del header.

   En mobile sí queda transparente con su scrim, que es donde el efecto vale
   y donde hay un solo fondo debajo. */
@media (min-width: 48rem) {
  .header[data-hero]:not([data-compact]) {
    color: var(--color-ink);
  }

  .header[data-hero]:not([data-compact])::before {
    opacity: 1;
  }

  .header::after {
    content: none;
  }
}

@media (min-width: 64rem) {
  .header__toggle {
    display: none;
  }

  .header__nav {
    position: static;
    width: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    color: inherit;
    transform: none;
    visibility: visible;
  }

  .nav {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .nav__item--grupo {
    position: relative;
    display: block;
  }

  /* El panel cuelga del borde inferior de la barra, no flota debajo del
     botón. El trigger está centrado verticalmente en el header, así que entre
     su base y la línea de la barra sobra la mitad del aire: ese es el
     `calc`. Al quedar pegado, el panel no lleva borde superior propio — se
     lee como la barra desplegándose hacia abajo y no como una caja aparte.

     Blanco sobre el marfil de la página: separa sin sombra, que el sistema
     no tiene (D-07). */
  .nav__panel {
    position: absolute;
    inset-block-start: calc(100% + (var(--header-h) - var(--touch-target)) / 2);
    inset-inline-start: calc(var(--space-6) * -1);
    min-width: 22rem;
    padding: var(--space-6) var(--space-6) var(--space-4);
    border: var(--hairline);
    border-block-start: 0;
    background-color: var(--color-surface);

    /* La apertura es una cortina: el panel se descubre de arriba hacia abajo
       en lugar de aparecer entero. `clip-path` anima en el compositor y no
       obliga a medir el alto en JavaScript. */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition:
      clip-path var(--dur-gesture) var(--ease-out),
      visibility 0s linear var(--dur-gesture);
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition:
      clip-path var(--dur-gesture) var(--ease-out),
      visibility 0s;
  }

  .nav__panel-titulo {
    display: block;
    padding-bottom: var(--space-4);
    border-bottom: var(--hairline);
    color: var(--color-muted);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }

  /* Las filas entran detrás de la cortina, escalonadas. Sin esto el panel se
     abre y el contenido ya estaba ahí: el movimiento se siente mecánico. */
  .nav__panel-titulo,
  .nav__panel .nav__sublink {
    opacity: 0;
    transform: translateY(0.375rem);
    transition:
      opacity var(--dur-sticky) var(--ease-out),
      transform var(--dur-sticky) var(--ease-out),
      border-color var(--dur-micro) var(--ease-micro),
      background-color var(--dur-micro) var(--ease-micro);
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel .nav__panel-titulo,
  .nav__trigger[aria-expanded="true"] + .nav__panel .nav__sublink {
    opacity: 1;
    transform: none;
  }

  /* El escalonado va por `nth-child` y no por una variable en el atributo
     `style`: la CSP es `style-src 'self'`, sin `unsafe-inline`, así que el
     HTML generado no puede llevar estilos propios (D-16). Seis filas cubren
     el menú actual con margen. */
  .nav__trigger[aria-expanded="true"] + .nav__panel .nav__panel-titulo {
    transition-delay: 40ms;
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel li:nth-child(1) .nav__sublink {
    transition-delay: 90ms;
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel li:nth-child(2) .nav__sublink {
    transition-delay: 135ms;
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel li:nth-child(3) .nav__sublink {
    transition-delay: 180ms;
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel li:nth-child(4) .nav__sublink {
    transition-delay: 225ms;
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel li:nth-child(5) .nav__sublink {
    transition-delay: 270ms;
  }

  .nav__trigger[aria-expanded="true"] + .nav__panel li:nth-child(6) .nav__sublink {
    transition-delay: 315ms;
  }

  .nav__lista {
    display: grid;
  }

  .nav__panel .nav__sublink {
    padding: var(--space-3) var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
    border-inline-start-width: 2px;
  }

  .nav__panel li + li .nav__sublink {
    border-top: var(--hairline);
  }

  .nav__panel .nav__sublink:hover,
  .nav__panel .nav__sublink:focus-visible {
    background-color: var(--color-bg);
  }

  .header__cta {
    display: inline-flex;
  }
}

@media (max-width: 63.999rem) {
  .header__cta {
    display: none;
  }
}

/* --- Sin JavaScript -------------------------------------------------------
   La navegación nunca se esconde detrás de un script: se despliega entera,
   plana y visible, y el botón de hamburguesa desaparece porque no haría nada.
   -------------------------------------------------------------------------- */

@media (scripting: none) {
  .header {
    position: static;
    height: auto;
    padding-block: var(--space-4);
    color: var(--color-ink);
  }

  .header[data-hero]:not([data-compact]) {
    color: var(--color-ink);
  }

  .header[data-hero]:not([data-compact])::before {
    opacity: 1;
  }

  .header::after {
    content: none;
  }

  .header__inner {
    flex-wrap: wrap;
  }

  .header__toggle {
    display: none;
  }

  .header__nav {
    position: static;
    width: 100%;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    transform: none;
    visibility: visible;
  }

  .nav__item--grupo {
    grid-template-rows: auto 1fr;
  }

  .nav__panel {
    position: static;
    min-width: 0;
    clip-path: none;
    visibility: visible;
    border: 0;
    padding: 0;
  }

  /* Las filas y el título arrancan invisibles esperando la apertura del
     panel, que acá no va a ocurrir nunca: no hay quién toque el botón. */
  .nav__panel-titulo,
  .nav__panel .nav__sublink {
    opacity: 1;
    transform: none;
  }

  .nav__chevron {
    display: none;
  }

  .header__cta {
    display: inline-flex;
  }

  /* El hero arranca pegado al borde superior contando con un header fijo. */
  .hero__body {
    padding-block-start: var(--space-8);
  }
}