/* ══════════════════════════════════════════════════════════════════════════
   cd-nav.css — SISTEMA DE NAVEGACIÓN
   Menú (Cortina) + submenú, rehechos como una sola pieza.

   QUÉ ESTABA MAL
   · El menú era transparente y no respondía al cursor: no había forma de
     saber sobre qué opción estabas. Pasar el ratón no cambiaba nada.
   · El submenú era una caja opaca con borde dorado y sombra pesada. Al lado
     de un menú sin materia, pesaba más que él y parecía traído de otra
     aplicación.

   LA IDEA
   Los dos son la MISMA superficie de luz. El menú no gana una caja: gana un
   plano de luz que se desliza bajo la opción apuntada. El submenú deja la
   caja opaca y pasa a ser esa misma luz, un punto más densa porque está más
   cerca. La continuidad la da un rastro: el submenú nace del acceso que lo
   abrió, no aparece de la nada.

   Todo el movimiento usa la misma curva —una salida elástica corta— para que
   el conjunto se sienta de una sola mano.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --nav-curva:cubic-bezier(.22,1.2,.36,1);
  --nav-oro:var(--n-oro,#f5c842);
  --nav-oro-hi:var(--n-oro-claro,#ffe9a8);
  --nav-viol:var(--n-viol,#9d6bff);
}

/* ══ 1 · MENÚ ══════════════════════════════════════════════════════════════
   Sigue siendo transparente, como te gusta. Lo que gana es RESPUESTA. */

nav.cdm > button,nav.cdm > a{
  position:relative !important;
  isolation:isolate;
  overflow:hidden;
  padding:11px 18px 11px 24px !important;
  transition:color .22s var(--nav-curva), padding-left .3s var(--nav-curva) !important;
}

/* El plano de luz. Nace del borde izquierdo y barre hacia la derecha: la
   opción no se "enciende" de golpe, se recorre. Va detrás del texto (z-index
   -1 sobre el contexto aislado) para no lavar el icono ni la etiqueta. */
nav.cdm > button::before,nav.cdm > a::before,
.cdm a::before,.cdm button::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(245,200,66,.16) 0%, rgba(157,107,255,.10) 45%, transparent 88%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .34s var(--nav-curva);
}
/* La barra viva del borde: el marcador de "aquí estás". */
nav.cdm > button::after,nav.cdm > a::after,
.cdm a::after,.cdm button::after{
  content:'';position:absolute;left:0;top:50%;
  width:2px;height:0;border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,var(--nav-oro-hi),var(--nav-oro));
  box-shadow:0 0 10px rgba(245,200,66,.55);
  transform:translateY(-50%);
  transition:height .3s var(--nav-curva);
}

nav.cdm > button:hover,nav.cdm > a:hover{
  color:var(--nav-oro-hi) !important;
  padding-left:29px !important;          /* el desplazamiento confirma el foco */
}
nav.cdm > button:hover::before,nav.cdm > a:hover::before,
.cdm a:hover::before,.cdm button:hover::before{ transform:scaleX(1) }

nav.cdm > button:hover::after,nav.cdm > a:hover::after,
.cdm a:hover::after,.cdm button:hover::after{ height:64% }

/* Icono: se tiñe y desprende halo, con un giro mínimo que da vida al gesto. */
nav.cdm > button svg,nav.cdm > a svg{
  transition:color .22s, filter .22s, transform .34s var(--nav-curva);
}
nav.cdm > button:hover svg,nav.cdm > a:hover svg{
  color:var(--nav-oro) !important;
  filter:drop-shadow(0 0 7px rgba(245,200,66,.5));
  transform:scale(1.1) rotate(-4deg);
}

/* Pulsar: la opción cede un instante. Sin esto, el clic no se siente. */
nav.cdm > button:active,nav.cdm > a:active{ transform:translateX(1px) scale(.985) }

/* Onda del clic: brota del punto pulsado y se expande. */
nav.cdm .nav-onda::after{
  content:'';position:absolute;left:var(--ondaX,50%);top:var(--ondaY,50%);
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,233,168,.55),transparent 70%);
  animation:navOnda .55s ease-out forwards;pointer-events:none;z-index:-1;
}
@keyframes navOnda{ to{ transform:scale(26); opacity:0 } }