/* Efectos de la landing (inspirados en React Bits, en CSS/JS puros) */
html,body{overflow-x:clip}
/* ---- Fondo aurora fijo (da algo detrás al cristal) ---- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#fff}
.bg i{position:absolute;width:55vw;height:55vw;max-width:720px;max-height:720px;border-radius:50%;filter:blur(90px);opacity:.38;will-change:transform}
.bg i:nth-child(1){background:#f5c344;left:-10%;top:-8%;animation:blob1 22s ease-in-out infinite alternate}
.bg i:nth-child(2){background:#f28482;right:-12%;top:20%;animation:blob2 26s ease-in-out infinite alternate}
.bg i:nth-child(3){background:#b567c2;left:15%;bottom:-18%;animation:blob3 30s ease-in-out infinite alternate;opacity:.3}
@keyframes blob1{to{transform:translate(18vw,22vh) scale(1.25)}}
@keyframes blob2{to{transform:translate(-22vw,-10vh) scale(.85)}}
@keyframes blob3{to{transform:translate(20vw,-18vh) scale(1.2)}}
/* ---- Barra de progreso de scroll + foco que sigue al ratón ---- */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad);z-index:20}
#glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(242,132,130,.16),transparent 65%);transition:opacity .4s;opacity:0}
/* ---- Cristal (glassmorfismo) ---- */
.glass{background:rgba(255,255,255,.52)!important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 10px 40px -12px rgba(120,60,140,.18),inset 0 1px 0 rgba(255,255,255,.9)!important}
header{background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.how{background:rgba(244,248,249,.35)}
details.glass{background:rgba(255,255,255,.5)!important}
/* ---- Texto: degradado vivo, brillo, división en palabras ---- */
.gt{background-size:250% 100%;animation:gshift 6s linear infinite}
@keyframes gshift{to{background-position:250% 0}}
.shiny{background:linear-gradient(110deg,#f5c344 25%,#f28482 40%,#b567c2 55%,#f5c344 75%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.2s linear infinite}
@keyframes shine{from{background-position:150% 0}to{background-position:-50% 0}}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wd>span{display:inline-block;transform:translateY(110%) rotate(4deg);filter:blur(10px);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .9s,opacity .9s;transition-delay:calc(var(--i)*70ms)}
.in .wd>span,.wd.in>span{transform:none;filter:none;opacity:1}
.wc{display:inline-block;transform:translateY(60%) scaleY(1.4);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s;transition-delay:calc(var(--i)*22ms)}
.in .wc{transform:none;opacity:1}
/* ---- Aparición al hacer scroll ---- */
[data-r]{opacity:0;transform:translateY(40px) scale(.96);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s;transition-delay:calc(var(--d,0)*120ms)}
[data-r=left]{transform:translateX(-60px)}[data-r=right]{transform:translateX(60px)}
[data-r].in{opacity:1;transform:none;filter:none}
/* ---- Botones: brillo que cruza, imán, onda al pulsar ---- */
.btn{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;will-change:transform}
.btn.p:hover{box-shadow:0 12px 36px rgba(242,132,130,.45)}
.btn:before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:sweep 3.4s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-80%}100%{left:140%}}
.btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 24px rgba(245,195,68,.25),0 0 0 0 rgba(242,132,130,.5)}50%{box-shadow:0 8px 24px rgba(245,195,68,.25),0 0 0 16px rgba(242,132,130,0)}}
/* ---- HERO ---- */
.hero{position:relative}
#parts{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .w{position:relative;z-index:1}
.vcard{transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform}
.vcard .sweep{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}
.vcard .sweep:after{content:"";position:absolute;top:0;bottom:0;width:2px;left:0;background:#fff;box-shadow:0 0 18px 4px rgba(255,255,255,.9);animation:scan 5s ease-in-out infinite}
@keyframes scan{0%,100%{left:2%;opacity:0}10%,90%{opacity:1}50%{left:98%}}
.vcard figure:last-of-type img{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.float{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.vcard .status.float{animation-duration:4s}
.strip{overflow:hidden;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:marq 32s linear infinite}
.strip:hover .track{animation-play-state:paused}
.track span{white-space:nowrap;padding:11px 24px;border-radius:999px;font-size:14px;font-weight:500;color:var(--s800)}
@keyframes marq{to{transform:translateX(-50%)}}
/* ---- FEATURES ---- */
.fc{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.fc:hover{transform:translateY(-8px)}
.spot{position:relative;overflow:hidden}
.spot:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),transparent 70%)}
.spot:hover:after{opacity:1}
.bubble{min-height:84px}
.caret{display:inline-block;width:2px;height:1em;background:var(--purple);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cursor{animation:curs 6s ease-in-out infinite}
@keyframes curs{0%,100%{transform:translate(0,0)}30%{transform:translate(90px,-40px)}60%{transform:translate(40px,10px)}}
.mini div:last-child img{animation:kb 8s ease-in-out infinite alternate}
.tile{animation:tile 6s ease-in-out infinite}
@keyframes tile{0%,100%{transform:translateX(-50%) translateY(0) rotate(-4deg)}50%{transform:translateX(-50%) translateY(-14px) rotate(4deg)}}
.orb{position:absolute;z-index:2;left:50%;top:125px;width:0;height:0}
.orb b{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;animation:orbit 7s linear infinite;background:var(--grad2);box-shadow:0 0 12px rgba(242,132,130,.8)}
.orb b:nth-child(2){animation-duration:11s;animation-direction:reverse;background:var(--yellow)}
.orb b:nth-child(3){animation-duration:15s;background:var(--purple)}
@keyframes orbit{from{transform:rotate(0) translateX(100px) rotate(0)}to{transform:rotate(360deg) translateX(100px) rotate(-360deg)}}
/* ---- HOW ---- */
.steps{position:relative}
.steps:before{content:"";position:absolute;left:12%;right:12%;top:50px;height:2px;border-radius:2px;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--line,0));opacity:.5}
.step{position:relative;transition:transform .3s}
.step:hover{transform:translateY(-6px) rotate(-.6deg)}
.num{position:relative}
.num:after{content:"";position:absolute;inset:-6px;border-radius:18px;border:2px solid var(--red);opacity:0;animation:ring 2.6s ease-out infinite}
.step:nth-child(2) .num:after{animation-delay:.6s}.step:nth-child(3) .num:after{animation-delay:1.2s}
@keyframes ring{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.sr span{opacity:.18;transition:opacity .25s}.sr span.on{opacity:1}
/* ---- PLANES ---- */
.plan{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.plan:hover{transform:translateY(-10px)}
.plan.f{outline:0;z-index:1}
.plan.f:before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:23px;background:conic-gradient(from var(--ang,0deg),#f5c344,#f28482,#b567c2,#f5c344);animation:spin 5s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
.plan.f{background:rgba(255,255,255,.85)!important}
.plan li{opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--k)*90ms + .3s)}
.plan.in li{opacity:1;transform:none}
.lab{display:inline-block;animation:float 3s ease-in-out infinite}
/* ---- FAQ / CTA ---- */
details{transition:background .3s,transform .3s}
details:hover{transform:translateX(6px)}
details[open]{background:rgba(255,255,255,.8)!important}
details .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
details[open] .ans{grid-template-rows:1fr}
details .ans>p{overflow:hidden;margin-top:0}
details[open] .ans>p{margin-top:10px}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:22px;line-height:1;color:var(--purple);transition:transform .4s}
details[open] summary:after{transform:rotate(135deg)}
.cta{background:rgba(255,255,255,.5)!important}
.cta:before{animation:ctaSpin 10s ease-in-out infinite alternate;background-size:200% 200%}
@keyframes ctaSpin{from{transform:scale(1)}to{transform:scale(1.4) rotate(8deg)}}
.big{overflow:hidden;white-space:nowrap;margin-bottom:26px;opacity:.9}
.big div{display:inline-block;animation:marq 26s linear infinite;font-size:clamp(2.5rem,8vw,5rem);font-weight:600;letter-spacing:-.04em}
.big span{margin-right:.6em}
/* ---- FOOTER ---- */
.ft a{position:relative;width:max-content;transition:transform .25s,color .25s}
.ft a:after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.ft a:hover{transform:translateX(4px);color:var(--s900)}.ft a:hover:after{transform:scaleX(1)}
.mega{font-size:clamp(3.5rem,17vw,12rem);font-weight:600;letter-spacing:-.06em;line-height:.9;text-align:center;margin:10px 0 30px;user-select:none}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 [data-r],.wd>span,.wc,.plan li{opacity:1!important;transform:none!important;filter:none!important}
}
@media(max-width:860px){#glow{display:none}.steps:before{display:none}.orb b{animation-name:orbit}.bg i{filter:blur(60px)}}