/* NEXU — efectos ligados al scroll (js/scroll-fx.js pone --p de 0 a 1).
   Solo bajo html.sp: sin JS o con «reducir movimiento» todo queda en su sitio.
   Se usan las propiedades sueltas translate / rotate / scale para no pisar el
   `transform` del diseño ni las animaciones de flotación (que usan `translate`
   en otros elementos). */

/* ── Inicio · Mercados: cada tarjeta sube desde el fondo, una tras otra ── */
html.sp .market-grid{perspective:1300px}
html.sp .market-card{
  --q:calc(1 - var(--p,1));
  opacity:clamp(0,calc(var(--p,1)*1.7),1);
  translate:0 calc(var(--q)*140px);
  rotate:x calc(var(--q)*38deg);
  scale:calc(.84 + var(--p,1)*.16);
  transform-origin:50% 100%;
  will-change:translate,rotate,scale,opacity}
html.sp .market-card .market-icon{rotate:calc(var(--q)*-35deg);scale:calc(.4 + var(--p,1)*.6)}
html.sp .market-card .category,html.sp .market-card h3,html.sp .market-card .symbols{
  opacity:clamp(0,calc((var(--p,1) - .35)*2.2),1);translate:0 calc(var(--q)*18px)}
html.sp .market-card .market-card-bottom{opacity:clamp(0,calc((var(--p,1) - .55)*2.6),1)}
/* Brillo que cruza cada tarjeta al terminar de entrar */
html.sp .market-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(110deg,transparent 35%,#f3dca61f 50%,transparent 65%) no-repeat;background-size:260% 100%;
  background-position:calc(150% - var(--p,1)*200%) 0}

/* ── Inicio · Terminal: el monitor se levanta, el móvil gira hacia ti ── */
html.sp .device-scene{perspective:1600px}
html.sp .device-scene .desktop-device{
  --q:calc(1 - var(--p,1));
  rotate:x calc(var(--q)*34deg);
  scale:calc(.8 + var(--p,1)*.2);
  opacity:clamp(0,calc(var(--p,1)*2),1);
  transform-origin:50% 100%}
html.sp .device-scene .phone-device{
  --q:calc(1 - var(--p,1));
  rotate:calc(var(--q)*28deg);
  scale:calc(.55 + var(--p,1)*.45);
  opacity:clamp(0,calc((var(--p,1) - .25)*2),1)}
html.sp .device-scene .device-badge{
  --q:calc(1 - var(--p,1));
  rotate:calc(var(--q)*-14deg);
  scale:calc(.7 + var(--p,1)*.3);
  opacity:clamp(0,calc((var(--p,1) - .5)*2.4),1)}
html.sp .device-scene .device-glow{opacity:var(--p,1);scale:calc(.6 + var(--p,1)*.4)}
/* Reflejo que barre la pantalla del monitor con el scroll */
html.sp .device-scene .desktop-device::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,#ffffff1c 46%,#ffffff08 52%,transparent 64%) no-repeat;background-size:280% 100%;
  background-position:calc(160% - var(--p,1)*220%) 0;mix-blend-mode:screen}
/* Pulso «en vivo» sobre la pantalla: un punto dorado que recorre el gráfico */
@media(prefers-reduced-motion:no-preference){
  html.sp .device-scene .desktop-device::before{content:'';position:absolute;z-index:2;width:9px;height:9px;border-radius:50%;
    background:#f3dca6;box-shadow:0 0 0 4px #d6ab6133,0 0 18px 4px #d6ab6199;left:20%;top:36%;
    animation:nxScan 7s cubic-bezier(.45,.05,.55,.95) infinite;opacity:var(--p,1)}
  @keyframes nxScan{0%{left:17%;top:40%}25%{left:33%;top:28%}50%{left:50%;top:37%}75%{left:62%;top:24%}100%{left:17%;top:40%}}
}

/* ── Inicio · Servicios: las tarjetas entran desde los lados ── */
html.sp .svc-grid{perspective:1400px}
html.sp .svc{
  --q:calc(1 - var(--p,1));
  opacity:clamp(0,calc(var(--p,1)*1.8),1);
  translate:calc(var(--q)*var(--dx,90px)) calc(var(--q)*60px);
  rotate:y calc(var(--q)*var(--ry,-16deg));
  scale:calc(.9 + var(--p,1)*.1)}
html.sp .svc-x10{--dx:-90px;--ry:16deg}
/* Ilustraciones: se construyen con --p y luego siguen vivas */
html.sp .svc-funded .bars{transform-box:fill-box;transform-origin:50% 100%;scale:1 clamp(0,calc((var(--p,1) - .2)*1.6),1)}
html.sp .svc-funded .draw{stroke-dasharray:1;stroke-dashoffset:clamp(0,calc(1.4 - var(--p,1)*1.6),1)}
@media(prefers-reduced-motion:no-preference){
  .x10-art b{background-size:220% 100%;animation:nxShine 6s ease-in-out infinite,nxBreath 6s ease-in-out infinite}
  @keyframes nxShine{0%,100%{background-position:0 0}50%{background-position:100% 0}}
  @keyframes nxBreath{0%,100%{scale:1}50%{scale:1.04}}
  .svc-social .svc-art svg g{transform-box:view-box;transform-origin:50% 50%;animation:nxSpin 26s linear infinite}
  .svc-social .svc-art svg g:last-child circle:not(:first-child){transform-box:fill-box;transform-origin:center;animation:nxNode 3.2s ease-in-out infinite}
  .svc-social .svc-art svg g:last-child circle:nth-child(3){animation-delay:-.8s}
  .svc-social .svc-art svg g:last-child circle:nth-child(4){animation-delay:-1.6s}
  .svc-social .svc-art svg g:last-child circle:nth-child(5){animation-delay:-2.4s}
  @keyframes nxNode{0%,100%{scale:1}50%{scale:1.25}}
  .svc-partners .svc-art circle:first-child{animation:nxLinkL 5s ease-in-out infinite}
  .svc-partners .svc-art circle:last-child{animation:nxLinkR 5s ease-in-out infinite}
  @keyframes nxLinkL{0%,100%{translate:0 0}50%{translate:9px 0}}
  @keyframes nxLinkR{0%,100%{translate:0 0}50%{translate:-9px 0}}
  .svc-funded .svc-art path:last-child{animation:nxArrow 2.4s ease-in-out infinite}
  @keyframes nxArrow{0%,100%{translate:0 0}50%{translate:3px -3px}}
}

/* Pantallas táctiles estrechas: recorridos más cortos (menos mareo, mismo efecto) */
@media(max-width:700px){
  html.sp .market-card{translate:0 calc(var(--q)*70px);rotate:x calc(var(--q)*22deg)}
  html.sp .svc{translate:calc(var(--q)*var(--dx,40px)) calc(var(--q)*40px);rotate:y calc(var(--q)*var(--ry,-8deg))}
  html.sp .svc-x10{--dx:-40px;--ry:8deg}
}

/* ── Pasos (todas las páginas): un riel dorado une los números al avanzar ── */
html.sp .steps{position:relative}
html.sp .steps::before,html.sp .steps::after{content:'';position:absolute;z-index:1;top:50px;left:49px;height:2px;pointer-events:none;
  width:calc((100% - (var(--n,3) - 1)*18px)/var(--n,3)*(var(--n,3) - 1) + (var(--n,3) - 1)*18px)}
html.sp .steps::before{background:repeating-linear-gradient(90deg,#d6ab6140 0 6px,transparent 6px 12px)}
html.sp .steps::after{background:linear-gradient(90deg,#b8873f,#f3dca6);box-shadow:0 0 12px #d6ab6188;
  transform-origin:0 50%;scale:clamp(0,calc((var(--p,1) - .1)*1.25),1) 1}
html.sp .steps .step b{position:relative;z-index:2}
@media(max-width:820px){html.sp .steps::before,html.sp .steps::after{display:none}}