/*!
 * DPGA · Del cartel al movimiento, guion técnico
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-DPGA-CART1-2026-D6D5
 */
/* ═══════════════════════════════════════════════════════════════════════════
   DEL CARTEL AL MOVIMIENTO · 1 · GUION TÉCNICO
   Aula CodeLibri

   Serie propia, con su registro: papel y tinta de cartel impreso, Fraunces
   para titular e Inter para leer. Modo oscuro por omisión (la noche de la
   pieza de ejemplo, «Ánimas») y claro como alternativa. Las cuatro formas
   básicas de la pieza —punto, línea, triángulo y rectángulo— marcan los
   bloques. Del motor de Loops se conserva lo que no se ve: lienzo fijo de
   1600×900 centrado a mano, índice, cromo y teclado.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:block;src:url(../media/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:block;src:url(../media/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Fraunces;font-style:italic;font-weight:400 700;font-display:block;src:url(../media/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:italic;font-weight:400 700;font-display:block;src:url(../media/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:block;src:url(../media/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:block;src:url(../media/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* La noche: el modo por omisión. Los nombres son los que lee
     tools/mejoras/ayuda.css; sin ellos su panel cae a una reserva ilegible. */
  --bg:#121020;       --surface:#1C1930;  --surface-2:#242039;
  --txt:#F1E9DB;      --txt-2:#CBC0B2;    --txt-3:#978D9F;
  --line:#322D4B;     --line-soft:#272340;
  --accent:#F2B544;   --onaccent:#1A1426;
  --cempa:#FF8A2A;    --rosa:#FF5A8F;     --morado:#A98BFF;   --ambar:#F2B544;
  --ok:#55D48F;       --mal:#FF6B6B;
  --sombra:0 24px 70px rgba(0,0,0,.42);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,'Courier New',monospace;
}
:root[data-theme="light"]{
  /* el papel: modo secundario */
  --bg:#F3EEE4;       --surface:#FBF8F2;  --surface-2:#EFE8DC;
  --txt:#1D1A24;      --txt-2:#4A4452;    --txt-3:#7B7281;
  --line:#D8CEBD;     --line-soft:#E6DDCF;
  --accent:#B4520A;   --onaccent:#FFFFFF;
  --cempa:#D9650A;    --rosa:#C8175D;     --morado:#4B2A7B;   --ambar:#B98412;
  --ok:#1E8E57;       --mal:#C93636;
  --sombra:0 22px 60px rgba(60,40,20,.16);
}

*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:var(--sans);color:var(--txt);-webkit-font-smoothing:antialiased}
button,select{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

#escenario{position:fixed;inset:0;overflow:hidden}
#lienzo{
  /* Centrado a mano y NUNCA con place-items del padre: cuando el lienzo es
     mayor que el hueco, ese centrado se degrada a alineación al inicio.
     visible: la decoración sangra hasta el borde de la pantalla. */
  width:1600px;height:900px;overflow:visible;transform-origin:center center;
  position:absolute;left:50%;top:50%;margin:-476px 0 0 -800px;background:var(--bg)}
.slide{position:absolute;inset:0;display:flex;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.slide.on{opacity:1;visibility:visible}
.wrap{flex:1;min-width:0;position:relative;z-index:2;padding:76px 110px 84px;display:flex;flex-direction:column;justify-content:safe center}
.wrap > *{flex:none}

.deco{/* ── decoración: un círculo de luz que se sale por la esquina y un hilo con su triángulo de papel picado. Las mismas formas de la pieza. ── */ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.deco .luz{position:absolute;width:460px;height:460px;border-radius:50%;right:-230px;top:-270px;background:var(--surface-2)}
.deco .luz::after{content:"";position:absolute;inset:60px;border-radius:50%;border:2px solid var(--accent);opacity:.55}
.deco .hilo{position:absolute;left:62px;top:-40px;width:2px;height:240px;background:var(--txt);opacity:.16}
.deco .hilo::after{content:"";position:absolute;left:-9px;bottom:-14px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid var(--rosa);opacity:1}
.slide.on .deco .luz{animation:asoma 1s cubic-bezier(.2,.8,.3,1) both}
.slide.on .deco .hilo{animation:baja .9s cubic-bezier(.2,.8,.3,1) both}
@keyframes asoma{from{transform:translate(60px,-60px) scale(.9);opacity:0}}
@keyframes baja{from{transform:translateY(-120px)}}

/* ── la marca de bloque: una de las cuatro formas ── */
.marca{display:inline-flex;align-items:center;gap:14px;font:600 14px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.marca i{display:block;flex:none}
.m-punto i{width:12px;height:12px;border-radius:50%;background:currentColor}
.m-linea i{width:34px;height:3px;background:currentColor}
.m-tri i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid currentColor}
.m-rect i{width:12px;height:16px;border:2.5px solid currentColor}

/* ── tipografía ── */
h1{font:700 148px/.9 var(--serif);letter-spacing:-.035em;font-optical-sizing:auto;color:var(--txt)}
h2{font:600 64px/1.02 var(--serif);letter-spacing:-.025em;font-optical-sizing:auto;text-wrap:balance}
h2.m{font-size:52px}
h3{font:600 30px/1.15 var(--serif);letter-spacing:-.01em}
h4{font:600 19px/1.3 var(--sans)}
.entrada{font:400 25px/1.5 var(--sans);color:var(--txt-2);max-width:32ch}
p{font:400 20.5px/1.55 var(--sans);color:var(--txt-2);max-width:46ch}
b,strong{font-weight:600;color:var(--txt)}
i.en,.en{font-style:italic}
.exp{font-size:.72em;color:var(--txt-3);font-weight:400;font-style:normal;letter-spacing:0}
.chico{font-size:18px}
.mini{font-size:15px;line-height:1.5;color:var(--txt-3)}
.rot{font:600 12.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
kbd{font-family:var(--mono);font-size:.8em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--surface);color:var(--txt)}
.texto{display:flex;flex-direction:column;gap:22px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

.portada{/* ── portada ── */ display:grid;grid-template-columns:1fr 520px;height:calc(100% + 160px);margin:-76px -110px -84px -110px;padding-left:110px}
.portada .texto{justify-content:center;gap:34px;padding-right:50px}
.portada .serie{display:flex;gap:22px;flex-wrap:wrap;font:500 15px var(--sans);color:var(--txt-3);letter-spacing:.04em}
.portada .serie .aqui{color:var(--txt);font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:4px}
.portada .cartel{position:relative;background:linear-gradient(#17142E 0,#17142E 60px,#0C0A18 calc(100% - 60px),#0C0A18 100%);display:flex;align-items:center;justify-content:center}
.portada .cartel canvas{display:block;width:520px;height:780px}

.ruta{/* ── recorrido ── */ display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:30px;align-items:start}
.ruta h4{font:600 12.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;gap:10px;align-items:center}
.ruta-it{display:grid;grid-template-columns:30px 1fr;gap:8px;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:10px 4px;font-size:17.5px;line-height:1.35;color:var(--txt-2);transition:.15s}
.ruta-it:hover{color:var(--txt);background:var(--surface)}
.ruta-it .nn{font:500 13px var(--mono);color:var(--txt-3);padding-top:3px}
.ruta-it .de{display:block;font-size:13px;color:var(--txt-3);margin-top:2px}
.serie-l{list-style:none;padding:0;display:flex;flex-direction:column}
.serie-l li{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:10px 4px;border-top:1px solid var(--line);font-size:17.5px;color:var(--txt-3)}
.serie-l li.aqui{color:var(--txt);font-weight:600}
.serie-l li span{font:500 13px var(--mono);padding-top:3px}
.serie-l li em{font-style:normal}

/* ── filas de concepto (medios, partes, columnas) ── */
.filas{list-style:none;padding:0;display:flex;flex-direction:column}
.filas li{display:grid;grid-template-columns:170px 1fr 330px;gap:30px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.filas li:last-child{border-bottom:1px solid var(--line)}
.filas h3{font-size:28px}
.filas p{font-size:18px;line-height:1.5;max-width:none}
.ej{font-size:15.5px;line-height:1.45;color:var(--txt-3);border-left:3px solid var(--accent);padding-left:14px}
.ej b{color:var(--txt)}
.y-texto{font:italic 400 19px/1.5 var(--serif);color:var(--txt-2)}
.y-texto b{font-style:normal;font-family:var(--sans)}

/* ── tradición: cartel y pantalla ── */
.linea-t{list-style:none;padding:0;display:flex;flex-direction:column}
.linea-t li{display:grid;grid-template-columns:90px 330px 1fr;gap:28px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.linea-t li:last-child{border-bottom:1px solid var(--line)}
.linea-t .anio{font:600 30px var(--serif);color:var(--accent)}
.linea-t h4{font:600 21px/1.3 var(--serif)}
.linea-t h4 span{display:block;font:500 13.5px var(--sans);color:var(--txt-3);margin-top:3px}
.linea-t p{font-size:17.5px;max-width:none}

.ficha{/* ── la ficha del brief y la cita ── */ background:var(--surface);border:1px solid var(--line);padding:32px 38px;display:grid;grid-template-columns:150px 1fr;gap:14px 26px;font-size:18px;line-height:1.45;box-shadow:var(--sombra)}
.ficha dt{font:600 12.5px/1.65 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.ficha dd{margin:0;color:var(--txt)}
.ficha .titulo{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--txt);padding-bottom:14px;margin-bottom:6px}
.ficha .titulo b{font:700 40px var(--serif)}
.ficha .titulo span{font:600 12.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.cita{font:italic 400 64px/1.12 var(--serif);color:var(--txt);max-width:16ch;text-wrap:balance}
.notas{list-style:none;padding:0;display:flex;flex-direction:column}
.notas li{padding:16px 0;border-top:1px solid var(--line);font-size:19px;line-height:1.5;color:var(--txt-2)}
.notas li:last-child{border-bottom:1px solid var(--line)}
.notas li b{display:block;font:600 12.5px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}

.lab{/* ── laboratorios ── */ display:grid;grid-template-columns:400px 1fr;gap:60px;align-items:center;height:100%}
.visor{display:flex;flex-direction:column;gap:12px;min-width:0}
.visor canvas,.visor img,.visor .pantalla{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0C0A18;box-shadow:var(--sombra)}
.pantalla{position:relative;overflow:hidden}
.pantalla img{width:100%;height:100%;object-fit:cover;box-shadow:none}
.pantalla iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ver-video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;background:rgba(18,16,32,.82);color:#F5EBD8;padding:16px 26px;font:600 17px var(--sans);letter-spacing:.04em;display:flex;align-items:center;gap:12px;transition:.18s}
.ver-video:hover{background:#F2B544;color:#1A1426}
.ver-video::before{content:"";border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent}
.transporte{display:flex;align-items:center;gap:12px}
.transporte input{flex:1;min-width:0}
input[type=range]{width:100%;accent-color:var(--accent)}
.tc{font:500 14px var(--mono);color:var(--txt-3);font-variant-numeric:tabular-nums;min-width:170px;text-align:right}
.boton{border:0;padding:11px 20px;font:600 15.5px var(--sans);background:var(--accent);color:var(--onaccent);transition:.16s;white-space:nowrap}
.boton:hover{filter:brightness(1.08);transform:translateY(-1px)}
.boton.hueco{background:transparent;color:var(--txt-2);border:1px solid var(--line)}
.boton.hueco:hover{border-color:var(--accent);color:var(--txt)}
.boton[aria-pressed="true"],.boton.hueco[aria-pressed="true"]{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
.boton.b-chico{padding:7px 13px;font-size:14px}
.boton[disabled]{opacity:.4;cursor:default;transform:none}
.grupo{display:flex;gap:8px;flex-wrap:wrap}
.lectura{border-left:3px solid var(--accent);padding:8px 0 8px 16px;font-size:17px;line-height:1.5;color:var(--txt);min-height:56px;max-width:none}
.pista{display:inline-flex;align-items:center;gap:10px;font:500 14.5px var(--sans);color:var(--txt-3);align-self:flex-start}
.pista::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rosa);flex:none}

/* el proceso: siete etapas */
.etapas{display:flex;flex-direction:column}
.etapa{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:baseline;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:9px 6px;font-size:17px;color:var(--txt-2);transition:.15s}
.etapa:last-child{border-bottom:1px solid var(--line)}
.etapa .nn{font:500 13px var(--mono);color:var(--txt-3)}
.etapa .parte{font-size:12.5px;color:var(--txt-3);letter-spacing:.04em}
.etapa:hover{color:var(--txt);background:var(--surface)}
.etapa[aria-pressed="true"]{background:var(--surface);color:var(--txt);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.etapa-info{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:4px}
.etapa-info h4{font:600 12.5px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.etapa-info p{font-size:16.5px;line-height:1.5;max-width:none}

.tira{/* GEOMETRIX: la tira de fotogramas y la fila de guion */ display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.tira button{border:0;padding:0;background:none;position:relative;opacity:.55;transition:.15s}
.tira button img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tira button span{display:block;font:500 11px var(--mono);color:var(--txt-3);margin-top:4px;text-align:center}
.tira button:hover{opacity:.85}
.tira button[aria-pressed="true"]{opacity:1}
.tira button[aria-pressed="true"] img{outline:3px solid var(--accent);outline-offset:2px}
.fila-g{display:grid;grid-template-columns:120px 1fr;gap:9px 18px;font-size:16.5px;line-height:1.45;border-top:2px solid var(--txt);padding-top:14px}
.fila-g dt{font:600 12px/1.7 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.fila-g dd{margin:0;color:var(--txt)}

/* el arco */
.arco{display:block;width:100%;height:auto}
.arco .eje{stroke:var(--line);stroke-width:2}
.arco .curva{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.arco .area{fill:var(--accent);opacity:.12}
.arco .div{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 6}
.arco .num{font:500 15px var(--mono);fill:var(--txt-3)}

.pista-lab{/* la pista */ display:grid;grid-template-columns:1fr;gap:16px}
.pista-lab canvas{display:block;width:100%;height:auto;background:var(--surface);border:1px solid var(--line)}
.pista-mandos{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pista-mandos .sep{width:1px;height:28px;background:var(--line);margin:0 4px}
.golpes-dato{font:500 15px var(--mono);color:var(--txt-2)}

/* tablas */
.tabla{border-collapse:collapse;width:100%;font-size:16px}
.tabla th{font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);text-align:left;padding:0 14px 10px 0;border-bottom:2px solid var(--txt)}
.tabla td{padding:9px 14px 9px 0;border-bottom:1px solid var(--line);color:var(--txt-2);vertical-align:top;line-height:1.42}
.tabla td.t{font:500 14px var(--mono);color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla td.n{font:500 15px var(--mono);color:var(--txt);font-variant-numeric:tabular-nums}
.tabla.g td{font-size:14.5px;padding-top:7px;padding-bottom:7px}
.tabla td em{font-style:normal;color:var(--txt-3)}

.par{/* comparación: literario y técnico, mal y bien */ display:grid;grid-template-columns:1fr 1fr;gap:40px}
.caja{border-top:2px solid var(--txt);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.caja .rot{color:var(--accent)}
.caja.mal .rot{color:var(--mal)}
.caja.bien .rot{color:var(--ok)}
.caja blockquote{font:italic 400 30px/1.3 var(--serif);color:var(--txt)}
.verbos{display:flex;flex-wrap:wrap;gap:8px}
.verbos span{font:500 15px var(--sans);padding:5px 12px;border:1px solid var(--line);color:var(--txt-2)}

.dosl{/* ── cierre ── */ display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.lista-p{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.lista-p li{position:relative;padding-left:26px;font-size:18.5px;line-height:1.45;color:var(--txt-2)}
.lista-p li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--accent)}

.quiz{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.q-caso{border-top:2px solid var(--txt);padding-top:18px;display:flex;flex-direction:column;gap:14px;min-height:280px}
.q-caso .n{font:600 12.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.q-caso .fila{font:500 16px/1.5 var(--mono);color:var(--txt);background:var(--surface);border:1px solid var(--line);padding:14px 16px}
.q-caso p{font-size:20px;max-width:none;color:var(--txt)}
.q-caso h4{font:600 22px/1.3 var(--serif);color:var(--txt)}
.q-op{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);padding:13px 18px;font-size:17.5px;transition:.15s;margin-bottom:10px;color:var(--txt)}
.q-op:hover{border-color:var(--accent);transform:translateX(3px)}
.q-op.bien{border-color:var(--ok);border-width:2px;background:color-mix(in srgb,var(--ok) 20%,var(--surface));font-weight:600}
.q-op.mal{border-color:var(--mal);border-width:2px;background:color-mix(in srgb,var(--mal) 18%,var(--surface))}
.q-op.bien::after{content:" ✓";color:var(--ok);font-weight:700}
.q-op.mal::after{content:" ✕";color:var(--mal);font-weight:700}
.q-op[disabled]{cursor:default;transform:none}
.q-razon{border-left:3px solid var(--accent);padding:10px 0 10px 16px;font-size:17px;line-height:1.55;color:var(--txt-2);min-height:64px;max-width:none}
.q-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.q-cont{font:500 14px var(--mono);color:var(--txt-3)}

.seguir{list-style:none;padding:0;display:flex;flex-direction:column;max-width:1200px}
.seguir li{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.seguir li:last-child{border-bottom:1px solid var(--line)}
.seguir p{font-size:19.5px;max-width:none}
a.enlace{color:var(--txt);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:2px;font-weight:600;transition:.15s}
a.enlace:hover{color:var(--accent)}
.apa{display:flex;flex-direction:column;gap:12px}
.apa p{font-size:16.5px;line-height:1.5;max-width:none;text-indent:-2.1em;padding-left:2.1em}
.apa .url{font-size:14.5px;color:var(--txt-3);overflow-wrap:anywhere}
.creditos{display:flex;flex-direction:column;gap:16px;font-size:17.5px;line-height:1.5;color:var(--txt-2)}
.creditos b{display:block;color:var(--txt)}

h2.s{font-size:44px}

.bass{/* ── Saul Bass, en una tira bajo el cartel ── */ margin-top:26px;display:flex;flex-direction:column;gap:10px}
.bass ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:28px;border-top:1px solid var(--line);padding-top:14px}
.bass li{display:flex;flex-direction:column;gap:3px;font-size:15.5px;line-height:1.42;color:var(--txt-2)}
.bass .anio{font:600 22px var(--serif);color:var(--accent)}
.bass b{font:600 18px/1.25 var(--serif);color:var(--txt)}

.claves{/* ── las preguntas del brief ── */ list-style:none;padding:0;display:flex;flex-direction:column}
.claves li{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-size:18.5px;line-height:1.45;color:var(--txt-2)}
.claves li:last-child{border-bottom:1px solid var(--line)}
.claves b{font:600 12.5px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.cab-paso{/* ── el cuaderno: la cabecera de cada paso, con el interruptor ── */ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.modo{display:inline-flex;border:1px solid var(--line);background:var(--surface)}
.modo button{border:0;background:none;padding:8px 15px;font:600 13.5px var(--sans);color:var(--txt-3);transition:.15s}
.modo button:hover{color:var(--txt)}
.modo button[aria-pressed="true"]{background:var(--accent);color:var(--onaccent)}
.paso{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start;margin-top:22px}
.paso > *{min-width:0}
.instr{list-style:none;padding:0;counter-reset:n;display:flex;flex-direction:column;gap:10px}
.instr li{counter-increment:n;display:grid;grid-template-columns:26px 1fr;gap:8px;font-size:17px;line-height:1.45;color:var(--txt-2)}
.instr li::before{content:counter(n);font:600 13px var(--mono);color:var(--accent);padding-top:3px}
.aviso-ej{border-left:3px solid var(--rosa);padding:6px 0 6px 16px;font-size:16px;line-height:1.5;color:var(--txt);max-width:none}
.aviso-ej:empty{display:none}
.aviso-ej.bien{border-left-color:var(--ok)}

.forma{display:grid;grid-template-columns:140px 1fr;gap:10px 22px;align-items:center}
.forma > label{font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.campo{width:100%;min-width:0;background:var(--surface);border:1px solid var(--line);color:var(--txt);font:400 17px/1.4 var(--sans);padding:8px 12px;transition:border-color .15s}
.campo:focus{border-color:var(--accent)}
.campo::placeholder{color:var(--txt-3);opacity:.8}
textarea.campo{resize:none;display:block}
.campo[readonly]{background:transparent;border-color:var(--line-soft)}
.con-unidad{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--txt-3)}
.campo.corto{width:120px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.de-a{display:flex;align-items:center;gap:12px;color:var(--txt-3)}
.idea-ver{font-size:48px;max-width:none;min-height:1.12em}
.idea-ver:empty::before{content:"«…»";color:var(--txt-3)}

.arco-lienzo{display:block;width:100%;height:auto;background:var(--surface);border:1px solid var(--line)}
.escenas{display:flex;flex-direction:column}
.esc{display:grid;grid-template-columns:28px 1fr 150px 130px 34px;gap:12px;align-items:center;padding:5px 0;border-top:1px solid var(--line)}
.esc:last-child{border-bottom:1px solid var(--line)}
.esc .nn{font:500 13px var(--mono);color:var(--txt-3)}
.esc .campo{padding:6px 10px;font-size:16px}
.esc .con-unidad{gap:8px;font-size:13px}
.esc .campo.corto{width:84px}
.esc select.campo{padding:6px 8px;font:500 15px var(--mono)}
.quitar{width:30px;height:30px;border:1px solid var(--line);background:none;color:var(--txt-3);font-size:17px;line-height:1;display:grid;place-items:center;transition:.15s}
.quitar:hover{border-color:var(--mal);color:var(--mal)}
.quitar[disabled]{opacity:.3;cursor:default}
.esc-cab{border-top:0;padding:0 0 4px}
.esc-cab span{font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}

.notas.apretadas{margin-top:10px}
.notas.apretadas li{padding:11px 0;font-size:17px}
.oculto{width:1px;height:1px;overflow:hidden;opacity:0;clip-path:inset(50%);margin:-1px}
label.boton{display:inline-flex;align-items:center;cursor:pointer}
.oculto:focus-visible + .boton,.oculto:focus + label{outline:3px solid var(--accent)}
.partes{display:flex;flex-wrap:wrap;gap:8px;min-height:38px;align-items:center}
.partes:empty::before{content:"Sin partes marcadas.";font:500 14px var(--sans);color:var(--txt-3)}
.parte-ch{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);padding:4px 6px 4px 10px}
.parte-ch i{width:10px;height:10px;flex:none}
.parte-ch .t{font:500 13px var(--mono);color:var(--txt-3);font-variant-numeric:tabular-nums}
.parte-ch input{width:150px;border:0;background:none;color:var(--txt);font:500 14.5px var(--sans);padding:3px 2px}
.parte-ch input[readonly]{pointer-events:none}
.parte-ch .quitar{width:24px;height:24px;font-size:14px}
.licencia{display:flex;gap:10px;align-items:center;font-size:15.5px;color:var(--txt-2);cursor:pointer}
.licencia input{accent-color:var(--accent);width:18px;height:18px}

.columnas dd{color:var(--txt-2)}

.revision{list-style:none;padding:0;display:flex;flex-direction:column;gap:7px}
.revision li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:15.5px;line-height:1.4;color:var(--txt-2)}
.revision li b{font:700 14px var(--sans);text-align:center}
.revision li.si b{color:var(--ok)}
.revision li.no b{color:var(--mal)}
.revision li.si span{color:var(--txt)}

.tabla-mov{min-width:0}
.guion-tabla td{padding-top:6px;padding-bottom:6px}
.guion-tabla td.t{padding-top:12px}
.guion-tabla .campo{font-size:14.5px;line-height:1.38;padding:6px 8px}
.guion-tabla .esc-n{display:block;font:500 12.5px/1.3 var(--sans);color:var(--txt-3);margin-top:3px;white-space:normal}
.guion-tabla .sugiere{display:block;font:500 12.5px/1.35 var(--sans);color:var(--txt-3);margin-top:4px}
.guion-tabla tr.marca-mal td.t{color:var(--mal)}

.doc{height:640px;overflow:auto;background:var(--surface);border:1px solid var(--line);padding:26px 32px;font-size:15px;line-height:1.5;color:var(--txt-2)}
.doc h3{font:600 28px/1.15 var(--serif);color:var(--txt);margin-bottom:4px}
.doc h4{font:600 12px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:18px 0 6px;border-bottom:1px solid var(--line);padding-bottom:4px}
.doc p{font-size:15px;max-width:none}
.doc dl{display:grid;grid-template-columns:120px 1fr;gap:4px 16px;margin:0}
.doc dt{font:600 11.5px/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.doc dd{margin:0;color:var(--txt)}
.doc table{border-collapse:collapse;width:100%;font-size:13.5px}
.doc th{font:600 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);text-align:left;padding:0 10px 6px 0;border-bottom:2px solid var(--txt)}
.doc td{padding:6px 10px 6px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--txt-2)}
.doc td:first-child{font:500 12.5px var(--mono);color:var(--accent)}
.doc .fecha{font:500 12.5px var(--mono);color:var(--txt-3)}

.rubrica td{font-size:14px;line-height:1.38}
.rubrica td:first-child b{font:600 17px/1.25 var(--serif)}
.ruta-it.paso-it .nn{color:var(--accent)}
.ruta-it.paso-it{color:var(--txt)}
.slide [hidden]{display:none!important}
.arco .banda{fill:var(--txt);opacity:.03}
.arco .banda.b2{opacity:.07}
.arco .parte{font:600 15px var(--sans);fill:var(--txt-2)}
.lista-doc{margin:0;padding-left:22px}
.lista-doc li{margin:2px 0}
.guion-tabla textarea.campo{overflow:hidden;min-height:0}
.doc{scrollbar-color:var(--line) transparent}
.escenas{max-height:380px;overflow-y:auto;scrollbar-color:var(--line) transparent}
.paso .tabla-mov{max-height:700px;overflow-y:auto;scrollbar-color:var(--line) transparent}
.guion-tabla thead th{position:sticky;top:0;z-index:1;background:var(--bg)}
.fases{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.fases li{display:flex;flex-direction:column;gap:6px;font-size:17.5px;line-height:1.45;color:var(--txt-2)}
.fases b{font:600 23px/1.2 var(--serif);color:var(--txt)}
.leer-guion{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.leer-guion .tc{min-width:0;text-align:left}
.guion-tabla tr.sonando td{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.guion-tabla tr.sonando td.t{color:var(--txt)}

/* ══════════ cromo ══════════ */
.railbar{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:21;background:var(--line-soft)}
.railbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cempa),var(--rosa));transition:width .3s ease}
.chrome.hud{
  /* ayuda.js busca «.chrome.hud» para meter su botón en esta fila */
  position:fixed;left:0;right:0;bottom:0;z-index:20;height:52px;display:flex;align-items:center;gap:10px;padding:0 18px;
  background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 94%,transparent),transparent)}
.hud-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--txt-2);font-size:15px;transition:.15s}
.hud-btn:hover{border-color:var(--accent);color:var(--txt)}
.hud-btn[disabled]{opacity:.35;cursor:default}
.counter{font:500 12px var(--mono);color:var(--txt-3);min-width:58px;text-align:center}
.hud-title{flex:1;font:500 12px var(--sans);color:var(--txt-3);letter-spacing:.14em;text-transform:uppercase;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.index{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--bg) 97%,transparent);padding:54px 66px;overflow:auto;display:none}
.index.on{display:block}
.index h2{font-size:44px;color:var(--txt);margin-bottom:8px}
.idx-close{position:fixed;right:26px;top:24px;width:46px;height:46px;border:1px solid var(--line);background:var(--surface);color:var(--txt);font-size:24px;line-height:1;display:grid;place-items:center;transition:.15s}
.idx-close:hover{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
.idx-keys{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--txt-3);margin-bottom:26px}
.idx-keys kbd{font-size:12px;margin-right:5px}
.idx-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 24px}
.idx-group h3{font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.idx-item{display:grid;grid-template-columns:30px 1fr;gap:8px;width:100%;text-align:left;border:0;background:none;padding:7px 8px;font-size:16px;color:var(--txt-2);transition:.14s}
.idx-item:hover{background:var(--surface);color:var(--txt)}
.idx-item.aqui{background:var(--accent);color:var(--onaccent)}
.idx-item .nn{font:500 12.5px var(--mono);color:var(--txt-3)}
.idx-item.aqui .nn{color:inherit;opacity:.75}

.tiny{display:none;position:fixed;inset:auto 0 62px 0;text-align:center;font-size:14px;color:var(--txt-3);padding:0 20px}
@media (max-width:640px) and (orientation:portrait){.tiny{display:block}}

@media (prefers-reduced-motion:reduce){
  .slide,.boton{transition:none}
  .slide.on .deco .luz,.slide.on .deco .hilo{animation:none}
}

@media print{
  html,body{height:auto;overflow:visible;background:#fff}
  #escenario{position:static}
  #lienzo{position:static;margin:0;transform:none!important;width:100%;height:auto}
  .slide{position:static;display:block;opacity:1!important;visibility:visible!important;page-break-after:always;height:auto;min-height:0}
  .wrap{padding:22px 0}
  .lab,.dos,.dosl,.quiz,.portada,.paso{grid-template-columns:1fr 1fr;height:auto;gap:26px;margin:0}
  .doc{height:auto;overflow:visible}
  .chrome.hud,.railbar,.tiny,.deco,.index,.transporte,.pista-mandos,.ver-video,.modo,.quitar,#arcoMas,#docBorrar{display:none!important}
  h1{font-size:60px}h2,h2.m{font-size:34px}p{font-size:14.5px}
}

/* ══════════ vertical ══════════ */
@media (max-aspect-ratio:1/1){
  /* la lámina tiene hermanos sueltos (decoración y cuerpo) */
  .slide.on{flex-direction:column}
  .deco{display:none}
  .wrap{padding:0;display:block}
  .portada{margin:0;padding:0}
  .portada .cartel canvas{width:100%;height:auto;max-width:420px}
  .marca{font-size:12px;letter-spacing:.16em}
  .cita{font-size:34px}
  .filas li,.linea-t li{gap:6px}
  .tabla{font-size:13.5px}
  .tc{min-width:0}
  .index{padding:22px 16px 70px}
  .index h2{font-size:28px}
  .idx-grid{grid-template-columns:1fr;gap:20px}
  .idx-close{right:14px;top:14px}
  #lienzo .slide .ruta-it,#lienzo .slide .serie-l li,#lienzo .slide .etapa{grid-template-columns:30px 1fr!important}
  #lienzo .slide .tira{grid-template-columns:repeat(4,1fr)!important}
  #lienzo .slide .ficha,#lienzo .slide .fila-g{grid-template-columns:110px 1fr!important}
  #lienzo .slide .instr li{grid-template-columns:26px 1fr!important}
  #lienzo .slide .revision li{grid-template-columns:22px 1fr!important}
  #lienzo .slide .esc{grid-template-columns:24px 1fr 1fr 30px!important}
  #lienzo .slide .esc .nombre{grid-column:2/5}
  #lienzo .slide .esc .dura{grid-column:2}
  #lienzo .slide .esc .ener{grid-column:3}
  #lienzo .slide .esc .quitar{grid-column:4}
  #lienzo .slide .esc-cab{display:none!important}
  .idea-ver{font-size:30px}
  .doc{height:auto;max-height:70vh;padding:18px}
  #lienzo .slide .tabla-mov{overflow-x:auto;max-width:100%}
  #lienzo .slide .guion-tabla,#lienzo .slide .rubrica{display:table!important;max-width:none!important}
  #lienzo .slide .guion-tabla{min-width:760px!important}
  #lienzo .slide .rubrica{min-width:640px!important}
  #lienzo .slide .rubrica td,#lienzo .slide .rubrica th{white-space:normal!important}
  .de-a{flex-wrap:wrap}
  .parte-ch input{width:120px}
  .escenas{max-height:none}
  .paso .tabla-mov{max-height:none}
}



/* CL-MEJORAS-INICIO */

/* ════════════════════════════════════════════════════════════
   REVELADO PROGRESIVO  ·  módulo compartido
   La barra espaciadora descubre los elementos de la diapositiva
   uno por uno. Las flechas siguen saltando de lámina completa.

   Los elementos se ocultan ANTES del primer pintado y solo se
   les añade la transición después, para que nunca se vea el
   parpadeo de aparecer y desaparecer.
   ════════════════════════════════════════════════════════════ */
.clf{opacity:0!important;transform:translateY(calc(.6 * var(--u, 10px)))}
.clf-t{transition:opacity .3s ease, transform .3s cubic-bezier(.22,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.clf-t{transition:none}}

/* En papel no hay barra espaciadora: sale todo lo que la lámina lleva, se
   haya destapado o no en pantalla. Sin esto, una presentación que imprime
   todas sus láminas dejaba en blanco las piezas de las que no se visitaron. */
@media print{.clf{opacity:1!important;transform:none!important}#clf-hint{display:none!important}}

/* Durante el montaje se suprime TODA transición del documento. Sin esto,
   los elementos que ya traen una transición propia —los botones de los
   selectores, por ejemplo— se ven desvanecerse al cargar la página. */
body.clf-montando *{transition:none!important;animation-duration:0s!important}

/* indicador discreto de cuántos elementos quedan */
#clf-hint{
  position:fixed;left:50%;bottom:calc(52px + 10px);transform:translateX(-50%);
  z-index:60;display:flex;gap:5px;align-items:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease
}
#clf-hint.on{opacity:.8}
#clf-hint i{
  width:6px;height:6px;border-radius:50%;display:block;
  background:currentColor;opacity:.26;transition:opacity .2s ease,transform .2s ease
}
#clf-hint i.done{opacity:1;transform:scale(1.25)}

/* ════════════════════════════════════════════════════════════
   AYUDA DE USO  ·  módulo compartido
   Vive en el cromo, nunca en la diapositiva: un botón en el HUD
   que abre el panel, y un aviso breve la primera vez que se abre
   la presentación en ese navegador.

   Los colores se toman de los tokens de cada presentación. Cada
   cadena de reserva prueba primero los nombres en inglés de las
   presentaciones antiguas y después los que usa el esqueleto del
   estándar, en español: sin eso, un mazo nuevo caía al #12161f de
   reserva con el color heredado, y en modo claro salía texto negro
   sobre panel negro.
   ════════════════════════════════════════════════════════════ */
#clf-ayuda-btn.clf-suelto{
  position:fixed;right:14px;bottom:58px;z-index:900;
  width:30px;height:30px;border-radius:50%;font-size:14px;line-height:1;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,transparent))));
  color:inherit;opacity:.55;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.4))))
}
#clf-ayuda-btn.clf-suelto:hover{opacity:1}

#clf-ayuda{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:rgba(7,10,16,.55);opacity:0;transition:opacity .18s ease
}
/* Imprescindible: el atributo hidden no puede con un display de autor, y
   sin esta regla la capa se queda encima de la lámina, invisible, robando
   cada clic de los módulos interactivos. */
#clf-ayuda[hidden]{display:none}
#clf-ayuda.on{opacity:1}
@media (prefers-reduced-motion:reduce){#clf-ayuda{transition:none}}

#clf-ayuda .clf-panel{
  position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;
  padding:26px 28px 24px;border-radius:10px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:14px;line-height:1.5;text-align:left
}
#clf-ayuda h2{
  font-size:17px;line-height:1.25;margin:0 0 4px;font-weight:700;
  color:var(--txt,var(--texto,inherit));letter-spacing:0
}
#clf-ayuda .clf-sub{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent,var(--acento,var(--gold,currentColor)));margin:0 0 14px
}
#clf-ayuda dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;align-items:baseline}
#clf-ayuda dt{white-space:nowrap;display:flex;gap:4px}
#clf-ayuda dd{margin:0;color:var(--txt-2,var(--texto-2,var(--dim,inherit)))}
#clf-ayuda .clf-pie{
  margin:16px 0 0;padding-top:14px;font-size:12.5px;
  border-top:1px solid var(--line-soft,var(--linea-suave,var(--line,var(--linea,rgba(127,127,127,.25)))));
  color:var(--txt-3,var(--texto-3,var(--dim,inherit)))
}
#clf-ayuda .clf-cerrar{
  position:absolute;top:10px;right:12px;font-size:20px;line-height:1;
  padding:4px 6px;opacity:.5;background:none;border:0;color:inherit;cursor:pointer
}
#clf-ayuda .clf-cerrar:hover{opacity:1}

#clf-ayuda kbd,#clf-onboard kbd{
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:11.5px;
  padding:2px 6px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.45))));
  background:var(--surface-2,var(--fondo-3,var(--bg-2,var(--bg2,transparent))));
  color:var(--txt,var(--texto,inherit))
}

/* aviso de la primera visita */
#clf-onboard{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  z-index:900;width:min(430px,calc(100vw - 32px));
  padding:14px 16px;border-radius:9px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:13px;line-height:1.45;
  opacity:0;transition:opacity .3s ease,transform .3s ease
}
#clf-onboard.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#clf-onboard{transition:none}}
#clf-onboard p{margin:0 0 4px}
#clf-onboard p:last-of-type{margin:0}
#clf-onboard .clf-acciones{display:flex;gap:14px;align-items:center;margin-top:12px}
#clf-onboard button{
  font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0
}
#clf-onboard .clf-ok{
  padding:5px 12px;border-radius:5px;font-weight:600;font-size:12.5px;
  background:var(--accent,var(--acento,var(--gold,currentColor)));
  color:var(--onaccent,var(--bg,var(--fondo,#fff)))
}
#clf-onboard .clf-todo{font-size:12.5px;opacity:.7;text-decoration:underline}
#clf-onboard .clf-todo:hover{opacity:1}

/* fuera del sitio autorizado no se pinta nada del cromo añadido */
.cl-lock #clf-ayuda-btn,.cl-lock #clf-ayuda,.cl-lock #clf-onboard,.cl-lock #clf-hint{display:none!important}
@media print{#clf-ayuda-btn,#clf-ayuda,#clf-onboard{display:none!important}}

/* ════════════════════════════════════════════════════════════
   VERTICAL · módulo compartido

   Los motores de lienzo fijo escalan un rectángulo de 1280×720 o
   1600×900 al hueco disponible. En un teléfono de pie ese hueco es
   el ancho, y la escala se desploma: medido en IEL con una ventana
   de 375×812, el lienzo quedaba en 375×211 y el cuerpo del texto en
   4.2 px. Ilegible, y encogerlo mejor no existe.

   Así que en vertical se abandona el lienzo. Las láminas dejan de
   estar superpuestas, pasan al flujo normal, se recomponen en una
   columna y la página se desplaza. La tipografía recupera su tamaño
   de diseño —14.5 px de cuerpo, que en un teléfono está bien— porque
   ya no la encoge ninguna transformación.

   El colapso de las rejillas no está aquí: lo genera el inyector
   leyendo la hoja de cada presentación, porque cada una nombra sus
   columnas a su manera.
   ════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio:1/1){

  html,body{overflow-x:hidden;overflow-y:auto;height:auto}

  /* El escenario deja de ser una ventana fija y el lienzo, un lienzo. */
  /* Los cuatro primeros nombres son los de las presentaciones que ya
     existian; #escenario y #lienzo son los que usa el esqueleto del
     estandar, y sin ellos un mazo nuevo escrito segun el documento se
     queda con el lienzo escalado: la tipografia cambia de tamano pero la
     transformacion sigue puesta, asi que en el telefono se ve igual de
     pequena y parece que el modulo funciona cuando no ha entrado. */
  .stage,#viewport,#escenario{position:static;display:block;width:100%}
  .deck,#stage,#lienzo{
    position:static;left:auto;top:auto;margin:0;
    width:100%;max-width:100%;height:auto;min-height:100dvh;
    /* «!important» porque la funcion de ajuste sigue escribiendo la
       transformacion en el atributo de estilo en cada redimension. */
    transform:none!important;
    border:0;box-shadow:none;border-radius:0;
  }

  /* Las láminas dejan de estar una encima de otra. */
  .slide{
    position:static;inset:auto;
    opacity:1;visibility:visible;transform:none;
    display:none;width:100%;max-width:100%;
    padding:22px 18px 88px;
    overflow-wrap:anywhere;
  }
  .slide.on,.slide.is-active{display:flex}

  /* Sin esto, un hijo flex no baja de su contenido y desborda. */
  .slide *{min-width:0}
  .slide > *{max-width:100%}
  .slide [class*="badge"],.slide .tag{flex-wrap:wrap;max-width:100%}
  .body{justify-content:flex-start}

  /* Algunas rejillas se declaran en el atributo de estilo, donde la
     extraccion de selectores del inyector no las ve. Se alcanzan por
     atributo: «!important» gana a un estilo en linea normal. */
  .slide [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* Un titular de 60 px es de proyector, no de telefono: en una columna de
     320 px no cabe ni la primera palabra y se parte a lo bruto —el
     navegador no guiona en espanol, se probo—. Se le pone un techo
     relativo al marco, que es lo que hace DPGA al crecer su unidad. */
  .slide h1{font-size:min(34px,10vw)}
  .slide h2{font-size:min(26px,7.5vw)}
  .slide h3{font-size:min(20px,6vw)}

  /* Y el cuerpo tambien, por la razon contraria. Como aqui se abandona el
     lienzo, las medidas de diseno se usan tal cual, asi que el tamano del
     lienzo decidia a que tamano se lee en un telefono: medido, las de 1280
     quedaban en 13 px —pequeno— y las de 1600 en 22 —grande y con lineas de
     26 caracteres—. Con esta horquilla las tres familias caen en 17-18 px y
     30-36 caracteres, y el lienzo deja de tener consecuencia. */
  .slide p,.slide li,.slide td,.slide th{font-size:clamp(15px,4.8vw,18px)}

  /* Una tabla de ocho o diez columnas no se recompone en una: se
     comprime hasta partir las palabras letra a letra. Se le deja su
     ancho natural y su propio desplazamiento lateral. */
  .slide table{
    display:block;max-width:100%;
    overflow-x:auto;overflow-y:hidden;overflow-wrap:normal;
  }
  .slide table td,.slide table th{white-space:nowrap;overflow-wrap:normal}

  /* El aviso de «esto es de pantalla horizontal» deja de ser cierto
     en cuanto la lámina se recompone. */
  .tiny{display:none!important}
}

/* El cromo absoluto de la lamina, al flujo. */
@media (max-aspect-ratio:1/1){
.slide > #lienzo,
.slide > .slide,
.slide > .deco,
.slide > .deco .luz,
.slide > .deco .luz::after,
.slide > .deco .hilo,
.slide > .deco .hilo::after,
.slide > .pantalla iframe,
.slide > .ver-video,
.slide > .lista-p li::before{position:static}
}

/* Lo que no se puede partir, con desplazamiento propio. */
@media (max-aspect-ratio:1/1){
.slide .boton,
.slide .tabla td.t,
.slide .hud-title{max-width:100%;overflow-x:auto}
}

/* Rejillas de esta presentacion, a una columna. */
@media (max-aspect-ratio:1/1){
.slide .dos,
.slide .portada,
.slide .ruta,
.slide .ruta-it,
.slide .serie-l li,
.slide .filas li,
.slide .linea-t li,
.slide .ficha,
.slide .lab,
.slide .etapa,
.slide .etapa-info,
.slide .tira,
.slide .fila-g,
.slide .pista-lab,
.slide .par,
.slide .dosl,
.slide .quiz,
.slide .seguir li,
.slide .bass ul,
.slide .claves li,
.slide .paso,
.slide .instr li,
.slide .forma,
.slide .esc,
.slide .revision li,
.slide .doc dl,
.slide .fases,
.slide .idx-grid,
.slide .idx-item,
.slide #lienzo .slide .ruta-it,
.slide #lienzo .slide .serie-l li,
.slide #lienzo .slide .etapa,
.slide #lienzo .slide .tira,
.slide #lienzo .slide .ficha,
.slide #lienzo .slide .fila-g,
.slide #lienzo .slide .instr li,
.slide #lienzo .slide .revision li,
.slide #lienzo .slide .esc{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */