/* Efectos futuristas — se desactivan con prefers-reduced-motion */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* Barra de progreso de scroll + brillo de cursor */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:100;box-shadow:0 0 12px var(--cyan)}
.fx-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(139,123,255,.16),transparent 65%);pointer-events:none;z-index:0;transition:opacity .3s;opacity:0}
.fx-glow.on{opacity:1}
main,.site-footer{position:relative;z-index:1}

/* Hero: red de partículas, deriva de luces y cuadrícula en movimiento */
.hero canvas.net{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.hero::before{animation:drift 16s ease-in-out infinite alternate}
.hero::after{animation:gridmove 22s linear infinite}
@keyframes drift{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}}
@keyframes gridmove{from{background-position:0 0}to{background-position:56px 56px}}

/* Entrada escalonada del hero */
.hero .badge,.hero h1,.hero p,.hero .actions{opacity:0;animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .badge{animation-delay:.1s}.hero h1{animation-delay:.25s}.hero p{animation-delay:.45s}.hero .actions{animation-delay:.65s}
@keyframes up{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* Texto con degradado en movimiento y brillo neón */
.grad{background-size:220% 100%;animation:shift 6s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(139,123,255,.35))}
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.eyebrow{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;position:relative;padding-left:16px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.badge i{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(62,230,180,.6)}50%{box-shadow:0 0 0 8px rgba(62,230,180,0)}}

/* Logo vivo */
.brand svg circle{animation:node 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes node{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

/* Botones: brillo que barre, halo neón y borde giratorio */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s ease;z-index:-1}
.btn:hover::before{left:140%}
.btn:not(.ghost){animation:halo 3.2s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 8px 28px rgba(139,123,255,.28)}50%{box-shadow:0 8px 40px rgba(53,224,255,.45)}}
.btn.ghost{border:1px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,conic-gradient(from var(--a),var(--border),var(--violet),var(--cyan),var(--border)) border-box}
.btn.ghost:hover{animation:spin 2.4s linear infinite;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--a),var(--border),var(--violet),var(--cyan),var(--border)) border-box}
@keyframes spin{to{--a:360deg}}

/* Tarjetas: inclinación 3D y luz que sigue al cursor */
.card{position:relative;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .15s ease-out,border-color .25s;overflow:hidden}
.card:hover{--ty:-4px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(53,224,255,.16),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
.card:hover::after{opacity:1}
.card .ico{transition:transform .4s,box-shadow .4s}
.card:hover .ico{transform:translateZ(30px) scale(1.08);box-shadow:0 0 24px rgba(139,123,255,.55)}

/* Aparición al hacer scroll */
.rv{opacity:0;transform:translateY(30px);filter:blur(4px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.rv.in{opacity:1;transform:none;filter:none}
.step{overflow:hidden}
.step::after{content:"";position:absolute;left:-1px;top:0;width:1px;height:0;background:var(--grad);box-shadow:0 0 10px var(--cyan);transition:height 1.2s ease .2s}
.step.in::after{height:100%}

/* CTA con aura giratoria */
.cta::after{content:"";position:absolute;inset:-1px;border-radius:24px;padding:1px;background:conic-gradient(from var(--a),transparent 0 70%,var(--cyan),var(--violet),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}

/* Menú: subrayado luminoso */
.nav>ul>li>a{position:relative}
.nav>ul>li>a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad);box-shadow:0 0 8px var(--cyan);transition:width .3s}
.nav>ul>li>a:hover::after,.nav>ul>li.current-menu-item>a::after{width:100%}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important}
	.rv,.hero .badge,.hero h1,.hero p,.hero .actions{opacity:1!important;transform:none!important;filter:none!important}
	.hero canvas.net,.fx-glow,.fx-progress{display:none}
}
@media (hover:none){.fx-glow{display:none}}