/* OKTO Nexus · web v4 · capa de movimiento «scroll-driven»
   Todo lo de este archivo cuelga de html.mo, que solo se pone con JS y sin «reducir movimiento».
   Sin JS o con reduced motion la página es la versión estática de styles.css, completa y en orden.
   Pins con position: sticky dentro de pistas altas (robusto en Safari de iOS); GSAP ScrollTrigger
   solo lee el progreso y anima transform / opacity / clip-path. Alturas en svh (barra de Safari). */

html.mo { scroll-behavior: auto; }
html.mo body { overflow-x: clip; }

/* ---------- Cabecera: transparente arriba, cristal al hacer scroll, oscura sobre negro ---------- */
html.mo .top { background: rgba(255, 255, 255, 0); border-bottom-color: rgba(226, 229, 234, 0); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.mo .top.is-scrolled { background: rgba(255, 255, 255, .72); border-bottom-color: rgba(21, 24, 30, .08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
html.mo .top.is-dark { background: rgba(0, 0, 0, .68); border-bottom-color: rgba(255, 255, 255, .1); color: #fff; }
html.mo .top.is-dark .nav a, html.mo .top.is-dark .top-right .enter { color: #c9ccd2; }
html.mo .top.is-dark .nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
html.mo .top.is-dark .menu-btn span, html.mo .top.is-dark .menu-btn span::before, html.mo .top.is-dark .menu-btn span::after { background: #fff; }
html.mo .top.is-dark .mnav.is-open { background: #000; }
html.mo .top.is-dark .mnav a { border-top-color: #2a2d33; }

/* Fondos explícitos para que la capa nocturna solo asome donde toca */
html.mo main > * { position: relative; background-color: var(--paper); }
html.mo main > .sec-alt { background-color: var(--paper-2); }
html.mo main > .cta { background-color: var(--ink); }
html.mo main > .sec-night, html.mo main > .stmt-dark { background-color: transparent; }
html.mo .night { display: block; position: fixed; inset: 0; background: #000; opacity: 0; z-index: -1; pointer-events: none; }

/* ---------- Hero ---------- */
html.mo .hero { overflow: visible; padding-bottom: 0; }
html.mo .h1 .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
html.mo .h1 .ln > span { display: inline-block; will-change: transform; }
html.mo .hero-track { height: 250vh; height: 250svh; margin-top: clamp(32px, 4vw, 56px); }
html.mo .hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding-top: calc(var(--hdr) + 28px); perspective: 1800px; perspective-origin: 50% 0; }
html.mo .hero-shot { margin-top: 0; width: 100%; }
html.mo .shot-hero { transform-origin: 50% 0; will-change: transform; backface-visibility: hidden; }
html.mo .hero-cap { opacity: 0; }
html.mo .shot-hero .bar { transform-origin: 0 50%; }
html.mo .shot-hero [data-seq] { opacity: 0; }

/* ---------- Frases a pantalla completa ---------- */
html.mo .stmt { padding-block: 0; }
html.mo .stmt-track { height: 210vh; height: 210svh; }
html.mo .stmt-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
html.mo .stmt-in { position: relative; z-index: 1; }
html.mo .stmt-big .w { display: inline-block; will-change: opacity; }
html.mo .stmt-dark .stmt-bg { display: block; position: absolute; inset: 0; background: #000; will-change: clip-path; }

/* ---------- Problema: las 8 herramientas se tachan ---------- */
html.mo .tools li { position: relative; }
html.mo .tools .st { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Recorrido: secuencia fijada ---------- */
html.mo .rt-track { height: 720vh; height: 720svh; margin-top: clamp(24px, 3vw, 40px); }
html.mo .rt-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: calc(var(--hdr) + 20px) 0 28px; }
html.mo .rt-now { display: none; }
html.mo .rt-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 14px; font-weight: 540; color: var(--ink-3); counter-reset: rail; }
html.mo .rt-rail li { counter-increment: rail; position: relative; padding-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .5s var(--ease); }
html.mo .rt-rail li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--line-2); }
html.mo .rt-rail li::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
html.mo .rt-rail li.on { color: var(--ink); }
html.mo .rt { margin-top: 0; border: 0; display: grid; min-height: 0; position: relative; }
html.mo .rt-step { grid-area: 1 / 1; border: 0; padding: 0; min-height: 0; align-items: center; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; }
html.mo .rt-step:not(:first-child) { visibility: hidden; }
html.mo .rt-shot { height: 100%; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; position: relative; will-change: transform, opacity, clip-path; }
html.mo .rt-fit { transform-origin: 50% 50%; width: 100%; min-width: 0; flex: none; align-self: center; }
html.mo .rt-shot .phone-stage { padding: 0; }

/* ---------- Apps: los teléfonos entran en abanico ---------- */
html.mo .apps { perspective: 1600px; position: relative; }
html.mo .apps > * { will-change: transform; }

/* ---------- Tilt genérico ---------- */
html.mo [data-tilt] { transform-origin: 50% 100%; will-change: transform; }

@media (max-width: 1080px) {
  html.mo .rt-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: 18px; height: 100%; align-items: stretch; }
  html.mo .rt-shot { order: -1; }
  html.mo .rt-txt { align-self: end; }
}
@media (max-width: 860px) {
  html.mo .hero-track { height: 220vh; height: 220svh; }
  html.mo .hero-sticky { padding-top: calc(var(--hdr) + 16px); }
  html.mo .rt-track { height: 760vh; height: 760svh; }
  html.mo .rt-sticky { padding: calc(var(--hdr) + 12px) 0 16px; }
  html.mo .rt-rail { gap: 4px; font-size: 12.5px; }
  html.mo .rt-rail li { color: transparent; padding-top: 0; height: 3px; }
  html.mo .rt-now { display: block; margin-top: 10px; font-size: 14px; font-weight: 560; color: var(--ink); font-variant-numeric: tabular-nums; }
  html.mo .rt-h { font-size: 20px; margin: 6px 0 8px; }
  html.mo .rt-txt p { font-size: 15px; line-height: 1.45; }
  html.mo .rt-txt .fact { font-size: 13px; margin-top: 6px; }
  html.mo .stmt-track { height: 190vh; height: 190svh; }
}
html.mo .rt-head { margin-bottom: clamp(14px, 2.4vh, 28px); }