/* ============================================================
   Sitio comercial — marca por definir (sistema: Growth eCommerce Intelligence)
   Modo: Persuade · data-driven premium · ES
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --bg: oklch(1 0 0);
  --surface: oklch(0.982 0.006 160);
  --surface-2: oklch(0.965 0.008 160);
  --line: oklch(0.905 0.008 160);
  --line-strong: oklch(0.855 0.010 160);

  /* ink */
  --ink: oklch(0.20 0.010 165);
  --ink-body: oklch(0.36 0.012 165);
  --ink-muted: oklch(0.50 0.012 165);

  /* brand */
  --primary: oklch(0.40 0.085 158);
  --primary-strong: oklch(0.33 0.078 158);
  --primary-deep: oklch(0.185 0.032 160);
  --primary-deep-2: oklch(0.135 0.026 162);

  /* signals */
  --upside: oklch(0.86 0.19 128);
  --upside-ink: oklch(0.30 0.10 130);
  --leak: oklch(0.55 0.15 30);
  --leak-ink: oklch(0.44 0.15 30);
  --leak-soft: oklch(0.965 0.018 45);
  /* la terracota de --leak no llega a 4.5:1 sobre el verde profundo; sobre
     oscuro se usa esta, que sí. */
  --leak-on-dark: oklch(0.75 0.145 42);

  /* on dark */
  --on-dark: oklch(0.96 0.010 160);
  --on-dark-muted: oklch(0.80 0.016 160);
  --on-dark-line: oklch(0.30 0.020 162);

  /* type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  /* segunda voz: sólo para la palabra donde gira el argumento, nunca para texto corrido */
  --font-accent: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  /* motivo de papel pautado: la escena es un informe impreso sobre una mesa,
     no un panel de neón. La retícula se insinúa, no se lee. */
  --rule: oklch(0.20 0.010 165 / .045);
  --rule-dark: oklch(0.86 0.19 128 / .055);
  --grid-step: 92px;

  /* rhythm */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 7vw, 7rem);

  /* Separación titular → texto de apoyo. Escala con el tamaño del titular:
     un h2 de 58px y un h3 de 17px no pueden compartir el mismo hueco. */
  --lead-2xl: clamp(1.75rem, 1.15rem + 1.5vw, 2.7rem); /* bajo los titulares grandes (50-58px) */
  --lead-xl: clamp(1.5rem, 1rem + 1.15vw, 2.1rem);   /* bajo titulares de sección */
  --lead-lg: clamp(1.15rem, 0.95rem + 0.55vw, 1.5rem); /* bajo h3 de bloque */
  --lead-md: 0.72rem;                                  /* bajo h3 de componente */

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* z-scale */
  --z-nav: 200;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--upside); color: var(--primary-deep-2); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  font-weight: 700;
}
p { margin: 0; text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.75rem; top: -100px; z-index: 999;
  background: var(--primary); color: oklch(0.98 0.01 160);
  padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600;
  transition: top .2s var(--ease-out);
}
.skip-link:focus-visible { top: 0.75rem; outline: 3px solid var(--upside); outline-offset: 2px; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
}
.section-head { max-width: 50rem; margin-bottom: clamp(2.75rem, 4.6vw, 4.25rem); }
.section-head h2 { font-size: clamp(1.85rem, 1.1rem + 3vw, 3.25rem); letter-spacing: -0.03em; }
.section-head p { margin-top: var(--lead-xl); font-size: 1.08rem; line-height: 1.65; color: var(--ink-body); max-width: 62ch; }

/* ---------- Segunda voz ----------
   Una serif itálica marca la palabra donde gira el argumento. Se usa en cinco
   sitios de toda la página, siempre en el giro; si apareciera en cada titular
   dejaría de significar nada y sería sólo una gramática decorativa. */
.ac {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.004em;
  color: var(--primary);
}
.blind .ac, .warranty .ac, .cta .ac { color: var(--upside); }

.lead { font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem); color: var(--ink-body); line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: transform .25s var(--ease-out), background .2s, color .2s, border-color .2s, box-shadow .25s;
}
.btn:focus-visible { outline: 3px solid var(--upside); outline-offset: 3px; }
.btn-primary { background: var(--primary); color: oklch(0.98 0.01 160); box-shadow: 0 10px 22px -16px oklch(0.40 0.085 158 / .7), 0 1px 0 rgba(0,0,0,.04); }
.btn-primary:hover { background: var(--primary-strong); transform: translateY(-2px); box-shadow: 0 16px 32px -14px oklch(0.40 0.085 158 / .6); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-lg { padding: 1.05rem 1.75rem; font-size: 1.05rem; }
.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-on-dark.btn-primary { background: var(--upside); color: var(--primary-deep-2); }
.btn-on-dark.btn-primary:hover { background: oklch(0.90 0.19 128); box-shadow: 0 14px 30px -12px oklch(0.86 0.19 128 / .5); }
.btn-on-dark.btn-ghost { color: var(--on-dark); border-color: var(--on-dark-line); }
.btn-on-dark.btn-ghost:hover { border-color: var(--upside); color: var(--upside); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in oklch, var(--bg) 93%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -26px oklch(0.20 0.03 160 / .55); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; }
.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-links a {
  font-size: 0.94rem; color: var(--ink-body); font-weight: 500;
  padding: 0.42rem 0.8rem; border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--primary); background: var(--surface-2); }
.nav-links a:focus-visible, .footer-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 999px; }
.nav-cta { display: flex; align-items: center; gap: 0.9rem; }
.nav-toggle { display: none; background: none; border: 0; padding: 0.4rem; color: var(--ink); }
.nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; }
.logo svg { width: 30px; height: 30px; border-radius: 8px; }
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.logo-word b { color: var(--primary); font-weight: 700; }
/* descriptor bajo la marca: tracking corto porque la línea es larga */
.logo-sub {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary); line-height: 1; white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(2.5rem, 4.5vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* papel pautado + luz de mesa. Las dos capas van bajo el contenido y no se
   pintan cuando el usuario ha pedido menos movimiento/decoración. */
.hero::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 78%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: var(--grid-step) var(--grid-step);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 45%, transparent 100%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -22%; right: -14%; width: 68%; aspect-ratio: 1;
  background:
    radial-gradient(closest-side, oklch(0.86 0.19 128 / .20), transparent 72%),
    radial-gradient(closest-side at 62% 68%, oklch(0.40 0.085 158 / .13), transparent 70%);
}
.hero > .wrap { position: relative; z-index: 1; }
/* minmax(0,…): sin el, un titular largo empuja su propia columna y estrecha la captura */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 {
  font-size: clamp(2.15rem, 1.25rem + 3.1vw, 3.6rem);
  letter-spacing: -0.038em;
  line-height: 1.04;
  font-weight: 800;
  max-width: 17ch;
}
.hero h1 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -0.005em;
  position: relative; white-space: nowrap; padding-inline: 0.03em;
}
.hero h1 em::after {
  content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.06em; height: 0.24em;
  background: var(--upside); z-index: -1; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .85s var(--ease-out) .7s;
}
.hero h1.in em::after { transform: scaleX(1); }
.hero-lead { margin-top: 1.5rem; max-width: 46ch; }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-note { margin-top: 1.6rem; font-size: 0.9rem; color: var(--ink-muted); display: flex; align-items: center; gap: 0.5rem; }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--upside); box-shadow: 0 0 0 4px oklch(0.86 0.19 128 / .2); flex: none; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.2rem; padding: 0.42rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--primary); line-height: 1;
}
.hero-tag .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--upside); flex: none; }
.hero-clarify {
  font-size: 0.95rem; color: var(--ink-body); line-height: 1.55; max-width: 74ch;
  padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line);
}
.hero-clarify b { color: var(--ink); font-weight: 600; }

/* hero visual — una sola captura, recortada para que se lea a tamaño real.
   Una captura de 1554px encogida a 500 no es evidencia: es una mancha. */
.hero-visual { position: relative; display: grid; gap: 1.1rem; }
.frag-stack { position: relative; max-width: 591px; width: 100%; margin-inline: auto; }
.frag {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); overflow: hidden;
  max-width: 591px; margin-inline: auto; width: 100%;
  box-shadow: 0 34px 64px -32px oklch(0.20 0.03 160 / .38), 0 6px 18px -10px oklch(0.20 0.03 160 / .18);
}

/* El veredicto es la pieza que el analista deja encima del informe: la captura
   dice qué se mide, esta tarjeta dice qué se concluye. Sin ella el hero enseña
   un cuadro de mando más, que es justo lo que la página niega vender. */
.verdict {
  position: relative; z-index: 2;
  width: min(23rem, 84%);
  margin: -1.1rem 0 0 clamp(-1.5rem, -1.6vw, -0.5rem);
  background: var(--primary-deep); color: var(--on-dark);
  border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem;
  box-shadow: 0 30px 54px -26px oklch(0.185 0.032 160 / .62), 0 6px 16px -8px oklch(0.185 0.032 160 / .35);
}
.verdict .v-k {
  display: block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--upside);
}
.verdict .v-t {
  margin-top: 0.5rem; font-family: var(--font-display); font-weight: 700;
  font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.025em; color: var(--on-dark);
}
.verdict .v-t em { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--upside); }
.verdict .v-d { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.45; color: var(--on-dark-muted); }
/* Sin captura debajo, el veredicto deja de ser una nota superpuesta y pasa a
   sostener la columna solo. Estado temporal: la captura vuelve cuando exista el
   dataset sintetico que la respalde. Ver README, «Deuda tecnica».

   La columna visual pasa a ser mucho mas corta que la de texto, asi que
   centrarla la hundiria fuera del primer golpe de vista. Se ancla arriba y se
   baja hasta la primera linea del titular, para que veredicto y titular se lean
   como un par y no como dos piezas sueltas. */
.hero-grid.is-bare { align-items: start; }
.hero-grid.is-bare .hero-visual { margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.frag-stack.is-bare .verdict {
  width: 100%; margin: 0;
  padding: clamp(1.35rem, 2.4vw, 1.9rem) clamp(1.35rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2rem);
}
.frag-stack.is-bare .verdict .v-t { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); margin-top: 0.7rem; }
.frag-stack.is-bare .verdict .v-d { font-size: 0.95rem; margin-top: 0.7rem; }
.frag img { width: 100%; height: auto; }
.shot {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; margin: 0;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px oklch(0.20 0.03 160 / .35), 0 8px 24px -12px oklch(0.20 0.03 160 / .2);
  background: var(--surface);
}
.shot img { width: 100%; height: auto; }
/* anonymize overlays positioned over client identifiers */
.shot .anon {
  position: absolute; background: var(--primary-deep);
  color: var(--on-dark); font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.06em; display: flex; align-items: center; padding: 0 0.5rem;
  border-radius: 5px; white-space: nowrap;
}
.shot .anon.top { top: 1.7%; left: 16.5%; height: 3.4%; }
.shot .anon.foot { bottom: 1.5%; left: 1.2%; width: 15%; height: 6.5%; border-radius: 8px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; line-height: 1.2; }

.hero-chip {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.85rem 1.1rem;
  box-shadow: 0 20px 40px -20px oklch(0.20 0.03 160 / .4);
  display: flex; align-items: center; gap: 0.8rem; max-width: 21rem;
}
.hero-chip .big { font-family: var(--font-mono); font-weight: 500; font-size: 1.35rem; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-chip .lbl { font-size: 0.76rem; color: var(--ink-muted); line-height: 1.3; }
.hero-chip .up { color: var(--upside-ink); font-weight: 600; }

/* ---------- Convergencia de fuentes ----------
   Antes era una fila de cinco palabras sueltas colgando bajo el hero. La frase
   es «se conecta y se cruza»: el dibujo tiene que enseñar el cruce, cinco
   entradas que bajan a una sola salida. Corchete en CSS, sin SVG. */
.sources { border-top: 1px solid var(--line); margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.7rem; }
.merge-k { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); }
.merge-in {
  position: relative; list-style: none; padding: 0;
  margin: 1.25rem 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 0.5rem;
}
.merge-in li {
  position: relative; text-align: center; padding-bottom: 1.6rem;
  font-weight: 600; color: var(--ink); font-size: 0.97rem; letter-spacing: -0.01em;
}
.merge-in li::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 1px; height: 1.6rem; background: var(--line-strong);
}
.merge-in::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: var(--line-strong); }
/* la salida es una pastilla oscura: es el entregable, no una fuente más */
.merge-out {
  position: relative; width: max-content; max-width: 100%;
  margin: 2.3rem auto 0; display: flex; align-items: center;
  padding: 0.62rem 1.2rem; border-radius: 999px;
  background: var(--primary-deep); color: var(--on-dark);
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; line-height: 1.35;
}
.merge-out::before { content: ""; position: absolute; left: 50%; top: -2.3rem; width: 1px; height: 2.3rem; background: var(--line-strong); }
.merge-out .mo-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--upside); margin-right: 0.6rem; }

/* ---------- Puntos ciegos (dark) ---------- */
.blind { background: var(--primary-deep); color: var(--on-dark); }
.blind h2 { color: var(--on-dark); }
.blind .section-head p { color: var(--on-dark-muted); }
.blind-list { list-style: none; margin: 0; padding: 0; }
.blind-list li {
  display: grid; grid-template-columns: 10.5rem 1fr 16rem;
  gap: 0.4rem 2rem; align-items: baseline;
  padding: clamp(1.15rem, 2.1vw, 1.6rem) 0;
  border-top: 1px solid var(--on-dark-line);
}
.blind-list li:first-child { border-top: 0; }
.blind-list .who {
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--upside); text-transform: uppercase; padding-top: 0.3rem;
}
.blind-list .what { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); color: var(--on-dark); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.blind-list .why { font-size: 0.92rem; color: var(--on-dark-muted); line-height: 1.5; }
.blind-list li.you { border-top-color: oklch(0.42 0.030 162); }
.blind-list li.you .who { color: var(--on-dark); }
.blind-close {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem); letter-spacing: -0.02em;
  color: var(--on-dark); line-height: 1.2; max-width: 26ch;
}

/* ---------- Las cinco dimensiones ---------- */
.growth { background: var(--surface); border-block: 1px solid var(--line); }
.eq {
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.6vw, 1.8rem);
  margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem);
}
.eq-line {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(0.9rem, 0.72rem + 0.8vw, 1.24rem);
  line-height: 1.65; color: var(--ink-body); letter-spacing: -0.015em;
  white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 0.15rem;
}
.eq-line + .eq-line { margin-top: 0.75rem; }
.eq-out { color: var(--primary); font-weight: 500; }
.eq .op { color: var(--ink-muted); padding-inline: 0.28em; }
.eq-note {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: 0.95rem; color: var(--ink-muted); line-height: 1.6; max-width: 70ch;
  white-space: normal;
}
.eq-note b { color: var(--ink); font-weight: 600; }

.dim-list { list-style: none; margin: 0; padding: 0; }
.dim-list li {
  display: grid; grid-template-columns: 11.5rem 1fr;
  gap: 0.45rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.15rem, 2.1vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
}
.dim-list li:first-child { border-top: 0; padding-top: 0; }
.dim-list .dim {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); letter-spacing: -0.025em;
  color: var(--ink); line-height: 1.15;
}
.dim-list .ask {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); font-weight: 500;
  color: var(--ink); line-height: 1.4; letter-spacing: -0.01em;
}
.dim-list .lev { grid-column: 2; font-size: 0.95rem; color: var(--ink-muted); line-height: 1.65; max-width: 74ch; }
.dim-list li.enable { border-top-color: var(--line-strong); }
.dim-list li.enable .dim { font-family: var(--font-mono); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); padding-top: 0.3rem; }
.growth-close {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding-top: clamp(1.15rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--line-strong);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
  line-height: 1.5; color: var(--ink-body); max-width: 74ch;
}
.growth-close b { color: var(--ink); font-weight: 600; }

/* ---------- Ejemplo de lo que recibes ---------- */
.ej-bloque { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.ej-bloque.ej-first { padding-top: 0; }
.ej-bloque + .ej-bloque { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--line-strong); }
.ej-bloque h3 {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); letter-spacing: -0.025em; color: var(--ink);
}
.ej-n {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: var(--primary); color: var(--bg);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
}
.ej-lead { margin-top: var(--lead-lg); margin-bottom: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink-body); max-width: 74ch; }
.ej-nota { margin-top: clamp(1.15rem, 2vw, 1.5rem); font-size: 0.92rem; color: var(--ink-muted); max-width: 74ch; line-height: 1.6; }
.ej-nota b { color: var(--ink); }
.tabla-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.pt-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
/* semaforo de margen en las tablas de ejemplo */
.pt-table .alerta { color: var(--leak-ink); }
.pt-table .bien { color: var(--primary); }
.pt-table tbody th { line-height: 1.4; }

/* Tabla de datos (los tres ejemplos). La tabla de niveles conserva el trato
   editorial; ésta tiene que leerse como una hoja de cálculo: fila corta, la
   etiqueta a la izquierda y las cifras alineadas a la derecha para poder
   compararlas de un vistazo. */
.pt-table.data tbody th {
  font-family: var(--font-body); font-weight: 600; font-size: 0.97rem;
  letter-spacing: -0.005em; width: auto; min-width: 12rem;
}
.pt-table.data th, .pt-table.data td { padding-block: 0.78rem; }
.pt-table.data td { font-size: 0.94rem; }
.pt-table.data .num, .pt-table.data thead .num { text-align: right; }
.pt-table.data tbody tr:hover { background: var(--surface); }
/* celda que el cliente rellena: un campo, no unos puntos suspensivos */
.pt-table .vacio { color: var(--ink-muted); }
.pt-table .vacio .ph {
  display: inline-block; width: 3.4rem; height: 0.9em;
  border-bottom: 1px dashed var(--line-strong);
}


/* ---------- La pila · piezas del entregable ---------- */
.stack-group {
  display: grid; grid-template-columns: 17rem 1fr; gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--line-strong);
}
.stack-group:first-of-type { border-top: 0; padding-top: 0; }
.sg-head h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); letter-spacing: -0.025em; color: var(--ink); line-height: 1.15; }
.sg-head p { margin-top: var(--lead-md); font-size: 0.93rem; color: var(--ink-muted); line-height: 1.55; }

.stack-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.5rem, 3.5vw, 2.75rem); }
.stack-list li { padding: 1.05rem 0; border-top: 1px solid var(--line); }
.stack-list li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.stack-list .pc { display: block; font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.stack-list .pd { display: block; margin-top: 0.35rem; font-size: 0.93rem; color: var(--ink-muted); line-height: 1.55; }
.stack-foot {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
  font-size: 1.02rem; color: var(--ink-body); max-width: 74ch;
}
.stack-foot b { color: var(--ink); }

/* ---------- Ledger de evidencia ---------- */
.leak-ledger { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.leak-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center;
  padding: 1.35rem clamp(1.1rem, 2.5vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.leak-row:first-child { border-top: 0; }
.leak-row .what { display: flex; gap: 1rem; align-items: flex-start; }
.leak-row .icn {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--leak-soft); color: var(--leak-ink); font-size: 1rem; margin-top: 2px;
}
.leak-row.pos .icn { background: oklch(0.95 0.06 128); color: var(--upside-ink); }
.leak-row h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.leak-row p { font-size: 0.92rem; color: var(--ink-muted); margin-top: 0.5rem; max-width: 62ch; }
.leak-row .impact { text-align: right; }
.leak-row .impact .val { font-family: var(--font-mono); font-weight: 500; font-size: 1.2rem; color: var(--leak-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leak-row .impact .val.lbl { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.leak-row.pos .impact .val { color: var(--upside-ink); }
.leak-row .impact .cap { font-size: 0.72rem; color: var(--ink-muted); font-family: var(--font-mono); margin-top: 0.15rem; }
.leak-foot { padding: 1.05rem clamp(1.1rem, 2.5vw, 1.9rem); border-top: 1px solid var(--line-strong); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; background: var(--surface-2); }
.leak-foot .t { font-weight: 600; color: var(--ink); }
.leak-foot .n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }

/* ---------- Honestidad del dato ---------- */
.honesty { margin-top: clamp(3rem, 6vw, 4.5rem); }
.honesty-head { max-width: 52rem; }
.honesty-head h3 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); letter-spacing: -0.025em; }
.honesty-head p { margin-top: var(--lead-lg); color: var(--ink-body); max-width: 62ch; }
.honesty-ladder { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; counter-reset: tier; }
.honesty-ladder li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.4rem 2rem; align-items: baseline;
  padding: 1.1rem 0; border-top: 1px solid var(--line); position: relative;
}
.honesty-ladder li::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 8.5rem; height: 2px;
  background: linear-gradient(to right,
    var(--primary) 0 calc(var(--fill) * 25%),
    var(--line) calc(var(--fill) * 25%) 100%);
}
.honesty-ladder li:nth-child(1) { --fill: 4; }
.honesty-ladder li:nth-child(2) { --fill: 3; }
.honesty-ladder li:nth-child(3) { --fill: 2; }
.honesty-ladder li:nth-child(4) { --fill: 1; }
.honesty-ladder .tier { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 500; color: var(--ink); letter-spacing: 0.02em; }
.honesty-ladder .def { color: var(--ink-body); font-size: 0.98rem; max-width: 64ch; }
.honesty-foot { margin-top: 1.6rem; font-size: 0.95rem; color: var(--ink-body); max-width: 66ch; }
.honesty-foot .honest { color: var(--primary); font-size: 0.7rem; margin-right: 0.5rem; vertical-align: 0.15em; }
.honesty-foot b { color: var(--ink); }

/* ---------- Entregables (secuencia numerada) ---------- */
.deliver { background: var(--surface); border-block: 1px solid var(--line); }
.deliver-list { list-style: none; margin: 0; padding: 0; counter-reset: dl; }
.deliver-list > li {
  counter-increment: dl;
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.5rem 1.5rem;
  padding: clamp(1.6rem, 3vw, 2.3rem) 0; border-top: 1px solid var(--line);
}
.deliver-list > li:first-child { border-top: 0; padding-top: 0; }
.deliver-list > li::before {
  content: counter(dl);
  grid-row: span 3;
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500;
  color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.deliver-list h3 { font-size: clamp(1.2rem, 1rem + 1.1vw, 1.65rem); letter-spacing: -0.025em; line-height: 1.15; }
.deliver-list p { margin-top: 0.7rem; color: var(--ink-body); max-width: 64ch; }
.deliver-list p.note { margin-top: 0.9rem; font-size: 0.94rem; color: var(--ink-muted); padding-top: 0.9rem; border-top: 1px dashed var(--line-strong); }
.deliver-list > li.hi::before { color: var(--upside-ink); }
.deliver-list > li.hi h3 { color: var(--primary); }

/* ---------- Motor / herramienta ---------- */
.tool-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.tool-tab {
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em;
  padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink-body); transition: background .2s, color .2s, border-color .2s;
}
.tool-tab:hover { border-color: var(--primary); color: var(--primary); }
.tool-tab:focus-visible { outline: 3px solid var(--upside); outline-offset: 2px; }
.tool-tab[aria-selected="true"] { background: var(--primary); color: oklch(0.98 0.01 160); border-color: var(--primary); }
.tool-stage { position: relative; }
.tool-panel { display: none; }
.tool-panel.active { display: block; animation: fade .5s var(--ease-out); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tool-caption { margin-top: 1rem; display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; }
.tool-caption .k { font-family: var(--font-mono); font-size: 0.78rem; color: var(--primary); }
.tool-caption .v { color: var(--ink-muted); font-size: 0.92rem; max-width: 68ch; }
.tool-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tool-feature { border-top: 2px solid var(--primary); padding-top: 0.9rem; }
.tool-feature h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); letter-spacing: -0.005em; }
.tool-feature p { font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.4rem; }

/* ---------- Alcance ---------- */
.scope { background: var(--surface); border-block: 1px solid var(--line); }
.scope-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.scope-three.fit-two { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.scope-col .mk.no { background: var(--leak-soft); color: var(--leak-ink); }
.fit-close {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
  font-size: 1.02rem; color: var(--ink-body); max-width: 74ch;
}
.fit-close b { color: var(--ink); }
.scope-col h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-strong); }
.scope-col .mk { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.78rem; flex: none; }
.scope-col .mk.ex { background: oklch(0.94 0.055 158); color: var(--primary); }
.scope-col .mk.co { background: var(--surface-2); color: var(--ink-body); border: 1px solid var(--line-strong); }
.scope-col .mk.ap { background: var(--leak-soft); color: var(--leak-ink); }
.scope-col ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.scope-col li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); color: var(--ink-body); font-size: 0.96rem; line-height: 1.55; }
.scope-col .col-note { margin-top: 1.15rem; font-size: 0.88rem; color: var(--ink-muted); line-height: 1.6; }

/* «Para quién es»: filas de criterio. El criterio se escanea en tres segundos;
   la explicación sólo se lee si ese criterio te ha tocado. Sin ese contraste la
   columna es un muro de frases del mismo peso. */
.fit-two .scope-col h3 { font-size: 1.12rem; padding-bottom: 1rem; }
.fit-two .scope-col li { padding: 1.05rem 0; }
.fit-two .scope-col li:first-child { padding-top: 0.9rem; }
.scope-col .c { display: block; font-weight: 600; color: var(--ink); font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.012em; }
.scope-col .n { display: block; margin-top: 0.38rem; font-size: 0.92rem; color: var(--ink-muted); line-height: 1.6; }
.scope-rule { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-strong); font-size: 1.05rem; color: var(--ink-body); max-width: 74ch; }
.scope-rule b { color: var(--ink); }

/* ---------- Esfuerzo del cliente ---------- */
.effort-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.effort-grid h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); }
.effort-lead { margin-top: var(--lead-2xl); max-width: 34ch; }
.effort-list { list-style: none; margin: 0; padding: 0; }
.effort-list li { display: grid; gap: 0.35rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.effort-list li:first-child { border-top: 0; padding-top: 0; }
.effort-list .t { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.effort-list .d { color: var(--ink-body); font-size: 0.96rem; }

/* ---------- Precio ---------- */
.pricing { background: var(--surface); border-block: 1px solid var(--line); }
.price-entry {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.pe-main h3 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); letter-spacing: -0.025em; }
.pe-main p { margin-top: var(--lead-lg); color: var(--ink-body); max-width: 56ch; }
.pe-main .btn { margin-top: 1.4rem; }
.pe-price { text-align: right; }
.pe-price .amount { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.pe-price .terms { display: block; margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); }

.method-steps + .price-entry { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.price-tiers { margin-top: clamp(2rem, 4vw, 3rem); }
.pt-intro h3 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem); letter-spacing: -0.025em; }
.pt-intro p { margin-top: var(--lead-lg); color: var(--ink-body); }
.pt-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pt-table th, .pt-table td { text-align: left; padding: 1rem clamp(0.9rem, 2vw, 1.35rem); border-top: 1px solid var(--line); line-height: 1.5; vertical-align: top; }
.pt-table thead th {
  border-top: 0; background: var(--surface-2);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500;
}
.pt-table tbody th { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; width: 22%; }
.pt-table tbody td { color: var(--ink-body); font-size: 0.98rem; }
.pt-table .amt { font-family: var(--font-mono); font-weight: 500; font-size: 1.3rem; color: var(--primary); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pt-table .amt span { font-size: 0.8rem; color: var(--ink-muted); }

.price-rule { margin-top: clamp(2rem, 4vw, 2.8rem); }
.rule-main { font-size: 1.08rem; color: var(--ink-body); max-width: 72ch; }
.rule-main b { color: var(--ink); }
.rule-terms { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.1rem; max-width: 72ch; }
.rule-terms li { padding: 0.85rem 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-muted); }
.rule-terms li b { color: var(--ink); }

/* ---------- Preguntas / objeciones ---------- */
.qa { margin: 0; }
.qa-item { padding: clamp(1.4rem, 2.6vw, 1.95rem) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem clamp(2rem, 5vw, 4rem); align-items: start; }
.qa-item:first-child { border-top: 0; padding-top: 0; }
.qa dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 0.95rem + 0.85vw, 1.45rem); color: var(--ink); letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.qa dd { margin: 0; color: var(--ink-body); max-width: 62ch; }
.qa dd b { color: var(--ink); }

/* ---------- Anti-cliente ---------- */
.noclient-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.noclient-grid h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); }
.noclient-lead { margin-top: var(--lead-xl); max-width: 36ch; }
.noclient-list { list-style: none; margin: 0; padding: 0; counter-reset: nc; }
.noclient-list li {
  counter-increment: nc; position: relative;
  padding: 1.05rem 0 1.05rem 2.6rem; border-top: 1px solid var(--line);
  color: var(--ink-body); font-size: 0.99rem;
}
.noclient-list li:first-child { border-top: 0; padding-top: 0; }
.noclient-list li::before {
  content: "×"; position: absolute; left: 0; top: 1.05rem;
  width: 1.6rem; height: 1.6rem; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--leak-soft); color: var(--leak-ink);
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1;
}
.noclient-list li:first-child::before { top: 0; }

/* ---------- Garantía (dark) ---------- */
.warranty { background: var(--primary-deep); color: var(--on-dark); }
.warranty h2, .warranty h3 { color: var(--on-dark); }
.warranty-main { max-width: 50rem; }
.warranty-main h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); }
.w-lead { margin-top: var(--lead-2xl); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: var(--on-dark); line-height: 1.5; max-width: 60ch; }
.w-lead b { color: var(--upside); font-weight: 600; }
.warranty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.w-block h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--on-dark-line); }
.w-block p { margin-top: 1rem; color: var(--on-dark-muted); line-height: 1.65; }
.w-block p b { color: var(--on-dark); font-weight: 600; }
.w-block .w-note { font-size: 0.9rem; color: oklch(0.68 0.018 160); }
.anti-warranty { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2.25rem); border-top: 1px solid var(--on-dark-line); max-width: 66ch; }
.anti-warranty h3 { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); font-weight: 500; }
.anti-warranty p { margin-top: 0.9rem; color: var(--on-dark-muted); line-height: 1.65; }
.anti-warranty p b { color: var(--on-dark); font-weight: 600; }
/* la promesa se lee primero; el umbral exacto va debajo, no en su lugar */
.anti-warranty .w-claim {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem); line-height: 1.3;
  color: var(--on-dark); margin-top: 1rem;
}

/* ---------- Método / proceso ---------- */
.method-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); counter-reset: step; }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--primary); font-weight: 500;
}
.step::after { content: ""; position: absolute; top: 0.55rem; left: 2.6rem; right: 0; height: 1px; background: var(--line); }
.step:last-child::after { display: none; }
.step h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.01em; }
.step p { font-size: 0.93rem; color: var(--ink-body); margin-top: var(--lead-md); }

/* ---------- Radiografía · hero ---------- */
.rx-hero { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.rx-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 1.2rem; }
.rx-hero h1 { font-size: clamp(2.15rem, 1.3rem + 3.6vw, 3.7rem); letter-spacing: -0.038em; font-weight: 800; max-width: 16ch; }
.rx-hero h1 em {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: 1.06em; letter-spacing: -0.005em;
  position: relative; white-space: nowrap; padding-inline: 0.03em;
}
.rx-hero h1 em::after {
  content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.06em; height: 0.24em;
  background: var(--upside); z-index: -1; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .85s var(--ease-out) .6s;
}
.rx-hero h1.in em::after { transform: scaleX(1); }
.rx-lead { margin-top: var(--lead-xl); max-width: 48ch; }
.rx-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.1rem); }
.rx-amount { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.4rem); color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.rx-terms { display: block; margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); }
.rx-facts { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.rx-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.rx-facts .k { color: var(--ink-muted); }
.rx-facts .v { color: var(--ink); font-weight: 600; text-align: right; }
.rx-fine { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-muted); }

/* ---------- Radiografía · dimensiones ---------- */
.dims { background: var(--surface); border-block: 1px solid var(--line); }
.dims-list { list-style: none; margin: 0; padding: 0; counter-reset: dim; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 2.75rem); }
.dims-list li { counter-increment: dim; padding-top: 2.4rem; position: relative; border-top: 1px solid var(--line-strong); }
.dims-list li::before {
  content: counter(dim, decimal-leading-zero); position: absolute; top: 0.85rem; left: 0;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--primary); font-weight: 500;
}
.dims-list li.meta::before { content: "+"; color: var(--upside-ink); }
.dims-list h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.dims-list p { margin-top: 0.55rem; font-size: 0.94rem; color: var(--ink-body); }

/* ---------- Radiografía · después ---------- */
.rx-after { max-width: 62rem; }
.rx-after h2 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); }
.rx-after p { margin-top: var(--lead-lg); font-size: 1.08rem; color: var(--ink-body); max-width: 66ch; }
.rx-after p b { color: var(--ink); }
.rx-after-note { color: var(--ink-muted) !important; font-size: 1rem !important; }
.rx-after .btn { margin-top: 0.6rem; }

/* ---------- CTA final ---------- */
.cta { background: var(--primary-deep-2); color: var(--on-dark); text-align: center; }
.cta h2 { color: var(--on-dark); font-size: clamp(2rem, 1.3rem + 3.5vw, 3.6rem); max-width: 19ch; margin-inline: auto; }
.cta h2 .up { color: var(--upside); }
.cta p { color: var(--on-dark-muted); max-width: 56ch; margin: var(--lead-2xl) auto 0; font-size: 1.08rem; }
.cta-actions { margin-top: 2.2rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cta-assure { margin-top: 1.6rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--on-dark-muted); letter-spacing: 0.03em; }

/* ---------- Footer ---------- */
.footer { background: var(--primary-deep-2); color: var(--on-dark-muted); border-top: 1px solid var(--on-dark-line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.footer .logo-word { color: var(--on-dark); }
.footer .logo-word b { color: var(--upside); }
.footer .logo-sub { color: var(--upside); }
.footer-links { display: flex; gap: 2.25rem; flex-wrap: wrap; }
.footer-links a { color: var(--on-dark-muted); font-size: 0.92rem; transition: color .2s; }
.footer-links a:hover { color: var(--upside); }
/* la acción principal no es una sección más del pie */
.footer-links .f-action { color: var(--upside); font-weight: 600; }
.footer-links .f-action .arrow { display: inline-block; transition: transform .2s var(--ease-out); }
.footer-links .f-action:hover .arrow { transform: translateX(3px); }
.footer-bottom { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--on-dark-line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; }
/* pie reducido (paginas sin navegacion de pie) */
.footer-bottom.footer-bare { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Página de encaje (formulario) ---------- */
.diag { padding-top: clamp(2.5rem, 5vw, 4rem); }
.diag-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.diag h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.2rem); letter-spacing: -0.03em; max-width: 16ch; }
.diag .lead { margin-top: var(--lead-xl); max-width: 50ch; }
.diag-side { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); }
.diag-side h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; color: var(--ink); }

.call-agenda { list-style: none; margin: 1.3rem 0 0; padding: 0; }
.call-agenda li { display: grid; gap: 0.25rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.call-agenda li:first-child { border-top: 0; padding-top: 0; }
.call-agenda .t { font-family: var(--font-mono); font-size: 0.8rem; color: var(--primary); letter-spacing: 0.02em; }
.call-agenda .d { font-size: 0.92rem; color: var(--ink-body); }

.call-not { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-strong); }
.call-not h4 { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }
.call-not ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.call-not li { font-size: 0.9rem; color: var(--ink-body); padding-left: 1.1rem; position: relative; }
.call-not li::before { content: "—"; position: absolute; left: 0; color: var(--ink-muted); }

.diag-assure { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: 0.6rem; }
.diag-assure .a { display: flex; gap: 0.6rem; align-items: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); }
.diag-assure .a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--upside); flex: none; }

/* form */
.form { display: grid; gap: 1.15rem; margin-top: clamp(2rem, 4vw, 2.8rem); }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label, .field legend { font-size: 0.86rem; font-weight: 600; color: var(--ink); padding: 0; }
.field label .opt { font-weight: 400; color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.72rem; }
.field .hint { font-size: 0.8rem; color: var(--ink-muted); }
.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset legend { line-height: 1.4; margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.98rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px oklch(0.40 0.085 158 / .18);
}
.field input:user-invalid, .field select:user-invalid { border-color: var(--leak); }
.field .err { font-size: 0.78rem; color: var(--leak-ink); display: none; font-weight: 500; }

.radio-row { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.radio { display: flex; align-items: center; gap: 0.65rem; font-size: 0.95rem; font-weight: 400; color: var(--ink-body); cursor: pointer; padding: 0.7rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .2s, background .2s; }
.radio:hover { border-color: var(--primary); }
.radio input { width: auto; margin: 0; accent-color: var(--primary); flex: none; }
.radio:has(input:checked) { border-color: var(--primary); background: oklch(0.975 0.02 158); color: var(--ink); font-weight: 500; }
.radio:has(input:focus-visible) { outline: 3px solid var(--upside); outline-offset: 2px; }

/* casillas de canales: rejilla fluida, mismo trato visual que los radios */
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.check-grid .radio { padding: 0.6rem 0.8rem; font-size: 0.92rem; }
.form-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.form-legal { font-size: 0.78rem; color: var(--ink-muted); max-width: 42ch; }
.form-success {
  display: none; border: 1px solid var(--primary); background: oklch(0.97 0.03 158);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); text-align: center;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.form-success.show { display: block; animation: fade .5s var(--ease-out); }
.form-success .big { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; margin: 0 auto 1rem; font-size: 1.5rem; }
.form-success h3 { color: var(--ink); font-size: 1.4rem; }
.form-success p { color: var(--ink-body); margin-top: 0.6rem; max-width: 46ch; margin-inline: auto; }
.form-success .success-more { margin-top: 1.4rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-muted); margin-bottom: 1.2rem; }
.back-link:hover { color: var(--primary); }
.back-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }

/* ---------- 404 ---------- */
.nf { padding-top: clamp(3rem, 7vw, 6rem); }
.nf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.nf-code { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.16em; color: var(--ink-muted); margin-bottom: 1.1rem; }
.nf h1 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.1rem); letter-spacing: -0.033em; max-width: 17ch; }
.nf-lead { margin-top: 1.3rem; max-width: 40ch; }
.nf-list { list-style: none; margin: 0; padding: 0; }
.nf-list li { border-top: 1px solid var(--line); }
.nf-list li:first-child { border-top: 0; }
.nf-list a { display: grid; gap: 0.35rem; padding: 1.25rem 0; transition: transform .3s var(--ease-out); }
.nf-list a:hover { transform: translateX(0.6rem); }
.nf-list a:focus-visible { outline: 3px solid var(--upside); outline-offset: 3px; border-radius: 4px; }
.nf-list .t { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.02em; }
.nf-list a:hover .t { color: var(--primary); }
.nf-list .d { font-size: 0.95rem; color: var(--ink-body); max-width: 52ch; }
@media (max-width: 860px) { .nf-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nf-list a, .nf-list a:hover { transition: none; transform: none; } }

/* ---------- Diferencia · lo disperso frente a lo decidido ----------
   Dos columnas deliberadamente desiguales: la izquierda enumera lo que el
   cliente ya tiene (fragmentos sueltos), la derecha lo que queda al cerrar un
   ciclo (una cadena). El desequilibrio es el argumento, no la simetria. */
.ba {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line-strong);
}
.ba-col { padding-top: 1rem; border-top: 1px solid var(--line); }
.ba-then { border-top-color: var(--primary); }
.ba-k {
  display: block; font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.ba-then .ba-k { color: var(--primary); }
.ba-col ul { list-style: none; padding-left: 0; margin-top: 1.15rem; display: grid; gap: 0.8rem; }
/* marcador fuera del flujo: con grid, un <b> dentro del li contaria como celda
   propia y el texto restante caeria en la columna del marcador */
.ba-col li {
  position: relative; padding-left: 1.6rem;
  font-size: 0.98rem; line-height: 1.55; color: var(--ink-body);
}
.ba-col li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); color: var(--line-strong);
}
.ba-then li::before { content: "→"; color: var(--upside-ink); }
.ba-then li b { color: var(--ink); font-weight: 600; }
.diff-ask {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.85rem); line-height: 1.25;
  color: var(--ink); max-width: 30ch;
}
.diff-ask .up { color: var(--primary); }
.nots-gap { margin-top: clamp(2rem, 4vw, 2.75rem); }
/* parrafo de peso que abre una seccion, sin la regla superior de .diff-close */
.lede-para { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-body); max-width: 74ch; }
.lede-para b { color: var(--ink); }
/* subcabecera dentro de una seccion ya abierta */
.sub-head { margin-top: clamp(3rem, 6vw, 4.5rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.sub-head h3 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); letter-spacing: -0.025em; }
.diff-close {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
  font-size: 1.05rem; line-height: 1.6; color: var(--ink-body); max-width: 74ch;
}
.diff-close b { color: var(--ink); }

/* ---------- El circuito de trabajo ---------- */
.flow-list { list-style: none; margin: 0; padding: 0; counter-reset: fl; }
.flow-list li {
  counter-increment: fl;
  display: grid; grid-template-columns: 2.5rem 11rem 1fr;
  gap: 0.35rem clamp(1.25rem, 3vw, 2.25rem); align-items: baseline;
  padding: clamp(1rem, 2vw, 1.4rem) 0; border-top: 1px solid var(--line);
}
.flow-list li:first-child { border-top: 0; padding-top: 0; }
.flow-list li::before {
  content: counter(fl, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  color: var(--primary); font-variant-numeric: tabular-nums;
}
.flow-list .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); letter-spacing: -0.025em; color: var(--ink); line-height: 1.15; }
.flow-list .d { color: var(--ink-body); font-size: 0.98rem; line-height: 1.6; max-width: 62ch; }

/* el circuito tambien vive dentro de la seccion oscura del problema */
.blind .flow-list li { border-top-color: var(--on-dark-line); }
.blind .flow-list li::before { color: var(--upside); }
.blind .flow-list .v { color: var(--on-dark); }
.blind .flow-list .d { color: var(--on-dark-muted); }
.blind .sub-head h3 { color: var(--on-dark); }
.blind .sub-head p { color: var(--on-dark-muted); margin-top: var(--lead-md); font-size: 0.98rem; line-height: 1.6; max-width: 62ch; }

/* etiqueta sobre la captura del hero: deja claro que es un ejemplo */
.frag-label {
  display: block; margin-bottom: 0.7rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-muted);
  max-width: 591px; margin-inline: auto;
}

/* ---------- Las tres fases del producto ----------
   Las duraciones publicadas son información, no adorno: dibujadas a escala se
   ve de un vistazo que el diagnóstico es corto y que lo largo viene después y
   sólo si se abre la puerta. Los rombos entre fases son esas puertas. */
.phase-rail { list-style: none; margin: 0; padding: 0; }
.phase {
  display: grid; grid-template-columns: 17rem 1fr; gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--line-strong);
}
.phase-rail > .phase:first-child { border-top: 0; padding-top: 0; }
.ph-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1.05rem + 1.15vw, 1.9rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.ph-meta { display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--primary); }
.ph-span {
  display: block; position: relative; overflow: hidden;
  margin-top: 1.15rem; max-width: 12.5rem; height: 7px;
  border-radius: 4px; background: var(--line);
}
.ph-span::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--w) * 100%); min-width: 7px; border-radius: 4px;
  background: var(--primary);
  transform: scaleX(1); transform-origin: left;
  transition: transform 1s var(--ease-out) .1s;
}
.js .ph-span::after { transform: scaleX(0); }
.js .phase-rail.in .ph-span::after { transform: scaleX(1); }
.ph-dur { display: block; margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-muted); letter-spacing: 0.02em; }
.ph-gate {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.1rem 0; border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-muted); line-height: 1.55;
}
.ph-gate::before {
  content: ""; flex: none; width: 9px; height: 9px;
  background: var(--bg); border: 2px solid var(--upside); transform: rotate(45deg);
}
.ph-body > p { color: var(--ink-body); line-height: 1.6; max-width: 66ch; }
.ph-tags { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ph-tags li {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.01em;
  color: var(--ink-body); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.33rem 0.75rem;
}
.ph-note { margin-top: 1.25rem; font-size: 0.92rem; color: var(--ink-muted); line-height: 1.6; max-width: 66ch; }
.ph-note b { color: var(--ink); }
.phase-terms {
  margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
  font-size: 1.02rem; color: var(--ink-body); line-height: 1.6; max-width: 74ch;
}
.phase-terms b { color: var(--ink); }

/* ---------- Capacidades de intervención ---------- */
.caps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); }
.caps-list li { padding: 1rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.3rem 1.5rem; align-items: baseline; }
.caps-list li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.caps-list .k { font-weight: 600; color: var(--ink); font-size: 1rem; letter-spacing: -0.01em; }
.caps-list .v { font-size: 0.93rem; color: var(--ink-muted); line-height: 1.55; }

/* ---------- El expediente · de un dato a una decisión ----------
   Es el pico de la página: la única pieza donde el argumento entero cabe en una
   sola imagen. Va sobre fondo oscuro para separarla del resto y la evidencia se
   dibuja (arco y cifras) antes de contarse en texto. */
.thesis {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--primary-deep); color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.6vw, 3.1rem);
  box-shadow: 0 44px 84px -46px oklch(0.185 0.032 160 / .55), 0 8px 24px -14px oklch(0.185 0.032 160 / .3);
}
.thesis::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-dark) 1px, transparent 1px);
  background-size: var(--grid-step) var(--grid-step);
  -webkit-mask-image: radial-gradient(110% 80% at 82% 4%, #000, transparent 70%);
  mask-image: radial-gradient(110% 80% at 82% 4%, #000, transparent 70%);
}
.thesis > * { position: relative; z-index: 1; }

.thesis-restr { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-muted); }
.thesis h3 {
  margin-top: 0.9rem; color: var(--on-dark); max-width: 21ch;
  font-size: clamp(1.4rem, 0.95rem + 1.9vw, 2.35rem); letter-spacing: -0.032em; line-height: 1.12;
}
.th-figs { max-width: 46rem; }

/* evidencia dibujada */
.th-evid {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center;
  margin-top: clamp(1.9rem, 3.6vw, 2.75rem);
  padding: clamp(1.4rem, 2.8vw, 2rem) 0;
  border-block: 1px solid var(--on-dark-line);
}
.gauge { position: relative; margin: 0; width: clamp(8.5rem, 13vw, 11.5rem); aspect-ratio: 1; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.g-track { fill: none; stroke: var(--on-dark-line); stroke-width: 8; }
.g-arc {
  fill: none; stroke: var(--leak-on-dark); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: var(--p) 100;
}
.js .g-arc { stroke-dasharray: 0 100; transition: stroke-dasharray 1.5s var(--ease-out) .25s; }
.js .reveal.in .g-arc { stroke-dasharray: var(--p) 100; }
.g-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 500; color: var(--on-dark);
  font-size: clamp(1.4rem, 2.4vw, 1.95rem); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.g-val b { font-weight: 500; }

.th-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--on-dark-line); }
.th-fig:first-child { border-top: 0; padding-top: 0; }
.th-fig .n {
  font-family: var(--font-mono); font-weight: 500; color: var(--leak-on-dark);
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.6rem); letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.th-fig .n.small { font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem); color: var(--on-dark); }
.th-fig .l { color: var(--on-dark-muted); font-size: 0.95rem; line-height: 1.5; }
.th-cap { margin-top: 1rem; padding-top: 0.95rem; border-top: 1px solid var(--on-dark-line); font-size: 0.88rem; line-height: 1.6; color: var(--on-dark-muted); max-width: 54ch; }

/* la cadena: el orden es la información */
.th-chain { list-style: none; margin: clamp(1.75rem, 3.4vw, 2.5rem) 0 0; padding: 0; }
.th-chain li {
  position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.35rem clamp(1.25rem, 3vw, 2rem); align-items: baseline;
  padding: 0.95rem 0 0.95rem 2.2rem;
}
.th-chain li::before {
  content: ""; position: absolute; left: 0; top: 1.3rem; z-index: 1;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary-deep); border: 2px solid var(--on-dark-line);
}
.th-chain li::after {
  content: ""; position: absolute; left: 6px; top: 1.3rem; bottom: -0.95rem; width: 1px;
  background: var(--on-dark-line);
}
.th-chain li:last-child::after { display: none; }
.th-chain li.out::before { background: var(--upside); border-color: var(--upside); box-shadow: 0 0 0 5px oklch(0.86 0.19 128 / .16); }
.th-chain .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-dark-muted); }
.th-chain .v { color: var(--on-dark-muted); font-size: 0.97rem; line-height: 1.6; max-width: 62ch; }
.th-chain .v b { color: var(--on-dark); font-weight: 600; }
.th-chain li.out .v { color: var(--on-dark); }

/* la bifurcación: lo que se descarta es tan producto como lo que se hace */
.th-chain .br { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.55rem 0; }
.th-chain .br + .br { border-top: 1px solid var(--on-dark-line); margin-top: 0.35rem; padding-top: 0.75rem; }
.th-chain .br.yes { color: var(--on-dark); font-weight: 500; }
.th-chain .mk { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.74rem; flex: none; line-height: 1; }
.th-chain .mk.ex { background: oklch(0.86 0.19 128 / .16); color: var(--upside); }
.th-chain .mk.no { background: oklch(0.72 0.16 38 / .16); color: var(--leak-on-dark); }

.thesis-foot { margin-top: clamp(1.5rem, 3vw, 2rem); padding-top: 1.3rem; border-top: 1px solid var(--on-dark-line); font-size: 0.88rem; color: var(--on-dark-muted); line-height: 1.65; }
.thesis-foot b { color: var(--on-dark); font-weight: 600; }
.thesis-foot a { color: var(--upside); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.thesis-foot a:hover { text-decoration-thickness: 2px; }
.thesis-foot a:focus-visible { outline: 2px solid var(--upside); outline-offset: 3px; border-radius: 3px; }

/* ---------- Caso: de dato a decisión ---------- */
.case-beats { list-style: none; margin: 0; padding: 0; counter-reset: cb; }
.case-beats li {
  display: grid; grid-template-columns: 12rem 1fr; gap: 0.4rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline; padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
}
.case-beats li:first-child { border-top: 0; padding-top: 0; }
.case-beats .b { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.case-beats li:last-child .b { color: var(--primary); }
.case-beats .t { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); color: var(--ink-body); line-height: 1.6; max-width: 66ch; }
.case-beats li:last-child .t { color: var(--ink); font-weight: 500; }
.case-close {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
  font-size: 1.02rem; color: var(--ink-body); line-height: 1.6; max-width: 74ch;
}
.case-close b { color: var(--ink); }

/* ---------- Lo que no somos (oscuro) ---------- */
.nots { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; }
.nots li { padding: clamp(1.15rem, 2.2vw, 1.6rem) 0; border-top: 1px solid var(--on-dark-line); display: grid; grid-template-columns: 20rem 1fr; gap: 0.4rem clamp(1.5rem, 4vw, 3rem); align-items: baseline; }
.nots li:first-child { border-top: 0; padding-top: 0; }
.nots .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); letter-spacing: -0.025em; color: var(--on-dark); line-height: 1.2; }
.nots .d { color: var(--on-dark-muted); line-height: 1.65; font-size: 0.98rem; max-width: 60ch; }

/* ---------- Las dos reglas de la casa ----------
   Eran dos líneas de lista perdidas entre dos párrafos. Son negaciones, y una
   negación con peso de titular se lee; en cuerpo de lista, no. */
.two-rules {
  list-style: none; margin: clamp(2rem, 4vw, 2.9rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3.5vw, 3rem);
}
.two-rules li {
  position: relative; padding-top: 3rem; border-top: 1px solid var(--line-strong);
  font-family: var(--font-display); font-weight: 700; line-height: 1.2;
  font-size: clamp(1.1rem, 0.95rem + 0.75vw, 1.45rem); letter-spacing: -0.028em;
  color: var(--ink); text-wrap: balance;
}
.two-rules li::before {
  content: "×"; position: absolute; top: 1.2rem; left: 0;
  width: 1.55rem; height: 1.55rem; border-radius: 7px; display: grid; place-items: center;
  background: var(--leak-soft); color: var(--leak-ink);
  font-family: var(--font-mono); font-size: 0.88rem; line-height: 1;
}

/* ---------- El perímetro de las palancas ----------
   El argumento entero de la sección cabe en un dibujo: dentro del recuadro de
   puntos está lo que sabe hacer una agencia; fuera, todo lo demás que decide si
   el negocio gana dinero. El desequilibrio entre las dos zonas ES el mensaje,
   así que no se igualan los anchos ni se les da el mismo tratamiento. */
.levers {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 2.9rem);
}
.lz-k {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.5;
}
.lev-zone ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lev-mkt {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: clamp(1rem, 2.2vw, 1.4rem); background: var(--bg); max-width: 15rem;
}
.lev-mkt li {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.75rem; background: var(--surface);
}
.lev-biz { padding-top: clamp(1rem, 2.2vw, 1.4rem); }
.lev-biz .lz-k { color: var(--primary); }
.lev-biz li {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 1rem; color: var(--ink); letter-spacing: -0.012em;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.48rem 0.95rem; background: var(--bg);
}
.lev-biz li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--upside); }

/* ---------- Contenido de cada fase ---------- */
.ph-k { display: block; margin-top: clamp(1.4rem, 2.6vw, 1.85rem); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); }
.ph-checks {
  list-style: none; margin: 0.85rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.5rem, 3.5vw, 2.5rem);
}
.ph-checks li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: start;
  padding: 0.7rem 0; border-top: 1px solid var(--line);
  font-size: 0.97rem; font-weight: 500; color: var(--ink); line-height: 1.4; letter-spacing: -0.008em;
}
.ph-checks li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.ph-checks li::before {
  content: "✓"; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: oklch(0.94 0.055 158); color: var(--primary);
  font-family: var(--font-mono); font-size: 0.7rem; line-height: 1; margin-top: 1px;
}
.ph-tags { margin-top: 0.85rem; }

/* ---------- Capacidades en reposo ----------
   El texto dice que se activan sólo cuando los datos lo demuestran. El
   interruptor apagado lo hace visible: seis palancas y ninguna encendida
   todavía. La leyenda explica el estado, para que el marcador signifique algo
   y no sea un adorno. */
.caps-legend {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: clamp(1.75rem, 3.2vw, 2.4rem);
  font-size: 0.92rem; color: var(--ink-muted); line-height: 1.55;
}
.cap-state {
  flex: none; position: relative; width: 30px; height: 17px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2);
}
.cap-state::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink-muted);
}
.caps-panel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); }
.caps-panel > li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.95rem; align-items: start;
  padding: 1.3rem 0; border-top: 1px solid var(--line);
}
.caps-panel > li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.caps-panel > li .cap-state { margin-top: 0.35rem; }
.caps-panel .k {
  font-family: var(--font-display); font-weight: 700; line-height: 1.1;
  font-size: clamp(1.15rem, 1rem + 0.65vw, 1.45rem); letter-spacing: -0.028em; color: var(--ink);
}
.cap-tools { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cap-tools li {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.24rem 0.6rem; background: var(--bg);
}

/* ---------- El estándar del veredicto ----------
   Numeración real: el orden es la información (qué pasa → por qué importa →
   qué lo provoca → qué se hace → cómo se comprueba). Colocación explícita en
   la rejilla para que un <b> dentro de los spans no invente celdas nuevas. */
.std { list-style: none; counter-reset: std; padding-left: 0; margin-top: clamp(2rem, 4vw, 2.75rem); }
.std li {
  counter-increment: std;
  display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; row-gap: 0.3rem;
  padding: clamp(1rem, 2vw, 1.35rem) 0; border-top: 1px solid var(--line);
}
.std li:last-child { border-bottom: 1px solid var(--line); }
.std li::before {
  content: counter(std, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500;
  color: var(--primary); line-height: 1.5;
}
.std .s-k {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.022em;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem); line-height: 1.25; color: var(--ink);
}
.std .s-d { grid-column: 2; grid-row: 2; color: var(--ink-body); line-height: 1.6; max-width: 62ch; }
.std-close b { color: var(--ink); }

/* ---------- El cierre de cada sección ----------
   Siete secciones terminaban en un párrafo largo bajo un filete a todo el
   ancho: leído seguido, es el motor de la monotonía. Pasan a ser remates
   deliberados —regla lima corta, medida más estrecha, cuerpo mayor— para que se
   lean como el veredicto de la sección y no como más prosa. */
.diff-close, .phase-terms, .growth-close, .scope-rule, .case-close, .fit-close, .stack-foot, .std-close {
  position: relative; border-top: 0;
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem); padding-top: 2.15rem;
  font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.32rem); line-height: 1.5;
  color: var(--ink-body); max-width: 58ch; text-wrap: pretty;
}
.diff-close::before, .phase-terms::before, .growth-close::before, .scope-rule::before,
.case-close::before, .fit-close::before, .stack-foot::before, .std-close::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3.25rem; height: 3px; border-radius: 2px; background: var(--upside);
}

/* ---------- Atmósfera de las secciones oscuras ----------
   El negro plano lee como plantilla. La misma retícula de papel del hero, ahora
   en lima al 5 %, y una luz alta a la derecha dan profundidad sin recurrir a
   cristales ni a degradados de moda. */
.blind, .warranty, .cta { position: relative; isolation: isolate; overflow: hidden; }
.blind > .wrap, .warranty > .wrap, .cta > .wrap { position: relative; z-index: 1; }
.blind::before, .warranty::before, .cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-dark) 1px, transparent 1px);
  background-size: var(--grid-step) var(--grid-step);
  -webkit-mask-image: radial-gradient(120% 85% at 80% 0%, #000, transparent 72%);
  mask-image: radial-gradient(120% 85% at 80% 0%, #000, transparent 72%);
}
.blind::after, .warranty::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -26%; right: -10%; width: 56%; aspect-ratio: 1;
  background: radial-gradient(closest-side, oklch(0.86 0.19 128 / .10), transparent 70%);
}
.cta::before { -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 72%); }
.cta::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -34%; left: 50%; translate: -50% 0; width: min(52rem, 88%); aspect-ratio: 1;
  background: radial-gradient(closest-side, oklch(0.86 0.19 128 / .13), transparent 68%);
}

/* ---------- El cruce de las seis dimensiones ----------
   El texto afirma que la restricción vive en el cruce, no en una dimensión. El
   diagrama enseña los quince cruces posibles y enciende el que resolvió el
   ejemplo de la sección anterior: es el mismo caso, dos secciones después. */
.dim-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cross { margin: 0; position: sticky; top: 96px; }
.cross-svg { width: 100%; height: auto; display: block; overflow: visible; }
.c-web line { stroke: var(--line-strong); stroke-width: 1; }
.c-hit-glow { stroke: var(--upside); stroke-width: 10; stroke-linecap: round; opacity: .5; }
.c-hit { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; }
.js .c-hit-glow, .js .c-hit { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s var(--ease-out) .3s; }
.js .dim-grid.in .c-hit-glow, .js .dim-grid.in .c-hit { stroke-dashoffset: 0; }
.c-node circle { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.c-node circle.on { fill: var(--primary); stroke: var(--primary); }
.c-lbl text { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-muted); letter-spacing: 0.03em; }
.c-lbl text.on { fill: var(--ink); font-weight: 500; }
.cross figcaption { margin-top: 1.4rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-muted); max-width: 42ch; }
.cross figcaption b { color: var(--ink); font-weight: 600; }
.dim-grid .dim-list li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 1.05rem 0; }
.dim-grid .dim-list .lev { grid-column: 1; max-width: 56ch; }

/* ---------- Reveal ----------
   El estado oculto vive tras `.js`, que sólo se añade si el script del <head>
   corre. Sin JS (o si falla), el contenido se ve: en una página de venta no se
   puede esconder nada detrás de una clase. */
.reveal { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1 em::after, .rx-hero h1 em::after { transition: none; transform: scaleX(1); }
  .tool-panel.active { animation: none; }
  .form-success.show { animation: none; }
  .btn, .btn .arrow { transition: none; }
  /* las piezas de datos se entregan dibujadas, sin trazo animado */
  .js .ph-span::after { transform: scaleX(1); transition: none; }
  .js .g-arc { stroke-dasharray: var(--p) 100; transition: none; }
  .js .c-hit, .js .c-hit-glow { stroke-dashoffset: 0; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .blind-list li { grid-template-columns: 9rem 1fr; }
  .blind-list .why { grid-column: 2; }
  .dims-list { grid-template-columns: repeat(2, 1fr); }
  .dim-list li { grid-template-columns: 9.5rem 1fr; }
  .caps-list li { grid-template-columns: 8rem 1fr; }
  .nots li { grid-template-columns: 15rem 1fr; }
  .dim-grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .cross { position: static; max-width: 30rem; }
  .cross figcaption { max-width: 60ch; }
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: 2; margin-top: 1rem; }
  /* en una sola columna no hay nada a lo que alinearse: el desplazamiento sobra */
  .hero-grid.is-bare .hero-visual { margin-top: 1rem; }
  .hero-chip { left: 0; bottom: -14px; }
  .rx-hero-grid { grid-template-columns: 1fr; }
  .method-steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .scope-three { grid-template-columns: 1fr; }
  .effort-grid, .noclient-grid { grid-template-columns: 1fr; }
  .qa-item { grid-template-columns: 1fr; }
  .price-entry { grid-template-columns: 1fr; }
  .pe-price { text-align: left; }
  .ba { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 1.75rem; }
  .caps-list { grid-template-columns: 1fr; }
  .caps-list li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1rem; }
  .caps-panel { grid-template-columns: 1fr; }
  .caps-panel > li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1.3rem; }
  .phase { grid-template-columns: 1fr; gap: 1rem; }
  .levers { grid-template-columns: 1fr; }
  .lev-mkt { max-width: none; }
  .lev-biz { padding-top: 0; }
  .ph-span { max-width: 9rem; }
  /* apilado, el veredicto deja de solaparse y pasa a ser la pieza siguiente */
  .verdict { width: auto; margin: 1.1rem 0 0; }
  .th-evid { grid-template-columns: 1fr; gap: 1.75rem; justify-items: start; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn-primary { white-space: nowrap; padding: 0.62rem 0.95rem; font-size: 0.9rem; }
  .nav-cta .btn-primary .arrow { display: none; }
  .nav[data-open="true"] .nav-links {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0.25rem;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 1rem var(--gutter);
  }
  .nav[data-open="true"] .nav-links a { padding: 0.6rem 0; width: 100%; }
  .blind-list li { grid-template-columns: 1fr; gap: 0.3rem; }
  .blind-list .why { grid-column: 1; }
  .dim-list li { grid-template-columns: 1fr; gap: 0.35rem; }
  .dim-list .lev { grid-column: 1; }
  .leak-row { grid-template-columns: 1fr; }
  .leak-row .impact { text-align: left; }
  .honesty-ladder li { grid-template-columns: 1fr; gap: 0.3rem; padding-top: 1.3rem; }
  .honesty-ladder li::after { width: 5rem; }
  .deliver-list > li { grid-template-columns: 2.5rem 1fr; gap: 0.4rem 1rem; }
  .deliver-list > li::before { font-size: 1.15rem; }
  .method-steps, .dims-list { grid-template-columns: 1fr; }
  .stack-group { grid-template-columns: 1fr; gap: 1rem; }
  .stack-list { grid-template-columns: 1fr; }
  .stack-list li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 0.8rem; }
  /* dos columnas de criterios no caben en un movil: se leen una debajo de otra */
  .scope-three.fit-two { grid-template-columns: 1fr; gap: clamp(2.25rem, 8vw, 3rem); }
  .flow-list li { grid-template-columns: 2rem 1fr; gap: 0.3rem 1rem; }
  .flow-list .d { grid-column: 2; }
  .case-beats li { grid-template-columns: 1fr; gap: 0.35rem; }
  .th-chain li { grid-template-columns: 1fr; gap: 0.3rem; padding-left: 1.9rem; }
  .th-chain .br { grid-template-columns: auto minmax(0, 1fr); }
  .nots li { grid-template-columns: 1fr; gap: 0.4rem; }
  .caps-list li { grid-template-columns: 1fr; gap: 0.25rem; }
  .two-rules { grid-template-columns: 1fr; gap: 1.75rem; }
  .ph-checks { grid-template-columns: 1fr; }
  .ph-checks li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 0.7rem; }
  /* el corchete de convergencia no cabe en cinco columnas: se deshace y las
     fuentes pasan a leerse como lista, con la salida debajo */
  .merge-in { grid-template-columns: repeat(2, 1fr); gap: 0.65rem 1rem; }
  .merge-in li { text-align: left; padding-bottom: 0; }
  .merge-in li::after, .merge-in::after, .merge-out::before { display: none; }
  .merge-out { margin: 1.5rem 0 0; }
  .diag-grid { grid-template-columns: 1fr; }
  .diag-side { position: static; order: -1; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .pt-table th, .pt-table td { padding: 0.85rem 0.9rem; }
  .pt-table tbody th { width: auto; }
}
@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
  .pt-table { display: block; border: 0; background: none; }
  .pt-table thead { display: none; }
  .pt-table tbody, .pt-table tr, .pt-table th, .pt-table td { display: block; width: auto; }
  .pt-table tr { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 0.85rem; }
  .pt-table th, .pt-table td { border-top: 0; padding: 0.2rem 0; }
  .pt-table tbody th { font-size: 1.2rem; }
  .pt-table .amt { text-align: left; margin-top: 0.5rem; }
  /* Apilada, la tabla pierde el thead: cada celda tiene que decir de qué columna
     viene o la fila deja de significar nada. */
  .pt-table.data tbody th { font-size: 1.05rem; margin-bottom: 0.5rem; }
  .pt-table.data td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--line);
  }
  .pt-table.data td::before {
    content: attr(data-l); flex: none;
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-muted);
  }
}
@media (min-width: 521px) { .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } }
@media (max-width: 560px) {
  .logo svg { width: 26px; height: 26px; }
  .logo-word { font-size: 0.8rem; line-height: 1.15; max-width: 9rem; }
  /* en la barra no cabe el descriptor completo: la marca va sola */
  .nav .logo-sub { display: none; }
  .footer .logo-sub { font-size: 0.55rem; letter-spacing: 0.04em; margin-top: 4px; }
  .nav-cta-full { display: none; }
  .nav-cta .btn-primary { font-size: 0.84rem; padding: 0.58rem 0.85rem; }
  .nav-inner { gap: 0.6rem; }
}