/* ── Firma «Web diseñada por Faro Estudio» ──────────────────────────────
   Al entrar en pantalla, el faro da dos destellos (su «característica»,
   como los faros de verdad) y se apaga. Al pasar el ratón se enciende
   y gira: el haz sale hacia el nombre, destella al mirarte de frente
   y pasa al otro lado, como un faro visto de perfil.

   Hereda el color del footer, así que sirve para cualquier cliente.
   Footer claro → añade la clase .faro-firma--claro
   Ajustes: --faro-luz (cristal), --faro-haz (RGB del haz),
            --faro-fuerza (intensidad del haz), --faro-giro (una vuelta) */

.faro-firma{
  --faro-luz:#DDE3FF;
  --faro-haz:169 182 255;
  --faro-fuerza:1;
  --faro-mezcla:screen;
  --faro-giro:3.2s;
  position:relative;display:inline-flex;align-items:center;gap:.45em;
  padding:.45em 1em;border-radius:999px;
  color:inherit;font-size:inherit;line-height:1.2;white-space:nowrap;text-decoration:none;
  transition:background-color .25s ease;
}
.faro-firma--claro{
  --faro-luz:#6E86FF;
  --faro-haz:110 134 255;
  --faro-fuerza:.55;
  --faro-mezcla:multiply;
}
.faro-firma:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.faro-firma__pre{opacity:.72;transition:opacity .25s ease}
.faro-firma__nombre{font-weight:700;letter-spacing:.01em}

.faro-firma__faro{position:relative;flex:none;width:1.04em;height:1.3em}
.faro-firma__faro svg{display:block;width:100%;height:100%;overflow:visible}
.faro-firma__vidrio{fill:var(--faro-luz);opacity:0;transition:opacity .2s ease}

/* Todo lo que sale de la linterna nace en su centro (8, 6.9 en el viewBox) */
.faro-firma__brillo,.faro-firma__destello,.faro-firma__haz{position:absolute;left:50%;top:34.5%;pointer-events:none}
.faro-firma__brillo,.faro-firma__destello{border-radius:50%;translate:-50% -50%}
.faro-firma__brillo{
  width:1.8em;height:1.8em;opacity:0;transition:opacity .2s ease;
  background:radial-gradient(closest-side,rgb(var(--faro-haz)/calc(.9*var(--faro-fuerza))),rgb(var(--faro-haz)/calc(.22*var(--faro-fuerza))) 50%,transparent);
}
.faro-firma__luz{position:absolute;inset:0;opacity:0;mix-blend-mode:var(--faro-mezcla);transition:opacity .5s ease}
.faro-firma__haz{
  width:4.4em;height:1.25em;margin-top:-.625em;
  background:linear-gradient(90deg,rgb(var(--faro-haz)/calc(.95*var(--faro-fuerza))),rgb(var(--faro-haz)/calc(.4*var(--faro-fuerza))) 35%,transparent);
  clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);
  transform-origin:0 50%;
  animation:faro-gira var(--faro-giro) linear infinite paused;
}
.faro-firma__destello{
  width:2.8em;height:2.8em;opacity:0;
  background:radial-gradient(closest-side,rgb(var(--faro-haz)/var(--faro-fuerza)),rgb(var(--faro-haz)/calc(.3*var(--faro-fuerza))) 38%,transparent);
  animation:faro-destello var(--faro-giro) linear infinite paused;
}

/* Encendido: teclado (y .is-activa para forzarlo) en cualquier dispositivo… */
.faro-firma:is(:focus-visible,.is-activa){background-color:color-mix(in srgb,currentColor 8%,transparent)}
.faro-firma:is(:focus-visible,.is-activa) .faro-firma__pre{opacity:1}
.faro-firma:is(:focus-visible,.is-activa) :is(.faro-firma__vidrio,.faro-firma__luz){opacity:1;transition-duration:.2s}
.faro-firma:is(:focus-visible,.is-activa) .faro-firma__brillo{opacity:.6}
.faro-firma:is(:focus-visible,.is-activa) :is(.faro-firma__haz,.faro-firma__destello){animation-play-state:running}
/* …y ratón solo donde hay ratón: en móvil el hover se queda pegado tras tocar */
@media (hover:hover) and (pointer:fine){
  .faro-firma:hover{background-color:color-mix(in srgb,currentColor 8%,transparent)}
  .faro-firma:hover .faro-firma__pre{opacity:1}
  .faro-firma:hover :is(.faro-firma__vidrio,.faro-firma__luz){opacity:1;transition-duration:.2s}
  .faro-firma:hover .faro-firma__brillo{opacity:.6}
  .faro-firma:hover :is(.faro-firma__haz,.faro-firma__destello){animation-play-state:running}
}

/* Llegada: dos destellos y se apaga (lo activa faro-firma.js) */
.faro-firma.is-llega :is(.faro-firma__vidrio,.faro-firma__brillo){animation:faro-llega 1.6s .35s linear backwards}

/* Un haz que gira, visto de perfil, mide cos(ángulo): por eso cada tramo
   es medio seno (sale rápido, frena en el extremo, vuelve acelerando) */
@keyframes faro-gira{
  0%  {transform:scaleX(0); animation-timing-function:cubic-bezier(.61,1,.88,1)}  /* de espaldas */
  25% {transform:scaleX(1); animation-timing-function:cubic-bezier(.12,0,.39,0)}  /* sobre el nombre */
  50% {transform:scaleX(0); animation-timing-function:cubic-bezier(.61,1,.88,1)}  /* de frente */
  75% {transform:scaleX(-1);animation-timing-function:cubic-bezier(.12,0,.39,0)}  /* al otro lado */
  100%{transform:scaleX(0)}
}
/* El destello solo existe cuando el haz te mira de frente (50 %) */
@keyframes faro-destello{
  0%,100%{opacity:0;scale:.4}
  34%{opacity:0;scale:.4;animation-timing-function:cubic-bezier(.12,0,.39,0)}
  50%{opacity:1;scale:1;animation-timing-function:cubic-bezier(.61,1,.88,1)}
  66%{opacity:0;scale:.4}
}
@keyframes faro-llega{
  0%  {opacity:0}
  6%  {opacity:1}
  17% {opacity:.08}
  27% {opacity:1;animation-timing-function:cubic-bezier(.61,1,.88,1)}
  100%{opacity:0}
}

/* Menos movimiento: sin giro ni destellos; el haz aparece quieto sobre el nombre */
@media (prefers-reduced-motion:reduce){
  .faro-firma__haz{animation:none;transform:scaleX(1)}
  .faro-firma__destello{animation:none}
  .faro-firma.is-llega :is(.faro-firma__vidrio,.faro-firma__brillo){animation:faro-llega-suave 1.4s .35s ease backwards}
}
@keyframes faro-llega-suave{0%,100%{opacity:0}40%{opacity:1}}