/* ===================================================================
   Página de presentación: el "video explicativo" hecho con HTML.

   Una escena visible cada vez dentro de .tour-stage, con maquetas
   animadas. Las animaciones solo corren en la escena activa.
   =================================================================== */

.tour-hero{
    padding:54px 0 26px;
    background:radial-gradient(120% 120% at 50% -30%, var(--accent-soft), transparent 60%),
               linear-gradient(170deg, var(--hero-1), var(--hero-2));
    border-bottom:1px solid var(--border);
}
.tour-hero h1{margin:6px 0 10px;font-size:clamp(1.9rem,4.5vw,3rem);color:var(--heading)}
.tour-hero h1 strong{color:var(--accent-ink)}
.tour-lead{max-width:58ch;color:var(--muted);font-size:1.05rem;margin:0}

/* ---------- El reproductor ---------- */
.tour{
    position:relative;
    background:linear-gradient(160deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);border-radius:18px;overflow:hidden;
    box-shadow:var(--shadow);
}
.tour-stage{position:relative;min-height:clamp(320px,46vh,460px);display:flex}
.tour-scene{
    display:none;width:100%;
    padding:clamp(18px,3vw,36px);
}
.tour-scene.is-active{display:flex;align-items:center}
.sc-split,.sc-cover{width:100%}

/* Cada pieza entra con un pequeño retraso (--d) al activarse la escena */
.tour-scene.is-active .fx{animation:tour-in .55s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--d,0) * 1s)}
@keyframes tour-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Portada y cierre ---------- */
.sc-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;height:100%;gap:10px;min-height:clamp(300px,46vh,460px)}
.sc-cover img{width:clamp(72px,9vw,110px)}
.sc-cover h2{margin:4px 0 0;font-size:clamp(1.6rem,4vw,2.6rem);color:var(--heading)}
.sc-cover p{margin:0;color:var(--muted);font-size:1.05rem}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.sc-chips span{
    padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;
    color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);
}
.sc-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}

/* ---------- Escena partida: texto + maqueta ---------- */
.sc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,3vw,40px);
    align-items:center;height:100%}
@media(max-width:820px){.sc-split{grid-template-columns:1fr;gap:18px}}
.sc-step{
    display:inline-block;font-family:var(--font-head);font-size:.8rem;font-weight:800;
    letter-spacing:.2em;color:var(--accent-ink);
}
.sc-text h2{margin:6px 0 10px;font-size:clamp(1.35rem,2.6vw,2rem);color:var(--heading);line-height:1.15}
.sc-text p{margin:0 0 8px;color:var(--text);font-size:1rem;max-width:46ch}
.sc-note{color:var(--muted) !important;font-size:.92rem !important}
.sc-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sc-list li{
    padding:6px 12px;border-radius:999px;font-size:.86rem;font-weight:600;
    background:var(--surface-3);border:1px solid var(--border);color:var(--text);
}
.sc-art{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}

/* ===================================================================
   Maquetas (todo con cajas: ni capturas ni imágenes)
   =================================================================== */

/* Ventana del panel */
.mk-window{width:min(100%,420px);background:var(--surface);border:1px solid var(--border);
    border-radius:14px;overflow:hidden}
.mk-bar{display:flex;gap:6px;padding:10px 12px;background:var(--surface-3);border-bottom:1px solid var(--border)}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:var(--border-soft)}
.mk-body{padding:12px;display:grid;gap:8px}
.mk-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.mk-row span{font-weight:700;color:var(--heading);font-size:.95rem}
.mk-row em{font-style:normal;color:var(--muted);font-size:.82rem}
.mk-add{padding:9px 12px;border:1px dashed var(--accent-line);border-radius:10px;
    color:var(--accent-ink);font-weight:700;font-size:.88rem;text-align:center}

/* Teléfono con el formulario de inscripción */
.mk-phone{width:min(100%,230px);padding:14px;border-radius:22px;
    background:var(--surface);border:1px solid var(--border);display:grid;gap:9px}
.mk-phone-top{height:5px;width:46px;border-radius:999px;background:var(--border);margin:0 auto 6px}
.mk-field{padding:10px 12px;border-radius:9px;background:var(--surface-2);
    border:1px solid var(--border);color:var(--muted);font-size:.85rem}
.mk-send{padding:11px;border-radius:9px;text-align:center;font-weight:700;
    background:var(--accent);color:var(--on-accent);font-size:.9rem}
.mk-inbox{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;
    background:var(--surface-2);border:1px solid var(--accent-line)}
.mk-inbox strong{color:var(--heading);font-size:.92rem}
.mk-ok{color:var(--ok);font-weight:700;font-size:.85rem}

/* Sorteo: una ficha vuela de la bolsa al cuadro */
.mk-draw{display:grid;grid-template-columns:auto 1fr;gap:16px;width:min(100%,460px);align-items:center}
.mk-pool{display:grid;gap:8px;padding:12px;border-radius:12px;
    background:var(--surface-2);border:1px dashed var(--border)}
.mk-pool span, .mk-slot{padding:8px 12px;border-radius:9px;font-size:.88rem;font-weight:600}
.mk-pool span{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line)}
.mk-bracket{display:grid;gap:8px}
.mk-slot{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.tour-scene.is-active .mk-fly{
    animation:mk-fly 2.4s ease-in-out .9s both;
    padding:8px 12px;border-radius:9px;font-size:.88rem;font-weight:600;
    background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line);
}
@keyframes mk-fly{
    0%{opacity:0;transform:none}
    15%{opacity:1;transform:none}
    60%{opacity:1;transform:translate(120px,-6px) scale(1.04)}
    75%,100%{opacity:0;transform:translate(150px,-6px) scale(.96)}
}
.tour-scene.is-active .mk-target{animation:mk-pop .5s ease-out 2.9s both;
    border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
@keyframes mk-pop{0%{opacity:0;transform:scale(.92)}60%{transform:scale(1.03)}100%{opacity:1;transform:none}}

/* Asistencia */
.mk-att{width:min(100%,330px);display:grid;gap:8px}
.mk-player{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
    background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:.92rem}
.mk-player b{margin-left:auto;color:var(--muted);font-weight:600;font-size:.8rem}
.mk-player i{width:11px;height:11px;border-radius:50%;background:var(--danger);flex-shrink:0}
.mk-player i.on{background:var(--ok)}
.tour-scene.is-active .mk-check{animation:tour-in .5s ease-out .9s both}
.tour-scene.is-active .mk-check i{animation:mk-on .4s ease-out 1.5s both}
@keyframes mk-on{from{background:var(--danger);transform:scale(1)}
    50%{transform:scale(1.5)}to{background:var(--ok);transform:scale(1)}}

/* Canchas: una tarjeta viaja de "listos" a la cancha */
.mk-courts{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,460px)}
.mk-ready,.mk-court{padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:grid;gap:8px;align-content:start}
.mk-ready-t,.mk-court-t{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mk-court-t{color:var(--accent-ink)}
.mk-card{padding:9px 11px;border-radius:9px;background:var(--surface);border:1px solid var(--border);
    font-size:.85rem;font-weight:600}
.mk-card.playing{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-soft) inset}
.mk-drop{padding:10px;border:1px dashed var(--border);border-radius:9px;text-align:center;
    color:var(--muted);font-size:.78rem}
.tour-scene.is-active .mk-move{animation:mk-move 3s ease-in-out 1s both}
@keyframes mk-move{
    0%{opacity:0;transform:none}
    12%{opacity:1;transform:none}
    55%{opacity:1;transform:translate(118%,46px) rotate(-2deg)}
    70%,100%{opacity:.25;transform:translate(118%,46px)}
}

/* Marcador */
.mk-score{width:min(100%,390px);padding:14px 16px;border-radius:14px;
    background:var(--surface);border:1px solid var(--accent-line)}
.mk-score-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.mk-score-row span{flex:1;min-width:0;font-weight:700;color:var(--heading);font-size:1rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-score-row b{font-variant-numeric:tabular-nums;min-width:28px;text-align:center}
.mk-sets,.mk-games{color:var(--muted);font-size:1.05rem}
.mk-point{font-family:var(--font-head);font-size:1.5rem;color:var(--accent-ink);min-width:50px !important}
.mk-voice{margin-top:8px;padding-top:10px;border-top:1px solid var(--border);
    color:var(--muted);font-size:.85rem}

/* Televisor */
.mk-tv{width:min(100%,460px);border-radius:14px;overflow:hidden;
    background:var(--surface);border:1px solid var(--border)}
.mk-tv-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:10px 14px;background:var(--header-bg);border-bottom:1px solid var(--border)}
.mk-tv-head span{font-family:var(--font-head);font-weight:800;color:var(--heading);font-size:.95rem}
.mk-tv-head em{font-style:normal;color:var(--muted);font-size:.72rem;letter-spacing:.1em}
.mk-tv-body{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.mk-tv-card{padding:10px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);
    font-size:.74rem;color:var(--muted);line-height:1.45}
.mk-tv-card b{color:var(--heading);font-size:.82rem}
.mk-tv-foot{color:var(--muted);font-size:.82rem}

/* Resumen y rifa */
.mk-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,400px)}
.mk-stat{padding:14px;border-radius:12px;text-align:center;
    background:var(--surface);border:1px solid var(--border)}
.mk-stat b{display:block;font-family:var(--font-head);font-size:1.8rem;color:var(--accent-ink);line-height:1}
.mk-stat span{font-size:.78rem;color:var(--muted)}
.mk-raffle{padding:10px 16px;border-radius:999px;background:var(--accent-soft);
    border:1px solid var(--accent-line);color:var(--text);font-size:.92rem}
.mk-raffle b{color:var(--accent-ink)}

/* Web pública */
.mk-public{width:min(100%,330px);display:grid;gap:8px}
.mk-pub-row{padding:12px 14px;border-radius:10px;background:var(--surface);
    border:1px solid var(--border);font-weight:600;font-size:.92rem;color:var(--text)}

/* ===================================================================
   Barra de control
   =================================================================== */
.tour-bar{
    display:flex;align-items:center;gap:10px;padding:12px 14px;
    background:var(--surface-3);border-top:1px solid var(--border);
}
.tour-btn{
    width:36px;height:36px;flex-shrink:0;cursor:pointer;font:inherit;font-size:1rem;
    color:var(--heading);background:var(--surface);border:1px solid var(--border);border-radius:10px;
}
.tour-btn:hover{border-color:var(--accent-line);color:var(--accent-ink)}
.tour-play{font-size:.78rem;letter-spacing:.06em}
.tour-track{flex:1;min-width:0;display:flex;gap:5px;align-items:center}
.tour-dot{flex:1;min-width:0;height:20px;padding:0;background:none;border:0;cursor:pointer}
.tour-dot i{display:block;height:5px;border-radius:999px;background:var(--border);overflow:hidden;position:relative}
.tour-dot.seen i{background:var(--accent-line)}
.tour-dot.on i::after{
    content:'';position:absolute;inset:0;width:var(--p,0%);
    background:var(--accent);border-radius:999px;transition:width .25s linear;
}
.tour-count{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.tour-help{margin:10px 0 0;text-align:center}

/* Quien prefiere menos movimiento: sin animaciones ni avance solo */
@media (prefers-reduced-motion: reduce){
    .tour-scene.is-active .fx,
    .tour-scene.is-active .mk-fly,
    .tour-scene.is-active .mk-move,
    .tour-scene.is-active .mk-check,
    .tour-scene.is-active .mk-check i,
    .tour-scene.is-active .mk-target{animation:none}
}

/* ===================================================================
   Pantalla completa: el reproductor ocupa todo y crece la letra,
   que es como se mira desde lejos o se enseña en una reunión.
   =================================================================== */
.tour:fullscreen{
    display:flex;flex-direction:column;height:100vh;width:100vw;
    border:0;border-radius:0;box-shadow:none;
    background:linear-gradient(160deg, var(--surface), var(--bg));
}
.tour:fullscreen .tour-stage{flex:1;min-height:0}
.tour:fullscreen .tour-scene{padding:clamp(24px,4vw,70px)}
.tour:fullscreen .sc-text h2{font-size:clamp(1.8rem,3.4vw,3.2rem)}
.tour:fullscreen .sc-text p{font-size:clamp(1rem,1.5vw,1.5rem);max-width:30ch}
.tour:fullscreen .sc-list li{font-size:clamp(.9rem,1.1vw,1.15rem);padding:8px 16px}
.tour:fullscreen .sc-step{font-size:clamp(.85rem,1.1vw,1.1rem)}
.tour:fullscreen .sc-cover h2{font-size:clamp(2.2rem,5vw,4rem)}
.tour:fullscreen .sc-cover p{font-size:clamp(1.05rem,1.8vw,1.6rem)}
.tour:fullscreen .sc-cover img{width:clamp(96px,10vw,180px)}
.tour:fullscreen .sc-chips span{font-size:clamp(.88rem,1.1vw,1.15rem);padding:9px 18px}
.tour:fullscreen .mk-window,
.tour:fullscreen .mk-draw,
.tour:fullscreen .mk-courts,
.tour:fullscreen .mk-score,
.tour:fullscreen .mk-tv,
.tour:fullscreen .mk-cards,
.tour:fullscreen .mk-att,
.tour:fullscreen .mk-public{width:min(100%,clamp(420px,42vw,720px));font-size:clamp(1rem,1.1vw,1.3rem)}
.tour:fullscreen .mk-point{font-size:clamp(1.8rem,2.6vw,2.8rem)}
.tour:fullscreen .mk-stat b{font-size:clamp(2rem,2.8vw,3rem)}
.tour:fullscreen .tour-bar{padding:14px 18px}
.tour-btn.is-on{border-color:var(--accent);color:var(--accent-ink)}