/* entradas largas. Respeta el gusto plano del sitio: bordes de --line antes que rellenos */

.wrap { max-width:1060px; margin:0 auto; padding-inline:24px; }
.col  { max-width:72ch; }

/* ---- cabecera de entrada ---- */
.post-head { padding-block:132px 36px; border-bottom:1px solid var(--line); }
.eyebrow {
  font-family:var(--mono); font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--ink-soft);
}
.eyebrow .dot { color:var(--sand); padding:0 10px; }
.post-head h1 {
  font-family:var(--serif); font-weight:330;
  font-size:clamp(32px, 5.4vw, 62px); line-height:1.05; letter-spacing:-0.025em;
  margin-top:18px; max-width:30ch; text-wrap:balance;
}
.post-head h1 em { font-style:italic; color:var(--ink-soft); }
.lede { margin-top:22px; max-width:62ch; font-size:14.5px; line-height:1.75; color:var(--ink-soft); }
.factbar {
  margin-top:30px; display:flex; flex-wrap:wrap; gap:4px 30px;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}
.factbar b { color:var(--ink); font-weight:500; letter-spacing:0; text-transform:none; }

/* ---- indice ---- */
.toc { padding-block:30px; border-bottom:1px solid var(--line); }
.toc ol { list-style:none; columns:2; column-gap:40px; }
.toc li { margin:5px 0; break-inside:avoid; }
.toc a { color:var(--ink-soft); text-decoration:none; font-size:13px; }
.toc a:hover { color:var(--sand); }
.toc .n { color:var(--sand); margin-right:9px; }
@media (max-width:620px) { .toc ol { columns:1; } }

/* ---- prosa ---- */
article { padding-block:14px 90px; }
article h2 {
  font-family:var(--serif); font-weight:400; letter-spacing:-0.015em;
  font-size:clamp(23px, 3.2vw, 32px); line-height:1.15;
  margin-top:76px; padding-bottom:12px; border-bottom:1px solid var(--line);
  scroll-margin-top:24px;
}
article h3 {
  font-family:var(--mono); font-weight:500; font-size:14px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink);
  margin-top:44px;
}
article h4 {
  font-family:var(--mono); font-weight:500; font-size:12px;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:30px;
}
article p, article ul, article ol { margin:16px 0; max-width:72ch; font-size:14.5px; line-height:1.78; }
article li { margin:7px 0; }
article strong { font-weight:500; color:var(--ink); }
article a { color:var(--sand); text-decoration:none; border-bottom:1px solid var(--line); }
article a:hover { border-color:var(--sand); }

code {
  font-family:var(--mono); font-size:0.86em;
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  padding:0.1em 0.34em; overflow-wrap:anywhere;
}
pre {
  font-family:var(--mono); font-size:12.5px; line-height:1.62;
  background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--sand);
  padding:16px 18px; overflow-x:auto; margin:20px 0;
}
pre code { background:none; border:0; padding:0; font-size:1em; }

/* ---- tablas ---- */
.tablewrap { overflow-x:auto; margin:20px 0; border:1px solid var(--line); }
table { border-collapse:collapse; width:100%; font-size:12.8px; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th {
  font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; background:var(--panel-2); white-space:nowrap;
}
tbody tr:last-child td { border-bottom:0; }
td.m, th.m { font-family:var(--mono); font-size:12px; overflow-wrap:anywhere; }

/* ---- destacados ---- */
.callout {
  margin:24px 0; padding:18px 20px;
  border:1px solid var(--line); border-left:2px solid var(--sand);
  background:var(--panel);
}
.callout h3 { margin-top:0; color:var(--sand); }
.callout p { margin:6px 0; max-width:66ch; }
.callout.plain { border-left-color:var(--line); }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:7px 24px; font-size:13px; margin:14px 0; }
.kv dt { font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); padding-top:3px; }
.kv dd { margin:0; font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; }
@media (max-width:460px) { .kv { grid-template-columns:1fr; } }

.pill {
  display:inline-block; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  padding:2px 8px; border:1px solid var(--line); border-radius:2px; color:var(--ink-soft);
  white-space:nowrap;
}
.pill.on { border-color:var(--sand); color:var(--sand); }

/* ---- cadena de etapas ---- */
.stages { display:grid; gap:12px; margin:26px 0; counter-reset:st; }
.stage { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:16px 18px; border:1px solid var(--line); }
.stage.hot { border-color:var(--sand); }
.stage::before {
  counter-increment:st; content:counter(st, decimal-leading-zero);
  font-family:var(--mono); font-size:12px; color:var(--sand); letter-spacing:0.08em; padding-top:3px;
}
.stage h4 { margin:0 0 4px; font-family:var(--serif); font-size:17px; font-weight:400;
            letter-spacing:0; text-transform:none; color:var(--ink); }
.stage p { margin:5px 0; font-size:13.5px; line-height:1.68; max-width:none; }
.stage .h { font-size:11px; color:var(--ink-soft); margin-top:8px; letter-spacing:0.04em; }
@media (max-width:460px) { .stage { grid-template-columns:1fr; } }

/* ---- figuras ---- */
figure { margin:30px 0; }
.figwrap { overflow-x:auto; }
figure svg { max-width:100%; height:auto; display:block; margin:0 auto; }
figcaption { font-size:12.5px; line-height:1.7; color:var(--ink-soft); margin-top:14px; max-width:68ch; }

/* ---- pie de entrada ---- */
.post-foot { border-top:1px solid var(--line); padding-block:30px 90px; font-size:12.5px; color:var(--ink-soft); }
.post-foot a { color:var(--sand); text-decoration:none; }
.post-foot a:hover { border-bottom:1px solid var(--sand); }

/* ---- indice de investigaciones ---- */
.entry { display:block; padding:26px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.entry:hover h2 { color:var(--sand); }
.entry h2 {
  font-family:var(--serif); font-weight:330; font-size:clamp(22px, 3.4vw, 32px);
  line-height:1.12; letter-spacing:-0.02em; border:0; padding:0; margin:10px 0 0;
  transition:color .25s ease;
}
.entry p { font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin:12px 0 0; max-width:64ch; }
.entry .meta { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); }
.entry .meta .dot { color:var(--sand); padding:0 9px; }
.empty { padding:44px 0; font-size:13.5px; color:var(--ink-soft); }

/* ---- filtro por etiqueta ---- */
.filtros { padding-block:22px 4px; border-bottom:1px solid var(--line); }
.filtros-row { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  padding:5px 11px; cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.chip:hover { color:var(--ink); border-color:var(--ink-soft); }
.chip.on { color:var(--sand); border-color:var(--sand); }
.filtros-n { font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
             color:var(--ink-soft); margin:14px 0 0; }
.entry[hidden] { display:none; }

/* ---- ancla por seccion ---- */
article h2 { position:relative; }
.anchor {
  margin-left:.45em; color:var(--line); text-decoration:none; border:0;
  font-family:var(--mono); font-size:0.52em; vertical-align:middle;
  opacity:0; transition:opacity .2s ease, color .2s ease;
}
article h2:hover .anchor, .anchor:focus-visible { opacity:1; }
.anchor:hover { color:var(--sand); border:0; }

/* ---- progreso y seccion actual ---- */
.progress {
  position:fixed; top:0; left:0; right:0; z-index:12;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
.progress.visible { opacity:1; }
.progress-bar {
  display:block; height:2px; width:0;
  background:var(--sand); transition:width .08s linear;
}
.progress-sec {
  position:absolute; top:28px; left:32px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
  max-width:46vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
/* la firma y la seccion se relevan: nunca estan las dos a la vez */
body.scrolled .sig { opacity:0; pointer-events:none; }
.sig { transition:opacity .3s ease; }
@media (max-width:860px) {
  .progress-sec { display:none; }
  body.scrolled .sig { opacity:1; pointer-events:auto; }
}
@media (max-width:540px) { .progress-sec { top:20px; left:22px; } }
@media print { .progress { display:none !important; } }