/* Transición entre páginas: telón aurora con logo — salida y entrada */
#xf{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0;visibility:hidden}
#xf.on{opacity:1;visibility:visible;pointer-events:all}
#xf .sheet{position:absolute;inset:0;background:#0f1128;clip-path:inset(0 0 100% 0);overflow:hidden}
#xf .sheet:after{content:"";position:absolute;inset:0;background:radial-gradient(46% 60% at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%);opacity:0;mix-blend-mode:screen;pointer-events:none}
#xf .au{position:absolute;inset:-30%;opacity:.9;mix-blend-mode:screen;background:radial-gradient(38% 42% at 22% 26%,rgba(91,141,239,.8),transparent 68%),radial-gradient(40% 44% at 62% 76%,rgba(139,124,240,.75),transparent 68%),radial-gradient(34% 38% at 82% 28%,rgba(242,112,79,.55),transparent 68%);animation:xfdrift 5.5s ease-in-out infinite alternate;animation-play-state:paused}
#xf.on .au{animation-play-state:running}
@keyframes xfdrift{from{transform:translate(-1.5%,-1%) scale(1)}to{transform:translate(2%,1.5%) scale(1.08)}}
#xf .gl{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;opacity:0;transform:scale(1.06);transition:opacity .5s,transform .6s}
#xf.on .gl{opacity:1;transform:scale(1)}
#xf .edge{position:absolute;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,#5b8def 18%,#8b7cf0 50%,#f2704f 82%,transparent);box-shadow:0 0 40px 6px rgba(139,124,240,.9);opacity:0;overflow:visible}
#xf .edge:after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.9;animation:xfsweep 1.1s ease-in-out infinite;animation-play-state:paused}
#xf.on .edge:after{animation-play-state:running}
@keyframes xfsweep{0%{left:-30%}100%{left:100%}}
#xf .mark{position:absolute;inset:0;display:grid;place-items:center}
/* Misma regla de alineación que el header: el lado de producto se alinea a
   la banda de la S del logotipo, no a la caja completa (la C es más grande
   a propósito). Ver landing.css. */
#xf .lock{--logo-h:23.4px;--s-top:calc(var(--logo-h) * .23874);--s-bot:calc(var(--logo-h) * .98649);--s-shift:calc((var(--s-top) + var(--s-bot)) / 2 - var(--logo-h) / 2);display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);box-shadow:0 24px 60px -12px rgba(139,92,246,.5),0 0 0 12px rgba(255,255,255,.05);padding:14px 28px;border-radius:999px;opacity:0;transform:translateY(20px) scale(.82)}
#xf .lock img{height:var(--logo-h);width:auto;display:block;object-fit:contain}
#xf .lock .bar{width:2px;height:calc(var(--s-bot) - var(--s-top));background:rgba(148,163,184,.55);border-radius:2px;transform:translateY(var(--s-shift))}
#xf .lock .crm{font-family:'Manrope',-apple-system,sans-serif;font-size:30px;font-weight:800;letter-spacing:-.055em;line-height:1;position:relative;top:calc(var(--s-shift) - .023em);background:linear-gradient(100deg,#5b8def,#8b7cf0 55%,#f2704f);-webkit-background-clip:text;background-clip:text;color:transparent}
#xf .lock .ia{display:inline-flex;align-items:center;gap:4px;transform:translateY(var(--s-shift));background:linear-gradient(90deg,#7c5cf0,#4f5bd5);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 2px rgba(255,255,255,.35);color:#fff;font-family:'Manrope',-apple-system,sans-serif;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;line-height:1;padding:5px 10px;border-radius:999px;margin-left:8px}
#xf .lock .ia svg{width:12px;height:12px;fill:none;stroke:#a5f3fc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#xf .halo{position:absolute;left:50%;top:50%;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(139,124,240,.6),transparent 70%);opacity:0;mix-blend-mode:screen}
#xf .halo:after{content:"";position:absolute;inset:70px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(242,112,79,.55),transparent 72%);opacity:0;mix-blend-mode:screen;animation:xfhalo2 1.15s ease-out .3s both}
#xf.out .halo,#xf.in .halo{animation:xfhalo .95s cubic-bezier(.2,.8,.2,1) .16s both}
#xf.out .halo:after,#xf.in .halo:after{animation:xfhalo2 .95s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes xfhalo{0%{opacity:0;transform:scale(.5) rotate(0deg)}40%{opacity:1}100%{opacity:0;transform:scale(1.5) rotate(12deg)}}
@keyframes xfhalo2{0%{opacity:0;transform:scale(.4) rotate(0deg)}45%{opacity:.85}100%{opacity:0;transform:scale(1.35) rotate(-10deg)}}

/* ---- salida: el telón sube ---- */
#xf.out .sheet{animation:xfup .48s cubic-bezier(.7,0,.2,1) forwards}
#xf.out .sheet:after{animation:xfflash .5s ease-out .42s both}
#xf.out .edge{animation:xfeup .48s cubic-bezier(.7,0,.2,1) forwards}
#xf.out .lock{animation:xfpop .56s cubic-bezier(.22,1.4,.36,1) .16s forwards}
@keyframes xfup{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes xfeup{0%{bottom:100%;opacity:0}12%{opacity:1}100%{bottom:100%;opacity:1;transform:translateY(100vh)}}
@keyframes xfpop{0%{opacity:0;transform:translateY(20px) scale(.82)}62%{opacity:1;transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes xfflash{0%{opacity:0}30%{opacity:.55}100%{opacity:0}}

/* ---- entrada: el telón se retira hacia arriba ---- */
#xf.in .sheet{clip-path:inset(0 0 0 0);animation:xfout .6s cubic-bezier(.7,0,.2,1) .04s forwards}
#xf.in .lock{opacity:1;transform:none;animation:xfmout .32s cubic-bezier(.5,0,.75,0) 0s forwards}
#xf.in .edge{top:0;opacity:1;animation:xfeout .6s cubic-bezier(.7,0,.2,1) .04s forwards}
@keyframes xfout{to{clip-path:inset(100% 0 0 0)}}
@keyframes xfmout{to{opacity:0;transform:translateY(-18px) scale(1.08)}}
@keyframes xfeout{to{transform:translateY(100vh);opacity:0}}

/* la página entra escalonada por bloques, con un leve acercamiento */
body.xf-enter>header,body.xf-enter>section,body.xf-enter>.wrap,body.xf-enter>footer{animation:xfrise .82s cubic-bezier(.16,.9,.18,1) both}
body.xf-enter>header{animation-delay:.18s}
body.xf-enter>section:nth-of-type(1),body.xf-enter>.wrap{animation-delay:.27s}
body.xf-enter>section:nth-of-type(2){animation-delay:.36s}
body.xf-enter>section:nth-of-type(3){animation-delay:.45s}
body.xf-enter>footer{animation-delay:.5s}
@keyframes xfrise{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
#xf{display:none!important}
body.xf-enter>header,body.xf-enter>section,body.xf-enter>.wrap,body.xf-enter>footer{animation:none}
}