:root{
  --canvas:#EFEBE3; --surface:#E2DCD1; --plate:#14100C;
  --ink:#191817; --ink-soft:#55504A; --ink-faint:#625C53;
  /* el óxido de marca sólo aguanta 3:1 — vive en texto grande y fondos.
     El texto chico usa su paso oscuro. */
  --accent:#B4632A; --accent-txt:#8C4718; --accent-ink:#EFEBE3;
  --linea:rgba(25,24,23,.18); --linea-fuerte:rgba(25,24,23,.42);
  --display:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(20px,4vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--ink-faint) var(--surface)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--canvas);color:var(--ink);
  font:400 clamp(16px,1.05vw,17.5px)/1.62 var(--display);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.w{width:100%;max-width:1220px;margin:0 auto;padding:0 var(--gutter)}

/* el ® del sistema de TDI */
.mr{font-size:max(8.5px,.24em);vertical-align:1.15em;line-height:0;margin-left:.06em;
  font-weight:500;letter-spacing:0;opacity:.55}

/* ── barra ───────────────────────────────────────────── */
.barra{border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20;
  background:rgba(239,235,227,.94);backdrop-filter:blur(8px)}
.barra .w{display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:56px;font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft)}
.barra strong{color:var(--ink);font-weight:500}

/* ── portada ─────────────────────────────────────────── */
.portada{padding:clamp(56px,11vh,120px) 0 clamp(40px,7vh,72px)}
h1{font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:.9;
  font-size:clamp(2.9rem,9.2vw,7rem);text-wrap:balance;max-width:16ch}
h1 i{font-style:normal;color:var(--accent)}
.portada .bajada{margin-top:clamp(26px,4vh,40px);font-size:clamp(17px,1.5vw,21px);
  line-height:1.5;max-width:56ch}
.portada .fina{margin-top:18px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  max-width:62ch}

/* ── índice: filas con información, no tarjetas ──────── */
.idx{margin-top:clamp(40px,7vh,72px);border-top:1px solid var(--linea-fuerte)}
.idx a{display:grid;grid-template-columns:clamp(34px,4vw,54px) minmax(140px,1.1fr) 1.6fr auto;
  gap:clamp(12px,2vw,28px);align-items:baseline;padding:clamp(15px,2.2vh,22px) 0;
  border-bottom:1px solid var(--linea);text-decoration:none;
  transition:background .18s ease,padding-left .18s ease}
.idx a:hover,.idx a:focus-visible{background:var(--surface);padding-left:10px}
.idx .n{font:500 11.5px/1 var(--mono);letter-spacing:.14em;color:var(--accent-txt)}
.idx .nom{font-weight:800;font-size:clamp(18px,1.9vw,23px);letter-spacing:-.025em}
.idx .que{font-size:14.5px;color:var(--ink-soft);line-height:1.4}
.idx .fl{font:500 13px/1 var(--mono);color:var(--ink-faint)}
.idx a:hover .fl{color:var(--accent-txt)}
@media(max-width:760px){
  .idx a{grid-template-columns:clamp(30px,8vw,44px) 1fr;row-gap:5px}
  .idx .que{grid-column:2}.idx .fl{display:none}
}

/* ── una herramienta ─────────────────────────────────── */
.tool{border-top:1px solid var(--linea-fuerte);padding:clamp(56px,10vh,110px) 0}
.tool-cab{display:grid;grid-template-columns:clamp(34px,4vw,54px) 1fr;
  gap:clamp(12px,2vw,28px);align-items:start}
.tool-n{font:500 11.5px/1.6 var(--mono);letter-spacing:.14em;color:var(--accent-txt);padding-top:.6em}
h2{font-family:var(--display);font-weight:900;letter-spacing:-.038em;line-height:.92;
  font-size:clamp(2.4rem,6.6vw,4.8rem);text-wrap:balance}
.rol{margin-top:12px;font:500 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.promesa{margin-top:clamp(18px,3vh,28px);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.25rem,2.5vw,1.9rem);line-height:1.3;max-width:24ch;color:var(--accent)}
.tool p{margin-top:18px;max-width:66ch;line-height:1.62}
.tool p b{font-weight:600}
@media(min-width:900px){.tool-cuerpo{margin-left:calc(clamp(34px,4vw,54px) + clamp(12px,2vw,28px))}}

/* capacidades: filas medidas, no viñetas */
.caps{margin-top:clamp(26px,4vh,38px);border-top:1px solid var(--linea)}
.caps > div{display:grid;grid-template-columns:minmax(130px,.42fr) 1fr;gap:clamp(10px,2vw,26px);
  padding:13px 0;border-bottom:1px solid var(--linea);align-items:baseline}
.caps dt{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.caps dd{font-size:15px;color:var(--ink-soft);line-height:1.5}
@media(max-width:620px){.caps > div{grid-template-columns:1fr;gap:3px;padding:11px 0}}

/* ── la placa: la captura, único objeto oscuro ───────── */
.placa{margin-top:clamp(34px,5.5vh,56px)}
.placa figure{margin:0}
.placa .marco{background:var(--plate);padding:clamp(10px,1.4vw,18px);
  border:1px solid var(--linea-fuerte)}
.placa img{width:100%}
.placa figcaption{margin-top:14px;display:grid;
  grid-template-columns:clamp(34px,4vw,54px) 1fr;gap:clamp(12px,2vw,28px);align-items:start}
.placa .cn{font:500 11px/1.75 var(--mono);letter-spacing:.14em;color:var(--accent-txt)}
.placa .ct{font-size:14.5px;line-height:1.62;color:var(--ink-soft);max-width:68ch}
.placa .ct b{color:var(--ink);font-weight:600}
@media(max-width:760px){.placa figcaption{grid-template-columns:1fr;gap:6px}}

/* ── cifras ──────────────────────────────────────────── */
.cifras{margin-top:clamp(34px,5vh,50px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--linea-fuerte)}
.cifras div{padding:20px clamp(14px,2vw,26px) 20px 0;border-bottom:1px solid var(--linea)}
.cifras b{display:block;font-weight:900;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(1.9rem,3.6vw,2.9rem)}
.cifras span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}

/* ── límite: lo que no hace ──────────────────────────── */
.limite{margin-top:clamp(28px,4.5vh,42px);background:var(--surface);
  padding:clamp(20px,2.6vw,30px);max-width:78ch}
.limite h3{font:500 11px/1.45 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-txt);margin-bottom:13px}
.limite p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-soft);max-width:64ch}
.limite p+p{margin-top:10px}
.limite b{color:var(--ink);font-weight:600}

/* ── sentencia ───────────────────────────────────────── */
.dice{margin-top:clamp(30px,5vh,46px);max-width:30ch}
.dice p{font-weight:900;letter-spacing:-.032em;line-height:1.04;
  font-size:clamp(1.5rem,3.4vw,2.5rem);margin:0}

/* ── tabla final ─────────────────────────────────────── */
.mapa{border-top:1px solid var(--linea-fuerte);padding:clamp(56px,10vh,110px) 0}
.mapa h2{max-width:14ch}
.tabla{margin-top:clamp(30px,5vh,48px);border-top:1px solid var(--linea-fuerte)}
.tabla .f{display:grid;grid-template-columns:1.5fr minmax(110px,.55fr) 1.5fr;
  gap:clamp(12px,2.4vw,32px);padding:clamp(16px,2.4vh,24px) 0;
  border-bottom:1px solid var(--linea);align-items:baseline}
.tabla .p{font-weight:600;font-size:clamp(16px,1.6vw,18px);letter-spacing:-.015em;line-height:1.34}
.tabla .h{font-weight:800;font-size:clamp(15px,1.5vw,17px);letter-spacing:-.02em;color:var(--accent-txt)}
.tabla .e{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
@media(max-width:760px){.tabla .f{grid-template-columns:1fr;gap:5px}
  .tabla .h{order:-1;font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}}

/* ── cierre ──────────────────────────────────────────── */
.cierre{border-top:1px solid var(--linea-fuerte);
  padding:clamp(56px,10vh,110px) 0 clamp(64px,10vh,120px)}
.cierre h2{max-width:13ch}
.cierre .final{margin-top:24px;max-width:58ch;font-size:clamp(16.5px,1.4vw,19px);line-height:1.55}
.cierre .final b{font-weight:600}
.cta{display:inline-block;margin-top:clamp(28px,4vh,40px);background:var(--ink);
  color:var(--canvas);font:600 15px/1.3 var(--display);letter-spacing:-.01em;
  padding:19px 30px;text-decoration:none;transition:background .18s ease}
.cta:hover,.cta:focus-visible{background:var(--accent-txt)}
.creditos{margin-top:clamp(40px,6vh,64px);padding-top:22px;border-top:1px solid var(--linea);
  font:400 12.5px/1.75 var(--mono);color:var(--ink-faint);max-width:70ch}

/* ── un solo momento de movimiento: las placas entran ── */
@media(prefers-reduced-motion:no-preference){
  .placa .marco{opacity:.001;transform:translateY(14px);filter:blur(6px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1),
      filter .75s cubic-bezier(.16,1,.3,1)}
  .placa.vista .marco{opacity:1;transform:none;filter:none}
}

/* ═══ páginas individuales ═══════════════════════════ */
.barra .vuelve{text-decoration:none;display:inline-flex;gap:9px;align-items:center;
  color:var(--ink-soft);transition:color .16s ease}
.barra .vuelve:hover,.barra .vuelve:focus-visible{color:var(--accent-txt)}
.barra .aqui{color:var(--ink)}

.ficha{padding:clamp(48px,9vh,96px) 0 0}
.ficha .tool-cab{align-items:start}
.ficha h1{font-size:clamp(2.6rem,7.4vw,5.6rem);letter-spacing:-.04em;line-height:.9;max-width:none}
.ficha .rol{margin-top:14px}
.ficha .promesa{margin-top:clamp(20px,3.4vh,32px);max-width:26ch}

/* paso a paso entre herramientas */
.pasos{border-top:1px solid var(--linea-fuerte);margin-top:clamp(56px,9vh,100px);
  display:grid;grid-template-columns:1fr 1fr}
.pasos a{display:block;padding:clamp(26px,4.4vh,44px) clamp(18px,2.6vw,34px);
  text-decoration:none;transition:background .18s ease}
.pasos a:hover,.pasos a:focus-visible{background:var(--surface)}
.pasos a+a{border-left:1px solid var(--linea)}
.pasos .dir{display:block;font:500 11px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-txt);margin-bottom:12px}
.pasos .nom{display:block;font-weight:900;letter-spacing:-.032em;line-height:1;
  font-size:clamp(1.5rem,3.4vw,2.5rem)}
.pasos .que{display:block;margin-top:9px;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.pasos .der{text-align:right}
.pasos .vacio{background:transparent;cursor:default}
@media(max-width:620px){.pasos{grid-template-columns:1fr}
  .pasos a+a{border-left:0;border-top:1px solid var(--linea)}
  .pasos .der{text-align:left}}

/* todas las demás, al pie */
.otras{border-top:1px solid var(--linea-fuerte);padding:clamp(44px,7vh,80px) 0 clamp(56px,9vh,104px)}
.otras h2{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.03em}
.otras .lista{margin-top:clamp(24px,4vh,36px);border-top:1px solid var(--linea)}
.otras .lista a{display:grid;grid-template-columns:clamp(30px,3.6vw,46px) minmax(130px,1fr) 1.5fr;
  gap:clamp(10px,2vw,24px);align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--linea);text-decoration:none;
  transition:background .18s ease,padding-left .18s ease}
.otras .lista a:hover,.otras .lista a:focus-visible{background:var(--surface);padding-left:9px}
.otras .lista .n{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--accent-txt)}
.otras .lista .nom{font-weight:800;font-size:clamp(16px,1.6vw,19px);letter-spacing:-.022em}
.otras .lista .que{font-size:14px;color:var(--ink-soft);line-height:1.4}
@media(max-width:620px){.otras .lista a{grid-template-columns:clamp(28px,7vw,40px) 1fr;row-gap:4px}
  .otras .lista .que{grid-column:2}}

/* ═══ índice: entradas por herramienta ══════════════════ */
.entradas .ent{border-top:1px solid var(--linea-fuerte);padding:clamp(38px,6.5vh,72px) 0}
.ent-c{display:grid;grid-template-columns:clamp(34px,4vw,54px) 1fr;gap:clamp(12px,2vw,28px);
  align-items:start}
.ent h2{font-size:clamp(2.1rem,5.4vw,3.9rem);letter-spacing:-.04em;line-height:.94}
.ent h2 a{text-decoration:none}
.ent h2 a:hover,.ent h2 a:focus-visible{color:var(--accent-txt)}
.ent .promesa{margin-top:16px;font-size:clamp(1.1rem,2vw,1.5rem);max-width:26ch}
.ent-q{margin-top:16px;font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:54ch}
.ent-q b{color:var(--ink);font-weight:600}
.ir{display:inline-block;margin-top:20px;font:600 14.5px/1 var(--display);letter-spacing:-.005em;
  color:var(--accent-txt);text-decoration:none;border-bottom:1.5px solid var(--accent);
  padding-bottom:5px;transition:gap .16s ease}
.ir:hover,.ir:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
.tira{display:block;margin-top:clamp(24px,4vh,36px);background:var(--plate);
  padding:clamp(8px,1vw,12px);border:1px solid var(--linea-fuerte);
  height:clamp(120px,19vh,190px);overflow:hidden}
.tira img{width:100%;height:100%;object-fit:cover;object-position:top left}
.sin-tira{margin-top:clamp(22px,3.6vh,32px);font:500 11px/1.5 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--linea);
  padding-top:14px}
@media(min-width:900px){
  .entradas .ent{display:grid;grid-template-columns:1.25fr .85fr;
    gap:clamp(28px,4vw,60px);align-items:center}
  .tira,.sin-tira{margin-top:0}
}
/* la tabla final, ahora navegable */
.tabla a.f{text-decoration:none;transition:background .18s ease,padding-left .18s ease}
.tabla a.f:hover,.tabla a.f:focus-visible{background:var(--surface);padding-left:10px}
/* la promesa en el índice es más chica que en la ficha: necesita más aire */
.ent .promesa{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.35}
.ir{line-height:1.35}

/* ═══ caso de estudio ═════════════════════════════════ */
.caso{margin-top:clamp(40px,6.5vh,72px);border-top:1px solid var(--linea-fuerte);
  padding-top:clamp(28px,4.5vh,44px)}
.caso-t{font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.7rem,3.8vw,2.8rem);margin:0}
.caso-s{margin-top:12px;font:500 12px/1.5 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.caso h4{margin-top:clamp(30px,4.5vh,44px);font:500 11px/1.5 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-txt)}
.caso h4+p,.caso h4+div,.caso h4+dl{margin-top:12px}

/* la tabla de comprensión */
.comp{margin-top:14px;border-top:1px solid var(--linea)}
.comp-f{display:grid;grid-template-columns:minmax(150px,1.1fr) 1fr auto;gap:clamp(10px,2vw,22px);
  padding:15px 0;border-bottom:1px solid var(--linea);align-items:center}
.comp-n{font-weight:700;font-size:16px;letter-spacing:-.015em}
.comp-n em{display:block;font:400 13px/1.4 var(--display);font-style:normal;
  color:var(--ink-soft);margin-top:3px}
.comp-b{display:flex;gap:3px;align-items:center}
.comp-b i{height:22px;border-radius:3px;background:var(--ink);opacity:.22}
.comp-b i.alto{background:var(--ink);opacity:1}
.comp-b i.bajo{background:var(--accent)}
.comp-v{font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.comp-v.mal{color:var(--accent-txt)}
@media(max-width:620px){.comp-f{grid-template-columns:1fr auto;row-gap:8px}
  .comp-b{grid-column:1/-1}}

/* voces */
.voces{margin-top:16px;display:grid;gap:18px}
@media(min-width:820px){.voces{grid-template-columns:1fr 1fr}}
.voz{border-left:2px solid var(--linea-fuerte);padding-left:18px}
.voz p{margin:0;font-size:15.5px;line-height:1.55;font-style:italic}
.voz span{display:block;margin-top:9px;font:500 11px/1.5 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-style:normal}

/* el contraste ciego / inducido */
.ciego{margin-top:16px;display:grid;gap:clamp(18px,3vw,34px)}
@media(min-width:820px){.ciego{grid-template-columns:1fr 1fr}}
.ciego h5{font:500 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.ciego .mal{color:var(--accent-txt)}
.ciego ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ciego li{font-size:14.5px;line-height:1.45;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:4px 14px}
.ciego li b{font-weight:600}
.ciego li span{font:500 12px/1.5 var(--mono);color:var(--ink-faint);text-align:right}
@media(max-width:600px){
  .ciego li{display:block}
  .ciego li span{display:block;text-align:left;margin-top:3px}
}