/*!
 * AEPI · CSS: selectores, cascada y modelo de caja
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-U23-2026-85B6
 */
/* ══════════════════════════════════════════════════════════
   TOKENS · MODO OSCURO (predeterminado)
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#07091a; --bg-2:#0c1028; --surface:#121737; --surface-2:#1a2049;
  --line:#2a3266; --line-soft:#1e2551;
  --txt:#f0f2ff; --txt-2:#a9b2df; --txt-3:#6f79ad;
  --accent:#41ead4; --accent-2:#7c6cff; --accent-3:#ff5d8f; --gold:#ffc94b;
  --ok:#3ddc84; --bad:#ff5f6d;
  --onaccent:#050a1c; --code-bg:#0a0e22; --glow:22%;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="light"]{
  --bg:#f1f4fb; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#e9edfa;
  --line:#c5cee6; --line-soft:#dde4f2;
  --txt:#0f1630; --txt-2:#414e77; --txt-3:#7581a6;
  --accent:#0b9683; --accent-2:#5647dd; --accent-3:#d13a68; --gold:#a97400;
  --ok:#12844a; --bad:#c22a44;
  --onaccent:#ffffff; --code-bg:#f6f8fd; --glow:11%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 6% -8%, color-mix(in srgb,var(--accent-2) var(--glow),transparent), transparent 60%),
    radial-gradient(760px 520px at 102% 4%, color-mix(in srgb,var(--accent) var(--glow),transparent), transparent 58%),
    radial-gradient(600px 400px at 50% 115%, color-mix(in srgb,var(--accent-3) var(--glow),transparent), transparent 60%);
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ══════════════ ESCENARIO ══════════════ */
.stage{position:fixed;inset:0;display:grid;place-items:center;z-index:1}
.deck{
  width:1280px;height:720px;transform-origin:center center;border-radius:8px;
  /* 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:-360px 0 0 -640px;
}
.slide{
  position:absolute;inset:0;padding:50px 66px 72px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .32s ease,transform .32s ease,visibility .32s;
  display:flex;flex-direction:column;
}
.slide.on{opacity:1;visibility:visible;transform:none}

/* ══════════════ CROMO ══════════════ */
.chrome{position:fixed;z-index:20}
.hud{
  left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 92%,transparent),transparent);
}
.hud-btn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface) 75%,transparent);
  color:var(--txt-2);font-size:15px;transition:.16s;
}
.hud-btn:hover{border-color:var(--accent);color:var(--txt);transform:translateY(-1px)}
.hud-btn[disabled]{opacity:.28;cursor:default;transform:none;border-color:var(--line-soft);color:var(--txt-3)}
.counter{font-family:var(--mono);font-size:12px;color:var(--txt-3);min-width:56px;text-align:center;letter-spacing:.05em}
.hud-title{
  flex:1;min-width:0;font-size:12px;color:var(--txt-3);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.railbar{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:21}
.railbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s}

.index{
  position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(8px);padding:40px 52px;overflow-y:auto;display:none;
}
.index.on{display:block}
.index h2{font-size:22px;margin-bottom:3px;letter-spacing:-.02em}
.index .sub{font-size:12.5px;color:var(--txt-3);margin-bottom:18px}
.idx-keys{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px;font-size:11.5px;color:var(--txt-3)}
.idx-keys kbd{
  display:inline-block;padding:1px 7px;border:1px solid var(--line);border-radius:5px;
  background:var(--surface);color:var(--txt-2);font-family:var(--mono);font-size:10.5px;margin-right:5px;
}
.idx-group{margin-bottom:20px}
.idx-group h3{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.idx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px}
.idx-list button{
  text-align:left;padding:9px 13px;border-radius:10px;border:1px solid var(--line-soft);
  background:var(--surface);color:var(--txt-2);font-size:13px;display:flex;gap:9px;transition:.14s;
}
.idx-list button:hover{border-color:var(--accent);color:var(--txt);transform:translateY(-1px)}
.idx-list button b{font-family:var(--mono);font-size:11px;color:var(--txt-3);flex:0 0 20px}
.idx-list button.now{border-color:var(--accent);background:var(--surface-2);color:var(--txt)}
.idx-close{position:absolute;top:16px;right:22px;font-size:22px;color:var(--txt-3);padding:6px 12px}

/* ══════════════ TIPOGRAFÍA ══════════════ */
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.slide h1{font-size:62px;line-height:1.02;letter-spacing:-.035em;font-weight:800;margin-bottom:18px}
.slide h2{font-size:38px;line-height:1.08;letter-spacing:-.03em;font-weight:800;margin-bottom:10px}
.slide h3{font-size:17px;font-weight:750;margin-bottom:8px;letter-spacing:-.01em}
.slide p{font-size:15.5px;color:var(--txt-2);max-width:80ch}
.slide p+p{margin-top:10px}
.lead{font-size:18px!important;color:var(--txt)!important;line-height:1.5}
.grad{background:linear-gradient(100deg,var(--accent) 10%,var(--accent-2) 60%,var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}
strong{color:var(--txt);font-weight:700}
em{color:var(--txt);font-style:italic}
.mono{font-family:var(--mono)}
.small{font-size:13px!important;color:var(--txt-3)!important}
.body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.exp{font-size:.66em;color:var(--txt-3);font-weight:400;font-style:normal;letter-spacing:0;line-height:1.35}
h2 .exp,h3 .exp{display:block;margin-top:5px}

/* ══════════════ COMPONENTES ══════════════ */
.cols{display:grid;gap:20px}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.c5{grid-template-columns:repeat(5,1fr)}
.c-55{grid-template-columns:1.15fr 1fr}
.c-46{grid-template-columns:.85fr 1.15fr}

.card{
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line-soft);border-radius:16px;padding:17px 19px;
}
.card h3{margin-bottom:6px}
.card p{font-size:13.5px}
.ico{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:10px;
  font-size:15px;font-weight:800;font-family:var(--mono);
  background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);
}
.ico.v{background:color-mix(in srgb,var(--accent-2) 22%,transparent);color:var(--accent-2)}
.ico.p{background:color-mix(in srgb,var(--accent-3) 20%,transparent);color:var(--accent-3)}
.ico.g{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}

.note{
  border-radius:14px;padding:14px 18px;border:1px solid var(--line);
  background:var(--surface-2);font-size:14px;color:var(--txt-2);
}
.note b{color:var(--txt)}
.note.acc{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.note.vio{border-color:color-mix(in srgb,var(--accent-2) 50%,var(--line))}
.note.gold{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.tag{
  display:inline-block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  padding:3px 8px;border-radius:6px;margin-right:8px;vertical-align:1px;
  background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);
}
.tag.v{background:color-mix(in srgb,var(--accent-2) 24%,transparent);color:var(--accent-2)}
.tag.g{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);font-weight:800}
td{color:var(--txt-2)}
td:first-child{color:var(--txt);font-weight:650}
tr:last-child td{border-bottom:none}

.chip{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  font-family:var(--mono);border:1px solid var(--line);color:var(--txt-2);
}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.chip.acc{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

.act{
  border:1px solid var(--line);background:var(--surface-2);color:var(--txt);
  border-radius:10px;padding:8px 16px;font-size:13px;font-weight:650;transition:.16s;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.act:hover{border-color:var(--accent);transform:translateY(-1px)}
.act.primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--onaccent);border-color:transparent;font-weight:750}
.act.primary:hover{filter:brightness(1.08)}
.act.sm{padding:5px 11px;font-size:11.5px;border-radius:8px}

.picker .opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
.pick{
  padding:8px 15px;border-radius:10px;border:1px solid var(--line-soft);background:var(--surface);
  color:var(--txt-2);font-size:13.5px;font-weight:650;transition:.15s;
}
.pick:hover{border-color:var(--accent);color:var(--txt)}
.pick.on{background:var(--surface-2);border-color:var(--accent);color:var(--txt)}
.panel{
  border:1px solid var(--line-soft);border-radius:14px;padding:15px 19px;background:var(--surface);min-height:112px;
}
.panel h4{font-size:15.5px;margin-bottom:5px;color:var(--txt)}
.panel p{font-size:13.5px}
.panel code{font-family:var(--mono);font-size:12.5px;color:var(--accent)}

/* ── Código ── */
pre,code{font-family:var(--mono)}
.code{
  background:var(--code-bg);border:1px solid var(--line-soft);border-radius:14px;
  padding:14px 17px;font-size:13px;line-height:1.75;color:var(--txt-2);overflow:auto;
}
.code .t{color:var(--accent-3)}      /* selector o etiqueta */
.code .at{color:var(--gold)}          /* propiedad o atributo */
.code .vl{color:var(--accent)}        /* valor */
.code .cm{color:var(--txt-3);font-style:italic}
.code .tx{color:var(--txt)}
.code .pk{color:var(--txt-3)}         /* llaves, dos puntos, punto y coma */

/* ── Laboratorio en vivo ── */
.lab{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lab.l3{grid-template-columns:.8fr 1fr 1.15fr}
.labcol{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--surface);min-height:0}
.labbar{
  display:flex;align-items:center;gap:9px;padding:7px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line-soft);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
}
.labbar b{flex:1;font-weight:700}
.labbar .dots{display:flex;gap:4px}
.labbar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.lab textarea{
  flex:1;width:100%;border:none;resize:none;outline:none;padding:12px 14px;
  background:var(--code-bg);color:var(--txt-2);font-family:var(--mono);font-size:12.5px;line-height:1.65;
  tab-size:2;
}
.lab .fixed{
  flex:1;overflow:auto;background:var(--code-bg);padding:12px 14px;
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--txt-3);white-space:pre;
}
.lab iframe{flex:1;width:100%;border:none;background:#fff}

/* ── Anatomía de la regla ── */
.anat{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:16px;padding:24px 18px 18px;text-align:center}
.anat .line{font-family:var(--mono);font-size:26px;white-space:nowrap;display:inline-flex;align-items:center}
.seg{padding:6px 3px;border-radius:7px;transition:.15s;cursor:pointer;border-bottom:2px solid transparent}
.seg:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.seg.on{background:color-mix(in srgb,var(--accent) 20%,transparent);border-bottom-color:var(--accent)}
.s1{color:var(--accent)}.s2{color:var(--accent-2)}.s3{color:var(--txt)}
.s4{color:var(--accent-3)}.s5{color:var(--gold)}.s6{color:var(--txt-3)}

/* ── Maqueta viva para selectores ── */
.demo{
  background:#fdfbf6;border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;
  font-family:Georgia,"Times New Roman",serif;color:#2c2a26;line-height:1.45;
}
.demo .d-head{background:#26221d;color:#f6f1e7;padding:10px 16px}
.demo .d-head h1{font-size:19px;font-weight:700;margin:0 0 5px;letter-spacing:-.01em;line-height:1.1}
.demo .d-head a{color:#e0b070;text-decoration:none;font-size:11.5px;margin-right:14px;font-family:var(--sans)}
.demo .d-head a.activo{color:#fdfbf6;border-bottom:1px solid #e0b070}
.demo .d-main{padding:12px 16px}
.demo .d-main h2{font-size:15px;margin:0 0 9px;font-weight:700;color:#8a5a1e}
.demo .pieza{border-left:2px solid #d8cfbe;padding:2px 0 2px 11px;margin-bottom:9px}
.demo .pieza h3{font-size:13px;margin:0 0 2px;font-weight:700;color:#2c2a26}
.demo .pieza p{font-size:11.5px;margin:0;color:#6b655b;max-width:none}
.demo .d-foot{background:#efe9dd;padding:7px 16px}
.demo .d-foot p{font-size:10.5px;color:#6b655b;margin:0;max-width:none;font-family:var(--sans)}
.sel-hit{outline:2px solid #ff5d8f;outline-offset:2px;background:rgba(255,93,143,.16);border-radius:3px}
.selbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.selbar .pick{font-family:var(--mono);font-size:12.5px;padding:6px 12px}
.selcount{font-family:var(--mono);font-size:12px;color:var(--accent);margin-left:auto;align-self:center}

/* ── Calculadora de especificidad ── */
.spec{display:grid;grid-template-columns:1fr 46px 1fr;gap:14px;align-items:center}
.spec-card{border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;background:var(--surface);transition:.2s}
.spec-card.gana{border-color:var(--accent);background:var(--surface-2)}
.spec-card select{
  width:100%;padding:8px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--code-bg);color:var(--txt);font-family:var(--mono);font-size:13.5px;
}
.triad{display:flex;gap:7px;margin-top:12px}
.triad div{
  flex:1;text-align:center;border-radius:10px;padding:7px 4px;border:1px solid var(--line-soft);background:var(--bg-2);
}
.triad b{display:block;font-family:var(--mono);font-size:21px;font-weight:800;color:var(--txt);line-height:1.1}
.triad span{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-top:3px}
.spec-vs{text-align:center;font-family:var(--mono);font-size:15px;color:var(--txt-3);font-weight:800}

/* ── Modelo de caja manipulable ── */
.bm-ctrl{display:grid;gap:11px}
.bm-row{display:grid;grid-template-columns:88px 1fr 46px;gap:10px;align-items:center;font-size:12.5px;color:var(--txt-2)}
.bm-row label{font-family:var(--mono);font-size:12px;color:var(--txt-2)}
.bm-row output{font-family:var(--mono);font-size:12px;color:var(--accent);text-align:right}
input[type=range]{width:100%;accent-color:var(--accent);height:18px}
.bm-stage{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:16px;padding:14px;display:grid;place-items:center;min-height:296px}
.bm-margin{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--gold) 16%,transparent) 0 6px,transparent 6px 12px);border:1px dashed color-mix(in srgb,var(--gold) 60%,transparent);border-radius:8px}
.bm-border{border-style:solid;border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-3) 16%,transparent)}
.bm-padding{background:color-mix(in srgb,var(--accent-3) 22%,transparent)}
.bm-content{
  background:color-mix(in srgb,var(--accent) 30%,transparent);border:1px solid var(--accent);
  height:64px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--txt);
}
.bm-key{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--txt-3);margin-top:10px;justify-content:center}
.bm-key i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ── Catálogo de propiedades ── */
.tagbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px;align-items:center}
.tsearch{
  flex:1;min-width:160px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--txt);font-family:inherit;font-size:13.5px;
}
.tsearch::placeholder{color:var(--txt-3)}
.tgrid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-height:206px;overflow-y:auto;padding-right:6px;
}
.tgrid::-webkit-scrollbar{width:6px}
.tgrid::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tcell{
  border:1px solid var(--line-soft);border-radius:10px;padding:8px 6px;background:var(--surface);
  font-family:var(--mono);font-size:12px;color:var(--txt-2);text-align:center;transition:.14s;
}
.tcell:hover{border-color:var(--accent);color:var(--txt);transform:translateY(-1px)}
.tcell.on{border-color:var(--accent);background:var(--surface-2);color:var(--accent);font-weight:700}

/* ── Comparación ── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs > div{border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;background:var(--surface)}
.vs .bad-b{border-color:color-mix(in srgb,var(--bad) 42%,transparent)}
.vs .ok-b{border-color:color-mix(in srgb,var(--ok) 42%,transparent)}

/* ── Muestras de color y tipografía ── */
.sw{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sw div{border-radius:12px;padding:12px 13px;border:1px solid var(--line-soft);min-height:86px;display:flex;flex-direction:column;justify-content:flex-end}
.sw b{font-family:var(--mono);font-size:12px;display:block;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sw small{font-size:10px;color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.unit{display:grid;gap:8px}
.unit .u-row{display:grid;grid-template-columns:74px 1fr;gap:11px;align-items:center}
.unit .u-row span{font-family:var(--mono);font-size:12px;color:var(--txt-3)}
.unit .u-bar{height:22px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));display:flex;align-items:center;padding-left:8px;font-size:10.5px;font-family:var(--mono);color:var(--onaccent);font-weight:700;min-width:20px}
.tipo{border:1px solid var(--line-soft);border-radius:14px;padding:15px 18px;background:var(--surface)}
.tipo .muestra{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px;color:var(--txt)}
.tipo .pila{font-family:var(--mono);font-size:11.5px;color:var(--txt-3)}

/* ── Portada ── */
.cover{justify-content:center}
.cover .badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);margin-bottom:24px;width:max-content;
}
.cover .badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.cover h1{font-size:76px;margin-bottom:20px}
.meta{display:flex;gap:34px;margin-top:32px;flex-wrap:wrap}
.meta div small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:5px}
.meta div b{font-size:14.5px;font-weight:700}

.road{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;margin-top:4px}
.road::before{
  content:"";position:absolute;top:32px;left:11%;right:11%;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));opacity:.5;
}
.stop{position:relative;text-align:center}
.stop .dot{
  width:64px;height:64px;border-radius:20px;margin:0 auto 13px;display:grid;place-items:center;
  font-size:23px;font-weight:800;font-family:var(--mono);position:relative;z-index:1;
  border:1px solid var(--line);background:var(--surface);
}
.stop.a .dot{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.stop.b .dot{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 55%,transparent);background:color-mix(in srgb,var(--accent-2) 14%,var(--surface))}
.stop.c .dot{color:var(--accent-3);border-color:color-mix(in srgb,var(--accent-3) 55%,transparent);background:color-mix(in srgb,var(--accent-3) 14%,var(--surface))}
.stop.now .dot{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-2) 20%,transparent)}
.stop h3{font-size:17px;margin-bottom:4px}
.stop p{font-size:13px;max-width:none;margin:0 auto}
.stop .when{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:8px;display:block}

.tiny{position:fixed;inset:auto 0 60px 0;text-align:center;font-size:11.5px;color:var(--txt-3);z-index:19;display:none;padding:0 20px}
/* Solo en vertical: incrustada en la ficha el marco es apaisado y estrecho,
   y ahí este aviso le pedía girar a quien ya estaba girado. */
@media (max-width:640px) and (orientation:portrait){.tiny{display:block}}




























/* ── papel ──
   Sin esto se imprime una sola lámina —la activa— y el resto sale en blanco:
   están superpuestas con position:absolute y opacity:0. */
@media print{
  html,body{height:auto;overflow:visible;background:#fff;color:#000}
  #stage,.stage{position:static}
  #deck,.deck{position:static;margin:0;transform:none!important;width:100%;height:auto;background:#fff}
  .slide{
    position:static;inset:auto;opacity:1!important;visibility:visible!important;
    height:auto;min-height:0;page-break-after:always;padding:22px 0;
  }
  .chrome,.hud,.railbar,.index,.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)}

/* ════════════════════════════════════════════════════════════
   AYUDA DE USO  ·  módulo compartido
   Vive en el cromo, nunca en la diapositiva: un botón en el HUD
   que abre el panel, y un aviso breve la primera vez que se abre
   la presentación en ese navegador.

   Los colores se toman de los tokens de cada presentación. Cada
   cadena de reserva prueba primero los nombres en inglés de las
   presentaciones antiguas y después los que usa el esqueleto del
   estándar, en español: sin eso, un mazo nuevo caía al #12161f de
   reserva con el color heredado, y en modo claro salía texto negro
   sobre panel negro.
   ════════════════════════════════════════════════════════════ */
#clf-ayuda-btn.clf-suelto{
  position:fixed;right:14px;bottom:58px;z-index:900;
  width:30px;height:30px;border-radius:50%;font-size:14px;line-height:1;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,transparent))));
  color:inherit;opacity:.55;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.4))))
}
#clf-ayuda-btn.clf-suelto:hover{opacity:1}

#clf-ayuda{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:rgba(7,10,16,.55);opacity:0;transition:opacity .18s ease
}
/* Imprescindible: el atributo hidden no puede con un display de autor, y
   sin esta regla la capa se queda encima de la lámina, invisible, robando
   cada clic de los módulos interactivos. */
#clf-ayuda[hidden]{display:none}
#clf-ayuda.on{opacity:1}
@media (prefers-reduced-motion:reduce){#clf-ayuda{transition:none}}

#clf-ayuda .clf-panel{
  position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;
  padding:26px 28px 24px;border-radius:10px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:14px;line-height:1.5;text-align:left
}
#clf-ayuda h2{
  font-size:17px;line-height:1.25;margin:0 0 4px;font-weight:700;
  color:var(--txt,var(--texto,inherit));letter-spacing:0
}
#clf-ayuda .clf-sub{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent,var(--acento,var(--gold,currentColor)));margin:0 0 14px
}
#clf-ayuda dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;align-items:baseline}
#clf-ayuda dt{white-space:nowrap;display:flex;gap:4px}
#clf-ayuda dd{margin:0;color:var(--txt-2,var(--texto-2,var(--dim,inherit)))}
#clf-ayuda .clf-pie{
  margin:16px 0 0;padding-top:14px;font-size:12.5px;
  border-top:1px solid var(--line-soft,var(--linea-suave,var(--line,var(--linea,rgba(127,127,127,.25)))));
  color:var(--txt-3,var(--texto-3,var(--dim,inherit)))
}
#clf-ayuda .clf-cerrar{
  position:absolute;top:10px;right:12px;font-size:20px;line-height:1;
  padding:4px 6px;opacity:.5;background:none;border:0;color:inherit;cursor:pointer
}
#clf-ayuda .clf-cerrar:hover{opacity:1}

#clf-ayuda kbd,#clf-onboard kbd{
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:11.5px;
  padding:2px 6px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.45))));
  background:var(--surface-2,var(--fondo-3,var(--bg-2,var(--bg2,transparent))));
  color:var(--txt,var(--texto,inherit))
}

/* aviso de la primera visita */
#clf-onboard{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  z-index:900;width:min(430px,calc(100vw - 32px));
  padding:14px 16px;border-radius:9px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:13px;line-height:1.45;
  opacity:0;transition:opacity .3s ease,transform .3s ease
}
#clf-onboard.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#clf-onboard{transition:none}}
#clf-onboard p{margin:0 0 4px}
#clf-onboard p:last-of-type{margin:0}
#clf-onboard .clf-acciones{display:flex;gap:14px;align-items:center;margin-top:12px}
#clf-onboard button{
  font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0
}
#clf-onboard .clf-ok{
  padding:5px 12px;border-radius:5px;font-weight:600;font-size:12.5px;
  background:var(--accent,var(--acento,var(--gold,currentColor)));
  color:var(--onaccent,var(--bg,var(--fondo,#fff)))
}
#clf-onboard .clf-todo{font-size:12.5px;opacity:.7;text-decoration:underline}
#clf-onboard .clf-todo:hover{opacity:1}

/* fuera del sitio autorizado no se pinta nada del cromo añadido */
.cl-lock #clf-ayuda-btn,.cl-lock #clf-ayuda,.cl-lock #clf-onboard,.cl-lock #clf-hint{display:none!important}
@media print{#clf-ayuda-btn,#clf-ayuda,#clf-onboard{display:none!important}}

/* ════════════════════════════════════════════════════════════
   VERTICAL · módulo compartido

   Los motores de lienzo fijo escalan un rectángulo de 1280×720 o
   1600×900 al hueco disponible. En un teléfono de pie ese hueco es
   el ancho, y la escala se desploma: medido en IEL con una ventana
   de 375×812, el lienzo quedaba en 375×211 y el cuerpo del texto en
   4.2 px. Ilegible, y encogerlo mejor no existe.

   Así que en vertical se abandona el lienzo. Las láminas dejan de
   estar superpuestas, pasan al flujo normal, se recomponen en una
   columna y la página se desplaza. La tipografía recupera su tamaño
   de diseño —14.5 px de cuerpo, que en un teléfono está bien— porque
   ya no la encoge ninguna transformación.

   El colapso de las rejillas no está aquí: lo genera el inyector
   leyendo la hoja de cada presentación, porque cada una nombra sus
   columnas a su manera.
   ════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio:1/1){

  html,body{overflow-x:hidden;overflow-y:auto;height:auto}

  /* El escenario deja de ser una ventana fija y el lienzo, un lienzo. */
  /* Los cuatro primeros nombres son los de las presentaciones que ya
     existian; #escenario y #lienzo son los que usa el esqueleto del
     estandar, y sin ellos un mazo nuevo escrito segun el documento se
     queda con el lienzo escalado: la tipografia cambia de tamano pero la
     transformacion sigue puesta, asi que en el telefono se ve igual de
     pequena y parece que el modulo funciona cuando no ha entrado. */
  .stage,#viewport,#escenario{position:static;display:block;width:100%}
  .deck,#stage,#lienzo{
    position:static;left:auto;top:auto;margin:0;
    width:100%;max-width:100%;height:auto;min-height:100dvh;
    /* «!important» porque la funcion de ajuste sigue escribiendo la
       transformacion en el atributo de estilo en cada redimension. */
    transform:none!important;
    border:0;box-shadow:none;border-radius:0;
  }

  /* Las láminas dejan de estar una encima de otra. */
  .slide{
    position:static;inset:auto;
    opacity:1;visibility:visible;transform:none;
    display:none;width:100%;max-width:100%;
    padding:22px 18px 88px;
    overflow-wrap:anywhere;
  }
  .slide.on,.slide.is-active{display:flex}

  /* Sin esto, un hijo flex no baja de su contenido y desborda. */
  .slide *{min-width:0}
  .slide > *{max-width:100%}
  .slide [class*="badge"],.slide .tag{flex-wrap:wrap;max-width:100%}
  .body{justify-content:flex-start}

  /* Algunas rejillas se declaran en el atributo de estilo, donde la
     extraccion de selectores del inyector no las ve. Se alcanzan por
     atributo: «!important» gana a un estilo en linea normal. */
  .slide [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* Un titular de 60 px es de proyector, no de telefono: en una columna de
     320 px no cabe ni la primera palabra y se parte a lo bruto —el
     navegador no guiona en espanol, se probo—. Se le pone un techo
     relativo al marco, que es lo que hace DPGA al crecer su unidad. */
  .slide h1{font-size:min(34px,10vw)}
  .slide h2{font-size:min(26px,7.5vw)}
  .slide h3{font-size:min(20px,6vw)}

  /* Y el cuerpo tambien, por la razon contraria. Como aqui se abandona el
     lienzo, las medidas de diseno se usan tal cual, asi que el tamano del
     lienzo decidia a que tamano se lee en un telefono: medido, las de 1280
     quedaban en 13 px —pequeno— y las de 1600 en 22 —grande y con lineas de
     26 caracteres—. Con esta horquilla las tres familias caen en 17-18 px y
     30-36 caracteres, y el lienzo deja de tener consecuencia. */
  .slide p,.slide li,.slide td,.slide th{font-size:clamp(15px,4.8vw,18px)}

  /* Una tabla de ocho o diez columnas no se recompone en una: se
     comprime hasta partir las palabras letra a letra. Se le deja su
     ancho natural y su propio desplazamiento lateral. */
  .slide table{
    display:block;max-width:100%;
    overflow-x:auto;overflow-y:hidden;overflow-wrap:normal;
  }
  .slide table td,.slide table th{white-space:nowrap;overflow-wrap:normal}

  /* El aviso de «esto es de pantalla horizontal» deja de ser cierto
     en cuanto la lámina se recompone. */
  .tiny{display:none!important}
}

/* El cromo absoluto de la lamina, al flujo. */
@media (max-aspect-ratio:1/1){
.slide > .deck,
.slide > .slide,
.slide > .idx-close,
.slide > .road::before{position:static}
}

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

/* Rejillas de esta presentacion, a una columna. */
@media (max-aspect-ratio:1/1){
.slide .idx-list,
.slide .c2,
.slide .c3,
.slide .c4,
.slide .c5,
.slide .c-55,
.slide .c-46,
.slide /* llaves,
.slide dos puntos,
.slide punto y coma */ /* ── Laboratorio en vivo ── */ .lab,
.slide .lab.l3,
.slide /* ── Calculadora de especificidad ── */ .spec,
.slide .bm-row,
.slide .tgrid,
.slide /* ── Comparación ── */ .vs,
.slide /* ── Muestras de color y tipografía ── */ .sw,
.slide .unit .u-row,
.slide .road{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */