/*!
 * DPGA · Loops de motion design, primera parte
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-DPGA-LOOP-2026-236A
 */
/* ═══════════════════════════════════════════════════════════════════════════
   LOOPS DE MOTION DESIGN
   Aula CodeLibri

   Hermana de «El editor de gráficos de After Effects»: mismo motor, misma
   paleta y las mismas cintas. Lo propio de esta son los laboratorios de
   lienzo: cada práctica corre en la lámina con su radiografía, que apaga
   los principios uno por uno, y su paso a paso trae el script .jsx que arma
   la escena y las expresiones que la mueven.

   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);

  /* Los paneles de código imitan a After Effects y son grises en los dos temas:
     son la herramienta, no la lámina. */
  --ae-fondo:#1E1E1E; --ae-panel:#262626; --ae-borde:#141414;
  --ae-txt:#8F8F8F;   --ae-txt-2:#CFCFCF; --ae-y:#5CC96B;  --ae-tir:#F2C744;

  --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);
  --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:visible;
  /* visible: las pistas de .cintas sangran hasta el borde de la pantalla, no del lienzo */
  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{
  /* pistas concéntricas con el degradado del Aula; se trazan al entrar en la lámina */
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.cintas svg{position:absolute;left:0;top:0;width:1600px;height:900px;overflow:visible}
.cintas .fino{opacity:.55}
.cintas path{stroke-dasharray:100;stroke-dashoffset:100}
.slide.on .cintas path{animation:trazar 1.1s cubic-bezier(.33,.9,.35,1) forwards}
@keyframes trazar{ to{stroke-dashoffset:0} }
:root[data-theme="dark"] .cintas{opacity:.92}

.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)}

.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)}
.aclara{font-size:.72em;font-weight:400;color:var(--txt-3);letter-spacing:0}
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:.72fr 1.28fr}
.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 14px}
.etq{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);display:flex;gap:8px;align-items:baseline}

.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:8px;flex-wrap:wrap}

.portada{/* ══════════ portada ══════════ */ display:grid;grid-template-columns:1fr 600px;gap:64px;align-items:center;height:100%}
.portada .texto{gap:24px}
.portada canvas{display:block;width:100%;max-width:600px;height:auto;aspect-ratio:1;border-radius:26px;box-shadow:var(--sombra-3);background:#EFE5D8}
.portada .cred{font-size:20.5px;color:var(--txt-3);max-width:34ch;line-height:1.6}

.ruta{/* ══════════ recorrido ══════════ */ display:grid;grid-template-columns:1fr 1.15fr .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)}

.empalme{/* ══════════ el empalme ══════════ */ display:block;width:100%;height:auto;background:var(--surface)}
.lectura{
  border-left:4px solid var(--magenta);padding:10px 0 10px 14px;font-size:16.5px;line-height:1.5;
  color:var(--txt);background:color-mix(in srgb,var(--magenta) 6%,transparent);
  border-radius:0 10px 10px 0;min-height:52px;max-width:none}

.formas{/* ══════════ cinco formas de cerrar ══════════ */ list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.formas li{display:grid;grid-template-columns:1fr 390px 200px;gap:28px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.formas li:last-child{border-bottom:1px solid var(--line)}
.formas h4{margin-bottom:4px}
.formas p{font-size:17px;line-height:1.5;max-width:58ch}
.formas .cl{font-size:15px;background:var(--ae-fondo);color:#FFE9A8;border-color:var(--ae-borde);padding:9px 13px;border-radius:9px;display:block;overflow-wrap:anywhere}
.usa{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--txt-3);line-height:1.4}
.usa.si{color:var(--magenta);font-weight:500}
.usa.si::before{content:"◆ ";}

.proceso{/* ══════════ método ══════════ */ list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
.proceso li{background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;padding:22px 22px 24px;box-shadow:var(--sombra-2);display:flex;flex-direction:column;gap:10px}
.proceso .n{width:36px;height:36px;border-radius:10px;background:var(--violeta);color:#fff;font-weight:600;font-size:17px;display:grid;place-items:center}
.proceso p{font-size:17.5px;line-height:1.55}

.lab{/* ══════════ laboratorios de las prácticas ══════════ */ display:grid;grid-template-columns:380px 600px 1fr;gap:38px;height:100%;align-items:center}
.lab .texto{gap:16px}
.principios{display:flex;flex-wrap:wrap;gap:6px}
.principios span{font-family:var(--mono);font-size:12.5px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--txt-2)}
.principios span.disney{border-color:var(--azul);color:var(--azul)}
.principios span.mg{border-color:var(--magenta);color:var(--magenta)}
.escena{display:flex;flex-direction:column;gap:12px;min-width:0}
.escena canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:20px;box-shadow:var(--sombra-3);background:#EFE5D8}
.escena.roja canvas{background:#E8473F}
.transporte{display:flex;align-items:center;gap:12px}
.transporte .boton{flex:none;min-width:138px}
.transporte input{flex:1;min-width:0}
.tc{font-family:var(--mono);font-size:14px;color:var(--txt-3);font-variant-numeric:tabular-nums;min-width:150px;text-align:right}
.mandos{display:flex;flex-direction:column;gap:18px;min-width:0}
.mando h4{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);font-weight:500;margin-bottom:8px}
.muestra{display:inline-flex;gap:2px;vertical-align:-1px;margin-right:4px}
.muestra i{width:11px;height:11px;border-radius:3px;display:block}

.capas{/* ══════════ el sistema, como en la línea de tiempo ══════════ */ background:var(--ae-fondo);border:1px solid var(--ae-borde);border-radius:14px;box-shadow:var(--sombra-2);padding:8px 0;font-size:15px}
.capa{display:flex;align-items:baseline;gap:10px;padding:7px 16px;color:var(--ae-txt-2);border-top:1px solid #262626}
.capa:first-child{border-top:0}
.capa.hija{padding-left:44px}
.capa.hija::before{content:"↳";color:var(--ae-txt);margin-left:-20px}
.capa i{width:11px;height:11px;border-radius:2px;flex:none;align-self:center}
.capa b{color:#fff;font-weight:500;flex:none}
.capa span{color:var(--ae-txt);font-size:13.5px;font-family:var(--mono)}
.tc-nulo{background:#C9A13A}.tc-cam{background:#C77BD8}.tc-luz{background:#E6D45A}
.tc-forma{background:#5B8DEF}.tc-solido{background:#B0866A}.tc-ajuste{background:#8C8C8C}
.tabla-p{border-collapse:collapse;font-size:15px;width:100%}
.tabla-p th{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:500;padding:0 10px 6px 0;text-align:left}
.tabla-p td{padding:3px 10px 3px 0;border-top:1px solid var(--line-soft);font-family:var(--mono);color:var(--txt-2);font-variant-numeric:tabular-nums}

.tiempos{/* ══════════ timing chart ══════════ */ display:block;width:100%;height:auto;margin:16px 0 10px}
.tiempos .eje{stroke:var(--line);stroke-width:2}
.tiempos .marca{stroke:var(--txt-3);stroke-width:1.5}
.tiempos .num{font-family:var(--mono);font-size:15px;fill:var(--txt-3)}
.tiempos .ley{font-family:var(--sans);font-size:15px;fill:var(--txt-2)}
.t-subir{fill:var(--azul)}.t-rodar{fill:var(--violeta)}.t-volar{fill:var(--magenta)}
.t-rebotar{fill:var(--azul-vivo)}.t-reposo{fill:var(--txt-3)}
.claves{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.tabla-c{border-collapse:collapse;font-size:15.5px;width:100%}
.tabla-c th{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:500;padding:0 12px 6px 0;text-align:left}
.tabla-c td{padding:5px 12px 5px 0;border-top:1px solid var(--line-soft);color:var(--txt-2);vertical-align:top}
.tabla-c td.f{font-family:var(--mono);color:var(--violeta);font-variant-numeric:tabular-nums}
.tabla-c td.s{font-family:var(--mono);color:var(--txt-3);font-variant-numeric:tabular-nums}
.tabla-c td.p{font-family:var(--mono);font-size:13px;color:var(--magenta)}

.ae-paso{/* ══════════ paso a paso ══════════ */ display:grid;grid-template-columns:.86fr 1.14fr;gap:46px;height:100%;align-items:center}
.pasos{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:11px;counter-reset:p}
.pasos li{position:relative;padding-left:40px;font-size:17.5px;line-height:1.48;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}
.pasos li b{color:var(--txt);font-weight:600}
.pasos .en{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--txt-3)}
.pasos .ver{display:block;margin-top:3px;font-size:15px;line-height:1.4;color:var(--ok)}
.pasos .ver::before{content:"✓ ";font-weight:700}
.pasos.col2{/* el pulido, en dos columnas que se leen de arriba abajo */ display:block;columns:2;column-gap:56px}
.pasos.col2 li{font-size:16.5px;break-inside:avoid;margin-bottom:16px}
.niveles{/* zoom: las tres escenas encadenadas */ display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.niveles figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:center}
.niveles canvas{display:block;width:150px;height:150px;border-radius:12px;box-shadow:var(--sombra-2)}
.niveles figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--txt-3);text-align:center}
.niveles .flecha{font-family:var(--mono);font-size:12px;color:var(--magenta);text-align:center;max-width:76px;line-height:1.35}
.vertices{display:block;width:100%;max-width:560px;height:auto}
.vertices .vx-trazo{fill:none;stroke:var(--violeta);stroke-width:7;stroke-linejoin:round}
.vertices .vx-punto{fill:var(--magenta)}
.vertices .vx-num{font-family:var(--mono);font-size:17px;font-weight:600;fill:var(--txt)}
.vertices .vx-et{font-family:var(--sans);font-size:15px;fill:var(--txt-3)}
.escena.cielo canvas{background:#8FD3E8}
.escena.crema canvas{background:#F3F3EB}
.escena.amarilla canvas{background:#F2C14E}
.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:262px;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:262px;color:#FFE9A8}
.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:1fr 1fr;gap:40px;align-items:start}
.q-caso{
  border-radius:18px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--sombra-2);
  padding:26px 28px;display:flex;flex-direction:column;gap:14px;min-height:260px}
.q-caso .n{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}
.q-caso p{font-size:22px;line-height:1.55;max-width:none;color:var(--txt)}
.q-caso h4{font-size:19px;color:var(--txt-2);font-weight:500}
.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:18px}
.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:56px;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)}
.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:19px;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}

.refs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;max-width:1240px}
.refs li{display:flex;gap:34px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.refs li:last-child{border-bottom:1px solid var(--line)}
.refs .quien{flex:none;width:380px;font-size:21px;line-height:1.35}
.refs .quien span{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--txt-3);margin-top:4px;font-weight:400}
.refs p{font-size:19px;line-height:1.5;max-width:none}

.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:12px}
.apa p{font-size:17.5px;line-height:1.5;max-width:none;text-indent:-2.1em;padding-left:2.1em}
.apa i{font-style:italic}
.apa .url{font-size:15px;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(5,1fr);gap:28px 26px}
.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{transition:none}
  .cintas path{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,.ae-paso,.lab,.portada{grid-template-columns:1fr 1fr;height:auto;gap:26px}
  .chrome.hud,.railbar,.tiny,.cintas,.index,.chip,.pista,.transporte,.mandos,.pie-mando{display:none!important}
  .taller,.verif,.proceso li,.q-caso{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 canvas{max-width:100%}
  .portada .cred{font-size:16px}
  .eyebrow{font-size:13px;letter-spacing:.16em}
  .pista{font-size:12px}
  .taller-cab{padding:12px 14px;flex-wrap:wrap}
  .taller-cab h3{font-size:17px}
  .pie-mando{padding:12px 14px}
  .lectura,.pasos li,.q-razon,.formas p,.proceso p{font-size:15px}
  .codigo pre{max-height:260px;font-size:12px}
  .codigo-cab{flex-wrap:wrap}
  .formas .cl{font-size:13px}
  .refs li{flex-direction:column;gap:6px}
  .refs .quien{width:auto;font-size:18px}
  .seguir li{grid-template-columns:1fr;gap:4px}
  .tc{min-width:0}
  .lab,.ae-paso,.dos{gap:22px}
  .lab .escena,.lab .mandos,.ae-paso .codigos{margin-top:18px}
  .index{padding:22px 16px 70px}
  .index h2{font-size:26px}
  .idx-grid{grid-template-columns:1fr;gap:20px}
  .idx-close{right:14px;top:14px}

  #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 .auto label{grid-template-columns:24px 1fr!important}
  #lienzo .slide .proceso{grid-template-columns:1fr 1fr!important}
  .pasos.col2{columns:1}
}



/* 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 > .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 .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 .portada,
.slide .ruta,
.slide .ruta-it,
.slide .formas li,
.slide .proceso,
.slide .lab,
.slide .claves,
.slide .ae-paso,
.slide .quiz,
.slide .dosl,
.slide .auto label,
.slide .seguir li,
.slide .idx-grid,
.slide .idx-item,
.slide #lienzo .slide .ruta-it,
.slide #lienzo .slide .auto label,
.slide #lienzo .slide .proceso{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */