/* menu.css — EL HOVER DEL MENÚ (6-oct-2026): LA PALABRA QUEDA DENTRO DE UN ECLIPSE.
   Lo carga la cabecera (`_cabecera.html`) y su gemela en `tools/molde-caso.html`. Sólo con mouse.
   Versión limpia (paco: «más clean, lujo y minimalismo, y muy mamona»): fuera los rayos rayados, los chorros
   y el destello en cruz. Queda una luna del color del fondo con un filete de luz de 1 px, una corona apenas
   insinuada, y UNA sola joya: un punto de luz que recorre el anillo una vez y se queda arriba, como el
   anillo de diamante de un eclipse real (o el bisel de un reloj). Prototipos anteriores en
   `_ideas/blog-cabecera-2026-10-06/`. */
.cab{ --ml:246,247,249 }
.cab--claro{ --ml:8,9,12 }
.cab__nav{ position:relative; gap:.6rem }
.cab__nav a{ opacity:1; padding:0 .7rem; display:inline-flex; align-items:center; min-height:44px; position:relative; z-index:1 }
.cab__nav a::after{ display:none }
.ne-t{ color:rgba(var(--ml),.62); transition:color .5s ease }
.cab__nav a[aria-current] .ne-t, .cab__nav a.-tot .ne-t{ color:rgb(var(--ml)) }
.ne-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

@property --ne-a{ syntax:'<angle>'; inherits:false; initial-value:7deg }
.ne-ecl{ position:absolute; left:0; top:50%; width:0; height:0; pointer-events:none; z-index:0; will-change:transform }
.ne-ecl i{ position:absolute; left:0; top:0; width:calc(var(--w,120px) + 2.1em); height:2.55em; border-radius:50%;
  transform:translate(-50%,-50%) scale(.92); opacity:0;
  transition:opacity .5s ease, transform .9s cubic-bezier(.16,1,.3,1), width .6s cubic-bezier(.16,1,.3,1) }
.ne-ecl.-ver i{ opacity:1; transform:translate(-50%,-50%) scale(1) }
/* la luna: el color del fondo, un filete de luz y la corona, casi nada */
.ne-ecl .luna{ background:var(--cab-suelo, #08090C);
  box-shadow:0 0 0 1px rgba(var(--ml),.26), 0 0 22px 1px rgba(var(--ml),.09), 0 0 64px 6px rgba(var(--ml),.05) }
/* la joya: un arco de luz sobre el filete. Recorre el anillo una vez y se queda arriba */
.ne-ecl .joya{ background:transparent; filter:drop-shadow(0 0 3px rgba(var(--ml),.95)) drop-shadow(0 0 12px rgba(var(--ml),.55)) }
.ne-ecl .joya::before{ content:''; position:absolute; inset:0; border-radius:inherit; border:1.25px solid transparent;
  background:conic-gradient(from var(--ne-a), rgba(var(--ml),0) 0deg 296deg, rgba(var(--ml),.5) 336deg, rgb(var(--ml)) 352deg, rgba(var(--ml),0) 360deg) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) }
.ne-ecl.-vuelta .joya::before{ animation:ne-vuelta 1.25s cubic-bezier(.65,0,.35,1) both }
@keyframes ne-vuelta{ from{ --ne-a:-353deg } to{ --ne-a:7deg } }
/* ── un poco más wow (paco, 6-oct): sin volver al ruido de los rayos rayados ── */
/* foco: al recorrer el menú, las demás palabras se apagan y la elegida queda sola en su eclipse */
.cab__nav:hover a:not(.-tot) .ne-t{ color:rgba(var(--ml),.36) }
/* la corona: rayos FINOS y tenues que se encienden después de la luna y giran casi imperceptibles */
.ne-ecl .rayos{ width:calc(var(--w,120px) + 7.5em); height:7.2em; opacity:0; filter:blur(1.2px);
  background:repeating-conic-gradient(from 0deg, rgba(var(--ml),0) 0deg 2.4deg, rgba(var(--ml),.26) 3.1deg, rgba(var(--ml),0) 3.9deg 6.5deg),
             repeating-conic-gradient(from 1.7deg, rgba(var(--ml),0) 0deg 4.6deg, rgba(var(--ml),.15) 5.4deg, rgba(var(--ml),0) 6.3deg 11deg);
  -webkit-mask:radial-gradient(closest-side, transparent 33%, #000 39%, rgba(0,0,0,.35) 62%, transparent 86%);
  mask:radial-gradient(closest-side, transparent 33%, #000 39%, rgba(0,0,0,.35) 62%, transparent 86%);
  transition:opacity 1.1s ease .25s, transform 1.4s cubic-bezier(.16,1,.3,1), width .6s cubic-bezier(.16,1,.3,1);
  animation:ne-gira 120s linear infinite }
.ne-ecl.-ver .rayos{ opacity:.9 }
/* el centrado con `translate` y no con `transform`: el `rotate` del giro rotaba el desplazamiento y el abanico orbitaba fuera de eje */
.ne-ecl .rayos, .ne-ecl.-ver .rayos{ transform:none; translate:-50% -50% }
@keyframes ne-gira{ from{ rotate:0deg } to{ rotate:360deg } }
.ne-ecl.-ver .luna{ box-shadow:0 0 0 1px rgba(var(--ml),.3), 0 0 26px 2px rgba(var(--ml),.13), 0 0 80px 10px rgba(var(--ml),.07) }
/* el anillo de diamante: cuando la joya termina su vuelta, florece una luz suave arriba y se apaga */
.ne-ecl .flor{ width:2.6em; height:2.6em; top:calc(-1.275em + 1px); background:radial-gradient(closest-side, rgba(var(--ml),.85), rgba(var(--ml),.22) 35%, transparent);
  transform:translate(-50%,-50%) scale(.2); opacity:0 }
.ne-ecl.-ver .flor{ transform:translate(-50%,-50%) scale(.2); opacity:0 }   /* le gana a `.ne-ecl.-ver i`; la animación manda sobre las dos */
.ne-ecl.-vuelta .flor{ animation:ne-flor 1.1s cubic-bezier(.16,1,.3,1) 1.05s both }
@keyframes ne-flor{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.2) } 30%{ opacity:1; transform:translate(-50%,-50%) scale(1) } 100%{ opacity:.0; transform:translate(-50%,-50%) scale(.7) } }
@media (prefers-reduced-motion:reduce){ .ne-ecl .rayos{ animation:none } .ne-ecl.-vuelta .flor{ animation:none } }
@media (prefers-reduced-motion:reduce){ .ne-ecl i{ transition:opacity .2s ease } .ne-ecl.-vuelta .joya::before{ animation:none } }