/* ==========================================================================
   FIGURAS - articulo: marketing-attribution-lead-opportunity
   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.
   ========================================================================== */


/* --- Screen-reader-only live region for the selector result. --- */
.ins-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   P3 · MARKETING ATTRIBUTION — "la cadena de custodia"
   Pieza 3 del hub. Copy congelado: sale tal cual de
   Inbound/SEO-AEO/produccion/2026-08-10-marketing-attribution-...-v2-laura.md

   POR QUÉ ESTA PIEZA NECESITA CAPA PROPIA. Las piezas 1 y 2 son prosa densa:
   párrafos de 4-6 renglones donde `.ins-prose > * + * { margin-top: 1.5em }`
   es exactamente el ritmo correcto. Esta está escrita en frases sueltas —
   unos 130 párrafos de UNA línea. Con el mismo aire uniforme cada frase
   quedaba flotando a 28px de la siguiente, sin jerarquía, y la página se leía
   como una lista de fragmentos huérfanos en 25.000px de scroll.

   La frase corta acá es RECURSO, no descuido. Así que el aire deja de ser un
   valor y pasa a ser una relación: dentro de una estrofa las frases están
   cerca porque son el mismo pensamiento; entre estrofas se abre el intervalo
   de siempre. Aprobado por Carlos 2026-08-10; queda escrito en el playbook.

   TODO EL TEXTO DE ESTA CAPA SALE DEL COPY. Los títulos de las seis figuras
   son fragmentos VERBATIM del cuerpo, no rótulos escritos para la ocasión:
   ninguna palabra de esta pieza es nuestra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P3.1 · LA ESTROFA — el ritmo en dos estados, no en uno
   -------------------------------------------------------------------------- */
/* Guarda obligatoria (§5 del playbook): `.ins-prose > * + *` es (0,1,1) y le
   gana al margin-block de una clase suelta (0,1,0). */
.ins-prose > .mkat-stanza { margin-block: 1.5em; max-width: var(--ins-measure); }

.ins-prose > * + .mkat-stanza { margin-top: 1.5em; }


/* 0.42em contra 1.5em. La proporción importa más que el valor: 3.5x de
   diferencia es lo que hace que el ojo lea "esto es un bloque" sin que haya
   ninguna caja, ningún filete y ninguna sangría dibujándolo. */
.mkat-stanza > p + p { margin-top: 0.42em; }

.mkat-stanza > p { max-width: none; text-wrap: pretty; }


/* --------------------------------------------------------------------------
   P3.2 · EL BEAT — la frase que sube de registro
   Mismo modo de énfasis que .ins-thesis (color + peso + aire), pero acá el
   copy tiene CINCO frases que son giros del argumento y no una sola, así que
   suben un paso de escala para diferenciarse del lede y entre sí no compiten:
   están separadas por miles de píxeles.
   -------------------------------------------------------------------------- */
.ins-prose > .mkat-beat {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  max-width: 26ch;
  margin-block: var(--beat-2);
  text-wrap: pretty;
}

/* El remate del test de closed-won: la única cifra del artículo que el
   sistema NO puede defender, y por eso el <strong> se lleva el vino. Es la
   quinta marca de vino de la pieza y la única fuera de la Fig. 06. */
.ins-prose > .mkat-beat strong { color: inherit; font-weight: 700; }


/* --------------------------------------------------------------------------
   P3.3 · EL ESPÉCIMEN DE CAMPO — un valor de CRM se ve como un valor de CRM
   Sin borde a propósito: un chip con marco suma DOS filetes horizontales cada
   vez, y hay cuatro repartidos por la pieza. El fondo alzado hace el mismo
   trabajo a coste cero de filete (§1.4).
   -------------------------------------------------------------------------- */
/* La línea del copy va ENTERA y en un solo renglón ("First Origin: LinkedIn
   Paid", "Source: LinkedIn"): el nombre del campo y su valor no se parten en
   etiqueta y contenido, porque eso deja de ser la frase que escribió Laura.
   Lo que hace el diseño es teñirlos distinto dentro de la misma línea. */
.mkat-slot {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0.7rem 1rem;
  background: var(--bg-raised);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.mkat-slot__k { color: var(--text-faint); }

.mkat-slot__v { color: var(--ink); }

.mkat-slot__v--live { color: var(--accent); }

.ins-prose > .mkat-slot { margin-block: var(--beat-2); }


/* La pregunta del formulario. Es una sola en toda la pieza y viene cortando
   una oración por el medio ("A simple optional question such as: / … / can
   recover information…"), así que se compone como lo que es: un campo de
   formulario incrustado en el renglón. */
.mkat-ask {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-strong);
}

.mkat-ask::after {
  content: '';
  width: 1px;
  height: 1.05em;
  background: var(--accent);
  align-self: center;
  animation: mkat-caret 1.15s steps(1) infinite;
}

@keyframes mkat-caret { 50% { opacity: 0; } }

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

.mkat-ask::after { animation: none; }

}

.ins-prose > .mkat-ask { margin-block: var(--beat-2); }


/* El valor muerto, inline: "a Source field that says Unknown". Mono y gris,
   el mismo par que el hueco de arriba. */
.mkat-dead {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}


/* --------------------------------------------------------------------------
   P3.4 · EL RIEL DE SECUENCIA — la rima de la Fig. 01, en chico
   "Structured data → traceability → automation". Misma gramática que la
   cadena de custodia 12.000px más arriba: fichas mono, flecha azul.
   -------------------------------------------------------------------------- */
.mkat-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.mkat-rail__sep { color: var(--accent); }

.ins-prose > .mkat-rail { margin-block: var(--beat-2); }


/* --------------------------------------------------------------------------
   P3.5 · FORMA DE FIGURA — una sola, seis instrumentos
   Cada figura abre y cierra con UNA regla fuerte. Dos filetes por figura, el
   presupuesto exacto de §1.4. Ninguna fila lleva borde propio: las filas se
   separan por aire, que es la corrección que se pagó en la pieza 2.
   -------------------------------------------------------------------------- */
.ins-fig--rig .ins-fig__panel {
  border-block: 1px solid var(--line-strong);
  padding-block: var(--beat-1);
}


/* ---- Fig. 01 · LA CADENA DE CUSTODIA --------------------------------------
   La figura ES la línea del copy, con sus flechas y en su orden:
   "Lead or Contact → Account → Opportunity → Closed Won". No se parte en
   cuatro etiquetas sueltas ni se reescribe en vertical: se instrumenta.
   Cada estación lleva encima una marca de estado — llena y azul donde el
   registro todavía tiene origen, hueca y gris donde ya no. Una de cuatro.
   Esa desproporción es el argumento entero y no cuesta una palabra nueva. */
.mkat-chain {
  /* Distancia que recorre el origen antes de apagarse: el ancho de "Lead or
     Contact" (127px) + el canal de la flecha (~35px). No puede salir de un
     translateX(100%): el porcentaje de un transform resuelve contra la caja
     del PROPIO elemento, y el token mide 5px. Medido a 1440/1024/390: el
     nombre de estación es nowrap y su tipo no es fluida, así que el número
     no cambia con el viewport. */
  --mkat-travel: 10rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem 1rem;
  padding-top: 1.5rem;
}

.mkat-chain__st { position: relative; }

.mkat-chain__name {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
}

.mkat-chain__st:not([data-carries]) .mkat-chain__name { color: var(--text-muted); }

/* la marca de estado, encima del nombre */
.mkat-chain__mark {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--text-faint);
  background: var(--bg-base);
}

.mkat-chain__st[data-carries] .mkat-chain__mark {
  border-color: var(--accent);
  background: var(--accent);
}

/* la flecha es la del copy; sólo la primera se tiñe, que es el único tramo
   que el origen alcanza a recorrer */
.mkat-chain__sep {
  align-self: center;
  color: var(--text-faint);
  font-size: 1.05rem;
  line-height: 1;
}

.mkat-chain__sep--live { color: var(--accent); }

/* el token que viaja ese tramo y se apaga antes de llegar al Account */
.mkat-chain__tok {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: 5px;
  height: 5px;
  margin: 1px 0 0 1px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}


/* ---- Fig. 02 · LA SOBRESCRITURA -------------------------------------------
   El campo de marzo queda VACÍO a propósito. El copy no nombra el valor de
   marzo, y no puede: el registro ya no lo tiene. Dibujar una etiqueta ahí
   sería inventar el dato que el artículo dice que se perdió. */
.mkat-ow { display: grid; gap: 0.75rem; }

.mkat-ow__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }

.mkat-ow__when {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mkat-ow__cell { display: flex; align-items: center; }

/* Los dos momentos son EL MISMO CAMPO, así que llevan la misma ficha: mismo
   fondo, mismo alto, mismo ancho mínimo. Antes marzo era una línea punteada
   suelta y julio una caja blanca; se leían como dos objetos distintos, no
   como un campo antes y después. */
.mkat-ow .mkat-slot { min-width: 15rem; justify-content: flex-start; }

.mkat-ow .mkat-slot--void { position: relative; }

.mkat-ow .mkat-slot--void::after { content: ''; display: block; width: 0; height: 1.1875rem; }

/* la barra azul de marzo: existe, y después no */
.mkat-ow__was {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0.7rem;
  height: 1.1875rem;
  background: var(--accent);
  transform-origin: 0 50%;
}

.mkat-ow__gone {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: calc(0.7rem + 0.59rem);
  border-bottom: 1px dotted var(--text-faint);
}


/* ---- Fig. 03 · DOS CAMPOS, TRES INTERACCIONES -----------------------------
   Dos filas y tres columnas, a lo ancho de la placa entera. El primer pase
   componía los dos campos como columnas enfrentadas al centro y dejaba medio
   panel vacío a la izquierda: la figura quedaba apiñada y no se leía. En
   filas, el conteo es inmediato — una marca contra tres — y esa diferencia
   ES la razón por la que tienen que ser dos campos. Sin una sola palabra
   fuera de los dos nombres, que están en el copy. */
.mkat-two {
  display: grid;
  grid-template-columns: 9.5rem repeat(3, minmax(0, 1fr));
  align-items: center;
  row-gap: 1.35rem;
}

.mkat-two__h {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* el índice de interacción: mismo mono chico que "Fig. 01" y que el numeral
   del riel. Es aparato de referencia, no un rótulo inventado. */
.mkat-two__n {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.35rem;
}

.mkat-two__k {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  padding-right: 1rem;
}

.mkat-two__cell { display: flex; align-items: center; min-height: 1.25rem; }

/* la escritura */
.mkat-two__val { width: 9px; height: 9px; background: var(--accent); display: block; }

/* el candado: la interacción llega y el campo no se mueve */
.mkat-two__hold { width: 16px; height: 1px; background: var(--line-strong); display: block; }


/* ---- Fig. 04 · DOS INSTRUMENTOS, UN MISMO TRATO ---------------------------
   El eje SÍ es horizontal acá: es una línea de tiempo, la única forma que
   esta idea tiene, y el sistema ya la admite (piezas 1 y 2 la usan). Se
   dibuja con background, no con border, así que no entra en el presupuesto
   de filetes: el presupuesto cuenta reglas que separan bloques, y esto es la
   escala del instrumento. */
.mkat-win { padding-block: 0.5rem 0; }

.mkat-win__stage { position: relative; height: 9.5rem; }

.mkat-win__axis {
  position: absolute;
  left: 0; right: 0; bottom: 4.75rem;
  height: 1px;
  /* Mismo token y misma técnica que el eje de la pieza 2 (.ins-line__axis):
     un eje de medición es la escala del instrumento, no un separador, y por
     eso vive dentro del panel y no entra en el presupuesto de filetes. */
  background: var(--line-strong);
  transform-origin: 0 50%;
}

.mkat-win__ev { position: absolute; bottom: 4.75rem; left: var(--x); transform: translateX(-50%); text-align: center; }

/* El hecho del medio baja debajo del eje. Con los tres rótulos arriba, el de
   febrero (250px de ancho desde x=0) y el de abril (centrado en x=281px) se
   pisaban: no es una preferencia de composición, es una colisión medida. */
.mkat-win__ev--under .mkat-win__read { bottom: auto; top: calc(100% + 2.6rem); }

.mkat-win__ev--end { transform: translateX(-100%); text-align: right; }

.mkat-win__ev--start { transform: translateX(0); text-align: left; }

.mkat-win__dot {
  display: block;
  width: 7px; height: 7px;
  margin: 0 auto -3.5px;
  background: var(--text-muted);
  position: relative;
  top: 3.5px;
}

.mkat-win__ev--start .mkat-win__dot { margin-left: 0; }

.mkat-win__ev--end .mkat-win__dot { margin-right: 0; }

.mkat-win__when {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Las puntas se dimensionan SOLAS. Con `left:0; right:0` el rótulo heredaba
   la caja de 7px del punto y "July" desbordaba 24px fuera de la placa: el
   text-align no puede alinear una línea que ya no entra en su contenedor. */
.mkat-win__ev--start .mkat-win__when { left: 0; right: auto; text-align: left; }

.mkat-win__ev--end   .mkat-win__when { right: 0; left: auto; text-align: right; }

/* las dos lecturas: la plataforma en febrero, el CRM en julio */
.mkat-win__read {
  position: absolute;
  bottom: calc(100% + 0.85rem);
  left: 0; right: 0;
  display: grid;
  gap: 0.2rem;
  white-space: nowrap;
}

.mkat-win__ev--start .mkat-win__read { left: 0; right: auto; text-align: left; }

.mkat-win__ev--end   .mkat-win__read { right: 0; left: auto; text-align: right; }

.mkat-win__what { font-size: 1.0625rem; font-weight: 500; color: var(--ink); line-height: 1.3; font-variant-numeric: tabular-nums; }

.mkat-win__ev--end .mkat-win__what { color: var(--accent); font-size: 1.35rem; letter-spacing: -0.01em; }

.mkat-win__ev--start .mkat-win__dot,
.mkat-win__ev--end   .mkat-win__dot { background: var(--ink); }

/* SIN corchete de acotación acá. Se dibujó, se midió y se sacó: el rótulo
   de abril baja debajo del eje, así que la banda inferior ya está ocupada, y
   un tercer filete horizontal para marcar una distancia que las dos marcas
   de punta ya declaran es exactamente el defecto que costó la pieza 2. La
   única acotación de esta pieza es la de vino, en la Fig. 06. */

/* ---- Fig. 05 · UN VALOR, CINCO MECANISMOS ---------------------------------
   El abanico. Riel vertical + brazos cortos: los brazos miden 18px, muy por
   debajo del piso de 120px de la auditoría, y no son separadores sino
   conectores de un diagrama. */
.mkat-fan { display: grid; justify-items: start; gap: var(--beat-1); }

.mkat-fan__list { justify-self: stretch; }

.mkat-fan__q { font-size: 1.0625rem; font-weight: 500; color: var(--ink); }

.mkat-fan__list { position: relative; display: grid; gap: 0.75rem; padding-left: 2.1rem; }

.mkat-fan__list::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 1px;
  background: var(--line-strong);
  transform-origin: 50% 0;
}

.mkat-fan__it { position: relative; font-size: 1.0625rem; line-height: 1.4; color: var(--text-primary); }

.mkat-fan__it::before {
  content: '';
  position: absolute;
  left: -1.75rem;
  top: 0.72em;
  width: 18px;
  height: 1px;
  background: var(--line-strong);
}


/* ---- Fig. 06 · EL TRIMESTRE, Y LA PARTE QUE NO PUEDE DEFENDER -------------
   La barra son $480.000 exactos. El relleno azul es 390/480 = 81,25%, no un
   ancho elegido a ojo. El corchete de vino acota los $90.000 restantes: el
   MISMO corchete de la Definition y del ledger de la pieza 2, rotado al eje
   horizontal, y SIN BRAZO DE CIERRE — una medición que nadie terminó. Es la
   única marca de vino de las seis figuras. */
.mkat-ledger { display: grid; gap: var(--beat-1); }

.mkat-ledger__bar {
  position: relative;
  height: 2.4rem;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.mkat-ledger__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 81.25%;
  background: var(--accent);
  transform-origin: 0 50%;
}

.mkat-ledger__brk {
  position: absolute;
  left: 81.25%;
  right: 0;
  top: calc(100% + 0.5rem);
  height: 9px;
  border: 1.5px solid var(--accent-alt);
  border-top: 0;
  transform-origin: 0 50%;
}

.mkat-ledger__rows { display: grid; gap: 0.55rem; margin-top: 1.6rem; }

.mkat-ledger__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: baseline;
}

.mkat-ledger__v {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mkat-ledger__k { font-size: 1.0625rem; color: var(--text-primary); }

.mkat-ledger__row--traced .mkat-ledger__v { color: var(--accent); }

.mkat-ledger__row--void .mkat-ledger__v   { color: var(--accent-alt); }


/* --------------------------------------------------------------------------
   P3.6 · MOVIMIENTO
   Todo cuelga de .is-in (reveal.js) y todo es transform u opacity. Bajo
   prefers-reduced-motion no se declara una sola animación: el estado final
   de cada instrumento ya es el estado que se ve sin JS.
   -------------------------------------------------------------------------- */
@keyframes mkat-fade  { from { opacity: 0; transform: translateY(6px); } }

@keyframes mkat-drawy { from { transform: scaleY(0); } }

@keyframes mkat-drawx { from { transform: scaleX(0); } }

@keyframes mkat-erase { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@keyframes mkat-appear { from { opacity: 0; } }

/* El origen sale de su estación y se apaga en el camino: a 55% todavía está
   entero, a 100% ya no está, y ese 100% cae sobre la flecha. Nunca llega al
   Account, que es exactamente lo que el párrafo de arriba afirma. */
@keyframes mkat-decay {
  0%   { opacity: 0; transform: translateX(0); }
  20%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--mkat-travel)); }
}

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

  /* Fig. 01 · el token sale, se apaga en el camino, y recién entonces
     aparecen las tres estaciones que ya no lo tienen. El orden narra la
     pérdida: primero se ve viajar, después se ve faltar. */
.ins-fig--chain.is-in .mkat-chain__tok { animation: mkat-decay 2.2s var(--ease-out) 0.5s both; }

.ins-fig--chain.is-in .mkat-chain__st:not([data-carries]),
  .ins-fig--chain.is-in .mkat-chain__sep:not(.mkat-chain__sep--live) { animation: mkat-appear 0.5s var(--ease-out) both; }

.ins-fig--chain.is-in [data-i="2"] { animation-delay: 1.35s; }

.ins-fig--chain.is-in [data-i="3"] { animation-delay: 1.50s; }

.ins-fig--chain.is-in [data-i="4"] { animation-delay: 1.65s; }


  /* Fig. 02 · el valor de marzo se borra de izquierda a derecha y deja el
     hueco punteado. Después escribe julio. */
.ins-fig--ow.is-in .mkat-ow__was  { animation: mkat-erase 0.7s var(--ease-out) 0.55s both; }

.ins-fig--ow.is-in .mkat-ow__gone { animation: mkat-appear 0.4s var(--ease-out) 1.15s both; opacity: 1; }

.ins-fig--ow.is-in .mkat-ow__row:last-child .mkat-slot { animation: mkat-fade 0.5s var(--ease-out) 1.35s both; }


  /* Fig. 03 · los tres eventos, en orden. La marca de Last Origin se muda en
     cada uno; la de First Origin nunca se mueve. */
.ins-fig--two.is-in .mkat-two__cell { animation: mkat-appear 0.45s var(--ease-out) both; }

.ins-fig--two.is-in [data-ev="1"] { animation-delay: 0.15s; }

.ins-fig--two.is-in [data-ev="2"] { animation-delay: 0.55s; }

.ins-fig--two.is-in [data-ev="3"] { animation-delay: 0.95s; }


  /* Fig. 04 · el eje se tiende, las marcas caen en orden cronológico. */
.ins-fig--win.is-in .mkat-win__axis    { animation: mkat-drawx 0.7s var(--ease-out) 0.1s both; }

.ins-fig--win.is-in .mkat-win__ev      { animation: mkat-fade 0.5s var(--ease-out) both; }

.ins-fig--win.is-in .mkat-win__ev[data-i="1"] { animation-delay: 0.35s; }

.ins-fig--win.is-in .mkat-win__ev[data-i="2"] { animation-delay: 0.55s; }

.ins-fig--win.is-in .mkat-win__ev[data-i="3"] { animation-delay: 0.75s; }


  /* Fig. 05 · el abanico se abre de arriba abajo. */
.ins-fig--fan.is-in .mkat-fan__list::before { animation: mkat-drawy 0.55s var(--ease-out) 0.1s both; }

.ins-fig--fan.is-in .mkat-fan__it { animation: mkat-fade 0.45s var(--ease-out) both; }

.ins-fig--fan.is-in .mkat-fan__it:nth-child(1) { animation-delay: 0.20s; }

.ins-fig--fan.is-in .mkat-fan__it:nth-child(2) { animation-delay: 0.31s; }

.ins-fig--fan.is-in .mkat-fan__it:nth-child(3) { animation-delay: 0.42s; }

.ins-fig--fan.is-in .mkat-fan__it:nth-child(4) { animation-delay: 0.53s; }

.ins-fig--fan.is-in .mkat-fan__it:nth-child(5) { animation-delay: 0.64s; }


  /* Fig. 06 · primero se llena lo que el registro puede defender, y sólo
     entonces se acota lo que no. El orden es el argumento. */
.ins-fig--ledger6.is-in .mkat-ledger__fill { animation: mkat-drawx 0.85s var(--ease-out) 0.15s both; }

.ins-fig--ledger6.is-in .mkat-ledger__brk  { animation: mkat-drawx 0.5s var(--ease-out) 1.05s both; }

.ins-fig--ledger6.is-in .mkat-ledger__row  { animation: mkat-fade 0.45s var(--ease-out) both; }

.ins-fig--ledger6.is-in .mkat-ledger__row:nth-child(1) { animation-delay: 0.45s; }

.ins-fig--ledger6.is-in .mkat-ledger__row:nth-child(2) { animation-delay: 0.75s; }

.ins-fig--ledger6.is-in .mkat-ledger__row:nth-child(3) { animation-delay: 1.20s; }

}

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

.mkat-ow__was  { display: none; }

.mkat-ow__gone { opacity: 1; }

.mkat-chain__tok { display: none; }

}

/* Sin JS no hay .is-in (el noscript fuerza .reveal a opacity:1 pero nadie
   dispara el borrado): el valor de marzo tiene que estar ya ausente, o la
   figura afirma lo contrario de lo que dice el artículo. */
.ins-fig--ow.reveal:not(.is-in) .mkat-ow__was { opacity: 0; }

@media (max-width: 700px) {

.mkat-ow__row { grid-template-columns: 1fr; gap: 0.5rem; }

.mkat-two { grid-template-columns: 6.5rem repeat(3, minmax(0, 1fr)); row-gap: 1.1rem; }

  /* Fig. 01 · al envolver en dos renglones, la marca de estado del segundo
     quedaba pisando la línea de base del primero: la marca vive 8px arriba
     de su nombre y el row-gap de 14px no le dejaba lugar. */
.mkat-chain { row-gap: 1.9rem; }

.mkat-two__k { font-size: 0.85rem; padding-right: 0.5rem; }

.mkat-ledger__row { grid-template-columns: 7rem minmax(0, 1fr); gap: 0.9rem; }

.mkat-ledger__v { font-size: 1rem; }

  /* El eje de 6 meses en 300px deja las tres marcas encabalgadas: el
     instrumento deja de ser una escala y pasa a ser lo que igual tenía que
     decir, tres momentos en orden con su fecha. Mismo criterio que la
     pieza 2 con .ins-line. */
.mkat-win__stage { height: auto; display: grid; gap: 1.4rem; }

.mkat-win__axis { display: none; }

.mkat-win__ev {
    position: static; transform: none; text-align: left;
    padding-left: 1rem; border-left: 1px solid var(--line-strong);
  }

.mkat-win__dot { display: none; }

.mkat-win__when, .mkat-win__read { position: static; text-align: left; white-space: normal; }

.mkat-win__read { margin-top: 0.3rem; }

.mkat-win__ev--end .mkat-win__read, .mkat-win__ev--end .mkat-win__when { text-align: left; }

.mkat-beat, .ins-prose > .mkat-beat { max-width: none; }

}


/* ==========================================================================
   P3.9 · CORRECCIONES DE CARLOS (2026-08-10, sobre localhost)
   Tres pedidos, uno de ellos enmienda doctrina y queda escrito en el playbook.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P3.9a · MENOS FILETES. La auditoría daba 456px por filete (piso 350) y aun
   así Carlos vio la página cargada de líneas. Cuando el número pasa y el ojo
   no, manda el ojo: el techo de §1.4 era necesario pero no suficiente.

   Se van 15 de 39 reglas horizontales:
     · las 12 de figura (6 paneles × apertura y cierre). Una figura ya se
       anuncia con su pie mono ("FIG. 03 · …") y se separa con 3.2em de aire
       arriba y abajo. El marco era redundante con la etiqueta.
     · las 3 hairlines de fila de la tabla de modelos. Cuatro filas con seis
       reglas en 300px se leían como un formulario. Quedan las dos que
       encierran y la que separa el encabezado: tres fronteras reales.
   Quedan 24, una cada ~740px.

   Los 13 filetes de h2 NO se tocan: son la única regla del documento con un
   significado único e inequívoco (acá empieza una sección) y aparecen una vez
   cada 1.370px. Sin ellos la pieza pierde forma.
   -------------------------------------------------------------------------- */
.ins-fig--rig .ins-fig__panel { border-block: 0; padding-block: 0; }

.ins-prose > .ins-fig--rig { margin-block: 3.2em; }


/* La tabla de modelos. Scopeada: `.ins-prose table` lo comparten las piezas 1
   y 2 publicadas y no se les cambia el aire sin decisión propia. */
.mkat-table table tbody td { border-bottom: 0; }

.mkat-table table th,
.mkat-table table td { padding-block: 1.05rem; }

.mkat-table table tbody tr:first-child td { padding-top: 1.3rem; }

.mkat-table table tbody tr:last-child td { padding-bottom: 1.3rem; }


/* --------------------------------------------------------------------------
   P3.9b · EL VINO DEJA DE SER UNA MARCA ÚNICA
   Pedido explícito de Carlos: "en todas las figuras podés usar más el rojo,
   está muy duotono". Enmienda §2 del playbook (que lo limitaba a cuatro
   marcas en toda la pieza). No se reparte a ojo: entra con LA MISMA regla que
   ya tenía, aplicada en todos los lugares donde corresponde en vez de en uno
   solo.

     AZUL  = el valor vivo, la respuesta, lo que el registro SÍ puede probar.
     VINO  = lo que el registro NO puede certificar: el origen que se perdió,
             el valor que no significa nada, la plata sin trazar. Más los
             índices, que ya iban en vino en el numeral de sección.

   Con esa regla el rojo aparece en las seis figuras sin que ninguna lo lleve
   de adorno: en cada una marca exactamente la pérdida de la que habla el
   párrafo que tiene al lado.
   -------------------------------------------------------------------------- */

/* Los índices en vino subieron a insights-core.css como regla del sistema
   (2026-08-10): rigen en las tres piezas, no solo en esta. La regla scopeada
   que vivía acá se borró para que no haya dos fuentes de verdad. */


/* Fig. 01 · las tres estaciones que ya no tienen el origen. Antes eran grises
   (ausencia neutra); son una pérdida, y la pérdida tiene color. */
.mkat-chain__st:not([data-carries]) .mkat-chain__mark {
  border-color: var(--accent-alt);
  background: var(--bg-base);
}

.mkat-chain__sep:not(.mkat-chain__sep--live) { color: var(--accent-alt); }


/* Fig. 02 · el hueco que dejó marzo. */
.mkat-ow__gone { border-bottom-color: var(--accent-alt); }

.mkat-ow__when { color: var(--text-muted); }


/* Fig. 03 · los índices de interacción, y el guion de las dos veces que First
   Origin NO escribió: el candado que en un solo campo habría sido borrado. */
.mkat-two__n { color: var(--accent-alt); }

.mkat-two__hold { background: var(--accent-alt); height: 2px; }


/* Fig. 04 · febrero es la lectura de la plataforma: correcta dentro de su
   ventana y sin poder certificar un peso de facturación. Julio se queda azul
   porque ES la respuesta: el importe cerrado. */
.mkat-win__ev--start .mkat-win__dot { background: var(--accent-alt); }

.mkat-win__ev--start .mkat-win__what { color: var(--accent-alt); }


/* Fig. 05 · un valor que no certifica nada, y los cinco brazos de lo que
   podría significar. */
.mkat-fan .mkat-slot__v { color: var(--accent-alt); }

.mkat-fan__list::before,
.mkat-fan__it::before { background: color-mix(in srgb, var(--accent-alt) 55%, transparent); }


/* Fig. 06 · el tramo de la barra que el registro no puede defender deja de
   ser un gris de relleno y pasa a ser el mismo rojo del corchete y de la
   cifra. Los tres marcan la misma plata. */
.mkat-ledger__bar { background: color-mix(in srgb, var(--accent-alt) 14%, transparent); }


/* El valor muerto del cuerpo: "a Source field that says Unknown". */
.mkat-dead { color: var(--accent-alt); }


/* --------------------------------------------------------------------------
   P4.2 · LOS CINCO GIROS DEL ARGUMENTO
   Los .mkat-beat son las cinco frases donde el artículo cambia de dirección.
   Llevan `reveal` en el marcado, así que entran con el mismo fade+rise que
   las figuras y con el mismo observador. Cinco en 17.800px no es fatiga: es
   una marca cada tres pantallas y media, en el renglón que más importa.
   Las ~50 estrofas NO se animan: animar cada frase corta de una pieza escrita
   en frases cortas es exactamente la fatiga que hay que evitar.
   -------------------------------------------------------------------------- */
.ins-page .mkat-beat.reveal { transform: translateY(10px); }

.ins-page .mkat-beat.reveal.is-in { transform: none; }


/* "Self Reported" partía en dos renglones y desalineaba su fila contra las
   otras tres: la columna se dimensiona para el nombre más largo. */
.mkat-table table th:first-child,
.mkat-table table td:first-child { width: 9.5rem; }

.mkat-table table td:first-child { white-space: nowrap; }

@media (max-width: 640px) {

.mkat-table table th:first-child,
  .mkat-table table td:first-child { width: auto; white-space: normal; }

}


/* ==========================================================================
   P5 · COLORIZE — donde el color todavía no significaba nada
   El pase anterior metió vino en las seis figuras. Quedaban tres lugares del
   CUERPO donde el color habría dicho algo y no decía nada. No se agrega un
   tono nuevo: los dos que ya hay, con la misma gramática.
   ========================================================================== */

/* La aritmética del test, legible sólo por color. Tres cifras, tres estados,
   en el orden en que el lector las encuentra:
     $600.000  tinta   · el total, un hecho neutro
     $410.000  azul    · lo que el sistema SÍ puede demostrar
     $190.000  vino    · lo que no puede defender
   Es el argumento entero del artículo en tres colores y sin una palabra. */
/* `.ins-prose strong { color: var(--ink) }` es (0,1,1) y le ganaba a una clase
   suelta: los tres colores hay que declararlos por encima de esa regla. */
.ins-prose strong.mkat-num--traced { color: var(--accent); }


/* Los <strong> de los beats son PRESCRIPCIONES ("Preserve the data first.
   Choose the model second."): lo que hay que hacer es la respuesta, y la
   respuesta va en azul. */
.ins-prose > .mkat-beat strong { color: var(--accent); }

/* El veredicto es la excepción, y va DESPUÉS: con la misma especificidad que
   la regla de arriba, el orden es lo único que decide. */
.ins-prose > .mkat-beat--verdict strong { color: var(--accent-alt); }


/* La secuencia de cierre del bloque de IA. Era tinta con las flechas azules,
   o sea el conector pintado y el contenido no. Es la receta de la pieza: va
   entera en azul. */
.mkat-rail { color: var(--accent); }


/* ==========================================================================
   P6 · TYPESET — la escala tenía cuatro escalones seguidos por debajo de 1.25
   Medido a 1440: 64 / 34 / 30,4 / 25,4 / 21 / 19. Los pasos h2→beat (1,12),
   beat→h3 (1,19), h3→lede (1,21) y lede→cuerpo (1,10) están todos por debajo
   del mínimo de 1,25, y el que de verdad confunde es beat↔h3: los dos en
   tinta, los dos frases cortas, y alternan dentro de la sección 03 y la 10.
   ========================================================================== */

/* 1. EL BEAT SE VA ARRIBA, NO ABAJO. Con h1 64, h2 34, h3 25 y cuerpo 19 no
   queda un solo hueco intermedio que respete 1,25 contra sus dos vecinos: el
   beat, a cualquier tamaño entre 20 y 33, choca con uno de los dos. Así que
   sube por encima del h2 y se resuelve del otro lado: contra el h3 queda a
   1,64 y la confusión desaparece.
   Y es lo correcto, no sólo lo que cierra la cuenta: en una pieza escrita en
   frases sueltas, las siete frases sobre las que gira el argumento son lo más
   importante de la página después del título. Que sean el tipo más grande
   después del H1 es la jerarquía real del documento.
   Contra el h2 quedan 1,22 — por debajo del mínimo, pero el h2 es AZUL, lleva
   su numeral de vino en un renglón propio y arranca con un filete. Nadie los
   confunde: se distinguen por tres señales antes que por el tamaño. */
.ins-prose > .mkat-beat {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);   /* 28 → 41,6px */
  line-height: 1.14;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-block: var(--beat-3);
}


/* 4. EL ÍNDICE DE FIGURA ERA EL TIPO MÁS CHICO DE LA PÁGINA (9,92px) y desde
   que las figuras perdieron su marco es LO ÚNICO que marca dónde empieza una.
   Sube al techo de la banda mono de DESIGN.md en vez de quedarse en el piso. */
.ins-fig--rig .ins-fig__idx   { font-size: 0.72rem; }

.ins-fig--rig .ins-fig__title { font-size: 0.7rem; }


/* 5. El texto de instrumento seguía a 17px contra un cuerpo de 20: se leía
   encogido, no secundario. Un solo paso por debajo del cuerpo. */
.mkat-chain__name,
.mkat-fan__it,
.mkat-fan__q,
.mkat-ledger__k,
.mkat-win__what { font-size: 1.125rem; }