/* Efectos: scroll, revelados, marquesina, 3D, tilt, cursor */

#progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:90;background:var(--warm);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Títulos: las palabras suben una a una */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--i) * 50ms)}
.split.in .w>span{transform:none}

/* Revelado al scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .25s ease,box-shadow .3s ease;transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* Marquesina que reacciona al scroll */
.marquee{overflow:hidden;border-bottom:1px solid var(--line);padding:16px 0;background:#fff}
.marquee .track{display:flex;width:max-content;align-items:center;gap:28px;padding-right:28px;font-size:clamp(1.8rem,4.4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.3;white-space:nowrap;will-change:transform}
.marquee .track i{flex:none;width:.4em;height:.4em;background:var(--accent);border-radius:3px;transform:rotate(45deg)}
.marquee .outline span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}

/* Sección 3D: de la idea a la plataforma */
.morph{height:300vh;background:var(--surface);border-block:1px solid var(--line)}
.morph-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.morph-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,60px);align-items:center;height:100%}
.morph-copy{padding-top:30px}
.morph-copy .sub{margin-bottom:28px}
.stage{position:relative;height:min(72svh,600px)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:none}
html.has3d #gl{display:block}
.phases{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:12px;pointer-events:none}
.phase-copy{min-height:1.6em;font-weight:600;font-size:1.05rem;text-align:center;transition:opacity .2s ease}
.phases ol{display:flex;gap:8px}
.phases li{display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:.9rem;font-weight:600;color:var(--muted);transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.phases li b{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--surface);font-size:.78rem;transition:background-color .3s ease,color .3s ease}
.phases li.on{background:var(--ink);border-color:var(--ink);color:#fff}
.phases li.on b{background:var(--accent);color:#fff}
html.no3d .morph{display:none}
html:not(.has3d) .phases{visibility:hidden}

/* Precios: tarjetas 3D con brillo */
.plans{perspective:1100px}
.plan{transition:transform .2s ease-out,opacity .7s var(--ease),box-shadow .3s ease;will-change:transform;overflow:hidden}
.plan.rv.in{transition-delay:0ms}
.plan::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(35,64,240,.14),transparent 70%);transition:opacity .25s ease}
@media(hover:hover) and (pointer:fine){
  .plan:hover{box-shadow:0 30px 50px -28px rgba(14,17,22,.4)}
  .plan:hover::after{opacity:1}
}

/* Cursor cuadrado (el píxel de la marca) */
.cursor{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid #fff;border-radius:6px;pointer-events:none;z-index:200;opacity:0;transition:opacity .25s ease,background-color .2s ease;mix-blend-mode:difference}
.cursor.on{opacity:.9}
.cursor.big{background:rgba(255,255,255,.35)}

/* Explosión de píxeles al enviar */
.burst{position:fixed;width:9px;height:9px;border-radius:2px;pointer-events:none;z-index:300}

/* Palabra gigante del pie */
.footer{overflow:hidden}
.bigword{font-weight:800;font-size:clamp(3.4rem,17vw,13rem);line-height:.82;letter-spacing:-.05em;text-align:center;margin-bottom:34px;padding-bottom:.06em;color:transparent;background:linear-gradient(90deg,var(--accent) var(--fill,0%),#e7e9ee var(--fill,0%));-webkit-background-clip:text;background-clip:text;user-select:none}

@media(max-width:860px){
  .morph-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:8px;align-content:center}
  .morph-copy{padding-top:70px}
  .morph-copy .sub{display:none}
  .morph-copy h2{margin-bottom:12px;font-size:1.7rem}
  .stage{height:100%;min-height:0}
  .phase-copy{font-size:.95rem}
  .phases li{padding:5px 10px;font-size:.82rem}
}

@media(prefers-reduced-motion:reduce){
  .morph{height:auto}
  .morph-sticky{position:static;height:auto;padding:60px 0}
  .stage{height:min(60svh,460px)}
  .split .w>span,.rv{transform:none;opacity:1}
  .cursor{display:none}
}