/* Efectos de entrada y de luz, activados con data-efecto="…" (ver js/efectos.js). Colores solo de tokens-sitio.css.
   Solo transform y opacity en lo que corre sin parar; el desenfoque y el barrido corren una vez, al llegar a la vista.
   Con movimiento reducido todo queda en su estado final y sin animación. */

/* ---------- blur-fade ---------- */
.ef-js [data-efecto~="blur-fade"]:not(.ef-visto){opacity:0;transform:translate3d(var(--ef-dx,0),var(--ef-dy,14px),0);filter:blur(var(--ef-blur,6px))}
.ef-js [data-efecto~="blur-fade"]{transition:opacity .7s var(--curva) var(--ef-retraso,0ms),transform .7s var(--curva) var(--ef-retraso,0ms),filter .7s var(--curva) var(--ef-retraso,0ms)}
.ef-js [data-efecto~="blur-fade"].ef-listo{transition:none;filter:none}

/* ---------- texto-barrido: una banda de luz descubre el titular de izquierda a derecha ---------- */
.ef-js [data-efecto~="texto-barrido"]:not(.ef-listo){
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(90deg,var(--tinta) 0,var(--tinta) 38%,var(--oro) 38%,var(--acento) 62%,transparent 62%,transparent 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
}
.ef-js [data-efecto~="texto-barrido"].ef-visto:not(.ef-listo){animation:ef-barrido var(--ef-dur,1.5s) cubic-bezier(.65,.05,.35,1) var(--ef-retraso,0ms) both}
@keyframes ef-barrido{to{background-position:0 0}}
@media (forced-colors:active){.ef-js [data-efecto~="texto-barrido"]:not(.ef-listo){color:inherit;-webkit-text-fill-color:currentColor;background:none}}

/* ---------- marquee: cinta infinita; cada pista se desplaza su propio ancho y la siguiente ocupa su lugar ---------- */
.ef-marquee{--ef-gap:12px;display:flex;gap:var(--ef-gap);overflow:hidden;padding-block:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent)}
.ef-pista{display:flex;flex:none;gap:var(--ef-gap);min-width:100%;justify-content:space-around;animation:ef-marquee var(--ef-dur,40s) linear infinite}
.ef-pista>*{display:flex;flex:none;gap:var(--ef-gap);margin:0;padding:0;list-style:none}
.ef-reversa .ef-pista{animation-direction:reverse}
.ef-marquee:hover .ef-pista,.ef-marquee:focus-within .ef-pista,.ef-marquee.ef-fuera .ef-pista{animation-play-state:paused}
@keyframes ef-marquee{to{transform:translate3d(calc(-100% - var(--ef-gap)),0,0)}}

/* ---------- brillo: un destello gira bajo el borde del botón ---------- */
[data-efecto~="brillo"]{position:relative;isolation:isolate;overflow:hidden;background:none!important}
[data-efecto~="brillo"]::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:inherit;background:var(--ef-brillo-fondo,var(--accion))}
.ef-chispa{position:absolute;left:50%;top:50%;z-index:-2;width:220%;aspect-ratio:1;margin:0;translate:-50% -50%;
  background:conic-gradient(from 270deg,transparent 0,var(--ef-brillo-color,var(--sobre-noche)) 90deg,transparent 90deg);
  animation:ef-giro var(--ef-brillo-dur,3.2s) linear infinite;will-change:transform}
[data-efecto~="brillo"].ef-fuera .ef-chispa{animation-play-state:paused}
@keyframes ef-giro{to{transform:rotate(360deg)}}

/* ---------- borde-luz: un haz de luz recorre el borde de la tarjeta ---------- */
[data-efecto~="borde-luz"]{position:relative}
.ef-borde{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;padding:1.5px;pointer-events:none;
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0)}
.ef-borde::before{content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 0deg,transparent 0,transparent 78%,rgb(var(--oro-rgb) / .15) 84%,var(--oro-noche) 96%,var(--sobre-noche) 100%);
  animation:ef-giro var(--ef-borde-dur,7s) linear infinite;will-change:transform}
[data-efecto~="borde-luz"].ef-fuera .ef-borde::before{animation-play-state:paused}

/* ---------- foco: resplandor que sigue al puntero ---------- */
[data-efecto~="foco"]{position:relative;overflow:hidden}
.ef-foco-orbe{position:absolute;left:0;top:0;z-index:-1;width:var(--ef-foco-tam,300px);aspect-ratio:1;border-radius:50%;opacity:0;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(circle,rgb(var(--oro-rgb) / .5) 0,rgb(var(--oro-rgb) / .18) 45%,transparent 70%)}

/* ---------- movimiento reducido: estado final, sin animación ---------- */
@media (prefers-reduced-motion:reduce){
  .ef-js [data-efecto~="blur-fade"],.ef-js [data-efecto~="blur-fade"]:not(.ef-visto){opacity:1;transform:none;filter:none;transition:none}
  .ef-js [data-efecto~="texto-barrido"]:not(.ef-listo){color:inherit;-webkit-text-fill-color:currentColor;background:none;animation:none}
  .ef-chispa,.ef-borde,.ef-foco-orbe{display:none}
  [data-efecto~="brillo"]{background:var(--ef-brillo-fondo,var(--accion))!important}
  [data-efecto~="brillo"]::after{display:none}
  .ef-pista{animation:none}
  .ef-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ef-pista{flex:1 1 auto;min-width:0}
  .ef-pista>*{flex-wrap:wrap;justify-content:center}
}

/* ---------- video-fondo: video de fondo que solo se pide al acercarse y se pausa fuera de pantalla (ver js/efectos.js) ---------- */
video[data-efecto~="video-fondo"]{background:transparent}