/* Nav principal (§6.1–2): horizontal caps con subrayado que crece desde el centro; overlay móvil <1024px. */

.c-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-nav__item {
  margin: 0;
}

.c-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-1);
  font-family: var(--ff-display);
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-caps-2);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--div-ink);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Subrayado dorado 1.5px, ancho ~60%, centrado, offset ~10px. */
.c-nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 20%;
  bottom: 6px;
  height: 1.5px;
  background: var(--div-accent-strong);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}

.c-nav__link:hover,
.c-nav__link:focus-visible,
.c-nav__link[aria-current],
.c-nav__item.is-division-active > .c-nav__link,
.c-nav__item.is-active-trail > .c-nav__link {
  color: var(--div-accent-strong);
}

.c-nav__link:hover::after,
.c-nav__link:focus-visible::after,
.c-nav__link[aria-current]::after,
.c-nav__item.is-division-active > .c-nav__link::after,
.c-nav__item.is-active-trail > .c-nav__link::after {
  transform: scaleX(1);
}

/* ——— Toggle: hamburguesa fina, solo <1024px, área 44px ——— */

.c-nav-toggle {
  position: relative;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--div-ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.c-nav-toggle svg {
  width: 24px;
  height: 24px;
}

.c-nav-toggle:hover,
.c-nav-toggle:focus-visible {
  color: var(--div-accent-strong);
}

/* Overlay del menú.
   NO depende del ancho: la portada («NuevaPortada») lleva su propio toggle
   siempre visible y no tiene barra de cabecera donde desplegar el menú en
   línea, así que ahí el overlay es el único modo. En el resto del sitio se
   sigue llegando a él sólo por debajo de 1024px, porque es el único ancho al
   que el toggle está visible. */
.c-nav {
  display: none;
}

html.is-nav-open {
  overflow: clip;
}

/* Overlay a pantalla completa sobre --div-bg-deep. */
html.is-nav-open .c-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--gutter);
  overflow-y: auto;
  background: var(--div-bg-deep);
  opacity: 1;
  transition: opacity var(--dur-med) var(--ease-out);
}

html.is-nav-open .c-nav > .c-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

html.is-nav-open .c-nav .c-nav__link {
  font-size: var(--fs-h3);
  color: var(--div-on-deep);
}

/* Sobre --div-bg-deep, --div-accent-strong no llega a 3:1 en todas las
   divisiones: el estado activo/hover conserva --div-on-deep y lo señala
   el subrayado (en currentColor para heredar ese contraste). */
html.is-nav-open .c-nav .c-nav__link::after {
  background: currentColor;
}

html.is-nav-open .c-nav .c-nav__link:hover,
html.is-nav-open .c-nav .c-nav__link:focus-visible,
html.is-nav-open .c-nav .c-nav__link[aria-current],
html.is-nav-open .c-nav .c-nav__item.is-division-active > .c-nav__link {
  color: var(--div-on-deep);
}

/* Segundo nivel: inline, menor. */
html.is-nav-open .c-nav .c-nav__list .c-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

html.is-nav-open .c-nav .c-nav__list .c-nav__list .c-nav__link {
  font-size: var(--fs-nav);
  /* --div-ink-soft está calibrado sobre --div-bg, no sobre bg-deep. */
  color: var(--div-on-deep);
}

/* Entrada: fade + translateY escalonado (sin @starting-style aparece sin animar). */
html.is-nav-open .c-nav .c-nav__item {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

@starting-style {
  html.is-nav-open .c-nav {
    opacity: 0;
  }

  html.is-nav-open .c-nav .c-nav__item {
    opacity: 0;
    transform: translateY(12px);
  }
}

html.is-nav-open .c-nav .c-nav__item:nth-child(2) { transition-delay: 60ms; }
html.is-nav-open .c-nav .c-nav__item:nth-child(3) { transition-delay: 120ms; }
html.is-nav-open .c-nav .c-nav__item:nth-child(4) { transition-delay: 180ms; }
html.is-nav-open .c-nav .c-nav__item:nth-child(5) { transition-delay: 240ms; }
html.is-nav-open .c-nav .c-nav__item:nth-child(6) { transition-delay: 300ms; }
html.is-nav-open .c-nav .c-nav__item:nth-child(n+7) { transition-delay: 360ms; }

/* Con el overlay abierto el toggle pasa a × fino (dos trazos currentColor). */
html.is-nav-open .c-nav-toggle {
  color: var(--div-on-deep);
}

html.is-nav-open .c-nav-toggle .c-icon {
  display: none;
}

html.is-nav-open .c-nav-toggle::before,
html.is-nav-open .c-nav-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

html.is-nav-open .c-nav-toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

html.is-nav-open .c-nav-toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 1023.98px) {
  .c-nav-toggle {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  /* En la cabecera el menú se despliega en línea; en la portada no hay
     cabecera, así que el overlay es el único modo y por eso estas reglas
     van scoped a .c-header__nav. */
  .c-header__nav .c-nav {
    display: block;
  }

  .c-header__nav .c-nav > .c-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  /* Segundo nivel: desplegable discreto al hover/focus. */
  .c-header__nav .c-nav__item {
    position: relative;
  }

  .c-header__nav .c-nav__list .c-nav__list {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    display: none;
    flex-direction: column;
    min-width: 14rem;
    padding: var(--space-3);
    transform: translateX(-50%);
    background: var(--div-surface);
    border: 1px solid var(--div-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
  }

  .c-header__nav .c-nav__item:hover > .c-nav__list,
  .c-header__nav .c-nav__item:focus-within > .c-nav__list {
    display: flex;
  }

  .c-header__nav .c-nav__list .c-nav__list .c-nav__link {
    width: 100%;
    justify-content: center;
    font-size: var(--fs-label);
  }
}