/* ==========================================================================
   FIGURAS - articulo: automating-a-broken-process
   Generado por el split de insights.css (2026-08-10). Backup del monolito:
   insights.css.bak-20260810-170215
   NO editar a mano sin leer component-catalog.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   P2.2 · LA TESIS — un solo párrafo en toda la pieza sube de registro.
   Mismo modo de énfasis que el lede (color + peso + aire, nunca un paso de
   escala nuevo). Se usa UNA vez: "Automation is the plate. Your quarter is
   the run." Si se usa dos veces deja de significar.
   -------------------------------------------------------------------------- */
.ins-prose > p.ins-thesis {
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  max-width: var(--ins-measure);
}


/* --------------------------------------------------------------------------
   P2.4 · REGLA DE OPERACIÓN — la pieza da dos, y son lo único del artículo
   escrito en imperativo. Reusa la silueta de [data-run='q'] (dos hairlines,
   nada más) porque cumple la misma función: una aserción incrustada en la
   lectura. La etiqueta mono en azul la separa de una pregunta.
   -------------------------------------------------------------------------- */
/* SIN FILETES. La regla de operación se distingue por su etiqueta mono azul
   y por el peso del texto, no por dos líneas que la encierran. Encerrada caía
   a 90px del pie de la Fig. 03 y del filete de apertura de su panel: tres
   reglas en la altura de un párrafo, ninguna separando nada distinto. */
.ins-prose .ins-rule {
  max-width: var(--ins-measure);
  display: grid;
  gap: 0.55rem;
}

.ins-prose > .ins-rule { margin-block: 2.4em; }

.ins-rule__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.ins-rule__text {
  margin: 0;
  max-width: none;
  font-size: var(--ins-read);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   P2.5 · Fig. 01 · EL CAMBIO DE ESTADO
   Tabla real (citable, extraíble, y ya sabe volverse tarjetas abajo de 640px)
   dentro del chrome de figura. Sin color: acá no hay respuesta que marcar,
   hay un antes y un después. La única jerarquía la pone el copy, que ya dijo
   "That last property carries the real cost" — por eso "Removed" va en <strong>.
   -------------------------------------------------------------------------- */
.ins-fig--states .ins-fig__panel { background: none; border: 0; }

.ins-fig--states [data-tablewrap] { margin-block: 0; }

.ins-fig--states table { margin-block: 0; }

/* Las dos columnas de estado miden lo mismo: la comparación es simétrica y
   una asimetría acá se leería como una preferencia que el artículo no tiene. */
.ins-fig--states table th:first-child,
.ins-fig--states table td:first-child { width: 30%; }

.ins-fig--states table th:not(:first-child) { width: 35%; }

.ins-fig--states table td:last-child strong { color: var(--ink); font-weight: 600; }


/* --------------------------------------------------------------------------
   P2.6 · Fig. 02 · EL TEST DE PRE-TIRADA
   Cuatro defectos, cuatro preguntas. Los numerales 01-04 son los MISMOS
   cuatro de los h3 de la sección: la figura no repite, referencia. La
   pregunta va en voz de pregunta (ink 500), que es como este sistema ya
   compone [data-run='q'].
   -------------------------------------------------------------------------- */
/* DOS FILETES EN TOTAL: el que abre y el que cierra. Las filas se separan por
   aire (2.6rem entre una y la siguiente) y por el numeral azul que abre cada
   una. Tres hairlines internas más las dos fuertes eran cinco líneas para
   cuatro filas de texto. */
.ins-test { display: grid; border-block: 1px solid var(--line-strong); }

.ins-test__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.3rem 0.75rem;
  padding-block: 1.3rem;
}

/* Numeral de figura: vino. Es un índice, no una cifra que el registro pruebe
   (doctrina 2026-08-04, aplicada a esta pieza el 2026-08-10). */
.ins-test__n {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--accent-alt);
  font-variant-numeric: tabular-nums;
}

.ins-test__defect {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

.ins-test__q {
  grid-column: 2;
  margin: 0;
  max-width: none;
  font-size: var(--ins-read);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}


/* El corchete de vino VIVÍA acá (fila 04, la espera que nadie mide) y se mudó
   a la Fig. 04. Motivo: en la Fig. 04 el corchete acota una distancia que el
   artículo MIDE de verdad (día 2 contra día 9) y sobre la que dice, textual,
   que "the gap contains every step nobody thought was worth mentioning". Es
   el mismo argumento, con una regla al lado. Una sola forma, una sola vez. */

/* --------------------------------------------------------------------------
   P2.7 · Fig. 03 · LA CAJA DEL MAPA
   El artículo dice que un paso "earns a box" y que la caja está terminada
   cuando lleva cuatro campos. Entonces la figura ES una caja: un rectángulo
   con hairline, partido en cuatro cuadrantes. Sin esquinas en L — esas
   quedan reservadas a las DOS superficies alzadas del documento (Definition
   y CTA de cierre), que riman entre sí a 19.000px de distancia.
   -------------------------------------------------------------------------- */
.ins-fig--box .ins-fig__panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ins-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.ins-box__field {
  background: var(--bg-raised);
  padding: 1.15rem 1.25rem;
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.ins-box__k {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.ins-box__v {
  margin: 0;
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-primary);
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   P2.7b · LA LÍNEA · un solo instrumento, dos lecturas
   Fig. 01 (la planilla de 2023) y Fig. 04 (las tres fuentes) son el MISMO
   aparato: un eje proporcional con marcas y una acotación. Una sola forma
   leída dos veces vale más que dos formas parecidas.

   REGLA DURA: cada posición sale de una cifra que el artículo dice. La
   planilla son 24 meses (2023 → "two years later") con la integración
   disponible desde hace 18 → mes 6 → 25%. Las tres fuentes son día 2, día 6
   y día 9 sobre un eje que TERMINA en 9, porque el día 9 es lo que pasó.
   Ninguna posición es una estimación.
   -------------------------------------------------------------------------- */
.ins-line { display: grid; }


/* --- Modo EJE (Fig. 01): eventos fechados sobre una línea de tiempo ---
   Los tres eventos van en UN solo contenedor y en orden CRONOLÓGICO en el
   DOM. En escritorio se posicionan en absoluto sobre el eje; en móvil se
   apilan tal cual están escritos. Separarlos en dos cajas (arriba/abajo)
   ordenaba bien en escritorio y MAL en móvil, porque `order` sólo reordena
   dentro de un mismo contenedor: la planilla de 2023 quedaba después de su
   propia consecuencia. */
.ins-line__stage { position: relative; padding-block: 4.4rem; }

.ins-line__axis {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--line-strong); transform-origin: 0 50%;
}

.ins-line__dot {
  position: absolute; left: var(--x); top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--accent); border-radius: 50%;
}

.ins-line__cap {
  position: absolute; left: var(--x); top: 50%;
  width: 1px; height: 11px; margin: -5.5px 0 0 0;
  background: var(--line-strong);
}

/* Los rótulos alternan arriba/abajo. No es un capricho: con los tres abajo,
   el del 25% y el del 100% se pisaban a 704px. Alternando, cada uno tiene
   toda la mitad de su lado. */
.ins-line__ev { position: absolute; left: var(--x); max-width: 42%; }

.ins-line__ev--above { bottom: calc(50% + 0.7rem); max-width: 50%; }

.ins-line__ev--below { top: calc(50% + 0.7rem); }

.ins-line__ev--end { left: auto; right: 0; text-align: right; }

.ins-line__when {
  display: block;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.3rem;
}

.ins-line__what {
  margin: 0; max-width: none;
  font-size: 0.88rem; line-height: 1.4; color: var(--text-primary); text-wrap: pretty;
}


/* --- Modo BARRAS (Fig. 04): tres lecturas de la MISMA magnitud --- */
/* Una sola serie, así que un solo color y sin leyenda: el rótulo de cada
   barra la nombra y la cifra va pegada a su punta. */
/* Una sola grilla de tres pistas para TODAS las filas (las barras y la de la
   acotación). Así el corchete cae exactamente sobre la escala y no sobre el
   ancho total de la figura, que es el error clásico de este gráfico. */
.ins-line__bars { display: grid; gap: 0.9rem; }

.ins-line__bar,
.ins-line__gap,
.ins-units__row {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) 4.4rem;
  gap: 0.3rem 1rem;
  align-items: center;
}

.ins-line__src {
  margin: 0; max-width: none;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4;
}

.ins-line__plot { position: relative; height: 10px; }

.ins-line__fill {
  position: absolute; left: 0; top: 0;
  height: 100%; width: var(--w);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-radius: 0 2px 2px 0;
}

.ins-line__v {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ins-line__gap > .ins-line__span { grid-column: 2; }


/* --- LA ACOTACIÓN, en los dos modos --- */
.ins-line__span { position: relative; height: 1.15rem; margin-top: 0.5rem; }

/* EL CORCHETE VA EN VINO EN LAS DOS FIGURAS (2026-08-10). Antes solo lo estaba
   en la Fig. 04 y la Fig. 01 lo tenía gris, como si fueran dos cosas distintas.
   Son la misma: el de la Fig. 01 acota los dieciocho meses en que la solución
   ya existía y nadie la usó, un tramo que el registro no puede justificar; el
   de la Fig. 04 acota el hueco entre lo que se dice y lo que pasa. Los dos
   miden una distancia que el documento no puede certificar. */
.ins-line__brk {
  position: absolute; left: var(--x1); right: calc(100% - var(--x2));
  top: 0; height: 0.62rem;
  border: 1.5px solid var(--accent-alt);
  border-bottom: 0;
}

.ins-line__lab {
  position: absolute; left: var(--x1); top: 0.78rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-alt);
}

/* EL CORCHETE DE VINO — Fig. 04. Acota de la afirmación (día 2) al hecho
   (día 9) y NO CIERRA: adentro de ese tramo está, en palabras del propio
   artículo, "every step nobody thought was worth mentioning". El documento
   mide la distancia y declara que no puede certificar su contenido. */
.ins-line__span--open .ins-line__brk {
  border-bottom: 0;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.ins-fig--scale.is-in .ins-line__span--open .ins-line__brk {
  animation: ins-brk var(--dur-slow) var(--ease-out) 0.5s both;
}

@media (prefers-reduced-motion: reduce) {

.ins-line__span--open .ins-line__brk { animation: none; transform: none; }

}


/* La barra de escala de las dos figuras arranca donde arranca el texto del
   cuerpo: el eje es una medida, no un adorno centrado. */
.ins-fig--line .ins-fig__panel,
.ins-fig--scale .ins-fig__panel { background: none; border: 0; padding-block: 0.9rem 0; }


/* --------------------------------------------------------------------------
   P2.7d · Fig. 06 · LA SECUENCIA
   El artículo dice que "the sequence carries most of the value" y que lo que
   queda al final es "a smaller surface than the one the team started with".

   POR QUÉ NO HAY BARRAS ACÁ: dibujar tres anchos (100 / 68 / 44) sería
   inventar una proporción que el texto no dice, en un artículo cuya tesis es
   no confiar en números que no podés defender. La reducción se marca con
   SANGRÍA, que es una convención tipográfica y no una medición: cada paso
   arranca más adentro que el anterior y el escalón se ve solo.
   -------------------------------------------------------------------------- */
/* Igual que el test: dos filetes horizontales, el que abre y el que cierra.
   Los pasos ya se separan por la SANGRÍA y por su filete VERTICAL, que además
   es el que dibuja la escalera. Sumarles una horizontal por paso convertía la
   escalera en una pila de cajones. */
.ins-seq { display: grid; border-block: 1px solid var(--line-strong); }

.ins-seq__step {
  margin-left: var(--in, 0);
  padding: 1.15rem 0 1.15rem 1.1rem;
  border-left: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
}

/* La sangría vive en clases, no en un style= inline: un custom property
   inline le gana a cualquier regla de la hoja y el media query de abajo no
   podría achicarla en móvil. */
.ins-seq__step--2 { --in: 2.5rem; }

.ins-seq__step--3 { --in: 5rem; }

/* Numeral de figura: vino, igual que el del test. */
.ins-seq__n {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; line-height: 1.9; color: var(--accent-alt);
  font-variant-numeric: tabular-nums;
}

.ins-seq__verb {
  margin: 0; max-width: none;
  font-size: var(--ins-read); line-height: 1.35; font-weight: 500; color: var(--ink);
}

.ins-seq__what {
  grid-column: 2; margin: 0; max-width: none;
  font-size: 0.9rem; line-height: 1.45; color: var(--text-muted); text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   P2.7e · Fig. 07 · CUATRO CONTRA CUATROCIENTOS
   Las dos cifras son literales: "correcting four hundred records costs more
   than correcting the four that would have surfaced manually in the same
   week". Una barra dejaría al 4 invisible; una grilla de unidades deja las
   dos CONTABLES y la razón 100:1 se vuelve física.

   El campo se dibuja con UN degradado repetido, no con 400 nodos: mismo
   resultado exacto (50 x 8 = 400), cero costo de DOM.
   -------------------------------------------------------------------------- */
.ins-units { display: grid; gap: 1.5rem; }

.ins-units__k {
  margin: 0; max-width: none;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4;
}

.ins-units__field {
  --dot: 5px;
  --pitch: 8px;
  width: calc(var(--cols) * var(--pitch));
  height: calc(var(--rows) * var(--pitch));
  background-image: radial-gradient(
    circle at calc(var(--pitch) / 2) calc(var(--pitch) / 2),
    color-mix(in srgb, var(--ink) 72%, transparent) 0 calc(var(--dot) / 2),
    transparent calc(var(--dot) / 2)
  );
  background-size: var(--pitch) var(--pitch);
}

/* La grilla vive en clases, NO en un style= inline, y NO lleva max-width.
   Las dos cosas son la misma lección, y costó un bug de verdad: con
   `max-width: 100%` el campo se recortaba cuando la pista era más angosta
   que 50 columnas, y a 390px dibujaba 44x8 = 352 puntos mientras la cifra
   al lado seguía diciendo 400. Una figura que afirma 400 y dibuja 352, en
   un artículo sobre no confiar en números que no podés defender, es el peor
   error posible. Ahora la geometría se declara por breakpoint y el producto
   de filas por columnas es 400 SIEMPRE. */
.ins-units__field--4   { --cols: 4;  --rows: 1;  }

.ins-units__field--400 { --cols: 40; --rows: 10; }
  /* 40 x 10 = 400 · 320px */
.ins-units__v {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   P2.8 · MOVIMIENTO — sólo opacity y transform, sólo con la figura ya en
   pantalla, y siempre con el reposo VISIBLE.

   Patrón deliberado: los hijos usan `animation` disparada por `.is-in` del
   padre, no `opacity: 0` en reposo. Sin JS nunca hay `.is-in`, nunca hay
   animación, y los hijos se ven — el <noscript> que descubre el padre
   .reveal no necesita saber nada de esto. Es la trampa que ya nos costó
   caro con reveal: un estado inicial invisible que depende de JS.
   -------------------------------------------------------------------------- */
@keyframes ins-p2in {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes ins-p2fade {
  from { opacity: 0; }
}

@keyframes ins-p2draw {
  from { transform: scaleX(0); }
}

@keyframes ins-p2grow {
  from { transform: scaleX(0); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Fig. 01 · la fila entra, y la celda "automated" entra DESPUÉS: la
     automatización reproduce lo que ya estaba, no lo evalúa. Sólo opacity:
     transform sobre celdas de tabla no está garantizado en todos los motores. */
.ins-fig--states.is-in tbody tr { animation: ins-p2fade 0.45s var(--ease-out) both; }

.ins-fig--states.is-in tbody tr:nth-child(1) { animation-delay: 0.08s; }

.ins-fig--states.is-in tbody tr:nth-child(2) { animation-delay: 0.16s; }

.ins-fig--states.is-in tbody tr:nth-child(3) { animation-delay: 0.24s; }

.ins-fig--states.is-in tbody tr:nth-child(4) { animation-delay: 0.32s; }

  /* El retardo de la celda es RELATIVO al de su fila (fila + 0.18s). Con un
     retardo fijo, la celda de la fila 4 terminaba de aparecer antes de que su
     propia fila empezara: dos opacidades anidadas se multiplican, así que el
     efecto no se veía nunca. */
.ins-fig--states.is-in tbody td:last-child { animation: ins-p2fade 0.45s var(--ease-out) both; }

.ins-fig--states.is-in tbody tr:nth-child(1) td:last-child { animation-delay: 0.26s; }

.ins-fig--states.is-in tbody tr:nth-child(2) td:last-child { animation-delay: 0.34s; }

.ins-fig--states.is-in tbody tr:nth-child(3) td:last-child { animation-delay: 0.42s; }

.ins-fig--states.is-in tbody tr:nth-child(4) td:last-child { animation-delay: 0.50s; }


  /* Fig. 02 · las cuatro filas del test, en orden de lectura. */
.ins-fig--test.is-in .ins-test__row { animation: ins-p2in 0.45s var(--ease-out) both; }

.ins-fig--test.is-in .ins-test__row:nth-child(1) { animation-delay: 0.06s; }

.ins-fig--test.is-in .ins-test__row:nth-child(2) { animation-delay: 0.14s; }

.ins-fig--test.is-in .ins-test__row:nth-child(3) { animation-delay: 0.22s; }

.ins-fig--test.is-in .ins-test__row:nth-child(4) { animation-delay: 0.30s; }


  /* Fig. 01 · los eventos aparecen en orden cronológico, que es el orden en
     que el problema se armó. La línea se dibuja primero. */
.ins-fig--line.is-in .ins-line__axis { animation: ins-p2draw 0.6s var(--ease-out) both; }

.ins-fig--line.is-in .ins-line__dot,
  .ins-fig--line.is-in .ins-line__cap,
  .ins-fig--line.is-in .ins-line__ev { animation: ins-p2fade 0.4s var(--ease-out) both; }

.ins-fig--line.is-in [style*='--x:0'] { animation-delay: 0.30s; }

.ins-fig--line.is-in [style*='--x:25%'] { animation-delay: 0.44s; }

.ins-fig--line.is-in [style*='--x:100%'] { animation-delay: 0.58s; }

.ins-fig--line.is-in .ins-line__span { animation: ins-p2fade 0.4s var(--ease-out) 0.72s both; }


  /* Fig. 04 · las tres barras crecen desde el mismo cero. Escalar el ancho es
     transform-free por diseño: `width` animaría layout, y el sistema sólo
     permite opacity/transform, así que crece un scaleX con origen izquierdo. */
.ins-fig--scale.is-in .ins-line__fill { animation: ins-p2grow 0.55s var(--ease-out) both; transform-origin: 0 50%; }

.ins-fig--scale.is-in .ins-line__bar:nth-child(1) .ins-line__fill { animation-delay: 0.10s; }

.ins-fig--scale.is-in .ins-line__bar:nth-child(2) .ins-line__fill { animation-delay: 0.20s; }

.ins-fig--scale.is-in .ins-line__bar:nth-child(3) .ins-line__fill { animation-delay: 0.30s; }

.ins-fig--scale.is-in .ins-line__v { animation: ins-p2fade 0.4s var(--ease-out) both; }

.ins-fig--scale.is-in .ins-line__bar:nth-child(1) .ins-line__v { animation-delay: 0.40s; }

.ins-fig--scale.is-in .ins-line__bar:nth-child(2) .ins-line__v { animation-delay: 0.50s; }

.ins-fig--scale.is-in .ins-line__bar:nth-child(3) .ins-line__v { animation-delay: 0.60s; }


  /* Fig. 05 · la caja se completa campo por campo. El artículo dice que está
     terminada cuando lleva los cuatro; el movimiento cuenta hasta cuatro. */
.ins-fig--box.is-in .ins-box__field { animation: ins-p2in 0.45s var(--ease-out) both; }


  /* Fig. 06 · los tres pasos entran en orden, que es lo único que la figura
     afirma: que el orden importa. */
.ins-fig--seq.is-in .ins-seq__step { animation: ins-p2in 0.45s var(--ease-out) both; }

.ins-fig--seq.is-in .ins-seq__step:nth-child(1) { animation-delay: 0.08s; }

.ins-fig--seq.is-in .ins-seq__step:nth-child(2) { animation-delay: 0.20s; }

.ins-fig--seq.is-in .ins-seq__step:nth-child(3) { animation-delay: 0.32s; }


  /* Fig. 07 · primero los cuatro, después la pausa, después los cuatrocientos.
     La pausa ES el argumento. Sólo opacity: escalar el campo deformaría los
     puntos, que es justo lo que hay que poder contar. */
.ins-fig--units.is-in .ins-units__row { animation: ins-p2fade 0.45s var(--ease-out) both; }

.ins-fig--units.is-in .ins-units__row:nth-child(1) { animation-delay: 0.10s; }

.ins-fig--units.is-in .ins-units__row:nth-child(2) { animation-delay: 0.46s; }

.ins-fig--box.is-in .ins-box__field:nth-child(1) { animation-delay: 0.08s; }

.ins-fig--box.is-in .ins-box__field:nth-child(2) { animation-delay: 0.18s; }

.ins-fig--box.is-in .ins-box__field:nth-child(3) { animation-delay: 0.28s; }

.ins-fig--box.is-in .ins-box__field:nth-child(4) { animation-delay: 0.38s; }

}

@media (max-width: 860px) {

  /* El rótulo de la fuente pasa arriba de su barra: 12.5rem de etiqueta
     contra una pista de 200px convertía cada barra en un muñón. */
.ins-line__bar,
  .ins-line__gap,
  .ins-units__row { grid-template-columns: minmax(0, 1fr) 4.4rem; }

.ins-line__src,
  .ins-units__k { grid-column: 1 / -1; }

.ins-line__gap > .ins-line__span { grid-column: 1; }

}

@media (max-width: 700px) {

  /* La caja se apila: cuatro campos en columna siguen siendo una caja, dos
     columnas de 150px no. */
.ins-box { grid-template-columns: 1fr; }

.ins-test__row { grid-template-columns: 2rem minmax(0, 1fr); }


  /* El eje proporcional NO se lee a 350px: un 25% son 87px y los rótulos se
     encabalgan. En vertical el instrumento deja de ser una escala y pasa a
     ser lo que igual tenía que decir — tres hechos en orden, con su fecha.
     La acotación baja a una línea al pie, que es lo que un plano hace cuando
     no entra la cota. */
.ins-line__axis, .ins-line__dot, .ins-line__cap { display: none; }

.ins-line__stage { padding-block: 0; display: grid; gap: 1.15rem; }

.ins-line__ev {
    position: static; max-width: none; text-align: left;
    padding-left: 1rem; border-left: 1px solid var(--line-strong);
  }

.ins-line__span { height: auto; margin-top: 1.15rem; }

.ins-line__brk { display: none; }

.ins-line__lab { position: static; display: block; }


  /* Fig. 06 · la escalera se achica pero no desaparece: con 5rem de sangría
     el tercer paso tendría 180px de ancho útil en un viewport de 390. */
.ins-seq__step { padding-left: 0.85rem; }

.ins-seq__step--2 { --in: 1rem; }

.ins-seq__step--3 { --in: 2rem; }

  /* Fig. 07 · el campo se REFORMA, no se recorta: 25 x 16 vuelven a ser 400
     exactos y a paso de 8px miden 200px, que entran holgados en la pista de
     ~264px de un viewport de 390. La cifra que la figura afirma no cambia
     con el viewport. */
.ins-units__field--400 { --cols: 25; --rows: 16; }


  /* En móvil la tabla de estados ya se vuelve tarjetas por el modo card
     global; los anchos de columna fijos sobran y estorban. */
.ins-fig--states table th:first-child,
  .ins-fig--states table td:first-child,
  .ins-fig--states table th:not(:first-child) { width: auto; }

}