/* f2 · Inicio de la prueba, espera del bot, tutorial y celebración (#stepScreen-7 y vista de invitado).
   Usa las variables y piezas de f2.css.

   La tarjeta de la prueba (#trialTimerBox) es una sola pieza que cambia con el estado real:
   app.js escribe textos, contador y avisos en sus elementos de siempre y f2-prueba.js marca
   data-f2-state. Aquí solo se decide qué se ve en cada estado. Sin data-f2-state (si el
   módulo no llegó a cargar) se ve todo, como antes del rediseño. Terminada la prueba manda
   .expired (checkout-offer.css) y estas reglas se apartan. */

/* ---------- 1. Estructura ---------- */
#stepScreen-7 .trial-live-wrap{max-width:none;gap:22px;margin:0 auto 8px}
#stepScreen-7 .trial-timer-box:not(.expired){position:relative;display:grid;gap:18px;max-width:520px;padding:0;border:0;border-radius:0;background:none}
#stepScreen-7 .f2t-hero{display:grid;gap:12px;justify-items:center;min-inline-size:0}
#stepScreen-7 .f2t-hero>[data-f2-botcard]{inline-size:100%}
#stepScreen-7 .f2t-body{display:grid;gap:14px;min-inline-size:0;align-content:start}
#stepScreen-7 .f2t-body>*{min-inline-size:0;margin-block:0}

/* ---------- 2. Escena con la mascota ---------- */
#stepScreen-7 .f2t-scene{position:relative;isolation:isolate;inline-size:100%;block-size:160px;block-size:clamp(128px,22svh,188px);overflow:hidden;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-l);background:var(--f2-deep)}
#stepScreen-7 .f2t-scene:empty{display:none}
#stepScreen-7 .f2t-scene::before,#stepScreen-7 .f2t-scene::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
#stepScreen-7 .f2t-scene .f2t-mascot{position:absolute;z-index:1;left:50%;inset-block-end:3%;inline-size:auto;block-size:88%;max-inline-size:none;translate:-50% 0}
/* Escenario propio: el bot sobre el podio, con el foco respirando. */
#stepScreen-7 .f2t-scene[data-scene="stage"]{background:var(--f2-deep) url(/assets/f2/escenario-arena-640.webp) center 92%/cover no-repeat}
#stepScreen-7 .f2t-scene[data-scene="stage"]::before{background:radial-gradient(55% 60% at 50% 18%,rgba(141,229,255,.34),transparent 72%);animation:f2-spot 5.5s ease-in-out infinite alternate}
#stepScreen-7 .f2t-scene[data-scene="stage"]::after{background:linear-gradient(180deg,rgba(5,11,26,0) 55%,rgba(5,11,26,.55))}
#stepScreen-7 .f2t-scene[data-scene="stage"] .f2t-mascot{block-size:80%;inset-block-end:9%}
/* Vuelo: estelas que pasan mientras el bot se conecta (indeterminado, no mide nada). */
#stepScreen-7 .f2t-scene[data-scene="flight"]{background:radial-gradient(70% 90% at 72% 12%,rgba(56,214,255,.24),transparent 70%),radial-gradient(60% 80% at 10% 100%,rgba(155,123,255,.22),transparent 70%),linear-gradient(160deg,#0c1d44,#07112a 72%)}
#stepScreen-7 .f2t-scene[data-scene="flight"]::before{inset:-40% -60%;background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(141,229,255,.16) 46px 48px,transparent 48px 120px);animation:f2t-streaks 1.5s linear infinite}
#stepScreen-7 .f2t-scene[data-scene="flight"] .f2t-mascot{block-size:92%;inset-block-end:2%;animation:f2t-fly 3.2s ease-in-out infinite}
/* Destello de celebración: el bot ya está en línea. */
#stepScreen-7 .f2t-scene[data-scene="burst"]{background:linear-gradient(180deg,rgba(7,17,42,.28),rgba(7,17,42,.62)),var(--f2-deep) url(/assets/f2/destello-512.webp) center 42%/cover no-repeat;border-color:var(--f2-stroke-strong)}
#stepScreen-7 .f2t-scene[data-scene="burst"] .f2t-mascot{animation:f2t-hop 1.6s var(--f2-ease) infinite}
/* Aviso: sin escenario, luz baja. */
#stepScreen-7 .f2t-scene[data-scene="dim"]{background:radial-gradient(70% 90% at 50% 110%,rgba(155,123,255,.26),transparent 70%),linear-gradient(180deg,#0b1730,#07112a)}
#stepScreen-7 .f2t-scene[data-scene="dim"] .f2t-mascot{animation:none}
/* Escena ilustrada (jugador y bot juntos): ocupa todo el hueco. */
#stepScreen-7 .f2t-scene[data-scene="photo"]{block-size:200px;block-size:clamp(168px,30svh,236px);border-color:var(--f2-stroke-strong)}
#stepScreen-7 .f2t-scene .f2t-photo{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover;object-position:50% 30%}
#stepScreen-7 .f2t-scene[data-scene="photo"]::after{z-index:1;background:linear-gradient(180deg,transparent 60%,rgba(5,11,26,.6))}

/* ---------- 3. Titular, subtítulo y botón ---------- */
#stepScreen-7 .f2t-title{margin:0;font-size:clamp(1.7rem,7.4vw,2.35rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}
#stepScreen-7 .f2t-title,#stepScreen-7 .f2t-title span{color:var(--f2-text)}
#stepScreen-7 .f2t-sub{max-width:34ch;margin:0 auto;color:var(--f2-text-soft);font-size:.98rem;line-height:1.5;text-wrap:pretty}
#stepScreen-7 .f2t-start,#stepScreen-7 .f2t-open{min-block-size:64px;padding:14px 16px;border-radius:18px;font-size:clamp(.96rem,4.4vw,1.08rem);font-weight:800;line-height:1.2;letter-spacing:.01em}
#stepScreen-7 .f2t-start:disabled,#stepScreen-7 .f2t-open:disabled{opacity:1}
#stepScreen-7 .f2t-retry{min-block-size:60px;border-radius:18px;font-size:1rem;font-weight:800}

/* ---------- 4. Estado y reloj ---------- */
#stepScreen-7 .trial-timer-box:not(.expired) .f2t-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
#stepScreen-7 .trial-timer-box:not(.expired) .trial-status-pill{min-block-size:36px;padding:6px 14px;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-pill);background:rgba(13,24,48,.72);color:var(--f2-text-soft);font-size:.74rem;font-weight:800;letter-spacing:.04em;line-height:1.3}
#stepScreen-7 .f2t-clock-label{display:none}
#stepScreen-7 .trial-timer-box[data-f2-state]:not(.expired) .f2t-clock{display:inline-flex;align-items:center;gap:10px;min-block-size:36px;padding-block:2px;padding-inline:14px 6px;border:1px solid var(--f2-stroke-strong);border-radius:var(--f2-radius-pill);background:rgba(13,24,48,.82)}
#stepScreen-7 .trial-timer-box[data-f2-state]:not(.expired) .f2t-clock-label{display:inline;color:var(--f2-text-dim);font-size:.74rem;font-weight:700;line-height:1.2}
#stepScreen-7 .trial-timer-box:not(.expired) .trial-countdown-digits{margin:0;padding:0 10px;border-radius:var(--f2-radius-pill);background:rgba(56,214,255,.14);color:var(--f2-text);font-size:1.35rem;font-weight:800;letter-spacing:0;line-height:1.4}
#stepScreen-7 .trial-timer-box:not(.expired) #trialTimerHelpText{max-width:none;margin:0;color:var(--f2-text-soft);font-size:.9rem;line-height:1.55}

/* ---------- 5. Progreso por estados reales ---------- */
#stepScreen-7 .deploy-progress-box{margin:0;padding:14px 16px;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-m);background:var(--f2-panel);text-align:start}
#stepScreen-7 .f2t-progress{display:none;gap:12px;margin:0;padding:0;list-style:none}
#stepScreen-7 .trial-timer-box[data-f2-state] .f2t-progress{display:grid}
#stepScreen-7 .trial-timer-box[data-f2-state] #inlineDeployProgressTitle,#stepScreen-7 .trial-timer-box[data-f2-state] #inlineDeployStepsList{display:none}
#stepScreen-7 .f2t-progress li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:12px;color:var(--f2-text-dim);font-size:.92rem;font-weight:700;line-height:1.3}
#stepScreen-7 .f2t-progress-mark,.f2t-mile-mark{position:relative;display:grid;place-items:center;inline-size:28px;block-size:28px;border:2px solid rgba(141,229,255,.22);border-radius:50%;color:transparent;font-size:.86rem}
#stepScreen-7 .f2t-progress li[data-state="done"]{color:var(--f2-mint)}
#stepScreen-7 .f2t-progress li[data-state="done"] .f2t-progress-mark{border-color:var(--f2-mint);background:var(--f2-mint);color:#04213a}
#stepScreen-7 .f2t-progress li[data-state="current"]{color:var(--f2-text)}
#stepScreen-7 .f2t-progress li[data-state="current"] .f2t-progress-mark{border-color:rgba(141,229,255,.2);border-block-start-color:var(--f2-cyan-hot);animation:f2t-spin .9s linear infinite}

/* ---------- 6. «Abre Fortnite ya» y avisos del servidor ---------- */
#stepScreen-7 .trial-timer-box:not(.expired) .device-host-setup{display:grid;gap:6px;margin:0;padding:14px 16px;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-m);background:rgba(13,24,48,.72);color:var(--f2-text-soft);font-size:.9rem;line-height:1.5;text-align:start}
#stepScreen-7 .f2t-coach-title{display:none;color:var(--f2-cyan);font-size:1.04rem;font-weight:800;line-height:1.25}
#stepScreen-7 .device-host-wait{margin:0}
#stepScreen-7 .device-host-wait-guide{color:var(--f2-text);font-weight:600}
#stepScreen-7 .device-host-wait-elapsed{margin-block-start:6px;color:var(--f2-text-dim);font-size:.82rem}

/* ---------- 7. Hitos: bot conectado · en tu sala · juega una partida ---------- */
.f2t-miles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.f2t-miles li{display:grid;justify-items:center;align-content:start;gap:6px;min-inline-size:0;padding:10px 6px;border:1px solid var(--f2-stroke);border-radius:14px;background:rgba(13,24,48,.6);color:var(--f2-text-dim);font-size:.74rem;font-weight:800;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.f2t-miles li[data-state="done"]{border-color:rgba(121,224,183,.45);color:var(--f2-mint)}
.f2t-miles li[data-state="done"] .f2t-mile-mark{border-color:var(--f2-mint);background:var(--f2-mint);color:#04213a}
.f2t-miles li[data-state="current"]{border-color:var(--f2-stroke-strong);background:rgba(56,214,255,.1);color:var(--f2-text)}
.f2t-miles li[data-state="current"] .f2t-mile-mark{border-color:var(--f2-cyan-hot)}
/* El anillo llama la atención al cambiar de hito y luego se calma (tres pulsos, no 30 minutos). */
.f2t-miles li[data-state="current"] .f2t-mile-mark::after{content:"";position:absolute;inset:-2px;border:2px solid var(--f2-cyan-hot);border-radius:50%;opacity:0;animation:f2t-ring 1.8s ease-out 3}
.f2t-miles li.f2t-pop .f2t-mile-mark{animation:f2t-pop var(--f2-slow) var(--f2-ease) 1}
/* «Juega una partida» no es una casilla que espera un check: es la invitación a hacerlo ya. */
.f2t-miles .f2t-mile-go{border-style:dashed;color:var(--f2-text-dim)}
.f2t-miles li[data-f2-mile="play"][data-state="current"]{border-color:transparent;background:linear-gradient(135deg,var(--f2-cyan-hot),var(--f2-cyan));color:#04213a}
.f2t-miles li[data-f2-mile="play"][data-state="current"] .f2t-mile-go{border:0;background:rgba(4,33,58,.16);color:#04213a}
.f2t-miles li[data-f2-mile="play"][data-state="current"] .f2t-mile-go::after{content:none}

/* ---------- 8. Cómo funciona: tres pasos, confianza y letra pequeña ---------- */
#stepScreen-7 .f2t-how{display:grid;gap:14px}
#stepScreen-7 .f2t-steps{display:grid;gap:8px;inline-size:fit-content;max-inline-size:100%;margin:0 auto;padding:0;list-style:none;counter-reset:f2t-step;text-align:start}
#stepScreen-7 .f2t-steps li{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:10px;color:var(--f2-text-soft);font-size:.9rem;font-weight:700;line-height:1.3;counter-increment:f2t-step}
#stepScreen-7 .f2t-steps li::before{content:counter(f2t-step);display:grid;place-items:center;inline-size:26px;block-size:26px;border:1px solid var(--f2-stroke-strong);border-radius:50%;background:rgba(56,214,255,.12);color:var(--f2-cyan);font-size:.78rem;font-weight:800}
#stepScreen-7 .f2t-steps li:not(:last-child)::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:12px;inline-size:2px;block-size:8px;background:var(--f2-stroke-strong)}
#stepScreen-7 .f2t-trust{gap:4px 16px}
#stepScreen-7 .f2t-trust .f2-chip{min-block-size:26px;padding:0;border:0;background:none;font-size:.8rem;white-space:normal;text-align:start;line-height:1.25}
#stepScreen-7 .f2t-details{border-block-start:1px solid var(--f2-stroke);padding-block-start:4px;text-align:start}
#stepScreen-7 .f2t-details summary{display:flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;color:var(--f2-text-dim);font-size:.84rem;font-weight:700;cursor:pointer;list-style:none}
#stepScreen-7 .f2t-details summary::-webkit-details-marker{display:none}
#stepScreen-7 .f2t-details summary::after{content:"";inline-size:8px;block-size:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--f2-fast) var(--f2-ease)}
#stepScreen-7 .f2t-details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
#stepScreen-7 .f2t-details p{margin:0 0 10px;color:var(--f2-text-dim);font-size:.84rem;line-height:1.6}

/* ---------- 9. Últimos minutos, detener y volver ---------- */
.f2t-last{margin:0;padding:12px 14px;border:1px solid rgba(155,123,255,.5);border-radius:14px;background:rgba(155,123,255,.12);color:var(--f2-text);font-size:.88rem;font-weight:600;line-height:1.5;text-align:start}
#stepScreen-7 .f2t-stop{justify-self:center;min-block-size:44px;padding:8px 14px;border-color:transparent;background:none;color:var(--f2-text-dim);font-size:.76rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
#stepScreen-7 .f2t-stop:hover:not(:disabled){border-color:transparent;background:none;color:var(--f2-text)}
#stepScreen-7:not(.trial-over) .step-nav-footer{justify-content:center;margin-block-start:16px;padding-block-start:0;border-block-start:0}
#stepScreen-7:not(.trial-over) .step-nav-footer .btn-glass{min-block-size:44px;border-color:transparent;background:none;color:var(--f2-text-dim);font-size:.76rem;font-weight:600}
#stepScreen-7:not(.trial-over) .step-nav-footer .btn-glass:hover{color:var(--f2-text)}

/* ---------- 10. Qué se ve en cada estado ---------- */
/* La tarjeta del bot (taquilla) protagoniza el inicio; si existe, sustituye a la escena de respaldo. */
#stepScreen-7 .f2t-mini{display:none}
#stepScreen-7 .trial-timer-box:is([data-f2-state="checking"],[data-f2-state="ready"],[data-f2-state="unavailable"],[data-f2-state="error"],[data-f2-state="starterror"]) .f2t-hero[data-f2-filled] .f2t-scene{display:none}
/* En línea y en la sala, el protagonista vuelve a ser su bot (la escena queda de respaldo). */
#stepScreen-7 .trial-timer-box:is([data-f2-state="online"],[data-f2-state="party"]) .f2t-hero[data-f2-filled] .f2t-scene{display:none}
/* Mientras conecta manda el bot volando; su bot sigue presente en la franja compacta. */
#stepScreen-7 .trial-timer-box:is([data-f2-state="preparing"],[data-f2-state="connecting"],[data-f2-state="reconnecting"],[data-f2-state="stopping"]) .f2t-hero>[data-f2-botcard]{display:none}
#stepScreen-7 .trial-timer-box:is([data-f2-state="preparing"],[data-f2-state="connecting"],[data-f2-state="reconnecting"]) .f2t-mini:not(:empty){display:block}
/* Inicio: solo la invitación a empezar. */
#stepScreen-7 .trial-timer-box:is([data-f2-state="checking"],[data-f2-state="ready"]) :is(.f2t-meta,#trialTimerHelpText,.device-host-setup){display:none}
/* Sin plazas o servicio caído: mensaje humano y una salida («Volver a consultar»). */
#stepScreen-7 .trial-timer-box[data-f2-state="unavailable"] :is(.f2t-meta,#trialTimerHelpText,.device-host-setup,.f2t-start,.f2t-how){display:none}
/* No se pudo comprobar o empezar: el motivo real del servidor y el botón para reintentar. */
#stepScreen-7 .trial-timer-box:is([data-f2-state="error"],[data-f2-state="starterror"]) :is(.f2t-meta,.device-host-setup,.f2t-how){display:none}
#stepScreen-7 .trial-timer-box:is([data-f2-state="error"],[data-f2-state="starterror"]) #trialTimerHelpText{padding:12px 14px;border:1px solid rgba(255,143,163,.4);border-radius:14px;background:rgba(255,143,163,.1);color:var(--f2-text);font-weight:600;text-align:start}
/* Preparando: el botón ya respondió; manda el progreso. */
#stepScreen-7 .trial-timer-box[data-f2-state="preparing"] :is(.f2t-meta,#trialTimerHelpText,.device-host-setup,.f2t-start,.f2t-how){display:none}
/* Conectando (primera espera): progreso real y qué hacer mientras tanto. */
#stepScreen-7 .trial-timer-box[data-f2-state="connecting"] :is(.trial-status-pill,#trialTimerHelpText,#deviceHostStatusText,.f2t-start,.f2t-how){display:none}
#stepScreen-7 .trial-timer-box[data-f2-state="connecting"] .f2t-coach-title{display:block}
#stepScreen-7 .trial-timer-box[data-f2-state="connecting"] .device-host-setup{border-color:var(--f2-stroke-strong);background:linear-gradient(180deg,rgba(56,214,255,.12),rgba(13,24,48,.78))}
/* Reconectando: el mensaje del servidor explica qué pasa. */
#stepScreen-7 .trial-timer-box[data-f2-state="reconnecting"] :is(#trialTimerHelpText,.f2t-start,.f2t-how){display:none}
/* Bot en línea y bot en la sala: celebración, hitos y un solo paso siguiente. */
#stepScreen-7 .trial-timer-box:is([data-f2-state="online"],[data-f2-state="party"]) :is(.trial-status-pill,#trialTimerHelpText,.device-host-setup,.f2t-start,.f2t-how){display:none}
#stepScreen-7 .trial-timer-box:is([data-f2-state="online"],[data-f2-state="party"]) .trial-countdown-digits{font-size:1.6rem}
#stepScreen-7 .trial-timer-box:is([data-f2-state="online"],[data-f2-state="party"]) .f2t-title{background:linear-gradient(92deg,#fff 10%,var(--f2-cyan) 62%,var(--f2-violet));-webkit-background-clip:text;background-clip:text}
#stepScreen-7 .trial-timer-box:is([data-f2-state="online"],[data-f2-state="party"]) :is(.f2t-title,.f2t-title span){color:transparent}
/* En línea, el botón del siguiente paso va antes que los hitos (sigue primero también al tabular). */
#stepScreen-7 .trial-timer-box[data-f2-state="online"] .f2t-miles{order:1}
#stepScreen-7 .trial-timer-box[data-f2-state="online"] .f2t-stop{order:2}
/* Lo que toca ahora se hace en Fortnite: es una instrucción (texto con un mando), no un botón. */
#stepScreen-7 .f2t-play-icon{display:none}
#stepScreen-7 .trial-timer-box[data-f2-state="party"]{--f2t-pad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4M8 9v4M15 12h.01M18 10h.01'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E")}
#stepScreen-7 .trial-timer-box[data-f2-state="party"] .f2t-sub{position:relative;max-width:34ch;padding:12px 14px;padding-inline-start:50px;border:1px solid var(--f2-stroke-strong);border-radius:14px;background:rgba(56,214,255,.09);color:var(--f2-text);font-size:1.04rem;font-weight:700;line-height:1.4;text-align:start}
#stepScreen-7 .trial-timer-box[data-f2-state="party"] .f2t-sub::before{content:"";position:absolute;inset-inline-start:14px;inset-block-start:50%;inline-size:24px;block-size:24px;margin-block-start:-12px;background:var(--f2-cyan);-webkit-mask:var(--f2t-pad) center/contain no-repeat;mask:var(--f2t-pad) center/contain no-repeat}
/* Cerrando la prueba. */
#stepScreen-7 .trial-timer-box[data-f2-state="stopping"] :is(.device-host-setup,.f2t-start,.f2t-how,.f2t-hero){display:none}
/* El estado no se pudo actualizar: el aviso del servidor vuelve a verse, pase lo que pase. */
#stepScreen-7 .trial-timer-box[data-f2-stale]:not(.expired) :is(.f2t-meta,#trialLiveStatusPill){display:flex}
#stepScreen-7 .trial-timer-box[data-f2-stale]:not(.expired) #trialTimerHelpText{display:block}
/* Prueba terminada: queda el bloque de siempre (checkout-offer.css) y la oferta de debajo. */
#stepScreen-7 .trial-timer-box.expired :is(.f2t-hero,.f2t-mini,.f2t-how,.f2t-last,.f2t-miles){display:none}
#stepScreen-7 .trial-timer-box.expired .f2t-body{display:block}
#stepScreen-7 .trial-timer-box.expired .f2t-title{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 11. Escritorio: escena a un lado, acción al otro ---------- */
@media (min-width:900px){
  #stepScreen-7 .trial-timer-box:not(.expired){grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:center;gap:44px;max-width:860px;text-align:start}
  #stepScreen-7 .trial-timer-box[data-f2-state="stopping"]{grid-template-columns:minmax(0,1fr);max-width:520px;text-align:center}
  #stepScreen-7 .f2t-scene,#stepScreen-7 .f2t-scene[data-scene="photo"]{block-size:auto;aspect-ratio:4/5;max-block-size:430px}
  #stepScreen-7 .f2t-scene[data-scene="stage"]{background-position:center 100%}
  #stepScreen-7 .f2t-scene .f2t-mascot,#stepScreen-7 .f2t-scene[data-scene="flight"] .f2t-mascot{block-size:auto;inline-size:74%;inset-block-end:14%}
  #stepScreen-7 .f2t-scene[data-scene="stage"] .f2t-mascot{inline-size:56%;inset-block-end:12%}
  #stepScreen-7 .f2t-scene .f2t-photo{object-position:50% 50%}
  #stepScreen-7 .f2t-title{font-size:clamp(2rem,3.4vw,2.7rem)}
  #stepScreen-7 .f2t-sub{margin-inline:0;max-width:40ch;font-size:1.02rem}
  #stepScreen-7 .trial-timer-box:not(.expired) .f2t-meta{justify-content:flex-start}
  #stepScreen-7 .f2t-steps{margin-inline:0}
  #stepScreen-7 .f2t-steps li{font-size:.98rem}
  #stepScreen-7 .f2t-trust .f2-chip{font-size:.86rem}
  #stepScreen-7 .f2t-progress li{font-size:.98rem}
  #stepScreen-7 .f2t-trust{justify-content:flex-start}
  #stepScreen-7 .f2t-details summary{justify-content:flex-start}
  #stepScreen-7 .f2t-stop{justify-self:start;padding-inline:0}
  #stepScreen-7 .trial-timer-box[data-f2-state="party"] .f2t-sub{margin-inline:0}
}

/* ---------- 12. Móvil: el botón de empezar nunca queda fuera de la vista ---------- */
@media (max-width:899px){
  #stepScreen-7 .trial-timer-box:is([data-f2-state="checking"],[data-f2-state="ready"]) .f2t-start{position:sticky;inset-block-end:calc(12px + var(--f2-safe-b));z-index:6}
}
/* Pantallas bajas (360×640): la tarjeta grande del bot cede el sitio a la franja compacta. */
@media (max-width:899px) and (max-height:720px){
  #stepScreen-7 .f2t-scene{block-size:128px;block-size:clamp(112px,20svh,150px)}
  #stepScreen-7 .trial-timer-box:is([data-f2-state="checking"],[data-f2-state="ready"],[data-f2-state="unavailable"],[data-f2-state="error"],[data-f2-state="starterror"],[data-f2-state="online"],[data-f2-state="party"]) .f2t-hero[data-f2-filled]{display:none}
  #stepScreen-7 .trial-timer-box:is([data-f2-state="checking"],[data-f2-state="ready"],[data-f2-state="unavailable"],[data-f2-state="error"],[data-f2-state="starterror"],[data-f2-state="online"],[data-f2-state="party"]) .f2t-mini:not(:empty){display:block}
  #stepScreen-7 .trial-timer-box:not(.expired){gap:14px}
  #stepScreen-7 .f2t-body{gap:12px}
}

/* ---------- 13. Movimiento ---------- */
@keyframes f2t-streaks{from{transform:translate3d(0,0,0)}to{transform:translate3d(-120px,56px,0)}}
@keyframes f2t-fly{0%,100%{transform:translate3d(-5px,4px,0) rotate(-2deg)}50%{transform:translate3d(6px,-6px,0) rotate(2deg)}}
@keyframes f2t-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px)}60%{transform:translateY(0)}}
@keyframes f2t-spin{to{transform:rotate(360deg)}}
@keyframes f2t-ring{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
@keyframes f2t-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  #stepScreen-7 .f2t-scene::before,#stepScreen-7 .f2t-scene .f2t-mascot,.f2t-miles li .f2t-mile-mark,.f2t-miles li .f2t-mile-mark::after{animation:none!important}
  .f2t-miles li[data-state="current"] .f2t-mile-mark::after{opacity:0}
  /* El giro indica «en curso»: sin movimiento queda un anillo fijo resaltado. */
  #stepScreen-7 .f2t-progress li[data-state="current"] .f2t-progress-mark{animation:none;border-color:var(--f2-cyan-hot)}
  #stepScreen-7 .f2t-details summary::after{transition:none}
}