/* Efectos dinamicos compartidos (mismos que la home): luz que sigue al cursor,
   rejilla y auroras de fondo, borde de luz en las tarjetas y barrido en los titulares.
   Todo va en clases .fx-* propias: no toca ningun estilo existente de la pagina. */
@property --fxa{syntax:'<angle>';initial-value:0deg;inherits:false}

.fx-cursor{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:60;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle,rgba(90,130,255,.15),rgba(90,130,255,.05) 42%,transparent 68%);filter:blur(10px);will-change:transform}
.fx-cursor.on{opacity:1}

.fx-grid,.fx-aurora{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx-grid{background-image:radial-gradient(rgba(150,180,255,.15) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 120% 75% at 50% 45%,#000 32%,transparent 78%);mask-image:radial-gradient(ellipse 120% 75% at 50% 45%,#000 32%,transparent 78%);animation:fxGridDrift 34s linear infinite}
@keyframes fxGridDrift{to{background-position:28px 56px}}
.fx-aurora::before,.fx-aurora::after{content:'';position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;filter:blur(90px);opacity:.30}
.fx-aurora::before{left:-16%;top:-24%;background:radial-gradient(circle,rgba(59,99,255,.55),transparent 66%);animation:fxAuroraA 26s ease-in-out infinite alternate}
.fx-aurora::after{right:-18%;bottom:-28%;background:radial-gradient(circle,rgba(114,144,255,.42),transparent 66%);animation:fxAuroraB 32s ease-in-out infinite alternate}
@keyframes fxAuroraA{to{transform:translate3d(12%,10%,0) scale(1.15)}}
@keyframes fxAuroraB{to{transform:translate3d(-10%,-8%,0) scale(1.12)}}

.fx-host{position:relative}
.fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;z-index:4;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(120,155,255,.20),transparent 62%)}
.fx-host:hover>.fx-glow{opacity:1}
.fx-border{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;padding:1.5px;opacity:0;transition:opacity .4s ease;background:conic-gradient(from var(--fxa),transparent 0deg,transparent 248deg,rgba(160,190,255,.95) 306deg,rgba(59,99,255,.9) 332deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx-host:hover>.fx-border{opacity:1;animation:fxSpin 3.2s linear infinite}
@keyframes fxSpin{to{--fxa:360deg}}

.fx-sweep{--sw:#a8c0ff;background-image:linear-gradient(100deg,currentColor 0,currentColor 42%,var(--sw) 49%,#ffffff 52%,var(--sw) 55%,currentColor 62%,currentColor 100%);background-size:250% 100%;background-position:0% 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fx-sweep.swept{animation:fxSweep 1.45s cubic-bezier(.22,.61,.36,1) .08s 1 both}
@keyframes fxSweep{from{background-position:130% 0}to{background-position:0% 0}}

@media (hover:none){.fx-cursor{display:none}.fx-glow{display:none}}
@media (prefers-reduced-motion: reduce){
  .fx-cursor{display:none}
  .fx-grid,.fx-aurora::before,.fx-aurora::after,.fx-border{animation:none!important}
  .fx-sweep{background-image:none;-webkit-text-fill-color:currentColor}
  .fx-sweep.swept{animation:none}
}