/*!
 * PLÁTICAS · SAT para diseñadores: mitos y realidades
 * (c) 2026 Elisa Espinoza Castillo - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-PLAT-SAT-2026-7A3E
 */
/* ─────────────────────────────────────────────
   SISTEMA · SAT para diseñadores
   (c) 2026 CodeLibri — Elisa Espinoza Castillo

   La paleta y el trazo salen del cartel de la plática
   (propuesta-A-sketch): lavanda de fondo, tinta casi negra,
   magenta de la cinta, amarillo de marcador y cian del subrayado.
   Los códigos están copiados del SVG, no aproximados.
   ───────────────────────────────────────────── */
:root{
  --paper:#E3E3FF;        /* lavanda del cartel */
  --paper-2:#CFCEF0;      /* fuera del escenario, un tono abajo */
  --card:#FFFFFF;
  --ink:#191423;          /* el trazo negro del dibujo */
  --ink-2:#3B2A63;
  --ink-3:#6F6B96;
  --rule:#B9B2C6;
  --accent:#E6106E;       /* magenta de la cinta y los asteriscos */
  --accent-2:#FF448C;
  --accent-soft:#FF9EC6;
  --violet:#6C55F6;       /* el violeta de CodeLibri */
  --violet-2:#615BEF;
  --marca:#FFD233;        /* el marcador amarillo tras «SAT» */
  --marca-2:#FFE15C;
  --cyan:#7FE3F5;
  --ok:#1F8A5B;
  --ok-soft:#D4F0E2;
  --mal:#C0245F;
  --mal-soft:#FFDDE9;
  --sans:"Poppins","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SFMono-Regular",ui-monospace,"Courier New",monospace;
}
html[data-theme="dark"]{
  --paper:#16132B;
  --paper-2:#0E0C1B;
  --card:#221E3D;
  --ink:#EDEBFA;
  --ink-2:#C7C1E6;
  --ink-3:#928CB8;
  --rule:#3A3560;
  --accent:#FF4E92;
  --accent-2:#FF7FB0;
  --accent-soft:#5A1B3C;
  --violet:#9E8CFF;
  --violet-2:#8B78FF;
  --marca:#E0A91A;
  --marca-2:#C08F12;
  --cyan:#4FB9CC;
  --ok:#6FD8A6;
  --ok-soft:#173A2C;
  --mal:#FF8FB0;
  --mal-soft:#43152A;
}
*{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, en casi cualquier ventana— la
     especificacion manda que ese centrado degrade a alineacion al inicio,
     para no dejar overflow inalcanzable. El lienzo quedaba en (0,0) y se
     escalaba desde su centro, asi que se veia empujado abajo y a la
     derecha, con el pie cortado. */
  position:absolute;left:50%;top:50%;margin:-450px 0 0 -800px;
  transform-origin:center center;
  background:var(--paper);
  box-shadow:0 24px 80px rgba(25,20,35,.30);
  overflow:hidden;
}
html[data-theme="dark"] #stage{box-shadow:0 24px 80px rgba(0,0,0,.6)}

/* El marco a mano alzada del cartel. Va aquí y no en cada lámina
   para que sea el mismo trazo en todas y no baile al pasar. */
#stage::before{
  content:"";position:absolute;inset:22px;pointer-events:none;z-index:6;
  border:3px solid var(--ink);
  border-radius:180px 24px 200px 24px/24px 190px 24px 180px;
  opacity:.55;
}

.slide{
  position:absolute;inset:0;
  padding:88px 118px 92px;
  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}}

/* ── El trazo a mano ──────────────────────────
   Todo el cartel está dibujado con línea temblorosa. En pantalla
   se consigue con radios asimétricos: cada esquina lleva dos
   medidas distintas, así que ningún borde sale recto ni el arco
   se repite. Es una sola clase reutilizada; las variantes solo
   cambian el patrón para que dos cajas vecinas no salgan iguales. */
.tz{border:3px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px}
.tz-b{border-radius:15px 225px 15px 255px/225px 15px 255px 15px}
.tz-c{border-radius:120px 18px 140px 20px/20px 130px 18px 125px}
.tz-fina{border-width:2px}

/* ── Cabecera y pie corrientes ───────────────── */
.run{
  position:absolute;top:44px;left:118px;right:118px;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.run b{color:var(--accent);font-weight:600}
.folio{
  position:absolute;bottom:40px;left:118px;right:118px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:13px;color:var(--ink-3);letter-spacing:.1em;
}

/* El cuerpo se centra entre la cabecera y el pie, que van absolutos.
   Sin esto el contenido se pega arriba y las láminas cortas quedan
   descolgadas. */
.body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.eyebrow{
  font-family:var(--mono);font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}

/* ── Tipografía ──────────────────────────────── */
h1{font-size:96px;font-weight:800;letter-spacing:-.035em;line-height:1.02}
h2{font-size:58px;font-weight:800;letter-spacing:-.028em;line-height:1.08}
h3{font-size:30px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
p{font-size:25px;line-height:1.5;color:var(--ink-2);max-width:66ch}
.lead{font-size:29px;line-height:1.45;color:var(--ink-2);max-width:60ch}
.chica{font-size:20px;line-height:1.45;color:var(--ink-3)}
strong{font-weight:700;color:var(--ink)}
em{font-style:normal;color:var(--accent);font-weight:600}
a{color:var(--violet);text-decoration:none;border-bottom:2px solid var(--cyan)}

/* El marcador amarillo que el cartel pone detrás de «SAT». El trazo
   va por debajo del texto y desbordado, como un plumón de verdad. */
.marca{position:relative;display:inline-block}
.marca::before{
  content:"";position:absolute;z-index:-1;
  left:-.14em;right:-.14em;top:.14em;bottom:.06em;
  background:var(--marca);transform:rotate(-1.1deg);
  border-radius:60px 8px 50px 10px/10px 55px 8px 60px;
}
/* Subrayado de plumón, el del cartel bajo «Mitos y realidades». */
.sub-cyan{box-shadow:inset 0 -.22em 0 var(--cyan)}

/* Los asteriscos sueltos que el cartel reparte por el fondo. */
.aster{position:absolute;color:var(--accent);font-size:54px;line-height:1;
       font-weight:400;pointer-events:none;user-select:none;opacity:.9}

/* ── Cajas ───────────────────────────────────── */
.tarjeta{background:var(--card);padding:30px 34px}
.nota{
  background:var(--marca-2);padding:24px 30px;font-size:23px;line-height:1.45;
  color:var(--ink);max-width:74ch;
}
html[data-theme="dark"] .nota{background:rgba(224,169,26,.16)}

/* ── Revelado por fragmentos ─────────────────── */
.frag{opacity:0;transform:translateY(10px);transition:opacity .34s ease,transform .34s ease}
.frag.shown{opacity:1;transform:none}

/* ─────────────────────────────────────────────
   PORTADA
   ───────────────────────────────────────────── */
.cover{justify-content:center;align-items:flex-start}
.cinta{
  display:inline-block;background:var(--accent);color:#fff;
  font-size:22px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 30px;transform:rotate(-1.2deg);
  border-radius:40px 8px 44px 8px/8px 42px 8px 40px;
}
.cover h1{margin-top:34px}
.cover .quien{
  margin-top:52px;font-size:26px;color:var(--ink-2);
  display:flex;align-items:center;gap:18px;
}
.cover .quien b{font-weight:700;color:var(--violet)}

/* ─────────────────────────────────────────────
   INTERACTIVO 01 · ¿Qué te trajo hasta aquí?
   Nueve casillas. Al marcar cualquiera aparece el remate: todas
   desembocan en el mismo trámite. El texto del remate cambia según
   cuántas lleve marcadas, para que no diga lo mismo con una que
   con siete.
   ───────────────────────────────────────────── */
#quieros{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.quiero{
  display:flex;align-items:center;gap:14px;cursor:pointer;text-align:left;
  background:var(--card);padding:20px 22px;font:inherit;font-size:21px;
  color:var(--ink-2);border:3px solid var(--ink);
  border-radius:120px 16px 130px 16px/16px 125px 16px 120px;
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.quiero:hover{transform:translateY(-2px)}
.quiero .box{
  width:30px;height:30px;flex:none;border:3px solid var(--ink);
  border-radius:40px 6px 44px 6px/6px 42px 6px 40px;
  display:grid;place-items:center;font-size:20px;font-weight:800;color:transparent;
}
.quiero.si{background:var(--accent-soft);color:var(--ink)}
html[data-theme="dark"] .quiero.si{background:var(--accent-soft);color:var(--ink)}
.quiero.si .box{background:var(--accent);border-color:var(--accent);color:#fff}
#quierofin{
  margin-top:28px;min-height:96px;font-size:26px;line-height:1.4;color:var(--ink-2);
  background:var(--card);padding:24px 30px;border:3px solid var(--ink);
  border-radius:15px 225px 15px 255px/225px 15px 255px 15px;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;
}
#quierofin.on{opacity:1;transform:none}
#quierofin b{color:var(--accent)}

/* ─────────────────────────────────────────────
   INTERACTIVO 02 · A dónde va tu dinero
   Las partidas del documento, pulsables. Cada una explica en qué
   se traduce, para que «impuestos» deje de ser una palabra suelta.
   ───────────────────────────────────────────── */
#gasto{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;max-width:1100px}
.part{
  cursor:pointer;font:inherit;font-size:22px;font-weight:600;color:var(--ink);
  background:var(--card);padding:16px 26px;border:3px solid var(--ink);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  transition:transform .16s ease,background .16s ease;
}
.part:hover{transform:translateY(-2px)}
.part.on{background:var(--cyan)}
#gastodet{
  margin-top:30px;min-height:120px;background:var(--card);
  padding:26px 32px;border:3px solid var(--ink);
  border-radius:15px 225px 15px 255px/225px 15px 255px 15px;
}
#gastodet .t{font-size:27px;font-weight:800;color:var(--accent);margin-bottom:8px}
#gastodet p{font-size:23px;max-width:78ch}

/* ─────────────────────────────────────────────
   INTERACTIVO 03 · Qué régimen me toca
   Cuatro situaciones. Al elegir una sale su régimen con lo que
   implica. Junta las láminas 5 y 7 del documento, que decían lo
   mismo por separado.
   ───────────────────────────────────────────── */
#casos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.caso{
  cursor:pointer;font:inherit;text-align:left;background:var(--card);
  padding:22px 24px;border:3px solid var(--ink);
  border-radius:120px 18px 140px 20px/20px 130px 18px 125px;
  transition:transform .16s ease,background .16s ease;
}
.caso:hover{transform:translateY(-3px)}
.caso.on{background:var(--marca)}
.caso .n{font-family:var(--mono);font-size:15px;color:var(--accent);letter-spacing:.14em;display:block}
.caso .t{font-size:22px;font-weight:700;color:var(--ink);display:block;margin-top:6px;line-height:1.25}
#casodet{
  margin-top:26px;display:grid;grid-template-columns:300px 1fr;gap:0;
  background:var(--card);border:3px solid var(--ink);min-height:250px;
  border-radius:15px 225px 15px 255px/225px 15px 255px 15px;overflow:hidden;
}
#casodet .reg{
  background:var(--violet);color:#fff;padding:28px 26px;display:flex;
  flex-direction:column;justify-content:center;
}
#casodet .reg .et{font-family:var(--mono);font-size:14px;letter-spacing:.16em;opacity:.85}
#casodet .reg .nm{font-size:34px;font-weight:800;line-height:1.1;margin-top:8px}
#casodet .cuerpo{padding:26px 32px}
#casodet ul{list-style:none;display:grid;gap:12px}
#casodet li{font-size:22px;line-height:1.4;color:var(--ink-2);padding-left:32px;position:relative}
#casodet li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}

/* ─────────────────────────────────────────────
   INTERACTIVO 04 · Mitos y realidades
   Doce tarjetas que se voltean. El mito al frente y la realidad
   detrás, para que el grupo pueda votar antes de descubrir.
   ───────────────────────────────────────────── */
/* Seis por lámina y no doce: repartidos en dos láminas caben a tres
   columnas en vez de cuatro, y con el doble de alto. Eso permite subir
   el cuerpo de 17 a 25 px y ponerlo en negrita, que a doce era
   ilegible desde el fondo del auditorio. */
.mitos{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:268px;
  gap:20px;margin-top:22px;
}
.mito{perspective:1200px;background:none;border:0;padding:0;cursor:pointer;font:inherit;display:block;height:100%}
/* display:block en la cara no es adorno: es un <span>, y en línea no
   acepta alto ni ancho, así que las doce tarjetas se colapsaban a un
   cuadrito de texto ilegible. */
.mito .cara{
  display:block;position:relative;width:100%;height:100%;
  transition:transform .55s cubic-bezier(.3,.8,.3,1);transform-style:preserve-3d;
}
.mito.abierta .cara{transform:rotateY(180deg)}
.mito .f,.mito .r{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;align-items:center;text-align:left;
  padding:22px 26px;border:3px solid var(--ink);
  border-radius:110px 16px 120px 16px/16px 115px 16px 110px;
  font-size:25px;font-weight:700;line-height:1.28;overflow:hidden;
}
.mito .f{background:var(--card);color:var(--ink-2)}
.mito .r{background:var(--ok-soft);color:var(--ink);transform:rotateY(180deg)}
.mito .et{
  position:absolute;top:18px;left:28px;font-family:var(--mono);
  font-size:14px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
}
.mito .f .et{color:var(--mal)}
.mito .r .et{color:var(--ok)}
.mito .tx{margin-top:22px}
.mito:hover .cara{transform:translateY(-3px)}
.mito.abierta:hover .cara{transform:rotateY(180deg) translateY(3px)}
.mitocuenta{margin-top:20px;font-family:var(--mono);font-size:18px;color:var(--ink-3);letter-spacing:.08em}
.mitocuenta b{color:var(--accent)}

/* ─────────────────────────────────────────────
   INTERACTIVO 05 · Bruto y neto
   Un monto que se mueve con la barra y se reparte en lo que
   retienen y lo que llega. Las tasas son las del documento; para
   el cálculo de verdad está la calculadora que ya tienen.
   ───────────────────────────────────────────── */
#bn{display:grid;grid-template-columns:1fr 420px;gap:40px;margin-top:24px;align-items:start}
#bn .modos{display:flex;gap:12px;margin-bottom:22px}
.modo{
  cursor:pointer;font:inherit;font-size:20px;font-weight:600;color:var(--ink-2);
  background:var(--card);padding:14px 24px;border:3px solid var(--ink);
  border-radius:120px 16px 130px 16px/16px 125px 16px 120px;
}
.modo.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#bn label{display:block;font-family:var(--mono);font-size:15px;letter-spacing:.14em;
          text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
/* La barra, dibujada a mano como todo lo demás. El control nativo se
   veía como una raya gris de 8 px con un cuadrito negro encima: en una
   proyección no se distinguía que aquello se arrastraba. Hay que pintar
   carril y tirador por separado, y por duplicado, porque WebKit y Gecko
   no comparten los seudoelementos.

   El relleno lo lleva --llenado, que el guion pone en cada movimiento:
   un input de rango no sabe pintar por sí solo la parte recorrida. */
#bnmonto{
  -webkit-appearance:none;appearance:none;
  width:100%;height:28px;background:transparent;cursor:pointer;margin:4px 0 0;
}
#bnmonto:focus{outline:none}
#bnmonto:focus-visible{outline:3px solid var(--violet);outline-offset:5px}

#bnmonto::-webkit-slider-runnable-track{
  height:24px;border:3px solid var(--ink);
  border-radius:40px 8px 44px 8px/8px 42px 8px 40px;
  background:linear-gradient(to right,
    var(--cyan) var(--llenado,50%), var(--card) var(--llenado,50%));
}
#bnmonto::-moz-range-track{
  height:24px;border:3px solid var(--ink);
  border-radius:40px 8px 44px 8px/8px 42px 8px 40px;
  background:linear-gradient(to right,
    var(--cyan) var(--llenado,50%), var(--card) var(--llenado,50%));
}

/* El tirador: magenta, grande y con su sombra dura, para que se lea
   como una pieza que se agarra y no como una marca sobre la barra. */
#bnmonto::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:46px;height:46px;margin-top:-14px;
  background:var(--accent);border:3px solid var(--ink);
  border-radius:52% 46% 50% 48%/48% 52% 46% 54%;
  box-shadow:0 4px 0 var(--ink);
}
#bnmonto::-moz-range-thumb{
  width:46px;height:46px;
  background:var(--accent);border:3px solid var(--ink);
  border-radius:52% 46% 50% 48%/48% 52% 46% 54%;
  box-shadow:0 4px 0 var(--ink);
}
#bnmonto:active::-webkit-slider-thumb{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}
#bnmonto:active::-moz-range-thumb{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}
#bncifra{font-size:52px;font-weight:800;letter-spacing:-.03em;margin:6px 0 26px}
.barra{height:64px;display:flex;border:3px solid var(--ink);overflow:hidden;
       border-radius:60px 10px 66px 10px/10px 62px 10px 60px}
.barra span{display:flex;align-items:center;justify-content:center;
            font-size:17px;font-weight:700;color:var(--ink);transition:flex-basis .3s ease}
.barra .neto{background:var(--cyan)}
.barra .ret{background:var(--accent-soft)}
#bndesglose{display:grid;gap:14px}
.fila{display:flex;justify-content:space-between;align-items:baseline;
      border-bottom:2px dashed var(--rule);padding-bottom:12px}
.fila .k{font-size:21px;color:var(--ink-2)}
.fila .v{font-size:26px;font-weight:700;font-family:var(--mono)}
.fila.total .k{font-weight:700;color:var(--ink)}
.fila.total .v{color:var(--ok);font-size:32px}
.fila.total{border-bottom:0}
#bnnota{margin-top:18px;font-size:18px;line-height:1.4;color:var(--ink-3)}

/* ── Rejillas de contenido corriente ─────────── */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:26px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.pasos{display:grid;gap:18px;margin-top:26px;max-width:1150px}
.paso{display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:start}
.paso .n{
  width:64px;height:64px;display:grid;place-items:center;
  background:var(--violet);color:#fff;font-size:28px;font-weight:800;
  border-radius:60px 10px 64px 10px/10px 62px 10px 60px;
}
.paso .c{padding-top:6px}
.paso h3{margin-bottom:6px}
.paso p{font-size:22px;max-width:none}

.lista{list-style:none;display:grid;gap:16px;margin-top:24px;max-width:1100px}
.lista li{font-size:24px;line-height:1.42;color:var(--ink-2);padding-left:42px;position:relative}
.lista li::before{
  content:"✳";position:absolute;left:0;top:-2px;color:var(--accent);font-size:26px;
}
.lista li b{color:var(--ink)}

/* ─────────────────────────────────────────────
   HUD, ÍNDICE Y AYUDA
   ───────────────────────────────────────────── */
#hud{
  position:fixed;right:18px;bottom:16px;display:flex;gap:8px;z-index:20;
  font-family:var(--mono);
}
#hud button{
  width:42px;height:42px;cursor:pointer;background:var(--card);color:var(--ink-2);
  border:2px solid var(--ink);font-size:17px;line-height:1;
  border-radius:40px 8px 44px 8px/8px 42px 8px 40px;
}
#hud button:hover{background:var(--marca);color:var(--ink)}
#prog{position:fixed;left:0;bottom:0;height:4px;background:var(--accent);z-index:21;transition:width .3s ease}

/* ── Impresión ──
   Sale la lámina que se esté viendo, sin cromo y en apaisado, que es la
   proporción del lienzo. El escenario deja de ser fijo y de escalarse:
   en papel no hay ventana a la que ajustarse. */
@media print{
  @page{size:landscape;margin:8mm}
  html,body{height:auto;overflow:visible;background:#fff}
  #hud,#prog,#ov,#help{display:none!important}

  /* Una A4 apaisada con 8 mm de margen deja unos 1062 x 733 px a 96 ppp.
     El lienzo sigue midiendo 1600 x 900 —las láminas están compuestas a
     esa medida y sin ella se solapan— y se escala 0.664 desde la esquina;
     el contenedor toma el tamaño ya escalado para que no sobre una hoja. */
  #viewport{position:static;display:block;width:1062px;height:733px;overflow:hidden}
  #stage{
    position:static;left:auto;top:auto;margin:0;
    width:1600px;height:900px;
    transform:scale(.664)!important;transform-origin:top left;
    box-shadow:none;border:0;
  }
}
#count{
  position:fixed;left:20px;bottom:16px;z-index:20;font-family:var(--mono);
  font-size:14px;color:var(--ink-3);letter-spacing:.12em;
}

#ov,#help{
  position:fixed;inset:0;z-index:30;background:rgba(25,20,35,.86);
  display:none;padding:60px 70px;overflow:auto;
}
#ov.on,#help.on{display:block}
#ov h4,#help h4{color:#fff;font-size:24px;margin-bottom:26px;letter-spacing:-.01em}
#ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
#ovgrid button{
  display:flex;gap:12px;align-items:baseline;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.16);
  color:#E7E4F5;padding:14px 16px;font:inherit;font-size:16px;line-height:1.3;
  border-radius:80px 12px 90px 12px/12px 85px 12px 80px;
}
#ovgrid button:hover{background:rgba(255,255,255,.14)}
#ovgrid button.cur{border-color:var(--accent-2);color:#fff}
#ovgrid .n{font-family:var(--mono);font-size:13px;color:var(--accent-2)}
#help dl{display:grid;grid-template-columns:110px 1fr;gap:14px 20px;color:#E7E4F5;font-size:18px;max-width:640px}
#help dt{font-family:var(--mono);color:var(--marca)}

@media (max-width:900px){
  #hud button{width:38px;height:38px;font-size:15px}
}
















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

/* ════════════════════════════════════════════════════════════
   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 > /* El marco a mano alzada del cartel. Va aquí y no en cada lámina para que sea el mismo trazo en todas y no baile al pasar. */ #stage::before,
.slide > .slide,
.slide > /* ── Cabecera y pie corrientes ───────────────── */ .run,
.slide > .folio,
.slide > .marca::before,
.slide > /* Los asteriscos sueltos que el cartel reparte por el fondo. */ .aster,
.slide > #casodet li::before,
.slide > .mito .f,
.slide > .mito .r,
.slide > .mito .et,
.slide > .lista li::before,
.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}
}

/* Rejillas de esta presentacion, a una columna. */
@media (max-aspect-ratio:1/1){
.slide /* ───────────────────────────────────────────── INTERACTIVO 01 · ¿Qué te trajo hasta aquí? Nueve casillas. Al marcar cualquiera aparece el remate: todas desembocan en el mismo trámite. El texto del remate cambia según cuántas lleve marcadas,
.slide para que no diga lo mismo con una que con siete. ───────────────────────────────────────────── */ #quieros,
.slide /* ───────────────────────────────────────────── INTERACTIVO 03 · Qué régimen me toca Cuatro situaciones. Al elegir una sale su régimen con lo que implica. Junta las láminas 5 y 7 del documento,
.slide que decían lo mismo por separado. ───────────────────────────────────────────── */ #casos,
.slide #casodet,
.slide /* ───────────────────────────────────────────── INTERACTIVO 04 · Mitos y realidades Doce tarjetas que se voltean. El mito al frente y la realidad detrás,
.slide para que el grupo pueda votar antes de descubrir. ───────────────────────────────────────────── */ /* Seis por lámina y no doce: repartidos en dos láminas caben a tres columnas en vez de cuatro,
.slide y con el doble de alto. Eso permite subir el cuerpo de 17 a 25 px y ponerlo en negrita,
.slide que a doce era ilegible desde el fondo del auditorio. */ .mitos,
.slide /* ───────────────────────────────────────────── INTERACTIVO 05 · Bruto y neto Un monto que se mueve con la barra y se reparte en lo que retienen y lo que llega. Las tasas son las del documento; para el cálculo de verdad está la calculadora que ya tienen. ───────────────────────────────────────────── */ #bn,
.slide /* ── Rejillas de contenido corriente ─────────── */ .dos,
.slide .tres,
.slide .paso,
.slide #ovgrid,
.slide #help dl{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */