/* ==========================================================================
   TIPOGRAFIA: TODO POPPINS (2026-08-11, por indicacion de Carlos)
   Una sola familia en cinco pesos: 200 extralight, 300 light, 400 normal,
   700 bold, 800 extrabold. No hay 500, no hay 600, y no hay familia mono: lo
   que era chrome en Geist Mono (Fig. NN, rotulos, numerales) ahora es Poppins.
   sention.css todavia declara Geist y Geist Mono; el que manda es tokens.css,
   que declara Poppins y carga despues. Falta limpiar sention.css y el request
   de fuentes de hub-chrome.php, que sigue pidiendo Geist a Google.
   ========================================================================== */

/* ==========================================================================
   INSIGHTS CORE - chrome compartido por todos los articulos y el hub.
   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.
   ========================================================================== */
/* ==========================================================================
   INSIGHTS HUB — content hub design layer.  Scope: .ins-*
   Thesis: "the instrument now holds a document." Mono telemetry frames the
   reading (breadcrumbs, kickers, metadata, section labels, Last reviewed);
   the article body is calm editorial reading (Geist, ~68ch, left, generous
   leading). One live blue accent for links and the "answer". Never the Cryptex.
   Inherits every color/space/type token from sention.css. No raw #000/#fff.
   ========================================================================== */
/* POPPINS EN EL ARTICULO (2026-08-13, lo pidio Carlos).

   La libreria de componentes esta construida en Poppins con pesos 200 a 800.
   `sention.css` declara Geist en `:root`, y `tokens.css` —donde vive Poppins—
   solo lo cargan las plantillas de la home, asi que sin esto las figuras se
   renderizarian en Geist con dos pesos que ni se piden.

   Va scopeado a `.ins-page`, que es el `<main>` del articulo. El header y el
   footer del sitio quedan AFUERA y siguen en Geist como el resto de
   sention.agency: cambiar la tipografia del chrome compartido partiria el
   sitio en dos.

   El request de fuentes tiene que sumar Poppins:200;300;400;700;800 en
   `inc/hub-chrome.php`. Sin eso el navegador sintetiza los pesos y se nota.

   OJO con el `font-family` de abajo: no alcanza con redefinir la variable.
   `body` ya resolvio `font-family: var(--font-sans)` a Geist, y `font-family`
   se hereda como VALOR COMPUTADO, no como la variable. Cambiar el token mas
   abajo solo afecta a las reglas que vuelven a leerlo. Hay que volver a
   declarar la propiedad aca para que el articulo entero cambie de familia. */
.ins-page {
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-sans);
}

.ins-page {
  --ins-measure: 68ch;        /* reading column, 65-75ch per spec §8 */
  --ins-rail: 15.5rem;        /* sticky ToC rail width */
  --ins-gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --ins-tick: 9px;            /* corner-tick length on framed plates */
  --ins-read: clamp(1.05rem, 1.008rem + 0.26vw, 1.1875rem); /* body reading size */

  padding-top: clamp(6.5rem, 4.5rem + 6vw, 9.5rem);
  padding-bottom: var(--section-gap);
  background: var(--bg-base);
  overflow-x: clip;
}

.ins-shell {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.ins-shell--narrow { max-width: 74rem; }


/* --------------------------------------------------------------------------
   Chrome — mono telemetry (breadcrumbs, kickers, metadata, labels)
   -------------------------------------------------------------------------- */
.ins-breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-4);
}

.ins-breadcrumb a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }

.ins-breadcrumb a:hover { color: var(--accent); }

.ins-breadcrumb [aria-current] { color: var(--ink); }

.ins-breadcrumb__sep { color: var(--text-faint); opacity: 0.7; }

.ins-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.ins-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* article metadata line: byline · last reviewed · reading time */
.ins-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ins-meta a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }

.ins-meta a:hover { color: var(--accent); }

.ins-meta__sep { width: 1px; height: 0.85em; background: var(--line-strong); display: inline-block; }

.ins-meta__author { color: var(--ink); }

.ins-meta time { color: var(--text-muted); }


/* --------------------------------------------------------------------------
   Hero variants
   -------------------------------------------------------------------------- */
.ins-hero { position: relative; }

.ins-hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
  max-width: 20ch;
  margin-top: var(--space-3);
  text-wrap: balance;
}

.ins-hero__lede {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-primary);
  max-width: 46ch;
  margin-top: var(--space-3);
}

.ins-hero__rule {
  margin-top: var(--ins-gap);
  border: 0;
  border-top: 1px solid var(--line);
}


/* --------------------------------------------------------------------------
   HUB INDEX HERO — the brand surface. Instrument plate: mono telemetry pinned
   to the margins, massive type, the OPEN cryptex as the specimen (its four
   rings = the hub's four domains). This is where the hub earns its POV.
   -------------------------------------------------------------------------- */
.ins-ih {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  margin-bottom: var(--ins-gap);
  isolation: isolate;
  overflow: hidden;
}

/* L-shaped corner ticks (top-left / bottom-right) */
.ins-ih::before, .ins-ih::after {
  content: ''; position: absolute; width: 12px; height: 12px; border-color: var(--line-strong); border-style: solid; pointer-events: none; z-index: 3;
}

.ins-ih::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }

.ins-ih::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }


/* top telemetry rail */
.ins-ih__rail {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
}

.ins-ih__rail .accent { color: var(--accent); }

.ins-ih__rail-pulse { display: inline-block; width: 0.42em; height: 0.42em; background: var(--accent); margin-right: 0.5em; vertical-align: baseline; }


/* hero body: copy left, specimen right (bleeds) */
.ins-ih__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(0.5rem, 0.2rem + 1.4vw, 1.75rem);
  min-height: clamp(20rem, 14rem + 18vw, 30rem);
}

.ins-ih__copy { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); }

.ins-ih__eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; }

.ins-ih__title {
  font-size: clamp(1.9rem, 0.85rem + 3.05vw, 3.1rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; color: var(--ink);
  max-width: none; overflow-wrap: normal; word-break: normal; hyphens: none;
}

.ins-ih__title-lead { display: block; white-space: nowrap; }

.ins-ih__lede { margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.44; color: var(--text-primary); max-width: 42ch; }

.ins-ih__cta { margin-top: 1.9rem; display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

.ins-ih__cta .arrow { transition: transform var(--dur-fast) var(--ease-out); }

.ins-ih__cta:hover .arrow { transform: translateX(0.3rem); }


/* the specimen: open cryptex, shown WHOLE, centred in its column */
.ins-ih__specimen { position: relative; align-self: stretch; min-height: 16rem; display: flex; align-items: center; justify-content: center; padding: clamp(0.5rem, 0.3rem + 0.5vw, 0.9rem) clamp(0.5rem, 0.2rem + 0.8vw, 1.25rem); }

.ins-ih__specimen img {
  position: relative; z-index: 1;
  width: 100%; max-width: 100%; height: auto; pointer-events: none;
  filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--ink) 16%, transparent));
}

.ins-ih__specimen-cap {
  position: absolute; bottom: 0.75rem; right: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); z-index: 2;
  font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}

/* faint diagonal hatch behind the specimen, brand background resource */
.ins-ih__specimen::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(60deg, var(--diagonal-color) 0 1px, transparent 1px 20px);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 70% 50%, #000 30%, transparent 72%);
}

.ins-ih__specimen img { z-index: 1; }


/* --------------------------------------------------------------------------
   THE FOUR RINGS — the domain map (topics), mirroring the cryptex. An
   instrument readout, not a card grid: index, domain, solution code, promise.
   -------------------------------------------------------------------------- */
.ins-rings { margin-bottom: var(--ins-gap); }

.ins-rings__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: var(--space-4); }

.ins-rings__title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

.ins-rings__list { border-top: 1px solid var(--line); }

.ins-ring {
  position: relative;
  display: grid; grid-template-columns: 2.4rem 12rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 1.5rem;
  padding: 1.35rem 0.5rem 1.35rem 0; border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.ins-ring:hover { padding-left: 0.75rem; background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 3%); }

.ins-ring__num { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--accent); }

.ins-ring__domain { font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

.ins-ring:hover .ins-ring__domain { color: var(--accent-ink); }

.ins-ring__code { display: block; font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.25rem; }

.ins-ring__promise { font-size: 0.95rem; line-height: 1.45; color: var(--text-muted); }

.ins-ring__meta { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }

.ins-ring__link::after { content: ''; position: absolute; inset: 0; }


/* --------------------------------------------------------------------------
   Framed "instrument plate" — shared shell for definition / tl;dr / cta.
   Hairline frame + L-shaped corner ticks (top-left, bottom-right) + mono label.
   Straight corners always.
   -------------------------------------------------------------------------- */
.ins-plate {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ins-plate::before,
.ins-plate::after {
  content: '';
  position: absolute;
  width: var(--ins-tick);
  height: var(--ins-tick);
  border-color: var(--line-strong);
  border-style: solid;
  pointer-events: none;
}

.ins-plate::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }

.ins-plate::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.ins-plate__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}


/* Standalone definition — the AEO centerpiece. Prominent, copyable, distinct. */
.ins-definition { margin-block: var(--ins-gap); }

.ins-definition .ins-plate__label { color: var(--accent); }

.ins-definition__text {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 34ch;
  text-wrap: pretty;
}


/* TL;DR / key takeaways — extractable, near the top. Not cards. */
.ins-tldr { margin-block: var(--ins-gap); }

.ins-tldr__list { counter-reset: tldr; display: grid; gap: 0.9rem; }

/* Numeral inline, "01. Texto", en la misma columna que el resto — nunca en
   una columna propia (ni colgado afuera, ni offset con padding adentro). */
.ins-tldr__item {
  font-size: var(--ins-read);
  line-height: 1.5;
  color: var(--text-primary);
}

/* Vino, no azul (lo pidió Carlos, 2026-08-17). Queda del lado de "tinta del
   aparato" junto con el numeral de sección y el `Fig. NN`: el índice del
   takeaway es aparato de referencia, no un valor vivo. Es chrome compartido,
   así que cambia también en las tres piezas publicadas. */
.ins-tldr__item::before {
  counter-increment: tldr;
  content: counter(tldr, decimal-leading-zero) '. ';
  color: var(--accent-alt);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   Article layout — reading column + sticky ToC rail
   -------------------------------------------------------------------------- */
.ins-article__grid {
  display: grid;
  grid-template-columns: var(--ins-rail) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.ins-article__body { min-width: 0; max-width: var(--ins-measure); }


/* Table of contents — sticky rail on desktop */
.ins-toc {
  position: sticky;
  top: 7rem;
  align-self: start;
}

.ins-toc__label { margin-bottom: 1rem; }

.ins-toc__list { display: grid; gap: 0.6rem; border-left: 1px solid var(--line); }

.ins-toc__link {
  display: block;
  padding-left: 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.ins-toc__link:hover { color: var(--ink); }

.ins-toc__link.is-active { color: var(--accent); border-left-color: var(--accent); }


/* mobile ToC = collapsible details */
.ins-toc-m { display: none; margin-block: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }

.ins-toc-m > summary {
  list-style: none; cursor: pointer;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-alt);
  display: flex; justify-content: space-between; align-items: center;
}

.ins-toc-m > summary::-webkit-details-marker { display: none; }

.ins-toc-m > summary::after { content: '+'; font-size: 1rem; color: var(--accent); }

.ins-toc-m[open] > summary::after { content: '\2013'; }

.ins-toc-m__list { padding: 0 1.1rem 1rem; display: grid; gap: 0.6rem; }

.ins-toc-m__list a { font-size: 0.9rem; color: var(--text-muted); }


/* --------------------------------------------------------------------------
   Prose — the calm reading zone. Geist body, left, generous leading.
   NO mono here. Re-enables list markers (base.css strips them).
   -------------------------------------------------------------------------- */
.ins-prose { color: var(--text-primary); font-size: var(--ins-read); line-height: 1.72; }

.ins-prose > * + * { margin-top: 1.35em; }

.ins-prose > p:first-child { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--ink); }
 /* answer-first lede */
.ins-prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 2.6em;
  scroll-margin-top: 6.5rem;
  text-wrap: balance;
}

.ins-prose h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  font-weight: 700;
  color: var(--ink);
  margin-top: 2em;
  scroll-margin-top: 6.5rem;
}

.ins-prose p { max-width: var(--ins-measure); }

.ins-prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color var(--dur-fast) var(--ease-out); }

.ins-prose a:hover { color: var(--accent-ink); }

.ins-prose strong { color: var(--ink); font-weight: 700; }

.ins-prose ul, .ins-prose ol { max-width: var(--ins-measure); padding-left: 1.4em; display: grid; gap: 0.5em; }

/* Viñeta propia: jamás el guion/em dash por defecto de ningún tema, siempre
   el mismo glifo "◉". String marker (soportado en todos los navegadores
   modernos), así que un <ul> pelado del editor de WordPress ya sale bien. */
.ins-prose ul { list-style: '\25C9\2002'; }

.ins-prose ol { list-style: decimal; }

.ins-prose ol > li::marker { color: var(--text-muted); }

.ins-prose ul > li::marker { color: var(--accent); font-size: 0.8em; }

.ins-prose blockquote {
  max-width: var(--ins-measure);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}


/* Real comparison table (never an image). Mono header, hairline rules. */
.ins-tablewrap { max-width: 100%; overflow-x: auto; margin-block: 2em; border: 1px solid var(--line); border-radius: var(--radius); }

.ins-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 34rem; }

.ins-table caption { text-align: left; padding: 1rem 1.15rem 0; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }

.ins-table th, .ins-table td { text-align: left; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--line); vertical-align: top; }

.ins-table thead th { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-base); }

.ins-table tbody th { font-weight: 700; color: var(--ink); }

.ins-table tbody tr:last-child th, .ins-table tbody tr:last-child td { border-bottom: 0; }


/* --------------------------------------------------------------------------
   FAQ — real <details> in the DOM (server-rendered), text identical to schema.
   -------------------------------------------------------------------------- */
.ins-faq { margin-block: var(--ins-gap); max-width: var(--ins-measure); }

.ins-faq__q { border-top: 1px solid var(--line); }

.ins-faq__q:last-of-type { border-bottom: 1px solid var(--line); }

.ins-faq__q > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.15rem 0;
  font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.35;
}

.ins-faq__q > summary::-webkit-details-marker { display: none; }

.ins-faq__q > summary::after { content: '+'; font-family: var(--font-sans); font-size: 1.15rem; color: var(--accent); flex: none; transition: transform var(--dur-fast) var(--ease-out); }

.ins-faq__q[open] > summary::after { content: '\2013'; }

.ins-faq__a { padding: 0 0 1.3rem; color: var(--text-primary); line-height: 1.5; max-width: 62ch; }


/* --------------------------------------------------------------------------
   Conversion component — resolved magnet (primary), newsletter (secondary),
   book-a-meeting (BOFU only). One deliberate instrument panel, not a card grid.
   -------------------------------------------------------------------------- */
.ins-cta { margin-block: var(--ins-gap); }

.ins-cta__magnet { background: var(--bg-raised); }

.ins-cta__magnet .ins-plate__label { color: var(--accent); }

.ins-cta__title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.75rem; max-width: 22ch; }

.ins-cta__summary { color: var(--text-primary); line-height: 1.55; max-width: 52ch; margin-bottom: 1.5rem; }

.ins-cta__form {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: grid;
  gap: 0.85rem;
  background: color-mix(in srgb, var(--bg-base) 60%, transparent);
}

.ins-cta__form-note { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }

.ins-cta__field { height: 2.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); display: flex; align-items: center; padding-inline: 0.9rem; color: var(--text-faint); font-size: 0.9rem; }

.ins-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  height: 2.9rem; padding-inline: 1.4rem;
  background: var(--ink); color: var(--text-inverse);
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.ins-cta__btn:hover { background: var(--accent); }


/* secondary row: newsletter + (BOFU) book a meeting */
.ins-cta__secondary { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.9rem 2rem; align-items: center; }

.ins-cta__news { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--text-muted); }

.ins-cta__news-field { height: 2.5rem; min-width: 15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); display: flex; align-items: center; padding-inline: 0.85rem; color: var(--text-faint); font-size: 0.85rem; }

.ins-link-arrow { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.45rem; }

.ins-link-arrow .arrow { transition: transform var(--dur-fast) var(--ease-out); }

.ins-link-arrow:hover .arrow { transform: translateX(0.25rem); }

.ins-cta__book { }

.ins-cta__book-note { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-top: 0.35rem; }


/* --------------------------------------------------------------------------
   Author box (inline) + full author page
   -------------------------------------------------------------------------- */
.ins-author { margin-block: var(--ins-gap); border-top: 1px solid var(--line); padding-top: var(--ins-gap); }

.ins-author__row { display: grid; grid-template-columns: 5.5rem minmax(0,1fr); gap: 1.4rem; align-items: start; }

.ins-author__photo { width: 5.5rem; height: 5.5rem; border: 1px solid var(--line); border-radius: var(--radius); object-fit: cover; background: var(--bg-raised); }

.ins-author__photo--empty { display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 1.4rem; color: var(--text-faint); }

.ins-author__name { font-size: 1.2rem; font-weight: 700; color: var(--ink); }

.ins-author__role { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.25rem; }

.ins-author__bio { margin-top: 0.75rem; color: var(--text-primary); line-height: 1.5; max-width: 56ch; }

.ins-author__link { margin-top: 0.75rem; }


/* author page header */
.ins-authorhero__grid { display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: start; }

.ins-authorhero__photo { width: 10rem; height: 12rem; border: 1px solid var(--line); border-radius: var(--radius); object-fit: cover; background: var(--bg-raised); }

.ins-authorhero__photo--empty { display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 2.4rem; color: var(--text-faint); }

.ins-authorhero__name { font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: var(--tracking-heading); color: var(--ink); }

.ins-authorhero__role { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 0.75rem; }

.ins-authorhero__bio { margin-top: 1.25rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-primary); max-width: 52ch; }

.ins-expertise { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ins-expertise__tag { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.35rem 0.7rem; }


/* --------------------------------------------------------------------------
   Article cards + grids (index / topic / related / author list). Cards ARE
   the right affordance for a list of articles. Straight corners, hairline,
   transform-only hover.
   -------------------------------------------------------------------------- */
.ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }

.ins-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.85rem;
  background: var(--bg-raised);
  padding: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.ins-card:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 3%); }

.ins-card__topic { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

.ins-card__title { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }

.ins-card:hover .ins-card__title { color: var(--accent-ink); }

.ins-card__def { font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); flex: 1; }

.ins-card__meta { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); display: flex; gap: 0.6rem; align-items: center; margin-top: auto; }

.ins-card__link::after { content: ''; position: absolute; inset: 0; }
 /* whole card clickable */

/* featured pillar card — larger, its own emphasis */
.ins-feature {
  position: relative;
  display: grid; gap: 1.1rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  transition: transform var(--dur-fast) var(--ease-out);
}

.ins-feature:hover { transform: translateY(-2px); }

/* split cornerstone: title left, definition + cta right (fills the width) */
.ins-feature--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 0.8rem + 3vw, 4rem); align-items: center; }

.ins-feature__head { display: grid; gap: 1rem; align-content: start; }

.ins-feature__body { display: grid; gap: 1.4rem; align-content: center; }

.ins-feature__tag { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

.ins-feature__title { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; }

.ins-feature__def { font-size: var(--fs-lead); line-height: 1.4; color: var(--text-primary); max-width: 44ch; }

.ins-feature__link::after { content: ''; position: absolute; inset: 0; }

.ins-feature__cta { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.45rem; }

.ins-feature__cta .arrow { transition: transform var(--dur-fast) var(--ease-out); }

.ins-feature:hover .ins-feature__cta .arrow { transform: translateX(0.25rem); }


/* --------------------------------------------------------------------------
   Hub index — topic blocks + recently reviewed + topic filter
   -------------------------------------------------------------------------- */
.ins-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }

.ins-filter a { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }

.ins-filter a:hover, .ins-filter a.is-active { color: var(--accent); }

.ins-topicblock { padding-block: var(--ins-gap); border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }

.ins-topicblock__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-4); }

.ins-topicblock__name { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

.ins-topicblock__count { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

.ins-topicblock__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); align-items: start; }

.ins-topicblock__clusters { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); align-content: start; }

.ins-recently { padding-block: var(--ins-gap); }

.ins-recently__list { display: grid; gap: 0; border-top: 1px solid var(--line); }

.ins-recent {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem 1.5rem; align-items: baseline;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-fast) var(--ease-out);
}

.ins-recent:hover { padding-left: 0.6rem; }

.ins-recent__title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }

.ins-recent:hover .ins-recent__title { color: var(--accent-ink); }

.ins-recent__sub { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.2rem; }

.ins-recent__date { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }

.ins-recent__link::after { content: ''; position: absolute; inset: 0; }


/* --------------------------------------------------------------------------
   Related / interlinking + section headings
   -------------------------------------------------------------------------- */
.ins-section { margin-block: var(--ins-gap); }

.ins-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-3); }

.ins-section__title { font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

.ins-backlink { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }

.ins-backlink:hover { color: var(--accent); }

.ins-backlink .arrow { transition: transform var(--dur-fast) var(--ease-out); }

.ins-backlink:hover .arrow { transform: translateX(-0.25rem); }

.ins-solution-link {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.ins-solution-link:hover { border-color: var(--accent); }

.ins-solution-link__code { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }

.ins-solution-link__text { color: var(--text-primary); font-size: 0.95rem; }

.ins-solution-link__text strong { color: var(--ink); font-weight: 700; }


/* Texto solo para lector de pantalla. Vivia en el CSS de marketing-attribution,
   asi que CHAIN y CRITERIA, que segun component-catalog.md lo llevan
   obligatorio, se quedaban sin el en cualquier otra pieza: el hallazgo en
   palabras desaparecia y con el la cita para AEO. Sube al core (2026-08-11). */
.ins-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Toda cifra de un instrumento alinea en columna. Sin esto los numeros bailan
   al cambiar de valor y las tablas dejan de leerse como tabla. Obligatorio por
   el brief (TAREA 3); el mockup v7 no lo traia en ninguna cifra. */
.ins-num,
.ins-fall__v, .ins-bullet__v, .ins-funnel__bar b, .ins-delta__v, .ins-split__item strong,
.ins-score__cell b, .ins-units-v7__value, .ins-range__vals strong, .ins-calc__v,
.mkat-ledger__v, .ins-layers__n, .ins-seq__n, .ins-cohort > span, .ins-heat > span,
.ins-table-v7__icon {
  font-variant-numeric: tabular-nums;
}

/* .ins-dummy borrada el 2026-08-10. Era el flag de contenido de prueba, decia
   "removed before production" y seguia en la hoja. Cero usos en las tres
   piezas publicadas ni en el hub. Sigue usada en seis previews locales sin
   publicar, que ahora muestran su texto sin la chapa de vino. */


/* --------------------------------------------------------------------------
   Reveal (matches reveal.js): fade+rise, gated by prefers-reduced-motion
   -------------------------------------------------------------------------- */
.ins-page .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }

.ins-page .reveal.is-in { opacity: 1; transform: none; }

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

.ins-page .reveal { opacity: 1; transform: none; }

}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

.ins-article__grid { grid-template-columns: 1fr; }

.ins-toc { display: none; }

.ins-toc-m { display: block; }

.ins-topicblock__layout { grid-template-columns: 1fr; }

  /* index hero stacks: copy over specimen */
.ins-ih__body { grid-template-columns: 1fr; min-height: 0; }

.ins-ih__specimen { min-height: 15rem; order: 2; }

.ins-ih__specimen img { position: static; transform: none; width: 88%; margin: 0 auto; }

.ins-ih__specimen-cap { right: auto; left: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); }

  /* four rings: drop the promise column into its own line */
.ins-ring { grid-template-columns: 2.2rem 1fr auto; grid-template-areas: 'num domain meta' '. promise promise'; row-gap: 0.5rem; }

.ins-ring__num { grid-area: num; }

.ins-ring__domain-wrap { grid-area: domain; }

.ins-ring__promise { grid-area: promise; }

.ins-ring__meta { grid-area: meta; }

}

@media (max-width: 760px) {

.ins-grid { grid-template-columns: 1fr; }

.ins-authorhero__grid { grid-template-columns: 1fr; }

.ins-authorhero__photo { width: 8rem; height: 9.6rem; }

.ins-author__row { grid-template-columns: 1fr; }

.ins-recent { grid-template-columns: 1fr; }

.ins-recent__date { order: -1; }

.ins-ring { grid-template-columns: 1.8rem 1fr; grid-template-areas: 'num domain' '. meta' '. promise'; }

.ins-ring__meta { justify-self: start; }

.ins-feature--split { grid-template-columns: 1fr; gap: 1.5rem; }

}


/* ==========================================================================
   ARTICLE READING SYSTEM v2 — "the instrument annotates the document"

   ARCHITECTURE RULE: every rule that has to survive an article written in the
   WordPress editor hangs off the CONTAINER (.ins-prose ...), never off a class
   on the element. WordPress emits classless HTML and we do not control the
   editor, so `.ins-table` would silently fail on the next ten pieces.
   The PHP enhancer still runs — but it only adds what CSS structurally cannot
   do (scroll wrapper, thead promotion, per-cell data-label, model chips).
   If the enhancer ever fails, the article is still fully styled.

   .ins-prose is set by single-insight.php on the <article> element. It is
   server-controlled, never editor-controlled. That is the container.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A0. Column model — prose narrow, instruments wide
   -------------------------------------------------------------------------- */
.ins-article__body { max-width: 46rem; }

.ins-prose > p,
.ins-prose > ul,
.ins-prose > ol,
.ins-prose > h3,
.ins-prose > blockquote { max-width: var(--ins-measure); }

.ins-prose > h2 { max-width: 26ch; }


/* --------------------------------------------------------------------------
   A1. Reading progress — 2px hairline. JS sets --ins-read-pct; with no JS the
   bar simply never leaves 0 and nothing shifts. No layout cost, no request.
   -------------------------------------------------------------------------- */
.ins-progress {
  position: fixed; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
  background: transparent;
  contain: strict;
}

.ins-progress__bar {
  height: 100%;
  width: var(--ins-read-pct, 0%);
  background: var(--accent);
}

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

.ins-progress__bar { transition: width 0.1s linear; }

}


/* --------------------------------------------------------------------------
   A2. Prose rhythm — superseded by the simplified rhythm in "6. MEDIDAS Y
   RITMO" further down (one value for text-to-text, one for after a
   heading). Left as a marker comment so the section numbering below still
   reads "A2" in context.
   -------------------------------------------------------------------------- */

/* Question run — grouped by the enhancer. Reads as an interrogation panel
   instead of five orphan paragraphs. Container-scoped: any div the enhancer
   marks inside the prose gets it. */
/* A run of short questions. Bound by two rules, not by a side stripe: the
   accent bar was a banned decoration, and the type can carry this on its own. */
.ins-prose [data-run='q'] {
  max-width: var(--ins-measure);
  margin-block: 1.6em;
  padding-block: var(--space-2);
  border-block: 1px solid var(--line);
  display: grid;
  gap: 0.5em;
}

.ins-prose [data-run='q'] p {
  margin: 0;
  max-width: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.06em;
  line-height: 1.35;
  text-wrap: balance;
}


/* Procedure — ordered lists in this hub are protocols (run this test, enforce
   these rules). Pure container CSS: works on a bare <ol> from the editor.
   SIN HAIRLINES por pedido explícito. El numeral va INLINE, "01. Texto",
   en la misma columna que el resto del cuerpo — antes era una columna propia
   (grid de 2.6rem + texto) que lo separaba visualmente de la prosa y además
   quedaba desalineado en altura contra la primera línea. */
.ins-prose ol {
  list-style: none;
  padding-left: 0;
  counter-reset: ins-step;
  display: grid;
  gap: 0.5em;
}

.ins-prose ol > li { counter-increment: ins-step; }

.ins-prose ol > li::before {
  content: counter(ins-step, decimal-leading-zero) '. ';
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ins-prose ol > li::marker { content: none; }

.ins-prose ul { gap: 0.42em; }


/* --------------------------------------------------------------------------
   A3. Tables — styled from the container, so a bare <table> pasted by the
   editor is already correct. Works with or without <thead>: the first row is
   treated as the header either way.
   -------------------------------------------------------------------------- */
.ins-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-block: 2.4em;
}

.ins-prose table caption {
  text-align: left;
  padding: 1rem 1.15rem 0;
  font-family: var(--font-sans); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}

/* Sin hairline por fila (playbook §1.4). Cuatro filas con seis reglas en 300px
   se leen como formulario, no como ledger. La tabla queda con sus TRES
   fronteras reales -- la que abre, la del encabezado y la que cierra -- y las
   filas se separan por aire. */
.ins-prose table th,
.ins-prose table td {
  text-align: left;
  padding: 1.05rem 1.15rem;
  vertical-align: top;
}

/* header row: inside a thead, or the first row when the editor emitted none */
.ins-prose table thead th,
.ins-prose table tr:first-child th {
  font-family: var(--font-sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-base);
  border-bottom: 1px solid var(--line);
}

.ins-prose table tbody th { font-weight: 700; color: var(--ink); }

.ins-prose table tr:last-child th,
.ins-prose table tr:last-child td { border-bottom: 0; }

.ins-prose table tbody tr { transition: background var(--dur-fast) var(--ease-out); }

.ins-prose table tbody tr:hover { background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 4%); }

.ins-prose table td:first-child { color: var(--ink); font-weight: 700; }


/* Enhancer-added scroll wrapper. Without it the table still renders; it just
   cannot scroll on a narrow viewport, which the card mode below handles. */
.ins-prose [data-tablewrap] { max-width: 100%; overflow-x: auto; margin-block: 2.4em; }

.ins-prose [data-tablewrap] > table { margin-block: 0; min-width: 30rem; }


/* Below 640px a comparison becomes cards so a phone never scrolls sideways.
   data-label comes from the enhancer; without it the cell still reads fine,
   it just loses its column name. */
@media (max-width: 640px) {

.ins-prose [data-tablewrap] { overflow: visible; }

.ins-prose [data-tablewrap] > table { min-width: 0; }

.ins-prose table { display: block; border: 0; background: transparent; }

.ins-prose table caption { padding-inline: 0; }

.ins-prose table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ins-prose table tbody { display: grid; gap: 0.75rem; }

.ins-prose table tbody tr {
    display: grid; gap: 0.55rem;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
  }

.ins-prose table tbody th,
  .ins-prose table tbody td { display: block; padding: 0; border: 0; }

.ins-prose table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-sans); font-size: 0.7rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 0.3rem;
  }

}


/* --------------------------------------------------------------------------
   B. FIGURE KIT — chrome for per-article instruments (authored, not editor
   output, so these may carry classes).
   -------------------------------------------------------------------------- */
.ins-fig { margin-block: 2.8em; max-width: none; }

.ins-fig > * { max-width: none; }

/* SIN FILETE BAJO EL PIE DE FIGURA. Cada panel abre con su propia regla
   fuerte 12px más abajo, así que este borde era un duplicado exacto: dos
   líneas paralelas separadas por el alto de una etiqueta mono. Multiplicado
   por 7 figuras eran 7 filetes que no separaban nada. El aire hace el
   trabajo. (Corregido 2026-08-04, ver §1.4 del playbook.) */
.ins-fig__cap {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.ins-fig__idx {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); flex: none;
}

/* EL TITULO DE FIGURA NO ES CHROME (cambiado 2026-08-12, lo pidio Carlos).
   Venia en 0.66rem, en mayusculas, gris y sin bold: exactamente el tratamiento
   de una nota al pie. Pero este texto es el que AFIRMA EL HALLAZGO ("The
   information never made the full journey"), o sea el texto mas importante de
   la figura, y estaba renderizado como el mas debil.

   Ahora es un titular: mas grande, en tinta y en bold. Se le saca la caja alta
   y el interletrado, que a este tamanio gritan y alargan la linea sin sumar
   nada. El `Fig. NN` SI sigue siendo chrome y se queda como estaba, en vino y
   chico: la jerarquia queda explicita, indice chico y afirmacion grande.

   Alcance: es chrome compartido, asi que cambia en las tres piezas publicadas
   y en toda la libreria.

   Corregido otra vez 2026-08-17 (/impeccable typeset). El cambio de arriba
   subio el peso y el color, pero dejo el cuerpo en 18,9px CONTRA UN CUERPO DE
   TEXTO DE 21px: la afirmacion mas importante de la figura seguia siendo mas
   chica que la prosa que interrumpe, o sea que "indice chico, afirmacion
   grande" no se estaba cumpliendo. Ahora entra entre el cuerpo y el h3
   (21 < 23 < 26,2) y la jerarquia queda en el orden correcto. */
.ins-fig__title {
  font-family: var(--font-sans);
  font-size: clamp(1.18rem, 1.06rem + 0.42vw, 1.44rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.3;
  text-wrap: pretty;
}

.ins-fig__note {
  margin-top: 0.85rem; font-size: 0.82rem; line-height: 1.55;
  color: var(--text-muted); max-width: var(--ins-measure);
}

/* neutral by default; each figure declares its own shape in the layout pass */
.ins-fig__panel { background: none; border: 0; }


/* A plain product screenshot (third-party UI, not one of our own instrument
   figures) — humbler than .ins-fig--plate on purpose: a hairline frame and
   the system's own radius, no caption/index unless the editor adds one via
   .ins-fig__cap inside the same <figure>. Sits in the wider "plate" column
   like every other figure/table, not the narrower reading measure. */
.ins-shot { margin-block: 2.8em; max-width: var(--ins-plate); }

.ins-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}


/* the matched row of the real table, and the rest dimmed while filtering */
.ins-prose table tbody tr[data-sel-match] {
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 8%);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ins-prose table tbody tr[data-sel-match] td:first-child { color: var(--accent-ink); }

.ins-prose [data-tablewrap][data-sel-on] tbody tr { transition: opacity var(--dur-fast) var(--ease-out); }

.ins-prose [data-tablewrap][data-sel-on] tbody tr:not([data-sel-match]) { opacity: 0.72; }


/* --------------------------------------------------------------------------
   C. Closing CTA — the calculator the article already sends the reader to.
   -------------------------------------------------------------------------- */
.ins-endcta {
  margin-block: var(--ins-gap);
  display: grid; gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
}

.ins-endcta__label {
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}

.ins-endcta__title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 0; text-wrap: balance;
}

.ins-endcta__body { margin: 0; color: var(--text-primary); line-height: 1.5; max-width: 56ch; }

.ins-endcta__actions { margin-top: 0.35rem; }


/* --------------------------------------------------------------------------
   Specificity guard — `.ins-prose > * + *` (0,1,1) outranks single-class
   component margins (0,1,0), so instruments restate theirs as prose children.
   -------------------------------------------------------------------------- */
/* 3.8em = 80px (corregido 2026-08-17, /impeccable layout). En 2.8em la figura
   se separaba 59px y el h3 64px: dos acontecimientos estructurales distintos
   con 5px de diferencia se leen como el MISMO latido, y la pieza perdia el
   escalon. La escalera ahora es 32 (parrafo) / 64 (subseccion) / 80 (figura) /
   104 (seccion), cada paso claramente distinto del anterior. La figura pide
   mas aire que un titulo porque es un OBJETO metido en la lectura, no un
   renglon. */
.ins-prose > .ins-fig { margin-block: 3.8em; }

.ins-prose > .ins-shot { margin-block: 2.8em; }

.ins-prose > [data-tablewrap] { margin-block: 2.4em; }

.ins-prose > [data-run='q'] { margin-block: 1.6em; }

.ins-prose > .ins-faq--inline { margin-block: 1.6em 0; max-width: var(--ins-measure); }

.ins-prose > .ins-faq--inline .ins-faq__q > summary { font-size: 1.02rem; }


/* --------------------------------------------------------------------------
   Archive card, media variant — evaluation only. Opt in with .ins-grid--media
   on the grid. Kept behind a modifier so the default index stays typographic.
   -------------------------------------------------------------------------- */
.ins-grid--media .ins-card { padding-top: 0; }

.ins-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  margin: 0 0 1rem;
  background: var(--bg-base);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.ins-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* placeholder used while judging the layout: a tinted plate with the ring code */
.ins-card__media[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-sans); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  background: repeating-linear-gradient(
    var(--diagonal-angle),
    color-mix(in srgb, var(--ink) 4%, transparent) 0 1px,
    transparent 1px 7px
  );
}


/* ==========================================================================
   ACCESSIBILITY PASS — audited against WCAG AA. Every value here comes from a
   measured failure, not a guess:
     - contrast: --text-faint is 2.8:1 on white. It never carries text now.
     - touch:    option chips measured 30.5px and mobile ToC links 20.2px.
     - motion:   the v2 transitions were not gated by prefers-reduced-motion.
   ========================================================================== */

/* --- Touch targets: 44px minimum, but only where a finger is the input.
       A coarse pointer gets the full target; a mouse keeps the tight chip. --- */
@media (pointer: coarse) {

.ins-toc-m__list a {
    min-height: 44px;
    display: flex; align-items: center;
  }

.ins-toc-m > summary { min-height: 44px; }

.ins-faq__q > summary { min-height: 44px; }

}

/* the mobile ToC is a list of jump links: give them room even with a mouse */
.ins-toc-m__list { gap: 0.15rem; }

.ins-toc-m__list a { padding-block: 0.5rem; line-height: 1.35; }


/* --- Focus: every interactive element in the article needs a visible ring.
       Scoped to :focus-visible so mouse users never see it. --- */
.ins-page :is(
  .ins-toc__link,
  .ins-toc-m__list a,
  .ins-toc-m > summary,
  .ins-faq__q > summary,
  .ins-breadcrumb a,
  .ins-link-arrow,
  .ins-endcta a
):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* summary elements default to list-style:none here, so the ring is the only cue */
.ins-faq__q > summary:focus-visible,
.ins-toc-m > summary:focus-visible { outline-offset: -2px; }


/* --- Motion: gate every transition the v2 layer introduced. --- */
@media (prefers-reduced-motion: reduce) {

.ins-card:hover { transform: none; }

}


/* --- The matched row must not rely on colour alone. A left bar (position) and
       a mono marker (text) carry the same signal for anyone who cannot see it. --- */
.ins-prose table tbody tr[data-sel-match] td:first-child::after {
  content: 'MATCH';
  display: inline-block;
  margin-left: 0.6rem;
  vertical-align: 0.12em;
  font-family: var(--font-sans);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
}

@media (max-width: 640px) {

  /* in card mode the first cell already reads as the heading */
.ins-prose table tbody tr[data-sel-match] { box-shadow: inset 3px 0 0 var(--accent); }

}



/* ==========================================================================
   DOCUMENTO CONTROLADO — pase de composición v3.
   Reemplaza los pases LAYOUT y TYPESET/COLORIZE anteriores (que dejaban la
   Definition flotando a 321px del riel, la byline a 0px del H1, cinco anchos
   distintos conviviendo y el vino apagado a --text-muted).

   TESIS: el artículo no es un post, es un documento controlado. Todo lo que
   afirma tiene un número, un lugar y un margen de anotación. Cada borde cae
   sobre una de DOS verticales y cada intervalo sale de una escala de cuatro.

   DOCTRINA DE COLOR (regla del proyecto, no relitigar por artículo):
     AZUL  = estado vivo y LA RESPUESTA. Links, fila matcheada + MATCH, las
             celdas --new (las letras que MEDDPICC agrega), aguja del índice,
             progreso. Mide AL LECTOR.
     VINO  = el tramo que este documento NO PUEDE CERTIFICAR. Una sola forma,
             el corchete de acotación, siempre en el mismo canal, siempre
             midiendo una distancia. Nunca fondo, nunca chip, nunca relleno.

   REGLA MONO (idem): el mono como CHROME vive en la banda de DESIGN.md
   (0.62-0.78rem, 0.1-0.22em). El mono como DATO lo dimensiona el dato, y sólo
   hay DOS excepciones legítimas: .ins-spec__cell b (el espécimen) y
   .ins-filterfig__v (las cifras del ledger).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAS TRES CANTIDADES REALES Y LOS CUATRO INTERVALOS
   El shell deja de ser un número inventado (68rem) y se deriva del riel, el
   canal y la placa. Si mañana cambia una de las tres, el shell la sigue solo.
   -------------------------------------------------------------------------- */
.ins-page {
  --ins-rail:    15rem;    /* 240px · margen de anotación                     */
  --ins-gutter:  4.5rem;   /* 72px  · canal de numeración + divisor           */
  --ins-plate:   44rem;    /* 704px · figuras, tablas, placas, instrumentos   */
  /* Un solo ancho de columna, no dos: párrafos, listas, FAQ y bio de autor
     dejaban de llegar al mismo borde derecho que títulos, figuras y tablas
     — 576px contra 704px, un hueco de 128px a la derecha del texto que se
     leía como un error, no como una medida de lectura deliberada. */
  --ins-measure: var(--ins-plate);
  --ins-read:    clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem);   /* 17 → 19px   */
  --ins-anchor:  7rem;     /* 112px · UNA constante de despeje bajo el header */

  /* Cuatro intervalos, todos múltiplos de 8. El pase anterior inventaba
     1.15 / 1.25 / 0.85 / 0.9 / 0.7rem y dejaba dos párrafos sin relación más
     cerca (21.85px) que un h3 de su propio texto (19px). */
  --beat-1: 1.5rem;        /* 24px  · cláusula a cláusula, encabezado a bloque */
  --beat-2: 2.5rem;        /* 40px  · frontera de grupo argumental             */
  --beat-3: 4rem;          /* 64px  · entrada y salida de instrumento, h3      */
  --beat-4: 6.5rem;        /* 104px · sección                                  */

  --ins-gap:    var(--beat-3);      /* el token vertical viejo, unificado     */
  --ins-colgap: var(--ins-gutter);  /* un solo gap para los dos ejes          */
}


/* --------------------------------------------------------------------------
   2. LA MASTHEAD — el riel existe desde el primer píxel
   El hueco muerto de 321px no se "rellena": desaparece porque esa banda pasa
   a ser riel (ruta + bloque de control + índice) y canal (divisor + acotación).
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

.ins-page .ins-shell--narrow {
    max-width: calc(var(--ins-rail) + var(--ins-gutter) + var(--ins-plate)
                    + var(--container-pad) * 2);
    display: grid;
    grid-template-columns: var(--ins-rail) minmax(0, 1fr);
    column-gap: var(--ins-gutter);
    row-gap: 0;
    align-items: start;
    grid-template-areas:
      "path  path"
      "head  head"
      "back  back"
      "spec  defn"
      "doc   doc";
    /* SIN divisor ni ::before acá: el masthead (H1 incluido) ocupa el ancho
       COMPLETO de las dos pistas ("head head"), así que una línea vertical
       dibujada a la altura del shell le cruzaba el título por el medio. El
       divisor pertenece al tramo que sí tiene dos columnas de verdad: ver
       .ins-article__grid, más abajo. */
  }

.ins-breadcrumb    { grid-area: path;  margin: 0; }

.ins-hero--article { grid-area: head; }

.ins-backlink      { grid-area: back;  margin-top: var(--beat-1); }

.ins-meta          { grid-area: spec;  margin-top: var(--beat-3); }

.ins-definition    { grid-area: defn;  margin: var(--beat-3) 0 0; }

.ins-article__grid { grid-area: doc; }

.ins-toc-m         { display: none; }


  /* EL FILETE DE ARRANQUE. Antes lo interrumpía el canal (breadcrumb 240px +
     kicker 704px, separados); sacado el kicker por redundante con el
     breadcrumb (mismo dato, sin valor SEO/AEO adicional — el link real con
     anchor text ya vive en el breadcrumb), la ruta pasa a abrir con una
     única línea de ancho completo. */
.ins-breadcrumb {
    border-top: 1px solid var(--ink);
    padding-top: 0.85rem;
    margin-bottom: 0;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    color: var(--text-faint);
    line-height: 1.7;
    gap: 0.4em;
  }

  /* En 240px la ruta envuelve, y el separador quedaba abriendo el segundo
     renglón ("› BANT VS. MEDDIC..."). Pasa a ser un ::after del enlace: al
     ser parte de su caja en línea ya no puede empezar un renglón. */
.ins-breadcrumb__sep { display: none; }

.ins-breadcrumb a::after {
    content: '\203A';
    margin-left: 0.45em;
    color: var(--text-faint);
  }


  /* LA BYLINE SE RESUELVE MUDÁNDOLA, NO EMPUJÁNDOLA. Deja de ser una tira
     apretada bajo el H1 (0px de separación medidos) y pasa a ser el bloque de
     control del documento, en el riel, a la altura de la Definition. Cero
     copy nuevo: el texto ya trae sus propias etiquetas. */
  /* Sin hairlines: por pedido explícito, el bloque de control queda como
     texto apilado — la separación la da el espaciado entre líneas, no una
     regla. */
.ins-meta {
    display: grid;
    gap: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
  }

.ins-meta__sep    { display: none; }

.ins-meta__author { color: var(--ink); }

}


/* --------------------------------------------------------------------------
   3. TÍTULO Y DEFINITION
   -------------------------------------------------------------------------- */

/* El H1 conserva el registro display de la marca (DESIGN.md: massive
   grotesque, lh 0.98-1.02, tracking -0.035em) y para eso spanea las dos
   pistas. Su borde IZQUIERDO cruza al riel, que es una relación declarada,
   no un tercer borde; el derecho sigue cayendo en la vertical de la placa.
   AZUL por pedido explícito de Carlos: todos los H1 del hub van en azul. */
.ins-hero__title {
  font-size: clamp(2.25rem, 1.25rem + 3.1vw, 4rem);   /* 36 → 64px */
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--accent);
  max-width: none;
  margin: var(--beat-1) 0 0;
  text-wrap: balance;
}

/* "vs." se queda en vino: es la comparación, no la respuesta — el único
   contraste dentro de un título que por lo demás es todo azul. */
.ins-hero__title-vs     { color: var(--accent-alt); }

.ins-hero__title-accent { color: var(--accent); }

/* Tramo del H1 en vino (pedido de Carlos, 2026-08-17). Hasta acá el vino
   dentro de un título era una sola palabra de contraste (`vs.`); esto lo
   convierte en un recurso de composición: los extremos en vino y el centro en
   azul. En producción el marcado NO viaja en el título del post, viaja en el
   meta `title_html`, que `single-insight.php` imprime con `wp_kses_post`. */
.ins-hero__mark { color: var(--accent-alt); }


/* La Definition ocupa la placa entera. Muere el max-width:34ch que dejaba
   498px de tinta dentro de 670px de caja: el hueco de la derecha era el mismo
   defecto que el de la izquierda, en espejo. Sigue siendo la única placa
   blanca con esquinas en L del arranque; su rima está 19.000px abajo. */
.ins-definition {
  position: relative;
  max-width: var(--ins-plate);
  margin-left: 0;
}

.ins-definition__text {
  max-width: none;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.42;
  font-weight: 700;
  color: var(--ink);
  text-wrap: pretty;
}

/* El sello. En un documento controlado el sello rojo marca el ítem no
   conforme, y acá ese ítem es literalmente "pipeline fiction". */
.ins-definition .ins-plate__label {
  color: var(--accent-alt);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}


/* EL CORCHETE DE ACOTACIÓN — primera de las cuatro marcas de vino.
   Acota, en el canal, exactamente el bloque que define la brecha. Es una
   convención de plano técnico: geometría pura, así que no necesita una sola
   palabra nueva y respeta el copy congelado y el esc_html() del template. */
@media (min-width: 1200px) {

.ins-definition .ins-plate__label::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% + var(--ins-gutter) / 3);
    width: 12px;
    border: 1.5px solid var(--accent-alt);
    border-right: 0;
    transform: scaleY(0);
    transform-origin: 50% 0;
    animation: ins-brk var(--dur-slow) var(--ease-out) 0.35s both;
  }

}

@keyframes ins-brk { to { transform: scaleY(1); } }

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

.ins-definition .ins-plate__label::before { animation: none; transform: none; }

}


/* El filete que cierra la masthead: declara el ancho del documento y le da
   marco al titular. Es la única regla horizontal del arranque además del
   filete partido de apertura; la escasez es lo que las hace significar. */
.ins-article__grid {
  position: relative;
  border-top: 1px solid var(--line-strong);
  margin-top: var(--beat-3);
  padding-top: var(--beat-3);
  grid-template-columns: var(--ins-rail) minmax(0, 1fr);
  gap: var(--ins-gutter);
}


/* EL DIVISOR arranca EN el filete de arriba, no en el tope de la página: acá,
   y sólo acá, hay de verdad dos columnas (riel de anotación / cuerpo). Se
   dibuja como background porque el riel es una pista del grid y una pista no
   tiene borde propio.
   ACOPLE DELIBERADO: esta x y la del ::before de progreso salen de la misma
   variable. Si el día de mañana .ins-article__grid suma padding-left, hay que
   sumarlo también acá o la línea se desincroniza sin que nada falle en el
   código. */
@media (min-width: 1025px) {

.ins-article__grid {
    background-image: linear-gradient(var(--line), var(--line));
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: var(--ins-rail) 0;
  }

  /* La segunda señal viva del riel: cuánto llevo leído, sobre el mismo
     filete. scaleY de un elemento de 1px: cero layout, GPU, y consume el
     mismo número que la barra superior (insights.js publica
     --ins-read-ratio en :root). */
.ins-article__grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--ins-rail);
    width: 1px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(var(--ins-read-ratio, 0));
    transform-origin: 50% 0;
    pointer-events: none;
  }

}


/* --------------------------------------------------------------------------
   4. EL APARATO — índice numerado, aguja y canal de numeración
   El índice del riel y los numerales de sección referencian los mismos
   números. Eso es el aparato: una referencia cruzada, no una decoración.
   CANDADO: los dos contadores son independientes y hoy coinciden porque
   sention_ihub_toc_process arma el ToC a partir de los h2. Ningún h2 puede
   quedar fuera del ToC o el aparato miente (ver CLAUDE.md).
   -------------------------------------------------------------------------- */
.ins-toc {
  position: sticky;
  top: var(--ins-anchor);
  align-self: start;
}

.ins-toc__label {
  margin-bottom: var(--beat-1);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--accent-alt);
}

.ins-toc__list {
  counter-reset: ins-toc;
  display: grid;
  gap: 0;
  border-left: 0;
}

.ins-toc__link {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.55rem;
  counter-increment: ins-toc;
  padding: 0.55rem 1.25rem 0.55rem 0;
  margin-left: 0;
  margin-right: -1px;                 /* la aguja pisa el divisor */
  border-left: 0;
  border-right: 2px solid transparent;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.ins-toc__link::before {
  content: counter(ins-toc, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.ins-toc__link:hover             { color: var(--ink); }

.ins-toc__link.is-active         { color: var(--accent); font-weight: 700; border-right-color: var(--accent); }

.ins-toc__link.is-active::before { color: var(--accent); }


/* La salida para el lector que abandona a mitad. Hoy el primer destino de
   Sention aparece al 80,6% del scroll. Reusa el label y la URL del CTA de
   cierre: cero copy nuevo, mismos UTM. */
.ins-railcta {
  display: block;
  margin-top: var(--beat-2);
  padding-top: var(--beat-1);
  border-top: 1px solid var(--line-strong);
}

.ins-railcta__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.ins-railcta__action {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--accent);
}

.ins-railcta .arrow { transition: transform var(--dur-fast) var(--ease-out); }

.ins-railcta:hover .arrow { transform: translateX(0.25rem); }


/* TODA NUMERACIÓN Y VIÑETA VIVE EN LA MISMA COLUMNA QUE EL TEXTO. Colgarla
   en el canal (72px a la izquierda del cuerpo) la sacaba de la columna de
   lectura — por pedido explícito, ningún numeral ni viñeta cuelga más:
   "01. " y "◉" son texto inline al ras de la primera letra de cada línea,
   igual que cualquier lector esperaría. El color (no la posición) es lo que
   los distingue del resto de la prosa. Fig. 01-04 y el numeral de sección
   quedan en el mismo lugar de siempre porque nunca colgaron — .ins-fig__cap
   ya los pone en flujo normal (flex, sin position:absolute) y .ins-fig__idx
   se recolorea más abajo, junto con el resto del aparato. */

/* --------------------------------------------------------------------------
   5. CABECERA DE SECCIÓN — las ocho tienen la MISMA silueta
   El lector reconoce "acá empieza una sección" por forma, no por tamaño. El
   filete arranca EN EL DIVISOR, no en el borde de la placa, así que el inicio
   de sección se ve por visión periférica mientras se escanea desde el riel.
   -------------------------------------------------------------------------- */
.ins-prose { counter-reset: ins-sect; }

.ins-prose > * + h2 { margin-top: var(--beat-4); }
   /* (0,1,1) gana a > * + * */
.ins-prose > h2 {
  counter-increment: ins-sect;
  max-width: var(--ins-plate);
  /* Vuelve a 34px: la reducción a 32 existía sólo para que el numeral inline
     entrara en el renglón, y el numeral ya no vive en el renglón. */
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.125rem);   /* 25 → 34px */
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--accent);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--beat-3);
  scroll-margin-top: var(--ins-anchor);
  /* pretty, no balance: balance reparte en mitades e ignora la sintaxis, y
     dejaba la SEGUNDA línea más larga que la primera en 3 de los 4 titulares
     de dos líneas. Es la queja 5 sobreviviendo en los encabezados. */
  text-wrap: pretty;
}

/* EL NUMERAL DE SECCIÓN — índice, no prefijo. (Corregido en la pieza 2.)
   Antes era del MISMO tipo, tamaño y color que el h2, y como todos los h2
   van en azul el numeral quedaba invisible: no se distinguía de nada. Un
   "03." azul pegado a un título azul no es una marca, es ruido.

   Ahora es lo que ya es en todo el resto del documento: un ÍNDICE en mono
   chico. Fig. 01, los numerales del índice del riel, los 01-04 del test y
   los 01-03 de la secuencia son todos mono chico; el numeral de sección era
   el único que no. DESIGN.md además reserva Geist Mono para "eyebrows,
   telemetry, codes, indices" — o sea, exactamente esto.

   POSICIÓN: renglón propio arriba del título, al MISMO borde izquierdo. No
   cuelga en el margen lateral (eso es lo que Carlos rechazó en la pieza 1);
   abre el bloque, igual que "Fig. 01" abre el pie de una figura. De paso el
   título recupera los 704px completos y deja de partirse por 4px.

   COLOR: vino, por pedido explícito de Carlos (2026-08-04). Es una excepción
   consciente a "el vino es una sola forma": ahora hay 9 numerales en vino
   además del corchete. Convive con las otras tres etiquetas mono en vino que
   ya existían (Definition, On this page, Read your stack). Si algún día el
   corchete tiene que volver a ser lo único rojo, esta es la regla que se
   toca. */
.ins-prose > h2::before {
  content: counter(ins-sect, decimal-leading-zero);
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-alt);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.65rem;
}

.ins-prose > h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.625rem);   /* 19 → 26px */
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   6. MEDIDAS Y RITMO — dos anchos y sólo dos
   lectura 36rem para lo que se lee renglón a renglón · placa 44rem para lo
   que se examina. Los 128px de diferencia se repiten más de veinte veces:
   eso es un ritmo. Antes convivían 68ch / 46rem / 34ch / 26ch / 56ch / 62ch.
   -------------------------------------------------------------------------- */
.ins-prose {
  font-size: var(--ins-read);
  line-height: 1.5;
  hyphens: none;
}

/* mata la fuga de `.ins-prose p { max-width: 68ch }` hacia adentro de los
   instrumentos, donde recalculaba con el font-size de cada hijo y generaba
   cinco anchos fantasma */
.ins-prose :where(p) { max-width: none; }

.ins-prose > p,
.ins-prose > ul,
.ins-prose > ol,
.ins-prose > h3,
.ins-prose > blockquote,
.ins-prose > [data-run='q'],
.ins-faq__a,
.ins-endcta__body,
.ins-author__bio { max-width: var(--ins-measure); }


/* La nota de figura era el tipo más chico de la página con la línea más
   larga. Excepción declarada: la de Fig. 04 es la línea de cierre del
   artículo y sostiene la placa, así que conserva el ancho de placa. */
.ins-fig__note { max-width: 52ch; }


/* RITMO SIMPLIFICADO — dos estados, no cuatro. Antes había un "beat" distinto
   para cada combinación de qué precede a qué (párrafo-párrafo, párrafo-lista,
   lista-párrafo, instrumento-párrafo…) y la escalera de valores no se leía
   como intención sino como inconsistencia. Ahora hay sólo dos:
     - texto a texto (cualquier combinación de párrafo/lista/instrumento):
       un único valor proporcional al propio interlineado (1.5em).
     - después de un título: un espacio completo — esto es lo único que se
       mantiene grande a propósito, section = beat-4, h3 = beat-3. */
.ins-prose > * + *   { margin-top: 1.5em; }

.ins-prose > * + h2  { margin-top: var(--beat-4); }

.ins-prose > * + h3  { margin-top: var(--beat-3); }

.ins-article__body > :first-child { margin-top: 0; }
  /* riel y cuerpo arrancan juntos */

/* El lede es un MODO DE ÉNFASIS, no un paso de escala: se distingue por
   color, peso y aire, no por un 7% de tamaño. Sin filete propio: sería una
   cuarta hairline horizontal en las dos primeras pantallas. */
.ins-prose > p:first-child {
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
}

/* Los 11 párrafos que terminaban en muñones de 8 a 10 caracteres. */
.ins-prose > p,
.ins-prose li,
.ins-tldr__item,
.ins-faq__a,
.ins-endcta__body,
.ins-author__bio,
.ins-fig__note { text-wrap: pretty; }
  /* operación, no desviación */

/* --------------------------------------------------------------------------
   8. SIN TARJETAS — tres formas para tres funciones
   DESIGN.md: "No cards by default. Sections are type + space + hairlines."
   La página conserva exactamente DOS superficies alzadas, y riman: la
   Definition al 0% del scroll y el CTA al 100%.
   -------------------------------------------------------------------------- */

/* Key takeaways = programa reglado, sin fondo ni esquinas en L. Era la
   tercera caja blanca idéntica del arranque. */
.ins-tldr {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  margin-block: var(--beat-3);
}

.ins-tldr::before,
.ins-tldr::after { content: none; }

/* Cuando abre el cuerpo, el filete que cierra la masthead ya está 64px arriba:
   dos reglas fuertes seguidas se anulan entre sí. Sin el borde propio, las dos
   columnas arrancan igual, con una etiqueta mono y nada más. */
.ins-article__body > .ins-tldr:first-child { border-top: 0; }

.ins-tldr .ins-plate__label { display: block; padding-top: var(--beat-1); color: var(--accent); }

.ins-article__body > .ins-tldr:first-child .ins-plate__label { padding-top: 0; }

.ins-tldr__list { display: grid; gap: 0.75em; }

.ins-tldr__item {
  font-size: var(--ins-read);
}


/* La tabla deja de ser una caja y pasa a ser un ledger: dos reglas fuertes y
   hairlines por fila. Sigue colgando de .ins-prose table, así que una tabla
   pelada pegada en el editor de WordPress ya sale así. */
.ins-prose table {
  background: none;
  border: 0;
  border-radius: 0;
  border-block: 1px solid var(--line-strong);
}

.ins-prose table thead th,
.ins-prose table tr:first-child th {
  background: none;
  border-bottom: 1px solid var(--line-strong);
}


/* El FAQ era MÁS CHICO que el párrafo que el lector venía leyendo, justo en
   el punto donde vive la conversión. */
.ins-faq { border-top: 1px solid var(--ink); }

.ins-faq__q:first-of-type { border-top: 0; }

.ins-faq__q > summary { font-size: 1.375rem; padding-block: var(--beat-1); }

.ins-faq__a { font-size: var(--ins-read); }


/* EL CIERRE RIMA CON EL ARRANQUE. El único punto de conversión del artículo
   recupera la placa blanca con esquinas en L: a 19.000px de distancia, el
   mismo instrumento abre y cierra el documento. Dos superficies alzadas en
   toda la página no son una grilla de tarjetas, son una rima. */
.ins-endcta {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  margin-block: var(--beat-4);
  display: grid;
  gap: var(--beat-1);
}

.ins-endcta::before,
.ins-endcta::after {
  content: '';
  position: absolute;
  width: var(--ins-tick);
  height: var(--ins-tick);
  border-color: var(--line-strong);
  border-style: solid;
  pointer-events: none;
}

.ins-endcta::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }

.ins-endcta::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.ins-endcta__label  { color: var(--accent-alt); }

.ins-endcta__title  { color: var(--accent); text-wrap: balance; }

.ins-endcta__actions { margin-top: var(--beat-1); }


/* El botón vive sobre la placa blanca del CTA: por pedido explícito, acá
   NO es el botón primario de siempre (tinta llena/blanco). En reposo es
   arena con texto negro — el mismo par de tonos que la página detrás del
   panel, así que se lee como parte del instrumento, no como un botón
   genérico pegado encima; al pasar el mouse pasa a azul con texto blanco,
   la señal de "esto es interactivo" que el reposo no da por sí solo. */
.ins-endcta .btn--primary {
  background: var(--bg-base);
  color: var(--ink);
  /* arena sobre la placa blanca es un contraste bajo a propósito, pero sin
     borde el botón no tenía canto propio: un hairline gris claro (el mismo
     token que separa cualquier otra cosa en la página) le da el límite que
     el color por sí solo no daba. */
  border: 1px solid var(--line);
}

.ins-endcta .btn--primary:hover,
.ins-endcta .btn--primary:focus-visible {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}


/* La firma del documento. */
.ins-author { border-top: 1px solid var(--line-strong); }

/* El hover era un baño azul compitiendo con el match. */
.ins-prose table tbody tr:hover {
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--ink) 3%);
}

.ins-prose table tbody tr[data-sel-match]:hover {
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 8%);
}

/* El índice de figura va en VINO, en las tres piezas y en las que vengan.
   Es chrome de referencia, no un dato que el registro pruebe, y el numeral de
   sección ya va en vino desde 2026-08-04. Vivía scopeado a .ins-fig--rig en el
   CSS de marketing-attribution, o sea que la misma marca significaba dos cosas
   distintas según la pieza. Sube acá como regla del sistema (2026-08-10). */
.ins-fig__idx  { color: var(--accent-alt); }


/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

.ins-page .ins-shell--narrow {
    display: block;
    max-width: calc(var(--ins-plate) + var(--container-pad) * 2);
  }

.ins-article__grid { display: block; background-image: none; }

.ins-article__grid::before { display: none; }

.ins-toc     { display: none; }

.ins-railcta { display: none; }

  /* El índice móvil deja de ser una caja: con la Definition al lado sumaba una
     tercera tarjeta al arranque. Reglado arriba y abajo, como todo lo demás. */
.ins-toc-m {
    display: block;
    margin-block: var(--beat-2);
    max-width: none;
    margin-left: 0;
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
    /* sin borde inferior: el filete que cierra la masthead está 40px abajo y
       dos reglas seguidas se leen como un error de impresión */
  }

.ins-toc-m > summary { padding-inline: 0; }

.ins-toc-m__list     { padding-inline: 0; }

.ins-definition,
  .ins-article__body { max-width: none; margin-left: 0; }

.ins-breadcrumb { margin-bottom: var(--beat-1); }

.ins-hero__title { margin-top: var(--beat-1); }

  /* el bloque de control vuelve a ser una tira */
.ins-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    border-top: 0;
    margin-top: var(--beat-1);
  }

.ins-meta > span:not(.ins-meta__sep) { padding-block: 0; border-bottom: 0; }

.ins-meta__sep { display: inline-block; }

}

@media (max-width: 700px) {

.ins-page { --ins-plate: 100%; --ins-measure: 100%; }

.ins-prose > h2 { padding-top: var(--beat-2); }

.ins-endcta     { padding: var(--beat-2); }

  /* 64+40+64 apilados entre el índice y el filete de la masthead son 168px de
     nada en una pantalla de 390. En vertical el aire se mide en pantallas. */
.ins-article__grid { margin-top: var(--beat-2); padding-top: var(--beat-2); }

.ins-toc-m         { margin-block: var(--beat-2) 0; }

}


/* --------------------------------------------------------------------------
   10. ACCESIBILIDAD del aparato nuevo
   -------------------------------------------------------------------------- */
.ins-page .ins-railcta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

.ins-article__grid::before,
  .ins-railcta .arrow { transition: none; }

}

@media (pointer: coarse) {

.ins-toc__link { min-height: 44px; align-items: center; }

}


/* ==========================================================================
   PIEZA 2 — "Automating a Broken Process" (cluster CRM, 2026-08-04)
   Todo lo de acá abajo es ADITIVO: clases nuevas que la pieza 1 no usa, así
   que subir insights.css no puede tocar el artículo ya publicado. Ninguna
   regla compartida se modifica.

   TESIS DE LA PIEZA: el artículo argumenta que se revisa LA PLANCHA, no las
   copias. El sistema del sitio ya se llama "The Instrument Plate", así que
   los tres instrumentos de esta pieza son controles de pre-tirada: el cambio
   de estado (Fig. 01), el test por defecto (Fig. 02) y la caja del mapa
   (Fig. 03). Nada inventado: cada dato sale del cuerpo del artículo.

   DOCTRINA DE COLOR aplicada (sin relitigar):
     AZUL  = numerales estructurales (h2, h3 numerados, ol, ◉, Fig. 0X,
             etiquetas de campo de la caja) y links. Mide AL LECTOR.
     VINO  = UNA sola forma, el corchete de acotación, en el canal, midiendo
             una distancia que el documento no puede certificar. En esta
             pieza esa distancia es literal: "How long does work sit between
             these two owners?" — la espera que nadie mide. El corchete abre
             y NO cierra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P2.1 · NUMERAL DE H3 — los cuatro defectos están numerados en el copy
   ("1. Steps with no owner"). El numeral va inline, al ras del título, y se
   distingue por COLOR, igual que el de h2 y el del índice. Si el <span> se
   pierde (editor de WordPress, copiado plano) el texto sigue leyéndose
   "1. Steps with no owner": la degradación es total.
   -------------------------------------------------------------------------- */
.ins-prose > h3 .ins-hn {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   P2.3 · CONJUNTO NOMBRADO — cuatro secciones de la pieza enumeran en prosa
   ("Three patterns repeat", "Three costs show up", "three things automation
   alone never produces", los tres pasos de la secuencia): párrafos seguidos
   que abren con un <strong> que es el nombre del ítem.

   Se agrupan por PROXIMIDAD, no por tinta. Dentro del conjunto los ítems
   respiran 0.9em; contra el resto del cuerpo, 1.5em. Es la misma jugada que
   [data-run='q'] hace con las preguntas, sin sumar ocho hairlines nuevas a
   una página que ya usa la regla horizontal como señal escasa.
   -------------------------------------------------------------------------- */
.ins-prose [data-run='set'] {
  max-width: var(--ins-measure);
  display: grid;
  gap: 0.9em;
}

.ins-prose > [data-run='set'] { margin-block: 1.5em; }

.ins-prose [data-run='set'] p { margin: 0; max-width: none; }

/* El nombre del ítem es una entradilla, no un grito: mismo cuerpo, misma
   tinta que cualquier <strong> del artículo, sólo un pelo más cerrado para
   que se lea como etiqueta y no como negrita suelta. */
.ins-prose [data-run='set'] p > strong:first-child { letter-spacing: -0.008em; }


/* --------------------------------------------------------------------------
   P2.7c · HUECO DE FOTOGRAFÍA — se ve el ritmo antes de tener la imagen.
   Sale del documento en cuanto se pega el <img> real.
   -------------------------------------------------------------------------- */
.ins-shot__slot {
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-family: var(--font-sans); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
  background: repeating-linear-gradient(
    var(--diagonal-angle),
    color-mix(in srgb, var(--ink) 4%, transparent) 0 1px,
    transparent 1px 8px
  );
}

.ins-shot__slot::after { content: attr(data-placeholder); }

@media (max-width: 700px) {


  /* En su propio renglón el numeral ya no depende del cuerpo del título, así
     que no hace falta reajustar nada: sólo respira un poco menos. */
.ins-prose > h2::before { margin-bottom: 0.5rem; }

}


/* La placa de cierre y la firma son dos objetos distintos y estaban a 104px:
   con el canto del botón, la auditoría de §6.4b marcaba un racimo de cuatro
   filetes en menos de 130px justo en el punto de conversión. El intervalo
   pasa a beat-4 + beat-2, que sigue saliendo de los intervalos del sistema y
   no de un número nuevo. */
.ins-article__body > .ins-endcta { margin-bottom: calc(var(--beat-4) + var(--beat-2)); }


/* --------------------------------------------------------------------------
   P3.8 · LA PLACA DE CIERRE
   Esta pieza no trae label ni título para el CTA: su copy termina en una sola
   frase y no se inventa nada. Con el cuerpo en tamaño de párrafo, la placa
   quedaba con dos renglones flotando en 704px y se leía como un hueco, justo
   en el único punto de conversión. La frase sube al registro del lede — que
   es el modo de énfasis que esta hoja ya usa: color, peso y aire, nunca un
   paso de escala nuevo — y la placa vuelve a tener cuerpo.
   Scopeado con --lede: .ins-endcta lo comparten las piezas 1 y 2 publicadas.
   -------------------------------------------------------------------------- */
.ins-endcta--lede .ins-endcta__body {
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
}

/* El margin-top del bloque de acciones se SUMABA al gap del grid: 48px de
   separación contra 44px de padding del panel. Un solo intervalo. */
.ins-endcta--lede .ins-endcta__actions { margin-top: 0; }


/* ==========================================================================
   P4 · MOVIMIENTO DEL HUB — "el aparato se arma alrededor del título"
   Hasta acá el hub tenía movimiento de scroll (reveals, aguja, progreso) y
   CERO entrada de carga: la primera pantalla aparecía de golpe, entera y
   plana, en la página que más tiene que parecer un instrumento.

   EL TÍTULO NO SE ANIMA. Es el LCP de la página y es el hecho; retrasarlo
   medio segundo por una transición cuesta métrica de Core Web Vitals y no
   compra nada. Lo que entra es el APARATO: la ruta, el bloque de control, la
   placa de definición con su corchete, el índice renglón por renglón y la
   salida del riel. El lector ve el título ya puesto y ve montarse el
   instrumento a su alrededor. Ese es el argumento de la marca, no un efecto.

   Sólo opacity y transform. Nada toca layout. Todo cae bajo
   prefers-reduced-motion, donde el estado final ES el estado de reposo.
   Aplica a las tres piezas del hub a propósito: la entrada es del hub.
   ========================================================================== */
@keyframes ins-enter { from { opacity: 0; transform: translateY(8px); } }

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

.ins-page .ins-breadcrumb,
  .ins-page .ins-meta,
  .ins-page .ins-definition,
  .ins-page .ins-toc__label,
  .ins-page .ins-toc__link,
  .ins-page .ins-railcta,
  .ins-page .ins-prose > p:first-child {
    animation: ins-enter 0.6s var(--ease-out) both;
  }

.ins-page .ins-breadcrumb { animation-delay: 0.06s; }

.ins-page .ins-meta       { animation-delay: 0.16s; }

.ins-page .ins-definition { animation-delay: 0.26s; }

.ins-page .ins-prose > p:first-child { animation-delay: 0.30s; }

.ins-page .ins-toc__label { animation-delay: 0.34s; }


  /* El índice entra renglón por renglón: es la tabla de contenidos armándose,
     que es exactamente lo que el lector necesita entender de esta página. 28ms
     entre renglones — por debajo de eso se lee como un bloque, por encima se
     hace esperar. */
.ins-page .ins-toc__link:nth-child(1)  { animation-delay: 0.40s; }

.ins-page .ins-toc__link:nth-child(2)  { animation-delay: 0.428s; }

.ins-page .ins-toc__link:nth-child(3)  { animation-delay: 0.456s; }

.ins-page .ins-toc__link:nth-child(4)  { animation-delay: 0.484s; }

.ins-page .ins-toc__link:nth-child(5)  { animation-delay: 0.512s; }

.ins-page .ins-toc__link:nth-child(6)  { animation-delay: 0.540s; }

.ins-page .ins-toc__link:nth-child(7)  { animation-delay: 0.568s; }

.ins-page .ins-toc__link:nth-child(8)  { animation-delay: 0.596s; }

.ins-page .ins-toc__link:nth-child(9)  { animation-delay: 0.624s; }

.ins-page .ins-toc__link:nth-child(10) { animation-delay: 0.652s; }

.ins-page .ins-toc__link:nth-child(11) { animation-delay: 0.680s; }

.ins-page .ins-toc__link:nth-child(12) { animation-delay: 0.708s; }

.ins-page .ins-toc__link:nth-child(13) { animation-delay: 0.736s; }

.ins-page .ins-railcta { animation-delay: 0.80s; }


  /* El corchete de vino se dibujaba a los 0,35s, o sea mientras su propia
     placa todavía estaba entrando: la acotación aparecía antes que la cosa
     acotada. Ahora cierra la secuencia. */
.ins-page .ins-definition .ins-plate__label::before { animation-delay: 0.72s; }

}


/* --------------------------------------------------------------------------
   P4.3 · ACUSE DE RECIBO EN EL ÚNICO BOTÓN DE LA PÁGINA
   El CTA tenía hover y foco, y nada al presionar: el clic no devolvía señal.
   -------------------------------------------------------------------------- */
.ins-endcta .btn--primary,
.ins-railcta { transition: background var(--dur-fast) var(--ease-out),
                           color var(--dur-fast) var(--ease-out),
                           border-color var(--dur-fast) var(--ease-out),
                           transform var(--dur-fast) var(--ease-out); }

.ins-endcta .btn--primary:active { transform: translateY(1px); }

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

.ins-endcta .btn--primary:active { transform: none; }

}


/* 2. LA MEDIDA. Medido en A/B controlado sobre los mismos siete párrafos, a
   704px de columna, el renglón más largo del artículo da:
       19px → 83 caracteres     20px → 78     21px → 73
   El techo es 75. El ancho de columna es decisión cerrada (§1.3 del playbook,
   un solo ancho), así que la medida se corrige por el único lado que queda: el
   cuerpo sube a 21px y el renglón entra en banda por primera vez. 20px no
   alcanzaba — parecía alcanzar hasta que la comparación fue controlada.
   Afecta a las tres piezas del hub: las tres estaban a 83. */
.ins-page { --ins-read: clamp(1.0625rem, 0.85rem + 0.9vw, 1.3125rem); }


/* El h3 sube con el cuerpo. Con el cuerpo en 21 y el h3 en 25,4 el paso caía
   a 1,21; a 27px queda 1,26 contra el h2 y 1,29 contra el cuerpo, y la escala
   entera pasa el mínimo salvo el par beat/h2, que se separa por color. */
.ins-prose > h3 { font-size: clamp(1.25rem, 1.05rem + 0.65vw, 1.6875rem); }


/* 3. EL LEDE DEJA DE SER UN PASO DE ESCALA. Su propio comentario en esta hoja
   dice que se distingue "por color, peso y aire, nunca por un paso de escala
   nuevo" y sin embargo estaba 10% más grande que el cuerpo. Con el cuerpo en
   20px la diferencia caía a 1,05: un escalón que ya no se veía y sólo ensuciaba
   la escala. Ahora hace lo que decía hacer. */
.ins-prose > p:first-child { font-size: var(--ins-read); }


/* La escala final, medida a 1440:
     64  h1      · 1,54
     41,6 beat   · 1,22 (separados además por color, numeral y filete)
     34  h2      · 1,26
     27  h3      · 1,29
     21  cuerpo y lede (peso y color, no tamaño)
     11,5 mono
   Un solo escalón por debajo de 1,25, y es el que tiene tres señales extra. */