/* Impulxarte · capa premium (x 3D, transición entre secciones, scroll 3D) */

/* x en 3D: cuando la escena WebGL está lista, reemplaza la imagen */
.x3d{display:none;width:100%;height:auto}
.hero-x.is-3d .x3d{display:block}
.hero-x.is-3d img{display:none}
.hero-x.is-3d .hero-x-inner img{animation:none}

/* Persiana 3D entre secciones */
.xfade{position:fixed;inset:0;z-index:300;pointer-events:none;perspective:1400px;visibility:hidden}
.xfade.in,.xfade.out{visibility:visible}
.xfade.in{pointer-events:auto}
.xf-slats{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr)}
.xf-slats span{background:var(--n,#10130f);box-shadow:inset -2px 0 0 var(--l,#c4fa6a);transform-origin:0 50%;transform:rotateY(92deg);backface-visibility:hidden;will-change:transform}
.xf-slats span:nth-child(3n+2){background:#151a13}
.xfade.in .xf-slats span{transform:rotateY(0deg);transition:transform .5s cubic-bezier(.77,0,.175,1);transition-delay:calc(var(--i)*30ms)}
.xfade.out .xf-slats span{transform-origin:100% 50%;transform:rotateY(-92deg);transition:transform .5s cubic-bezier(.77,0,.175,1);transition-delay:calc(var(--i)*30ms)}
.xf-label{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;margin:0;opacity:0;transform:scale(.92);transition:opacity .25s,transform .4s cubic-bezier(.23,1,.32,1)}
.xf-label small{font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.08em;color:var(--l,#c4fa6a)}
.xf-label b{font-family:'Inter Tight',sans-serif;font-size:clamp(3rem,11vw,9rem);font-weight:800;letter-spacing:-.04em;line-height:.9;color:var(--b,#f4f3e9)}
.xfade.in .xf-label{opacity:1;transform:none;transition-delay:.38s}
.xfade.out .xf-label{opacity:0;transform:scale(1.04);transition-duration:.18s}

/* Scroll 3D */
.premium .hero,.premium .s3d{will-change:transform;position:relative}
.premium .s3d{backface-visibility:hidden;box-shadow:0 calc(var(--lift,0)*-30px) calc(var(--lift,0)*110px) rgba(196,250,106,calc(var(--lift,0)*.28)),0 -1px 0 rgba(196,250,106,calc(var(--lift,0)*.9))}
.premium .hero::after,.premium .s3d::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--shade,0);pointer-events:none;z-index:6}
.premium .phones{transition:transform .5s cubic-bezier(.23,1,.32,1);transform-style:preserve-3d}
html.premium,html.premium body{overflow-x:clip}

@media (prefers-reduced-motion:reduce){
  .xfade{display:none}
  .hero,.s3d{transform:none!important}
}

/* la x 3D no se desplaza con el scroll (se desarma en su lugar) */
.hero-x.is-3d .hero-x-inner{transform:none!important}