/*!
 * IDENTIDAD · Fundamentos del color para la identidad
 * (c) 2026 Elisa Espinoza Castillo - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-IDENT-COLOR-2026-7DE6
 */
:root{/* ─────────────────────────────────────────────
   SISTEMA
   ───────────────────────────────────────────── */
  --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;
  --tablero:conic-gradient(#D9D6CF 25%,#FFFFFF 0 50%,#D9D6CF 0 75%,#FFFFFF 0) 0 0/26px 26px;
}
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;
}

#viewport{/* ── Escenario 16:9 escalado ─────────────────── */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}}

.run{/* ── Cabecera corriente ──────────────────────── */
  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;
}

.eyebrow{/* ── Tipografía ──────────────────────────────── */
  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}
h2.m{font-size:50px}
.noventa{font-family:var(--serif);font-size:150px;line-height:.9;color:var(--accent);letter-spacing:-.03em}
.noventa span{font-size:.26em;letter-spacing:0;color:var(--ink);margin-left:12px}
.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;font-family:var(--sans)}

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

.pista{/* La pista va donde hay algo que tocar y en segunda persona. */
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;line-height:1.5;
  color:var(--accent);margin:12px 0 16px;
}
.pista::before{content:"→ "}

.cover{/* ── Portada ─────────────────────────────────── */justify-content:space-between;padding:96px 110px}
.cover .izq{max-width:760px;position:relative;z-index:2}
.cover h1{font-size:128px;letter-spacing:-.035em}
h1.cierre{font-size:112px}
.cover .sub{font-family:var(--serif);font-size:40px;line-height:1.15;color:var(--ink-2);margin-top:20px}
.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;max-width:900px;position:relative;z-index:2}
.credit .who{font-family:var(--serif);font-size:29px;line-height:1.3}
.credit > .small{flex:none}

.abanico{/* ── Abanico de fichas, en 3D ────────────────── */
  position:absolute;right:140px;top:96px;width:560px;height:700px;
  perspective:1900px;z-index:1;
}
.abanico .giro{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(16deg) rotateY(-20deg) rotateZ(-7deg);
}
.hoja{
  position:absolute;left:50%;bottom:34px;width:136px;height:560px;margin-left:-68px;
  transform-origin:50% 92%;
  background:#FFFFFF;border-radius:9px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 16px 34px rgba(23,20,15,.18);
  transform:rotate(var(--r)) translateZ(var(--z));
  animation:abrir 1.15s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:var(--d);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.hoja i{
  position:absolute;left:9px;right:9px;top:9px;height:430px;border-radius:5px;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--c) 28%,#fff) 0 16.66%,
    color-mix(in srgb,var(--c) 52%,#fff) 0 33.33%,
    color-mix(in srgb,var(--c) 78%,#fff) 0 50%,
    var(--c) 0 66.66%,
    color-mix(in srgb,var(--c) 78%,#000) 0 83.33%,
    color-mix(in srgb,var(--c) 58%,#000) 0 100%);
}
.hoja i::after{
  content:"";position:absolute;inset:0;border-radius:5px;
  background:repeating-linear-gradient(to bottom,transparent 0 69.67px,#fff 69.67px 71.67px);
}
.hoja b{position:absolute;left:14px;right:10px;top:452px;font-family:var(--serif);font-weight:400;font-size:20px;color:#17140F}
.hoja span{position:absolute;left:14px;top:480px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#6B6358}
.abanico:hover .hoja{transform:rotate(calc(var(--r) * 1.28)) translateZ(var(--z))}
.perno{
  position:absolute;left:50%;bottom:64px;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#8a857c,#1b1a18 70%);
  box-shadow:0 2px 5px rgba(0,0,0,.4);transform:translateZ(30px);
}
@keyframes abrir{from{transform:rotate(0deg) translateZ(var(--z))}}

.muestra{/* ── Fichas de color: el motivo de la presentación ── */
  display:flex;flex-direction:column;background:#FFFFFF;min-width:0;
  border:1px solid rgba(23,20,15,.12);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(23,20,15,.07);
}
.muestra i{display:block;flex:1;min-height:70px;background:var(--c,#ccc)}
.muestra.alfa i{background:linear-gradient(var(--c),var(--c)),var(--tablero)}
.muestra b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.15;color:#17140F;padding:10px 12px 3px}
.muestra span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6B6358;padding:0 12px 11px}

.card{/* ── Tarjetas y botones ──────────────────────── */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;text-transform:uppercase}
.card p{font-size:19px;line-height:1.5}
.why{
  border-left:3px solid var(--accent);padding-left:20px;
  font-size:21px;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[aria-pressed="true"]{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)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.botonera{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.salida{font-size:21px;line-height:1.5;color:var(--ink);min-height:3em}

.icono{/* El veredicto va con icono, no con rótulo: palomita en verde, tache en rojo. */
  width:30px;height:30px;border-radius:50%;flex:none;
  display:inline-grid;place-items:center;
  color:#FFFFFF;font-family:var(--sans);font-size:17px;font-weight:700;line-height:1;
}
.icono.si{background:#157A4C}
.icono.no{background:#C2394A}
.veredicto{display:flex;align-items:center;gap:14px;font-size:20px;line-height:1.45;color:var(--ink);min-height:2.9em}

.toc{/* ── Índice ──────────────────────────────────── */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:27px;line-height:1.2}
.toc .sub{display:block;font-family:var(--sans);font-size:16px;color:var(--ink-3);margin-top:4px}

table{/* ── Tabla ───────────────────────────────────── */border-collapse:collapse;width:100%;font-size:19px}
th,td{text-align:left;padding:14px 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:23px;color:var(--ink);width:34%}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--paper-2)}

.chain{/* ── Cadena y capas ──────────────────────────── */display:flex;align-items:stretch;gap:0}
.chain div{
  flex:1;border:1px solid var(--rule);border-right:none;background:var(--paper-2);
  padding:22px 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:25px;line-height:1.15;color:var(--ink)}
.chain div.mark{background:var(--accent-soft);border-color:var(--accent)}
.layers{display:grid;gap:10px}
.layer{
  display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;
  border-left:4px solid var(--rule);padding:16px 0 16px 28px;transition:border-color .25s;
}
.layer:hover{border-left-color:var(--accent)}
.layer .lname{font-family:var(--serif);font-size:30px}
.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}

.riel{/* ── Rieles de los deslizadores ──────────────── */
  position:relative;height:34px;border-radius:17px;background:var(--g,var(--paper-2));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.riel.tab{background:var(--g),var(--tablero)}
.rango{
  -webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:34px;
  background:transparent;margin:0;cursor:pointer;border-radius:17px;
}
.rango::-webkit-slider-runnable-track{height:34px;background:transparent;border-radius:17px}
.rango::-moz-range-track{height:34px;background:transparent}
.rango::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;margin-top:2px;border-radius:50%;
  background:#FFFFFF;border:3px solid #17140F;box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.rango::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#FFFFFF;border:3px solid #17140F}
.rango:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.dicc{/* ═══════════════════════════════════════════════
   MÓDULO · Diccionario vivo
   ═══════════════════════════════════════════════ */display:grid;grid-template-columns:220px 430px 1fr;gap:46px;align-items:start}
.terminos{display:grid;gap:8px}
.terminos button{
  all:unset;cursor:pointer;padding:11px 16px;border:1px solid var(--rule);background:var(--paper-2);
  font-family:var(--serif);font-size:23px;color:var(--ink);transition:all .18s;
}
.terminos button:hover{border-color:var(--accent);color:var(--accent)}
.terminos button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.terminos button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dmuestra{height:330px;border-radius:8px;overflow:hidden;background:var(--tablero);box-shadow:0 10px 30px rgba(23,20,15,.14);margin-bottom:18px}
.dmuestra i{display:block;height:100%;background:var(--dc,#C0392B);transition:background .12s}
.dnom{font-family:var(--serif);font-size:46px;line-height:1.05;margin-bottom:14px}
.ddef{font-size:22px;line-height:1.5;color:var(--ink-2)}
.dcod{margin-top:18px;font-family:var(--mono);font-size:15px;color:var(--ink-3);letter-spacing:.06em}

.prisma{/* ── El color es luz ─────────────────────────── */background:#121110;border-radius:10px;padding:26px 28px 22px}
.prisma svg{display:block;width:100%;height:auto}
.espectro{margin-top:18px;position:relative;padding-bottom:26px}
.espectro i{display:block;height:26px;border-radius:3px;
  background:linear-gradient(to right,#6A00A8 0%,#3A1CFF 9%,#0050FF 21%,#00B4FF 33%,#00D873 45%,#8FE000 55%,#FFE600 64%,#FF9A00 74%,#FF2A00 87%,#9E0000 100%)}
.espectro span{position:absolute;bottom:0;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:#BDB6A8}
.espectro span:last-child{right:0}

.banda{/* ── Láminas con banda de fotografía ─────────── */position:absolute;top:0;bottom:0;overflow:hidden;background:#1C1B19;margin:0}
.banda img{display:block;width:100%;height:100%;object-fit:cover}
.banda.izq{left:0;width:var(--banda)}
.banda.der{right:0;width:var(--banda)}
.velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.86) 0%,rgba(8,8,8,.45) 50%,rgba(8,8,8,0) 78%)}
.banda .pie{position:absolute;left:50px;right:46px;bottom:64px;color:#F4F1EA}
.banda .pie .mono{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#E9B8AE;margin-bottom:12px}
.banda .pie p{font-family:var(--serif);font-size:27px;line-height:1.32;color:#F4F1EA}
.con-banda-izq{padding-left:calc(var(--banda) + 72px)}
.con-banda-izq .run,.con-banda-izq .folio{left:calc(var(--banda) + 72px)}
.con-banda-der{padding-right:calc(var(--banda) + 72px)}
.con-banda-der .run,.con-banda-der .folio{right:calc(var(--banda) + 72px)}

.lecturas{/* ── Los colores son información ─────────────── */list-style:none;margin-top:30px;display:grid;gap:16px}
.lecturas li{display:grid;grid-template-columns:170px 1fr;gap:4px 22px;align-items:center}
.lecturas i{grid-row:span 2;height:46px;border-radius:23px;background:var(--g)}
.lecturas b{font-family:var(--serif);font-weight:400;font-size:25px;color:var(--ink);line-height:1.1}
.lecturas span{font-size:18px;line-height:1.4;color:var(--ink-2)}

.albers{/* ═══════════════════════════════════════════════
   MÓDULO · Albers
   ═══════════════════════════════════════════════ */display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:4px 0 46px}
.fondo{position:relative;height:320px;border-radius:4px;background:var(--f);transition:background .7s ease,box-shadow .7s ease}
.fondo i{position:absolute;left:50%;top:50%;width:128px;height:128px;margin:-64px 0 0 -64px;background:var(--m)}
.fondo code{position:absolute;left:0;right:0;bottom:-32px;text-align:center;font-family:var(--mono);font-size:15px;color:var(--ink-2);opacity:0;transition:opacity .5s}
.albers.sin .fondo{background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.albers.sin .fondo code{opacity:1}

.trece{/* ── Heller ──────────────────────────────────── */display:grid;grid-template-columns:repeat(13,1fr);gap:9px;margin-top:30px}
.trece .muestra i{min-height:96px}
.trece .muestra b{font-size:16px;padding:8px 9px 9px}

.collage{/* ── Collage ─────────────────────────────────── */
  display:grid;gap:8px;background:var(--paper);
  grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1.15fr 1.15fr;
}
.collage img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.collage .a1{grid-column:1/3}.collage .a2{grid-column:3/5}.collage .a3{grid-column:5/7}
.collage .a4{grid-column:1/4;grid-row:2}.collage .a5{grid-column:1/4;grid-row:3}
.collage .a6{grid-column:4/7;grid-row:2/4}

.pestanas{/* ═══════════════════════════════════════════════
   MÓDULO · El mismo color, tres lecturas
   ═══════════════════════════════════════════════ */display:flex;gap:8px;margin-bottom:22px}
.pestanas button{
  all:unset;cursor:pointer;padding:11px 24px;border:1px solid var(--rule);
  font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  transition:all .18s;
}
.pestanas button:hover{border-color:var(--accent);color:var(--accent)}
.pestanas button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pestanas button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lectura{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:26px;align-items:stretch}
.lectura[hidden]{display:none}
.pieza{margin:0;display:flex;flex-direction:column;gap:12px}
.pieza .escena{height:320px;border:1px solid var(--rule);background:var(--paper-2);display:grid;place-items:center;position:relative;overflow:hidden}
.pieza figcaption{font-size:17px;line-height:1.4;color:var(--ink-3)}
.pieza figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink)}
.lectura .texto{align-self:center;font-size:22px;line-height:1.5;color:var(--ink-2);border-left:3px solid var(--accent);padding-left:22px}
.invit{width:196px;height:268px;background:#FBFAF6;box-shadow:0 12px 26px rgba(23,20,15,.16);display:grid;place-items:center;outline:1px solid #E4DFD3;outline-offset:-12px}
.invit svg{width:92px;height:92px}
.frasco{position:relative;width:170px;height:238px}
.frasco .tapa{position:absolute;left:22px;right:22px;top:0;height:34px;border-radius:6px 6px 3px 3px;background:#2E8B57}
.frasco .cuerpo{position:absolute;left:0;right:0;top:30px;bottom:0;border-radius:26px;background:linear-gradient(90deg,#E9E4D6,#F8F5EC 40%,#E3DDCD)}
.frasco .etiq{position:absolute;left:0;right:0;top:92px;height:92px;background:#2E8B57;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:22px;font-style:italic}
.frasco .etiq svg{position:absolute;top:12px;left:50%;width:28px;height:28px;margin-left:-14px}
.frasco .etiq span{margin-top:26px}
.tarjeta{width:300px;height:189px;border-radius:14px;background:#2E8B57;position:relative;box-shadow:0 14px 28px rgba(23,20,15,.22);overflow:hidden}
.tarjeta::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1)}
.tarjeta .chip{position:absolute;left:26px;top:58px;width:44px;height:34px;border-radius:6px;background:linear-gradient(135deg,#E8D08A,#B9974A)}
.tarjeta .num{position:absolute;left:26px;bottom:40px;font-family:var(--mono);font-size:17px;letter-spacing:.12em;color:rgba(255,255,255,.92)}
.tarjeta .ban{position:absolute;left:26px;top:22px;font-family:var(--serif);font-size:18px;color:#fff}
.compo{width:250px;height:280px;position:relative;background:#1F4FA3;overflow:hidden;box-shadow:0 12px 26px rgba(23,20,15,.18)}
.compo.naranja i:nth-child(1){position:absolute;right:-40px;top:34px;width:180px;height:180px;border-radius:50%;background:#FF7A1A}
.compo.naranja i:nth-child(2){position:absolute;left:24px;bottom:34px;width:120px;height:18px;background:#FF7A1A}
.compo.naranja i:nth-child(3){position:absolute;left:24px;bottom:66px;width:160px;height:30px;background:#FFFFFF}
.compo.gris i:nth-child(1){position:absolute;left:24px;top:30px;width:202px;height:120px;background:#A7ADB5}
.compo.gris i:nth-child(2){position:absolute;left:24px;bottom:66px;width:160px;height:16px;background:#FFFFFF}
.compo.gris i:nth-child(3){position:absolute;left:24px;bottom:38px;width:110px;height:12px;background:#A7ADB5}

.gen{/* ═══════════════════════════════════════════════
   MÓDULO · Del adjetivo a la paleta
   ═══════════════════════════════════════════════ */display:grid;grid-template-columns:500px 1fr;gap:60px;align-items:start}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.presets button{
  all:unset;cursor:pointer;padding:9px 16px;border:1px solid var(--rule);border-radius:999px;
  font-family:var(--serif);font-size:20px;color:var(--ink);transition:all .18s;
}
.presets button:hover{border-color:var(--accent);color:var(--accent)}
.presets button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.presets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.adj{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-2);min-height:1.5em;margin-bottom:22px}
.escala{margin-bottom:22px}
.escala .polos{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.paleta{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:12px;height:380px}
.paleta .muestra i{min-height:0}
.paleta .muestra b,.gchips .muestra b{font-size:17px}
.lec{margin-top:24px;font-family:var(--serif);font-size:29px;line-height:1.3;color:var(--ink)}

.roles{/* ── La paleta es un sistema ─────────────────── */display:grid;gap:14px}
.rol{display:grid;grid-template-columns:46px 1fr;gap:20px;align-items:start}
.rol i{width:46px;height:46px;border-radius:50%;background:var(--c,#ccc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);margin-top:4px}
.rol b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);margin-bottom:2px}
.rol p{font-size:18px;line-height:1.45}
.mosaico{
  display:grid;height:470px;gap:6px;border-radius:6px;overflow:hidden;
  grid-template-columns:3fr 1.25fr;grid-template-rows:2.6fr 1fr .55fr;
  grid-template-areas:"n1 p" "n1 s" "n2 a";
  box-shadow:0 12px 30px rgba(23,20,15,.14);
}
.mosaico i{display:flex;align-items:flex-end;padding:12px 14px;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

.modos{/* ═══════════════════════════════════════════════
   MÓDULO · Jerarquizada o plana
   ═══════════════════════════════════════════════ */display:flex;gap:10px;margin-bottom:18px}
.modos button{
  all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 20px 8px 10px;
  border:1px solid var(--rule);border-radius:999px;font-family:var(--serif);font-size:21px;color:var(--ink);transition:all .18s;
}
.modos button:hover{border-color:var(--ink)}
.modos button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper-2)}
.modos button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aplica{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:center}
.cartel{position:relative;height:340px;background:var(--x-fondo);box-shadow:0 12px 28px rgba(23,20,15,.16);transition:background .4s}
.cartel .logo{position:absolute;left:24px;top:24px;width:44px;height:44px;border-radius:50%;background:var(--x-logo);transition:background .4s}
.cartel .img{position:absolute;left:24px;right:24px;top:86px;height:118px;background:var(--x-img);transition:background .4s}
.cartel .tit{position:absolute;left:24px;top:222px;width:170px;height:16px;background:var(--x-tit);transition:background .4s}
.cartel .tit.b{top:246px;width:120px}
.cartel .btnm{position:absolute;left:24px;bottom:24px;padding:8px 16px;font-family:var(--sans);font-size:13px;font-weight:600;background:var(--x-btn);color:var(--x-btntx);transition:background .4s,color .4s}
.web{position:relative;height:300px;background:var(--x-fondo);box-shadow:0 12px 28px rgba(23,20,15,.16);overflow:hidden;transition:background .4s}
.web .nav{position:absolute;left:0;right:0;top:0;height:46px;background:var(--x-nav);display:flex;align-items:center;gap:18px;padding:0 20px;transition:background .4s}
.web .nav i{width:24px;height:24px;border-radius:50%;background:var(--x-logo);margin-right:auto;transition:background .4s}
.web .nav span{width:44px;height:8px;background:var(--x-navtx);opacity:.55;transition:background .4s}
.web .nav b{padding:6px 12px;font-family:var(--sans);font-size:11px;font-weight:600;background:var(--x-btn);color:var(--x-btntx);transition:background .4s,color .4s}
.web .hero{position:absolute;left:0;right:0;top:46px;height:130px;background:var(--x-hero);padding:26px 24px;transition:background .4s}
.web .hero i{display:block;width:260px;height:16px;background:var(--x-herotx);margin-bottom:10px;transition:background .4s}
.web .hero i.b{width:180px}
.web .hero b{display:inline-block;margin-top:6px;padding:7px 14px;font-family:var(--sans);font-size:11px;font-weight:600;background:var(--x-btn);color:var(--x-btntx);transition:background .4s,color .4s}
.web .tarjs{position:absolute;left:24px;right:24px;bottom:22px;height:88px;display:flex;gap:14px}
.web .tarjs i{flex:1;background:var(--x-t1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:background .4s}
.web .tarjs i:nth-child(2){background:var(--x-t2)}
.web .tarjs i:nth-child(3){background:var(--x-t3)}

.contraste{/* ═══════════════════════════════════════════════
   MÓDULO · Prueba de contraste
   ═══════════════════════════════════════════════ */display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.ctl{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px;margin-bottom:14px}
.ctl > span{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fila-m{display:flex;gap:10px;flex-wrap:wrap}
.fila-m button{
  all:unset;cursor:pointer;width:46px;height:46px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);transition:transform .15s;
}
.fila-m button:hover{transform:scale(1.08)}
.fila-m button[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:3px}
.fila-m button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.criterios{list-style:none;margin-top:18px}
.criterios li{display:flex;align-items:center;gap:14px;font-size:19px;padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.criterios li span:last-child{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--ink-3)}
.prueba{border-radius:8px;padding:34px 38px;background:var(--fb);color:var(--ft);min-height:392px;box-shadow:0 12px 30px rgba(23,20,15,.14);transition:background .3s,color .3s}
.prueba .razon{font-family:var(--serif);font-size:88px;line-height:1;letter-spacing:-.02em}
.prueba .razon small{font-size:.4em;letter-spacing:0;margin-left:6px}
.prueba .g{font-family:var(--serif);font-size:34px;line-height:1.15;margin:26px 0 12px;color:inherit}
.prueba .n{font-size:18px;line-height:1.5;max-width:30em;color:inherit}

.herr{/* ── Herramientas ────────────────────────────── */display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.herr a{
  display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);background:var(--paper-2);
  padding:24px 26px;transition:border-color .18s,background .18s;
}
.herr a:hover,.herr a:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}
.herr b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;color:var(--ink);margin-bottom:8px}
.herr span{display:block;font-size:19px;line-height:1.5;color:var(--ink-2)}
.herr code{display:block;margin-top:12px;font-family:var(--mono);font-size:14px;color:var(--accent);letter-spacing:.04em}

.sintesis{/* ═══════════════════════════════════════════════
   MÓDULO · Luz y tinta
   ═══════════════════════════════════════════════ */display:grid;grid-template-columns:1fr 1fr;gap:34px}
.sintesis figure{margin:0}
.mezcla{position:relative;height:350px;border-radius:8px;overflow:hidden;isolation:isolate}
.mezcla.luz{background:#050505}
.mezcla.tinta{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--rule)}
.mezcla b{position:absolute;width:196px;height:196px;border-radius:50%;transition:opacity .35s ease}
.luz b{mix-blend-mode:screen}
.tinta b{mix-blend-mode:multiply}
.mezcla b.apagado{opacity:0}
.mezcla .r,.mezcla .c{left:50%;top:28px;margin-left:-98px}
.mezcla .g,.mezcla .m{left:50%;top:132px;margin-left:-158px}
.mezcla .b,.mezcla .y{left:50%;top:132px;margin-left:-38px}
.mezcla .r{background:#FF0000}.mezcla .g{background:#00FF00}.mezcla .b{background:#0000FF}
.mezcla .c{background:#28A0DC}.mezcla .m{background:#DC2882}.mezcla .y{background:#FFE628}
.mezcla .k{left:50%;top:124px;width:74px;height:74px;margin-left:-37px;background:#141414}
.canales{display:flex;gap:8px;margin:14px 0 12px}
.canales button{
  all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;padding:8px 14px;border:1px solid var(--rule);
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);transition:all .18s;
}
.canales button i{width:14px;height:14px;border-radius:50%;background:var(--c);opacity:.35;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.canales button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.canales button[aria-pressed="true"] i{opacity:1}
.canales button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sintesis figcaption{font-size:18px;line-height:1.5;color:var(--ink-2)}
.sintesis figcaption b{color:var(--ink)}

.lupas{/* ── Lupas: tinta en puntos, luz en subpíxeles ── */display:flex;gap:34px;align-items:flex-start;justify-content:center}
.lupas figure{margin:0;text-align:center}
.lupa{width:250px;height:250px;border-radius:50%;box-shadow:0 0 0 10px var(--paper-2),0 0 0 11px var(--rule),0 16px 34px rgba(23,20,15,.2)}
.lupa.lejos{background:#F2811D}
.lupa.puntos{
  background-color:#FFFFFF;
  background-image:radial-gradient(circle,#E6007E 0 34%,transparent 36%),radial-gradient(circle,#FFE600 0 46%,transparent 48%);
  background-size:24px 24px,24px 24px;background-position:0 0,12px 12px;background-blend-mode:multiply;
}
.lupa.pixeles{
  background-color:#000;
  background-image:
    linear-gradient(to bottom,transparent 0 84%,#000 84% 100%),
    linear-gradient(to right,#FF1E0F 0 29%,transparent 29% 34%,#0E7A21 34% 63%,transparent 63% 68%,#0A1440 68% 97%,transparent 97%);
  background-size:30px 30px,30px 30px;
}
.lupas figcaption{margin-top:22px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);max-width:250px;line-height:1.5}
.letras{font-family:var(--serif);font-size:150px;line-height:.9;letter-spacing:.02em;margin-bottom:26px}
.puntos-l{list-style:none;display:grid;gap:14px}
.puntos-l li{font-size:21px;line-height:1.5;color:var(--ink-2);padding-left:22px;position:relative}
.puntos-l li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}

.degradado{/* ═══════════════════════════════════════════════
   MÓDULO · Escala de grises
   ═══════════════════════════════════════════════ */height:46px;border-radius:4px;background:linear-gradient(to right,#1E1C1A,#F6F6F4)}
.pasos{display:grid;grid-template-columns:repeat(11,1fr);gap:5px;margin-top:8px}
.pasos i{display:block;height:46px}
.gpal{display:grid;grid-template-columns:330px 1fr;gap:40px;align-items:center;margin-top:30px}
.gchips{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:12px;height:210px}
.gchips .muestra i{transition:background .45s ease}

.guias{/* ── Pantone ─────────────────────────────────── */display:grid;grid-template-columns:1fr 1fr;gap:26px}
.guia{margin:0;text-align:center}
.guia .caja{position:relative;height:430px;perspective:1400px}
.guia .gira{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(12deg) rotateY(-14deg)}
.guia .h{
  position:absolute;left:50%;bottom:26px;width:100px;height:390px;margin-left:-50px;transform-origin:50% 90%;
  background:#FFFFFF;border-radius:7px;box-shadow:0 10px 24px rgba(23,20,15,.18);
  transform:rotate(var(--r)) translateZ(var(--z));
}
.guia .h i{position:absolute;left:7px;right:7px;top:7px;height:300px;border-radius:4px;background:var(--c)}
.guia .h b{position:absolute;left:10px;top:318px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;color:#17140F}
.guia.u .h i{filter:saturate(.68) brightness(.95) contrast(.94)}
.guia.u .h i::after{
  content:"";position:absolute;inset:0;border-radius:4px;opacity:.5;mix-blend-mode:multiply;
  background:repeating-radial-gradient(circle at 30% 40%,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
}
.guia figcaption{margin-top:8px;font-family:var(--serif);font-size:24px;color:var(--ink)}
.guia figcaption span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

.hsb{/* ═══════════════════════════════════════════════
   MÓDULO · HSB: un color, cinco nombres
   ═══════════════════════════════════════════════ */display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:start}
.mando{margin-bottom:20px}
.mando label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.mando label b{color:var(--ink);font-weight:600;letter-spacing:.04em}
.hsbmuestra{height:230px;border-radius:8px;overflow:hidden;background:var(--tablero);box-shadow:0 10px 30px rgba(23,20,15,.14)}
.hsbmuestra i{display:block;height:100%;background:var(--hc,#C0392B)}
.notas{margin-top:20px;display:grid;grid-template-columns:70px 1fr;gap:9px 18px;align-items:baseline}
.notas dt{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.notas dd{font-family:var(--mono);font-size:18px;color:var(--ink)}

.hexa{/* ── Hexadecimal ─────────────────────────────── */display:flex;align-items:flex-start;gap:18px;margin:10px 0 36px}
.hexa .gato{font-family:var(--mono);font-size:118px;line-height:1;color:var(--ink-3)}
.hexa .par{font-family:var(--mono);font-size:118px;line-height:1;color:var(--ink);border-bottom:10px solid var(--c);padding-bottom:10px;text-align:center}
.hexa .par small{display:block;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}
.hexa .res{width:150px;height:150px;border-radius:50%;margin-left:30px;box-shadow:0 12px 26px rgba(23,20,15,.2);align-self:center}
.ejemplos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;height:190px}

.fbar{/* ═══════════════════════════════════════════════
   MÓDULO · Ficha de manual
   ═══════════════════════════════════════════════ */display:flex;align-items:center;gap:10px;margin-bottom:16px;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:18px}
.finput::placeholder{color:var(--ink-3)}
.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}
.manual{background:#FFFFFF;border:1px solid rgba(23,20,15,.12);padding:26px 28px 28px;box-shadow:0 12px 30px rgba(23,20,15,.1)}
.mn-cab{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #D8D0BF;padding-bottom:12px;margin-bottom:20px}
.mn-cab span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8C8377}
.mn-cab b{font-family:var(--serif);font-weight:400;font-size:30px;color:#17140F}
.specs{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:14px}
.spec{border:1px solid #E4DFD3;min-width:0}
.spec .c{position:relative;height:150px;background:var(--c)}
.spec .c label{
  position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.9);color:#17140F;padding:5px 8px;border-radius:3px;
}
.spec .c input{width:18px;height:18px;border:0;padding:0;background:none;cursor:pointer}
.spec .c label:focus-within{outline:2px solid #17140F;outline-offset:1px}
.spec b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;color:#17140F;padding:12px 14px 6px}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;padding:0 14px 14px;font-family:var(--mono);font-size:12.5px}
.spec dt{color:#8C8377}
.spec dd{color:#17140F;overflow-wrap:anywhere}

.apa p{/* ── Fuentes en APA 7 ────────────────────────── */font-size:19px;line-height:1.5;color:var(--ink-2);padding-left:2.2em;text-indent:-2.2em;margin-bottom:10px;overflow-wrap:anywhere}
.apa i{font-style:italic}
.creditos{margin-top:22px;border-top:1px solid var(--rule);padding-top:16px}
.creditos p{font-size:16px;line-height:1.5;color:var(--ink-3);margin-bottom:6px;overflow-wrap:anywhere}

.abanico.chico{/* ── Cierre: la paleta en abanico ────────────── */right:170px;top:150px;width:460px;height:600px}
.abanico.chico .hoja{height:470px;width:122px;margin-left:-61px}
.abanico.chico .hoja i{height:360px}
.abanico.chico .hoja b{top:380px;font-size:18px}
.abanico.chico .hoja span{top:406px}
.abanico.chico .hoja i::after{background:repeating-linear-gradient(to bottom,transparent 0 58px,#fff 58px 60px)}

#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}

#ov{/* ── Overview ────────────────────────────────── */
  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)}

#help{/* ── Ayuda ───────────────────────────────────── */
  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:620px;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)}

.cl-x{/* ── 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. */
  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}

.tiny{/* 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. */
  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 (prefers-reduced-motion:reduce){
  .hoja{animation:none;transition:none}
  .slide.on{animation:none}
}

/* ── En vertical ─────────────────────────────── */
@media (max-aspect-ratio:1/1){
  #stage .slide .abanico{position:relative!important;inset:auto!important;width:100%!important;height:400px;margin:10px 0 0}
  #stage .slide .abanico .giro{position:absolute!important;inset:0!important;transform:scale(.52) rotateX(12deg) rotateY(-14deg);transform-origin:50% 100%}
  #stage .slide .abanico.chico{height:360px}
  #stage .slide.cover .sub{font-size:22px}
  #stage .slide.cover .eyebrow{margin-bottom:14px!important}
  #stage .slide .credit{flex-direction:column;align-items:flex-start;gap:8px}
  #stage .slide .credit > .small{flex:initial;text-align:left!important}
  #stage .slide .credit .who{font-size:22px}
  #stage .slide .banda{position:relative!important;inset:auto!important;width:100%!important;height:300px;margin:0 0 20px}
  #stage .slide .banda .pie{position:absolute!important;bottom:22px;left:20px;right:20px}
  #stage .slide .banda .pie p{font-size:19px}
  #stage .slide.con-banda-izq,#stage .slide.con-banda-der{padding-left:22px;padding-right:22px}
  #stage .slide .banda.collage{height:auto;grid-template-columns:1fr 1fr!important;grid-template-rows:none;grid-auto-rows:150px}
  #stage .slide .collage img{grid-column:auto!important;grid-row:auto!important}
  #stage .slide .dnom{font-size:30px}
  #stage .slide .noventa{font-size:84px}
  #stage .slide .prueba{min-height:0}
  #stage .slide .prueba .razon{font-size:56px}
  #stage .slide .lec{font-size:22px}
  #stage .slide .paleta,#stage .slide .gchips,#stage .slide .ejemplos{height:auto}
  #stage .slide .paleta .muestra i,#stage .slide .gchips .muestra i,#stage .slide .ejemplos .muestra i{min-height:90px}
  #stage .slide .trece{grid-template-columns:repeat(4,1fr)!important}
  #stage .slide .specs{grid-template-columns:1fr 1fr!important}
  #stage .slide .hexa{flex-wrap:wrap}
  #stage .slide .hexa .gato,#stage .slide .hexa .par{font-size:56px}
  #stage .slide .letras{font-size:84px}
  #stage .slide .lupa{width:150px;height:150px}
  #stage .slide .mezcla{height:330px}
}

#printArea{/* ── Impresión ─────────────────────────────────
   Cada lámina en su hoja, a escala. La ficha de color, cuando se pide
   desde su botón, sale sola. */display:none}
.papel{display:none}
@media print{
  @page{size:landscape;margin:8mm}
  html,body{height:auto;overflow:visible;background:#fff}
  #hud,#prog,#ov,#help,.tiny,.cl-x{display:none!important}
  #viewport{position:static;display:block}
  #stage{position:static;margin:0;transform:none!important;width:1600px;height:auto;box-shadow:none;overflow:visible;zoom:.62}
  .slide{display:flex!important;position:relative;inset:auto;width:1600px;height:900px;break-after:page;page-break-after:always;animation:none!important;overflow:hidden}
  .papel{display:block}
  .hoja{animation:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.solo-ficha #viewport{display:none!important}
  body.solo-ficha #printArea{display:block;padding:12mm;font-family:Georgia,"Times New Roman",serif;color:#000}
  #printArea h1{font-size:20pt;margin-bottom:2mm;font-weight:400}
  #printArea .ph{font-size:10pt;color:#444;margin-bottom:7mm}
  #printArea table{width:100%;border-collapse:collapse;font-size:10pt}
  #printArea th,#printArea td{border:1px solid #888;padding:3mm;vertical-align:top;text-align:left}
  #printArea td:first-child{width:22mm;padding:0}
  #printArea td:first-child i{display:block;height:22mm}
  #printArea .pf{margin-top:8mm;font-size:9pt;color:#444}
}

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

/* ════════════════════════════════════════════════════════════
   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 > .run,
.slide > .folio,
.slide > .abanico,
.slide > .abanico .giro,
.slide > .hoja,
.slide > .hoja i,
.slide > .hoja i::after,
.slide > .hoja b,
.slide > .hoja span,
.slide > .perno,
.slide > .rango,
.slide > .espectro span,
.slide > .banda,
.slide > .velo,
.slide > .banda .pie,
.slide > .fondo i,
.slide > .fondo code,
.slide > .frasco .tapa,
.slide > .frasco .cuerpo,
.slide > .frasco .etiq,
.slide > .frasco .etiq svg,
.slide > .tarjeta::before,
.slide > .tarjeta .chip,
.slide > .tarjeta .num,
.slide > .tarjeta .ban,
.slide > .compo.naranja i:nth-child(1),
.slide > .compo.naranja i:nth-child(2),
.slide > .compo.naranja i:nth-child(3),
.slide > .compo.gris i:nth-child(1),
.slide > .compo.gris i:nth-child(2),
.slide > .compo.gris i:nth-child(3),
.slide > .cartel .logo,
.slide > .cartel .img,
.slide > .cartel .tit,
.slide > .cartel .btnm,
.slide > .web .nav,
.slide > .web .hero,
.slide > .web .tarjs,
.slide > .mezcla b,
.slide > .puntos-l li::before,
.slide > .guia .gira,
.slide > .guia .h,
.slide > .guia .h i,
.slide > .guia .h b,
.slide > .guia.u .h i::after,
.slide > .spec .c label,
.slide > .cl-x,
.slide > #stage .slide .abanico .giro,
.slide > #stage .slide .banda .pie{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 .toc,
.slide .toc button,
.slide .layer,
.slide .dicc,
.slide .lecturas li,
.slide .albers,
.slide .trece,
.slide .collage,
.slide .lectura,
.slide .gen,
.slide .paleta,
.slide .rol,
.slide .mosaico,
.slide .aplica,
.slide .contraste,
.slide .ctl,
.slide .herr,
.slide .sintesis,
.slide .pasos,
.slide .gpal,
.slide .gchips,
.slide .guias,
.slide .hsb,
.slide .notas,
.slide .ejemplos,
.slide .specs,
.slide .spec dl,
.slide #ovgrid,
.slide #help dl,
.slide #stage .slide .banda.collage,
.slide #stage .slide .trece,
.slide #stage .slide .specs{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */