/* ==========================================================================
   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.
   ========================================================================== */

.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-mono);
  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-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.ins-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  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-mono);
  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: 600;
  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-mono); 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-mono); font-size: var(--fs-label); font-weight: 500; 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: 600; 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-mono); 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 rgba(19,20,25,0.16));
}
.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-mono); 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: 600; 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-mono); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--accent); }
.ins-ring__domain { font-size: 1.25rem; font-weight: 600; 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-mono); 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-mono); 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-mono);
  font-size: 0.66rem;
  font-weight: 500;
  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: 500;
  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);
}
.ins-tldr__item::before {
  counter-increment: tldr;
  content: counter(tldr, decimal-leading-zero) '. ';
  color: var(--accent);
  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-mono); 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: 600;
  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: 600;
  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: 600; }
.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-mono); 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-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-base); }
.ins-table tbody th { font-weight: 600; 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: 600; 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-mono); 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: 600; 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-mono); 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-mono); font-size: 0.72rem; font-weight: 500; 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-mono); 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-mono); 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-mono); font-size: 1.4rem; color: var(--text-faint); }
.ins-author__name { font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.ins-author__role { font-family: var(--font-mono); 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-mono); font-size: 2.4rem; color: var(--text-faint); }
.ins-authorhero__name { font-size: var(--fs-h1); font-weight: 600; line-height: 1.02; letter-spacing: var(--tracking-heading); color: var(--ink); }
.ins-authorhero__role { font-family: var(--font-mono); 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-mono); 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-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ins-card__title { font-size: 1.2rem; font-weight: 600; 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-mono); 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-mono); 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: 600; 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-mono); 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-mono); 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: 600; color: var(--ink); letter-spacing: -0.02em; }
.ins-topicblock__count { font-family: var(--font-mono); 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: 600; 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-mono); 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: 600; color: var(--ink); letter-spacing: -0.01em; }

.ins-backlink { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); 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-mono); font-size: 0.72rem; font-weight: 500; 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: 600; }

/* dummy-content flag (removed before production) */
.ins-dummy { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-alt); border: 1px solid color-mix(in srgb, var(--accent-alt) 40%, transparent); border-radius: var(--radius); padding: 0.2rem 0.5rem; }

/* --------------------------------------------------------------------------
   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: 500;
  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-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.ins-prose table th,
.ins-prose table td {
  text-align: left;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  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-mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-base);
}
.ins-prose table tbody th { font-weight: 600; 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: 500; }

/* 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; }

/* A framework name reads as a chip (enhancer-added, decorative only). */
.ins-prose table .ins-model {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius);
  padding: 0.22rem 0.5rem;
  white-space: nowrap;
}

/* 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-mono); 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; }
.ins-fig__cap {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin-bottom: 0.9rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.ins-fig__idx {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); flex: none;
}
.ins-fig__title {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4;
}
.ins-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; }

/* --------------------------------------------------------------------------
   B1. SPECIMEN — the four acronyms, letter by letter. Fig. 01
   -------------------------------------------------------------------------- */
.ins-spec { display: grid; }
.ins-spec__row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem; align-items: start;
  padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line);
}
.ins-spec__row:last-child { border-bottom: 0; }
.ins-spec__id { display: grid; gap: 0.2rem; }
.ins-spec__name {
  font-family: var(--font-mono); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink);
}
.ins-spec__n {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.ins-spec__fit { grid-column: 2; margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); }
.ins-spec__strip {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.ins-spec__cell {
  flex: 1 1 4.2rem; min-width: 3.6rem;
  background: var(--bg-raised);
  padding: 0.55rem 0.4rem 0.5rem;
  display: grid; gap: 0.15rem; justify-items: center; text-align: center;
}
.ins-spec__cell b {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500;
  line-height: 1; color: var(--ink);
}
.ins-spec__cell i {
  font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--text-muted);
}
.ins-spec__cell--new { background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 8%); }
.ins-spec__cell--new b,
.ins-spec__cell--new i { color: var(--accent); }
.ins-spec__legend {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.ins-spec__swatch {
  width: 0.85rem; height: 0.85rem; flex: none; border-radius: 1px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 12%);
}

/* --------------------------------------------------------------------------
   B2. SELECTOR — mounted ON the real Selection Rule table. Fig. 02
   The table is the AEO asset and always ships in the DOM, citable, unchanged.
   JS only adds a filter that highlights the matching row. With JS off the
   controls stay hidden (hidden attribute) and the reader gets the plain table.
   -------------------------------------------------------------------------- */
.ins-sel { display: grid; border: 1px solid var(--line); border-radius: var(--radius); margin-block: 2.4em 0; background: var(--bg-raised); }
.ins-sel[hidden] { display: none; }
.ins-sel__row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.65rem 1.25rem; align-items: center;
  padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line);
}
.ins-sel__row:last-child { border-bottom: 0; }
.ins-sel__q {
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4;
  margin: 0;
}
.ins-sel__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ins-sel__opt { position: relative; }
.ins-sel__opt input {
  position: absolute; opacity: 0; margin: 0; cursor: pointer;
  width: 100%; height: 100%; left: 0; top: 0;
}
.ins-sel__opt span {
  display: block; padding: 0.42rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 0.82rem; line-height: 1.3;
  color: var(--text-primary); background: var(--bg-raised);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ins-sel__opt input:hover + span { border-color: var(--line-strong); }
.ins-sel__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ins-sel__opt input:checked + span {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 7%);
  color: var(--accent-ink); font-weight: 500;
}

/* 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; }

/* controls sit directly on top of the table they filter */
.ins-sel:not([hidden]) + [data-tablewrap] { margin-top: 0; }
.ins-sel:not([hidden]) + [data-tablewrap] > table {
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.ins-sel:not([hidden]) { border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   B3. TRACK — the Paper Process, decision to signature. Fig. 03
   -------------------------------------------------------------------------- */
.ins-track { padding: 1.5rem 1.25rem 1.25rem; }
.ins-track__ends {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.7rem;
}
.ins-track__ends span:last-child { text-align: right; }
.ins-track__steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.ins-track__step { background: var(--bg-raised); padding: 0.7rem 0.5rem; display: grid; gap: 0.3rem; align-content: start; }
.ins-track__n { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--accent); }
.ins-track__label { font-size: 0.82rem; line-height: 1.35; color: var(--text-primary); }
.ins-track__span {
  margin-top: 0.7rem; display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-alt);
}
.ins-track__span::before,
.ins-track__span::after { content: ''; height: 1px; flex: 1; background: color-mix(in srgb, var(--accent-alt) 35%, transparent); }

/* --------------------------------------------------------------------------
   B4. FILTER — declared pipeline, minus what has no evidence. Fig. 04
   Ends on an unknown: the number is the reader's, not ours.
   -------------------------------------------------------------------------- */
.ins-filterfig { display: grid; }
.ins-filterfig__head,
.ins-filterfig__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 1.1rem 1.25rem;
}
.ins-filterfig__head { border-bottom: 1px solid var(--line); }
.ins-filterfig__foot { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 5%); }
.ins-filterfig__k {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.ins-filterfig__v { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--ink); }
.ins-filterfig__foot .ins-filterfig__v { color: var(--accent); }
.ins-filterfig__steps { display: grid; }
.ins-filterfig__step {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.85rem;
  align-items: baseline; padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem; line-height: 1.45; color: var(--text-primary);
  margin: 0; max-width: none;
}
.ins-filterfig__step:last-child { border-bottom: 0; }
.ins-filterfig__minus { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-alt); }

/* --------------------------------------------------------------------------
   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-mono); 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: 600;
  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; }

/* --------------------------------------------------------------------------
   Responsive — instruments
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ins-track__steps { grid-auto-flow: row; grid-auto-columns: auto; }
  .ins-track__step { grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; }
  .ins-track__label { font-size: 0.86rem; }
  .ins-track__ends { flex-direction: column; gap: 0.3rem; }
  .ins-track__ends span:last-child { text-align: left; }
}
@media (max-width: 700px) {
  .ins-spec__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .ins-spec__fit { grid-column: 1; }
  .ins-sel__row { grid-template-columns: 1fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   Specificity guard — `.ins-prose > * + *` (0,1,1) outranks single-class
   component margins (0,1,0), so instruments restate theirs as prose children.
   -------------------------------------------------------------------------- */
.ins-prose > .ins-fig { margin-block: 2.8em; }
.ins-prose > .ins-sel { margin-block: 2.4em 0; }
.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; }

/* selector head + the table it sits on (panel already draws the frame) */
.ins-sel__head {
  position: relative;
  display: flex; align-items: baseline; gap: 0.75rem; margin: 0;
  padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--line);
  background: var(--bg-base);
  /* "Fig. 03" vive acá, no dentro de un .ins-fig__cap (el selector no es un
     .ins-fig): sin este `position: relative` el .ins-fig__idx colgado se
     anclaba al ancestro posicionado más cercano, que quedaba a 300px de
     distancia dentro del riel, montado encima del índice. */
}
@media (max-width: 640px) {
  /* table becomes cards, so the controls detach into their own panel */
  .ins-sel:not([hidden]) { border-radius: var(--radius); border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
  .ins-sel:not([hidden]) + [data-tablewrap] { margin-top: 1.25rem; }
}

/* --------------------------------------------------------------------------
   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-mono); 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-sel__opt span {
    min-height: 44px;
    display: flex; align-items: center;
    padding-inline: 0.9rem;
  }
  .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-progress__bar,
  .ins-prose table tbody tr,
  .ins-prose [data-tablewrap][data-sel-on] tbody tr,
  .ins-sel__opt span,
  .ins-endcta a,
  .ins-card,
  .ins-link-arrow .arrow {
    transition: none !important;
  }
  .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-mono);
  font-size: 0.6rem; font-weight: 500;
  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); }
}

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

/* --- Small mono chrome stays as a device, but never below 10px and never on
       --text-faint. On narrow screens the acronym plate gets more room. --- */
@media (max-width: 700px) {
  .ins-spec__cell { flex: 1 1 5rem; min-width: 4.4rem; padding: 0.7rem 0.5rem; }
  .ins-spec__cell i { font-size: 0.7rem; }
  .ins-spec__cell b { font-size: 1.15rem; }
}


/* ==========================================================================
   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: 600;
  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); }

/* 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: 500;
  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-mono);
  font-size: 0.66rem;
  font-weight: 500;
  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: 600; 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-mono);
  font-size: 0.64rem;
  font-weight: 500;
  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);
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.125rem);   /* 25 → 34px */
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 600;
  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, inline, al ras de la primera letra del título —
   nunca colgado a la izquierda. Mismo tipo que el h2, sólo se distingue
   por color: la marca es el azul, no la posición. */
.ins-prose > h2::before {
  content: counter(ins-sect, decimal-leading-zero) '. ';
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.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); }

.ins-article__body,
.ins-prose > .ins-fig,
.ins-prose > [data-tablewrap],
.ins-prose > .ins-sel,
.ins-tldr,
.ins-faq,
.ins-endcta { max-width: var(--ins-plate); }

/* 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; }
.ins-fig--ledger .ins-fig__note { max-width: var(--ins-plate); }

/* 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: 500;
  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; }

/* --------------------------------------------------------------------------
   7. EL VINO — una gramática, cuatro marcas en 19.500px
   -------------------------------------------------------------------------- */

/* Fig. 02 · el mismo corchete rotado al eje horizontal. Medía 9.6px (por
   debajo del piso del propio archivo) y llegaba al 58% de su figura: el tramo
   invisible entre apretón de manos y firma es la idea más cara de la pieza y
   por fin se ve, acotada de punta a punta. */
.ins-track__span {
  max-width: none;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--accent-alt);
}
.ins-track__span::before,
.ins-track__span::after {
  background: color-mix(in srgb, var(--accent-alt) 55%, transparent);
}

/* Fig. 04 · el MISMO corchete, en el MISMO canal, 17.000px más abajo,
   abrazando las cuatro filas de la resta. Y NO CIERRA: sin brazo inferior, es
   una medición que nadie terminó. Es la tesis del artículo dibujada. */
.ins-fig--ledger .ins-filterfig__steps { position: relative; }
@media (min-width: 1200px) {
  .ins-fig--ledger .ins-filterfig__steps::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;
    border-bottom: 0;
  }
}
/* EL REMATE. Dos numerales del MISMO cuerpo y la MISMA alineación, y uno de
   ellos falta. El "?" era azul, o sea estaba pintado con el color que este
   mismo archivo definió como "esta es la respuesta", cuando es exactamente lo
   contrario. Si desaturás la página el argumento sigue en pie: es tipográfico. */
.ins-filterfig__head .ins-filterfig__v,
.ins-fig--ledger .ins-filterfig__foot .ins-filterfig__v {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.ins-fig--ledger .ins-filterfig__foot .ins-filterfig__v { color: var(--accent-alt); }
.ins-filterfig__minus { color: var(--text-muted); }  /* 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);
}
.ins-sel {
  background: none;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
}
.ins-sel__head { background: none; }
.ins-sel:not([hidden]) + [data-tablewrap] > table {
  border-top: 0;
}

/* 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);
}

/* El único momento de conversión intermedio, y nace del contenido: el
   párrafo que sigue al ledger es el que lleva a la calculadora. */
.ins-prose > .ins-fig--ledger + p {
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

/* Fig. 01 · CUATRO MÁRGENES IGUALES. El bleed de un solo lado dejaba el texto
   pegado al borde izquierdo (0px) contra 24px del derecho, y encima el panel
   no tenía padding-block propio: el aire de arriba/abajo salía del padding
   de cada fila (18.4px), un tercer valor distinto. Ahora el panel es el único
   que aporta el margen del borde: `--space-3` en los cuatro lados. Las filas
   conservan su padding vertical para el ritmo ENTRE filas, pero la primera y
   la última lo pierden en el borde que da al panel para no duplicarlo. */
.ins-fig--plate .ins-fig__panel { padding: var(--space-3); }
.ins-fig--plate .ins-spec__row:first-child { padding-top: 0; }
.ins-fig--plate .ins-spec__row:last-child  { padding-bottom: 0; }

/* Fig. 01 · la fila de MEDDPICC son OCHO celdas y el flex-basis de 4.2rem
   (67px x 8 = 538px sobre una tira de 508px) mandaba la octava a un renglón
   propio a todo lo ancho. Leído como diseño, ese renglón parecía significar
   algo; no significaba nada, era un desborde. El basis decide el wrap, no el
   min-width, así que se baja el basis y las celdas siguen creciendo parejas. */
.ins-spec__cell { flex: 1 1 3.4rem; min-width: 3.2rem; }

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

/* --------------------------------------------------------------------------
   8b. TRES FORMAS DE FIGURA + DISCIPLINA DEL ACENTO
   Se conservan de los pases anteriores porque siguen siendo correctas y este
   pase las reemplazó en bloque. Cada figura declara su propia forma: la
   default (.ins-fig__panel) no tiene superficie, y una figura que no declara
   forma no la recibe.
   -------------------------------------------------------------------------- */

/* 1. PLACA (Fig. 01) — sostenida por dos reglas horizontales, dentro de la
      misma columna que el resto de la prosa (sin bleed): una placa encastrada
      en la página, no una tarjeta flotando encima. */
.ins-fig--plate .ins-fig__panel {
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
}
.ins-fig--plate .ins-spec__row { padding-inline: 0; }

/* 2. RECORRIDO (Fig. 02) — un proceso es una estructura: sin superficie, sobre
      el fondo de la página, y las hairlines de la grilla hacen el trabajo. */
.ins-fig--track .ins-track { padding: 0; }
.ins-fig--track .ins-track__steps { border-inline: 0; border-radius: 0; }

/* 3. LEDGER (Fig. 04) — una resta se lee como una cuenta: reglada arriba y
      abajo, filas separadas, nada encajonado. Y sin el tinte azul del pie: es
      justo donde vive el "?" en vino, y el azul ahí contradice la doctrina. */
.ins-fig--ledger .ins-filterfig__head,
.ins-fig--ledger .ins-filterfig__foot,
.ins-fig--ledger .ins-filterfig__step { padding-inline: 0; }
.ins-fig--ledger .ins-filterfig__head { border-top: 1px solid var(--line-strong); }
.ins-fig--ledger .ins-filterfig__foot {
  background: none;
  border-bottom: 1px solid var(--line-strong);
}

/* Un chip azul en CADA fila dejaba a la fila matcheada sin nada con qué ganar.
   Los chips son neutros; sólo el match se pone azul. */
.ins-prose table .ins-model {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  letter-spacing: 0.1em;
}
.ins-prose table tbody tr[data-sel-match] .ins-model {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 100%, var(--accent) 6%);
}
/* 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 contador de paso del Paper Process (Fig. 02) es chrome de esa figura
   puntual, no numeración del cuerpo — se queda neutro. Todo lo demás que
   numera o viñetea el cuerpo (Fig. 01/03/04, h2, ol, ul, TL;DR) va en azul
   por pedido explícito: la marca es el color, no la posición. */
.ins-track__n  { color: var(--text-muted); }
.ins-fig__idx  { color: var(--accent); }
.ins-spec__cell i { letter-spacing: 0.1em; }

/* Las figuras comparan cifras entre filas: los numerales tienen que alinear. */
.ins-prose table,
.ins-spec__n,
.ins-track__n { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   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; }
  /* En móvil el bleed va de borde a borde del viewport, izquierda Y derecha
     por igual; el padding se pasa a las cuatro direcciones (no sólo inline)
     para que arriba/abajo sigan midiendo lo mismo que los costados. */
  .ins-fig--plate .ins-fig__panel {
    margin-inline: calc(var(--container-pad) * -1);
    padding: var(--container-pad);
  }
}

/* --------------------------------------------------------------------------
   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; }
}