/*!
 * IDENTIDAD · Signos identificadores
 * (c) 2026 Elisa Espinoza Castillo - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-IDENT-SIGNOS-2026-9217
 */
/* ─────────────────────────────────────────────
   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)}

.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}
.c3{grid-template-columns:repeat(3,1fr)}

/* ── Fragmentos revelados ────────────────────── */
.frag{opacity:0;transition:opacity .4s ease,transform .4s ease;transform:translateY(6px)}
.frag.shown{opacity:1;transform:none}

/* ── 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:150px;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}

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

/* ── Nombres: acordeón de tipos ──────────────── */
.types{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:32px}
.type{
  all:unset;cursor:pointer;padding:20px 16px;text-align:left;
  border:1px solid var(--rule);background:var(--paper-2);
  transition:all .2s ease;min-height:118px;
}
.type:hover{border-color:var(--accent)}
.type[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.type .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;opacity:.6;display:block;margin-bottom:10px}
.type .t{font-family:var(--serif);font-size:23px;line-height:1.1}
.typepanel{min-height:250px}
.typepanel .defn{font-size:23px;line-height:1.5;color:var(--ink-2);max-width:36em;margin-bottom:24px}
.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}
.why{
  border-left:3px solid var(--accent);padding-left:20px;
  font-size:19px;line-height:1.5;color:var(--ink-2);max-width:44em;
}

/* ── Quiz ────────────────────────────────────── */
.quiz{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.qword{font-family:var(--serif);font-size:78px;line-height:1;letter-spacing:-.02em}
.qmeta{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:18px}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qopt{
  all:unset;cursor:pointer;padding:16px 20px;border:1px solid var(--rule);
  background:var(--paper-2);font-size:19px;transition:all .18s;
}
.qopt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.qopt:disabled{cursor:default;opacity:.45}
.qopt.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);opacity:1;font-weight:600}
.qopt.wrong{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);opacity:1}
.qfeed{
  margin-top:24px;font-size:19px;line-height:1.5;color:var(--ink-2);
  border-left:3px solid var(--rule);padding-left:20px;min-height:88px;
}
.qfeed.live{border-color:var(--accent)}
.qbar{display:flex;justify-content:space-between;align-items:center;margin-top:26px;font-family:var(--mono);font-size:14px;color:var(--ink-3)}
.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)}

/* ── Voces tipográficas ──────────────────────── */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.voice{
  all:unset;cursor:pointer;border:1px solid var(--rule);background:var(--paper-2);
  padding:30px 22px;text-align:center;transition:all .2s;
}
.voice:hover{border-color:var(--accent)}
.voice[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.voice .w{font-size:44px;line-height:1;display:block;color:var(--ink)}
.voice .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:18px}
.v1 .w{font-family:"Bodoni MT","Didot",Didot,"Playfair Display",var(--serif);font-weight:400;letter-spacing:.06em}
.v2 .w{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.01em}
.v3 .w{font-family:"Rockwell","Roboto Slab","Courier New",serif;font-weight:700;letter-spacing:.01em}
.v4 .w{font-family:var(--mono);letter-spacing:.1em;font-size:38px}
.v5 .w{font-family:"Brush Script MT","Segoe Script","Bradley Hand",cursive;font-size:52px}
.v6 .w{font-family:"Haettenschweiler","Impact","Arial Narrow",sans-serif;letter-spacing:.02em;font-size:52px}

/* ── Marcas SVG ──────────────────────────────── */
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mark{
  all:unset;cursor:pointer;border:1px solid var(--rule);background:var(--paper-2);
  padding:22px 14px 18px;text-align:center;transition:all .2s;
}
.mark:hover{border-color:var(--accent)}
.mark svg{width:88px;height:88px;display:block;margin:0 auto;color:var(--ink);transition:color .3s}
.mark .name{
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  margin-top:16px;color:var(--ink-3);opacity:0;transition:opacity .3s;
}
.mark.revealed .name{opacity:1}
.mark.revealed svg{color:var(--accent)}

/* ── Taxonomía Wheeler ───────────────────────── */
.wtax{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:30px}
.wt{
  all:unset;cursor:pointer;border:1px solid var(--rule);background:var(--paper-2);
  padding:16px 10px;text-align:center;transition:all .2s;
}
.wt:hover{border-color:var(--accent)}
.wt[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.wt svg{width:52px;height:52px;margin:0 auto 12px;display:block;color:var(--ink)}
.wt[aria-selected="true"] svg{color:var(--accent)}
.wt .l{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;color:var(--ink-2)}

/* ── Nomenclatura ────────────────────────────── */
.nom{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}
.nomcard{
  all:unset;cursor:pointer;border:1px solid var(--rule);background:var(--paper-2);
  padding:24px 20px;transition:all .2s;
}
.nomcard:hover{border-color:var(--accent)}
.nomcard[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.nomdiag{height:96px;display:grid;place-items:center;margin-bottom:18px}
.nomdiag svg{height:74px;width:auto;color:var(--ink)}
.nomcard[aria-selected="true"] .nomdiag svg{color:var(--accent)}
.nomcard .h{font-family:var(--serif);font-size:25px;margin-bottom:6px}
.nomcard .d{font-size:15px;line-height:1.45;color:var(--ink-3)}

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

/* ── Criterios Wheeler ───────────────────────── */
.crit{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.crit>div{
  border:1px solid var(--rule);background:var(--paper-2);padding:22px 20px;
  transition:all .25s;cursor:default;
}
.crit>div:hover{border-color:var(--accent);transform:translateY(-3px)}
.crit .k{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.14em;margin-bottom:12px}
.crit .h{font-family:var(--serif);font-size:26px;margin-bottom:8px}
.crit .d{font-size:16px;line-height:1.45;color:var(--ink-3)}

/* ── Capas / síntesis ────────────────────────── */
.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}

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

/* ── 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;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:560px;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)}

@media print{
  body{overflow:visible;background:#fff}
  #hud,#prog,#ov,#help{display:none!important}
  #viewport{position:static;display:block}
  #stage{width:100%;height:auto;box-shadow:none;transform:none!important}
  .slide{display:flex!important;position:relative;page-break-after:always;height:900px}
  .frag{opacity:1!important;transform:none!important}
}







































/* ── 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 .c3,
.slide /* ── Índice ──────────────────────────────────── */ .toc,
.slide .toc button,
.slide /* ── Nombres: acordeón de tipos ──────────────── */ .types,
.slide /* ── Quiz ────────────────────────────────────── */ .quiz,
.slide .qopts,
.slide /* ── Voces tipográficas ──────────────────────── */ .voices,
.slide /* ── Marcas SVG ──────────────────────────────── */ .marks,
.slide /* ── Taxonomía Wheeler ───────────────────────── */ .wtax,
.slide /* ── Nomenclatura ────────────────────────────── */ .nom,
.slide /* ── Criterios Wheeler ───────────────────────── */ .crit,
.slide .layer,
.slide /* ── Bibliografía ────────────────────────────── */ .bib,
.slide #ovgrid,
.slide #help dl{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */