/*!
 * DPGA · El editor de gráficos de After Effects
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-DPGA-GRAF-2026-89DA
 */
/* ═══════════════════════════════════════════════════════════════════════════
   EL EDITOR DE GRÁFICOS DE AFTER EFFECTS
   Aula CodeLibri

   Hermana de «Los doce principios del motion graphics»: mismo motor, misma
   paleta medida en el PowerPoint original y las mismas cintas. Lo propio de
   esta es el laboratorio que imita el panel del editor de gráficos: gris
   neutro, X en rojo, Y en verde y controles amarillos, con el modelo de
   interpolación de After Effects (velocidad e influencia por lado de cada
   fotograma clave) calculado en JavaScript.

   Seis ejercicios, dos láminas cada uno: el reto en el navegador y el paso a
   paso en After Effects, con un script .jsx que prepara la escena y una
   expresión que resuelve lo mismo por otra vía.

   Motor: lienzo fijo 1600×900 centrado a mano (punto 1 del estándar).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:block;src:url(../media/poppins-400-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:Poppins;font-weight:400;font-style:normal;font-display:block;src:url(../media/poppins-400-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:Poppins;font-weight:500;font-style:normal;font-display:block;src:url(../media/poppins-500-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:Poppins;font-weight:500;font-style:normal;font-display:block;src:url(../media/poppins-500-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:Poppins;font-weight:600;font-style:normal;font-display:block;src:url(../media/poppins-600-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:Poppins;font-weight:600;font-style:normal;font-display:block;src:url(../media/poppins-600-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:Poppins;font-weight:700;font-style:normal;font-display:block;src:url(../media/poppins-700-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:Poppins;font-weight:700;font-style:normal;font-display:block;src:url(../media/poppins-700-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{
  /* medidos en el original de la serie */
  --crema:#F3F3EB;   --violeta:#5632DA;  --azul:#3C4BAF;
  --magenta:#A72BC9; --lavanda:#C3BBFA;  --azul-vivo:#0B6EFB;
  --tinta:#171433;

  /* Los que lee tools/mejoras/ayuda.css. Sin un nombre que reconozca cae a su
     reserva y en modo claro sale texto negro sobre panel negro. */
  --surface:#FFFFFF; --surface-2:#FAFAF6;
  --txt:#171433;     --txt-2:#4A4468;    --txt-3:#7E7899;
  --line:#DFDED4;    --line-soft:#ECEBE3;
  --bg:var(--crema); --accent:var(--violeta); --onaccent:#fff;

  --sans:'Poppins','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,'Courier New',monospace;

  --sombra-1:0 1px 2px rgba(23,20,51,.06), 0 4px 10px rgba(23,20,51,.05);
  --sombra-2:0 2px 4px rgba(23,20,51,.06), 0 10px 24px rgba(23,20,51,.09), 0 24px 60px rgba(86,50,218,.10);
  --sombra-3:0 4px 8px rgba(23,20,51,.08), 0 18px 40px rgba(23,20,51,.13), 0 40px 90px rgba(86,50,218,.16);

  /* El panel imita al de After Effects y es gris neutro en los dos temas:
     es la herramienta, no la lámina. X en rojo, Y en verde, como allí. */
  --ae-fondo:#1E1E1E; --ae-panel:#262626; --ae-borde:#141414; --ae-malla:#2B2B2B;
  --ae-malla-2:#363636; --ae-txt:#8F8F8F; --ae-txt-2:#CFCFCF;
  --ae-x:#EF5350;     --ae-y:#5CC96B;    --ae-z:#4A90F0;
  --ae-tir:#F2C744;   --ae-cti:#4C9BFF;  --ae-meta:#D9D3FF;

  /* la composición de la vista previa sigue al tema */
  --comp:#FBFBF7;    --comp-suelo:#171433;
  --ok:#1E9E63;      --mal:#D14343;
}
:root[data-theme="dark"]{
  --crema:#131024;   --lavanda:#3A2E7A;
  --surface:#1C1838; --surface-2:#221D45;
  --txt:#F2F0FF;     --txt-2:#B9B2E0;    --txt-3:#8A82B8;
  --line:#2E2857;    --line-soft:#241F47;
  --bg:var(--crema); --accent:#9B7BFF;   --violeta:#9B7BFF;
  --azul:#6E86FF;    --magenta:#D46BF0;  --azul-vivo:#5AA0FF;
  --sombra-1:0 1px 2px rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.25);
  --sombra-2:0 2px 4px rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.35), 0 24px 60px rgba(120,90,255,.18);
  --sombra-3:0 4px 8px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.4), 0 40px 90px rgba(120,90,255,.24);
  --comp:#2A2552;    --comp-suelo:#D9D3FF;
  --ok:#3CCB86;      --mal:#FF6B6B;
}

*{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{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

#escenario{/* ══════════ el lienzo ══════════ */ 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. */
  width:1600px;height:900px;overflow:hidden;
  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 .3s ease,visibility .3s;
}
.slide.on{opacity:1;visibility:visible}
.wrap{
  /* «safe» evita que un contenido más alto que el hueco quede inalcanzable */
  flex:1;min-width:0;position:relative;z-index:2;padding:80px 100px 86px;
  display:flex;flex-direction:column;justify-content:safe center}
.wrap > *{flex:none}

.cintas{
  /* las cintas del original, redibujadas; se trazan al entrar en la lámina */
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:.42;filter:blur(1.5px)}
.cintas svg{position:absolute;width:520px;height:520px}
.cintas path{stroke-dasharray:var(--largo,1400);stroke-dashoffset:var(--largo,1400)}
.slide.on .cintas path{animation:trazar 1.5s cubic-bezier(.33,.9,.35,1) forwards}
.slide.on .cintas .abajo path{animation-delay:.22s}
@keyframes trazar{ to{stroke-dashoffset:0} }
.cintas .arriba{right:-90px;top:-150px;color:var(--azul)}
.cintas .abajo{left:-205px;bottom:-255px;color:var(--magenta)}
:root[data-theme="dark"] .cintas{opacity:.3}

.chip{
  position:absolute;left:0;top:42px;z-index:4;
  background:var(--violeta);color:#fff;
  padding:11px 26px 11px 100px;border-radius:0 8px 8px 0;
  font-size:19px;font-weight:500;box-shadow:var(--sombra-1);
}
.chip.disney{background:var(--azul)}
.chip.mg{background:var(--magenta)}
.chip.ambas{background:linear-gradient(90deg,var(--azul),var(--magenta))}

.eyebrow{/* ── tipografía ── */ 
  font-family:var(--mono);font-size:16px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--magenta);
}
h1{font-size:104px;font-weight:700;letter-spacing:-.035em;line-height:.98}
h2{font-size:72px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--violeta)}
h2.m{font-size:54px;line-height:1.02;text-wrap:balance}
h3{font-size:29px;font-weight:600;letter-spacing:-.01em}
h3.t38{font-size:38px;letter-spacing:-.02em;line-height:1.1}
h4{font-size:21px;font-weight:600;letter-spacing:-.005em}
p{font-size:23px;line-height:1.6;color:var(--txt-2);max-width:40ch}
b,strong{font-weight:600;color:var(--txt)}
.chico{font-size:18.5px;line-height:1.55}
.mini{font-size:16px;line-height:1.5;color:var(--txt-3)}
.lead{font-size:21px;line-height:1.55;max-width:74ch}
/* el nombre en inglés del principio, debajo del español, como en la U1.4 */
.pen{display:block;font-size:19px;font-weight:500;color:var(--txt-3);letter-spacing:.01em;margin-top:-8px}
kbd{
  font-family:var(--mono);font-size:.78em;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:1px 6px;background:var(--surface);color:var(--txt);white-space:nowrap}
code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:1px 6px;
     border-radius:5px;border:1px solid var(--line-soft)}

.dos{display:grid;grid-template-columns:1fr 1fr;gap:60px;height:100%;align-items:center}
.dos.ancha-der{grid-template-columns:.78fr 1.22fr}
.ancha .wrap{padding:44px 72px}
.texto{display:flex;flex-direction:column;gap:20px}

.pista{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--magenta);padding:5px 13px;border-radius:20px;
  box-shadow:var(--sombra-1);align-self:flex-start;
}

.taller{
  position:relative;border-radius:22px;background:var(--surface);
  box-shadow:var(--sombra-3);overflow:hidden;border:1px solid var(--line-soft);
}
.taller-cab{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 22px;border-bottom:1px solid var(--line-soft);background:var(--surface-2);
}
.taller-cab h3{font-size:20px}
.val{font-family:var(--mono);font-size:16px;color:var(--violeta);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--violeta)}
.pie-mando{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px 18px}
.interruptor{display:flex;align-items:center;gap:10px;font-size:16px;cursor:pointer;color:var(--txt-2)}
.interruptor input{accent-color:var(--violeta);width:18px;height:18px}

.boton{
  border:0;border-radius:12px;padding:11px 21px;font-size:16px;font-weight:500;
  background:var(--violeta);color:#fff;box-shadow:var(--sombra-1);transition:.16s;
}
.boton:hover{transform:translateY(-1px);box-shadow:var(--sombra-2)}
.boton.hueco{background:var(--surface);color:var(--txt-2);border:1px solid var(--line)}
.boton.hueco:hover{border-color:var(--violeta);color:var(--violeta)}
.boton[aria-pressed="true"],.boton.hueco[aria-pressed="true"],.boton.hueco[aria-pressed="true"]:hover{background:var(--violeta);color:#fff;border-color:var(--violeta)}
.boton.b-chico{padding:7px 14px;font-size:14px;border-radius:10px}
.grupo{display:flex;gap:9px;flex-wrap:wrap}

.portada{/* ══════════ portada ══════════ */ display:flex;flex-direction:column;justify-content:center;gap:22px;height:100%}
.portada-curva{width:620px;height:auto;overflow:visible}
.portada-curva .tir{stroke:var(--txt-3);stroke-width:2.5;stroke-dasharray:6 7}
.portada-curva .pto{fill:var(--violeta)}
.portada-curva .man{fill:var(--surface);stroke:var(--magenta);stroke-width:3.5}
.portada-curva .cur{stroke:url(#degPortada);stroke-width:14;fill:none;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900}
.slide.on .portada-curva .cur{animation:trazar 1.6s cubic-bezier(.33,.9,.35,1) .1s forwards}
.portada .cred{font-size:20.5px;color:var(--txt-3);max-width:70ch;line-height:1.6}

.ruta{/* ══════════ recorrido (índice visual) ══════════ */ display:grid;grid-template-columns:1fr 1.1fr .9fr;gap:36px;margin-top:26px;align-items:start}
.ruta h4{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--magenta);font-weight:500;margin-bottom:12px}
.ruta-it{
  display:grid;grid-template-columns:34px 1fr;gap:8px;width:100%;text-align:left;align-items:baseline;
  border:0;background:none;padding:8px 10px;border-radius:10px;font-size:18px;color:var(--txt-2);transition:.14s}
.ruta-it:hover{background:var(--surface);color:var(--violeta);box-shadow:var(--sombra-1)}
.ruta-it .nn{font-family:var(--mono);font-size:13px;color:var(--txt-3)}
.ruta-it .de{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--txt-3);margin-top:2px}
.ruta-it .de.disney{color:var(--azul)}
.ruta-it .de.mg{color:var(--magenta)}

.ae{/* ══════════ el panel del editor de gráficos ══════════ */ 
  background:var(--ae-fondo);border-radius:16px;overflow:hidden;color:var(--ae-txt-2);
  box-shadow:var(--sombra-3);border:1px solid var(--ae-borde);
}
.ae-barra{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px;
  background:var(--ae-panel);border-bottom:1px solid var(--ae-borde);
}
.ae-prop{
  border:1px solid transparent;background:none;color:#fff;font-size:14px;font-weight:500;
  padding:5px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:8px}
.ae-prop::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c,var(--ae-x))}
.ae-prop:hover{border-color:#444}
.ae-sp{flex:1}
.ae-seg{display:inline-flex;border:1px solid #3A3A3A;border-radius:8px;overflow:hidden}
.ae-seg button{border:0;background:none;color:var(--ae-txt);font-size:13px;padding:5px 11px}
.ae-seg button[aria-pressed="true"]{background:#3A3A3A;color:#fff}
.ae-b{
  border:1px solid #3A3A3A;background:#2E2E2E;color:var(--ae-txt-2);font-size:13px;
  padding:5px 9px;border-radius:8px;display:inline-flex;gap:6px;align-items:center;transition:.14s}
.ae-b:hover{border-color:var(--ae-tir);color:#fff}
.ae-b kbd{font-size:10.5px;background:#1B1B1B;border-color:#444;color:var(--ae-tir);padding:0 4px}
.ae-graf{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.ae-pie{
  display:flex;align-items:center;gap:12px;padding:6px 10px;min-height:40px;
  background:var(--ae-panel);border-top:1px solid var(--ae-borde);
  font-family:var(--mono);font-size:12.5px;color:var(--ae-txt)}
.ae-play{
  width:28px;height:28px;border-radius:7px;border:1px solid #3A3A3A;background:#2E2E2E;
  color:#fff;font-size:11px;display:grid;place-items:center}
.ae-play:hover{border-color:var(--ae-cti)}
.ae-tc{color:var(--ae-cti);font-size:14px;font-variant-numeric:tabular-nums}
.ae-lect{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;color:var(--ae-txt-2)}
.ae-lect i{font-style:normal;color:var(--ae-txt)}
/* el dibujo del gráfico, por clases, para que el SVG no lleve colores sueltos */
.g-malla{stroke:var(--ae-malla);stroke-width:1}
.g-malla.fuerte{stroke:var(--ae-malla-2)}
.g-cero{stroke:#4A4A4A;stroke-width:1.2}
.g-regla{fill:#232323}
.g-et{font-family:var(--mono);font-size:12px;fill:var(--ae-txt)}
.g-et.u{fill:#6D6D6D}
.g-cur{fill:none;stroke-width:2.6;stroke-linejoin:round}
.g-cur.x{stroke:var(--ae-x)}
.g-cur.y{stroke:var(--ae-y)}
.g-cur.z{stroke:var(--ae-z)}
.g-cur.gris{stroke:#8A8A8A;stroke-width:1.6;opacity:.7}
.g-cur.fina{stroke-width:1.5;opacity:.75}
.g-cur.mano{stroke:var(--lavanda);stroke-width:1.8;stroke-dasharray:2 5;opacity:.95}
.g-meta{fill:none;stroke:var(--ae-meta);stroke-width:2;stroke-dasharray:7 6;opacity:.8}
.g-meta.fina{stroke-width:1.3;opacity:.45}
.g-linea-tir{stroke:var(--ae-tir);stroke-width:1.3}
.g-tir{fill:var(--ae-tir);stroke:#1E1E1E;stroke-width:1.5}
.g-toque{fill:transparent;cursor:grab}
.g-clave{fill:#1E1E1E;stroke:#EDEDED;stroke-width:1.6}
.g-clave.sel{fill:var(--ae-tir);stroke:var(--ae-tir)}
.g-toque.clave{cursor:pointer}
.g-toque.mueve{cursor:move}
.g-cti{stroke:var(--ae-cti);stroke-width:1.6}
.g-cti-cab{fill:var(--ae-cti)}
.g-aviso{font-family:var(--sans);font-size:15px;fill:var(--ae-tir)}

.comp{/* ══════════ la composición de la vista previa ══════════ */ display:block;width:100%;height:auto;border-radius:12px;background:#2A2A2A;
      box-shadow:var(--sombra-2);border:1px solid var(--line-soft)}
.comp .fondo{fill:var(--comp)}
.comp .suelo{fill:var(--comp-suelo);opacity:.85}
.comp .guia{stroke:var(--txt-3);stroke-width:4;stroke-dasharray:14 14;opacity:.55}
.comp .cebolla circle{fill:var(--violeta);opacity:.32}
.comp .cebolla.b circle{fill:var(--txt-3);opacity:.35}
.comp .pel{fill:var(--violeta)}
.comp .pel.gris{fill:#9E99B8}
.comp .cua{fill:var(--magenta)}
.comp .brazo{fill:var(--azul)}
.comp .mano{fill:var(--magenta)}
.comp .hombro{fill:var(--comp-suelo)}
.comp .rot{font-family:var(--sans);font-size:44px;fill:var(--txt-3);font-weight:500}

.reto{/* ══════════ los retos ══════════ */ display:grid;grid-template-columns:450px 1fr;gap:44px;height:100%;align-items:center}
.reto .texto{gap:18px}
.reto-lab{display:flex;flex-direction:column;gap:14px;min-width:0}
.reto-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.reto-fila .comp{align-self:start}
.consigna{
  border-left:4px solid var(--magenta);padding:10px 0 10px 16px;font-size:18px;line-height:1.5;
  color:var(--txt);background:color-mix(in srgb,var(--magenta) 6%,transparent);border-radius:0 10px 10px 0}
.verif{
  border-radius:12px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--sombra-2);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.verif h4{font-size:15px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
          color:var(--txt-3);font-weight:500;display:flex;justify-content:space-between;gap:10px}
.verif h4 .val{font-size:14px;letter-spacing:0;text-transform:none}
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.4;color:var(--txt-2)}
.checks li::before{
  content:"✕";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:var(--line)}
.checks li.ok{color:var(--txt)}
.checks li.ok::before{content:"✓";background:var(--ok)}
.verif .logro{font-size:15px;font-weight:600;color:var(--ok);min-height:21px}
.verif .grupo{margin-top:auto}
.control{display:flex;flex-direction:column;gap:5px}
.control label{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.control select{font:inherit;font-size:15px;padding:6px 10px;border-radius:9px;border:1px solid var(--line);
                background:var(--surface);color:var(--txt)}

/* el cuadro «Velocidad de fotogramas clave» del laboratorio central */
.vfc{
  border-radius:12px;background:var(--ae-panel);color:var(--ae-txt-2);border:1px solid var(--ae-borde);
  box-shadow:var(--sombra-2);padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.vfc h4{font-size:14px;color:#fff;font-weight:500}
.vfc-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vfc-col{border:1px solid #3A3A3A;border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:6px}
.vfc-col span{font-size:12px;color:var(--ae-txt)}
.vfc-col b{font-family:var(--mono);font-size:15px;color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.vfc .cont{font-size:12.5px;color:var(--ae-txt)}
.vfc .cont b{color:var(--ae-tir);font-weight:500}

.carril3{/* ══════════ lámina 3 · dos pelotas ══════════ */ display:grid;grid-template-columns:160px 1fr;gap:22px;align-items:center;padding:26px 24px}
.carril3 + .carril3{border-top:1px solid var(--line-soft)}
.carril3 .et{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.carril3 .mini-g{display:block;width:160px;height:auto;margin-top:8px;border-radius:8px}
.carril3 svg.pista3{display:block;width:100%;height:auto}
.pista3 .riel{stroke:var(--line);stroke-width:3;stroke-dasharray:10 10}
.pista3 .marca{fill:var(--violeta);opacity:.35}
.pista3 .bola{fill:var(--violeta)}
.pista3 .bola.b{fill:var(--magenta)}

.mock-fila{/* ══════════ lámina 4 · el panel señalado ══════════ */ display:grid;grid-template-columns:1fr 430px;gap:40px;align-items:center;margin-top:24px}
.mock{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--sombra-3)}
.mock .p-fondo{fill:#1E1E1E}.mock .p-barra{fill:#262626}.mock .p-lista{fill:#222}
.mock .p-txt{font-family:var(--sans);font-size:14px;fill:#CFCFCF}
.mock .p-txt.t{fill:#8F8F8F;font-size:12px;font-family:var(--mono)}
.mock .p-malla{stroke:#2C2C2C}
.mock .p-sel{fill:#34343A}
.mock .p-ico{fill:none;stroke:#9A9A9A;stroke-width:1.6}
.mock .p-ico.on{stroke:var(--ae-tir)}
.mock .llamada circle{fill:var(--magenta)}
.mock .llamada text{font-family:var(--sans);font-size:15px;font-weight:700;fill:#fff}
.mock-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;counter-reset:m}
.mock-lista li{position:relative;padding-left:44px;font-size:18px;line-height:1.5;color:var(--txt-2);counter-increment:m}
.mock-lista li::before{
  content:counter(m);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--magenta);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center}

.pares{/* ══════════ lámina 6 · curvas y movimientos ══════════ */ display:grid;grid-template-columns:1.25fr 1fr;gap:44px;margin-top:18px}
.pares-col{display:flex;flex-direction:column;gap:12px}
.par{
  display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;width:100%;height:82px;
  border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:0 16px;
  box-shadow:var(--sombra-1);transition:.16s;text-align:left}
.par:hover{border-color:var(--violeta)}
.par[aria-pressed="true"]{border-color:var(--violeta);border-width:2px;box-shadow:var(--sombra-2)}
.par.bien{border-color:var(--ok);border-width:2px;background:color-mix(in srgb,var(--ok) 12%,var(--surface));cursor:default}
.par.mal{border-color:var(--mal);border-width:2px;background:color-mix(in srgb,var(--mal) 12%,var(--surface))}
.par .l{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--violeta);text-align:center}
.par svg{display:block;width:100%;height:60px}
.par .riel{stroke:var(--line);stroke-width:2;stroke-dasharray:6 6}
.par .bola{fill:var(--violeta)}
.par-cur{grid-template-columns:40px 1fr;padding:0 12px}
.par-cur svg{height:66px;border-radius:8px}

.tipos{/* ══════════ lámina 7 · tipos de interpolación ══════════ */ display:grid;grid-template-columns:360px 1fr;gap:36px;margin-top:22px;align-items:start}
.tipos-lista{display:flex;flex-direction:column;gap:10px}
.tipo{
  display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:11px 14px;
  box-shadow:var(--sombra-1);transition:.16s}
.tipo:hover{border-color:var(--violeta)}
.tipo[aria-pressed="true"]{background:var(--violeta);border-color:var(--violeta);color:#fff}
.tipo svg{width:22px;height:22px;justify-self:center}
.tipo svg *{fill:var(--txt-2)}
.tipo[aria-pressed="true"] svg *{fill:#fff}
.tipo .n{font-size:17px;font-weight:600;line-height:1.2}
.tipo .k{display:block;font-family:var(--mono);font-size:11.5px;color:var(--txt-3);margin-top:2px}
.tipo[aria-pressed="true"] .k{color:rgba(255,255,255,.8)}
.tipos-graf{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px 0}
.tipos-graf figure{margin:0;display:flex;flex-direction:column;gap:6px}
.tipos-graf svg{display:block;width:100%;height:auto;border-radius:10px}
.tipos-graf figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.tipos-pista{display:block;width:calc(100% - 36px);height:auto;margin:14px 18px 0;border-radius:10px}
.tipos-desc{font-size:17.5px;line-height:1.55;max-width:none;padding:14px 18px 18px;min-height:98px}

.dims{/* ══════════ lámina 8 · dimensiones ══════════ */ display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px}
.dims-g{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.dims-g figure{margin:0;display:flex;flex-direction:column;gap:6px}
.dims-g svg{display:block;width:100%;height:auto;border-radius:10px}
.dims-g figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}

.tarjetas{/* ══════════ scripts y expresiones ══════════ */ display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:6px}
.tj{background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;
    padding:24px 26px;box-shadow:var(--sombra-2);display:flex;flex-direction:column;gap:11px}
.tj .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--magenta)}
.tj p{font-size:19.5px;line-height:1.55;max-width:none}
.tj .ruta-menu{font-size:17px;color:var(--txt-3);line-height:1.5}

.ae-paso{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;height:100%;align-items:center}
.pasos{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:13px;counter-reset:p}
.pasos li{position:relative;padding-left:40px;font-size:19px;line-height:1.5;color:var(--txt-2);counter-increment:p}
.pasos li::before{
  content:counter(p);position:absolute;left:0;top:1px;width:27px;height:27px;border-radius:8px;
  background:var(--violeta);color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center}
.fotos{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.fotos span{font-family:var(--mono);font-size:13px;padding:4px 9px;border-radius:8px;
            background:var(--surface);border:1px solid var(--line);color:var(--txt-2)}
.fotos span.s{border-color:var(--magenta);color:var(--magenta)}
.tabla-e{border-collapse:collapse;font-size:15.5px;margin-top:4px}
.tabla-e th{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
            color:var(--txt-3);font-weight:500;padding:0 14px 6px 0;text-align:left}
.tabla-e td{padding:5px 14px 5px 0;border-top:1px solid var(--line-soft);font-family:var(--mono);color:var(--txt-2)}

.codigos{display:flex;flex-direction:column;gap:16px;min-width:0}
.codigo{border-radius:14px;overflow:hidden;background:var(--ae-fondo);border:1px solid var(--ae-borde);box-shadow:var(--sombra-2)}
.codigo-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px 9px 16px;
  background:var(--ae-panel);border-bottom:1px solid var(--ae-borde);font-size:14px;color:var(--ae-txt)}
.codigo-cab b{color:#fff;font-weight:500;font-family:var(--mono);font-size:14px}
.codigo-cab .boton{box-shadow:none}
.codigo-cab .boton.hueco{background:#2E2E2E;border-color:#444;color:#DDD}
.codigo-cab .boton.hueco:hover{border-color:var(--ae-tir);color:#fff}
.codigo pre{
  margin:0;padding:14px 16px;max-height:292px;overflow:auto;font-family:var(--mono);font-size:13px;
  line-height:1.55;color:#E3E3E3;tab-size:2;white-space:pre}
.codigo.expr pre{max-height:292px;color:#FFE9A8}
.codigo code{background:#2E2E2E;border-color:#444;color:#FFE9A8}
.codigo kbd{background:#1B1B1B;border-color:#444;color:var(--ae-tir)}
.codigo .nota{padding:10px 16px 12px;font-size:14.5px;line-height:1.5;color:#BDBDBD;border-top:1px solid #2E2E2E;max-width:none}
.copiado{color:var(--ae-y)!important;border-color:var(--ae-y)!important}

.quiz{/* ══════════ cuestionario ══════════ */ display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:start}
.quiz-esc{
  border-radius:18px;background:var(--ae-fondo);border:1px solid var(--ae-borde);overflow:hidden;
  box-shadow:var(--sombra-2);padding:10px}
.quiz-esc svg{display:block;width:100%;height:auto}
.quiz-esc .leyenda{font-family:var(--mono);font-size:12.5px;color:var(--ae-txt);padding:8px 6px 2px;letter-spacing:.06em}
.q-op{
  display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);
  border-radius:14px;padding:13px 18px;font-size:18px;transition:.16s;margin-bottom:10px;
  box-shadow:var(--sombra-1);
}
.q-op:hover{border-color:var(--violeta);transform:translateX(3px)}
.q-op.bien{border-color:var(--ok);border-width:2px;background:color-mix(in srgb,var(--ok) 24%,var(--surface));font-weight:600}
.q-op.mal{border-color:var(--mal);border-width:2px;background:color-mix(in srgb,var(--mal) 20%,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:4px solid var(--violeta);padding:12px 0 12px 16px;font-size:17px;
  line-height:1.55;color:var(--txt-2);min-height:60px;max-width:none}
.q-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.q-cont{font-family:var(--mono);font-size:14px;color:var(--txt-3)}

.dosl{/* ══════════ práctica y cierre ══════════ */ display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.lista-p{display:flex;flex-direction:column;gap:12px;padding:0;margin:0}
.lista-p li{list-style:none;position:relative;padding-left:25px;font-size:18.5px;line-height:1.45;color:var(--txt-2)}
.lista-p li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:3px;background:var(--violeta)}
.tramos{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.tramos li{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:baseline;font-size:20.5px;line-height:1.45;color:var(--txt-2)}
.tramos .s{font-family:var(--mono);font-size:15.5px;color:var(--magenta)}
.auto{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.auto label{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:20px;line-height:1.45;color:var(--txt-2);cursor:pointer}
.auto input{accent-color:var(--ok);width:19px;height:19px;margin-top:3px}
.auto input:checked + span{color:var(--txt)}
.auto-cuenta{font-family:var(--mono);font-size:14px;color:var(--txt-3);margin-top:12px}

.atajos{width:100%;border-collapse:collapse;font-size:20px}
.atajos th{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--magenta);padding:0 12px 10px;font-weight:500}
.atajos td{padding:12px 12px;border-top:1px solid var(--line-soft);vertical-align:top;color:var(--txt-2)}
.atajos td:last-child{text-align:right;white-space:nowrap}

.seguir{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:26px;max-width:1180px}
.seguir li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.seguir .tipo-s{font-family:var(--mono);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);width:140px}
.seguir p{font-size:21.5px;line-height:1.5;max-width:none}
a.enlace{color:var(--violeta);text-decoration:underline;text-underline-offset:3px;
         text-decoration-thickness:1px;transition:.14s;font-weight:500}
a.enlace:hover{color:var(--magenta);text-decoration-thickness:2px}

.creditos{display:flex;flex-direction:column;gap:18px;font-size:19px;line-height:1.55;color:var(--txt-2)}
.creditos b{display:block;color:var(--txt)}
.apa{display:flex;flex-direction:column;gap:14px}
.apa p{font-size:18.5px;line-height:1.55;max-width:none;text-indent:-2.1em;padding-left:2.1em}
.apa i{font-style:italic}
.apa .url{font-size:16px;color:var(--txt-3);overflow-wrap:anywhere}

.railbar{/* ══════════ cromo ══════════ */ 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(--violeta),var(--magenta));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:11px;padding:0 18px;
  background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 94%,transparent),transparent);
}
.hud-btn{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--txt-2);
  font-size:15px;transition:.16s;box-shadow:var(--sombra-1);
}
.hud-btn:hover{border-color:var(--violeta);color:var(--violeta);transform:translateY(-1px)}
.hud-btn[disabled]{opacity:.36;cursor:default;transform:none}
.counter{font-family:var(--mono);font-size:12px;color:var(--txt-3);min-width:58px;text-align:center}
.hud-title{
  flex:1;font-size:12px;color:var(--txt-3);letter-spacing:.1em;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) 96%,transparent);
  padding:54px 66px;overflow:auto;display:none;
}
.index.on{display:block}
.index h2{font-size:40px;color:var(--txt);margin-bottom:8px}
.idx-close{
  position:fixed;right:26px;top:24px;width:46px;height:46px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);color:var(--txt);
  font-size:24px;line-height:1;display:grid;place-items:center;box-shadow:var(--sombra-2);transition:.16s;
}
.idx-close:hover{background:var(--violeta);color:#fff;border-color:var(--violeta);transform:rotate(90deg)}
.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(4,1fr);gap:28px 30px}
.idx-group h3{font-size:13px;font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;
              color:var(--magenta);margin-bottom:11px}
.idx-item{
  display:grid;grid-template-columns:34px 1fr;gap:10px;width:100%;text-align:left;
  border:0;background:none;padding:7px 9px;border-radius:10px;font-size:16.5px;color:var(--txt-2);
  transition:.14s;
}
.idx-item:hover{background:var(--surface);color:var(--violeta)}
.idx-item.aqui{background:var(--violeta);color:#fff}
.idx-item .nn{font-family:var(--mono);font-size:12.5px;color:var(--txt-3)}
.idx-item.aqui .nn{color:rgba(255,255,255,.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,.par,.tipo{transition:none}
  .cintas path,.portada-curva .cur{animation:none!important;stroke-dashoffset:0}
}

@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}
  .dos,.dos.ancha-der,.reto,.ae-paso{grid-template-columns:1fr 1fr;height:auto;gap:26px}
  .chrome.hud,.railbar,.tiny,.cintas,.index,.chip,.pista{display:none!important}
  .taller,.ae,.verif{box-shadow:none}
  .codigo pre{max-height:none;overflow:visible;white-space:pre-wrap}
  h1{font-size:52px}h2,h2.m{font-size:36px}p{font-size:14.5px}
}

/* ══════════ vertical ══════════ */
@media (max-aspect-ratio:1/1){
  /* la dirección: la lámina tiene hermanos sueltos (cintas, rótulo y cuerpo) */
  .slide.on{flex-direction:column}
  .cintas{display:none}
  .chip{align-self:flex-start;margin:0 0 18px -18px;padding:9px 20px;font-size:15px;border-radius:0 8px 8px 0}
  .wrap,.ancha .wrap{padding:0;display:block}
  .portada-curva{width:100%}
  .verif h4,.vfc h4{font-size:12px;letter-spacing:.1em}
  .verif{padding:12px}
  .pista{font-size:12px}
  .portada .cred,.lead{font-size:16px}
  .eyebrow{font-size:13px;letter-spacing:.16em}
  .pen{font-size:15px;margin-top:0}
  .taller-cab{padding:12px 14px}
  .taller-cab h3{font-size:17px}
  .ae-barra{padding:6px}
  .ae-b{font-size:12px;padding:4px 7px}
  .ae-pie{flex-wrap:wrap}
  .ae-lect{margin-left:0;text-align:left}
  .consigna{font-size:16px}
  .checks li,.pasos li,.mock-lista li,.tipos-desc,.q-razon{font-size:15px}
  .codigo pre{max-height:260px;font-size:12px}
  .codigo-cab{flex-wrap:wrap}
  .par{height:auto;min-height:64px;padding:8px 12px}
  .tramos li{grid-template-columns:78px 1fr;font-size:15px}
  .atajos{font-size:15px}
  .seguir li{grid-template-columns:1fr;gap:4px}

  #lienzo .slide .ruta-it{/* rejillas internas que sí caben en dos columnas; el inyector colapsa toda rejilla con !important y hace falta más especificidad */ grid-template-columns:34px 1fr!important}
  #lienzo .slide .par{grid-template-columns:34px 1fr!important}
  #lienzo .slide .tipo{grid-template-columns:30px 1fr!important}
  #lienzo .slide .tramos li{grid-template-columns:78px 1fr!important}
  #lienzo .slide .auto label{grid-template-columns:24px 1fr!important}
  #lienzo .slide .vfc-cols,
  #lienzo .slide .tipos-graf,
  #lienzo .slide .dims-g{grid-template-columns:1fr 1fr!important}
  .ae-paso,.reto{gap:20px}
  .index{padding:22px 16px 70px}
  .index h2{font-size:26px}
  .idx-grid{grid-template-columns:1fr;gap:20px}
  .idx-close{right:14px;top:14px}
}


/* 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 > .cintas,
.slide > .cintas svg,
.slide > .chip,
.slide > .checks li::before,
.slide > .mock-lista li::before,
.slide > .pasos li::before,
.slide > .lista-p li::before{position:static}
}

/* Lo que no se puede partir, con desplazamiento propio. */
@media (max-aspect-ratio:1/1){
.slide kbd,
.slide .atajos td:last-child,
.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 .dos.ancha-der,
.slide .ruta,
.slide .ruta-it,
.slide .reto,
.slide .reto-fila,
.slide .vfc-cols,
.slide .carril3,
.slide .mock-fila,
.slide .pares,
.slide .par,
.slide .par-cur,
.slide .tipos,
.slide .tipo,
.slide .tipos-graf,
.slide .dims-g,
.slide .tarjetas,
.slide .ae-paso,
.slide .quiz,
.slide .dosl,
.slide .tramos li,
.slide .auto label,
.slide .seguir li,
.slide .idx-grid,
.slide .idx-item,
.slide #lienzo .slide .ruta-it,
.slide #lienzo .slide .par,
.slide #lienzo .slide .tipo,
.slide #lienzo .slide .tramos li,
.slide #lienzo .slide .auto label,
.slide #lienzo .slide .vfc-cols,
.slide #lienzo .slide .tipos-graf,
.slide #lienzo .slide .dims-g{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */