/*!
 * IDENTIDAD · Personalidad de marca: Aaker y arquetipos
 * (c) 2026 Elisa Espinoza Castillo - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-IDENT-PERSONALIDAD-2026-CDFA
 */
/* ─────────────────────────────────────────────
   SISTEMA
   ───────────────────────────────────────────── */
:root{
  --paper:#F7F4EC;
  --paper-2:#EFEADE;
  --ink:#17140F;
  --ink-2:#4A443A;
  --ink-3:#8C8377;
  --rule:#D8D0BF;
  --accent:#C0392B;
  --accent-soft:#F0DCD8;
  --ok:#3C6E4F;
  --ok-soft:#DDEADF;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Consolas","SFMono-Regular",ui-monospace,"Courier New",monospace;
}
html[data-theme="dark"]{
  --paper:#141310;
  --paper-2:#1E1C17;
  --ink:#F2EEE4;
  --ink-2:#BDB6A8;
  --ink-3:#7E7768;
  --rule:#332F27;
  --accent:#E86A57;
  --accent-soft:#3A211C;
  --ok:#7FBF95;
  --ok-soft:#1D2E23;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper-2);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Escenario 16:9 escalado ─────────────────── */
#viewport{position:fixed;inset:0;display:grid;place-items:center}
#stage{
  width:1600px;height:900px;
  /* Centrado a mano y no con el place-items del padre: cuando el lienzo es
     mas grande que el hueco —o sea, casi siempre— la especificacion manda
     que el centrado degrade a alineacion al inicio, para no dejar overflow
     inalcanzable. El lienzo quedaba entonces en (0,0) pero se escalaba
     desde su centro, y se veia empujado abajo a la derecha. */
  position:absolute;left:50%;top:50%;margin:-450px 0 0 -800px;
  transform-origin:center center;
  background:var(--paper);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  overflow:hidden;
}
html[data-theme="dark"] #stage{box-shadow:0 24px 80px rgba(0,0,0,.6)}

.slide{
  position:absolute;inset:0;
  padding:84px 110px 96px;
  display:none;
  flex-direction:column;
}
.slide.on{display:flex;animation:in .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Cabecera corriente ──────────────────────── */
.run{
  position:absolute;top:38px;left:110px;right:110px;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--rule);padding-bottom:10px;
}
.run b{color:var(--accent);font-weight:600}
.folio{
  position:absolute;bottom:34px;left:110px;right:110px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:13px;color:var(--ink-3);
  border-top:1px solid var(--rule);padding-top:12px;
}

/* ── Tipografía ──────────────────────────────── */
.eyebrow{
  font-family:var(--mono);font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:20px;
}
h1{font-family:var(--serif);font-size:104px;line-height:.96;letter-spacing:-.025em;font-weight:400}
h2{font-family:var(--serif);font-size:62px;line-height:1.02;letter-spacing:-.02em;font-weight:400;margin-bottom:28px}
h3{font-family:var(--serif);font-size:34px;line-height:1.12;font-weight:400;margin-bottom:10px}
.lead{font-size:27px;line-height:1.5;color:var(--ink-2);max-width:24em}
p{font-size:21px;line-height:1.55;color:var(--ink-2)}
.small{font-size:17px;line-height:1.5;color:var(--ink-3)}
em{font-style:italic}
strong{color:var(--ink);font-weight:600}
.mono{font-family:var(--mono)}
h1 .hi,h2 .hi{color:var(--accent)}
.exp{font-size:.62em;color:var(--ink-3);font-weight:400;font-style:normal;letter-spacing:0}

.quote{
  font-family:var(--serif);font-size:46px;line-height:1.22;
  letter-spacing:-.015em;color:var(--ink);max-width:19em;
}
.cite{
  margin-top:26px;font-family:var(--mono);font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.cite b{color:var(--accent);font-weight:600}

.body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.cols{display:grid;gap:56px}
.c2{grid-template-columns:1fr 1fr}
.c2u{grid-template-columns:1.05fr .95fr}
.c2w{grid-template-columns:1.3fr .7fr}
.c3{grid-template-columns:repeat(3,1fr)}

/* ── Portada ─────────────────────────────────── */
.cover{justify-content:space-between;padding:96px 110px}
.crest{display:flex;align-items:center;gap:18px}
.crest svg{width:52px;height:52px;flex:none}
.crest div{font-family:var(--mono);font-size:13px;letter-spacing:.13em;line-height:1.7;text-transform:uppercase;color:var(--ink-2)}
.cover h1{font-size:132px;letter-spacing:-.035em}
.cover .rule{height:2px;background:var(--accent);width:170px;margin:34px 0}
.credit{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.credit .who{font-family:var(--serif);font-size:29px;line-height:1.3}
.credit .who span{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

/* ── Tarjetas ────────────────────────────────── */
.card{
  background:var(--paper-2);border:1px solid var(--rule);
  padding:26px 28px;position:relative;
}
.card .n{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.14em;margin-bottom:12px}
.card h3{font-size:29px;margin-bottom:8px}
.card p{font-size:18px;line-height:1.5}

/* ── Índice ──────────────────────────────────── */
.toc{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:8px}
.toc button{
  all:unset;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:baseline;
  padding:15px 10px 15px 0;border-bottom:1px solid var(--rule);cursor:pointer;
  transition:background .18s,padding-left .18s;
}
.toc button:hover,.toc button:focus-visible{background:var(--accent-soft);padding-left:10px}
.toc .num{font-family:var(--mono);font-size:14px;color:var(--accent)}
.toc .txt{font-family:var(--serif);font-size:25px;line-height:1.2}
.toc .sub{display:block;font-family:var(--sans);font-size:15px;color:var(--ink-3);margin-top:4px}

/* ── Cita destacada ──────────────────────────── */
.why{
  border-left:3px solid var(--accent);padding-left:20px;
  font-size:19px;line-height:1.5;color:var(--ink-2);max-width:44em;
}
.btn{
  all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;padding:11px 20px;border:1px solid var(--ink);color:var(--ink);
  transition:all .18s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.soft{border-color:var(--rule);color:var(--ink-2)}
.btn.soft:hover{background:var(--paper-2);color:var(--accent);border-color:var(--accent)}

/* ── Tabla ───────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:19px}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
th{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;border-bottom:1px solid var(--ink);
}
td:first-child{font-family:var(--serif);font-size:22px;color:var(--ink);width:22%}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--paper-2)}

/* ── Capas / secuencia ───────────────────────── */
.layers{display:grid;gap:14px}
.layer{
  display:grid;grid-template-columns:190px 1fr;gap:32px;align-items:center;
  border-left:4px solid var(--rule);padding:22px 0 22px 28px;transition:border-color .25s;
}
.layer:hover{border-left-color:var(--accent)}
.layer .lname{font-family:var(--serif);font-size:32px}
.layer .lname span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}

/* ── Cadena de la secuencia lineal ───────────── */
.chain{display:flex;align-items:stretch;gap:0;margin-top:8px}
.chain div{
  flex:1;border:1px solid var(--rule);border-right:none;background:var(--paper-2);
  padding:20px 16px;text-align:center;position:relative;
}
.chain div:last-child{border-right:1px solid var(--rule)}
.chain div b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:9px}
.chain div span{font-family:var(--serif);font-size:22px;line-height:1.15;color:var(--ink)}
.chain div.mark{background:var(--accent-soft);border-color:var(--accent)}

/* ── Bibliografía ────────────────────────────── */
.bib{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.bib div{padding:15px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--ink-2)}
.bib b{display:block;font-family:var(--serif);font-size:21px;color:var(--ink);font-weight:400;margin-bottom:4px}
.bib i{color:var(--ink-3);font-style:italic}

/* ═══════════════════════════════════════════════
   MÓDULO · Puente conceptual (tres autores)
   ═══════════════════════════════════════════════ */
.bridge{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.brcard{
  all:unset;cursor:pointer;border:1px solid var(--rule);background:var(--paper-2);
  padding:26px 24px;transition:all .2s;
}
.brcard:hover{border-color:var(--accent)}
.brcard[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.brcard .a{font-family:var(--serif);font-size:32px;line-height:1.1;margin-bottom:8px}
.brcard .b{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.brpanel{min-height:190px;border-left:3px solid var(--accent);padding-left:26px}
.brpanel .t{font-size:26px;line-height:1.45;color:var(--ink-2);max-width:40em;margin-bottom:16px}
.brpanel .s{font-size:18px;line-height:1.5;color:var(--ink-3);max-width:44em}

/* ═══════════════════════════════════════════════
   MÓDULO · Cinco dimensiones de Aaker
   ═══════════════════════════════════════════════ */
.dims{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:32px}
.dim{
  all:unset;cursor:pointer;padding:22px 18px;text-align:left;
  border:1px solid var(--rule);background:var(--paper-2);
  transition:all .2s ease;min-height:126px;
}
.dim:hover{border-color:var(--accent)}
.dim[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.dim .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;opacity:.6;display:block;margin-bottom:10px}
.dim .t{font-family:var(--serif);font-size:26px;line-height:1.08}
.dimpanel{min-height:236px}
.dimpanel .defn{font-size:23px;line-height:1.5;color:var(--ink-2);max-width:38em;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.chip{
  font-family:var(--serif);font-size:24px;padding:9px 18px;
  border:1px solid var(--rule);background:var(--paper-2);
}
.chip i{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-left:10px}

/* ═══════════════════════════════════════════════
   MÓDULO · Doce arquetipos
   ═══════════════════════════════════════════════ */
.arq{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.arqgroup{border:1px solid var(--rule);background:var(--paper-2);padding:14px}
.arqgroup>.g{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;line-height:1.4;min-height:30px;
}
.arqgroup .set{display:grid;gap:7px}
.arqgroup button{
  all:unset;cursor:pointer;padding:11px 14px;border:1px solid var(--rule);
  background:var(--paper);font-family:var(--serif);font-size:21px;transition:all .18s;
}
.arqgroup button:hover{border-color:var(--accent);color:var(--accent)}
.arqgroup button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.arqpanel{
  border-left:3px solid var(--accent);padding-left:26px;min-height:180px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;
}
.arqpanel .h{font-family:var(--serif);font-size:40px;line-height:1.05;margin-bottom:12px}
.arqpanel .m{font-size:22px;line-height:1.45;color:var(--ink-2)}
.arqpanel .mk{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.arqpanel .brands{display:flex;flex-wrap:wrap;gap:8px}
.arqpanel .brands span{border:1px solid var(--rule);padding:7px 14px;font-size:17px;color:var(--ink-2);background:var(--paper-2)}

/* ═══════════════════════════════════════════════
   MÓDULO · Bestiario
   ═══════════════════════════════════════════════ */
.best{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:30px}
.beast{
  all:unset;cursor:pointer;border:1px solid var(--rule);background:var(--paper-2);
  padding:16px 10px;text-align:center;transition:all .2s;
}
.beast:hover{border-color:var(--accent)}
.beast[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.beast .an{font-family:var(--serif);font-size:22px;line-height:1.1;display:block;color:var(--ink)}
.beast .aq{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:9px;line-height:1.35}
.bestpanel{border-left:3px solid var(--accent);padding-left:26px;min-height:150px}
.bestpanel .h{font-family:var(--serif);font-size:34px;margin-bottom:12px}
.bestpanel .d{font-size:21px;line-height:1.5;color:var(--ink-2);max-width:44em}

/* ═══════════════════════════════════════════════
   MÓDULO · Ficha de arquetipo
   ═══════════════════════════════════════════════ */
.fbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.fbar .fill{flex:1}
.finput{
  padding:10px 14px;border:1px solid var(--rule);background:var(--paper-2);
  color:var(--ink);font-family:var(--sans);font-size:17px;
}
.finput::placeholder{color:var(--ink-3)}
.fprog{font-family:var(--mono);font-size:13px;color:var(--ink-3);letter-spacing:.08em}
.fprog b{color:var(--accent)}
.fsaved{font-family:var(--mono);font-size:12px;color:var(--ok);opacity:0;transition:opacity .3s;letter-spacing:.1em;text-transform:uppercase}
.fsaved.on{opacity:1}
.ficha{border:1px solid var(--rule);background:var(--paper-2);max-height:604px;overflow-y:auto}
.ficha::-webkit-scrollbar{width:7px}
.ficha::-webkit-scrollbar-thumb{background:var(--rule)}
.frow{display:grid;grid-template-columns:224px 1fr;border-bottom:1px solid var(--rule)}
.frow:last-child{border-bottom:none}
.frow .q{padding:13px 20px;border-right:1px solid var(--rule);background:var(--paper)}
.frow .q b{font-family:var(--serif);font-size:20px;line-height:1.18;color:var(--ink);display:block}
.frow .q span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px}
.frow textarea{
  width:100%;height:58px;border:none;outline:none;resize:none;background:transparent;
  color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.45;padding:13px 20px;
}
.frow textarea::placeholder{color:var(--ink-3);opacity:.75}
.frow textarea:focus{background:var(--accent-soft)}

/* ── HUD ─────────────────────────────────────── */
#hud{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;
  background:var(--paper);border:1px solid var(--rule);
  padding:6px;box-shadow:0 6px 24px rgba(0,0,0,.14);
  opacity:.28;transition:opacity .25s;z-index:50;
}
#hud:hover{opacity:1}
#hud button{
  all:unset;cursor:pointer;width:34px;height:30px;display:grid;place-items:center;
  color:var(--ink-2);font-size:15px;border-radius:2px;
}
#hud button:hover{background:var(--paper-2);color:var(--accent)}
#count{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding:0 12px;letter-spacing:.08em}
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:60;transition:width .3s ease}

/* ── Overview ────────────────────────────────── */
#ov{
  position:fixed;inset:0;background:var(--paper);z-index:80;
  padding:56px 64px;overflow-y:auto;display:none;
}
#ov.on{display:block}
#ov h2{font-size:40px;margin-bottom:8px}
#ov .hint{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-bottom:34px;letter-spacing:.1em;text-transform:uppercase}
#ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
#ovgrid button{
  all:unset;cursor:pointer;border:1px solid var(--rule);background:var(--paper-2);
  padding:18px 20px;transition:all .18s;min-height:104px;display:flex;flex-direction:column;
}
#ovgrid button:hover{border-color:var(--accent);background:var(--accent-soft)}
#ovgrid button.cur{border-color:var(--accent);border-width:2px}
#ovgrid .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.14em;margin-bottom:10px}
#ovgrid .t{font-family:var(--serif);font-size:20px;line-height:1.2;color:var(--ink)}

/* ── Ayuda ───────────────────────────────────── */
#help{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;
  display:none;place-items:center;backdrop-filter:blur(3px);
}
#help.on{display:grid}
#help .box{background:var(--paper);padding:44px 52px;max-width:600px;border:1px solid var(--rule)}
#help h3{margin-bottom:22px}
#help dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;align-items:baseline}
#help dt{font-family:var(--mono);font-size:13px;background:var(--paper-2);border:1px solid var(--rule);padding:4px 10px;color:var(--ink);white-space:nowrap}
#help dd{font-size:17px;color:var(--ink-2)}

/* ── Impresión ───────────────────────────────── */
#printArea{display:none}
@media print{
  body{overflow:visible;background:#fff}
  #hud,#prog,#ov,#help,#viewport{display:none!important}
  #printArea{display:block;padding:14mm;font-family:Georgia,"Times New Roman",serif;color:#000}
  #printArea h1{font-size:18pt;margin-bottom:4mm}
  #printArea .ph{font-size:10pt;color:#444;margin-bottom:7mm}
  #printArea .ph span{display:inline-block;border-bottom:1px solid #999;min-width:60mm;margin-left:3mm}
  #printArea table{width:100%;border-collapse:collapse;font-size:10pt}
  #printArea th,#printArea td{border:1px solid #666;padding:3mm;vertical-align:top;text-align:left}
  #printArea td:first-child{width:30%;font-weight:bold;background:#f4f4f4}
  #printArea .pf{margin-top:8mm;font-size:9pt;color:#444}
  @page{margin:0}
}






















/* ── cierre de los paneles ──
   Iba solo con Esc, y en pantalla táctil no hay Esc. El botón va DENTRO del
   panel, como en las de IEL: en la esquina del marco se veía suelto y no se
   leía como parte de lo que cierra. El color no puede salir de currentColor
   —en el SAT el contenedor es casi negro y el blanco lo ponen sus hijos—,
   así que lo fija el guion mirando el fondo real. */
.cl-x{
  position:absolute;top:18px;right:20px;z-index:5;
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  font:inherit;font-size:23px;line-height:1;
  background:transparent;border:1.5px solid currentColor;opacity:.85;
}
.cl-x:hover{opacity:1;background:rgba(128,128,128,.2)}
.cl-x:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:2px}
@media print{.cl-x{display:none!important}}








/* El aviso de pantalla ancha. La clase se llama .tiny y no otra cosa: es la
   que oculta vertical.css al recomponer, y con otro nombre se quedaría puesto
   sobre una lámina que ya no es de pantalla ancha. */
.tiny{
  display:none;position:fixed;inset:auto 0 62px 0;z-index:700;
  text-align:center;padding:0 20px;font-size:14px;line-height:1.4;
  opacity:.66;pointer-events:none;
}
@media (max-width:640px) and (orientation:portrait){.tiny{display:block}}
@media print{.tiny{display:none!important}}



/* 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}}

/* 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)}

/* ════════════════════════════════════════════════════════════
   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 > #stage,
.slide > .slide,
.slide > /* ── Cabecera corriente ──────────────────────── */ .run,
.slide > .folio,
.slide > /* ── cierre de los paneles ── Iba solo con Esc,
.slide > y en pantalla táctil no hay Esc. El botón va DENTRO del panel,
.slide > como en las de IEL: en la esquina del marco se veía suelto y no se leía como parte de lo que cierra. El color no puede salir de currentColor —en el SAT el contenedor es casi negro y el blanco lo ponen sus hijos—,
.slide > así que lo fija el guion mirando el fondo real. */ .cl-x{position:static}
}

/* Lo que no se puede partir, con desplazamiento propio. */
@media (max-aspect-ratio:1/1){
.slide #help dt{max-width:100%;overflow-x:auto}
}

/* Rejillas de esta presentacion, a una columna. */
@media (max-aspect-ratio:1/1){
.slide .c2,
.slide .c2u,
.slide .c2w,
.slide .c3,
.slide /* ── Índice ──────────────────────────────────── */ .toc,
.slide .toc button,
.slide .layer,
.slide /* ── Bibliografía ────────────────────────────── */ .bib,
.slide /* ═══════════════════════════════════════════════ MÓDULO · Puente conceptual (tres autores) ═══════════════════════════════════════════════ */ .bridge,
.slide /* ═══════════════════════════════════════════════ MÓDULO · Cinco dimensiones de Aaker ═══════════════════════════════════════════════ */ .dims,
.slide /* ═══════════════════════════════════════════════ MÓDULO · Doce arquetipos ═══════════════════════════════════════════════ */ .arq,
.slide .arqpanel,
.slide /* ═══════════════════════════════════════════════ MÓDULO · Bestiario ═══════════════════════════════════════════════ */ .best,
.slide .frow,
.slide #ovgrid,
.slide #help dl{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */