/* ── Barra con luz (28/09/2026) ───────────────────────────────────────────
   CAPA DE PRUEBA, aparte a propósito: si no gusta, se quitan este archivo,
   barra-luz.js y sus dos líneas en el HTML, y todo vuelve a estar como antes.
   Sale de la ficha 4 de contexto/disenos («Apple style Navbar»).

   Tres cosas, solo en escritorio (por debajo de 1080 px manda el menú):
     1. una ficha que se desliza por debajo del enlace que señalas, con una
        raya cobre debajo; se mueve con los muelles de fluido.js
     2. una luz cobre que recorre el borde de abajo de la barra siguiendo
        al ratón
     3. «Contacto» se rellena de verde oscuro de izquierda a derecha */

.nav{position:relative}
.nav > a, .nav > button{position:relative; z-index:1}

/* La ficha sustituye al fondo gris que ya salía al pasar por encima */
.nav a:not(.btn):hover{background:transparent}

.nav-ficha{
  position:absolute; left:0; top:50%; z-index:0;
  height:34px; margin-top:-17px;
  width:calc(var(--w, 0) * 1px);
  transform:translateX(calc(var(--x, 0) * 1px));
  border-radius:10px;
  background:color-mix(in srgb, var(--tinta) 6%, transparent);
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.nav-ficha.ve{opacity:1}
.nav-ficha::after{
  content:""; position:absolute; left:11px; right:11px; bottom:3px; height:2px;
  border-radius:2px; background:var(--cobre);
  transform:scaleX(0); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-ficha.ve::after{transform:scaleX(1)}
.nav a:not(.btn){transition:color .2s ease}
.nav a:not(.btn):hover{color:var(--tinta)}

/* Luz del borde: una raya de 1 px y un halo suave encima, los dos
   centrados en --luz (la x del ratón dentro de la barra). */
.barra::before, .barra::after{
  content:""; position:absolute; left:0; right:0; pointer-events:none;
  opacity:0; transition:opacity .45s ease;
}
.barra::after{
  bottom:-1px; height:1px;
  background:radial-gradient(220px 1px at var(--luz, 50%) 50%, var(--cobre-sv), transparent);
}
.barra::before{
  bottom:0; height:36px;
  background:radial-gradient(240px 36px at var(--luz, 50%) 100%,
             color-mix(in srgb, var(--cobre) 30%, transparent), transparent);
}
.barra.luz::before, .barra.luz::after{opacity:1}

/* Contacto: relleno cobre que entra desde la izquierda (el naranja del
   diseño original, pasado a nuestro cobre). En claro, el cobre oscuro para
   que el texto blanco se lea (5,4:1); en oscuro, el cobre vivo con el texto
   oscuro que ya lleva el botón. */
.nav .btn{
  background-image:linear-gradient(var(--cobre-txt), var(--cobre-txt));
  background-repeat:no-repeat; background-size:0% 100%;
  transition:background-size .35s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.nav .btn:hover, .nav .btn:focus-visible{background-size:100% 100%}
:root[data-theme="dark"] .nav .btn{background-image:linear-gradient(var(--cobre-sv), var(--cobre-sv))}

@media (max-width:1080px){
  .nav-ficha, .barra::before, .barra::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-ficha::after{transition:none}
  .barra::before, .barra::after{display:none}
}