/* assets/css/menu-unificado.css */

/* Paleta y escalas */
:root{
  --menu-fg: #e8f3ff;
  --menu-fg-dim: #b7c7da;
  --menu-accent: #66e0ff;      /* cian neón */
  --menu-accent-2: #a86bff;    /* violeta */
  --menu-bg: transparent;

  /* tipografía fluida: ~14–17px en mobile → ~18–20px en desktop */
  --menu-size: clamp(0.9rem, 1vw + 0.6rem, 1.125rem);
  --menu-weight: 550;
  --menu-letter: 0.02em;       /* tracking leve */
  --menu-case-transform: none; /* cambia a uppercase si te gusta */
  --menu-line-height: 1.2;
}

/* Suavizado de fuentes y render */
.menu, .menu *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Contenedor del menú */
.menu{
  font-family: var(--font-sans, system-ui), sans-serif;
  background: var(--menu-bg);
  line-height: var(--menu-line-height);
}

/* Lista */
.menu__list{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.8vw, 1.25rem);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Enlaces */
.menu__link{
  position: relative;
  display: inline-block;
  padding: .4rem .1rem;
  font-size: var(--menu-size);
  font-weight: var(--menu-weight);
  letter-spacing: var(--menu-letter);
  text-transform: var(--menu-case-transform);
  color: var(--menu-fg);
  text-decoration: none;
  transition: 
    color .25s ease,
    text-shadow .25s ease,
    transform .25s ease;
  outline: none;
}

/* Subtítulo pequeño opcional: <span class="menu__muted">Beta</span> */
.menu__muted{
  display:inline-block;
  font-size: 0.72em;
  font-weight: 500;
  color: var(--menu-fg-dim);
  margin-left: .35em;
  letter-spacing: 0.02em;
}

/* Subrayado gradiente animado (línea fina) */
.menu__link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:100%; height:2px;
  background:
    linear-gradient(90deg, var(--menu-accent), var(--menu-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
  opacity:.95;
  border-radius: 2px;
}

/* Hover / Focus-visible */
.menu__link:hover,
.menu__link:focus-visible{
  color: #ffffff;
  text-shadow: 0 0 8px rgba(102,224,255,.7);
}
.menu__link:hover::after,
.menu__link:focus-visible::after{
  transform: scaleX(1);
}

/* Estado activo (página actual) */
.menu__link[aria-current="page"],
.menu__link.is-active{
  color: #ffffff;
  text-shadow: 0 0 10px rgba(168,107,255,.68);
}
.menu__link[aria-current="page"]::after,
.menu__link.is-active::after{
  transform: scaleX(1);
}

/* Compacto (sticky) */
.menu--compact .menu__link{
  font-size: clamp(0.85rem, .8vw + .55rem, 1rem);
  padding:.3rem .05rem;
}

/* Alto contraste */
@media (prefers-contrast: more){
  :root{
    --menu-fg:#fff;
    --menu-fg-dim:#dbe5f3;
  }
  .menu__link::after{ opacity:1; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .menu__link,
  .menu__link::after{
    transition: none !important;
  }
}