/* ==========================================================================
   El Hilar · Estudio de origen — un INFORME, no una página de producto.
   Tipografía: el patrón validado para informes de cliente (el de abril, que la escuela aceptó):
   Instrument Serif en titulares · Geist en cuerpo · Geist Mono en cifras.
   Color y superficies: los tokens de Mercury (índigo #2a34d6, neutros, línea), con esquina casi viva.
   ⚠️ NO «portar a Mercury» otra vez. Ya pasó: un pase dejó «--serif:var(--sans)», Geist a 460 en
   todo, estrellas de marcador, sello en monoespaciada y grano de película, y el documento perdió el
   tono de formalidad. Mercury es el sistema del SITIO WEB de Catalizadora; un informe para la
   dirección de una escuela lleva serif en los titulares. Los tres colores semánticos solo sirven
   para las etiquetas de medición.
   ========================================================================== */

:root{
  /* acento: un solo token manda, los otros dos derivan de su tono */
  --indigo:#2a34d6;
  --indigo-lift:#5266eb;
  --indigo-deep:#1f27a8;
  --peri-soft:color-mix(in srgb,var(--indigo) 8%,#fff);
  --peri:color-mix(in srgb,var(--indigo) 10%,transparent);
  /* tinta y superficie, con los valores del sistema */
  --ink:#20212b; --ink-soft:#5c5f6e; --steel:#666a7c;
  --bg:#f5f6fa; --surface:#ffffff; --line:#e7e8ef; --dark:#12131b;
  /* radios de Mercury: el sistema es redondeado, no de esquina viva */
  /* esquina casi viva: los radios grandes son del sitio, no de un informe */
  --r:8px; --r-lg:10px; --r-sm:4px; --pill:4px;
  /* alias que usa el resto de esta hoja */
  --lino:var(--bg); --lino2:var(--peri-soft); --lino3:#edeff7;
  --tinta:var(--ink); --tinta2:var(--ink-soft); --tinta3:var(--steel);
  --borde:var(--line); --borde2:#eef0f6;
  --rubia:var(--indigo); --rubia2:var(--peri-soft);
  --bosque:#14724f; --bosque2:#e2f2ea;
  --glasto:#2a5c9a; --glasto2:#e3ecf7;
  --gualda:#8a5a09; --gualda2:#f7ecd6;
  /* medida */
  --ancho:980px; --nota:280px; --techo:44px;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  /* ⚠️ Aquí decía «--serif:var(--sans)»: la serif se había aplastado a la sans al portar el
     documento al sistema del sitio web, y con ella se fue el tono. Un informe para la dirección de
     una escuela no es una página de producto. La primera versión de este estudio llevaba serif en
     los titulares, y el informe de abril que la escuela ya aceptó lleva esta misma: Instrument
     Serif en titulares, Geist en cuerpo, Geist Mono en cifras. Es el patrón validado para informes
     de cliente; Geist solo, con peso 460, es el del sitio. */
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --disp:var(--serif);
  --mono:"Geist Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --mx-e:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
/* Fondo claro fijo, a propósito. Este documento se enseña a la dirección de la escuela y se
   imprime: el modo oscuro del sistema del lector no debe cambiarlo. «color-scheme:light» en
   :root deja además los controles nativos y la barra de scroll en claro. */

*{box-sizing:border-box}
body{
  margin:0; color:var(--ink);
  background:#fbfbf9;
  font-family:var(--sans); font-size:16px; line-height:1.62; font-weight:400;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none !important}

/* ---------- tipografía ---------- */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;line-height:1.1;text-wrap:balance;color:var(--ink);margin:0}
h3,h4{font-family:var(--sans);text-wrap:balance;color:var(--ink);margin:0}
h1{font-size:clamp(2.5rem,4.2vw,3.4rem);line-height:1.06;margin:.1em 0 .35em}
h2{font-size:clamp(1.7rem,2.5vw,2.15rem);line-height:1.12;margin:0 0 .5em}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.012em;margin:2.4em 0 .6em}
h4{font-size:1rem;font-family:var(--sans);font-weight:620;letter-spacing:-.008em;
  color:var(--ink-soft);margin:1.8em 0 .4em}
/* ⚠️ «ch» mide el ancho del cero, y en Geist el cero es más ancho que la letra media: 68ch daban
   83 caracteres por línea. Medido en el navegador con el ancho real del carácter en Geist (7,31 px
   a 16 px), 50ch dan unos 70, que es donde el ojo no pierde el renglón. */
p{margin:.7em 0;max-width:50ch}
ul,ol{max-width:50ch;padding-left:1.15em}
li{margin:.34em 0}
a{color:var(--rubia);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--rubia)}
strong,b{font-weight:560;color:var(--ink)}
:focus-visible{outline:2px solid var(--rubia);outline-offset:3px;border-radius:2px}
::selection{background:var(--rubia2);color:var(--tinta)}

/* El rótulo de sección va como en un informe: pequeño, tracked, en versalitas, sin ornamento. La
   estrella era el marcador del sitio. ⚠️ Solo CSS: <p class="cejilla"> es lo que el arnés lee para
   recontar las tareas por área. */
.cejilla{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);margin:0 0 .7em;max-width:none;
  display:flex;align-items:center;gap:10px;
}
.entrada{font-size:1.12rem;line-height:1.55;color:var(--tinta2);max-width:50ch}
.entrada strong{color:var(--tinta)}
.pie-nota{font-size:.86rem;line-height:1.5;color:var(--tinta2);max-width:54ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ---------- estructura de página ---------- */
.saltar{position:absolute;left:-9999px;top:0;background:var(--rubia);color:var(--lino);padding:10px 16px;z-index:60}
.saltar:focus{left:8px;top:8px}

/* ⚠️ La barra se desplazaba en horizontal y recortaba el último enlace: con once páginas, 1.058 px
   de enlaces en 1.024 de hueco. Una barra que se recorta esconde justo la página que cierra el
   informe. Ahora envuelve, y --techo deja de ser una altura fija: se mide sola. */
.barra{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;
  min-height:var(--techo);padding:9px clamp(20px,5vw,40px);
  background:rgba(247,248,252,.75);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(22,24,38,.09);
}
.barra-marca{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.015em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.barra-marca:hover{color:var(--rubia)}
.hilo-punto{flex:none;color:var(--rubia);font-size:1rem;line-height:1;transform:translateY(1px)}
.hilo-punto::before{content:"\273A"}   /* ✺ · la estrella de ocho puntas de Mercury */

.hoja{padding:0 28px 90px}
main{max-width:var(--ancho);margin:0 auto}

/* índice */
.indice{font-size:.87rem;line-height:1.4}
.indice-t{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0 0 8px;max-width:none}
.indice ol,.indice ul{list-style:none;margin:0;padding:0;max-width:none}
.indice li{margin:0}
.indice a{
  display:flex;gap:9px;align-items:baseline;
  color:var(--tinta2);text-decoration:none;padding:4px 8px 4px 0;border-radius:2px;
}
.indice a:hover{color:var(--rubia)}
.indice a .n{font-family:var(--mono);font-size:.7rem;color:var(--tinta3);flex:none;min-width:1.3em}
.indice a[aria-current]{color:var(--rubia);font-weight:600}
.indice a[aria-current] .n{color:var(--rubia)}
.indice-secciones a{padding-left:11px;border-left:2px solid var(--borde2)}
.indice-secciones a[aria-current]{border-left-color:var(--rubia)}

/* ---------- rejilla ancha ---------- */

@media (max-width:1119px){
  .indice{
    border-bottom:1px solid var(--borde2);padding-bottom:14px;margin-bottom:8px;
  }
  /* ⚠️ Aquí el índice de páginas se ocultaba entero: en tableta y portátil estrecho no había forma
     de saltar de una página a otra salvo por la barra, que encima se recortaba. Se queda, en línea
     y compacto. */
    .indice-paginas li{margin:0}
  .indice-paginas a{padding:4px 10px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--pill);font-size:.82rem}
}

/* ---------- tramos cosidos por el hilo ---------- */
.tramo{position:relative;padding-left:30px;border-left:2px solid var(--borde2);margin-top:62px}
.tramo::before{
  content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;
  background:var(--rubia);transform:rotate(45deg);
  box-shadow:0 0 0 4px var(--lino);
}
.tramo:first-of-type{margin-top:44px}
:where(section,article,div)[id]{scroll-margin-top:calc(var(--techo) + 16px)}
@keyframes aterriza{from{background:var(--rubia2)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :target > h2:first-of-type,:target > .cejilla{animation:none}
}

/* ---------- portada ---------- */
/* ⚠️ Esto era un filete de 3 px casi negro cruzando la columna entera: el motivo del sistema viejo.
   Con el ritmo de sección de Mercury —filete índigo corto + cejilla— eran dos marcas compitiendo, y
   la más ruidosa era la que no significa nada. */
.portada{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:6px;padding-top:34px}
.portada .sello{
  font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--steel);display:flex;gap:0 18px;flex-wrap:wrap;margin:0 0 22px;max-width:none;
}
.portada .sello b{color:var(--indigo);font-weight:600}
.portada h1{font-size:clamp(2.9rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.01em;margin:0 0 .4em}

/* ---------- texto con nota al margen ---------- */
.conNota{display:grid;grid-template-columns:1fr;gap:12px 34px;align-items:start;margin:1.1em 0}
.conNota > .txt > :first-child{margin-top:0}
.conNota > .txt > :last-child{margin-bottom:0}
.nota{
  font-size:.86rem;line-height:1.45;color:var(--tinta2);
  border-left:2px solid var(--rubia);padding:2px 0 2px 13px;
}
.nota p{margin:.3em 0;max-width:none;font-size:inherit}
.nota .nt{
  display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rubia);margin-bottom:5px;
}
@media (min-width:1120px){
  .conNota{grid-template-columns:minmax(0,1fr) minmax(0,var(--nota))}
  .nota{border-left:1px solid var(--borde);padding-left:16px}
  .nota .nt{color:var(--tinta3)}
}

/* ---------- etiquetas de medición ---------- */
.et{
  display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.06em;padding:2px 7px;border-radius:3px;white-space:nowrap;
  border:1px solid transparent;vertical-align:1px;
}
.et-med{background:var(--bosque2);color:var(--bosque);border-color:var(--bosque)}
.et-inf{background:var(--glasto2);color:var(--glasto);border-color:var(--glasto)}
.et-dec{background:var(--gualda2);color:var(--gualda);border-color:var(--gualda)}
.et-mix{background:var(--lino3);color:var(--tinta2);border-color:var(--borde)}
.et-des{background:transparent;color:var(--tinta3);border-color:var(--borde)}
.et-chica{background:var(--rubia2);color:var(--rubia);border-color:var(--rubia)}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
  background:var(--borde2);border:1px solid var(--borde2);margin:26px 0}
.cifras .c{background:var(--lino);padding:16px 18px 15px}
.cifras .c b{
  display:block;font-family:var(--mono);font-weight:600;font-size:1.32rem;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--tinta);letter-spacing:-.02em;
}
.cifras .c.acento b{color:var(--rubia)}
.cifras .c.verde b{color:var(--bosque)}
.cifras .c span{display:block;font-size:.82rem;line-height:1.35;color:var(--tinta2);margin-top:7px}
/* «7 de 18 consultas» salía en cuatro líneas: el <b data-cifra> dentro del rótulo heredaba el
   «display:block» de la cifra grande. Dentro del rótulo, una cifra es texto. */
.cifras .c span b,.cifras .c span span{display:inline;font:inherit;font-weight:600;color:var(--ink);letter-spacing:0}
.indice-paginas + .indice-t{margin-top:22px}
.cifras .c b span{display:inline;font-size:inherit;color:inherit;margin:0}

/* ---------- avisos ---------- */
.aviso{border:1px solid var(--borde);border-left:4px solid var(--gualda);background:var(--lino2);
  padding:16px 20px;margin:26px 0;max-width:78ch}
.aviso.corrige{border-left-color:var(--rubia)}
.aviso.bueno{border-left-color:var(--bosque)}
.aviso h3{font-family:var(--sans);font-size:1rem;font-weight:700;margin:0 0 .4em}
.aviso p,.aviso li{font-size:.93rem;margin:.42em 0}
.aviso ul,.aviso ol{margin:.5em 0}

/* ---------- tablas ----------
   ⚠️ Aquí vivían TRES bloques de reglas de tabla que se pisaban entre sí, uno por cada capa
   histórica de esta hoja. El que ganaba por cascada dejaba las tablas a .9rem con interlínea 1,45:
   un diez por ciento más pequeñas y un diez por ciento más apretadas que el cuerpo, justo donde vive
   el setenta por ciento de la información del estudio. Ahora es un bloque solo, y estas cifras son
   las que mandan.
   La medida de lectura del párrafo (50ch) está medida a mano más arriba y comentada; la celda no
   tenía ninguna, y por eso una celda de 805 caracteres se repartía en una columna de 140 px. El
   ancho de columna va por <colgroup><col class="…">, NUNCA por una clase en el <td>: «class="n"» es
   marcado que el arnés lee, y una clase de más ahí le deja de contar las tareas en silencio. */
.tabla{
  overflow-x:auto;margin:22px 0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
table{border-collapse:collapse;width:100%;min-width:640px;background:transparent;
  font-size:.95rem;line-height:1.55}
caption{caption-side:top;text-align:left;font-size:.86rem;line-height:1.5;color:var(--ink-soft);
  padding:13px 16px;background:var(--peri-soft);border-bottom:1px solid var(--line)}
caption b{color:var(--ink);font-weight:600}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--borde2);vertical-align:top}
thead th{font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;text-transform:none;
  color:var(--steel);font-weight:600;background:transparent;border-bottom:1px solid var(--borde)}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr.total td{background:var(--peri-soft);font-weight:700}
tr.destaca,tbody tr.destaca td{background:var(--peri-soft)}
td code{font-family:var(--mono);font-size:max(.9em,12.5px);word-break:break-all}
/* La celda larga se parte en titular y detalle: <strong> lo que hay que hacer, <small> el porqué.
   Las dos son etiquetas EN LÍNEA, así que el control del dinero las sigue cubriendo. */
td strong{font-weight:600;color:var(--ink)}
td small{display:block;color:var(--ink-soft);font-size:13px;line-height:1.5;margin-top:.3em}
/* ⚠️ Un <small> dentro de otro <small> se encogía dos veces (.86em × .86em) y salía a 11,2 px; con
   un <code> dentro, a 11,8. Un detalle no se encoge sobre otro detalle: el suelo son 12,5 px, y el
   segundo nivel hereda. Medido en las doce páginas: 330 textos por debajo de 12 px, casi todos aquí. */
small small,td small small,small code,td small code{font-size:inherit}
small{font-size:12.5px}
li small,th small,.nt small,.lista li small,.mini li small{font-size:12.5px}
cite,blockquote cite,blockquote cite a{font-size:12.5px}
/* Ancho de columna: la de prosa se lleva lo que sobra, las de dato se encogen. */
col.ancha{width:auto}
col.media{width:20%}
col.corta{width:11%}
col.minima{width:6%}

/* ---------- barras ---------- */
.barras{margin:22px 0}
.fila{display:grid;grid-template-columns:minmax(120px,220px) 1fr minmax(96px,auto);
  gap:12px;align-items:center;margin:6px 0}
.fila .lab{font-size:.86rem;color:var(--tinta2);line-height:1.25;text-align:right}
.fila .pista{position:relative;height:16px;background:var(--lino3);overflow:hidden}
.fila .relleno{position:absolute;left:0;top:0;bottom:0;background:var(--bosque)}
.fila .relleno.fuga{background:var(--rubia)}
.fila .relleno.tenue{background:var(--borde)}
.fila .val{font-family:var(--mono);font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--tinta)}

/* ---------- evidencias ---------- */
.expediente{display:grid;gap:1px;background:var(--borde2);border:1px solid var(--borde2);margin:26px 0}
article.insight,article.ev{background:var(--lino);padding:17px 20px;display:grid;gap:6px 26px;grid-template-columns:1fr}
article.insight h3,article.ev h3{font-family:var(--sans);font-size:1.02rem;font-weight:700;line-height:1.3;margin:0}
article.insight h3 .e,article.ev h3 .e{font-family:var(--mono);font-size:12px;color:var(--rubia);margin-right:9px;letter-spacing:.06em}
article.insight p,article.ev p{margin:.3em 0 0;font-size:.93rem;max-width:70ch}
article.insight .aparato,article.ev .aparato{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  font-family:var(--mono);font-size:12px;color:var(--tinta2);
}
article.insight .aparato .k,article.ev .aparato .k{color:var(--tinta3)}
article.insight:target,article.ev:target{background:var(--rubia2)}
@media (min-width:1120px){
  article.insight{grid-template-columns:minmax(0,1fr) minmax(0,268px)}
  article.insight .cuerpo{grid-column:1}
  article.insight .aparato,article.ev .aparato{grid-column:2;grid-row:1;flex-direction:column;gap:7px;align-items:flex-start;
    border-left:1px solid var(--borde2);padding-left:18px}
}

/* ---------- fichas de recomendación ---------- */
.fichas{display:grid;gap:14px;margin:26px 0}
.ficha{border:1px solid var(--borde);background:var(--lino);padding:16px 20px 18px;
  display:grid;gap:4px 22px;grid-template-columns:1fr}
.ficha .rank{font-family:var(--mono);font-size:1.25rem;font-weight:600;color:var(--rubia);line-height:1}
.ficha h3{font-family:var(--sans);font-size:1.06rem;font-weight:700;margin:.15em 0 .2em;line-height:1.28}
.ficha p{font-size:.92rem;margin:.3em 0}
.ficha .meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-family:var(--mono);font-size:12px;
  color:var(--tinta2);margin-top:9px}
.ficha .meta b{color:var(--tinta);font-weight:600}
@media (min-width:820px){
  .ficha{grid-template-columns:52px minmax(0,1fr)}
  .ficha .rank{grid-row:1/span 4}
}

/* ---------- chips de vocabulario ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0;padding:0;list-style:none;max-width:none}
.chips li{margin:0}
.chips span{display:inline-block;font-size:.85rem;padding:4px 11px;border-radius:14px;
  border:1px solid var(--borde);background:var(--lino2);color:var(--tinta2)}
.chips .v-marca{border-color:var(--glasto);color:var(--glasto);background:var(--glasto2)}
.chips .v-fam{border-color:var(--bosque);color:var(--bosque);background:var(--bosque2)}

/* ---------- citas ---------- */
blockquote{margin:20px 0;padding:2px 0 2px 20px;border-left:3px solid var(--rubia);max-width:70ch}
blockquote p{font-family:var(--serif);font-size:1.22rem;line-height:1.4;color:var(--tinta);margin:.3em 0}
blockquote cite{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta3);font-style:normal;margin-top:8px}
q{quotes:"«" "»" "\"" "\""}

/* ---------- sumario de páginas ---------- */
.sumario{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--borde2);border:1px solid var(--borde2);margin:28px 0}
.sumario a{background:var(--lino);padding:15px 18px 16px;text-decoration:none;color:var(--tinta);display:block}
.sumario a:hover{background:var(--lino2)}
.sumario .p{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rubia)}
.sumario .t{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:600;margin:6px 0 5px;line-height:1.2}
.sumario .d{display:block;font-size:.85rem;color:var(--tinta2);line-height:1.4}

/* ---------- navegación entre páginas ---------- */
.pasos{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:64px;padding-top:20px;border-top:2px solid var(--tinta)}
.pasos a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta2);text-decoration:none;max-width:46%}
.pasos a b{display:block;font-family:var(--sans);font-size:.98rem;letter-spacing:0;
  text-transform:none;color:var(--tinta);font-weight:700;margin-top:4px}
.pasos a:hover b{color:var(--rubia)}
.pasos .der{text-align:right;margin-left:auto}

.pie{border-top:1px solid var(--borde2);padding:22px 32px 40px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tinta3)}
.pie p{max-width:80ch;margin:.3em 0}

/* ---------- impresión (base; la forma de estudio la completa abajo) ---------- */
@media print{
  @page{margin:15mm}
  /* ⚠️ Esta paleta de impresión era la del sistema RETIRADO: el teja #8a2f1e donde el documento
     lleva índigo. Impreso, el estudio salía con la marca de otro diseño. Ahora imprime en Mercury. */
  :root{--lino:#fff;--lino2:#f4f5fb;--lino3:#eef0f6;--tinta:#111;--tinta2:#333;--tinta3:#555;
        --ink:#111;--ink-soft:#333;--steel:#555;--surface:#fff;--line:#bbb;
        --borde:#bbb;--borde2:#ddd;--indigo:#2a34d6;--peri-soft:#f4f5fb;
        --rubia:#2a34d6;--rubia2:#f4f5fb;--bosque:#14724f;--glasto:#2a5c9a;--gualda:#8a5a09}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.42}
  .barra,.indice,.saltar,.pasos{display:none !important}
  .hoja{display:block;padding:0}
  main{max-width:none}
  .conNota{grid-template-columns:1fr}
  .nota{border-left:1px solid #bbb}
  article.insight{grid-template-columns:1fr}
  article.insight .aparato,article.ev .aparato{border-left:0;padding-left:0;flex-direction:row}
  .tramo::before{display:none}
  article.insight,article.ev,.ficha,.aviso,.cifras,.fila,blockquote,tr{break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid}
  .tabla{overflow:visible;border:1px solid #bbb;max-height:none}
  table{min-width:0;font-size:9pt}
  /* ⚠️ Un <details> cerrado NO imprime su contenido. Con las listas largas plegadas, el PDF salía
     con agujeros del tamaño de trescientas sesenta filas y nadie lo veía hasta imprimirlo. */
  details{border:0;padding:0;margin:14px 0;overflow:visible}
  details > summary{list-style:none;font-weight:700;padding:0 0 6px;border:0}
  details > summary::before,details > summary::marker{content:none;display:none}
  details > summary .cuantas{margin-left:8px;font-weight:400}
  details,details:not([open]) > *{content-visibility:visible !important}
  details:not([open]) > *{display:revert}
  details > .tabla{margin:0}
  .buscador{display:none}
  tr.grupo td{position:static;background:#eef0f6}
  thead{display:table-header-group}
  a{color:#000;text-decoration:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}

/* ---------- evidencia extendida (página 2) ---------- */
article.ev{padding:20px 22px 22px}
article.ev .cuerpo > p:first-of-type{margin-top:.45em}
.ev-limite{margin-top:12px;padding-top:11px;border-top:1px dashed var(--borde);font-size:.88rem;color:var(--tinta2)}
.ev-limite b{color:var(--tinta)}
.ev-limite p{margin:.28em 0;max-width:53ch;font-size:inherit}
.grupo-ev{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta3);margin:34px 0 10px;display:flex;align-items:center;gap:11px;max-width:none}
.grupo-ev::after{content:"";flex:1;height:1px;background:var(--borde)}

/* Listas de consultas dentro de una celda de tabla (inventario nombrado) */
.mini{margin:0;padding-left:1.05em;list-style:disc}
.mini li{margin:.15em 0;font-size:max(.92em,12.5px);line-height:1.4}
td code{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:.9em;word-break:break-all}
.alerta{color:var(--hilo,#8C3B2E);font-size:.82em;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}

/* ---------- buscar dentro de una lista larga ---------- */
.buscador{display:flex;gap:12px;align-items:center;padding:12px 18px;
  border-bottom:1px solid var(--borde2)}
.buscador input{flex:1;min-width:0;font:inherit;font-size:.92rem;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink)}
.buscador input:focus-visible{outline:2px solid var(--indigo);outline-offset:1px;
  border-color:var(--indigo)}
.buscador-n{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap}

/* ---------- legibilidad del documento largo ----------
   Un estudio de setenta secciones se lee salteado: se entra por el índice, se lee un bloque y se
   vuelve. Lo que sigue existe para eso, no para decorar. */
h2{margin-top:0}
/* El separador de sección era ~104 px de aire y una línea de 1 px casi del color del fondo. En una
   página de doce secciones y veintitrés mil palabras, eso es todo el ritmo que había. Ahora la
   sección se abre con un filete índigo corto sobre la cejilla: se ve de un vistazo dónde empieza una
   y termina otra, sin volver al rombo del sistema viejo. */
.tramo{padding-top:3rem}
.tramo + .tramo{border-top:1px solid var(--borde)}
.indice{font-size:.875rem;line-height:1.45}
.indice a{padding:.14em 0;display:block}
.indice-secciones a{color:var(--tinta2)}
.indice-secciones a[aria-current]{color:var(--rubia);font-weight:600}
/* la tipografía de Mercury pide su peso: Geist a 400 en cuerpo y 560-620 en titulares */
body{font-variant-numeric:tabular-nums lining-nums}
p, li, td, th{overflow-wrap:break-word}

/* ---------- que nada empuje la columna de texto ----------
   ⚠️ La página se desplazaba en horizontal: una tabla ancha estiraba la columna de la rejilla y el
   documento entero se movía de lado al leer. En una rejilla, un hijo con contenido ancho crece salvo
   que se le diga que puede encogerse; y una tabla ancha tiene que hacer scroll DENTRO de su caja,
   nunca mover la página. */
.hoja > *{min-width:0}
main{min-width:0;max-width:100%}
.tabla{max-width:100%}
.tabla > table{min-width:min(640px,100%)}
main table{max-width:none}
pre,code{overflow-wrap:anywhere}

/* la medida de lectura vale en TODAS partes, no solo en el párrafo suelto: los avisos y las
   evidencias son texto que se lee igual, y se les escapaba a 86 caracteres por línea */
.insight .cuerpo p, .aviso p, .nota p, .conNota p, details p{max-width:50ch}
.aviso p, .nota p{max-width:52ch}
.lista li, details li, .ev-limite li{max-width:52ch}

/* ---------- el índice, que es por donde se navega ----------
   ⚠️ El número del bloque se pegaba al título («0RESUMEN EJECUTIVO») porque .indice-t no era caja
   flexible y el hueco no se aplicaba. En un documento que se lee salteado, el índice ES la interfaz. */
.indice-t{display:block}
.indice-t .indice-pagina{display:flex;align-items:baseline;gap:.5em;
  font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--tinta);line-height:1.3;padding:.2em 0}
.indice-t .indice-pagina .n{font-family:var(--mono);font-size:.68rem;font-weight:500;
  color:var(--rubia);min-width:1.1em;flex:none;text-align:right}
.indice-t .indice-pagina:hover{color:var(--rubia)}
.indice-bloque{color:var(--tinta3);opacity:.85}
.indice-secciones{margin:.15em 0 .9em}
.indice-secciones a{padding:.16em 0 .16em 11px;line-height:1.35}

/* ---------- la marca: el mismo path que components/mercury/icons Star ---------- */
.hilo-punto{
  flex:none;width:18px;height:18px;background:var(--indigo);
  -webkit-mask:var(--estrella) center/contain no-repeat;
          mask:var(--estrella) center/contain no-repeat;
  transition:transform .7s var(--mx-e);
}
.barra-marca:hover .hilo-punto{transform:rotate(45deg)}
.hilo-punto::before{content:none}
:root{--estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z'/%3E%3C/svg%3E")}

/* ---------- superficies: tarjeta blanca sobre el fondo, esquina redondeada ---------- */
.aviso{border:1px solid var(--line);border-left:3px solid var(--gualda);border-radius:var(--r-sm);
  background:var(--surface);padding:18px 22px}
.aviso.corrige{border-left-color:var(--indigo)}
.aviso.bueno{border-left-color:var(--bosque)}
.aviso h3{font-weight:560;font-size:1rem}
.cifras .c{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:16px 18px}
.insight, article.insight{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.nota{border-left:2px solid var(--peri)}
details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  padding:14px 18px;margin:22px 0}
summary{font-weight:500;color:var(--ink);cursor:pointer}

@media (max-width:600px){
  /* tablas anchas apiladas como fichas (la clase la pone informe.js midiendo la tabla) */
  .tabla.apilada{overflow:visible}
  .tabla.apilada table{min-width:0;display:block}
  .tabla.apilada caption{display:block}
  .tabla.apilada thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .tabla.apilada tbody,.tabla.apilada tr,.tabla.apilada td{display:block;width:100%;box-sizing:border-box}
  .tabla.apilada tr{padding:10px 0 12px;border-bottom:1px solid var(--line)}
  .tabla.apilada tbody tr:last-child{border-bottom:0}
  .tabla.apilada td{padding:5px 16px;border:0;text-align:left;white-space:normal}
  .tabla.apilada td.n{text-align:left}
  .tabla.apilada td[data-label]::before{content:attr(data-label);display:block;font-family:var(--sans);
    font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:2px}
  .tabla.apilada td:empty{display:none}
  .tabla.apilada tr.grupo td{background:var(--lino3);position:static;padding:8px 16px}
  .tabla.apilada tr.destaca,.tabla.apilada tbody tr.destaca td{background:var(--peri-soft)}
  td code{word-break:normal;overflow-wrap:anywhere}
  .portada h1{font-size:2.5rem}
  h1{font-size:2.2rem} h2{font-size:1.55rem}
}
a{color:var(--indigo);text-decoration-color:color-mix(in srgb,var(--indigo) 35%,transparent)}
.indice-t .indice-pagina .n{color:var(--indigo)}
.indice-secciones a{border-left:1px solid var(--line)}
.indice-secciones a[aria-current]{border-left-color:var(--indigo);color:var(--indigo)}

/* El grano de película de Mercury se retiró: es un acabado de interfaz, no de un informe. */

/* ---------- residuo del sistema anterior ----------
   El rombo índigo al inicio de cada sección y la línea vertical eran el motivo del «hilo» del diseño
   viejo. En Mercury la sección se marca con su cejilla y su filete, no con dos motivos que compiten.
   ⚠️ La cejilla NO se toca por marcado: su <p class="cejilla"> es lo que el arnés lee para recontar
   las tareas por área, y una clase de más ahí lo deja ciego. Todo su realce va por CSS. */
.tramo{padding-left:0;border-left:0}
.tramo::before{content:none}

/* Un bloque que se copia y se pega —las líneas del archivo de redirecciones, un fragmento de
   configuración— se lee en monoespaciada y se desplaza solo, sin estirar la página. */
.tabla pre.mono{margin:0;padding:14px 16px;font-size:.82rem;line-height:1.7;white-space:pre;
  overflow-x:auto;background:var(--surface,#fff);color:var(--tinta,#20212b)}

/* ==========================================================================
   LA FORMA DE ESTUDIO
   Un estudio se lee por su estructura: portada, índice, resumen ejecutivo, introducción, capítulos
   con secciones numeradas, conclusión, anexos. Lo que sigue es esa forma. El número de capítulo lo
   declara el <body class="cap-4"> (o «anexo-B») y todo lo demás —secciones, tablas, figuras,
   sumario— se CUENTA con contadores de CSS: no hay un solo dígito de numeración escrito en el HTML,
   así que no puede quedar viejo.
   ========================================================================== */

/* ---------- el número del capítulo, de la clase del cuerpo ---------- */
.cap-1{--cap:"1"} .cap-2{--cap:"2"} .cap-3{--cap:"3"} .cap-4{--cap:"4"} .cap-5{--cap:"5"} .cap-6{--cap:"6"}
.cap-7{--cap:"7"} .cap-8{--cap:"8"} .cap-9{--cap:"9"} .cap-10{--cap:"10"} .cap-11{--cap:"11"} .cap-12{--cap:"12"}
.anexo-A{--cap:"A"} .anexo-B{--cap:"B"} .anexo-C{--cap:"C"} .anexo-D{--cap:"D"} .anexo-E{--cap:"E"} .anexo-F{--cap:"F"}
main,.pagina-larga{counter-reset:seccion tabla figura tabla-r}

/* ---------- la página: una columna de lectura, sin cromo ---------- */
.hoja{display:block;padding:0 28px 90px;max-width:none}
main{max-width:var(--ancho);margin:0 auto;min-width:0}
@media (min-width:1120px){ main{max-width:calc(var(--ancho) + var(--nota) + 48px)} .conNota{grid-template-columns:minmax(0,var(--ancho)) minmax(0,var(--nota))} }
[id]{scroll-margin-top:calc(var(--techo) + 16px)}

/* ---------- la cabecera corrida: marca · capítulo · índice. Dos enlaces. ---------- */
.barra{position:sticky;top:0;z-index:60;display:flex;flex-wrap:nowrap;align-items:center;gap:16px;
  min-height:var(--techo);height:var(--techo);padding:0 clamp(16px,4vw,40px);
  background:#fbfbf9;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
.barra-marca{font-size:15px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
.barra-cap{flex:1;min-width:0;font-size:13.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.barra-cap .corto{display:none}
.barra-indice{flex:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:3px;padding:0 12px;height:36px;display:inline-flex;align-items:center}
.barra-indice:hover{border-color:var(--indigo);color:var(--indigo)}

/* ---------- la cubierta ---------- */
.portada.cubierta{border-bottom:1px solid var(--line);padding:56px 0 40px;margin:0 0 8px}
@media (min-width:900px){ .portada.cubierta{min-height:calc(100svh - var(--techo) - 8px);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box} }
.portada.cubierta .sello{font-size:12.5px;letter-spacing:.09em;color:var(--steel)}
.portada.cubierta .sello b{display:none}                          /* la versión va en la ficha, abajo */
.portada.cubierta h1{font-size:clamp(2.9rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.01em;margin:.2em 0 .25em}
.subtitulo{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.3;color:var(--ink-soft);margin:0 0 1.2em;max-width:34ch}
.portada.cubierta .entrada{font-size:1.12rem;max-width:50ch}
.ficha-doc{display:flex;flex-direction:column;gap:6px;margin:2.4rem 0 0;font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--steel);max-width:none;border:0;background:transparent;padding:0}
.ficha-doc span{display:block}

/* ---------- la apertura de un capítulo ---------- */
.portada{border-bottom:0;padding:34px 0 8px}
.parte{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0 0 14px;max-width:none}
.parte:empty{display:none}
.portada .sello{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--steel);display:flex;gap:0 14px;flex-wrap:wrap;margin:0 0 16px}
.portada .sello > span:first-child{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo)}
.portada .sello b{color:var(--ink);font-weight:500}
.portada h1,.titulo-cap{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.005em;margin:0 0 .35em;max-width:none;color:var(--ink);text-wrap:balance}
.portada .entrada{font-size:1.12rem;line-height:1.5;color:var(--ink-soft);max-width:50ch}
.portada.capitulo{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--line)}

/* ---------- el sumario del capítulo ---------- */
.indice-capitulo{margin:22px 0 40px;padding:16px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);counter-reset:idx}
.indice-capitulo .indice-t{margin:0 0 8px}
.indice-capitulo .indice-secciones{list-style:none;padding:0;margin:0;max-width:none;columns:1;column-gap:40px}
@media (min-width:900px){ .indice-capitulo .indice-secciones{columns:2} }
.indice-capitulo li{margin:0;break-inside:avoid;counter-increment:idx}
.indice-capitulo li a{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:14px;line-height:1.5;color:var(--ink);text-decoration:none;border:0}
.indice-capitulo li a:hover{color:var(--indigo)}
.indice-capitulo li a::before{content:var(--cap) "." counter(idx);flex:none;min-width:2.6em;font-family:var(--mono);font-size:12.5px;color:var(--indigo);font-variant-numeric:tabular-nums}

/* ---------- las secciones, numeradas ---------- */
.tramo{counter-increment:seccion;padding-top:3rem;margin-top:0;padding-left:0;border-left:0}
.tramo + .tramo{border-top:1px solid var(--line)}
.tramo::before{content:none}
.tramo > h2::before,.tramo > .cejilla + h2::before{content:var(--cap) "." counter(seccion) "\2003";font-family:var(--mono);font-weight:500;font-size:.72em;color:var(--steel);letter-spacing:0;font-variant-numeric:tabular-nums}
.preliminar{padding-top:3rem}
.preliminar + .preliminar,.preliminar + .tramo{border-top:1px solid var(--line)}
.preliminar > h2::before{content:none}
.cejilla{font-size:12px;letter-spacing:.12em;color:var(--steel);gap:0}
.cejilla::before{content:none}
.cejilla:empty{display:none}
h3{font-family:var(--sans);font-size:1.125rem;font-weight:600;letter-spacing:-.012em;margin:2.2em 0 .55em}
h4{font-family:var(--sans);font-size:.95rem;font-weight:620;color:var(--ink-soft);margin:1.8em 0 .4em}

/* ---------- tablas y figuras, con número y título ---------- */
.tramo caption{counter-increment:tabla}
.tramo caption::before{content:"Tabla " var(--cap) "." counter(tabla) " · ";font-weight:600;color:var(--indigo)}
.preliminar caption{counter-increment:tabla-r}
.preliminar caption::before{content:"Tabla R." counter(tabla-r) " · ";font-weight:600;color:var(--indigo)}
.barras{counter-increment:figura}
.barras > h4::before{content:"Figura " var(--cap) "." counter(figura) " · ";font-weight:600;color:var(--indigo)}
caption{font-size:14px;color:var(--ink-soft);background:transparent;border-bottom:1px solid var(--ink);padding:10px 0 8px}
caption b{color:var(--ink)}
.tabla{border:0;border-radius:0;background:transparent}
thead th{border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:1px solid var(--line)}
.tabla tr.grupo td{background:transparent;font-weight:600;position:static;border-top:1px solid var(--ink);padding-top:14px}

/* ---------- listas largas, abiertas ---------- */
.lista-larga{margin:22px 0}
.lista-t{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);margin:1.4em 0 .5em;max-width:none;border-bottom:1px solid var(--ink);padding-bottom:6px}
.lista-t b{font-weight:600}
.texto-pagina{border-left:1px solid var(--line);padding-left:18px}
ul.lista.mini.cols{column-gap:36px}
@media (min-width:820px){ ul.lista.mini.cols{columns:2;max-width:none} }
@media (min-width:1120px){ ul.lista.mini.cols{columns:3} }
ul.lista.mini.cols code{overflow-wrap:anywhere}
.buscador{padding:10px 0;border-bottom:0}

/* ---------- piel plana: un documento, no una aplicación ---------- */
.aviso{border-radius:0;background:var(--surface)}
.cifras{gap:0 24px;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);background:transparent;padding:6px 0}
.cifras .c{border:0;border-radius:0;background:transparent;padding:14px 0}
.insight,article.insight,.ficha-rec{border-radius:0}
article.insight{border:0;border-bottom:1px solid var(--line)}
.expediente{border:0;border-top:1px solid var(--ink);background:transparent;gap:0}
.chips{display:block;max-width:60ch}
.chips li{display:inline;margin:0}
.chips li::after{content:", "}
.chips li:last-child::after{content:"."}
blockquote p{font-style:italic}
ol.citas{font-size:.93rem}

/* ---------- pasar la hoja ---------- */
.pasos{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;margin-top:64px;padding-top:18px;border-top:2px solid var(--ink)}
.pasos a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;max-width:none;min-height:36px}
.pasos a b{display:block;font-family:var(--sans);font-size:.98rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:700;margin-top:4px}
.pasos a.idx{grid-column:2;text-align:center;align-self:center;font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:8px 14px}
.pasos a.ant{grid-column:1}
.pasos a.sig{grid-column:3;text-align:right;margin-left:0}
.pasos a.ant + a.idx{grid-column:2}
.pie{font-family:var(--mono);font-size:12px;color:var(--steel)}

/* ---------- el índice general ---------- */
.indice-general{list-style:none;padding:0;margin:8px 0 0;max-width:none;counter-reset:cap anx}
.indice-general > li{margin:0}
.indice-general li.pre a{display:block;padding:8px 0;font-family:var(--serif);font-size:1.25rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.indice-general li.parte{margin-top:26px}
.indice-general .parte-t{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0 0 6px}
.indice-general li.parte > ol{list-style:none;padding:0;margin:0}
.indice-general li.cap,.indice-general li.anx{padding:12px 0 14px;border-top:1px solid var(--line)}
.indice-general li.cap{counter-increment:cap}
.indice-general li.anx{counter-increment:anx}
.indice-general li.cap > a,.indice-general li.anx > a{display:flex;gap:14px;align-items:baseline;font-family:var(--serif);font-size:1.35rem;line-height:1.2;color:var(--ink);text-decoration:none}
.indice-general li.cap > a:hover,.indice-general li.anx > a:hover{color:var(--indigo)}
.indice-general li.cap > a::before{content:counter(cap);flex:none;min-width:1.4em;font-family:var(--mono);font-size:.95rem;color:var(--indigo)}
.indice-general li.anx > a::before{content:"Anexo " counter(anx,upper-alpha);flex:none;font-family:var(--mono);font-size:.85rem;color:var(--indigo);letter-spacing:.04em}
.indice-general .d{display:block;font-size:.95rem;line-height:1.5;color:var(--ink-soft);margin:4px 0 8px 0;max-width:62ch}
.indice-general ol.secs{list-style:none;padding:0;margin:0;counter-reset:sec;columns:1;column-gap:36px}
@media (min-width:900px){ .indice-general ol.secs{columns:2} }
.indice-general li.sec{counter-increment:sec;margin:0;break-inside:avoid}
.indice-general li.sec a{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:14.5px;line-height:1.45;color:var(--ink-soft);text-decoration:none}
.indice-general li.sec a:hover{color:var(--indigo)}
.indice-general li.sec a::before{content:counter(cap) "." counter(sec);flex:none;min-width:2.4em;font-family:var(--mono);font-size:12.5px;color:var(--indigo);font-variant-numeric:tabular-nums}
.indice-general li.anx li.sec a::before{content:counter(anx,upper-alpha) "." counter(sec)}
.indice-general li.imprimir{margin-top:26px;padding-top:14px;border-top:1px solid var(--line)}
.indice-general li.imprimir a{font-size:.95rem;color:var(--ink-soft)}

/* ---------- el documento continuo: media portada por bloque ---------- */
.pagina-larga{border-top:0;padding-top:0;margin-top:0}
.pagina-larga + .pagina-larga{margin-top:4rem}
.bloque-sep{margin:5rem 0 0;padding:3rem 0 2rem;border-top:2px solid var(--ink)}
.bloque-o{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);margin:0 0 .6rem;max-width:none}
.bloque-t{font-family:var(--serif);font-size:2.4rem;font-weight:400;line-height:1.08;margin:0 0 .5rem;max-width:none;color:var(--ink)}
.bloque-d{font-size:1.06rem;line-height:1.55;color:var(--ink-soft);margin:0;max-width:56ch}

/* ---------- el teléfono ---------- */
@media (max-width:1119px){
  :root{--techo:48px}
  .barra-indice{height:40px}
  .indice-capitulo li a,.indice-general li.sec a,.indice-general li.pre a,.pasos a{min-height:40px}
  .indice-general li.cap > a,.indice-general li.anx > a{min-height:40px;align-items:center}
  .indice-general li.imprimir a{display:block;min-height:40px;padding:8px 0}
}
@media (max-width:600px){
  .barra{gap:10px;padding:0 14px}
  .barra-marca{font-size:14px}
  .barra-cap .largo{display:none} .barra-cap .corto{display:inline}
  .barra-indice{height:36px}
  .hoja{padding:0 16px 60px}
  .portada.cubierta{padding:34px 0 28px}
  .portada.cubierta h1{font-size:2.5rem}
  .portada h1,.titulo-cap{font-size:2.1rem}
  h2{font-size:1.55rem}
  .indice-capitulo li a,.indice-general li.sec a{min-height:40px;padding:8px 0}
  .indice-general li.pre a,.indice-general li.cap > a,.indice-general li.anx > a{min-height:40px}
  .pasos{grid-template-columns:1fr;gap:10px}
  .pasos a.ant,.pasos a.idx,.pasos a.sig{grid-column:1;text-align:left}
}

/* ---------- impreso: hojas A4 con cabecera corrida y número de hoja ---------- */
@page{size:A4;margin:20mm 18mm 22mm}
@page{@top-left{content:"El Hilar · El origen de cada familia";font:8.5pt Geist,sans-serif;color:#555} @bottom-center{content:counter(page);font:9pt "Geist Mono",monospace;color:#555}}
@page :first{@top-left{content:none} @top-right{content:none} @bottom-center{content:none}}
@media print{
  .barra,.saltar,.pasos,.buscador,.indice-capitulo,li.imprimir{display:none !important}
  .portada.cubierta{min-height:0;break-after:page;border:0}
  #mapa{break-before:page;break-after:page}
  #en-dos-paginas,#introduccion,.portada.capitulo{break-before:page}
  .tramo{break-before:auto;padding-top:1.6rem}
  .bloque-sep{break-before:page;break-after:page;border:0;padding-top:30vh}
  .pagina-larga{break-before:page}
  .papeleta{break-before:page}
  h1,h2,h3,h4,caption{break-after:avoid}
  tr,article.insight,article.ev,.ficha,.aviso,.cifras,.fila,blockquote,.nota{break-inside:avoid}
  p,li{orphans:3;widows:3}
  .indice-general ol.secs,ul.lista.mini.cols{columns:2}
  .conNota{grid-template-columns:1fr}
  a{color:#111;text-decoration:none}
}

code,li code,.mini li code{font-size:max(.9em,12.5px)}
ol.citas{font-size:max(.93rem,13px)}

.indice-general,.indice-general a,.indice-general .d,.indice-general li{text-transform:none;letter-spacing:0}
.indice-general .parte-t{text-transform:uppercase;letter-spacing:.12em}

/* el índice general ocupa la columna entera: no es una lista de prosa */
.indice-general,.indice-general ol,.indice-general li{max-width:none}
.indice-general .d{font-weight:400}
.indice-general li.cap > a,.indice-general li.anx > a{font-weight:400}
.indice-general li.sec a{font-weight:400}
.indice-capitulo li a{font-weight:400}

/* ── La pluma (ola 38): el hilo y el índice que se lee ─────────────────────────────────────────
   El hilo va al pie de cada capítulo, fuera de la navegación (que no se imprime): una línea que
   dice qué ya sabe el lector y qué viene. Y las ciento doce secciones del índice general dejan de
   ser una sublista con el mismo peso que los capítulos: en pantalla ancha son una línea corrida en
   gris bajo cada capítulo. En el teléfono siguen en bloque (el dedo necesita 40 px) y en el PDF
   también (el folio de cada sección va a la derecha). */
.hilo{margin:56px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.45;color:var(--ink);max-width:56ch;text-wrap:pretty}
.hilo + .pasos{margin-top:24px;border-top:0}
@media screen and (min-width:900px){
  .indice-general ol.secs{columns:auto;display:block;font-size:13.5px;line-height:1.8;color:var(--ink-soft);max-width:72ch}
  .indice-general li.sec{display:inline}
  .indice-general li.sec a{display:inline;padding:0;font-size:inherit;line-height:inherit;min-height:0}
  .indice-general li.sec a::before{display:inline;min-width:0;margin-right:3px;font-size:11.5px}
  .indice-general li.sec:not(:last-child) a::after{content:"·";margin:0 7px;color:var(--steel)}
}
@media print{ .hilo{margin-top:36px;font-size:12.5pt;break-inside:avoid} }

.papeleta li{break-inside:avoid;margin:.9em 0}

/* Una decisión contestada y vuelta a mover. No es una etiqueta: es una frase larga, así que
   envuelve como texto —.et no envuelve y desbordaba la página entera en teléfono— y se separa
   por color, no por forma. */
.reabierta{display:block;margin-top:.45em;color:var(--gualda);border-left:2px solid var(--gualda);
  padding-left:.5em;line-height:1.45}
.reabierta strong{color:var(--gualda)}

/* ─── Ilustraciones ───────────────────────────────────────────────────────────────────────────
   El estudio ilustraba con tablas y barras. Las cosas que la junta desbloqueó —un recorrido de
   admisión, un embudo, un área de servicio— no caben en una fila: se dibujan. Todo con los tokens
   que ya existen, sin imágenes y sin color nuevo, para que impriman igual que el resto.        */
.il{margin:1.6rem 0 2rem}
.il-t{font:600 .78rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--steel);margin:0 0 .15rem}
.il-h{font:400 1.15rem/1.3 var(--serif);color:var(--ink);margin:0 0 .2rem}
.il-p{font-size:.86rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .9rem;max-width:62ch}
.il-pie{font-size:.78rem;line-height:1.5;color:var(--steel);margin:.7rem 0 0;max-width:66ch}
.il-ojo{font-size:.78rem;line-height:1.5;margin:.7rem 0 0;max-width:66ch;color:var(--gualda);
  border-left:2px solid var(--gualda);padding-left:.6em}

/* dos estados, uno al lado del otro */
.il-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.il-caja{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:.85rem .9rem}
.il-caja > h4{font:600 .78rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin:0 0 .6rem}
.il-caja.ahora{background:var(--lino3)}
.il-caja.pide{border-color:var(--indigo)}
.il-men{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.il-men li{font-size:.8rem;padding:.22rem .55rem;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--lino);color:var(--ink)}
.il-men li.sale{color:var(--steel);text-decoration:line-through;opacity:.75}
.il-men li.boton{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:600}
.il-men li.nueva{border-color:var(--indigo);color:var(--indigo)}

/* un recorrido de pasos numerados */
.il-pasos{list-style:none;margin:0;padding:0;display:grid;justify-content:start;
  grid-template-columns:repeat(auto-fit,minmax(168px,215px));gap:.6rem;counter-reset:pa}
.il-pasos li{counter-increment:pa;border:1px solid var(--line);border-top:3px solid var(--indigo);
  border-radius:var(--r-sm);background:var(--surface);padding:.6rem .7rem;font-size:.82rem;
  line-height:1.4;position:relative}
.il-pasos li::before{content:counter(pa);display:block;font:600 .78rem/1 var(--mono);
  color:var(--indigo);margin-bottom:.3rem}
.il-pasos li b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.il-pasos li small{display:block;color:var(--steel);font-size:.78rem;margin-top:.3rem}
.il-inserto{border:1px dashed var(--bosque);background:var(--bosque2);color:var(--bosque);
  border-radius:var(--r-sm);padding:.5rem .7rem;font-size:.78rem;line-height:1.45;margin:.6rem 0}
.il-inserto b{color:var(--bosque)}

/* un embudo: cada peldaño más estrecho que el anterior */
.il-embudo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;
  align-items:center}
.il-embudo li{width:100%;max-width:var(--w,100%);border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);padding:.55rem .8rem;font-size:.82rem;
  line-height:1.4;text-align:center}
.il-embudo li b{color:var(--ink)}
.il-embudo li small{display:block;color:var(--steel);font-size:.78rem}
.il-embudo li.si{border-color:var(--bosque);background:var(--bosque2)}
.il-embudo li.no{border-color:var(--gualda);background:var(--gualda2)}
.il-salidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem;
  margin-top:.5rem}

/* bandas de distancia */
.il-bandas{display:flex;flex-direction:column;gap:.45rem}
.il-banda{border:1px solid var(--line);border-left:4px solid var(--glasto);border-radius:var(--r-sm);
  background:var(--surface);padding:.55rem .8rem}
.il-banda.fuera{border-left-color:var(--gualda);background:var(--gualda2)}
.il-banda h5{font:600 .82rem/1.3 var(--sans);color:var(--ink);margin:0 0 .3rem}
.il-banda p{margin:0;font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.il-falta{font:600 .78rem/1.3 var(--mono);color:var(--gualda);background:var(--gualda2);
  border-radius:var(--pill);padding:.15rem .4rem;white-space:nowrap}

/* tarjetas en rejilla: pilares y rutas */
.il-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.7rem}
.il-card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:.75rem .85rem;display:flex;flex-direction:column;gap:.3rem}
.il-card .rot{font:600 .78rem/1.3 var(--mono);letter-spacing:.04em;color:var(--steel)}
.il-card .es{font:400 1rem/1.25 var(--serif);color:var(--ink)}
.il-card p{margin:0;font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.il-card.hueco{border-style:dashed;border-color:var(--gualda);background:var(--gualda2)}
.il-card.hueco .es,.il-card.hueco .rot,.il-card.hueco p{color:var(--gualda)}
.il-tono{display:flex;height:6px;border-radius:var(--pill);overflow:hidden;margin-top:.15rem}
.il-tono i{display:block}
.il-tono i.c{background:var(--glasto)}
.il-tono i.s{background:var(--gualda)}
.il-tono-pie{display:flex;justify-content:space-between;font:600 .78rem/1.4 var(--mono);
  color:var(--steel)}

/* precio y su salida */
.il-precio{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.7rem;
  align-items:stretch}
.il-precio .lado{border:1px solid var(--line);border-radius:var(--r);padding:.8rem .9rem;
  background:var(--surface)}
.il-precio .lado.cabe{border-color:var(--bosque)}
.il-precio .lado.nocabe{border-color:var(--glasto)}
.il-precio h5{font:600 .78rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 .45rem;color:var(--steel)}
.il-precio p{margin:0 0 .4rem;font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.il-precio p:last-child{margin-bottom:0}

@media print{
  .il,.il-caja,.il-card,.il-banda,.il-pasos li,.il-embudo li{break-inside:avoid}
  .il-card,.il-caja,.il-banda,.il-pasos li{box-shadow:none}
}

/* Los renglones de «Qué falta, y de quién»: el texto chico iba pegado al negrita y el
   identificador de la tarea quedaba encajado al final de la frase, como si fuera parte de ella. */
.il-caja .lista li{margin:0 0 .7rem}
.il-caja .lista li > small{display:block;margin-top:.2rem;font-size:.8rem;color:var(--steel);line-height:1.45}
.il-caja .lista li > small.mono{margin-top:.35rem;font-size:.78rem;letter-spacing:.06em;
  color:var(--indigo);background:var(--peri-soft);border-radius:var(--pill);padding:.12rem .42rem;
  display:inline-block}