/* Tokens · generado desde tokens/landing.tokens.json. No editar a mano. */
:root {
  color-scheme: dark;
  --hqf-neutral-0: hsl(0 0% 100%);
  --hqf-neutral-100: hsl(0 0% 95%);
  --hqf-neutral-200: hsl(0 0% 88%);
  --hqf-neutral-250: hsl(30 5.1% 84.7%);
  --hqf-neutral-300: hsl(40 6.4% 81.6%);
  --hqf-neutral-400: hsl(0 0% 71%);
  --hqf-neutral-500: hsl(0 0% 56%);
  --hqf-neutral-600: hsl(0 0% 36%);
  --hqf-neutral-700: hsl(0 0% 45%);
  --hqf-neutral-800: hsl(40 3.6% 16.3%);
  --hqf-neutral-850: hsl(30 3% 14%);
  --hqf-neutral-900: hsl(0 0% 11%);
  --hqf-neutral-950: hsl(0 0% 6.7%);
  --hqf-neutral-dark-860: hsl(30 2.9% 13.7%);
  --hqf-bronze-100: hsl(30 10% 88%);
  --hqf-bronze-200: hsl(29 15% 79%);
  --hqf-bronze-300: hsl(28 21% 71%);
  --hqf-bronze-400: hsl(27.6 26% 62.4%);
  --hqf-bronze-500: hsl(26.1 19.5% 53.7%);
  --hqf-bronze-600: hsl(25 20% 45%);
  --hqf-bronze-700: hsl(24.5 22% 39.2%);
  --hqf-bronze-800: hsl(23.7 23.2% 36.3%);
  --hqf-bronze-900: hsl(21 14% 21%);
  --hqf-bronze-950: hsl(20 8.8% 13.3%);
  --hqf-bronze-500-a40: hsl(26.1 19.5% 53.7% / 0.4);
  --hqf-bronze-600-a35: hsl(24.8 20% 45.1% / 0.35);
  --hqf-red-100: hsl(5 20% 88.2%);
  --hqf-red-200: hsl(6 35% 80%);
  --hqf-red-300: hsl(6 49% 72%);
  --hqf-red-400: hsl(6.8 63.5% 64.5%);
  --hqf-red-500: hsl(6 61% 58%);
  --hqf-red-600: hsl(6 58% 52%);
  --hqf-red-700: hsl(6 55% 46%);
  --hqf-red-800: hsl(5.2 52% 39.2%);
  --hqf-red-900: hsl(4 31% 23%);
  --hqf-red-950: hsl(4 21% 15%);
  --hqf-green-100: hsl(128.6 10.4% 86.9%);
  --hqf-green-200: hsl(126 15% 75%);
  --hqf-green-300: hsl(124 19% 64%);
  --hqf-green-400: hsl(122.1 23.7% 52.7%);
  --hqf-green-500: hsl(123 27% 47%);
  --hqf-green-600: hsl(123 31% 40%);
  --hqf-green-700: hsl(124 35% 34%);
  --hqf-green-800: hsl(124.3 38.9% 28.2%);
  --hqf-green-900: hsl(126 21% 18%);
  --hqf-green-950: hsl(128 12% 13%);
  --hqf-black-a24: hsl(0 0% 0% / 0.24);
  --hqf-black-a50: hsl(0 0% 0% / 0.5);
  --hqf-black-a08: hsl(0 0% 0% / 0.08);
  --hqf-black-a16: hsl(0 0% 0% / 0.16);
  --hqf-font-family-chivo: Chivo, ui-sans-serif, system-ui, sans-serif;
  --hqf-font-family-chivo-mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hqf-size-2: 2px;
  --hqf-size-4: 4px;
  --hqf-size-6: 6px;
  --hqf-size-8: 8px;
  --hqf-size-12: 12px;
  --hqf-size-13: 13px;
  --hqf-size-16: 16px;
  --hqf-size-20: 20px;
  --hqf-size-24: 24px;
  --hqf-size-26: 26px;
  --hqf-size-32: 32px;
  --hqf-size-36: 36px;
  --hqf-size-44: 44px;
  --hqf-size-48: 48px;
  --hqf-size-52: 52px;
  --hqf-size-64: 64px;
  --hqf-size-76: 76px;
  --hqf-size-96: 96px;
  --hqf-size-128: 128px;
  --hqf-color-bg: var(--hqf-neutral-950);
  --hqf-color-surface: var(--hqf-neutral-900);
  --hqf-color-surface-raised: var(--hqf-neutral-850);
  --hqf-color-border: var(--hqf-neutral-800);
  --hqf-color-border-soft: var(--hqf-neutral-dark-860);
  --hqf-color-border-strong: var(--hqf-neutral-700);
  --hqf-color-text: var(--hqf-neutral-100);
  --hqf-color-text-soft: var(--hqf-neutral-400);
  --hqf-color-text-muted: var(--hqf-neutral-500);
  --hqf-color-accent: var(--hqf-bronze-500);
  --hqf-color-accent-text: var(--hqf-bronze-500);
  --hqf-color-accent-soft: var(--hqf-bronze-950);
  --hqf-color-action-bg: var(--hqf-bronze-500);
  --hqf-color-action-bg-hover: var(--hqf-bronze-400);
  --hqf-color-action-text: var(--hqf-neutral-950);
  --hqf-color-focus: var(--hqf-neutral-100);
  --hqf-color-success: var(--hqf-green-400);
  --hqf-color-success-soft: var(--hqf-green-950);
  --hqf-color-danger: var(--hqf-red-400);
  --hqf-color-danger-soft: var(--hqf-red-950);
  --hqf-color-selection: var(--hqf-bronze-500-a40);
  --hqf-font-family-sans: var(--hqf-font-family-chivo);
  --hqf-font-family-mono: var(--hqf-font-family-chivo-mono);
  --hqf-font-size-100: var(--hqf-size-13);
  --hqf-font-size-200: var(--hqf-size-16);
  --hqf-font-size-300: var(--hqf-size-20);
  --hqf-font-size-400: var(--hqf-size-26);
  --hqf-font-size-500: var(--hqf-size-36);
  --hqf-font-size-600: var(--hqf-size-52);
  --hqf-font-size-700: var(--hqf-size-76);
  --hqf-font-weight-regular: 400;
  --hqf-font-weight-medium: 500;
  --hqf-font-line-height-display: 1.08;
  --hqf-font-line-height-heading: 1.15;
  --hqf-font-line-height-ui: 1.45;
  --hqf-font-line-height-body: 1.55;
  --hqf-font-tracking-heading: -0.03em;
  --hqf-font-tracking-logotype: -0.025em;
  --hqf-font-tracking-label: 0.08em;
  --hqf-space-2xs: var(--hqf-size-4);
  --hqf-space-xs: var(--hqf-size-8);
  --hqf-space-s: var(--hqf-size-12);
  --hqf-space-m: var(--hqf-size-16);
  --hqf-space-l: var(--hqf-size-24);
  --hqf-space-xl: var(--hqf-size-32);
  --hqf-space-2xl: var(--hqf-size-48);
  --hqf-space-3xl: var(--hqf-size-64);
  --hqf-space-4xl: var(--hqf-size-96);
  --hqf-space-5xl: var(--hqf-size-128);
  --hqf-radius-small: var(--hqf-size-2);
  --hqf-radius-control: var(--hqf-size-4);
  --hqf-radius-panel: var(--hqf-size-6);
  --hqf-shadow-flat: none;
  --hqf-shadow-raised: 0 1px 2px var(--hqf-black-a24), 0 16px 32px -16px var(--hqf-black-a50);
  --hqf-shadow-overlay: 0 1px 0 var(--hqf-black-a24), 0 12px 24px -12px var(--hqf-black-a50);
  --hqf-layout-max: 1120px;
  --hqf-layout-measure: 33em;
  --hqf-layout-gutter: var(--hqf-size-16);
  --hqf-layout-gutter-wide: var(--hqf-size-24);
  --hqf-focus-width: var(--hqf-size-2);
  --hqf-focus-offset: var(--hqf-size-2);
  --hqf-target-min: var(--hqf-size-24);
  --hqf-target-touch-primary: var(--hqf-size-44);
  --hqf-motion-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --hqf-motion-duration-fast: 120ms;
  --hqf-motion-duration-base: 200ms;
  --hqf-motion-duration-max: 280ms;
  --hqf-button-primary-bg: var(--hqf-color-action-bg);
  --hqf-button-primary-bg-hover: var(--hqf-color-action-bg-hover);
  --hqf-button-primary-text: var(--hqf-color-action-text);
  --hqf-button-secondary-border: var(--hqf-color-border-strong);
  --hqf-button-secondary-border-hover: var(--hqf-color-text);
  --hqf-button-secondary-text: var(--hqf-color-text);
  --hqf-input-border: var(--hqf-color-border-strong);
  --hqf-input-border-focus: var(--hqf-color-focus);
  --hqf-input-border-invalid: var(--hqf-color-danger);
  --hqf-input-bg: var(--hqf-color-surface);
  --hqf-lienzo-meter-fill: var(--hqf-color-accent);
  --hqf-lienzo-meter-track: var(--hqf-color-border);
  --hqf-lienzo-meter-slot: var(--hqf-color-text-muted);
  --hqf-diff-add-bg: var(--hqf-color-success-soft);
  --hqf-diff-del-bg: var(--hqf-color-danger-soft);
  --hqf-diff-hunk-bg: var(--hqf-color-surface-raised);
  --hqf-symbol-thread: var(--hqf-color-text);
  --hqf-symbol-run: var(--hqf-color-accent);
  --hqf-symbol-ground: var(--hqf-color-bg);
}
/* Claro: sólo re-apunta semánticos. */
:root[data-theme="light"] {
  color-scheme: light;
  --hqf-color-bg: var(--hqf-neutral-100);
  --hqf-color-surface: var(--hqf-neutral-200);
  --hqf-color-surface-raised: var(--hqf-neutral-0);
  --hqf-color-border: var(--hqf-neutral-300);
  --hqf-color-border-soft: var(--hqf-neutral-250);
  --hqf-color-text: var(--hqf-neutral-950);
  --hqf-color-text-soft: var(--hqf-neutral-800);
  --hqf-color-text-muted: var(--hqf-neutral-600);
  --hqf-color-accent: var(--hqf-bronze-600);
  --hqf-color-accent-text: var(--hqf-bronze-800);
  --hqf-color-accent-soft: var(--hqf-bronze-100);
  --hqf-color-focus: var(--hqf-neutral-950);
  --hqf-color-success: var(--hqf-green-800);
  --hqf-color-success-soft: var(--hqf-green-100);
  --hqf-color-danger: var(--hqf-red-800);
  --hqf-color-danger-soft: var(--hqf-red-100);
  --hqf-color-selection: var(--hqf-bronze-600-a35);
  --hqf-shadow-raised: 0 1px 2px var(--hqf-black-a08), 0 16px 32px -16px var(--hqf-black-a16);
  --hqf-shadow-overlay: 0 1px 0 var(--hqf-black-a08), 0 12px 24px -12px var(--hqf-black-a16);
}

/* Base · fuentes, reinicio mínimo, página y utilidades. Todo valor sale de un token semántico. */
@font-face { font-family: "Chivo"; src: url("fonts/chivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url("fonts/chivo-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

:root { --header-height: 64px; }

html {
  /* La cabecera fija nunca tapa el destino de un enlace ni el foco. Los saltos son inmediatos: nada se anima desde el teclado. */
  scroll-padding-top: calc(var(--header-height) + var(--hqf-space-l));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* En una página corta, el contenido crece y el footer queda abajo. */
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background: var(--hqf-color-bg);
  color: var(--hqf-color-text-soft);
  font-family: var(--hqf-font-family-sans);
  font-size: var(--hqf-font-size-200);
  font-weight: var(--hqf-font-weight-regular);
  line-height: var(--hqf-font-line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

/* Junto a una barra del sistema, la franja sobre la cabecera lleva el fondo de la página. */
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 10; height: env(safe-area-inset-top, 0px); background: var(--hqf-color-bg); }

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { min-width: 0; border: 0; }
a { color: inherit; }
svg { display: block; flex: none; }
b { font-weight: var(--hqf-font-weight-medium); }
code { font-family: var(--hqf-font-family-mono); font-size: inherit; color: var(--hqf-color-text); }
::selection { background: var(--hqf-color-selection); }
[hidden] { display: none !important; }

/* Relevo · varias piezas ocupan el mismo sitio y se ve una a la vez: un estado que cambia sin mover lo de alrededor. */
.swap { display: inline-grid; }
.swap--fill { display: grid; }
.swap--end { justify-items: end; }
.swap__item { grid-area: 1 / 1; min-width: 0; }

/* Foco: 2 px, separado 2 px, en todo lo que se puede enfocar. Sin transición. */
:focus-visible { outline: var(--hqf-focus-width) solid var(--hqf-color-focus); outline-offset: var(--hqf-focus-offset); }

/* Ancho de página y margen lateral, también junto a una barra del sistema. */
.wrap {
  width: 100%;
  max-width: calc(var(--hqf-layout-max) + 2 * var(--hqf-layout-gutter-wide));
  margin-inline: auto;
  padding-left: max(var(--hqf-layout-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--hqf-layout-gutter), env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(var(--hqf-layout-gutter-wide), env(safe-area-inset-left, 0px)); padding-right: max(var(--hqf-layout-gutter-wide), env(safe-area-inset-right, 0px)); }
}

/* Secciones: el espacio separa; una banda cambia de superficie; una regla fina ordena las que comparten fondo. */
.section { padding-block: var(--hqf-space-3xl); }
.section--band { background: var(--hqf-color-surface); }
.section--ruled { border-top: 1px solid var(--hqf-color-border-soft); }
@media (min-width: 960px) { .section { padding-block: var(--hqf-space-4xl); } }

/* Títulos: peso medio, tracking cerrado y líneas equilibradas. El tamaño lo da la variante. */
.title { color: var(--hqf-color-text); font-weight: var(--hqf-font-weight-medium); letter-spacing: var(--hqf-font-tracking-heading); line-height: var(--hqf-font-line-height-heading); text-wrap: balance; }
.title--display { font-size: var(--hqf-font-size-500); line-height: var(--hqf-font-line-height-display); }
.title--section { font-size: var(--hqf-font-size-400); max-width: 20em; }
.title--item { font-size: var(--hqf-font-size-300); letter-spacing: var(--hqf-font-tracking-logotype); line-height: 1.3; }
@media (min-width: 720px) {
  .title--display { font-size: var(--hqf-font-size-600); }
  .title--section { font-size: var(--hqf-font-size-500); }
}

/* Texto corrido: una medida cómoda de lectura. */
.prose { max-width: var(--hqf-layout-measure); }
.prose + .prose { margin-top: var(--hqf-space-m); }

.skip-link { position: absolute; left: var(--hqf-space-m); top: var(--hqf-space-m); z-index: 20; padding: var(--hqf-space-s) var(--hqf-space-m); background: var(--hqf-color-text); color: var(--hqf-color-bg); border-radius: var(--hqf-radius-control); font-weight: var(--hqf-font-weight-medium); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; }

/* Átomos */

/* Icon */
.icon { flex: none; }

/* Button · la principal es la única llena; la secundaria es un contorno; ambas responden al toque con 44 px o más.
   El texto va en una línea mientras quepa; si el botón no cabe en su contenedor, el texto baja de línea en vez de desbordar. */
.button {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: var(--hqf-space-xs);
  max-width: 100%;
  padding: var(--hqf-space-s) var(--hqf-space-l);
  border: 1px solid transparent; border-radius: var(--hqf-radius-control);
  background: transparent; color: inherit;
  font: inherit; font-weight: var(--hqf-font-weight-medium); line-height: 20px; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out), border-color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out), transform var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out);
}
.button--s { padding: var(--hqf-space-xs) var(--hqf-space-m); }
.button--l { padding: var(--hqf-space-m) var(--hqf-space-l); }
.button--primary { background: var(--hqf-button-primary-bg); color: var(--hqf-button-primary-text); }
.button--secondary { border-color: var(--hqf-button-secondary-border); color: var(--hqf-button-secondary-text); }
.button--quiet { padding-inline: 0; color: var(--hqf-color-text-muted); font-size: var(--hqf-font-size-100); font-weight: var(--hqf-font-weight-regular); text-decoration: underline; text-decoration-color: var(--hqf-color-border-strong); text-underline-offset: 3px; }
.button .icon { transition: transform var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out); }
.button:active { transform: scale(0.97); }
.button[disabled] { cursor: progress; background: var(--hqf-color-border); color: var(--hqf-color-text-soft); }
@media (hover: hover) {
  .button--primary:not([disabled]):hover { background: var(--hqf-button-primary-bg-hover); }
  .button--secondary:hover { border-color: var(--hqf-button-secondary-border-hover); }
  .button--quiet:hover { color: var(--hqf-color-text); }
  .button:not([disabled]):hover .icon { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .button .icon { transition: none; }
  .button:active, .button:hover .icon { transform: none; }
}

/* TextLink */
.text-link { color: inherit; text-decoration: underline; text-decoration-color: var(--hqf-color-border-strong); text-underline-offset: 3px; }
@media (hover: hover) { .text-link:hover { color: var(--hqf-color-text); text-decoration-color: currentColor; } }

/* Logo y símbolo */
.logo { display: inline-flex; align-items: center; gap: 0.45em; color: var(--hqf-color-text); font-size: var(--hqf-font-size-300); font-weight: var(--hqf-font-weight-medium); letter-spacing: var(--hqf-font-tracking-logotype); line-height: 1.2; text-decoration: none; white-space: nowrap; }
.symbol__thread { fill: var(--hqf-symbol-thread); }
.symbol__run { fill: var(--hqf-symbol-run); }
.symbol__ground { fill: var(--hqf-symbol-ground); }

/* Eyebrow */
.eyebrow { color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-100); letter-spacing: var(--hqf-font-tracking-label); line-height: var(--hqf-font-line-height-ui); text-transform: uppercase; }

/* Tag */
.tag { display: inline-flex; align-items: center; gap: var(--hqf-space-xs); padding: var(--hqf-space-2xs) var(--hqf-space-s); border: 1px solid var(--hqf-color-border); border-radius: var(--hqf-radius-small); color: var(--hqf-color-text-soft); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); max-width: 100%; overflow-wrap: anywhere; }
.tag--state { border-color: var(--hqf-color-border-strong); color: var(--hqf-color-text); white-space: nowrap; }
.tag--state::before { content: ""; width: 6px; height: 6px; background: currentColor; }

/* Meter */
.meter { position: relative; display: block; width: 100%; height: var(--hqf-space-xs); background: var(--hqf-lienzo-meter-track); border-radius: var(--hqf-radius-small); overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--hqf-lienzo-meter-fill); }
.meter--slot .meter__fill { background: var(--hqf-lienzo-meter-slot); }
.meter__band { position: absolute; top: 0; bottom: 0; z-index: 1; border-inline: 1px solid var(--hqf-color-text); }

/* Label, Hint, FieldError */
.label { color: var(--hqf-color-text); font-weight: var(--hqf-font-weight-medium); }
.label__optional { color: var(--hqf-color-text-muted); font-weight: var(--hqf-font-weight-regular); }
.hint { color: var(--hqf-color-text-muted); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }
.field-error { padding-left: var(--hqf-space-xs); border-left: var(--hqf-focus-width) solid var(--hqf-color-danger); color: var(--hqf-color-danger); line-height: var(--hqf-font-line-height-ui); }

/* Input y Textarea · un pozo más oscuro que el panel, con borde que se ve (3:1). */
.input { width: 100%; min-height: var(--hqf-target-touch-primary); padding: var(--hqf-space-xs) var(--hqf-space-s); background: var(--hqf-input-bg); border: 1px solid var(--hqf-input-border); border-radius: var(--hqf-radius-control); color: var(--hqf-color-text); font: inherit; line-height: var(--hqf-font-line-height-ui); }
.input:focus-visible { border-color: var(--hqf-input-border-focus); }
.input[aria-invalid="true"] { border-color: var(--hqf-input-border-invalid); }
.input--area { min-height: calc(var(--hqf-space-4xl) + var(--hqf-space-m)); resize: vertical; }

/* Checkbox */
.checkbox { display: inline-flex; align-items: center; gap: var(--hqf-space-xs); min-height: var(--hqf-target-min); color: var(--hqf-color-text-soft); cursor: pointer; }
.checkbox__box { appearance: none; -webkit-appearance: none; display: grid; place-content: center; flex: none; width: 20px; height: 20px; margin: 0; background: var(--hqf-input-bg); border: 1px solid var(--hqf-input-border); border-radius: var(--hqf-radius-small); cursor: pointer; }
.checkbox__box::after { content: ""; width: 10px; height: 6px; border: solid var(--hqf-color-bg); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.checkbox__box:checked { background: var(--hqf-color-text); border-color: var(--hqf-color-text); }
.checkbox__box:checked::after { opacity: 1; }
.checkbox__box[aria-invalid="true"] { border-color: var(--hqf-input-border-invalid); }

/* Moléculas */

/* Nav */
.nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--hqf-space-l); }
.nav__link { display: block; padding-block: var(--hqf-space-xs); color: var(--hqf-color-text-muted); text-decoration: none; transition: color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out); }
@media (hover: hover) { .nav__link:hover { color: var(--hqf-color-text); } }
@media (prefers-reduced-motion: reduce) { .nav__link { transition: none; } }

/* CtaGroup */
.cta-group__actions { display: flex; flex-wrap: wrap; gap: var(--hqf-space-s); }
@media (max-width: 479px) { .cta-group__actions .button { flex: 1 1 100%; } }
.cta-group__note { margin-top: var(--hqf-space-m); color: var(--hqf-color-text-muted); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }

/* SectionHeading */
.section-heading { display: grid; gap: var(--hqf-space-s); }

/* Feature */
.feature { display: grid; gap: var(--hqf-space-xs); align-content: start; padding-top: var(--hqf-space-l); border-top: 1px solid var(--hqf-color-border); }
.feature__text { max-width: 30em; }

/* Step */
.step { display: grid; gap: var(--hqf-space-xs); align-content: start; }
.step__n { margin-bottom: var(--hqf-space-xs); padding-bottom: var(--hqf-space-s); border-bottom: 1px solid var(--hqf-color-border); color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }

/* Fact */
.fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--hqf-space-s); align-items: start; padding-block: var(--hqf-space-m); border-top: 1px solid var(--hqf-color-border); color: var(--hqf-color-text); font-size: var(--hqf-font-size-300); line-height: 1.4; }
/* El icono se centra en la primera línea: (alto de línea − alto del icono) / 2. */
.fact .icon { margin-top: calc((var(--hqf-font-size-300) * 1.4 - 16px) / 2); color: var(--hqf-color-text-muted); }

/* FaqItem */
.faq-item { display: grid; gap: var(--hqf-space-xs); padding-block: var(--hqf-space-l); border-top: 1px solid var(--hqf-color-border); }
.faq-item__answer { max-width: var(--hqf-layout-measure); }

/* SlotRow */
.slot-row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 6ch; align-items: center; gap: var(--hqf-space-s); }
.slot-row__name { color: var(--hqf-color-text-soft); }
.slot-row__tokens { color: var(--hqf-color-text); font-family: var(--hqf-font-family-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Field */
.field { display: grid; gap: var(--hqf-space-xs); }

/* ChoiceGroup · cada opción es una ficha que se marca entera. */
.choice-group__legend { display: block; }
.choice-group__options { display: flex; flex-wrap: wrap; gap: var(--hqf-space-xs); }
.choice-group .checkbox { padding: var(--hqf-space-xs) var(--hqf-space-s) var(--hqf-space-xs) var(--hqf-space-xs); border: 1px solid var(--hqf-color-border); border-radius: var(--hqf-radius-control); }
.choice-group .checkbox:has(:checked) { border-color: var(--hqf-color-text); color: var(--hqf-color-text); }
.choice-group .checkbox:has(:focus-visible) { outline: var(--hqf-focus-width) solid var(--hqf-color-focus); outline-offset: var(--hqf-focus-offset); }
.choice-group .checkbox__box:focus-visible { outline: none; }

/* Consent */
.consent .checkbox { align-items: flex-start; }
.consent .checkbox__box { margin-top: calc((var(--hqf-font-size-200) * var(--hqf-font-line-height-body) - 20px) / 2); }

/* FormStatus */
.form-status { padding: var(--hqf-space-s) var(--hqf-space-m); background: var(--hqf-color-danger-soft); border-left: var(--hqf-focus-width) solid var(--hqf-color-danger); border-radius: var(--hqf-radius-small); color: var(--hqf-color-text); }

/* FigureSlot · una figura de la serie del telar. Reserva su lugar, se monta al acercarse y se puede pausar. */
.figure-slot { --anatomy-page: var(--hqf-color-bg); --anatomy-muted: var(--hqf-color-text-muted); --anatomy-mono: var(--hqf-font-family-mono); min-width: 0; }
.figure-slot__bar { display: flex; justify-content: flex-end; min-height: calc(20px + 2 * var(--hqf-space-xs)); margin-bottom: var(--hqf-space-2xs); }
.figure-slot__root:empty { aspect-ratio: 11 / 10; background: var(--hqf-color-surface); border: 1px solid var(--hqf-color-border); }
@media (max-width: 560px) { .figure-slot__root:empty { aspect-ratio: 7 / 10; } }
.figure-slot .iso-figure { margin: 0; }
.figure-slot .iso-legend { max-width: var(--hqf-layout-measure); font-size: var(--hqf-font-size-100); }
/* Sin puntero no hay nada que mover con él: la pista sobra. */
@media (hover: none) { .figure-slot .iso-plate-corner[data-corner="hint"] { display: none; } }
.figure-slot[data-figure] .iso-stage:focus-visible { outline: var(--hqf-focus-width) solid var(--hqf-color-focus); outline-offset: var(--hqf-focus-offset); }

/* SceneTabs · elige la escena de una demostración y la pausa. La raya bajo la escena activa avanza con ella. */
.scene-tabs { display: flex; align-items: center; justify-content: space-between; gap: var(--hqf-space-m); }
.scene-tabs__list { display: flex; gap: var(--hqf-space-l); }
.scene-tab { position: relative; min-width: 4.5em; padding: var(--hqf-space-xs) 0; background: none; border: 0; color: var(--hqf-color-text-muted); font: inherit; font-size: var(--hqf-font-size-100); line-height: 20px; text-align: left; cursor: pointer; transition: color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out); }
.scene-tab[aria-current] { color: var(--hqf-color-text); }
@media (hover: hover) { .scene-tab:hover { color: var(--hqf-color-text); } }
.scene-tab::after, .scene-tab__progress { content: ""; position: absolute; inset: auto 0 0; height: var(--hqf-focus-width); }
.scene-tab::after { background: var(--hqf-color-border); }
.scene-tab__progress { z-index: 1; background: var(--hqf-color-text); transform: scaleX(var(--scene-progress, 0)); transform-origin: left center; transition: transform var(--hqf-motion-duration-max) var(--hqf-motion-ease-out); }
.scene-tab:not([aria-current]) .scene-tab__progress { transform: scaleX(0); transition-duration: var(--hqf-motion-duration-fast); }
@media (prefers-reduced-motion: reduce) { .scene-tab, .scene-tab__progress { transition: none; } }

/* SlotRow dentro de un lienzo que se llena: la barra crece desde la izquierda y la cifra aparece con ella. */
.slot-row .meter__fill { transform-origin: left center; }
.slot-row.is-empty .meter__fill { transform: scaleX(0); }
.slot-row.is-empty .slot-row__tokens { opacity: 0; }

/* Organismos */

/* SiteHeader · fija, sobre el contenido: tercer nivel de altura. */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--hqf-color-bg); border-bottom: 1px solid var(--hqf-color-border-soft); box-shadow: var(--hqf-shadow-overlay); }
.site-header__inner { display: flex; align-items: center; gap: var(--hqf-space-l); min-height: var(--header-height); }
.site-header .nav { display: none; margin-left: auto; }
.site-header .button { margin-left: auto; }
@media (min-width: 960px) {
  .site-header .nav { display: block; }
  .site-header .button { margin-left: var(--hqf-space-xs); }
}

/* Hero · el titular es lo más grande de la página; el subtítulo cede en color, no en claridad. */
.hero { padding-block: var(--hqf-space-2xl) var(--hqf-space-3xl); }
.hero__grid { display: grid; gap: var(--hqf-space-2xl); }
.hero__grid > * { min-width: 0; }
.hero__line { display: block; }
.hero__subtitle { max-width: 32em; margin-top: var(--hqf-space-l); font-size: var(--hqf-font-size-300); line-height: 1.5; }
.hero .cta-group { margin-top: var(--hqf-space-xl); }
@media (min-width: 960px) {
  .hero { padding-block: var(--hqf-space-4xl); }
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--hqf-space-3xl); align-items: center; }
}

/* RunWindow · la única pieza levantada de la página: superficie más clara, borde y sombra de dos partes.
   Recorre una tarea en tres escenas. Las tres ocupan el mismo sitio, así la ventana mide siempre lo que la más alta. */
.run-demo { display: grid; gap: var(--hqf-space-s); min-width: 0; }
.run-window { background: var(--hqf-color-surface); border: 1px solid var(--hqf-color-border); border-radius: var(--hqf-radius-panel); box-shadow: var(--hqf-shadow-raised); color: var(--hqf-color-text-soft); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); overflow: hidden; }
.run-window__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--hqf-space-2xs) var(--hqf-space-s); padding: var(--hqf-space-s) var(--hqf-space-m); border-bottom: 1px solid var(--hqf-color-border); }
.run-window__issue { grid-area: 1 / 1; color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); white-space: nowrap; }
.run-window__status { grid-area: 1 / 2; }
.run-window__title { grid-area: 2 / 1 / 3 / 3; color: var(--hqf-color-text); font-size: var(--hqf-font-size-200); font-weight: var(--hqf-font-weight-medium); line-height: 1.3; }
.run-window__meta { display: flex; gap: var(--hqf-space-m); padding: var(--hqf-space-xs) var(--hqf-space-m); color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); }
.diff { border-block: 1px solid var(--hqf-color-border); font-family: var(--hqf-font-family-mono); }
.diff__file { display: flex; justify-content: space-between; gap: var(--hqf-space-m); padding: var(--hqf-space-xs) var(--hqf-space-m); background: var(--hqf-diff-hunk-bg); color: var(--hqf-color-text); }
.diff__path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff__stat { white-space: nowrap; }
.diff__added { color: var(--hqf-color-success); }
.diff__removed { color: var(--hqf-color-danger); }
.diff__hunk { padding: var(--hqf-space-2xs) var(--hqf-space-m); overflow: hidden; color: var(--hqf-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.diff__line { display: grid; grid-template-columns: 3.5em 1.5em minmax(0, 1fr); padding-block: calc(var(--hqf-space-2xs) / 2); padding-right: var(--hqf-space-m); }
.diff__line--add { background: var(--hqf-diff-add-bg); }
.diff__line--del { background: var(--hqf-diff-del-bg); }
.diff__n { padding-right: var(--hqf-space-xs); color: var(--hqf-color-text-muted); text-align: right; }
.diff__line--add .diff__sign { color: var(--hqf-color-success); }
.diff__line--del .diff__sign { color: var(--hqf-color-danger); }
.diff__code { overflow: hidden; font-size: inherit; text-overflow: ellipsis; white-space: pre; }
.diff__comment { padding: var(--hqf-space-xs) var(--hqf-space-s); background: var(--hqf-color-surface-raised); border-left: var(--hqf-focus-width) solid var(--hqf-color-border-strong); border-radius: var(--hqf-radius-small); font-family: var(--hqf-font-family-sans); }
.diff__comment-meta { color: var(--hqf-color-text-muted); }
.diff__comment-meta b { color: var(--hqf-color-text); }
.diff__comment-text { color: var(--hqf-color-text); }
.run-window__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hqf-space-s) var(--hqf-space-m); padding: var(--hqf-space-s) var(--hqf-space-m); }
.run-window__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hqf-space-2xs) var(--hqf-space-m); color: var(--hqf-color-text-muted); }
.run-window__trust-label { color: var(--hqf-color-text); font-weight: var(--hqf-font-weight-medium); }
.run-window__canvas { display: inline-flex; align-items: center; gap: var(--hqf-space-xs); }
.run-window__canvas .meter { width: var(--hqf-space-2xl); height: var(--hqf-space-2xs); }
.run-window__actions { display: flex; flex-wrap: wrap; gap: var(--hqf-space-xs); }
.mock-button { display: inline-flex; align-items: center; padding: var(--hqf-space-2xs) var(--hqf-space-s); border: 1px solid var(--hqf-color-border); border-radius: var(--hqf-radius-control); color: var(--hqf-color-text-soft); font-weight: var(--hqf-font-weight-medium); line-height: 20px; white-space: nowrap; }
.mock-button--main { background: var(--hqf-color-accent-soft); border-color: var(--hqf-color-accent); color: var(--hqf-color-accent-text); }
/* El único momento en que el botón de la ventana se llena: cuando se pulsa. */
.mock-button--main.is-marked { transform: scale(0.97); background: var(--hqf-color-action-bg); color: var(--hqf-color-action-text); }
.mock-button { transition: transform var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out), background-color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out), color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out); }
.run-window__result { display: inline-flex; align-items: center; gap: var(--hqf-space-xs); color: var(--hqf-color-text); font-weight: var(--hqf-font-weight-medium); line-height: 30px; }
.run-window__result .icon { color: var(--hqf-color-success); }
.run-window__trust .meter__fill { transform-origin: left center; transition: transform var(--hqf-motion-duration-max) var(--hqf-motion-ease-out) var(--hqf-motion-duration-base); }
.run-window__trust:not(.is-on) .meter__fill { transform: scaleX(0); transition-delay: 0s; }
.diff__line { transition-property: opacity, transform, box-shadow; }
.diff__line.is-on { transition-delay: calc(var(--i, 0) * 40ms); }
.diff__line.is-marked { box-shadow: inset var(--hqf-focus-width) 0 0 var(--hqf-color-accent); }
.diff__thread { display: grid; gap: var(--hqf-space-2xs); padding: var(--hqf-space-xs) var(--hqf-space-m) var(--hqf-space-s) 5em; }
.diff__comment--reply { margin-left: var(--hqf-space-m); border-left-color: var(--hqf-color-border); }

/* Las escenas y sus pulsos. Una pieza con data-show espera invisible en su sitio y entra cuando le toca;
   sale más rápido de lo que entra. Sin guion, el HTML ya trae a la vista el estado de reposo. */
.run-window__scenes { display: grid; }
.run-scene { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; opacity: 0; visibility: hidden; transition: opacity var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out), visibility 0s linear var(--hqf-motion-duration-fast); }
.run-scene.is-on { opacity: 1; visibility: visible; transition: opacity var(--hqf-motion-duration-base) var(--hqf-motion-ease-out); }
.run-scene > * { flex: 1; }
.run-window [data-show] { opacity: 0; transform: translateY(var(--hqf-space-2xs)); transition: opacity var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out), transform var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out); }
.run-window [data-show].is-on { opacity: 1; transform: none; transition-duration: var(--hqf-motion-duration-base); }
/* Desde el teclado, o con movimiento reducido, el cambio de escena es inmediato. */
.run-window[data-instant], .run-window[data-instant] * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .run-window, .run-window * { transition: none !important; } }

/* AssignPanel · el issue, su selector de responsable y sus ejecuciones. */
.assign { display: grid; align-content: start; gap: var(--hqf-space-m); padding: var(--hqf-space-m); }
.assign__field { display: flex; align-items: center; gap: var(--hqf-space-s); }
.assign__label, .assign__heading, .assign__empty { color: var(--hqf-color-text-muted); }
.assign__picker { position: relative; }
.mock-select { display: inline-flex; align-items: center; gap: var(--hqf-space-xs); padding: var(--hqf-space-2xs) var(--hqf-space-s); border: 1px solid var(--hqf-color-border-strong); border-radius: var(--hqf-radius-control); color: var(--hqf-color-text); line-height: 20px; white-space: nowrap; }
.mock-select__empty { color: var(--hqf-color-text-muted); }
.mock-select__value, .mock-menu__item, .run-row__agent { display: flex; align-items: center; gap: var(--hqf-space-xs); }
.mock-avatar { flex: none; width: var(--hqf-space-s); height: var(--hqf-space-s); }
.mock-avatar--person { background: var(--hqf-color-text-muted); border-radius: 50%; }
.mock-avatar--agent { border: var(--hqf-focus-width) solid var(--hqf-color-text-soft); border-radius: var(--hqf-radius-small); }
.mock-menu { position: absolute; top: calc(100% + var(--hqf-space-2xs)); left: 0; z-index: 1; min-width: 13em; padding: var(--hqf-space-2xs); background: var(--hqf-color-surface-raised); border: 1px solid var(--hqf-color-border-strong); border-radius: var(--hqf-radius-control); box-shadow: var(--hqf-shadow-overlay); }
.run-window .mock-menu[data-show]:not(.is-on) { transform: translateY(calc(-1 * var(--hqf-space-2xs))); }
.mock-menu__label { padding: var(--hqf-space-2xs) var(--hqf-space-xs); color: var(--hqf-color-text-muted); }
.mock-menu__item { padding: var(--hqf-space-2xs) var(--hqf-space-xs); border-radius: var(--hqf-radius-small); transition: background-color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out), color var(--hqf-motion-duration-fast) var(--hqf-motion-ease-out); }
.mock-menu__item.is-marked { background: var(--hqf-color-border); color: var(--hqf-color-text); }
.assign__runs { display: grid; gap: var(--hqf-space-xs); padding-top: var(--hqf-space-m); border-top: 1px solid var(--hqf-color-border); }
.run-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hqf-space-m); color: var(--hqf-color-text); font-family: var(--hqf-font-family-mono); }

/* TerminalPanel · lo que el agente lee y edita. El fondo de la página, un paso más hondo que la ventana. */
.watch { display: flex; flex-direction: column; }
.terminal { display: flex; flex: 1; flex-direction: column; margin: 0 var(--hqf-space-m) var(--hqf-space-m); background: var(--hqf-color-bg); border: 1px solid var(--hqf-color-border); border-radius: var(--hqf-radius-control); font-family: var(--hqf-font-family-mono); }
.terminal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--hqf-space-m); padding: var(--hqf-space-xs) var(--hqf-space-s); border-bottom: 1px solid var(--hqf-color-border); color: var(--hqf-color-text-muted); }
.terminal__live { display: inline-flex; align-items: center; gap: var(--hqf-space-xs); color: var(--hqf-color-text); }
.terminal__live::before { content: ""; width: 6px; height: 6px; background: var(--hqf-color-success); border-radius: 50%; }
.terminal__lines { display: grid; align-content: start; gap: var(--hqf-space-2xs); padding: var(--hqf-space-s); }
.terminal__line { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); }
.terminal__mark { color: var(--hqf-color-text-muted); }
.terminal__stat { white-space: nowrap; }
.terminal__caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 0.35em; background: var(--hqf-color-text-soft); vertical-align: text-bottom; }
.run-window .terminal__caret[data-show] { transform: none; }

/* DiffPanel · la revisión: el pie se queda abajo aunque la escena sea más corta que la ventana. */
.review { display: flex; flex-direction: column; }
.review .diff { flex: 1; }

/* TagBand */
.tag-band { padding-block: var(--hqf-space-xl); border-block: 1px solid var(--hqf-color-border-soft); }
.tag-band__inner { display: grid; gap: var(--hqf-space-m); }
.tag-band__inner > * { min-width: 0; }
.tag-band__title { color: var(--hqf-color-text); font-size: var(--hqf-font-size-200); font-weight: var(--hqf-font-weight-medium); }
.tag-band__list { display: flex; flex-wrap: wrap; gap: var(--hqf-space-xs); }
.tag-band__note { color: var(--hqf-color-text-muted); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }
@media (min-width: 960px) {
  .tag-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--hqf-space-3xl); align-items: start; }
  .tag-band__title { grid-row: span 2; }
}

/* FeatureGrid */
.feature-grid { display: grid; gap: var(--hqf-space-xl) var(--hqf-space-2xl); margin-top: var(--hqf-space-2xl); }
@media (min-width: 720px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* StepList · con figura: los pasos a la izquierda, en columna, y la figura a la derecha. */
.step-list { display: grid; gap: var(--hqf-space-2xl); margin-top: var(--hqf-space-2xl); }
.step-list > * { min-width: 0; }
.steps { display: grid; gap: var(--hqf-space-xl); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .step-list--figure { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--hqf-space-3xl); align-items: start; }
  .step-list--figure .steps { grid-template-columns: minmax(0, 1fr); }
}

/* ContextMesh · banda de superficie; el panel del lienzo queda un paso más cerca. */
.mesh__grid { display: grid; gap: var(--hqf-space-2xl); }
.mesh__grid > * { min-width: 0; }
.mesh__copy .section-heading { margin-bottom: var(--hqf-space-l); }
@media (min-width: 960px) { .mesh__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hqf-space-3xl); align-items: center; } }
.mesh__figure { grid-column: 1 / -1; width: 100%; max-width: 760px; margin-inline: auto; }
.lienzo__panel { display: grid; gap: var(--hqf-space-m); padding: var(--hqf-space-l); background: var(--hqf-color-surface-raised); border: 1px solid var(--hqf-color-border); border-radius: var(--hqf-radius-panel); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }
.lienzo__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--hqf-space-2xs) var(--hqf-space-m); }
.lienzo__label { color: var(--hqf-color-text); font-size: var(--hqf-font-size-200); font-weight: var(--hqf-font-weight-medium); }
.lienzo__total { color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); font-variant-numeric: tabular-nums; }
.lienzo__total b { color: var(--hqf-color-text); }
.lienzo__meter { display: flex; align-items: center; gap: var(--hqf-space-s); }
.lienzo__meter .meter { flex: 1; height: var(--hqf-space-s); }
.lienzo__percent { color: var(--hqf-color-text); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-300); font-weight: var(--hqf-font-weight-medium); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lienzo__band { margin-top: calc(-1 * var(--hqf-space-xs)); color: var(--hqf-color-text-muted); }
.lienzo__slots { display: grid; gap: var(--hqf-space-xs); padding-top: var(--hqf-space-m); border-top: 1px solid var(--hqf-color-border); }
/* Con guion, el lienzo se llena al llegar a la vista y el total se detiene dentro de la banda. */
.lienzo__panel[data-live] .meter__fill { transition: width var(--hqf-motion-duration-max) var(--hqf-motion-ease-out), transform var(--hqf-motion-duration-max) var(--hqf-motion-ease-out); }
.lienzo__panel[data-live] .slot-row__tokens { transition: opacity var(--hqf-motion-duration-base) var(--hqf-motion-ease-out); }
.lienzo__caption { margin-top: var(--hqf-space-s); color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }

/* FactList y Faq · título a la izquierda, hechos a la derecha. Con figura, FactList junta título y hechos. */
.fact-list__copy { display: grid; gap: var(--hqf-space-xl); }
.fact-list, .faq__grid { display: grid; gap: var(--hqf-space-xl); }
.fact-list > *, .faq__grid > * { min-width: 0; }
.facts li:last-child, .faq .faq-item:last-child { border-bottom: 1px solid var(--hqf-color-border); }
@media (min-width: 960px) {
  .fact-list, .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--hqf-space-3xl); align-items: start; }
}

/* SocialProof */
.proof { display: grid; gap: var(--hqf-space-l); }
.proof__logos, .proof__author { color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-100); }
.proof__quote { display: grid; gap: var(--hqf-space-m); }

/* LeadForm · banda de superficie; el panel es la segunda pieza más cercana de la página. */
.lead-form { display: grid; gap: var(--hqf-space-xl); }
.lead-form > * { min-width: 0; }
.lead-form__copy .section-heading { margin-bottom: var(--hqf-space-l); }
@media (min-width: 960px) {
  .lead-form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--hqf-space-3xl); align-items: start; }
  /* El porqué acompaña al formulario mientras se llena. */
  .lead-form__copy, .faq__grid > .section-heading { position: sticky; top: calc(var(--header-height) + var(--hqf-space-xl)); }
}
.lead-form__panel { padding: var(--hqf-space-l); background: var(--hqf-color-surface-raised); border: 1px solid var(--hqf-color-border); border-radius: var(--hqf-radius-panel); }
@media (min-width: 720px) { .lead-form__panel { padding: var(--hqf-space-xl); } }
.lead-form__form { display: grid; gap: var(--hqf-space-l); }
.lead-form__required { color: var(--hqf-color-text-muted); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }
.lead-form__form .button { justify-self: start; }
@media (max-width: 479px) { .lead-form__form .button { justify-self: stretch; } }
.counter { color: var(--hqf-color-text-muted); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-100); font-variant-numeric: tabular-nums; line-height: var(--hqf-font-line-height-ui); text-align: right; }
.counter--over { color: var(--hqf-color-danger); }
.lead-form__success { display: grid; gap: var(--hqf-space-m); justify-items: start; padding-left: var(--hqf-space-m); border-left: var(--hqf-focus-width) solid var(--hqf-color-success); }
.lead-form__success:focus-visible { outline-offset: var(--hqf-space-xs); }
.preview-note { margin-bottom: var(--hqf-space-l); padding: var(--hqf-space-xs) var(--hqf-space-s); background: var(--hqf-color-accent-soft); border: 1px dashed var(--hqf-color-accent); border-radius: var(--hqf-radius-small); color: var(--hqf-color-text); font-family: var(--hqf-font-family-mono); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }

/* SiteFooter */
.site-footer { padding-block: var(--hqf-space-2xl); border-top: 1px solid var(--hqf-color-border-soft); color: var(--hqf-color-text-muted); font-size: var(--hqf-font-size-100); line-height: var(--hqf-font-line-height-ui); }
.site-footer__inner { display: grid; gap: var(--hqf-space-m); }
.site-footer__brand { display: flex; align-items: center; gap: var(--hqf-space-xs); color: var(--hqf-color-text-soft); }
.site-footer__list { display: flex; flex-wrap: wrap; gap: 0 var(--hqf-space-l); }
.site-footer__list li, .site-footer__list .text-link { display: inline-flex; align-items: center; min-height: var(--hqf-target-min); }
@media (min-width: 960px) { .site-footer__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--hqf-space-xl); align-items: center; } }

/* Message · una sola cosa que decir y sus salidas. */
.message { padding-block: var(--hqf-space-4xl); }
.message__inner { display: grid; gap: var(--hqf-space-l); justify-items: start; }
.message__text { max-width: var(--hqf-layout-measure); font-size: var(--hqf-font-size-300); line-height: 1.5; }
.message__actions { display: flex; flex-wrap: wrap; gap: var(--hqf-space-s); margin-top: var(--hqf-space-xs); }