/* =========================================================
   Centinelas — Menú de la portada

   Barra pegada arriba con un enlace por sección. El subrayado
   lima marca en cuál estás; lo mueve navegacion.js poniendo
   aria-current, que además es lo que anuncian los lectores de
   pantalla.
   ========================================================= */

:root {
  /* Lo usan el hero (para descontarlo de su altura) y el
     scroll-margin de las secciones (para que la barra no tape
     el título al saltar). Cambiarlo aquí lo ajusta todo. */
  --alto-menu: 58px;
}

.menu {
  position: sticky;
  top: 0;
  /* Por encima de todo lo de la página. Los blobs van en z-index
     negativo dentro de sus secciones, así que no compiten. */
  z-index: 30;
  background: rgba(8, 8, 15, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1c1c26;
}

.menu__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 46px);

  max-width: 1120px;
  height: var(--alto-menu);
  margin: 0 auto;
  padding: 0 16px;
  list-style: none;
}

.menu__enlace {
  position: relative;
  display: block;
  padding: 6px 2px;

  color: var(--c-texto-suave);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(.85rem, 2.2vw, .98rem);
  white-space: nowrap;

  transition: color .2s ease;
}

/* El subrayado se dibuja siempre y se revela con scaleX: animar la
   escala no obliga al navegador a recalcular la maquetación, que es
   lo que pasaría animando el ancho. */
.menu__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: var(--c-lima);
  transform: scaleX(0);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.menu__enlace:hover,
.menu__enlace:focus-visible {
  color: var(--c-texto);
}

/* Al pasar por encima se insinúa; entero solo en la sección actual */
.menu__enlace:hover::after { transform: scaleX(.45); }

/* "page": la página actual (el menú lleva a páginas: /, /actividades,
   /juegos, /musica). "true" lo sigue usando navegacion.js si alguna
   página vuelve a tener secciones con anclas. */
.menu__enlace[aria-current="true"],
.menu__enlace[aria-current="page"] {
  color: var(--c-texto);
  font-weight: 600;
}

.menu__enlace[aria-current="true"]::after,
.menu__enlace[aria-current="page"]::after { transform: scaleX(1); }

.menu__enlace:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 5px;
  border-radius: 4px;
}

/* ---------- Desplazamiento suave ---------- */

html { scroll-behavior: smooth; }

/* Sin esto, al saltar a una sección la barra le tapa el encabezado:
   el navegador la deja justo en el borde superior, que es donde
   está la barra. */
#inicio,
#calendario-adviento,
#musica {
  scroll-margin-top: var(--alto-menu);
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .menu__enlace,
  .menu__enlace::after { transition: none; }
}