:root{--papel:#FBF8F3;--carta:#FFFDF9;--tinta:#2E3F2C;--oliva:#6F7B5E;--terra:#A34C3C;--terra2:#C9724E;--verde:#4A6B45;
 --t70:rgba(46,63,44,.72);--t50:rgba(46,63,44,.52);--t20:rgba(46,63,44,.16);--t10:rgba(46,63,44,.08);
 --serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#E9E4DA;color:var(--tinta);font-family:var(--sans);line-height:1.45;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{opacity:.35;cursor:default}
:focus-visible{outline:2px solid var(--terra2);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* ── Página del estudio: teleprompter arriba (cerca de la cámara), escenario, controles ── */
.app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:10px 14px}
.tele{background:#1F2B1E;color:#F3EEE4;border-radius:14px;height:22vh;min-height:150px;overflow:hidden;position:relative;
 width:min(460px,92%);margin:0 auto;
 -webkit-mask-image:linear-gradient(#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(#000 0,#000 70%,transparent 100%)}
.tele .rollo{padding:14px 22px 40vh;font-family:var(--sans);font-size:clamp(22px,1.9vw,28px);line-height:1.38;text-align:center;transition:transform .35s ease}
.tele p{margin-bottom:.6em}
.tele w{color:rgba(243,238,228,.42);transition:color .15s}
.tele w.dicho{color:rgba(243,238,228,.9)}
.tele w.ahora{color:#fff;text-decoration:underline;text-decoration-color:var(--terra2);text-underline-offset:6px}
.tele .pausa{display:inline-block;font-size:.55em;letter-spacing:.08em;color:var(--terra2);border:1px solid rgba(201,114,78,.5);border-radius:99px;padding:0 .6em;vertical-align:middle}
.tele .marca{display:inline-block;width:.45em;height:.45em;border-radius:50%;background:rgba(201,114,78,.45);margin:0 .12em;vertical-align:middle}
.tele .marca.hecha{background:var(--terra2)}
.tele .cuenta{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:120px;color:#fff;background:rgba(31,43,30,.8)}
.tele .guia{position:absolute;left:0;right:0;top:calc(18px + 1.45em * 1);height:0}

.centro{display:grid;place-items:center;min-height:0}
.marco{position:relative;height:100%;aspect-ratio:16/9;max-width:100%}
#escenario{position:absolute;inset:0;overflow:hidden;background:var(--papel);border-radius:4px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.lienzo{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0}

.controles{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:var(--papel);border-radius:14px;padding:8px 12px;font-size:.86rem}
.controles .btn{padding:6px 10px;font-size:.84rem}
.bloques button{min-width:32px!important;height:32px!important}
.controles .grupo{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.controles .sep{flex:1}
.btn{border:1px solid var(--t20);border-radius:10px;padding:8px 14px;font-size:.92rem;background:var(--carta)}
.btn.prin{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.btn.rojo{background:var(--terra);border-color:var(--terra);color:#fff}
.bloques{display:flex;gap:6px;flex-wrap:wrap}
.bloques button{min-width:38px;height:38px;border-radius:10px;border:1px solid var(--t20);background:var(--carta);font-size:.9rem;position:relative}
.bloques button[aria-current="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.bloques button.con::after{content:"";position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--verde)}
.estado{font-size:.85rem;color:var(--t70);min-width:12ch}
.estado.grabando{color:var(--terra);font-weight:500}
.vel{font-size:.85rem;color:var(--t70)}
.toma{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--t70)}
.aviso{position:fixed;inset:0;background:rgba(31,43,30,.55);display:grid;place-items:center;z-index:50;padding:20px}
.aviso .caja{background:var(--papel);border-radius:18px;max-width:640px;padding:28px 32px}
.aviso h2{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.1;margin-bottom:10px}
.aviso p,.aviso li{color:var(--t70);margin-bottom:8px}
.aviso ol{padding-left:1.2em;margin:10px 0 16px}
.aviso .fila{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.barraM{height:8px;border-radius:4px;background:var(--t10);overflow:hidden;margin:14px 0}
.barraM i{display:block;height:100%;width:0;background:var(--verde);transition:width .3s}

/* ── Escenario: planos ─────────────────────────────── */
.cam,.pres,.rotulo{position:absolute;transition:left .8s cubic-bezier(.6,0,.2,1),top .8s cubic-bezier(.6,0,.2,1),width .8s cubic-bezier(.6,0,.2,1),height .8s cubic-bezier(.6,0,.2,1),opacity .6s ease,border-radius .8s ease,transform .8s cubic-bezier(.6,0,.2,1)}
.cam{overflow:hidden;background:#D9D2C4;z-index:3}
.cam video{width:100%;height:100%;object-fit:cover;display:block}
.cam .sin{position:absolute;inset:0;display:grid;place-items:center;color:var(--oliva);font-size:22px}
.pres{z-index:2}
.marca-agua{position:absolute;left:56px;bottom:40px;font-size:17px;color:var(--oliva);letter-spacing:.02em;z-index:4;transition:opacity .6s}

/* tú a pantalla completa */
.l-cara .cam{left:0;top:0;width:1600px;height:900px;border-radius:0}
.l-cara .pres{left:0;top:0;width:1600px;height:900px;opacity:0}
.l-cara .marca-agua{opacity:0}
/* presentación con tu cara en recuadro */
.l-pres .cam{left:1164px;top:568px;width:392px;height:294px;border-radius:14px;box-shadow:0 0 0 6px var(--papel)}
.l-pres .pres{left:0;top:0;width:1600px;height:900px;opacity:1}
/* pantalla partida */
.l-partido .cam{left:0;top:0;width:760px;height:900px;border-radius:0}
.l-partido .pres{left:760px;top:0;width:840px;height:900px;opacity:1}
.l-partido .marca-agua{opacity:0}
/* énfasis: solo la presentación */
.l-enfasis .cam{left:1360px;top:700px;width:196px;height:147px;border-radius:14px;opacity:0;transform:scale(.6)}
.l-enfasis .pres{left:0;top:0;width:1600px;height:900px;opacity:1}

/* rótulo inferior (sobre tu imagen) */
.rotulo{left:64px;bottom:64px;background:rgba(251,248,243,.94);border-radius:12px;padding:22px 30px 20px;z-index:5;max-width:900px;opacity:0;transform:translateY(16px)}
.rotulo.visto{opacity:1;transform:none}
.rotulo.visto.fuera{opacity:0;transform:translateY(16px)}
.rotulo .t{font-family:var(--serif);font-size:48px;line-height:1.05;font-weight:400}
.rotulo .s{font-size:20px;color:var(--oliva);margin-top:6px}

/* ── Piezas de escena ─────────────────────────────── */
.escena{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.escena.activa{opacity:1}
.escena svg{position:absolute;inset:0;width:100%;height:100%}
[data-en]{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.3,0,.2,1)}
[data-en].visto{opacity:1}
[data-en].sube{transform:translateY(22px)}
[data-en].sube.visto{transform:none}
[data-fuera].fuera{opacity:0!important}
.trazo{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.5,0,.2,1)}
.visto .trazo,.trazo.visto{stroke-dashoffset:0}
.lento .trazo,.trazo.lento{transition-duration:2.8s}
.puntos{stroke-dasharray:.012 .012}

.texto{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 96px}
.texto .f{font-family:var(--serif);font-weight:400;font-size:84px;line-height:1.04;color:var(--tinta);margin-bottom:26px}
.texto .f.m{font-size:64px}
.texto .f.terra{color:var(--terra)}
.texto .s{font-size:28px;color:var(--oliva);line-height:1.4;max-width:24em}
.l-partido .texto{padding:0 72px}
.l-partido .texto .f{font-size:70px}
.l-partido .texto .f.m{font-size:54px}

.titulo-esc{position:absolute;left:96px;top:72px;font-family:var(--serif);font-size:44px;font-weight:400;color:var(--tinta)}
.etq{font-family:var(--sans);font-size:22px;fill:var(--oliva);letter-spacing:.03em}
.etq.terra{fill:var(--terra)}
.etq.g{font-size:28px;fill:var(--tinta)}
.num{font-family:var(--serif);font-size:210px;fill:var(--terra);font-weight:300}
@media (prefers-reduced-motion:reduce){.cam,.pres,.rotulo,[data-en],.trazo{transition-duration:.01s!important}}

/* ── Índice ─────────────────────────────── */
body.indice{overflow:auto;background:var(--papel)}
.ind{max-width:980px;margin:0 auto;padding:40px 24px 80px}
.ind h1{font-family:var(--serif);font-weight:300;font-size:3rem;line-height:1}
.ind .intro{color:var(--t70);max-width:40em;margin:12px 0 28px}
.ind .lista{display:grid;gap:10px}
.ind a.v,.ind div.v{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;border:1px solid var(--t20);border-radius:14px;padding:16px 20px;text-decoration:none;color:inherit;background:var(--carta)}
.ind .v .c{font-family:var(--serif);font-size:1.8rem;color:var(--terra)}
.ind .v .n{font-family:var(--serif);font-size:1.5rem;line-height:1.1}
.ind .v .d{font-size:.88rem;color:var(--t50)}
.ind .v .e{font-size:.82rem;color:var(--t70)}
.ind div.v{opacity:.55}
.ind .pasos{background:var(--carta);border:1px solid var(--t20);border-radius:14px;padding:18px 22px;margin:0 0 28px;color:var(--t70)}
.ind .pasos b{color:var(--tinta);font-weight:500}
.ind .pasos ol{padding-left:1.2em}
.sin-trans .cam,.sin-trans .pres,.sin-trans .marca-agua{transition:none!important}
.barra{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform 1.5s cubic-bezier(.5,0,.2,1)}
.visto .barra,.barra.visto{transform:scaleX(1)}
.sobre{position:absolute;left:0;right:0;bottom:120px;text-align:center;font-family:var(--serif);font-size:52px;line-height:1.15;color:var(--tinta);padding:0 180px}
.velo{position:absolute;inset:0;background:rgba(251,248,243,.94)}
.sobre.izq{left:160px;right:auto;bottom:150px;text-align:left;padding:0;width:900px}

.ayuda{text-align:center;font-size:.8rem;color:var(--t70);margin:-4px 0 0}
.ayuda b{font-weight:500;color:var(--tinta)}