/* ═══════════════════════════════════════════════
   ds/manual.css — manual interactivo (data-storytelling.html)
   Solo para data-storytelling.html. Todo va bajo .ds
   para no tocar shared.css ni el resto del portfolio.

   Gramática visual de la página:
   gris = contexto · negro = interpretación · verde = "mira aquí"
   ═══════════════════════════════════════════════ */

.ds {
  --bg: #FBFBFB;
  --ink: #111111;
  --g1: #BDBDBD;          /* gris principal: marcas de contexto */
  --g2: #DCDCDC;          /* gris secundario */
  --grid: #E8E8E8;        /* retícula y líneas */
  --muted: #5a5a5a;       /* texto secundario (AA 6,6:1) */
  --green: #6B5CA5;       /* énfasis: marcas y texto grande (5,5:1) */
  --green-ink: #4A3E79;   /* mismo acento, más oscuro, para texto pequeño (9,0:1) */
  --green-wash: #F0EEF6;
  --red: #a3223e;         /* solo para escalas divergentes */
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --t-fast: .3s;
  --t-mid: .55s;
  --t-slow: .85s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.22, 1, .36, 1);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  counter-reset: none;
}
.ds ::selection { background: var(--green); color: #fff; }
.ds :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.ds-c { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.ds-narrow { max-width: 680px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }

/* ─── TIPOGRAFÍA EDITORIAL ─── */
.ds-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.ds-kicker b { color: var(--green-ink); font-weight: 700; }
.ds-h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(42px, 6.4vw, 92px); line-height: .98; letter-spacing: -.025em;
}
.ds-h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.02em;
}
.ds-h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.015em;
}
.ds-lead {
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.4;
  color: var(--ink); font-weight: 400;
}
.ds-body { font-size: 17px; line-height: 1.7; color: #2a2a2a; }
.ds-body p + p { margin-top: 1em; }
.ds-muted { color: var(--muted); }
.ds-green { color: var(--green-ink); }
.ds-quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -.01em;
  max-width: 22ch;
}
.ds-quote em { font-style: normal; color: var(--green); }
.ds-num {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; line-height: .9;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── SECCIONES ─── */
.ds-sec { padding-block: clamp(80px, 12vh, 140px); position: relative; }
.ds-sec--tight { padding-block: clamp(48px, 8vh, 88px); }
.ds-rule { height: 1px; background: var(--grid); border: 0; margin: 0; }

.ch-intro { padding-block: clamp(110px, 16vh, 180px) clamp(40px, 6vh, 64px); }
.ch-num {
  font-family: var(--serif); font-size: clamp(64px, 9vw, 128px); line-height: .8;
  color: var(--g2); font-weight: 500; letter-spacing: -.04em; display: block;
  transition: color var(--t-slow) ease;
}
.chapter.is-current .ch-num { color: var(--green); }
.ch-label { margin: 18px 0 14px; }
.ch-hook { max-width: 20ch; }

/* pausa: silencio visual */
.ds-pause {
  min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 18px;
}
.ds-pause--center { align-items: center; text-align: center; }
.ds-pause .ds-num { font-size: clamp(88px, 16vw, 220px); }
.ds-pause .cap { font-size: 15px; color: var(--muted); letter-spacing: .02em; }
.ds-pause .ds-h2 { max-width: 16ch; }

/* ─── REVEAL (con significado: la cifra aparece, no "entra") ─── */
.rv { opacity: 0; transition: opacity .45s ease; }
.rv.in { opacity: 1; }
.rv-up { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s var(--ease-out); }
.rv-up.in { opacity: 1; transform: none; }
.rv-seq > * { opacity: 0; transition: opacity .4s ease; }
.rv-seq.in > * { opacity: 1; }
.rv-seq.in > *:nth-child(2) { transition-delay: 0.16s; }
.rv-seq.in > *:nth-child(3) { transition-delay: 0.32s; }
.rv-seq.in > *:nth-child(4) { transition-delay: 0.48s; }
.rv-seq.in > *:nth-child(5) { transition-delay: 0.64s; }
.rv-seq.in > *:nth-child(6) { transition-delay: 0.80s; }
.rv-seq.in > *:nth-child(7) { transition-delay: 0.96s; }
.rv-seq.in > *:nth-child(8) { transition-delay: 1.12s; }
.rv-seq.in > *:nth-child(9) { transition-delay: 1.28s; }
.rv-seq.in > *:nth-child(10) { transition-delay: 1.44s; }
.no-js .rv, .no-js .rv-up, .no-js .rv-seq > * { opacity: 1; transform: none; }

/* ─── NAVEGACIÓN LATERAL DE CAPÍTULOS ─── */
.ch-rail {
  position: fixed; left: clamp(14px, 2vw, 32px); top: 50%; transform: translateY(-50%);
  z-index: 50; display: none; opacity: 0; transition: opacity .4s ease;
}
.ch-rail.show { opacity: 1; }
.ch-rail ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ch-rail a {
  display: flex; align-items: center; gap: 8px; padding: 4px 2px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: var(--g1); text-decoration: none; transition: color .25s ease;
}
.ch-rail a::before {
  content: ''; width: 10px; height: 1px; background: currentColor;
  transition: width .3s var(--ease-out);
}
/* el nombre del capítulo flota al pasar el ratón: fuera del flujo y sin recibir clics,
   para que su caja invisible no tape los botones del contenido (antes se «comía» los clics) */
.ch-rail a { position: relative; width: max-content; }
.ch-rail a .nm {
  position: absolute; left: 100%; top: 50%; margin-left: 6px; padding: 3px 8px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--grid); pointer-events: none;
  opacity: 0; transform: translate(-4px, -50%); white-space: nowrap; font-weight: 500;
  letter-spacing: 0; transition: opacity .2s ease, transform .2s ease; color: var(--ink);
}
.ch-rail a.past { color: #6b6b6b; }
.ch-rail a[aria-current="step"] { color: var(--green); }
.ch-rail a[aria-current="step"]::before { width: 22px; }
.ch-rail a:hover .nm, .ch-rail a:focus-visible .nm { opacity: 1; transform: translate(0, -50%); }
.ch-rail a:hover { color: var(--ink); }
@media (min-width: 1320px) { .ch-rail { display: block; } }

/* ═══ SCROLLYTELLING: VISUAL STICKY + PASOS ═══ */
.scrolly {
  display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  column-gap: clamp(28px, 4vw, 64px); position: relative;
}
.sc-visual {
  grid-column: 2; grid-row: 1; position: sticky; top: 76px; align-self: start;
  height: calc(100vh - 100px); height: calc(100svh - 100px);
  display: flex; align-items: center; justify-content: center;
}
.sc-visual > .viz { width: 100%; }
.sc-steps { grid-column: 1; grid-row: 1; padding: 30vh 0 40vh; }
.scrolly--short .sc-steps { padding: 22vh 0 30vh; }
.step {
  min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
}
.scrolly--short .step { min-height: 62vh; }
.step .st-in {
  opacity: .22; transition: opacity var(--t-fast) ease;
  max-width: 34ch;
}
.step.is-active .st-in { opacity: 1; }
.step .st-copy {
  font-family: var(--serif); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25;
  letter-spacing: -.01em; font-weight: 500;
}
.step .st-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: #333; }
.step .st-tag {
  display: inline-block; margin-bottom: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.step .st-tag b { color: var(--green-ink); }
.step--pause .st-copy { font-size: clamp(26px, 2.8vw, 40px); }

/* Móvil: visual arriba, texto debajo — no es un desktop encogido */
@media (max-width: 860px) {
  .scrolly { display: block; }
  .sc-visual {
    position: sticky; top: 60px; z-index: 3; height: auto; min-height: 0;
    padding: 10px 0 12px; background: var(--bg);
    box-shadow: 0 10px 14px -14px rgba(0,0,0,.25);
  }
  .sc-visual > .viz { width: min(100%, 76svh); margin: 0 auto; }
  .sc-steps { padding: 6vh 0 30vh; position: relative; z-index: 1; }
  .step, .scrolly--short .step { min-height: 62vh; justify-content: flex-start; padding-top: 5vh; }
  .sc-visual .stage { aspect-ratio: 1 / 1; }
  .sc-visual .stage.stage--wide { aspect-ratio: 4 / 3; }
  .step .st-in { opacity: .35; max-width: none; }
  .step .st-copy { font-size: 22px; }
}

/* ─── ETIQUETA DE DATOS FICTICIOS ─── */
.fake-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 4px 8px; border: 1px solid var(--grid); border-radius: 999px;
  background: #fff;
}

/* ═══ EL DASHBOARD PACIENTE ═══
   Un solo componente que aparece en Hero, 04, 05, 08, 10 y cierre.
   Cada estado es una lista de flags en la clase del .dash. */
.dash-wrap { width: 100%; container-type: inline-size; position: relative; }
.dash {
  --dc1: #4472C4; --dc2: #ED7D31; --dc3: #A5A5A5; --dc4: #FFC000; --dc5: #5B9BD5;
  --dc6: #70AD47; --dc7: #264478; --dc8: #9E480E; --dc9: #636363; --dc10: #997300;
  --focus: var(--green);
  position: relative; width: 100%; aspect-ratio: 16 / 11; overflow: hidden;
  background: #EEF0F4; border-radius: 6px;
  font-size: clamp(5.5px, 1.32cqw, 12.5px); color: #222;
  transition: background var(--t-mid) ease, filter var(--t-mid) ease;
}
.dash .cam {
  position: absolute; inset: 0; transform-origin: 26% 66%;
  transition: transform 1.1s var(--ease-io), transform-origin 0s;
}
.dash .pn {
  position: absolute; background: #fff; border-radius: .9em;
  border: 1px solid #C9CED8; box-shadow: 0 .5em 1.4em rgba(20,30,60,.16);
  overflow: hidden; display: flex; flex-direction: column;
  transition: left var(--t-slow) var(--ease-io), top var(--t-slow) var(--ease-io),
    width var(--t-slow) var(--ease-io), height var(--t-slow) var(--ease-io),
    opacity var(--t-mid) ease, box-shadow var(--t-mid) ease, border-color var(--t-mid) ease,
    border-radius var(--t-mid) ease, background var(--t-mid) ease;
}
.dash .ph {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .6em;
  padding: .45em .9em; background: #2F4A7A; color: #fff; font-weight: 700; font-size: 1em;
  transition: background var(--t-mid) ease, color var(--t-mid) ease, padding var(--t-mid) ease;
  position: relative; min-height: 2.2em;
}
.dash .pb { flex: 1; position: relative; min-height: 0; padding: .6em .9em .8em; }

/* títulos intercambiables: descriptivo / pregunta / historia */
.dash .tt { position: relative; display: grid; flex: 1; min-width: 0; }
.dash .tt > span {
  grid-area: 1 / 1; transition: opacity .45s ease, transform .45s var(--ease-out);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash .tt .t-s, .dash .tt .t-q, .dash .tt .t-c { opacity: 0; transform: translateY(.4em); }
.dash.story .tt .t-d, .dash.q .p-head .tt .t-d, .dash.desc .p-head .tt .t-d { opacity: 0; transform: translateY(-.4em); }
.dash.story .tt .t-s { opacity: 1; transform: none; }
.dash.q:not(.story) .tt .t-q { opacity: 1; transform: none; }
.dash.desc:not(.story) .tt .t-c { opacity: 1; transform: none; }

/* posiciones — layout base */
.dash .p-head  { left: 1.5%; top: 2%;  width: 97%;  height: 12%; }
.dash .p-k1    { left: 1.5%; top: 16%; width: 23%;  height: 14%; }
.dash .p-k2    { left: 26%;  top: 16%; width: 23%;  height: 14%; }
.dash .p-k3    { left: 50.5%;top: 16%; width: 23%;  height: 14%; }
.dash .p-k4    { left: 75%;  top: 16%; width: 23.5%;height: 14%; }
.dash .p-bars  { left: 1.5%; top: 32%; width: 48%;  height: 66%; }
.dash .p-line  { left: 51%;  top: 32%; width: 47.5%;height: 38%; }
.dash .p-tbl   { left: 51%;  top: 72%; width: 47.5%;height: 26%; }
.dash .p-rec   { left: 51%;  top: 72%; width: 47.5%;height: 26%; opacity: 0; }

/* KPI principal crece (05 · tamaño) */
.dash.kbig .p-k1 { left: 1.5%; width: 19%; }
.dash.kbig .p-k2 { left: 22%; width: 36%; top: 15%; height: 16%; }
.dash.kbig .p-k3 { left: 59.5%; width: 19%; }
.dash.kbig .p-k4 { left: 80%; width: 18.5%; }

/* layout prioritario: el protagonista ocupa la zona donde empieza la lectura */
.dash.prio .p-bars  { left: 1.5%; top: 16%; width: 57%; height: 82%; }
.dash.prio .p-k2    { left: 60%;  top: 16%; width: 38.5%; height: 19%; }
.dash.prio .p-k1    { left: 60%;  top: 37%; width: 19%;   height: 12%; }
.dash.prio .p-k3    { left: 80%;  top: 37%; width: 18.5%; height: 12%; }
.dash.prio .p-k4    { left: 80%;  top: 37%; width: 18.5%; height: 12%; opacity: 0; }
.dash.prio .p-line  { left: 60%;  top: 51%; width: 38.5%; height: 25%; }
.dash.prio .p-tbl   { left: 60%;  top: 78%; width: 38.5%; height: 20%; }
.dash.prio .p-rec   { left: 60%;  top: 78%; width: 38.5%; height: 20%; }
.dash.prio .cam { transform-origin: 30% 57%; }

/* head */
.dash .p-head { flex-direction: row; align-items: center; padding: 0 1.2em; gap: 1em; background: #fff; }
.dash .p-head .brand { width: 2.4em; height: 2.4em; border-radius: .5em; background: linear-gradient(135deg, #4472C4, #264478); flex: none; transition: opacity var(--t-mid); }
.dash .p-head .tt { font-size: 1.55em; font-weight: 700; letter-spacing: -.01em; }
.dash .p-head .tt .t-s { font-family: var(--serif); font-weight: 500; font-size: 1.12em; }
.dash .slicers { display: flex; gap: .5em; flex: none; transition: opacity var(--t-mid); }
.dash .slc { border: 1px solid #C9CED8; border-radius: .4em; padding: .35em .7em; font-size: .9em; background: #F5F7FA; white-space: nowrap; }
.dash .slc::after { content: ' ▾'; color: #888; }
.dash .navtabs { position: absolute; right: 1.2em; top: 50%; transform: translateY(-50%); display: flex; gap: .2em; opacity: 0; transition: opacity var(--t-mid); pointer-events: none; }
.dash .navtabs span { font-size: .85em; padding: .35em .7em; border-radius: 99px; color: var(--muted); font-weight: 600; }
.dash .navtabs span.on { background: var(--ink); color: #fff; }

/* KPI */
.dash .kpi .pb { display: flex; flex-direction: column; justify-content: center; padding: .4em 1em; }
.dash .kpi .kl { font-size: .95em; color: #555; font-weight: 600; }
.dash .kpi .kv { white-space: nowrap; font-size: 2.05em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #1F3864; transition: color var(--t-mid), font-size var(--t-slow) var(--ease-io); }
.dash .kpi .ks { font-size: .9em; color: #2E7D32; font-weight: 700; }
.dash .kpi .ph { display: none; }
.dash .kpi .kv, .dash .kpi .ks { position: relative; }
.dash.kbig .p-k2 .kv, .dash.prio .p-k2 .kv { font-size: 3.6em; }

/* formatos de número: largo / corto */
.dash .n-s { display: none; }
.dash.short .n-l { display: none; }
.dash.short .n-s { display: inline; }

/* barras */
.dash .bars { position: absolute; inset: 2.8em 1.2em 2.6em 9.4em; }
.dash .bars .gridv { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, #C9CED8 0 1px, transparent 1px 12.5%); transition: opacity var(--t-mid); }
.dash .bars .gridv.minor { background-image: repeating-linear-gradient(90deg, #E3E6EC 0 1px, transparent 1px 4.1666%); }
.dash .bars .zero { position: absolute; top: -.4em; bottom: -.4em; width: 1px; background: #888; left: 1.5%; }
.dash .brow { position: absolute; left: 0; right: 0; height: 11%; display: flex; align-items: center; }
.dash .brow .bl { position: absolute; right: 100%; margin-right: .7em; white-space: nowrap; font-size: 1em; color: #333; font-weight: 600; transition: color var(--t-mid), font-weight var(--t-mid); }
.dash .brow .bar {
  position: absolute; left: 1.5%; height: 100%; border-radius: 0 .25em .25em 0;
  background: var(--c); transition: background var(--t-mid) ease, outline-color .3s ease, box-shadow var(--t-mid);
  box-shadow: inset 0 -.35em 0 rgba(0,0,0,.12); outline: 2px solid transparent; outline-offset: 2px;
}
.dash .brow .bar.neg { left: auto; right: 98.5%; border-radius: .25em 0 0 .25em; }
.dash .brow .bv { position: absolute; font-size: .9em; font-weight: 600; color: #333; white-space: nowrap; transition: color var(--t-mid), opacity var(--t-mid); }
.dash .axis-x { position: absolute; left: 9.4em; right: 1.2em; bottom: .8em; display: flex; justify-content: space-between; font-size: .8em; color: #666; transition: opacity var(--t-mid); }
.dash .legend { display: flex; flex-wrap: wrap; gap: .3em .9em; font-size: .82em; color: #444; transition: opacity var(--t-mid); }
.dash .legend i { display: inline-block; width: .8em; height: .8em; margin-right: .3em; vertical-align: -.05em; border-radius: 2px; }
.dash .p-bars .legend { position: absolute; top: .7em; left: 1em; right: 1em; }

/* línea */
.dash .lineplot { position: absolute; inset: 1em 7em 3em 4.6em; }
.dash .lineplot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dash .lineplot .gl { stroke: #D5D9E0; stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity var(--t-mid); }
.dash .lineplot .gl.minor { stroke: #EBEDF1; }
.dash .lineplot .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke var(--t-mid), stroke-width var(--t-mid), opacity var(--t-mid); }
.dash .lineplot .yax { position: absolute; right: 100%; margin-right: .6em; top: 0; bottom: 0; font-size: .78em; color: #666; text-align: right; font-variant-numeric: tabular-nums; transition: opacity var(--t-mid); }
/* cada cifra a la altura de su línea de rejilla (top en %, en línea) y en una sola línea */
.dash .lineplot .yax span { position: absolute; right: 0; white-space: nowrap; line-height: 1; transform: translateY(-50%); }
.dash .lineplot .xax { position: absolute; left: 0; right: 0; bottom: -1.6em; display: flex; justify-content: space-between; font-size: .78em; color: #666; }
.dash .lineplot .dl { position: absolute; left: 100%; margin-left: .5em; font-size: .85em; font-weight: 700; white-space: nowrap; transform: translateY(-50%); opacity: 0; transition: opacity var(--t-mid), color var(--t-mid); }
.dash .p-line .legend { position: absolute; left: 1em; right: 1em; bottom: .5em; }

/* matriz de detalle: la tabla de todo informe de ventas. Antes: estilo por defecto,
   bandas, rejilla, barras de datos y formato condicional en verde. Después: limpia. */
.dash .p-tbl .pb { padding-top: .1em; }
.dash .mx { width: 100%; border-collapse: collapse; font-size: .8em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.dash .mx th, .dash .mx td { padding: .22em .5em; text-align: right; white-space: nowrap; border: 1px solid #D6DCE5; transition: background-color var(--t-mid), color var(--t-mid), border-color var(--t-mid); }
.dash .mx th[scope="row"], .dash .mx thead th:first-child { text-align: left; font-weight: 600; }
.dash .mx thead th { background: #4472C4; color: #fff; font-weight: 700; border-color: #4472C4; }
.dash .mx tbody tr:nth-child(even) > * { background-color: #EEF3FA; }
.dash .mx tfoot > tr > * { font-weight: 700; background: #DCE6F2; }
.dash .mx td.db { background-image: linear-gradient(90deg, #9DC3E6 var(--w, 0%), transparent var(--w, 0%)); background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 50%; }
.dash .mx td.cf { background-color: #C6EFCE !important; color: #006100; font-weight: 600; }

/* recomendación */
.dash .p-rec .pb { display: flex; flex-direction: column; justify-content: center; gap: .3em; padding: .6em 1.2em; }
.dash .p-rec .rk { font-size: .8em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); }
.dash .p-rec .rt { font-size: 1.05em; line-height: 1.35; font-weight: 600; }

/* anotación */
.dash .annot {
  position: absolute; left: 26%; top: 55%; width: 23%; z-index: 5;
  opacity: 0; transition: opacity .45s ease .25s; pointer-events: none;
  font-size: 1em; line-height: 1.35; color: var(--ink);
}
.dash .annot b { color: var(--green-ink); }
.dash .annot .ak { font-size: .78em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .2em; }
.dash .annot-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.dash .annot-svg path { fill: none; stroke: var(--ink); stroke-width: .3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease .15s; }
.dash .annot-svg circle { fill: var(--green); opacity: 0; transition: opacity .3s ease; }
.dash.prio .annot { left: 27%; top: 41%; width: 28%; }
.dash.prio .annot-svg .a-def, .dash:not(.prio) .annot-svg .a-pri { display: none; }

/* etiqueta de simulación */

/* ─── FLAGS DEL DASHBOARD ─── */
/* hush: todo con el mismo peso → nadie destaca */
.dash.hush .pn { opacity: .5; }
.dash.hush { filter: saturate(.55); }
/* flat: fuera sombras, bordes, cabeceras de color y decoración */
.dash.flat { background: #FBFBFB; border: 1px solid var(--grid); padding: clamp(8px, 1.8cqw, 20px); }
.dash.empty:not(.b-head) { border-color: transparent; }
.dash.empty.b-head { outline: none; }
.dash.flat .pn { box-shadow: none; border-color: var(--grid); border-radius: 6px; background: #fff; }
.dash.flat .ph { background: transparent; color: var(--ink); padding: .4em 1em 0; }
.dash.flat .p-head .brand { opacity: 0; }
.dash.flat .brow .bar { box-shadow: none; }
.dash.flat .kpi .kv { color: var(--ink); }
.dash.flat .kpi .ks { color: var(--muted); }
.dash.flat .p-head { border-bottom: 1px solid var(--grid); }
.dash.flat .slc { background: #fff; border-color: var(--grid); }
/* lessgrid: solo la estructura útil */
.dash.lessgrid .gridv, .dash.lessgrid .gl.minor, .dash.lessgrid .axis-x { opacity: 0; }
.dash.lessgrid .gl { opacity: .5; }
.dash.lessgrid .yax { opacity: .6; }
/* gray: el color deja de ser ruido */
.dash.gray .brow .bar, .dash.gray .legend i { background: var(--g1) !important; }
.dash.gray .ln { stroke: var(--g1) !important; }
/* flat: fuera cabecera de color y bandas · lessgrid: fuera la rejilla · gray: fuera barras de datos y verde */
.dash.flat .mx thead th { background: transparent; color: var(--ink); border-color: transparent transparent var(--ink); }
.dash.flat .mx tbody tr:nth-child(even) > *, .dash.flat .mx tfoot > tr > * { background-color: transparent; }
.dash.lessgrid .mx td, .dash.lessgrid .mx tbody th, .dash.lessgrid .mx tfoot th { border-color: transparent; border-bottom-color: var(--grid); }
.dash.lessgrid .mx tfoot > tr > * { border-top: 1px solid var(--ink); border-bottom-color: transparent; }
.dash.gray .mx td.db { background-image: none; }
.dash.gray .mx td.cf { background-color: transparent !important; color: var(--ink); }
/* focus: una cosa, un color */
.dash.focus .brow.hero .bar { background: var(--focus) !important; }
.dash.focus .brow.hero .bl, .dash.focus .brow.hero .bv { color: var(--green-ink); font-weight: 800; }
.dash.focus .ln.hero { stroke: var(--focus) !important; stroke-width: 3; }
.dash.focus .dl.hero { color: var(--green-ink); }
.dash.focus .p-k2 .kv { color: var(--green-ink); }
.dash.select .brow.hero .bar { outline-color: var(--ink); }
/* direct: la etiqueta vive junto al dato */
.dash.direct .legend { opacity: 0; }
.dash.direct .dl { opacity: 1; }
.dash .dl { color: #777; }
/* dim: lo secundario pesa menos */
.dash.dim .p-tbl, .dash.dim .p-k3, .dash.dim .p-k4, .dash.dim .slicers { opacity: .32; }
.dash.dim .p-line { opacity: .55; }
.dash.dim .brow:not(.hero) .bl, .dash.dim .brow:not(.hero) .bv { color: #767676; }
/* zoom: movimiento de cámara hacia el protagonista */
.dash.zoom .cam { transform: scale(1.6); transform-origin: 18% 66%; }
.dash.zoom .pn:not(.p-bars):not(.p-rec) { opacity: .15; }
/* anotación */
.dash.annot-on .annot { opacity: 1; }
.dash.annot-on .annot-svg path { stroke-dashoffset: 0; }
.dash.annot-on .annot-svg circle { opacity: 1; }
/* recorrido y recomendación */
.dash.rec .p-rec { opacity: 1; }
.dash.rec .p-tbl { opacity: 0; }
.dash.navs .navtabs { opacity: 1; }
.dash.navs .slicers { opacity: 0; }
/* construcción desde cero (cap. 10) */
.dash.empty .pn { opacity: 0; }
.dash.empty.b-head .p-head { opacity: 1; }
.dash.empty.b-main .p-bars { opacity: 1; }
.dash.empty.b-kpi .p-k1, .dash.empty.b-kpi .p-k2, .dash.empty.b-kpi .p-k3 { opacity: 1; }
.dash.empty.b-sec .p-line, .dash.empty.b-sec .p-tbl { opacity: 1; }
.dash.empty.b-sec.dim .p-tbl { opacity: .32; }
.dash.empty.b-sec.dim .p-line { opacity: .55; }
.dash.empty.rec .p-tbl { opacity: 0; }
.dash.empty.rec .p-rec { opacity: 1; }
.dash.empty .slicers { opacity: 0; }
.dash.empty { background: #fff; outline: 1px dashed var(--g1); outline-offset: -1px; }
/* solo títulos / sin títulos (validación) */
.dash.titles .pb > *:not(.keep), .dash.titles .p-head .slicers, .dash.titles .annot, .dash.titles .annot-svg { opacity: 0 !important; }
.dash.titles .kpi .pb > * { opacity: 0 !important; }
.dash.titles .kpi .kl { opacity: 1 !important; }
.dash.notitles .ph .tt, .dash.notitles .p-head .tt { opacity: 0; }
.dash .ph .tt, .dash .p-head .tt { transition: opacity var(--t-mid); }
.dash .ph .tt .t-s { font-weight: 700; }
/* pruebas de accesibilidad */
.dash.gs { filter: grayscale(1); }
.dash.nocolor { --focus: #111; }
.dash.nocolor.focus .brow.hero .bl, .dash.nocolor.focus .brow.hero .bv, .dash.nocolor.focus .p-k2 .kv, .dash.nocolor .dl.hero { color: #111; }
.dash .kbd-n { position: absolute; z-index: 8; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--ink); color: #fff; font-size: .95em; font-weight: 800; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s var(--ease-out); }
.dash.kbd .kbd-n { opacity: 1; transform: none; }
.dash.kbd .kbd-n:nth-of-type(2) { transition-delay: .12s; } .dash.kbd .kbd-n:nth-of-type(3) { transition-delay: .24s; }
.dash.kbd .kbd-n:nth-of-type(4) { transition-delay: .36s; } .dash.kbd .kbd-n:nth-of-type(5) { transition-delay: .48s; }
.dash.kbd .kbd-n:nth-of-type(6) { transition-delay: .6s; } .dash.kbd .kbd-n:nth-of-type(7) { transition-delay: .72s; }
.dash.kbd .pn { outline: 2px dashed transparent; }
.dash .alt-cap { position: absolute; inset: auto 1.2em 1.2em 1.2em; z-index: 9; background: var(--ink); color: #fff; font-size: 1.05em; line-height: 1.45; padding: .9em 1.1em; border-radius: .5em; opacity: 0; transform: translateY(.6em); transition: opacity .35s ease, transform .35s var(--ease-out); }
.dash .alt-cap code { font-family: ui-monospace, Consolas, monospace; color: #9fd49a; font-size: .95em; }
.dash.alt .alt-cap { opacity: 1; transform: none; }
.dash .contrast-chips { position: absolute; z-index: 9; inset: auto 1.2em 1.2em auto; display: flex; flex-direction: column; gap: .4em; opacity: 0; transition: opacity .35s ease; }
.dash.contrast .contrast-chips { opacity: 1; }
.dash .cchip { display: flex; align-items: center; gap: .6em; background: #fff; border: 1px solid var(--grid); padding: .4em .7em; border-radius: .4em; font-size: 1em; }
.dash .cchip i { width: 1.3em; height: 1.3em; border-radius: 3px; }
.dash .cchip b { font-variant-numeric: tabular-nums; }
.dash .cchip em { font-style: normal; font-size: .85em; color: var(--muted); }

/* ═══ STAGE DE MARCAS (motor de morphing) ═══ */
.stage { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.stage--wide { aspect-ratio: 16 / 10; }
.stage--sq { aspect-ratio: 1; max-width: 560px; margin: 0 auto; }
.stage .mk {
  position: absolute; left: 0; top: 0; will-change: transform;
  transition: transform var(--t-slow) var(--ease-io), width var(--t-slow) var(--ease-io),
    height var(--t-slow) var(--ease-io), background-color var(--t-mid) ease,
    border-radius var(--t-slow) var(--ease-io), opacity var(--t-mid) ease, box-shadow var(--t-mid) ease;
}
.stage .mk.blk {
  display: flex; flex-direction: column; justify-content: flex-start; padding: .7em .8em; overflow: hidden;
  font-size: clamp(9px, 1.5cqw, 13px); color: var(--ink); border: 1px solid transparent;
}
.stage { container-type: inline-size; }
.stage .ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stage .ov path, .stage .ov line, .stage .ov polyline { fill: none; }
.stage .ov .p-line { stroke: var(--g1); stroke-width: 2; }
.stage .ov .p-green { stroke: var(--green); stroke-width: 3; }
.stage .ov .p-ink { stroke: var(--ink); stroke-width: 1.2; }
.stage .ov .p-grid { stroke: var(--grid); stroke-width: 1; }
.stage .ov .p-dash { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; }
.stage .ov .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease, opacity .4s ease; }
.stage .ov .draw.on { stroke-dashoffset: 0; }
.stage .ov .rg { fill: rgba(17,17,17,.035); stroke: var(--g2); stroke-width: 1; }
.stage .ov > * { transition: opacity .45s ease; }
.stage .ov .off { opacity: 0; }
.stage .lb {
  position: absolute; white-space: nowrap; font-size: clamp(10px, 1.7cqw, 13px); color: var(--muted);
  transition: left var(--t-slow) var(--ease-io), top var(--t-slow) var(--ease-io), opacity .4s ease, color .4s ease;
  pointer-events: none; line-height: 1.25;
}
.stage .lb.off { opacity: 0; }
.stage .lb.ink { color: var(--ink); font-weight: 600; }
.stage .lb.grn { color: var(--green-ink); font-weight: 700; }
.stage .lb.big { font-family: var(--serif); font-size: clamp(18px, 3.4cqw, 30px); color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.stage .lb.huge { font-family: var(--serif); font-size: clamp(28px, 7cqw, 64px); color: var(--ink); font-weight: 500; letter-spacing: -.03em; }
.stage .lb.cap { font-size: clamp(9px, 1.35cqw, 11px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stage .lb.wrap { white-space: normal; }
.stage .lb.ann { white-space: normal; color: var(--ink); font-size: clamp(11px, 1.8cqw, 14px); }
.stage .lb.ann b { color: var(--green-ink); }

/* modo EXPLORAR / EXPLICAR */
.mode-tag { display: flex; gap: 4px; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.mode-tag span { padding: 5px 10px; border-radius: 99px; color: var(--g1); transition: all .4s ease; border: 1px solid var(--grid); }
.mode-tag span.on { color: #fff; background: var(--ink); border-color: var(--ink); }
.mode-tag span.on.g { background: var(--green); border-color: var(--green); }

/* ─── MAPA DEL RECORRIDO ─── */
.route-seq { font-size: 15px; color: var(--muted); margin-top: 18px; line-height: 1.8; }
.route-seq b { color: var(--ink); font-weight: 600; }
.route { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--ink); }
.route li { border-right: 1px solid var(--grid); }
.route li:nth-child(5n) { border-right: 0; }
.route a {
  display: block; padding: 20px 18px 28px; text-decoration: none; color: inherit; height: 100%;
  transition: background .25s ease; border-bottom: 1px solid var(--grid);
}
.route a:hover { background: #fff; }
.route .rn { font-family: var(--serif); font-size: 34px; color: var(--g1); line-height: 1; transition: color .25s; }
.route a:hover .rn { color: var(--green); }
.route .rt { display: block; font-weight: 700; font-size: 15px; margin: 14px 0 6px; }
.route .rd { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .route { grid-template-columns: 1fr 1fr; } .route li:nth-child(5n) { border-right: 1px solid var(--grid); } .route li:nth-child(2n) { border-right: 0; } }
@media (max-width: 480px) { .route { grid-template-columns: 1fr; } .route li { border-right: 0 !important; } .route a { display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; padding: 16px 4px; } .route .rn { grid-row: span 2; font-size: 28px; } .route .rt { margin: 0 0 4px; } }

/* ─── BLOQUES EDITORIALES AUXILIARES ─── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.split--wide { grid-template-columns: 5fr 7fr; }
@media (max-width: 860px) { .split, .split--wide { grid-template-columns: 1fr; } }

.layers { display: flex; flex-direction: column; gap: 10px; }
.layer { display: grid; grid-template-columns: 120px 1fr; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--grid); }
.layer .ln { font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.layer .lq { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); }
.layer:nth-child(3) .ln { color: var(--green-ink); }
.layers-sum { font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); padding-top: 22px; border-top: 1px solid var(--ink); }
.layers-sum em { font-style: normal; color: var(--green); }
.note-personal { font-size: 13px; color: var(--muted); margin-top: 16px; }

/* contexto: tablero de preguntas */
.brief { position: relative; width: 100%; min-height: 420px; aspect-ratio: 4 / 3; container-type: inline-size; }
.brief .bq { position: absolute; left: 0; right: 0; top: 0; font-family: var(--serif); font-size: clamp(20px, 4.4cqw, 36px); line-height: 1.2; opacity: 0; transition: opacity .5s ease, transform .6s var(--ease-io); }
.brief .bq::before { content: '“'; color: var(--g1); }
.brief .bq::after { content: '”'; color: var(--g1); }
.brief .cols { position: absolute; left: 0; right: 0; top: 30%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.brief .col { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s var(--ease-out); }
.brief .col h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 3.4cqw, 28px); margin-bottom: 10px; }
.brief .chip { display: block; padding: 7px 10px; margin-bottom: 6px; border: 1px solid var(--grid); border-radius: 6px; font-size: clamp(11px, 2cqw, 14px); color: var(--muted); background: #fff; transition: all .4s ease; }
.brief .chip.sel { border-color: var(--green); color: var(--green-ink); background: var(--green-wash); font-weight: 700; }
.brief .flow { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; gap: 0; opacity: 0; transition: opacity .5s ease .2s; pointer-events: none; }
.brief .flow .fs { display: grid; grid-template-columns: 34% 1fr; align-items: baseline; padding: 1.3cqw 0; border-top: 1px solid var(--grid); }
.brief .flow .fk { font-size: clamp(10px, 1.7cqw, 12px); font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.brief .flow .fv { font-family: var(--serif); font-size: clamp(15px, 2.9cqw, 24px); line-height: 1.25; }
.brief .flow .fs:last-child .fk, .brief .flow .fs:last-child .fv { color: var(--green-ink); }
.brief .empty { position: absolute; inset: 0; border: 1px dashed var(--g1); border-radius: 6px; display: grid; place-items: center; color: var(--g1); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; transition: opacity .4s ease; }
.brief[data-s="0"] .empty { opacity: 1; } .brief:not([data-s="0"]) .empty { opacity: 0; }
.brief:not([data-s="0"]) .bq { opacity: 1; }
.brief[data-s="6"] .bq { opacity: .25; }
.brief[data-s="2"] .col-1, .brief[data-s="3"] .col-1, .brief[data-s="4"] .col-1, .brief[data-s="5"] .col-1,
.brief[data-s="4"] .col-2, .brief[data-s="5"] .col-2, .brief[data-s="5"] .col-3 { opacity: 1; transform: none; }
.brief[data-s="2"] .col-1 .chip { opacity: 0; }
.brief[data-s="6"] .cols { opacity: 0; transition: opacity .3s; }
.brief[data-s="6"] .flow { opacity: 1; }
.brief .chip.sel-later { transition-delay: .5s; }
.brief:not([data-s="3"]):not([data-s="4"]):not([data-s="5"]) .col-1 .chip.sel,
.brief:not([data-s="4"]):not([data-s="5"]) .col-2 .chip.sel { border-color: var(--grid); color: var(--muted); background: #fff; font-weight: 400; }
@media (max-width: 860px) { .brief { min-height: 0; aspect-ratio: 4 / 3.4; } }

/* toggles / controles segmentados */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--grid); border-radius: 999px; background: #fff; }
.seg button {
  font: inherit; font-size: 13px; font-weight: 600; border: 0; background: transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease;
  min-height: 36px;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.seg button[aria-pressed="true"].g { background: var(--green); }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 22px; }
.ctl-cap { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* mini gráfico de título (gran idea / cap. 08) */
.tchart { container-type: inline-size; background: #fff; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--grid); }
.tchart .tct { position: relative; display: grid; min-height: 2.6em; font-size: clamp(18px, 4.2cqw, 30px); line-height: 1.15; }
.tchart .tct span { grid-area: 1/1; transition: opacity .5s ease, transform .5s var(--ease-out), filter .5s ease; }
.tchart .tct .a { font-family: var(--sans); font-weight: 700; font-size: .72em; align-self: end; }
.tchart .tct .b { font-family: var(--serif); font-weight: 500; opacity: 0; transform: translateY(.3em); }
.tchart.after .tct .a { opacity: 0; transform: translateY(-.3em); }
.tchart.after .tct .b { opacity: 1; transform: none; }
.tchart .tcs { font-size: 13px; color: var(--muted); margin: 8px 0 18px; }
.tchart .gb { display: grid; grid-template-columns: 7.5em 1fr; row-gap: 10px; align-items: center; font-size: 13px; }
.tchart .gb .gl { color: #333; font-weight: 600; }
.tchart .gb .gt { display: flex; flex-direction: column; gap: 2px; }
.tchart .gb .b24, .tchart .gb .b25 { height: 11px; transition: background .5s ease; }
.tchart .gb .b24 { background: var(--g2); }
.tchart .gb .b25 { background: var(--g1); position: relative; }
.tchart .gb .b25 span { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--muted); white-space: nowrap; font-weight: 600; transition: color .5s; }
.tchart.after .gb .hero .b25 { background: var(--green); }
.tchart.after .gb .hero .b25 span, .tchart.after .gb .hero.gl, .tchart.after .gb .gl.hero { color: var(--green-ink); }
.tchart .tkey { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 16px; }
.tchart .tkey i { display: inline-block; width: 12px; height: 8px; margin-right: 5px; }

/* 3 minutos */
.timer { width: min(280px, 60vw); aspect-ratio: 1; position: relative; margin: 0 auto; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .tr-bg { fill: none; stroke: var(--grid); stroke-width: 3; }
.timer .tr-fg { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 9s linear; }
.timer.in .tr-fg { stroke-dashoffset: 1; }
.timer .tv { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(40px, 7vw, 64px); }
.qlist { list-style: none; }
.qlist li { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); padding: 12px 0; border-top: 1px solid var(--grid); color: var(--ink); }
.qlist li:first-child { border-top: 0; }

/* diccionario */
.dict { border-top: 1px solid var(--ink); }
.dict > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); }
.dict > summary::-webkit-details-marker { display: none; }
.dict > summary .pm { width: 22px; height: 22px; position: relative; flex: none; }
.dict > summary .pm::before, .dict > summary .pm::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transition: transform .3s ease; }
.dict > summary .pm::after { transform: rotate(90deg); }
.dict[open] > summary .pm::after { transform: rotate(0); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--grid); margin-bottom: 26px; }
.tabs [role="tab"] { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 10px 0; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
.words { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 28px; }
.words span { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); padding: 4px 14px; border: 1px solid var(--grid); border-radius: 99px; background: #fff; }

/* what / why / how */
.wwh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.wwh > div { padding: 26px 24px 30px 0; position: relative; }
.wwh > div + div { padding-left: 24px; border-left: 1px solid var(--grid); }
.wwh .wk { font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.wwh > div:last-child .wk { color: var(--green-ink); }
.wwh .wq { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; margin: 12px 0 10px; }
.wwh .wd { font-size: 15px; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) { .wwh { grid-template-columns: 1fr; } .wwh > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--grid); } }
.wwh-flow {
  margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.wwh-flow span { color: var(--g1); margin: 0 8px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* comparación (percepción) */
.cmp { container-type: inline-size; }

/* fuentes */
.src { display: inline-block; position: relative; vertical-align: baseline; margin-top: 18px; }
.src > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--g1); padding-bottom: 2px;
}
.src > summary::-webkit-details-marker { display: none; }
.src > summary::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--g1); }
.src[open] > summary { color: var(--ink); }
.src[open] > summary::before { background: var(--green); }
.src .src-b { margin-top: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--grid); font-size: 13.5px; line-height: 1.55; max-width: 460px; color: #333; }
.src .src-b cite { font-style: normal; font-weight: 700; display: block; color: var(--ink); }
.src .src-b .meta { color: var(--muted); font-size: 12.5px; display: block; margin: 2px 0 8px; }
.src .src-b a { color: var(--green-ink); font-weight: 600; }
.src .src-b .kind { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* divulgación técnica */
.disc { border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); margin-top: 22px; }
.disc > summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary::after { content: '+'; font-size: 18px; font-weight: 400; color: var(--muted); transition: transform .25s; }
.disc[open] > summary::after { transform: rotate(45deg); }
.disc .disc-b { padding: 4px 0 20px; font-size: 14.5px; line-height: 1.65; color: #333; }
.disc .disc-b ol { padding-left: 1.2em; }
.disc .disc-b li + li { margin-top: 6px; }
.disc .qph { display: grid; grid-template-columns: 78px 1fr; gap: 6px 14px; margin-bottom: 14px; }
.disc .qph dt { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 13px; line-height: 1.6;
  background: #111; color: #e8e8e8; padding: 18px 20px; border-radius: 4px; overflow-x: auto; white-space: pre;
}
.code .k { color: #9fd49a; } .code .s { color: #e3c28b; } .code .f { color: #8fb8ff; }

/* test del elemento */
.etest { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.etest .picks { display: flex; flex-direction: column; gap: 8px; }
.etest .picks button {
  font: inherit; text-align: left; font-size: 15px; background: #fff; border: 1px solid var(--grid); padding: 12px 14px;
  border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; transition: border-color .2s, background .2s;
}
.etest .picks button:hover { border-color: var(--g1); }
.etest .picks button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.etest .picks button .hint { font-size: 12px; color: var(--muted); }
.etest .picks button[aria-pressed="true"] .hint { color: #bbb; }
.etable { width: 100%; border-collapse: collapse; font-size: 15px; }
.etable th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid var(--ink); }
.etable td { padding: 13px 0; border-bottom: 1px solid var(--grid); transition: background .25s ease, color .25s ease, opacity .25s ease; }
.etable td:last-child { font-weight: 700; text-align: right; padding-right: 10px; }
.etable tr.hit td { background: var(--green-wash); }
.etable tr.hit td:first-child { box-shadow: inset 3px 0 0 var(--green); padding-left: 12px; }
.etable tr.hit td:last-child { color: var(--green-ink); }
.etable.picking tr:not(.hit) td { color: #9a9a9a; }
.everdict { margin-top: 18px; min-height: 3.2em; font-family: var(--serif); font-size: 20px; line-height: 1.35; }
@media (max-width: 860px) { .etest { grid-template-columns: 1fr; } }

/* color: tres mini experiencias */
.scales { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.scale h3 { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.scale p { font-size: 14px; color: var(--muted); line-height: 1.55; min-height: 3.2em; }
.scale .sw { display: flex; height: 64px; margin: 16px 0 8px; gap: 3px; }
.scale .sw i { flex: 1; transition: transform .35s var(--ease-out); transform-origin: bottom; }
.scale .sw i:hover { transform: scaleY(1.12); }
.scale .sx { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .scales { grid-template-columns: 1fr; } }

/* galería: antes / después */
.gal-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 40px; margin-top: 56px; }
.gcase h3 { font-size: 17px; font-weight: 700; margin: 16px 0 6px; display: flex; gap: 10px; align-items: baseline; }
.gcase h3 .gn { font-family: var(--serif); color: var(--g1); font-weight: 500; font-size: 20px; }
.gcase p { font-size: 15px; color: #333; line-height: 1.55; font-family: var(--serif); font-style: italic; }
.ba { position: relative; aspect-ratio: 5 / 3; background: #fff; border: 1px solid var(--grid); overflow: hidden; container-type: inline-size; --p: 50%; user-select: none; touch-action: pan-y; }
.ba .ba-l { position: absolute; inset: 0; }
.ba .ba-l svg { width: 100%; height: 100%; display: block; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba .ba-after { clip-path: inset(0 0 0 var(--p)); }
.ba .ba-line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.ba .ba-line::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.ba .ba-tag { position: absolute; bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; background: rgba(255,255,255,.9); pointer-events: none; }
.ba .ba-tag.l { left: 10px; color: var(--muted); } .ba .ba-tag.r { right: 10px; color: var(--green-ink); }
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
@media (max-width: 760px) { .gal { grid-template-columns: 1fr; } }

/* SVG genérico de gráficos */
.cv text { font-family: var(--sans); fill: var(--muted); font-size: 11px; }
.cv .t-ink { fill: var(--ink); font-weight: 600; }
.cv .t-grn { fill: var(--green-ink); font-weight: 700; }
.cv .t-ttl { fill: var(--ink); font-weight: 700; font-size: 12px; }
.cv .ax { stroke: #999; stroke-width: 1; }
.cv .gr { stroke: var(--grid); stroke-width: 1; }

/* ilusiones */
.illus { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 1100px) { .illus { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .illus { grid-template-columns: 1fr; } }
.ill { background: #fff; border: 1px solid var(--grid); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ill h3 { font-size: 15px; font-weight: 700; }
.ill .ill-v { position: relative; aspect-ratio: 16 / 10; }
.ill .ill-v svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .45s ease; }
.ill .ill-v .st-b { opacity: 0; }
.ill.fixed .ill-v .st-a { opacity: 0; }
.ill.fixed .ill-v .st-b { opacity: 1; }
.ill p { font-size: 13.5px; color: var(--muted); line-height: 1.5; min-height: 2.9em; }
.ill .seg button { font-size: 12px; padding: 6px 12px; min-height: 32px; }

/* guess → reveal */
.guess { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.guess .opts { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.guess .opts button { font: inherit; font-size: 16px; text-align: left; padding: 14px 16px; border: 1px solid var(--grid); background: #fff; border-radius: 6px; cursor: pointer; display: flex; gap: 14px; align-items: center; transition: all .25s ease; }
.guess .opts button b { font-family: var(--serif); font-size: 22px; font-weight: 500; width: 20px; }
.guess .opts button:hover:not([disabled]) { border-color: var(--ink); }
.guess .opts button[disabled] { cursor: default; }
.guess .opts button.right { border-color: var(--green); background: var(--green-wash); color: var(--green-ink); font-weight: 700; }
.guess .opts button.picked:not(.right) { border-color: var(--ink); }
.guess .fb { min-height: 5.5em; margin-top: 18px; }
.guess .fb .ds-h3 { font-size: clamp(22px, 2.4vw, 30px); }
.guess .fb p { font-size: 15px; color: #333; margin-top: 8px; line-height: 1.6; }
@media (max-width: 860px) { .guess { grid-template-columns: 1fr; } }

/* selector de tarea */
.task { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.task .seg { border-radius: 12px; }
.task .seg button { border-radius: 8px; }
.task .tq { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; margin: 22px 0 10px; min-height: 3.6em; }
.task .tk { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); }
@media (max-width: 860px) { .task { grid-template-columns: 1fr; } }

/* incertidumbre */

/* 8 puntos y espacio en blanco */
/* 8 puntos: tarjetas KPI reales con sus distancias medidas (en px de verdad) */
.sp8 { container-type: inline-size; background: #fff; border: 1px solid var(--grid); padding: 32px clamp(12px, 3cqw, 28px) 18px; }
.sp8-row { display: flex; align-items: flex-start; }
.sp8-card { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--g2); transition: padding .6s var(--ease-io); }
.sp8-card .l { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.1; }
.sp8-card .v { font-family: var(--serif); font-size: clamp(19px, 4.4cqw, 30px); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp8-card.c1 .v { color: #4A3E79; }
.sp8-card .d { font-size: 11px; color: var(--muted); line-height: 1.25; }
.sp8 .sp { display: block; position: relative; flex: none; background: rgba(107, 92, 165, .16); transition: height .6s var(--ease-io), width .6s var(--ease-io); }
.sp8 .sp b { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font: 700 9px/1 var(--sans); color: #4A3E79; font-variant-numeric: tabular-nums; }
.sp8 .sp b::after { transition: opacity .3s ease; }
.sp8 .gx { align-self: stretch; }
.sp8 .gx b { right: auto; left: 50%; top: -14px; transform: translateX(-50%); }
.sp8-key { margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.sp8-key i { display: inline-block; width: 12px; height: 8px; margin-right: 6px; vertical-align: -1px; background: rgba(107, 92, 165, .16); }
.sp8[data-s="irr"] .c1 .pt { height: 13px; } .sp8[data-s="irr"] .c1 .pt b::after { content: '13'; }
.sp8[data-s="irr"] .c1 .g1 { height: 5px; } .sp8[data-s="irr"] .c1 .g1 b::after { content: '5'; }
.sp8[data-s="irr"] .c1 .g2 { height: 9px; } .sp8[data-s="irr"] .c1 .g2 b::after { content: '9'; }
.sp8[data-s="irr"] .c1 .pb { height: 22px; } .sp8[data-s="irr"] .c1 .pb b::after { content: '22'; }
.sp8[data-s="irr"] .c1 { padding-inline: 11px; }
.sp8[data-s="irr"] .c2 .pt { height: 7px; } .sp8[data-s="irr"] .c2 .pt b::after { content: '7'; }
.sp8[data-s="irr"] .c2 .g1 { height: 11px; } .sp8[data-s="irr"] .c2 .g1 b::after { content: '11'; }
.sp8[data-s="irr"] .c2 .g2 { height: 4px; } .sp8[data-s="irr"] .c2 .g2 b::after { content: '4'; }
.sp8[data-s="irr"] .c2 .pb { height: 16px; } .sp8[data-s="irr"] .c2 .pb b::after { content: '16'; }
.sp8[data-s="irr"] .c2 { padding-inline: 7px; }
.sp8[data-s="irr"] .c3 .pt { height: 18px; } .sp8[data-s="irr"] .c3 .pt b::after { content: '18'; }
.sp8[data-s="irr"] .c3 .g1 { height: 3px; } .sp8[data-s="irr"] .c3 .g1 b::after { content: '3'; }
.sp8[data-s="irr"] .c3 .g2 { height: 12px; } .sp8[data-s="irr"] .c3 .g2 b::after { content: '12'; }
.sp8[data-s="irr"] .c3 .pb { height: 9px; } .sp8[data-s="irr"] .c3 .pb b::after { content: '9'; }
.sp8[data-s="irr"] .c3 { padding-inline: 18px; }
.sp8[data-s="sys"] .c1 .pt { height: 16px; } .sp8[data-s="sys"] .c1 .pt b::after { content: '16'; }
.sp8[data-s="sys"] .c1 .g1 { height: 8px; } .sp8[data-s="sys"] .c1 .g1 b::after { content: '8'; }
.sp8[data-s="sys"] .c1 .g2 { height: 8px; } .sp8[data-s="sys"] .c1 .g2 b::after { content: '8'; }
.sp8[data-s="sys"] .c1 .pb { height: 16px; } .sp8[data-s="sys"] .c1 .pb b::after { content: '16'; }
.sp8[data-s="sys"] .c1 { padding-inline: 16px; }
.sp8[data-s="sys"] .c2 .pt { height: 16px; } .sp8[data-s="sys"] .c2 .pt b::after { content: '16'; }
.sp8[data-s="sys"] .c2 .g1 { height: 8px; } .sp8[data-s="sys"] .c2 .g1 b::after { content: '8'; }
.sp8[data-s="sys"] .c2 .g2 { height: 8px; } .sp8[data-s="sys"] .c2 .g2 b::after { content: '8'; }
.sp8[data-s="sys"] .c2 .pb { height: 16px; } .sp8[data-s="sys"] .c2 .pb b::after { content: '16'; }
.sp8[data-s="sys"] .c2 { padding-inline: 16px; }
.sp8[data-s="sys"] .c3 .pt { height: 16px; } .sp8[data-s="sys"] .c3 .pt b::after { content: '16'; }
.sp8[data-s="sys"] .c3 .g1 { height: 8px; } .sp8[data-s="sys"] .c3 .g1 b::after { content: '8'; }
.sp8[data-s="sys"] .c3 .g2 { height: 8px; } .sp8[data-s="sys"] .c3 .g2 b::after { content: '8'; }
.sp8[data-s="sys"] .c3 .pb { height: 16px; } .sp8[data-s="sys"] .c3 .pb b::after { content: '16'; }
.sp8[data-s="sys"] .c3 { padding-inline: 16px; }
.sp8[data-s="irr"] .gx1 { width: 13px; } .sp8[data-s="irr"] .gx1 b::after { content: '13'; }
.sp8[data-s="irr"] .gx2 { width: 22px; } .sp8[data-s="irr"] .gx2 b::after { content: '22'; }
.sp8[data-s="sys"] .gx1 { width: 16px; } .sp8[data-s="sys"] .gx1 b::after { content: '16'; }
.sp8[data-s="sys"] .gx2 { width: 16px; } .sp8[data-s="sys"] .gx2 b::after { content: '16'; }

/* espacio en blanco: el mismo mini informe con tres usos del espacio */
.ws { container-type: inline-size; background: #fff; border: 1px solid var(--grid); aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.ws .wsb { position: absolute; display: flex; flex-direction: column; gap: .3cqw; padding: 1.6cqw 1.8cqw; background: #F2F2F2; transition: left .8s var(--ease-io), top .8s var(--ease-io), width .8s var(--ease-io), height .8s var(--ease-io), opacity .6s ease, background-color .6s ease, padding .8s var(--ease-io); }
.ws .kl { font-size: max(9px, 1.35cqw); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.1; white-space: nowrap; }
.ws .kv { font-family: var(--serif); font-size: 3.6cqw; line-height: 1; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; transition: font-size .8s var(--ease-io); }
.ws .kd { font-size: max(9px, 1.3cqw); color: var(--muted); white-space: nowrap; }
.ws .wsb svg { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.ws .wsb polyline { fill: none; stroke: #6B5CA5; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ws .wb { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.ws .wb i { display: block; height: max(5px, 1.3cqw); background: var(--g1); }
.ws .wb i.hero { background: #6B5CA5; }
.ws-tag { position: absolute; font: 700 max(9px, 1.25cqw)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #4A3E79; opacity: 0; transition: opacity .5s ease .3s; }
/* sin aire: margen y huecos de 1 % */
.ws[data-s="c"] .w1 { left: 1%; top: 1.5%; width: 32%; height: 40%; } .ws[data-s="c"] .w2 { left: 34%; top: 1.5%; width: 32%; height: 40%; } .ws[data-s="c"] .w3 { left: 67%; top: 1.5%; width: 32%; height: 40%; }
.ws[data-s="c"] .w4 { left: 1%; top: 43%; width: 48.5%; height: 55.5%; } .ws[data-s="c"] .w5 { left: 50.5%; top: 43%; width: 48.5%; height: 55.5%; }
/* agrupa: margen amplio, poco aire dentro del grupo y mucho entre grupos */
.ws[data-s="s"] .w1 { left: 6%; top: 10%; width: 28.5%; height: 24%; } .ws[data-s="s"] .w2 { left: 35.75%; top: 10%; width: 28.5%; height: 24%; } .ws[data-s="s"] .w3 { left: 65.5%; top: 10%; width: 28.5%; height: 24%; }
.ws[data-s="s"] .w4 { left: 6%; top: 50%; width: 43.6%; height: 42%; } .ws[data-s="s"] .w5 { left: 50.4%; top: 50%; width: 43.6%; height: 42%; }
.ws[data-s="s"] .t1 { left: 6%; top: 4.5%; opacity: 1; } .ws[data-s="s"] .t2 { left: 6%; top: 44.5%; opacity: 1; }
/* da énfasis: la cifra principal sola, rodeada de aire; lo demás, pequeño y a un lado */
.ws[data-s="e"] .w1 { left: 8%; top: 14%; width: 46%; height: 70%; background: transparent; justify-content: center; }
.ws[data-s="e"] .w1 .kv { font-size: 10cqw; } .ws[data-s="e"] .w1 .kd { font-size: max(10px, 1.8cqw); } .ws[data-s="e"] .w1 .kl { font-size: max(10px, 1.7cqw); }
.ws[data-s="e"] .w2 { left: 64%; top: 14%; width: 28%; height: 18%; opacity: .75; } .ws[data-s="e"] .w3 { left: 64%; top: 36%; width: 28%; height: 18%; opacity: .75; }
.ws[data-s="e"] .w4 { left: 64%; top: 58%; width: 13.5%; height: 26%; opacity: .6; } .ws[data-s="e"] .w5 { left: 78.5%; top: 58%; width: 13.5%; height: 26%; opacity: .6; }
.ws[data-s="e"] .w2 .kv, .ws[data-s="e"] .w3 .kv { font-size: 2.6cqw; }
.ws[data-s="e"] .w4 .kl, .ws[data-s="e"] .w5 .kl { display: none; }
.ws[data-s="e"] .t3 { left: 8%; top: 88%; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ws .wsb, .ws .kv, .ws-tag, .sp8 .sp, .sp8-card { transition: none; } }

/* lo que es / lo que podría ser */
.whatif { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.whatif > div { padding: 30px 0 0; }
.whatif > div + div { padding-left: clamp(20px, 4vw, 48px); border-left: 1px solid var(--grid); }
.whatif .ul { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.whatif .ds-num { font-size: clamp(56px, 8vw, 120px); display: block; margin: 12px 0 18px; }
.whatif .wb { height: 14px; background: var(--g1); width: 0; transition: width 1.2s var(--ease-io); }
.whatif .w2 .wb { background: var(--green); }
.whatif .w2 .ds-num { color: var(--green); }
.whatif.in .w1 .wb { width: 82.35%; }
.whatif.in .w2 .wb { width: 100%; transition-delay: .5s; }
.whatif .gap { margin-top: 20px; font-size: 15px; color: var(--muted); }
.whatif .gap b { color: var(--green-ink); font-size: 18px; }
@media (max-width: 640px) { .whatif { grid-template-columns: 1fr; } .whatif > div + div { border-left: 0; padding-left: 0; } }

/* cuatro preguntas / siete reglas */
.fourq { list-style: none; counter-reset: q; }
.fourq li { counter-increment: q; display: grid; grid-template-columns: 64px 1fr; padding: 22px 0; border-top: 1px solid var(--grid); font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; }
.fourq li::before { content: counter(q, decimal-leading-zero); font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--muted); padding-top: .6em; }
.rules { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.rules li { padding: 22px 0; border-top: 1px solid var(--grid); display: grid; grid-template-columns: 48px 1fr; align-items: baseline; font-size: 18px; font-weight: 600; line-height: 1.4; }
.rules li span { font-family: var(--serif); color: var(--g1); font-size: 22px; font-weight: 500; }
.rules li:last-child { grid-column: 1 / -1; border-top-color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); }
.rules li:last-child span { color: var(--green); }
@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } }

/* bing bang bongo */
.bbb { position: relative; margin-top: 40px; }
.bbb .track { display: grid; grid-template-columns: 1fr 3fr 1fr; border-top: 1px solid var(--ink); }
.bbb .track > div { padding: 22px 18px 0 0; }
.bbb .track > div + div { padding-left: 18px; border-left: 1px solid var(--grid); }
.bbb .bk { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.bbb .bt { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.35; margin-top: 12px; }
.bbb .dots { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.bbb .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--g2); }
.bbb .dots i.g { background: var(--green); }
.bbb .idea { display: inline-block; margin-top: 14px; padding: 6px 10px; border-left: 3px solid var(--green); font-size: 13.5px; font-weight: 600; background: var(--green-wash); color: var(--green-ink); }
@media (max-width: 760px) { .bbb .track { grid-template-columns: 1fr; } .bbb .track > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--grid); margin-top: 18px; } }

/* navegación power bi */
.pbinav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.pbinav button { font: inherit; text-align: left; background: #fff; border: 1px solid var(--grid); padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .3s var(--ease-out); position: relative; }
.pbinav button::after { content: '→'; position: absolute; right: -12px; top: 38%; color: var(--g1); font-size: 14px; }
.pbinav button:last-child::after { display: none; }
.pbinav button[aria-pressed="true"] { border-color: var(--ink); }
.pbinav .thumb { aspect-ratio: 16 / 9; background: var(--bg); position: relative; overflow: hidden; }
.pbinav .thumb i { position: absolute; background: var(--g2); }
.pbinav button[aria-pressed="true"] .thumb i.h { background: var(--green); }
.pbinav .pn { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.pbinav button[aria-pressed="true"] .pn { color: var(--ink); }
.pbinav .pd { font-size: 13.5px; color: #333; line-height: 1.45; }
.pbi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pbi-chips span { font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--grid); border-radius: 99px; color: var(--muted); background: #fff; }
@media (max-width: 760px) { .pbinav { grid-template-columns: 1fr 1fr; } .pbinav button::after { display: none; } }

/* dos dashboards */
.two-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.roles { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 0; }
.roles li { display: grid; grid-template-columns: 26px 1fr; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--grid); }
.roles li b { font-family: var(--serif); font-weight: 500; color: var(--green-ink); }
.exec { container-type: inline-size; aspect-ratio: 16 / 11; background: #fff; border: 1px solid var(--grid); position: relative; padding: 4%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 3%; }
.exec .eq { font-size: max(9px, 1.9cqw); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.exec .et { font-family: var(--serif); font-size: max(14px, 4.2cqw); line-height: 1.15; }
.exec svg { width: 100%; height: 100%; overflow: visible; }
.exec .ea { display: flex; gap: 4%; align-items: stretch; font-size: max(10px, 2cqw); }
.exec .ea > div { flex: 1; padding: 2.4% 3%; border-left: 3px solid var(--g1); background: var(--bg); line-height: 1.35; }
.exec .ea > div.g { border-color: var(--green); background: var(--green-wash); }
.exec .ea b { display: block; font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.exec .ea > div.g b { color: var(--green-ink); }
@media (max-width: 860px) { .two-dash { grid-template-columns: 1fr; } }

/* pruebas finales de accesibilidad */
.a11y { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.a11y .tests { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ink); }
.a11y .tests button { font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--grid); padding: 16px 4px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.a11y .tests button .tn { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.a11y .tests button .tq { font-family: var(--serif); font-size: 19px; grid-column: 1; }
.a11y .tests button .tr { grid-row: span 2; align-self: center; font-size: 12px; font-weight: 700; color: var(--g1); }
.a11y .tests button[aria-pressed="true"] .tn { color: var(--green-ink); }
.a11y .tests button[aria-pressed="true"] .tr { color: var(--green-ink); }
.a11y .tests button:hover .tq { text-decoration: underline; text-decoration-color: var(--g1); text-underline-offset: 4px; }
.a11y .aexp { margin-top: 18px; font-size: 15px; line-height: 1.6; color: #333; min-height: 5em; }
@media (max-width: 860px) { .a11y { grid-template-columns: 1fr; } }


/* réplica */
.replay-row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 28px; }
.btn-ds {
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: 0; padding: 15px 22px; cursor: pointer; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 10px; transition: background .2s ease;
}
.btn-ds:hover { background: var(--green); }
.btn-ds.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-ds.ghost:hover { background: var(--ink); color: #fff; }
.btn-ds[aria-pressed="true"] { background: var(--green); }
.replay-log { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; }
.replay-log li { transition: color .2s ease; }
.replay-log li::after { content: '→'; margin-left: 6px; color: var(--g2); }
.replay-log li:last-child::after { content: ''; }
.replay-log li.on { color: var(--green-ink); font-weight: 700; }

/* cierre: zoom out */
.mosaic-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; }
.mosaic {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 1.4%; transform-origin: 62.5% 50%; transition: transform 1.3s var(--ease-io);
}
.mosaic .tile { background: #fff; border: 1px solid var(--grid); position: relative; overflow: hidden; padding: 5%; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .6s ease; text-decoration: none; color: inherit; }
.mosaic .tile .m-n { font-size: max(8px, 1.4cqw); font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.mosaic .tile .m-t { font-family: var(--serif); font-size: max(10px, 2cqw); line-height: 1.15; }
.mosaic .tile .m-v { flex: 1; position: relative; margin: 6% 0; }
.mosaic .tile .m-v i { position: absolute; background: var(--g2); }
.mosaic .tile .m-v i.g { background: var(--green); }
.mosaic .tile .m-v i.k { background: var(--ink); }
.mosaic .tile[data-go] { cursor: pointer; }
.mosaic .tile.main { grid-column: 2 / 4; grid-row: 2; padding: 0; border: 0; background: transparent; }
.mosaic .tile.main .dash-wrap { height: 100%; }
.mosaic .tile .flag {
  position: absolute; left: 6%; right: 6%; bottom: 6%; background: var(--ink); color: #fff; font-size: max(8px, 1.35cqw); font-weight: 700;
  padding: 3% 5%; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s var(--ease-out);
}
.mosaic-wrap[data-z="0"] .mosaic { transform: scale(2.02); }
.mosaic-wrap[data-z="1"] .mosaic { transform: scale(1.62); }
.mosaic-wrap[data-z="2"] .mosaic { transform: scale(1.3); }
.mosaic-wrap[data-z="3"] .mosaic, .mosaic-wrap[data-z="4"] .mosaic { transform: scale(1); }
.mosaic-wrap[data-z="0"] .tile:not(.main) { opacity: .0; }
.mosaic-wrap[data-z="1"] .tile:not(.main):not(.z1) { opacity: 0; }
.mosaic-wrap[data-z="2"] .tile:not(.main):not(.z1):not(.z2) { opacity: 0; }
.mosaic-wrap[data-z="4"] .tile .flag { opacity: 1; transform: none; }
.mosaic-wrap[data-z="4"] .tile:nth-child(3) .flag { transition-delay: .15s; }
.mosaic-wrap[data-z="4"] .tile:nth-child(4) .flag { transition-delay: .3s; }
.mosaic-wrap[data-z="4"] .tile:nth-child(5) .flag { transition-delay: .45s; }
.mosaic-wrap[data-z="4"] .tile:nth-child(6) .flag { transition-delay: .6s; }
.mosaic-wrap[data-z="4"] .tile:nth-child(7) .flag { transition-delay: .75s; }

.finale { display: flex; flex-direction: column; gap: 28px; padding-block: 24px 88px; }
.finale .sig { display: flex; flex-direction: column; gap: 10px; }
.finale .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.finale .ctas a { text-decoration: none; }

/* créditos / fuentes */
.refs { list-style: none; columns: 2; column-gap: 48px; font-size: 13.5px; line-height: 1.55; color: #333; }
.refs li { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--grid); }
.refs a { color: var(--green-ink); }
@media (max-width: 760px) { .refs { columns: 1; } }

/* hero title */
.hero-top { padding-top: clamp(40px, 8vh, 88px); }
.hero-top .ds-kicker { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.scroll-cue {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 26px;
  transition: opacity .5s ease, transform .5s ease;
}
.scroll-cue.sc-hide { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.sc-track { position: relative; width: 1px; height: 34px; background: var(--grid); flex: none; }
.sc-track .sc-dot {
  position: absolute; left: 50%; top: 46%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--ink); opacity: 1;
  animation: sc-travel 2.6s cubic-bezier(.45,0,.2,1) infinite;
}
.sc-track .sc-chevron {
  position: absolute; left: 50%; bottom: -7px; width: 6px; height: 6px; margin-left: -3px;
  border-right: 1px solid var(--g1); border-bottom: 1px solid var(--g1); transform: rotate(45deg);
}
.sc-label { font-size: 13px; color: var(--muted); letter-spacing: .01em; }
@keyframes sc-travel {
  0%   { top: 0;    opacity: 0; }
  14%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.intro .ds-body p { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.5; color: #222; }
.intro .ds-body p.q { padding-left: 22px; border-left: 2px solid var(--grid); margin-top: .35em; }
.intro .ds-body p.q + p.q { margin-top: .1em; }
.intro .ds-body p.q b { font-weight: 600; }

/* aislar sticky del overflow del body: .ds no debe tener overflow */
.ds { overflow: visible; }

/* reduced motion: todo cambia de estado al instante; el contenido no depende del movimiento */
@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  .timer .tr-fg { stroke-dashoffset: 0 !important; }
}

/* trazos adicionales del stage */
.stage .ov .p-faint { stroke: var(--g2); stroke-width: 1.5; }
.stage .ov .p-ink2 { stroke: var(--ink); stroke-width: 2; }
.stage .ov .p-line2 { stroke: var(--g1); stroke-width: 2.5; }
.stage .ov .p-c0 { stroke: #E07B39; stroke-width: 2.5; }
.stage .ov .p-c1 { stroke: #4F9A4A; stroke-width: 2.5; }
.stage .ov .p-c2 { stroke: #6A7FD1; stroke-width: 2.5; }
.stage .ov .p-dash1 { stroke-dasharray: 8 5; }
.stage .ov .p-dash2 { stroke-dasharray: 2 4; }
.stage .ov .p-l0 { stroke: #4472C4; stroke-width: 2; }
.stage .ov .p-l1 { stroke: #ED7D31; stroke-width: 2; }
.stage .ov .p-l2 { stroke: #A5A5A5; stroke-width: 2; }
.stage .ov .p-l3 { stroke: #FFC000; stroke-width: 2; }
.stage .ov .rg-g { fill: rgba(60,138,55,.06); stroke: var(--green); }
.stage { transition: filter .5s ease; }
.stage.gs { filter: grayscale(1); }
.stage .lb.wht { color: #fff; }

.dash.story .slicers { display: none; }
.hero .sc-steps { padding-top: 6vh; }
.hero .step:first-child { min-height: 64vh; }
.stage .mk { z-index: 1; }
.stage .lb { z-index: 2; }
.dash.prio .p-k4 { opacity: 0 !important; }
.dash.prio .annot { top: 44%; }
.mosaic .tile.main .viz { height: 100%; display: flex; justify-content: center; }
.mosaic .tile.main .dash-wrap { height: 100%; width: auto; aspect-ratio: 16 / 11; }
.mosaic .tile.main .dash { height: 100%; }
.mosaic .tile.main .dash { font-size: 1.32cqw; }
.dash.navs .p-head .tt { max-width: 66%; }

.stage .lb.ann2 { white-space: normal; color: var(--ink); font-family: var(--serif); font-size: clamp(14px, 2.4cqw, 20px); line-height: 1.3; }
.stage .lb.ann2 b { color: var(--green-ink); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   MOTION SYSTEM + MATERIALES (2026-09)
   Regla: el movimiento solo existe si explica qué acaba de cambiar.
   Todo lo de aquí degrada a estado final con prefers-reduced-motion
   (bloque global con !important más arriba) y funciona sin JS
   de terceros: GSAP/Lenis solo refinan, nunca son imprescindibles.
   ═══════════════════════════════════════════════════════════════ */
.ds {
  /* duraciones del sistema */
  --dur-micro: 150ms;   /* hover, press */
  --dur-ui: 250ms;      /* interacción */
  --dur-reveal: 450ms;  /* aparición de contenido */
  --dur-narr: 700ms;    /* cambio de estado narrativo */
  /* curvas: entrar desacelerando, salir acelerando (lo que se va, se va) */
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --acc-rgb: 107, 92, 165;
  position: relative; isolation: isolate;
}

/* ─── PAPEL: grano procedural impreso (ds/materials/paper.js lo genera) ─── */
.ds::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--paper, none); background-size: 200px 200px;
}

/* ─── BARRA DE PROGRESO EDITORIAL ─── */
#progressBar {
  height: 3px; background: #6B5CA5; transform-origin: 0 0;
  transform: scaleX(var(--p, 0)) scaleY(var(--th, .67));
  transition: transform .14s linear; box-shadow: 0 0 10px rgba(107, 92, 165, .2);
}
.ds-ticks { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 1002; pointer-events: none; }
.ds-ticks i { position: absolute; top: 0; width: 1px; height: 6px; background: rgba(17, 17, 17, .16); transition: background .3s ease; }
.ds-ticks i.past { background: rgba(107, 92, 165, .85); }

/* ─── RAIL: la marca activa crece con el avance dentro del capítulo ─── */
.ch-rail a { transition: color .25s ease, transform .35s var(--ease-out); }
.ch-rail a[aria-current="step"] { transform: translateX(2px); }
.ch-rail a[aria-current="step"]::before { width: 30px; transform-origin: 0 50%; transform: scaleX(calc(.4 + .6 * var(--cp, 0))); transition: transform .18s linear; }

/* ─── BOTONES ─── */
.btn-ds { transition: background var(--dur-ui) ease, color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); }
.btn-ds:active { transform: scale(.98); }
.btn-ds .arr { position: relative; display: inline-block; width: 1em; height: 1.2em; overflow: hidden; vertical-align: -.22em; }
.btn-ds .arr i { position: absolute; inset: 0; font-style: normal; text-align: center; transition: transform var(--dur-ui) var(--ease-out); }
.btn-ds .arr i + i { transform: translateX(-115%); }
.btn-ds:hover .arr i:first-child, .btn-ds:focus-visible .arr i:first-child { transform: translateX(115%); }
.btn-ds:hover .arr i + i, .btn-ds:focus-visible .arr i + i { transform: none; }
.btn-ds .spin { display: inline-block; transition: transform .6s var(--ease-out); }
.btn-ds:hover .spin, .btn-ds:focus-visible .spin { transform: rotate(-180deg); }

/* enlaces de texto: subrayado tenue en reposo (se sigue viendo que es un enlace), trazo al pasar */
.ds .src-b a, .ds .refs a {
  text-decoration: none; padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--g1), var(--g1));
  background-size: 0% 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out);
}
.ds .src-b a:hover, .ds .refs a:hover,
.ds .src-b a:focus-visible, .ds .refs a:focus-visible { background-size: 100% 1px, 100% 1px; }

/* tarjetas: una elevación mínima al señalar, nunca un salto */
.ill, .pbinav button { transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease, border-color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) {
  .ill:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -24px rgba(17, 17, 17, .4); }
  .pbinav button:hover { transform: translateY(-2px); }
}
.ds-gsap .rv-seq > * { transition: none !important; }

/* ─── NÚMEROS QUE SE CONSTRUYEN (ds/motion/numbers.js parte cada cifra) ─── */
.nb { display: inline-block; }
.nbw.build .nb { animation: dsSlot .52s var(--ease-out) backwards; animation-delay: calc(var(--nb-base, 0ms) + var(--ci, 0) * 34ms); }
@keyframes dsSlot { from { opacity: 0; transform: translateY(.42em); } }

/* ─── HERO: el dashboard como objeto físico ─── */
.hero .sc-visual { perspective: 1500px; }
.hero .dash-wrap {
  border-radius: 6px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .9s var(--ease-out);
  animation: dsEnter 1.25s var(--ease-out) .12s backwards;
}
/* la sombra es una capa propia: inclinar y respirar solo mueve/atenúa esa capa (compositor, sin repintar) */
.hero .dash-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; pointer-events: none;
  box-shadow: 0 24px 56px -32px rgba(17, 17, 17, .34);
  transform: translate(calc(var(--sx, 0) * 1px), calc(var(--sy, 0) * 1px));
  transition: transform .9s var(--ease-out), opacity 1.2s ease;
}
@keyframes dsEnter { from { opacity: 0; transform: translateY(30px) rotateX(9deg) scale(.965); } }
.hero .dash .cam > .pn { animation: dsPanel .8s var(--ease-out) backwards; animation-delay: calc(.5s + var(--pi, 0) * 70ms); }
@keyframes dsPanel { from { opacity: 0; transform: translateY(.9em); } }
.hero .dash-wrap.breathe::before { animation: dsBreathe 7.5s ease-in-out infinite; }
@keyframes dsBreathe { 50% { opacity: .62; transform: translateY(5px) scale(1.012); } }
.ds-glass { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .7s ease; }
.ds-glass.on { opacity: 1; }

/* dashboards fuera del scroll: profundidad al señalar (ds/motion/depth.js) */
.depth { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.depth.is-near { box-shadow: calc(var(--sx, 0) * 1px) calc(18px + var(--sy, 0) * 1px) 40px -28px rgba(17, 17, 17, .32); }
.depth::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 9;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .6), transparent 55%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .5s ease;
}
.depth.is-near::after { opacity: 1; }
.exec.depth, .tchart.depth { position: relative; }

/* ─── 04 · DESMONTAJE: lo que era ruido se separa, pierde opacidad y sale del lienzo ─── */
.dash .ph { background: transparent; isolation: isolate; }
.dash .ph::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: #2F4A7A; transform-origin: 50% 0;
  transition: transform .6s var(--ease-in), opacity .5s ease .05s;
}
.dash.flat .ph::before { transform: translateY(-70%) scaleY(.25); opacity: 0; }
.dash .p-head .brand { transition: opacity .45s ease, transform .6s var(--ease-in); }
.dash.flat .p-head .brand { transform: translate(-.8em, -.6em) scale(.6) rotate(-8deg); }
.dash .bars .gridv, .dash .axis-x, .dash .legend { transition: opacity .45s ease, transform .6s var(--ease-in); }
.dash.lessgrid .gridv { transform: translateY(.9em); }
.dash.lessgrid .axis-x { transform: translateY(1.3em); }
.dash.direct .legend { transform: translateY(-.9em); }

.sc-visual--stack { flex-direction: column; gap: 14px; }
.noise-ledger { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; margin: 0; padding: 0; font-size: 12px; }
.noise-ledger li { position: relative; padding: 4px 10px; border: 1px solid var(--grid); border-radius: 99px; color: var(--ink); background: #fff; transition: color .4s ease, border-color .4s ease, background .4s ease, transform .5s var(--ease-out); }
.noise-ledger li[data-f]::after { content: ''; position: absolute; left: 9px; right: 9px; top: 52%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out) .12s; }
.noise-ledger li.is-out { color: #8a8a8a; border-color: transparent; background: transparent; transform: translateY(-2px); }
.noise-ledger li.is-out::after { transform: scaleX(1); }
.noise-ledger .nl-count { border: 0; background: none; margin-left: auto; color: var(--green-ink); font-weight: 700; }
@media (max-width: 860px) { .noise-ledger li[data-f] { display: none; } .noise-ledger { justify-content: flex-end; } }

/* ─── 05 · LINTERNA NARRATIVA (canvas WebGL encima del dashboard) ─── */
.ds-spot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; border-radius: 6px; }

/* ─── 03 · LABORATORIO: los cuadrados son botones mientras tiene sentido ─── */
.lab-hint { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.viz.lab-live .stage .mk { cursor: pointer; }
.stage .mk:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .viz.lab-live .stage .mk:hover { outline: 1px solid var(--ink); outline-offset: 2px; } }

/* gestalt: la región se dibuja y después se rellena */
.stage .ov .rg.draw { stroke: var(--g1); fill-opacity: 0; transition: stroke-dashoffset .9s var(--ease-out), fill-opacity .6s ease .6s; }
.stage .ov .rg.draw.on { fill-opacity: 1; }

/* ─── 10 · BLUEPRINT: retícula → plano → cada pieza ocupa su caja ─── */
.dash .bp { position: absolute; inset: 0; pointer-events: none; }
.dash .bp-v, .dash .bp-h { position: absolute; background: rgba(17, 17, 17, .085); }
.dash .bp-v { top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: 50% 0; transition: transform .8s var(--ease-out) var(--d); }
.dash .bp-h { left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out) var(--d); }
.dash.bp-grid .bp-v, .dash.bp-grid .bp-h { transform: none; }
.dash .bp-box { position: absolute; color: rgba(17, 17, 17, .42); }
.dash .bp-box.hero { color: var(--green); }
.dash .bp-box.note { color: rgba(17, 17, 17, .28); }
.dash .bp-box .e { position: absolute; display: block; transition: transform .42s var(--ease-out); }
.dash .bp-box .e.t, .dash .bp-box .e.b { left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); transform: scaleX(0); }
.dash .bp-box .e.l, .dash .bp-box .e.r { top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(180deg, currentColor 0 5px, transparent 5px 9px); transform: scaleY(0); }
.dash .bp-box .e.t { top: 0; transform-origin: 0 50%; transition-delay: var(--d); }
.dash .bp-box .e.r { right: 0; transform-origin: 50% 0; transition-delay: calc(var(--d) + 110ms); }
.dash .bp-box .e.b { bottom: 0; transform-origin: 100% 50%; transition-delay: calc(var(--d) + 220ms); }
.dash .bp-box .e.l { left: 0; transform-origin: 50% 100%; transition-delay: calc(var(--d) + 330ms); }
.dash.bp-wire .bp-box .e { transform: none; }
.dash .bp-lb, .dash .bp-dim { position: absolute; top: .7em; font-size: .78em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .4s ease calc(var(--d) + 420ms); white-space: nowrap; }
.dash .bp-lb { left: .9em; }
.dash .bp-dim { right: .9em; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.dash.bp-wire .bp-lb, .dash.bp-wire .bp-dim { opacity: 1; }
.dash.notbl .p-tbl { opacity: 0 !important; }

/* ─── TEST DEL ELEMENTO: un solo resaltado que viaja entre filas ─── */
.etest-table { position: relative; }
.etest-table .etable { position: relative; z-index: 1; }
.etable-hl { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--green-wash); box-shadow: inset 3px 0 0 var(--green); transition: transform .38s var(--ease-out), height .38s var(--ease-out), opacity .25s ease; }
.etable.has-hl tr.hit td { background: transparent; }
.etable.has-hl tr.hit td:first-child { box-shadow: none; }
.everdict.swap { animation: dsSwap .42s var(--ease-out); }
@keyframes dsSwap { from { opacity: 0; transform: translateY(6px); } }
.etable td.stamp { animation: dsStamp .5s var(--ease-out); }
@keyframes dsStamp { 35% { transform: scale(1.14); } }
.etest .picks button { transition: border-color var(--dur-micro) ease, background var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-micro) ease; }
.etest .picks button:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  #progressBar, .ds-ticks i { transition: none !important; }
  .hero .dash-wrap, .depth { transform: none !important; }
}

/* el hero lleva cristal WebGL: el brillo CSS de .depth sería un segundo reflejo */
.hero .depth::after { display: none; }
.hero .depth.is-near { box-shadow: none; }
.dash-wrap.depth { border-radius: 6px; }

/* blueprint: cuando una pieza ocupa su caja, la etiqueta del plano se retira (no se transparenta bajo un panel atenuado) */
.dash.b-head .bp-box[data-f="b-head"] .bp-lb, .dash.b-main .bp-box[data-f="b-main"] .bp-lb, .dash.b-main .bp-box[data-f="b-main"] .bp-dim,
.dash.b-kpi .bp-box[data-f="b-kpi"] .bp-lb, .dash.b-sec .bp-box[data-f="b-sec"] .bp-lb, .dash.rec .bp-box[data-f="rec"] .bp-lb { opacity: 0; transition-delay: 0s; }

/* ═══════════════════════════════════════════════
   PLANOS DE DASHBOARD — lo que aporta PBI Mockup Creator
   Lienzo 16:9, piezas posicionadas en % por ds/manual.js (wfLayout)
   ═══════════════════════════════════════════════ */
.wf { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; background: #F4F4F4; border: 1px solid var(--grid); overflow: hidden; }
.wfb {
  position: absolute; background: #fff; border: 1px solid var(--grid); overflow: hidden;
  display: flex; align-items: flex-start; padding: max(4px, .7cqw) max(5px, .9cqw);
  transition: left var(--dur-narr) var(--ease-io), top var(--dur-narr) var(--ease-io), width var(--dur-narr) var(--ease-io), height var(--dur-narr) var(--ease-io), opacity var(--dur-reveal) ease;
}
.wfb .wl { font-size: max(8px, 1.15cqw); line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wf-hd { background: transparent; border-color: transparent; align-items: center; padding-left: 0; }
.wf-hd .wl { font-family: var(--serif); font-size: max(11px, 2cqw); color: var(--ink); }
.wf-ft { border: 1px dashed #C9C9C9; background: transparent; align-items: center; }
.seg--grid { display: inline-grid; grid-template-columns: repeat(3, auto); border-radius: 22px; }
.wf-sb { background: #EFEFEF; border-color: transparent; }
.wf-k { flex-direction: column; justify-content: space-between; }
.wf-k::after { content: ''; display: block; width: 46%; height: 26%; max-height: 18px; background: var(--g2); border-radius: 1px; }
.wf-lead { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.wf-lead .wl { color: var(--green-ink); font-weight: 600; }
.wf-b { background: #FDFDFD; }
.wf-b .wl { opacity: .8; }
[data-tgl-note="aud"], [data-tgl-note="rcp"], [data-tgl-note="hier"], [data-tgl-note="rdp"] { min-height: 6.4em; }

/* patrones de lectura: calor + recorrido + orden */
.wf-ov { position: absolute; inset: 0; pointer-events: none; }
.wf-ov .ovs { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-narr) ease; }
.wf-ov .ovs.on { opacity: 1; }
.wf-ov .heat { position: absolute; border-radius: 40%; background: radial-gradient(closest-side, rgba(var(--acc-rgb), var(--a)), rgba(var(--acc-rgb), 0)); transform: scale(1.18); }
.wf-ov svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-ov path { fill: none; stroke: var(--green); stroke-width: .28; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.wf-ov .ovs.on path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-io) .15s; }
.wf-ov b { position: absolute; width: max(16px, 2.2cqw); height: max(16px, 2.2cqw); margin: calc(max(16px, 2.2cqw) / -2) 0 0 calc(max(16px, 2.2cqw) / -2); border-radius: 50%; background: var(--green); color: #fff; font: 700 max(9px, 1.1cqw)/1 var(--sans); display: grid; place-items: center; }
.wf[data-s] .wfb .wl:empty { display: none; }


/* 07 · números de partida */
.thr { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.thr li { display: grid; grid-template-columns: minmax(150px, 1.1fr) 1.4fr 2fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--grid); align-items: baseline; }
.thr .tv { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.15; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.thr .tw { font-weight: 600; font-size: 15px; }
.thr .ty { font-size: 15px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) { .thr li { grid-template-columns: 1fr; gap: 4px; } }

/* herramienta */
.toolcard { display: grid; grid-template-columns: 1fr auto; gap: 28px 48px; align-items: center; margin-top: 64px; padding: clamp(24px, 3.4vw, 40px); background: #fff; border: 1px solid var(--grid); border-left: 3px solid var(--green); }
.toolcard .ds-h3 { margin: 10px 0 12px; }
.toolcard .ds-body { max-width: 60ch; margin: 0; }
@media (max-width: 860px) { .toolcard { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .wfb, .wf-ov .ovs, .wf-ov .ovs.on path { transition: none !important; }
}

/* ═══ 06 · ANATOMÍA DE UN KPI (tarjeta de PBI Mockup Creator, en grises) ═══ */
.kc { position: relative; display: flex; background: #fff; border: 1px solid var(--grid); min-height: 104px; }
.kc-t { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px 10px 16px 18px; }
.kc-l { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-v { font-family: var(--sans); font-weight: 600; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.05; letter-spacing: -.02em; margin: 8px 0 10px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-d { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; }
.kc-d b { font-weight: 700; padding: 2px 7px; border-radius: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-d span { color: var(--muted); white-space: nowrap; }
.kc.good .kc-d b { color: var(--green-ink); background: var(--green-wash); }
.kc.bad .kc-d b { color: var(--red); background: #F7E7EB; }
.kc-g { position: relative; flex: 0 0 40%; transition: flex-basis var(--dur-narr) var(--ease-io), opacity var(--dur-ui) ease; }
.kc-g svg { position: absolute; left: 0; right: 14px; top: 18px; bottom: 18px; width: calc(100% - 14px); height: calc(100% - 36px); transition: opacity var(--dur-ui) ease; }
.kc-g .kg-dot { top: calc(18px + (100% - 36px) * var(--f, .5)); position: absolute; right: 11px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #5a5a5a; transition: opacity var(--dur-ui) ease; }
.kan[data-s="none"] .kc-g { flex-basis: 0; opacity: 0; }
.kan[data-s="spark"] .kg-c, .kan[data-s="cols"] .kg-l, .kan[data-s="cols"] .kg-dot { opacity: 0; }
.kan[data-s="none"] .kg-l, .kan[data-s="none"] .kg-c, .kan[data-s="none"] .kg-dot { opacity: 0; }
.kan-top { display: grid; grid-template-columns: minmax(0, 1.05fr) 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin: 34px 0 28px; }
.kc--xl { min-height: 200px; }
.kc--xl .kc-t { padding: 30px 16px 30px 34px; }
.kc--xl .kc-l { font-size: 13px; }
.kc--xl .kc-v { font-size: clamp(38px, 4.4vw, 58px); margin: 14px 0 18px; }
.kc--xl .kc-d { font-size: 14px; gap: 9px; }
.kc--xl .kc-g svg { right: 26px; top: 34px; bottom: 34px; width: calc(100% - 26px); height: calc(100% - 68px); }
.kn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; font: 700 10px/1 var(--sans); font-style: normal; margin-left: 6px; vertical-align: middle; letter-spacing: 0; text-transform: none; flex: none; }
.kc-g > .kn { position: absolute; top: 8px; right: 6px; z-index: 1; margin: 0; transition: opacity var(--dur-ui) ease; }
.kan[data-s="none"] .kc-g > .kn { opacity: 0; }
.kan-list { list-style: none; counter-reset: kan; margin: 0; padding: 0; }
.kan-list li { counter-increment: kan; position: relative; padding: 0 0 14px 32px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.kan-list li b { color: var(--ink); }
.kan-list li::before { content: counter(kan); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font: 700 11px/20px var(--sans); text-align: center; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; background: #F4F4F4; border: 1px solid var(--grid); }
.kan-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; margin-top: 32px; }
.kan-foot .ds-body { margin: 0; }
@media (max-width: 1000px) { .kpi-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .kan-top, .kan-foot { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; padding: 10px; } .kc--xl .kc-t { padding: 22px 10px 22px 20px; } }

/* ═══ 06 · CATÁLOGO DE VISUALES ═══ */
.vcat { margin-top: 36px; }
.vc-g + .vc-g { margin-top: 40px; }
.vc-h { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.vc-h span { color: var(--muted); font-weight: 500; margin-left: 6px; }
.vc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--grid); }
.vc-list li { padding: 18px 18px 20px; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); background: #fff; display: flex; flex-direction: column; gap: 4px; }
.vc-list svg { width: 100%; height: auto; aspect-ratio: 164 / 100; margin-bottom: 10px; }
.vc-list b { font-size: 15px; font-weight: 600; }
.vc-list span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1000px) { .vc-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .vc-list { grid-template-columns: 1fr 1fr; } .vc-list li { padding: 14px 12px 16px; } }

/* ═══ 07 · LIENZOS A ESCALA ═══ */
.cnv { position: relative; aspect-ratio: 4 / 3; background-color: #FAFAFA; background-image: linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid var(--grid); }
.cnv .wf { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); aspect-ratio: auto; box-shadow: 0 8px 24px -12px rgba(0,0,0,.12); transition: width var(--dur-narr) var(--ease-io), height var(--dur-narr) var(--ease-io); }
.cnv-dim { position: absolute; left: 14px; bottom: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-tgl-note="cnv"], [data-tgl-note="kpi"] { min-height: 7.8em; }

/* ═══ 07 · PROPORCIONES ═══ */
.prop-ctl { display: grid; gap: 14px; margin-bottom: 20px; }
.prop-ctl label { display: grid; grid-template-columns: 64px 1fr 108px; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; }
.prop-ctl output { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.prop-ctl input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--green) var(--v, 50%), var(--grid) var(--v, 50%)); cursor: pointer; }
.prop-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--green); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.prop-ctl input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--green); }
.prop-pre { margin-bottom: 18px; }
.prop-diag { font-size: 14.5px; line-height: 1.55; padding: 12px 14px; border-left: 3px solid var(--red); background: #fff; color: var(--ink); min-height: 4.4em; }
.prop-diag.ok { border-left-color: var(--green); }

/* ═══ 07 · GESTALT APLICADA ═══ */
.gst { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); margin-top: 30px; align-items: start; }
.gst-txt p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.gst-txt p b { color: var(--ink); }
.gst-txt .gst-sub { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.25; color: var(--ink); margin-bottom: 16px; }
.gst-txt .gst-rule { color: var(--green-ink); border-top: 1px solid var(--grid); padding-top: 12px; font-weight: 500; }
.gst-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gst-pair { margin: 0; }
.gst-pair figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 13px; }
.gst-pair .ok { color: var(--green-ink); font-weight: 600; }
.gst-pair .ko { color: var(--red); font-weight: 600; }
.gst-pair em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.gst-pair .wf .wl { font-size: max(7px, 1.9cqw); }
.wf.wf--same .wfb { background: #fff; border-color: var(--grid); box-shadow: none; }
.wf.wf--same .wf-k::after { display: none; }
.wf.wf--same .wf-lead .wl { color: var(--muted); font-weight: 400; }
.wf.wf--nofig { background: #fff; }
.wf.wf--nofig .wfb { border-color: transparent; box-shadow: none; }
.wf.wf--nofig .wf-k::after { background: #F4F4F4; }
@media (max-width: 860px) { .gst { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .gst-pairs { grid-template-columns: 1fr; } .prop-ctl label { grid-template-columns: 56px 1fr 96px; gap: 10px; } }

@media (prefers-reduced-motion: reduce) {
  .kc-g, .kc-g svg, .cnv .wf { transition: none !important; }
}
.kc--xl .kc-g .kg-dot { right: 23px; top: calc(34px + (100% - 68px) * var(--f, .5)); }
.ds-h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ds-h3 a:hover { color: var(--green-ink); }

/* ═══════════════════════════════════════════════
   PORTADA — apertura de reportaje de data journalism, blanco y negro
   Un lienzo de 1280×800 (el del diseño) que escala entero: todas las
   medidas son «px de lienzo» × --u. El gráfico lo genera ds/cover.js en
   una de dos variantes (data-v="7b" semitono · "7d" rotativa).
   Por debajo de 1024px no se escala: se recompone en vertical.
   ═══════════════════════════════════════════════ */
.cover { position: relative; padding: 64px 0 0; overflow-x: clip; }
.cvx {
  --u: calc(100cqw / 1280);
  position: relative; container-type: inline-size;
  width: min(100%, 1280px, max(960px, (100svh - 80px) * 1.6)); aspect-ratio: 1280 / 800; margin: 0 auto;
  color: #111;
}
.cvx-ink { position: absolute; inset: 0; }
.cvx-tag {
  position: absolute; left: calc(64 * var(--u)); top: calc(48 * var(--u)); margin: 0;
  font-size: max(10px, 11.5 * var(--u)); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2;
  padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid #111;
}
.cvx-title {
  position: absolute; left: calc(60 * var(--u)); top: calc(92 * var(--u)); margin: 0;
  font-family: var(--serif); font-weight: 500; font-size: calc(120 * var(--u)); line-height: .9; letter-spacing: -.036em; color: #111;
}
.cvx-title em { font-style: italic; font-weight: 400; }
.cvx-side { position: absolute; left: calc(968 * var(--u)); top: calc(104 * var(--u)); width: calc(248 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.cvx-deck { margin: 0; font-family: var(--serif); font-size: max(15px, 20 * var(--u)); line-height: 1.4; color: #111; text-wrap: pretty; }
.cvx-by { margin: 0; font-size: max(11.5px, 12.5 * var(--u)); line-height: 1.5; color: #333; }
.cvx-by b { color: #111; font-weight: 700; }
.cvx-by span { display: block; white-space: nowrap; }   /* autor y rol, cada uno en su línea: sin «·» colgando */
/* acceso discreto bajo la autoría (no forma parte del lienzo) */
.cvx-start { align-self: flex-start; font-size: max(11px, 11.5 * var(--u)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #111; text-decoration: none; border-bottom: 1px solid #111; padding-bottom: 2px; }
.cvx-start span { display: inline-block; transition: transform var(--dur-ui) var(--ease-out); }
.cvx-start:hover span { transform: translateY(2px); }

.cvx-chart { position: absolute; inset: 0; pointer-events: none; }
.cvx-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.cvx-ticks { position: absolute; left: 0; right: 0; top: calc(728 * var(--u)); }
.cvx-ticks span { position: absolute; left: calc(var(--x) / 1280 * 100%); transform: translateX(-50%); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: max(9.5px, 10.5 * var(--u)); color: #333; line-height: 1.2; }

.cvx-caps { list-style: none; margin: 0; padding: 0; }
.cvx-caps li {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc((436 + var(--r) * 22) * var(--u));
  padding-left: calc(7 * var(--u)); display: flex; align-items: baseline; gap: calc(5 * var(--u)); white-space: nowrap; line-height: 1;
}
.cvx-n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: max(9px, 10 * var(--u)); color: #333; }
.cvx-t { font-size: max(10px, 12 * var(--u)); font-weight: 700; }
.cvx-foot {
  position: absolute; left: calc(64 * var(--u)); bottom: calc(22 * var(--u)); margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: max(9.5px, 10.5 * var(--u)); letter-spacing: .06em; text-transform: uppercase; color: #333;
}
.cvx-foot b { color: #111; font-weight: 500; }
/* hasta que cover.js coloque cada capítulo sobre su barra, no se enseñan */
.ds:not(.no-js) .cover:not([data-v]) .cvx-caps { visibility: hidden; }

/* ── tinta: el SVG del gráfico ── */
.cvx-svg rect { transform-box: fill-box; }
.cvx-svg .cvx-pos { fill: url(#cvx-ht1); }
.cvx-svg .cvx-neg { fill: url(#cvx-ht2); stroke: #111; stroke-width: .7; }
.cvx-svg .cvx-cap { fill: #111; }
.cvx-svg .cvx-band { fill: url(#cvx-ht2); opacity: .18; }
.cvx-svg path { fill: none; }
.cvx-svg .cvx-lead { stroke: #111; stroke-width: 1; stroke-dasharray: 1.5 3; }
.cvx-svg .cvx-axis { stroke: #111; stroke-width: 1.4; }
.cvx-svg .cvx-base { stroke: #111; stroke-width: 1; }
.cvx-svg .cvx-area { fill: url(#cvx-ht2); }
.cvx-svg .cvx-ref { stroke: #777; stroke-width: 1; stroke-dasharray: 2 4; }
.cvx-svg .cvx-raw, .cvx-svg .cvx-mean { stroke-dasharray: 1; stroke-linejoin: round; }
.cvx-svg .cvx-raw { stroke: #777; stroke-width: .8; }
.cvx-svg .cvx-mean { stroke: #111; stroke-width: 2.2; }

/* ── papel de la portada, extendido a toda la página: grano.
   El mismo papel en las dos variantes. Es tinta negra con alfa, así que pintarlo encima equivale a multiplicarlo sin pagar un modo de fusión;
   va dentro de .ds (se desplaza con la hoja) y es una imagen estática: coste de GPU ~0 ── */
.ds::after {
  content: ''; position: absolute; inset: 0; z-index: 20; pointer-events: none; background-size: 1280px 800px; background-position: center 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='800'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .28 0 0 0 -.154'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── < 1024px: se recompone en vertical ── */
@media (max-width: 1023px) {
  .cvx {
    --g: clamp(16px, 4vw, 48px);
    width: auto; aspect-ratio: auto; display: flex; flex-direction: column;
    padding: clamp(28px, 6vw, 48px) var(--g) clamp(36px, 7vw, 56px);
  }
  .cvx-ink { display: contents; }
  .cvx-tag, .cvx-title, .cvx-side, .cvx-chart, .cvx-caps, .cvx-caps li, .cvx-foot, .cvx-ticks, .cvx-svg { position: static; }
  .cvx-tag { order: 1; align-self: flex-start; font-size: 11px; padding-bottom: 7px; }
  .cvx-title { order: 2; margin-top: 22px; font-size: clamp(56px, 11vw, 96px); line-height: .92; }
  .cvx-title br { display: none; }
  .cvx-title em { display: block; }
  .cvx-side { order: 3; width: auto; max-width: 46ch; margin-top: 26px; gap: 14px; }
  .cvx-deck { font-size: clamp(18px, 2.6vw, 21px); }
  .cvx-by { font-size: 13px; }
  .cvx-start { font-size: 11.5px; margin-top: 4px; }
  .cvx-chart { order: 4; position: relative; margin: 40px calc(-1 * var(--g)) 0; }
  .cvx-svg { width: 100%; height: auto; aspect-ratio: 1280 / 206; }
  .cvx-ticks { position: relative; top: auto; height: 16px; margin-top: 6px; }
  .cvx-ticks span { top: 0; font-size: 10px; }
  .cvx-svg .cvx-lead { display: none; }
  .cvx-svg .cvx-axis { stroke-width: 3; }
  .cvx-svg .cvx-base { stroke-width: 2.5; }
  .cvx-svg .cvx-neg { stroke-width: 1.4; }
  .cvx-svg .cvx-raw { stroke-width: 1.8; }
  .cvx-svg .cvx-mean { stroke-width: 5; }
  .cvx-caps { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 26px; padding-top: 16px; border-top: 1px solid #111; }
  .cvx-caps li { padding: 0; gap: 8px; white-space: normal; line-height: 1.25; }
  .cvx-n { font-size: 10.5px; flex: none; }
  .cvx-t { font-size: 13px; }
  .cvx-foot { order: 6; margin-top: 26px; font-size: 10px; line-height: 1.6; }
}
@media (max-width: 420px) {
  .cvx-caps { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .cvx-t { font-size: 12.5px; }
}

/* ── el dashboard del hero entra cuando se ve, no mientras se lee la portada ── */
.ds:not(.no-js) .hero:not(.is-live) .dash-wrap { opacity: 0; animation: none; }
.ds:not(.no-js) .hero:not(.is-live) .dash .cam > .pn { animation: none; }

/* ── En la práctica: capturas de posts, en grises y con la misma persiana (.ba) que la galería ── */
.ba--img { aspect-ratio: 762 / 400; background: #f3f3f5; }
.ba--img .ba-l picture, .ba--img .ba-l img { display: block; width: 100%; height: 100%; }
.ba--img .ba-l img { object-fit: cover; }
.ba--img .ba-gs img { filter: grayscale(1) contrast(1.02); }   /* estático: sin coste al hacer scroll */
.ba--img .ba-tag.l { color: #333; }
#prac .gcase p + p { margin-top: 0; }
.pr-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: 12.5px; line-height: 1.4; }
.pr-meta a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--grid); padding-bottom: 1px; transition: color var(--dur-ui) ease, border-color var(--dur-ui) ease; }
.pr-meta a b { color: var(--ink); font-weight: 700; margin-right: 3px; }
.pr-meta a:hover { color: var(--ink); border-color: var(--ink); }
.pr-meta .pr-post { margin-left: auto; color: var(--ink); font-weight: 700; border-color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.pr-foot { margin-top: 40px; font-size: 14px; }
.pr-foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; }


/* ── cap. 07 · el informe de ventas que se compone paso a paso (lienzo 16:10) ── */
.sc-visual .stage.stage--pbi { aspect-ratio: 16 / 10; }
.stage--pbi .mk.blk { padding: .6em .75em; gap: .15em; }
.stage--pbi .pb-cap { font-size: .78em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.stage--pbi .pb-t { font-family: var(--serif); font-size: 1.7em; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.stage--pbi .pb-s { font-size: .95em; color: #444; line-height: 1.25; }
.stage--pbi .pb-sl { display: flex; justify-content: space-between; align-items: center; margin-top: .15em; padding: .15em .45em; border: 1px solid var(--g2); font-size: .95em; white-space: nowrap; }
.stage--pbi .pb-sl b { font-weight: 400; color: var(--muted); }
.stage--pbi .pb-kv { font-family: var(--serif); font-size: 1.85em; line-height: 1; margin-top: .1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage--pbi .pb-kv.hero { color: #4A3E79; }
.stage--pbi .pb-kd { font-size: .82em; color: var(--muted); white-space: nowrap; }
.stage--pbi .pb-ln { flex: 1; width: 100%; min-height: 0; margin-top: .3em; overflow: visible; }
.stage--pbi .pb-ln polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.stage--pbi .pb-ln .cy { stroke: #6B5CA5; stroke-width: 2; }
.stage--pbi .pb-ln .py { stroke: var(--g1); stroke-width: 1.5; }
.stage--pbi .pb-lg { display: flex; align-items: center; gap: .35em; font-size: .8em; color: var(--muted); }
.stage--pbi .pb-lg i { display: inline-block; width: 1.2em; height: 2px; background: var(--g1); margin-left: .5em; }
.stage--pbi .pb-lg i.cy { background: #6B5CA5; margin-left: 0; }
.stage--pbi .pb-br { flex: 1; display: flex; flex-direction: column; justify-content: space-around; margin-top: .2em; }
.stage--pbi .pb-br > span { display: grid; grid-template-columns: 6.6em 1fr; align-items: center; gap: .4em; font-size: .85em; }
.stage--pbi .pb-br em { font-style: normal; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage--pbi .pb-br i { display: block; height: .8em; background: var(--g2); }
.stage--pbi .pb-br i.hero { background: #6B5CA5; }
.stage--pbi .pb-tb { display: flex; flex-direction: column; margin-top: .25em; font-size: .85em; }
.stage--pbi .pb-tb > span { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; padding: .22em 0; border-top: 1px solid var(--grid); }
.stage--pbi .pb-tb .th { color: var(--muted); font-weight: 700; border-top: 0; }
.stage--pbi .pb-tb em { font-style: normal; white-space: nowrap; }
.stage--pbi .pb-tb em + em { text-align: right; font-variant-numeric: tabular-nums; }

/* en la composición final la matriz es contexto (atenuada y más pequeña): versión compacta */
.dash.prio .mx { font-size: .66em; line-height: 1.1; }
.dash.prio .mx th, .dash.prio .mx td { padding: .12em .45em; }
.dash.prio .mx tr > :nth-child(3) { display: none; }
.dash.prio .p-tbl .ph { padding-bottom: 0; }
/* dashboard pequeño (móvil): la matriz se queda con región, ventas y variación, sin cabecera */
@container (max-width: 520px) {
  .dash .mx { line-height: 1.05; }
  .dash .mx th, .dash .mx td { padding: .1em .4em; }
  .dash .mx thead, .dash .mx tr > :nth-child(3) { display: none; }
  .dash.prio .mx tfoot { display: none; }
}

/* texto accesible de las cifras que se componen carácter a carácter (motion/numbers.js) */
.nb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }