/* ============================================================
   scroll-fx.css — capa de cinematografía por scroll para la landing "/"
   Aislada y removible: todo está tras la puerta html.sfx, que
   scroll-fx.js añade SOLO después de construir con éxito.
   Sin JS (o con prefers-reduced-motion) esta hoja no pinta nada.
   Convención: prefijo .sfx- / sin tocar estilos heredados.
   ============================================================ */

/* ---------- 0. Raíz, rendimiento y acceso ---------- */

/* Cada pista que el motor anima por rAF declara will-change con mesura */
html.sfx .sfx-track, html.sfx .sfx-stage .sfx-scene,
html.sfx .sfx-bg > *, html.sfx .sfx-mascot svg,
html.sfx .sfx-navprog, html.sfx .sfx-zframe { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    html.sfx *, html.sfx *::before, html.sfx *::after {
        animation: none !important;
        transition: none !important;
    }
    html.sfx .sfx-w { opacity: 1 !important; transform: none !important; }
    html.sfx .sfx-mascot { display: none; }
}

/* ---------- 1. Fondo en capas (parallax de página completa) ---------- */
html.sfx .sfx-bg { position: fixed; inset: -12% 0; z-index: -1; pointer-events: none; }
html.sfx .sfx-blob { position: absolute; border-radius: 50%; }
html.sfx .sfx-blob.b1 {
    width: 62vmax; height: 62vmax; left: -18vmax; top: 6%;
    background: radial-gradient(closest-side, rgba(255,107,53,.10), rgba(255,107,53,0) 70%);
}
html.sfx .sfx-blob.b2 {
    width: 55vmax; height: 55vmax; right: -16vmax; top: 44%;
    background: radial-gradient(closest-side, rgba(245,166,35,.09), rgba(245,166,35,0) 70%);
}
html.sfx .sfx-dots {
    position: absolute; inset: 0; opacity: .5;
    background-image: radial-gradient(rgba(23,19,14,.075) 1px, transparent 1.4px);
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---------- 2. Barra de progreso del documento (nav) ---------- */
html.sfx .sfx-navprog {
    position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--primary), var(--amber));
    pointer-events: none;
}

/* ---------- 3. Mascota: el logo que se transforma por sección ---------- */
html.sfx .sfx-mascot {
    position: fixed; left: 16px; bottom: 16px; z-index: 90;
    width: clamp(64px, 8.5vw, 104px); height: clamp(64px, 8.5vw, 104px);
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,248,242,.92) 55%, rgba(255,248,242,0) 100%);
}
html.sfx .sfx-mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }
html.sfx .sfx-mascot .sfx-mbob { animation: sfx-bob 5.2s ease-in-out infinite; }
@keyframes sfx-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }

html.sfx .sfx-mascot .mg { transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1); transform-origin: 60px 60px; opacity: 0; transform: scale(.5) rotate(-24deg); }
html.sfx .sfx-mascot .mg.on { opacity: 1; transform: none; }
html.sfx .sfx-mascot .mg.exit { opacity: 0; transform: scale(1.35) rotate(18deg); }

/* pizza entera: giro perezoso + pepperoni que respiran */
html.sfx .sfx-mascot .mg-pizza .spin { animation: sfx-spin 26s linear infinite; transform-origin: 60px 60px; }
@keyframes sfx-spin { to { transform: rotate(360deg) } }
html.sfx .sfx-mascot .mg-pizza .pep { animation: sfx-pep 3.4s ease-in-out infinite; transform-origin: center; }
html.sfx .sfx-mascot .mg-pizza .pep:nth-of-type(2n) { animation-delay: -1.7s; }
@keyframes sfx-pep { 0%,100% { transform: scale(1) } 50% { transform: scale(1.14) } }

/* terminal: cursor que late */
html.sfx .sfx-mascot .mg-term .cur { animation: sfx-blink 1.1s steps(1) infinite; }
@keyframes sfx-blink { 50% { opacity: 0 } }
/* moneda: brillo que barre */
html.sfx .sfx-mascot .mg-coin .shine { animation: sfx-coinshine 2.6s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes sfx-coinshine { 0%,55%,100% { transform: rotate(0) } 78% { transform: rotate(160deg) } }
/* chat: puntos escribiendo */
html.sfx .sfx-mascot .mg-chat .dot { animation: sfx-typing 1.3s ease-in-out infinite; }
html.sfx .sfx-mascot .mg-chat .dot:nth-of-type(2) { animation-delay: .18s }
html.sfx .sfx-mascot .mg-chat .dot:nth-of-type(3) { animation-delay: .36s }
@keyframes sfx-typing { 0%,100% { transform: translateY(0); opacity:.45 } 40% { transform: translateY(-4px); opacity:1 } }
/* caja: tapa que se abre y cierra */
html.sfx .sfx-mascot .mg-box .lid { animation: sfx-lid 3.2s ease-in-out infinite; transform-origin: 38px 48px; }
@keyframes sfx-lid { 0%,18%,100% { transform: rotate(0) } 42%,72% { transform: rotate(-26deg) } }
html.sfx .sfx-mascot .mg-box .fly { animation: sfx-fly 3.2s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes sfx-fly { 0%,20% { transform: translate(0,0) scale(.7); opacity:0 } 45% { opacity:1 } 75%,100% { transform: translate(16px,-30px) scale(1); opacity:0 } }

/* ---------- 4. Texto vivo: palabras ---------- */
html.sfx .sfx-w {
    display: inline-block;
    opacity: 0; transform: translateY(.65em) rotate(3deg) scale(.98);
    transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .5s ease;
    transition-delay: calc(var(--i, 0) * 55ms);
}
html.sfx .sfx-words.in .sfx-w { opacity: 1; transform: none; }
html.sfx .sfx-words:focus-within .sfx-w,
html.sfx .sfx-words:focus-within { opacity: 1; transform: none; }

/* contadores: el motor escribe el texto; sin estado CSS */

/* ---------- 5. Hero: coreografía de entrada + salida en parallax ---------- */
/* Sol de marcas girando detrás del contenido */
html.sfx .sfx-sun {
    position: absolute; left: 50%; top: 26%; width: min(920px, 120vw); aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(.9);
    background: repeating-conic-gradient(rgba(255,107,53,.085) 0 7deg, rgba(255,107,53,0) 7deg 22deg);
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(closest-side, transparent 26%, #000 46%, transparent 74%);
            mask-image: radial-gradient(closest-side, transparent 26%, #000 46%, transparent 74%);
    pointer-events: none; opacity: .8;
}
/* Ingredientes flotantes: capa externa la mueve el scroll, interna deriva sola */
html.sfx .sfx-shape { position: absolute; pointer-events: none; z-index: 0; }
html.sfx .sfx-shape .drift { display: block; animation: sfx-drift var(--t, 9s) ease-in-out infinite; }
@keyframes sfx-drift { 0%,100% { transform: translate(0,0) rotate(0) } 50% { transform: translate(var(--dx, 8px), var(--dy, -14px)) rotate(var(--dr, 7deg)) } }
html.sfx .sfx-pep {
    width: var(--s, 42px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #E86A3C 0 18%, #D24A1E 46%, #B43B0F 100%);
    box-shadow: inset 0 -4px 8px rgba(120,30,8,.35);
}
html.sfx .sfx-leaf { width: var(--s, 34px); aspect-ratio: 1.15;
    background: linear-gradient(140deg, #2E8B57, #15743F); border-radius: 0 100% 8% 100%; opacity: .8; }
html.sfx .sfx-slice { width: var(--s, 64px); aspect-ratio: 1;
    background: conic-gradient(from 200deg at 50% 78%, #E8A33D 0 26deg, transparent 26deg);
    border-radius: 50%; opacity: .85;
    -webkit-mask-image: radial-gradient(circle at 50% 78%, #000 0 58%, transparent 59%);
            mask-image: radial-gradient(circle at 50% 78%, #000 0 58%, transparent 59%); }

/* entrada escalonada del hero */
html.sfx .hero .hero-pill, html.sfx .hero .hero-cta, html.sfx .hero .hero-note,
html.sfx .hero .preview, html.sfx .hero > .wrap > p:not(.hero-note) {
    opacity: 0; transform: translateY(26px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
html.sfx .hero .preview { transform: translateY(40px) perspective(1200px) rotateX(9deg) scale(.97); transition-duration: .95s; }
html.sfx .hero.sfx-enter .hero-pill { opacity: 1; transform: none; transition-delay: .08s; }
html.sfx .hero.sfx-enter .hero h1 { transition: none; }
html.sfx .hero.sfx-enter > .wrap > p:not(.hero-note) { opacity: 1; transform: none; transition-delay: .5s; }
html.sfx .hero.sfx-enter .hero-cta { opacity: 1; transform: none; transition-delay: .62s; }
html.sfx .hero.sfx-enter .hero-note { opacity: 1; transform: none; transition-delay: .74s; }
html.sfx .hero.sfx-enter .preview { opacity: 1; transform: perspective(1200px) rotateX(0) scale(1); transition-delay: .82s; }

/* estado vivo del mock: puntos de estado latiendo */
html.sfx .pv-dot { animation: sfx-pulse 2.2s ease-in-out infinite; }
html.sfx .pv-order:nth-child(2) .pv-dot { animation-delay: .5s }
html.sfx .pv-order:nth-child(3) .pv-dot { animation-delay: 1s }
@keyframes sfx-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(23,19,14,.25) } 50% { box-shadow: 0 0 0 6px rgba(23,19,14,0) } }

/* ---------- 6. #features: pista horizontal dentro del scroll vertical ---------- */
html.sfx #features.sfx-h { padding: 0; }
html.sfx .sfx-hstage { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: safe center; overflow: hidden; }
html.sfx .sfx-hstage .sec-head { margin-bottom: 34px; }
html.sfx .sfx-hviewport { position: relative; }
html.sfx .grid-3.sfx-track {
    display: flex; flex-wrap: nowrap; gap: 22px; width: max-content;
    padding-inline: max(22px, calc((100vw - 1140px) / 2)) max(22px, calc((100vw - 1140px) / 2));
    align-items: stretch; position: relative; z-index: 1;
}
html.sfx .sfx-track .feat { flex: 0 0 auto; width: min(350px, 40vw); }
html.sfx .sfx-track .feat:nth-child(3n+1) { transform: translateY(18px); }
html.sfx .sfx-track .feat:nth-child(3n+2) { transform: translateY(-12px) scale(.985); }
html.sfx .sfx-track .feat:nth-child(3n)   { transform: translateY(6px) scale(1.015); }
html.sfx .sfx-track .feat .feat-ic { transition: transform .45s cubic-bezier(.22,1,.36,1), background-color .3s; }
html.sfx .sfx-track .feat:hover .feat-ic { transform: rotate(-6deg) scale(1.08); background: var(--amber-soft); }

/* palabras monumentales de fondo (capa lenta del parallax) */
html.sfx .sfx-wordsrow {
    position: absolute; left: 0; top: 50%;
    display: flex; gap: 3.2rem; width: max-content; white-space: nowrap; z-index: 0;
    font-weight: 800; font-size: clamp(4.4rem, 13vw, 11rem); letter-spacing: -.04em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(23,19,14,.10); user-select: none;
}
html.sfx .sfx-wordsrow.r2 { top: auto; bottom: 4%; translate: 0 0; font-size: clamp(3rem, 9vw, 7.5rem); -webkit-text-stroke-color: rgba(255,107,53,.16); }
html.sfx .sfx-wordsrow span { display: inline-block; }

/* ---------- 7. #how: conmutador sticky de escenas + batería ---------- */
html.sfx #how.sfx-how-sec { padding: 0; }
html.sfx .how.sfx-how {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    border-radius: 0; max-width: none; padding: clamp(16px, 3vh, 40px) clamp(20px, 4vw, 56px);
    display: flex; flex-direction: column; justify-content: safe center; gap: clamp(12px, 2.4vh, 26px);
    margin: 0; overflow: hidden;
}
html.sfx .how.sfx-how::before { /* textura de puntos del escenario */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(244,237,227,.07) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(120% 100% at 70% 50%, #000 30%, transparent 78%);
            mask-image: radial-gradient(120% 100% at 70% 50%, #000 30%, transparent 78%);
}
html.sfx .how.sfx-how > h2 { text-align: left; font-size: clamp(1.4rem, 2.6vw, 2.1rem); position: relative; }
html.sfx .sfx-howcols { position: relative; display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }

/* pasos: panel lateral fijo que cambia de estado */
html.sfx .sfx-steps { display: flex; flex-direction: column; gap: clamp(8px, 1.8vh, 16px); }
html.sfx .how.sfx-how .how-step {
    display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "n b" "n p";
    column-gap: 14px; align-items: start; padding: 10px 14px; border-radius: 16px;
    border: 1px solid transparent;
    opacity: .38; transform: translateX(10px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1), border-color .4s, background-color .4s;
}
html.sfx .how.sfx-how .how-step .n { grid-area: n; margin: 0; position: relative; }
html.sfx .how.sfx-how .how-step h3 { grid-area: b; }
html.sfx .how.sfx-how .how-step p { grid-area: p; }
html.sfx .how.sfx-how .how-step.active {
    opacity: 1; transform: none; border-color: rgba(255,107,53,.35);
    background: rgba(255,107,53,.07);
}
html.sfx .how.sfx-how .how-step.done { opacity: .62; transform: none; }
html.sfx .how.sfx-how .how-step .n::after { /* palomita que aparece al completar */
    content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--green); color: #fff; border-radius: 14px; font-size: 1rem;
    opacity: 0; transform: scale(.4); transition: opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1);
}
html.sfx .how.sfx-how .how-step.done .n::after { opacity: 1; transform: none; }

/* batería metafórica: se llena con el progreso de la sección */
html.sfx .sfx-meter { display: flex; align-items: center; gap: 14px; margin-top: clamp(6px, 2vh, 18px); }
html.sfx .sfx-batt {
    display: flex; gap: 5px; padding: 5px 7px; border: 1.5px solid rgba(244,237,227,.28);
    border-radius: 12px; position: relative; flex: 0 0 auto;
}
html.sfx .sfx-batt::after { /* borniente positivo */
    content: ""; position: absolute; right: -6px; top: 50%; translate: 0 -50%;
    width: 4px; height: 16px; border-radius: 2px; background: rgba(244,237,227,.28);
}
html.sfx .sfx-batt .seg { width: clamp(20px, 2.6vw, 34px); height: clamp(16px, 2vh, 22px); border-radius: 4px; background: rgba(244,237,227,.12); overflow: hidden; }
html.sfx .sfx-batt .seg i { display: block; height: 100%; width: 100%; background: var(--amber); transform: scaleY(0); transform-origin: 50% 100%; }
html.sfx .sfx-meter.m1 .sfx-batt .seg i { background: var(--amber); }
html.sfx .sfx-meter.m2 .sfx-batt .seg i { background: var(--blue); }
html.sfx .sfx-meter.m3 .sfx-batt .seg i { background: var(--green); }
html.sfx .sfx-meter .sfx-batt-label { font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: var(--side-muted); }
html.sfx .sfx-meter .sfx-batt-label b { color: var(--side-ink); font-variant-numeric: tabular-nums; }
html.sfx .sfx-meter.m3 .sfx-batt-label b { color: var(--green-soft); }

/* escenario de mini-escenas (100% CSS/SVG, decorativo) */
html.sfx .sfx-stage {
    position: relative; aspect-ratio: 4 / 3.1; max-height: calc(100dvh - 300px); width: 100%;
    border-radius: 26px; background: #211B14; border: 1px solid rgba(244,237,227,.10);
    box-shadow: inset 0 0 80px rgba(0,0,0,.35); overflow: hidden;
    align-self: center;
}
html.sfx .sfx-scene {
    position: absolute; inset: 0; padding: clamp(14px, 2.4vw, 30px);
    opacity: 0; transform: translateX(34px) scale(.96);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
html.sfx .sfx-scene.active { opacity: 1; transform: none; }
html.sfx .sfx-scene:not(.active) * { animation-play-state: paused !important; }

/* — escena 1: terminal desplegando el proyecto — */
html.sfx .sfx-scene .term { height: 100%; border-radius: 16px; background: #131009; border: 1px solid rgba(244,237,227,.14); display: flex; flex-direction: column; overflow: hidden; }
html.sfx .sfx-scene .term-bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid rgba(244,237,227,.10); }
html.sfx .sfx-scene .term-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(244,237,227,.22); }
html.sfx .sfx-scene .term-bar i:nth-child(1) { background: #FF5F57; }
html.sfx .sfx-scene .term-bar i:nth-child(2) { background: #FEBC2E; }
html.sfx .sfx-scene .term-bar i:nth-child(3) { background: #28C840; }
html.sfx .sfx-scene .term-body { flex: 1; padding: 16px 18px; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: clamp(.62rem, 1.15vw, .84rem); display: flex; flex-direction: column; gap: 9px; }
html.sfx .sfx-scene .tl { color: #C9BFAF; white-space: nowrap; overflow: hidden; width: 0; }
html.sfx .sfx-scene.active .tl { animation: sfx-type 7s steps(34, end) infinite; }
html.sfx .sfx-scene.active .tl:nth-child(2) { animation-delay: .9s }
html.sfx .sfx-scene.active .tl:nth-child(3) { animation-delay: 1.8s }
html.sfx .sfx-scene .tl b { color: var(--amber); font-weight: 700; }
html.sfx .sfx-scene .tl .ok { color: #43D17C; }
@keyframes sfx-type { 0% { width: 0 } 26% { width: 100% } 88% { width: 100%; } 100% { width: 0 } }
html.sfx .sfx-scene .term-deploy { margin-top: auto; }
html.sfx .sfx-scene .term-deploy .bar { height: 9px; border-radius: 99px; background: rgba(244,237,227,.12); overflow: hidden; }
html.sfx .sfx-scene .term-deploy .bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--amber)); transform: scaleX(0); transform-origin: 0 50%; }
html.sfx .sfx-scene.active .term-deploy .bar i { animation: sfx-deploy 7s cubic-bezier(.3,.6,.4,1) infinite; }
@keyframes sfx-deploy { 0% { transform: scaleX(0) } 34% { transform: scaleX(1) } 88% { transform: scaleX(1) } 100% { transform: scaleX(0) } }
html.sfx .sfx-scene .term-deploy small { color: #8E8375; font-family: inherit; }

/* — escena 2: consola de conexión (Firebase) — */
html.sfx .sfx-scene .fb { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.sfx .sfx-scene .fb-card { border-radius: 16px; background: rgba(244,237,227,.05); border: 1px solid rgba(244,237,227,.12); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
html.sfx .sfx-scene .fb-card h4 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--side-muted); }
html.sfx .sfx-scene .fb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: clamp(.66rem, 1.2vw, .84rem); color: var(--side-ink); }
html.sfx .sfx-scene .sw { width: 40px; height: 22px; border-radius: 99px; background: rgba(244,237,227,.16); position: relative; flex: none; }
html.sfx .sfx-scene .sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--side-muted); }
html.sfx .sfx-scene.active .sw { animation: sfx-sw 6s ease-in-out infinite; background: rgba(245,166,35,.3); }
html.sfx .sfx-scene.active .sw i { animation: sfx-swk 6s ease-in-out infinite; }
html.sfx .sfx-scene.active .fb-row:nth-child(2) .sw, html.sfx .sfx-scene.active .fb-row:nth-child(2) .sw i { animation-delay: .5s }
html.sfx .sfx-scene.active .fb-row:nth-child(3) .sw, html.sfx .sfx-scene.active .fb-row:nth-child(3) .sw i { animation-delay: 1s }
@keyframes sfx-sw { 0%, 8% { background: rgba(244,237,227,.16) } 18%, 86% { background: rgba(21,116,63,.45) } 96%, 100% { background: rgba(244,237,227,.16) } }
@keyframes sfx-swk { 0%, 8% { left: 3px; background: var(--side-muted) } 18%, 86% { left: 21px; background: #43D17C } 96%, 100% { left: 3px; background: var(--side-muted) } }
html.sfx .sfx-scene .db { align-self: center; margin-top: 4px; }
html.sfx .sfx-scene .db .ring { transform-origin: 60px 66px; }
html.sfx .sfx-scene.active .db .ring { animation: sfx-ring 2.4s ease-out infinite; }
html.sfx .sfx-scene.active .db .ring.r2 { animation-delay: .8s } html.sfx .sfx-scene.active .db .ring.r3 { animation-delay: 1.6s }
@keyframes sfx-ring { 0% { transform: scale(.55); opacity: .8 } 100% { transform: scale(1.25); opacity: 0 } }
html.sfx .sfx-scene .fb-ok { margin-top: auto; font-size: .74rem; font-weight: 800; color: #43D17C; background: rgba(21,116,63,.14); border-radius: 10px; padding: 8px 12px; text-align: center; }

/* — escena 3: editor de marca — */
html.sfx .sfx-scene .bedit { height: 100%; display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 14px; }
html.sfx .sfx-scene .palette { border-radius: 16px; background: rgba(244,237,227,.05); border: 1px solid rgba(244,237,227,.12); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
html.sfx .sfx-scene .palette h4 { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--side-muted); }
html.sfx .sfx-scene .swatch { height: 34px; border-radius: 10px; border: 2px solid transparent; transition: border-color .3s; }
html.sfx .sfx-scene.active .swatch { animation: sfx-hl 6s step-end infinite; }
html.sfx .sfx-scene.active .swatch.s2 { animation-delay: 2s } html.sfx .sfx-scene.active .swatch.s3 { animation-delay: 4s }
@keyframes sfx-hl { 0% { border-color: var(--side-ink) } 33%, 100% { border-color: transparent } }
html.sfx .sfx-scene .shop { border-radius: 16px; background: linear-gradient(180deg, #2A2119, #1D1710); border: 1px solid rgba(244,237,227,.12); overflow: hidden; display: flex; flex-direction: column; }
html.sfx .sfx-scene .awning { height: 22px; background: repeating-linear-gradient(90deg, var(--primary) 0 22px, #FFF8F2 22px 44px); border-radius: 0 0 8px 8px; opacity: .85; }
html.sfx .sfx-scene .sign { margin: 18px auto 4px; position: relative; font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.6rem); letter-spacing: -.02em; }
html.sfx .sfx-scene .sign span { transition: opacity .5s; }
html.sfx .sfx-scene .sign .sfx-c1 { color: var(--primary); }
html.sfx .sfx-scene .sign .sfx-c2 { position: absolute; inset: 0; color: var(--amber); opacity: 0; }
html.sfx .sfx-scene.active .sign .sfx-c1 { animation: sfx-fadeA 6s ease-in-out infinite; }
html.sfx .sfx-scene.active .sign .sfx-c2 { animation: sfx-fadeB 6s ease-in-out infinite; }
@keyframes sfx-fadeA { 0%, 40% { opacity: 1 } 55%, 90% { opacity: 0 } 100% { opacity: 1 } }
@keyframes sfx-fadeB { 0%, 40% { opacity: 0 } 55%, 90% { opacity: 1 } 100% { opacity: 0 } }
html.sfx .sfx-scene .shop-row { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
html.sfx .sfx-scene .shop-row i { height: 40px; border-radius: 9px; background: rgba(244,237,227,.09); }
html.sfx .sfx-scene.active .shop-row i { animation: sfx-poprow 6s ease infinite; }
html.sfx .sfx-scene.active .shop-row i:nth-child(2) { animation-delay: .12s } html.sfx .sfx-scene.active .shop-row i:nth-child(3) { animation-delay: .24s }
@keyframes sfx-poprow { 0% { transform: scale(.92) } 12% { transform: scale(1) } 90% { transform: scale(1) } 100% { transform: scale(.92) } }

/* — escena 4: menú POS cargándose — */
html.sfx .sfx-scene .pos { height: 100%; display: flex; flex-direction: column; gap: 12px; }
html.sfx .sfx-scene .pos-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; }
html.sfx .sfx-scene .tile { border-radius: 14px; background: rgba(244,237,227,.05); border: 1px solid rgba(244,237,227,.12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
html.sfx .sfx-scene .tile .pz { width: clamp(26px, 4vw, 44px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #F6C453 0 62%, #E8A33D 63% 100%); position: relative; }
html.sfx .sfx-scene .tile .pz::before, html.sfx .sfx-scene .tile .pz::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #D24A1E; }
html.sfx .sfx-scene .tile .pz::before { top: 22%; left: 30%; } html.sfx .sfx-scene .tile .pz::after { bottom: 24%; right: 28%; box-shadow: -160% 90% 0 #D24A1E; }
html.sfx .sfx-scene .tile small { font-size: clamp(.58rem, 1vw, .74rem); color: var(--side-muted); font-weight: 700; }
html.sfx .sfx-scene.active .tile { animation: sfx-tiling 8s cubic-bezier(.34,1.4,.5,1) infinite; opacity: 0; }
html.sfx .sfx-scene.active .tile:nth-child(2) { animation-delay: .18s } html.sfx .sfx-scene.active .tile:nth-child(3) { animation-delay: .36s }
html.sfx .sfx-scene.active .tile:nth-child(4) { animation-delay: .54s } html.sfx .sfx-scene.active .tile:nth-child(5) { animation-delay: .72s }
html.sfx .sfx-scene.active .tile:nth-child(6) { animation-delay: .9s }
@keyframes sfx-tiling { 0% { opacity: 0; transform: translateY(16px) scale(.8) } 8%, 88% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-8px) scale(.96) } }
html.sfx .sfx-scene .ticket { align-self: center; display: flex; align-items: center; gap: 10px; background: var(--bg); color: var(--ink); border-radius: 12px; padding: 9px 16px; font-weight: 800; font-size: clamp(.7rem, 1.3vw, .9rem); box-shadow: 0 10px 26px rgba(0,0,0,.3); }
html.sfx .sfx-scene .ticket em { font-style: normal; color: var(--primary-ink); }
html.sfx .sfx-scene.active .ticket { animation: sfx-ticket 8s cubic-bezier(.3,1,.4,1) infinite; }
@keyframes sfx-ticket { 0%, 20% { transform: translateY(26px); opacity: 0 } 34%, 88% { transform: none; opacity: 1 } 100% { transform: translateY(26px); opacity: 0 } }

/* ---------- 8. Entradas con carácter (pricing / faq / form / footer) ---------- */
html.sfx .plan.reveal:not(.in) { transform: translateY(30px) rotate(-.8deg) scale(.97); }
html.sfx .plan:nth-of-type(2).reveal:not(.in) { transform: translateY(30px) rotate(.9deg) scale(.97); }
html.sfx .faq details.reveal:not(.in) { transform: translateY(18px) rotate(.35deg); }
html.sfx .contact-strip.reveal:not(.in) { transform: translateY(24px) scale(.985); }
html.sfx .lead-form.reveal:not(.in) { transform: translateY(26px) rotate(.4deg); }

/* ---------- 9. Final: zoom infinito hacia el CTA ---------- */
html.sfx .final.sfx-zsec { padding: 0; }
html.sfx .sfx-zstage { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; }
html.sfx .sfx-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(rgba(255,107,53,.07) 0 8deg, transparent 8deg 26deg); border-radius: 50%;
    -webkit-mask-image: radial-gradient(closest-side, transparent 20%, #000 55%, transparent 80%);
            mask-image: radial-gradient(closest-side, transparent 20%, #000 55%, transparent 80%); }
html.sfx .sfx-zframe {
    position: absolute; left: 50%; top: 50%; width: 52vmin; height: 52vmin; border-radius: 38px;
    border: 2px solid rgba(255,107,53,.34); opacity: 0;
}
html.sfx .sfx-zframe:nth-of-type(2) { width: 40vmin; height: 40vmin; border-color: rgba(245,166,35,.3); border-radius: 30px; }
html.sfx .sfx-zframe:nth-of-type(3) { width: 30vmin; height: 30vmin; border-color: rgba(23,19,14,.16); border-radius: 24px; }
html.sfx .sfx-zframe:nth-of-type(4) { width: 22vmin; height: 22vmin; border-style: dashed; border-color: rgba(255,107,53,.4); }
html.sfx .sfx-zcopy { position: relative; z-index: 1; text-align: center; padding: 0 22px; }
html.sfx .final h2 .sfx-w { transition: none; }
html.sfx .final .btn.sfx-zcta { position: relative; }
html.sfx .final .btn.sfx-zcta::after { /* halo del aterrizaje */
    content: ""; position: absolute; inset: -8px; border-radius: inherit;
    border: 2px solid rgba(255,107,53,.5); opacity: 0;
}
html.sfx .final.sfx-land .btn.sfx-zcta::after { animation: sfx-halo 1.9s ease-out infinite; }
@keyframes sfx-halo { 0% { transform: scale(.94); opacity: .8 } 100% { transform: scale(1.22); opacity: 0 } }

/* ---------- 10. Footer ---------- */
html.sfx footer .brand img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
html.sfx footer .brand:hover img { transform: rotate(-10deg) scale(1.08); }

/* ---------- 11. Responsive: móvil simplificado ---------- */
/* El motor no construye pista horizontal ni escenas sticky bajo 1024px,
   pero por seguridad la CSS también lo blindara tras una demolition. */
@media (max-width: 1023.98px) {
    html.sfx .sfx-hstage, html.sfx .sfx-hviewport { all: unset; display: block; }
    html.sfx .grid-3.sfx-track { display: grid; width: auto; padding-inline: 0; }
    html.sfx .sfx-track .feat { width: auto; transform: none !important; }
    html.sfx .sfx-wordsrow { display: none; }
    html.sfx .how.sfx-how { position: static; height: auto; }
    html.sfx .sfx-howcols { display: block; }
    html.sfx .sfx-stage { display: none; }
    html.sfx .how.sfx-how .how-step { opacity: 1; transform: none; }
    html.sfx .sfx-zstage { position: static; height: auto; }
    html.sfx .sfx-zframe, html.sfx .sfx-rays { display: none; }
    html.sfx .sfx-zcopy .sfx-w { opacity: 1 !important; transform: none !important; }
    html.sfx .sfx-mascot { left: 10px; bottom: 10px; }
}
/* El hero en pantallas cortas reduce decoración */
@media (max-height: 640px) { html.sfx .sfx-sun { display: none; } }