/* ============================================================
   premium.css — capa inmersiva (PROGRESSIVE ENHANCEMENT).
   La capa pesada (WebGL + titular) solo se activa en escritorio
   capaz (html.fx, añadido por JS, y retirado por el FPS-guard si
   no mantiene 60fps). Marquesina y roadmap son ligeros (todos).
   Sin librerías externas. Scroll nativo (no se toca).
   ============================================================ */

/* ---- WebGL hero (solo .fx; canvas inyectado por JS) ---- */
.hero .fx-gradient {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 1s ease;
}
.hero .fx-gradient.is-on { opacity: .55; }

/* ---- Titular palabra a palabra (solo .fx; spans inyectados por JS) ---- */
.hero h1 .w { display: inline-block; will-change: transform, opacity; }

/* ---- Revelados direccionales (solo .fx; clases puestas por JS, las dispara el IO de main.js) ---- */
.fx [data-reveal].rv-scale { transform: scale(.92); }
.fx [data-reveal].rv-left  { transform: translateX(-46px); }
.fx [data-reveal].rv-right { transform: translateX(46px); }
.fx [data-reveal].rv-up    { transform: translateY(42px); }
.fx [data-reveal].is-revealed { transform: none; }

/* ---- Tilt 3D del bento (solo .fx) ---- */
.fx .bento { perspective: 1100px; }
.fx .bento__cell { transform-style: preserve-3d; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; will-change: transform; }
.fx .bento__cell:hover { box-shadow: 0 26px 54px -20px color-mix(in srgb, var(--orange) 50%, rgba(0,0,0,.35)); }

/* ---- Marquesina de confianza (todos los dispositivos, CSS puro) ---- */
.marquee { overflow: hidden; background: var(--surface-2); border-top: 1px solid var(--gray-mid); border-bottom: 1px solid var(--gray-mid); }
.marquee__track { display: flex; width: max-content; animation: mpt-marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; white-space: nowrap; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .03em; color: var(--text); }
.marquee span::after { content: "✦"; color: var(--orange); font-size: .7em; }
@keyframes mpt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Roadmap "Cómo funciona" (todos; JS añade .steps-fx + .is-on) ---- */
.steps-progress { height: 4px; border-radius: 4px; background: var(--gray-mid); overflow: hidden; margin: 0 auto 38px; max-width: 760px; }
.steps-progress__fill { height: 100%; width: 0%; background: var(--grad-accent); transition: width .5s cubic-bezier(.22,1,.36,1); }
.steps-fx .step .step__num { filter: grayscale(.5) opacity(.55); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, filter .5s ease; }
.steps-fx .step.is-on .step__num { filter: none; transform: scale(1.06); box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--orange) 60%, transparent); }
.steps-fx .step h3, .steps-fx .step p { opacity: .6; transition: opacity .5s ease; }
.steps-fx .step.is-on h3, .steps-fx .step.is-on p { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .steps-progress__fill { width: 100% !important; }
  .steps-fx .step .step__num { filter: none; }
  .steps-fx .step h3, .steps-fx .step p { opacity: 1; }
}