/* firma · macro: Stages (Sequence) · theme: Oficio · direction: editorial-sober · critique: P5 J4 E4 F5 H5 V5
   Hard rule 7, hoja sobre escritorio: lo que este producto entrega es texto que el abogado pega en un escrito
   que presenta ante un tribunal, así que la página se compone como ese escrito (hoja sobre escritorio, borde
   de un pixel, sin sombra). Swap test: reescrita para otro cliente la frase deja de ser verdad, porque ningún
   otro producto entrega el texto que va a un escrito judicial chileno.
   Hard rule 7, timbre inclinado 2 grados: un timbre se estampa a mano y por eso nunca queda a escuadra;
   lo que dice (idNorma, idParte, versión, estado) son los campos reales que el motor emite en cada respuesta.
   Swap test: ningún otro cliente emite esos cuatro campos, así que el timbre no se puede pegar en otro sitio.
   Origen de la sumilla: el generador de escritos modelo del propio motor (src/escritos-modelo.ts) rotula
   EN LO PRINCIPAL, un otrosí por cada gestión accesoria, y cierra con POR TANTO. */

html, body { overflow-x: clip; max-width: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-lg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* @comun-inicio */
:root {
  /* paper and ink (OKLCH, greys tinted to 252-255) */
  --escritorio:   oklch(82% 0.012 252);
  --escritorio-2: oklch(76% 0.014 252);
  --hoja:         oklch(98.4% 0.006 92);
  --hoja-2:       oklch(95.4% 0.009 92);
  --regla:        oklch(87% 0.010 90);
  --regla-fuerte: oklch(66% 0.014 90);
  --tinta:        oklch(21% 0.014 255);
  --tinta-2:      oklch(31% 0.014 255);
  --tinta-3:      oklch(40% 0.012 255);
  --timbre:       oklch(40% 0.17 262);
  --timbre-2:     oklch(31% 0.15 262);
  --timbre-fondo: oklch(94.5% 0.025 262);

  /* type */
  --f-display: var(--font-spectral, "Spectral"), "Iowan Old Style", Georgia, serif;
  --f-sans: var(--font-plex-sans, "IBM Plex Sans"), -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, "SF Mono", Menlo, monospace;

  --fs-h1: clamp(2.125rem, 1.2rem + 2.2vw, 3.0625rem);
  --fs-h2: clamp(1.75rem, 1rem + 1.6vw, 2.5rem);
  --fs-h3: 1.375rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.125rem;
  --fs-ui: 1rem;
  --fs-small: 0.875rem;

  /* space, 4pt */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --r: 2px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .16s;

  --ancho-hoja: 920px;
  --ancho-sumilla: 264px;
}

/* Tema oscuro: mismos nombres, otra tinta. El contrato lo comparte el chat: atributo data-theme="light"|"dark"
   en <html> y clave "verbatim-tema" en localStorage; sin valor guardado manda prefers-color-scheme.
   Hard rule 7, escritorio oscuro con la hoja un escalón más clara: la hoja sigue siendo la superficie que se
   lee, así que de noche es papel entintado y no una pantalla negra con cajas (swap test: el modo oscuro de
   otro producto no tiene una hoja que se distinga de su escritorio por tono). Contraste medido en OKLCH:
   tinta 14,7:1, tinta-3 7,6:1, timbre 8,0:1 sobre la hoja; borde de campos 3,1:1. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --escritorio:   oklch(17% 0.012 255);
  --escritorio-2: oklch(22% 0.014 255);
  --hoja:         oklch(21.5% 0.012 255);
  --hoja-2:       oklch(26% 0.013 255);
  --regla:        oklch(31% 0.012 255);
  --regla-fuerte: oklch(52% 0.014 255);
  --tinta:        oklch(94% 0.008 92);
  --tinta-2:      oklch(86% 0.009 92);
  --tinta-3:      oklch(72% 0.010 92);
  --timbre:       oklch(76% 0.13 262);
  --timbre-2:     oklch(84% 0.10 262);
  --timbre-fondo: oklch(32% 0.07 262);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --escritorio:   oklch(17% 0.012 255);
    --escritorio-2: oklch(22% 0.014 255);
    --hoja:         oklch(21.5% 0.012 255);
    --hoja-2:       oklch(26% 0.013 255);
    --regla:        oklch(31% 0.012 255);
    --regla-fuerte: oklch(52% 0.014 255);
    --tinta:        oklch(94% 0.008 92);
    --tinta-2:      oklch(86% 0.009 92);
    --tinta-3:      oklch(72% 0.010 92);
    --timbre:       oklch(76% 0.13 262);
    --timbre-2:     oklch(84% 0.10 262);
    --timbre-fondo: oklch(32% 0.07 262);
  }
}
:root[data-theme="light"] { color-scheme: light; }

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

.h {
  margin: 0;
  min-height: 100vh;
  background: var(--escritorio);
  color: var(--tinta);
  font-family: var(--f-display);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;
  max-width: 100%;
}
.h a { color: var(--timbre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.h a:hover { color: var(--timbre-2); text-decoration-thickness: 2px; }
.h :focus-visible { outline: 2px solid var(--timbre); outline-offset: 3px; border-radius: var(--r); }
.h ::selection { background: var(--timbre-fondo); color: var(--tinta); }

.h-skip { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--tinta); color: var(--hoja); padding: var(--space-sm) var(--space-lg); font-family: var(--f-sans); font-size: var(--fs-small); }
.h a.h-skip { color: var(--hoja); }
.h-skip:focus { left: var(--space-md); top: var(--space-md); }

/* membrete: wordmark y dos accesos, sobre el escritorio */
.h-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: calc(var(--ancho-hoja) + var(--ancho-sumilla) + 2 * var(--space-lg)); margin: 0 auto; padding: var(--space-md) var(--space-lg); min-height: 64px; }
.h .h-marca { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--tinta); font-family: var(--f-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; text-decoration: none; }
.h .h-marca:hover { color: var(--tinta); }
.h-marca svg { width: 22px; height: 22px; }
.h-top-nav { display: flex; align-items: center; gap: var(--space-lg); font-family: var(--f-sans); font-size: var(--fs-ui); }
.h .h-top-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-2); text-decoration: none; }
.h .h-top-nav a:hover { color: var(--tinta); text-decoration: underline; }
.h .h-top-nav a[aria-current="page"] { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--timbre); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* página: hoja + sumilla */
.h-pagina { display: grid; grid-template-columns: minmax(0, 1fr); max-width: calc(var(--ancho-hoja) + var(--ancho-sumilla) + 2 * var(--space-lg)); margin: 0 auto; padding: 0 var(--space-lg) var(--space-3xl); }
.h-hoja { background: var(--hoja); border: 1px solid var(--regla-fuerte); border-top: 0; padding: 0 var(--space-3xl); min-width: 0; width: 100%; max-width: var(--ancho-hoja); justify-self: start; }
.h-sec { padding: var(--space-3xl) 0; border-top: 1px solid var(--regla); }
.h-sec:first-child { border-top: 0; padding-top: var(--space-2xl); }

/* sumilla: el índice de la página, escrito como la primera hoja de un escrito.
   Angosto: una fila de enlaces que se desliza; ancho: columna fija a la derecha del escritorio. */
.h-sumilla { background: var(--hoja); border: 1px solid var(--regla-fuerte); border-bottom: 0; padding: var(--space-sm) var(--space-3xl) 0; width: 100%; max-width: var(--ancho-hoja); justify-self: start; min-width: 0; font-size: 1rem; line-height: 1.35; }
.h-sumilla-t { display: none; margin: 0 0 var(--space-sm); font-family: var(--f-sans); font-size: var(--fs-small); font-weight: 700; color: var(--tinta-3); }
.h-sumilla ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-lg); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.h-sumilla li { flex: none; scroll-snap-align: start; }
.h-sumilla a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--tinta-2); text-decoration: none; }
.h-sumilla a:hover { color: var(--tinta); }
.h-sumilla a[aria-current="location"] { border-bottom-color: var(--timbre); color: var(--tinta); }
.h-sumilla a[aria-current="location"] .h-lo { color: var(--timbre); }
.h-sumilla .h-lo { font-size: 0.78em; text-decoration: none; margin-right: 0.4em; }

/* la fórmula del escrito, corrida dentro del título */
.h-lo { font-family: var(--f-display); font-weight: 800; font-size: 0.5em; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; margin-right: 0.5em; text-decoration: underline; text-decoration-color: var(--timbre); text-decoration-thickness: 2px; text-underline-offset: 0.34em; vertical-align: 0.12em; }
.h-h1, .h-h2, .h-h3 { font-family: var(--f-display); color: var(--tinta); margin: 0; overflow-wrap: anywhere; min-width: 0; }
.h-h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.06; letter-spacing: -0.015em; max-width: 24ch; }
.h-h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; max-width: 30ch; }
.h-h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.25; margin-top: var(--space-2xl); }
.h-p { margin: var(--space-md) 0 0; max-width: 62ch; color: var(--tinta-2); }
.h-lead { margin: var(--space-lg) 0 0; max-width: 56ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--tinta-2); }
.h-nota { margin: var(--space-md) 0 0; max-width: 62ch; font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.6; color: var(--tinta-3); }

/* acciones */
.h-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.h .h-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--tinta); border-radius: var(--r); background: var(--tinta); color: var(--hoja); font-family: var(--f-sans); font-size: var(--fs-ui); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.h .h-btn:hover { background: var(--timbre); border-color: var(--timbre); color: var(--hoja); text-decoration: none; }
.h .h-btn:active { background: var(--timbre-2); border-color: var(--timbre-2); }
.h .h-btn:focus-visible { outline-offset: 3px; }
.h .h-btn:disabled { background: var(--regla-fuerte); border-color: var(--regla-fuerte); color: var(--tinta); cursor: not-allowed; }
.h .h-btn.is-linea { background: transparent; color: var(--tinta); }
.h .h-btn.is-linea:hover { background: var(--hoja-2); color: var(--tinta); border-color: var(--tinta); }
.h .h-enlace { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-sans); font-size: var(--fs-ui); }

/* registro: filas con regla, sin bordes de tarjeta */
.h-reg { margin: var(--space-xl) 0 0; padding: 0; }
.h-reg > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-lg); padding: var(--space-md) 0; border-top: 1px solid var(--regla); }
.h-reg > div:last-child { border-bottom: 1px solid var(--regla); }
.h-sec > .h-reg:last-child > div:last-child { border-bottom: 0; }
.h-reg dt { font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-ui); color: var(--tinta); line-height: 1.5; }
.h-reg dd { margin: 0; color: var(--tinta-2); font-size: var(--fs-ui); line-height: 1.6; max-width: 62ch; }

/* plegables */
.h-plegable { border-top: 1px solid var(--regla); }
.h-plegable:last-of-type { border-bottom: 1px solid var(--regla); }
.h-plegable-sec { margin-top: var(--space-md); }
.h-plegable > summary { display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; padding: var(--space-sm) 0; font-family: var(--f-display); font-weight: 800; font-size: 1.125rem; line-height: 1.35; color: var(--tinta); cursor: pointer; list-style: none; }
.h-plegable > summary::-webkit-details-marker { display: none; }
.h-plegable > summary::before { content: "+"; flex: none; width: 24px; text-align: center; font-family: var(--f-sans); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--timbre); }
.h-plegable[open] > summary::before { content: "\2212"; }
.h-plegable > summary:hover { color: var(--timbre); }
.h-plegable-cuerpo { padding: 0 0 var(--space-lg) calc(24px + var(--space-sm)); max-width: calc(62ch + 36px); color: var(--tinta-2); }
.h-plegable-cuerpo p { margin: 0 0 var(--space-md); }
.h-plegable-cuerpo p:last-child { margin-bottom: 0; }
.h-plegable-cuerpo ul { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }

/* tablas: solo reglas horizontales */
.h-tabla-wrap { overflow-x: auto; margin-top: var(--space-xl); }
.h-tabla { width: 100%; border-collapse: collapse; font-family: var(--f-sans); font-size: var(--fs-ui); line-height: 1.5; font-variant-numeric: tabular-nums; }
.h-tabla caption { text-align: left; padding: 0 0 var(--space-sm); color: var(--tinta-3); font-size: var(--fs-small); caption-side: top; }
.h-tabla th, .h-tabla td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-top: 1px solid var(--regla); }
.h-tabla thead th { border-top: 0; border-bottom: 1px solid var(--regla-fuerte); font-weight: 700; color: var(--tinta); }
.h-tabla tbody th { font-weight: 700; color: var(--tinta); }
.h-tabla td { color: var(--tinta-2); }
.h-tabla tbody tr:last-child th, .h-tabla tbody tr:last-child td { border-bottom: 1px solid var(--regla-fuerte); }

/* pie: una frase y los accesos */
.h-pie { max-width: calc(var(--ancho-hoja) + var(--ancho-sumilla) + 2 * var(--space-lg)); margin: 0 auto; padding: var(--space-2xl) var(--space-lg) var(--space-3xl); }
.h-pie-frase { margin: 0; max-width: 34ch; font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--tinta); }
.h-pie-lista { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: var(--space-md) 0 0; padding: 0; list-style: none; font-family: var(--f-sans); font-size: var(--fs-ui); }
.h .h-pie-lista a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); }
.h .h-pie-lista a:hover { color: var(--timbre); }

/* timbre de verificación: los campos reales de la respuesta */
.h-timbre { position: relative; margin: 0; padding: var(--space-md) var(--space-lg); border: 2px solid var(--timbre); border-radius: var(--r); color: var(--timbre); background: var(--hoja); font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.7; transform: rotate(-2deg); transform-origin: 50% 50%; }
.h-timbre::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--timbre); border-radius: 1px; pointer-events: none; }
.h-timbre-t { display: block; margin: 0 0 var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--timbre); font-family: var(--f-sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.h-timbre dl { margin: 0; display: grid; gap: 0; }
.h-timbre dl > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); }
.h-timbre dt { color: var(--timbre); opacity: 1; }
.h-timbre dt::after { content: ":"; }
.h-timbre dd { margin: 0; font-weight: 700; }
.h .h-timbre a { color: var(--timbre); font-family: var(--f-sans); font-size: 0.8125rem; font-weight: 700; }


/* formularios */
.h-campo { display: grid; gap: 6px; }
.h-label { font-family: var(--f-sans); font-size: var(--fs-ui); font-weight: 700; color: var(--tinta); }
.h-input { min-height: 48px; width: 100%; border: 1px solid var(--regla-fuerte); border-radius: var(--r); background: var(--hoja); padding: 0 var(--space-md); font-family: var(--f-sans); font-size: 1rem; color: var(--tinta); }
.h-input:hover { border-color: var(--tinta-3); }
.h-input:focus-visible { outline: 2px solid var(--timbre); outline-offset: 2px; border-color: var(--regla-fuerte); }
.h-input:disabled { background: var(--hoja-2); color: var(--tinta-3); cursor: not-allowed; }
.h-ayuda { margin: 0; font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.5; color: var(--tinta-3); }
.h-error { margin: 0; font-family: var(--f-sans); font-size: var(--fs-ui); color: var(--tinta); border-left: 2px dotted var(--tinta); padding-left: var(--space-sm); }
.h-exito { margin: 0; font-family: var(--f-sans); font-size: var(--fs-ui); color: var(--tinta); border-left: 2px solid var(--timbre); padding-left: var(--space-sm); }

/* hoja sin sumilla (formularios) */
.h-pagina.is-sola { grid-template-columns: minmax(0, var(--ancho-hoja)); justify-content: start; }
.h-pagina.is-sola .h-hoja { border-top: 1px solid var(--regla-fuerte); }

@media (min-width: 1240px) {
  .h-pagina:not(.is-sola) { grid-template-columns: minmax(0, var(--ancho-hoja)) var(--ancho-sumilla); column-gap: 0; padding-left: var(--space-lg); padding-right: var(--space-lg); justify-content: center; align-items: start; }
  .h-sumilla { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-lg); background: transparent; border: 0; padding: var(--space-3xl) 0 0 var(--space-lg); }
  .h-sumilla-t { display: block; }
  .h-sumilla ol { display: grid; gap: 0; overflow: visible; }
  .h-sumilla a { display: block; min-height: 0; white-space: normal; padding: var(--space-xs) 0 var(--space-xs) var(--space-md); border-bottom: 0; border-left: 2px solid transparent; }
  .h-sumilla a:hover { background: var(--escritorio-2); }
  .h-sumilla a[aria-current="location"] { border-left-color: var(--timbre); }
  .h-hoja { grid-column: 1; grid-row: 1; border-top: 1px solid var(--regla-fuerte); }
}
@media (max-width: 899px) {
  .h-hoja, .h-sumilla { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .h-reg > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (max-width: 639px) {
  .h-top { padding: var(--space-sm) var(--space-md); }
  .h-top-nav { gap: var(--space-md); }
  .h .h-top-nav .h-solo-ancho { display: none; }
  .h-pagina { padding: 0 0 var(--space-2xl); }
  .h-hoja, .h-sumilla { border-left: 0; border-right: 0; padding-left: var(--space-md); padding-right: var(--space-md); }
  .h-sec { padding: var(--space-2xl) 0; }
  .h-pie { padding-left: var(--space-md); padding-right: var(--space-md); }
  .h-pie-frase { font-size: 1.5rem; }
  .h-timbre { transform: rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .h .h-btn, .h a { transition: none; }
}

/* interruptor de tema: un botón de 44 px en el membrete, sin animación (el cambio es instantáneo) */
.h-tema { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--regla-fuerte); border-radius: var(--r); background: transparent; color: var(--tinta); cursor: pointer; }
.h-tema:hover { background: var(--hoja-2); border-color: var(--tinta-3); }
.h-tema:active { background: var(--timbre-fondo); }
.h-tema svg { width: 20px; height: 20px; }
.h-tema .h-tema-sol, .h-tema .h-tema-luna { display: none; }
:root[data-theme="dark"] .h-tema .h-tema-sol { display: block; }
:root:not([data-theme="dark"]) .h-tema .h-tema-luna { display: block; }

/* Entrada al hacer scroll (la técnica es CSS puro, sin librería): cada bloque sube 24 px y aparece mientras
   entra en pantalla, atado al desplazamiento con animation-timeline: view(). El escalonado va en el RANGO,
   no en un retraso: título entry 5-40 %, segundo bloque 15-50 %, el resto 25-60 %. Solo transform y opacity.
   Dos reglas que no se negocian: (1) el contenido es visible por defecto, la animación solo existe dentro de
   @supports y sin reduced-motion; (2) animation-timeline y animation-range van DESPUÉS del shorthand
   animation, que los reinicia. Fallback sin soporte: IntersectionObserver; el script marca .h-espera solo en lo que ya está bajo el pliegue
   y .is-in al entrar, el CSS nunca esconde nada por su cuenta. */
@keyframes h-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes h-estampa { from { opacity: 0; transform: rotate(-2deg) scale(1.22); } 38% { opacity: 1; } to { opacity: 1; transform: rotate(-2deg) scale(1); } }
@keyframes h-estampa-m { from { opacity: 0; transform: rotate(-1.2deg) scale(1.22); } 38% { opacity: 1; } to { opacity: 1; transform: rotate(-1.2deg) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .h-sec:not(:first-child) > *,
    .h-sec:first-child > .h-hero-cita, .h-sec:first-child > .h-cifras-linea, .h-sec:first-child > .h-reg { animation: h-rise 1ms linear both; animation-timeline: view(); animation-range: entry 25% entry 60%; }
    .h-sec:not(:first-child) > :first-child { animation-range: entry 5% entry 40%; }
    .h-sec:not(:first-child) > :nth-child(2) { animation-range: entry 15% entry 50%; }
  }
  @supports not (animation-timeline: view()) {
    .h-espera { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
    .h-espera.is-in { opacity: 1; transform: none; }
  }
  /* El timbre se estampa una vez, al entrar a pantalla: cae de 1,22 a 1 con la inclinación que ya tiene.
     Hard rule 7: un timbre se estampa, no se desvanece; es la única interacción con carácter de la página y
     solo existe para este objeto (los cuatro campos reales de la respuesta). Sin JS el timbre ya está puesto:
     el script marca .sello-espera solo cuando ya observa el timbre. */
  .h-timbre.sello-espera { opacity: 0; }
  .h-timbre.sello-puesto { animation: h-estampa .36s var(--ease-out) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .h-timbre.sello-puesto { animation-name: h-estampa-m; }
}
/* @comun-fin */

/* ------------------------------------------------------------------ landing */

.h-hero-cita { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--space-xl) var(--space-2xl); align-items: center; margin: var(--space-2xl) 0 0; padding: var(--space-xl) 0; border-top: 1px solid var(--regla-fuerte); border-bottom: 1px solid var(--regla-fuerte); }
.h-cita-q { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; line-height: 1.35; color: var(--tinta); quotes: "\201C" "\201D"; max-width: 34ch; }
.h-cita-q::before { content: open-quote; }
.h-cita-q::after { content: close-quote; }
.h-cita-pie { margin: var(--space-md) 0 0; font-family: var(--f-sans); font-size: var(--fs-small); color: var(--tinta-3); }
.h-cifras-linea { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; font-family: var(--f-sans); font-size: var(--fs-small); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.h-cifras-linea b { color: var(--tinta); font-weight: 700; }

/* caja de consulta del héroe: un renglón de escrito. 64 px de alto con una línea, crece hasta 8 líneas con
   el texto; Enter envía y Mayús+Enter baja de línea. Hard rule 7 no aplica: es el campo, no adorno. */
.h-caja { margin: var(--space-xl) 0 0; max-width: 672px; }
.h-caja-rotulo { display: block; margin: 0 0 var(--space-xs); font-family: var(--f-sans); font-size: var(--fs-small); font-weight: 700; color: var(--tinta-3); }
.h-caja-marco { display: flex; align-items: flex-end; gap: var(--space-xs); padding: var(--space-2xs); border: 1px solid var(--regla-fuerte); border-radius: var(--r); background: var(--hoja); }
.h-caja-marco:hover { border-color: var(--tinta-3); }
.h-caja-marco:focus-within { outline: 2px solid var(--timbre); outline-offset: 2px; }
.h-caja textarea { flex: 1 1 auto; display: block; min-width: 0; height: 64px; min-height: 64px; margin: 0; padding: 20px var(--space-md); border: 0; border-radius: 0; background: transparent; color: var(--tinta); font-family: var(--f-sans); font-size: 1rem; line-height: 24px; resize: none; overflow-y: hidden; outline: none; }
.h-caja textarea::placeholder { color: var(--tinta-3); opacity: 1; }
.h-caja-env { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 var(--space-2xs) var(--space-2xs) 0; padding: 0; border: 1px solid var(--tinta); border-radius: var(--r); background: var(--tinta); color: var(--hoja); cursor: pointer; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.h-caja-env svg { width: 22px; height: 22px; }
.h-caja-env:hover:not(:disabled) { background: var(--timbre); border-color: var(--timbre); }
.h-caja-env:active:not(:disabled) { background: var(--timbre-2); border-color: var(--timbre-2); }
.h-caja-env:focus-visible { outline: 2px solid var(--timbre); outline-offset: 3px; }
.h-caja-env:disabled { background: var(--hoja-2); border-color: var(--regla); color: var(--tinta-3); cursor: not-allowed; }
.h-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.h-chip { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--regla-fuerte); border-radius: var(--r); background: transparent; color: var(--tinta-2); font-family: var(--f-sans); font-size: var(--fs-small); text-align: left; cursor: pointer; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.h-chip:hover { background: var(--hoja-2); border-color: var(--tinta-3); color: var(--tinta); }
.h-chip:active { background: var(--timbre-fondo); }
.h-chip:focus-visible { outline: 2px solid var(--timbre); outline-offset: 2px; }
.h-caja-pie { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: var(--space-xs) 0 0; }

/* actas: la consulta, los candidatos y el veredicto */
.h-acta { margin: var(--space-xl) 0 0; padding: 0 0 0 var(--space-lg); border-left: 2px solid var(--tinta); }
.h-acta + .h-acta { margin-top: var(--space-2xl); }
.h-consulta { margin: 0; font-family: var(--f-sans); font-size: var(--fs-ui); font-weight: 700; color: var(--tinta); }
.h-consulta span { font-weight: 400; color: var(--tinta-3); margin-right: var(--space-xs); }
.h-cand { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 0; }
.h-cand > li { padding: var(--space-md) 0; border-top: 1px solid var(--regla); }
.h-cand > li:last-child { border-bottom: 1px solid var(--regla); }
.h-cand-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-md); font-family: var(--f-sans); font-size: var(--fs-ui); }
.h-cand-nombre { font-weight: 700; color: var(--tinta); }
.h-cand-id { font-variant-numeric: tabular-nums; color: var(--tinta-3); font-size: var(--fs-small); }
.h-estado { font-family: var(--f-sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); padding-bottom: 1px; border-bottom: 2px solid var(--timbre); }
.h-estado.is-fuera { border-bottom-style: dashed; border-bottom-color: var(--tinta-3); color: var(--tinta-3); }
.h-estado.is-nada { border-bottom-style: dotted; border-bottom-color: var(--tinta); }
.h-cand-texto { margin: var(--space-xs) 0 0; font-size: var(--fs-body); color: var(--tinta); max-width: 62ch; }
.h-cand-por { margin: var(--space-xs) 0 0; font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.6; color: var(--tinta-3); max-width: 62ch; }
.h-cand-seis { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
.h-cand-seis > li { padding: var(--space-sm) 0; }
.h-cand-seis > li:nth-last-child(2) { border-bottom: 1px solid var(--regla); }
.h-veredicto { margin: var(--space-md) 0 0; max-width: 62ch; color: var(--tinta-2); }
.h-veredicto b { color: var(--tinta); }
.h-motivo { margin: var(--space-sm) 0 0; max-width: 62ch; font-family: var(--f-sans); font-size: var(--fs-ui); line-height: 1.6; color: var(--tinta); border-left: 2px dotted var(--tinta); padding-left: var(--space-md); }

.h-derog { margin: var(--space-xl) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md) var(--space-xl); padding: var(--space-md) 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); }
.h-derog p { margin: 0; }
.h-derog-q { font-family: var(--f-sans); font-size: var(--fs-small); color: var(--tinta-3); }
.h-derog-t { font-weight: 800; font-size: 1.25rem; color: var(--tinta); }
.h-derog-meta { font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.6; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.h-video { margin: var(--space-2xl) 0 0; max-width: 100%; }
.h-video .h-video-oscuro { display: none; }
:root[data-theme="dark"] .h-video .h-video-claro { display: none; }
:root[data-theme="dark"] .h-video .h-video-oscuro { display: block; }
.h-video video { display: block; width: 100%; height: auto; background: var(--escritorio); border: 1px solid var(--regla-fuerte); border-radius: var(--r); aspect-ratio: 16 / 9; }
.h-video figcaption { margin-top: var(--space-sm); font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.6; color: var(--tinta-3); }

/* cifras: el resultado de la prueba, una por fila */
.h-cifras { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.h-cifras > li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding: var(--space-md) 0; border-top: 1px solid var(--regla); }
.h-cifras > li:last-child { border-bottom: 1px solid var(--regla); }
.h-cifra { font-family: var(--f-display); font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.h-cifra small { font-size: 0.5em; font-weight: 400; color: var(--tinta-3); margin-left: 2px; }
.h-cifras > li.is-cero .h-cifra { color: var(--timbre); }
.h-cifras p { margin: 0; padding-top: 0.45rem; max-width: 62ch; color: var(--tinta-2); font-size: var(--fs-ui); line-height: 1.6; }
.h-cifras b { color: var(--tinta); }

.h-cobertura { margin-top: var(--space-2xl); }
.h-brecha { margin: var(--space-xl) 0 0; padding: var(--space-md) 0 var(--space-md) var(--space-lg); border-left: 2px dotted var(--tinta); max-width: 66ch; }
.h-brecha-t { margin: 0 0 var(--space-xs); font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-ui); color: var(--tinta); }
.h-brecha p { margin: 0; color: var(--tinta-2); font-size: var(--fs-ui); line-height: 1.65; }

/* conectores MCP, plegados */
.h-mcp-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; align-items: start; }
.h-mcp-lista li { padding-top: var(--space-md); border-top: 1px solid var(--regla-fuerte); min-width: 0; }
.h-mcp-cab { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--f-sans); font-weight: 700; color: var(--tinta); }
.h-mcp-cab img { width: 24px; height: 24px; }
.h-mcp-det { margin: var(--space-sm) 0 0; font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.6; color: var(--tinta-3); }
.h-cmd { margin: var(--space-sm) 0 0; padding: var(--space-sm) var(--space-md); background: var(--hoja-2); border: 1px solid var(--regla); border-radius: var(--r); font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--tinta); overflow-wrap: anywhere; white-space: pre-wrap; }
.h-mcp-acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.h-mcp-act { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--regla-fuerte); border-radius: var(--r); background: var(--hoja); color: var(--tinta); font-family: var(--f-sans); font-size: var(--fs-small); font-weight: 700; cursor: pointer; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.h-mcp-act:hover { background: var(--hoja-2); border-color: var(--tinta); }
.h-mcp-act:active { background: var(--timbre-fondo); }
.h-mcp-act.is-hecho { border-color: var(--timbre); color: var(--timbre); }
.h-mcp-act.is-falla { border-style: dashed; }
.h-integra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.h-integra li { padding-top: var(--space-md); border-top: 1px solid var(--regla-fuerte); }
.h-integra-n { margin: var(--space-xs) 0 0; font-family: var(--f-sans); font-weight: 700; color: var(--tinta); }
.h-integra-d { margin: var(--space-2xs) 0 0; font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.6; color: var(--tinta-3); }
.h-integra-marca { font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-small); color: var(--tinta); letter-spacing: 0.08em; }
.h-integra img { height: 14px; width: auto; }

/* planes en filas */
.h-planes { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.h-planes > li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-md) var(--space-lg); padding: var(--space-md) 0; border-top: 1px solid var(--regla); align-items: baseline; }
.h-planes > li:last-child { border-bottom: 1px solid var(--regla); }
.h-plan-n { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; color: var(--tinta); }
.h-plan-p { font-family: var(--f-sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta); }
.h-plan-p small { display: block; font-weight: 400; font-size: var(--fs-small); color: var(--tinta-3); }
.h-plan-d { margin: 0; font-family: var(--f-sans); font-size: var(--fs-ui); line-height: 1.55; color: var(--tinta-2); }
.h-planes > li.is-pago .h-plan-n { text-decoration: underline; text-decoration-color: var(--timbre); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.h-por-tanto-t { margin-top: var(--space-3xl); }

@media (max-width: 899px) {
  .h-hero-cita { grid-template-columns: minmax(0, 1fr); }
  .h-timbre { max-width: 280px; }
  .h-mcp-lista, .h-integra, .h-cand-seis, .h-derog { grid-template-columns: minmax(0, 1fr); }
  .h-cand-seis > li:nth-last-child(2) { border-bottom: 0; }
  .h-planes > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .h-planes > li .h-plan-d { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .h-cifras > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .h-cifra { font-size: 2rem; }
  .h-acta { padding-left: var(--space-md); }
  .h-cita-q { font-size: 1.5rem; }
}