@font-face{font-family:'Archivo';font-style:normal;font-weight:300 800;font-stretch:62% 125%;font-display:swap;src:url('../fonts/archivo-latin-ext-normal-300_800.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 800;font-stretch:62% 125%;font-display:swap;src:url('../fonts/archivo-latin-normal-300_800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Courier Prime';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/courier-latin-ext-italic-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/courier-latin-italic-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/courier-latin-ext-normal-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/courier-latin-normal-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/courier-latin-ext-normal-700.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/courier-latin-normal-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   MasarLoop · El Registro Sellado
   Un registro público impreso: papel pautado, tinta de carbón,
   sellos de caucho y marcas de recuento.
   ============================================================ */

/* --- Escala declarada de tinta (raise: registro de exposición) ---
   Ninguna densidad es arbitraria. Siete pasos, del papel al carbón.
   D0 papel · D1 banda · D2 regla fina · D3 regla · D4 tinta débil
   D5 tinta secundaria · D6 tinta plena                            */

:root {
  color-scheme: light dark;

  --d0: #f4f5f1;   /* papel */
  --d1: #cfe2d4;   /* banda pautada */
  --d2: #dfe6dd;   /* filete claro */
  --d3: #b3c1b6;   /* regla */
  --d4: #7d8a86;   /* tinta débil */
  --d5: #4a565c;   /* tinta secundaria */
  --d6: #131a20;   /* tinta plena, carbón */

  --stamp:  #55379f;  /* violeta de sello */
  --stamp-ink: #55379f;
  --void:   #b52a17;  /* bermellón de anulación y de HOY */
  --seal:   #0b6647;  /* verde de marca, densidad de texto */
  --seal-fill: #24b47e;
  --seal-soft: #dcf0e6;

  --carbon-bg: #171b1d;  /* la copia al carbón, incrustada en el papel */
  --carbon-ink: #e9eae3;
  --carbon-rule: #333c3e;

  --band-h: 2.75rem;     /* altura de banda = altura de asiento */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --column: 82rem;
  --margin-rule: 2.6rem; /* filete de margen del libro mayor */

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --typed: 'Courier Prime', ui-monospace, 'SF Mono', Menlo, monospace;

  --lift: 0 1px 1px rgb(19 26 32 / .05), 0 6px 14px -6px rgb(19 26 32 / .22);
  --lift-2: 0 3px 3px rgb(19 26 32 / .07), 0 14px 26px -12px rgb(19 26 32 / .32);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* La copia al carbón: mismo registro, otra materia. */
:root[data-paper="carbon"] {
  --d0: #14181a;
  --d1: #1d2325;
  --d2: #232a2c;
  --d3: #394244;
  --d4: #8a9694;
  --d5: #a9b4b1;
  --d6: #eceee7;

  --stamp: #b49bff;
  --stamp-ink: #b49bff;
  --void: #ff7256;
  --seal: #45d79a;
  --seal-fill: #24b47e;
  --seal-soft: #17332a;

  --carbon-bg: #0c0f10;
  --carbon-ink: #eceee7;
  --carbon-rule: #2b3335;

  --lift: 0 1px 1px rgb(0 0 0 / .4), 0 6px 14px -6px rgb(0 0 0 / .6);
  --lift-2: 0 3px 3px rgb(0 0 0 / .5), 0 14px 26px -12px rgb(0 0 0 / .68);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-paper="paper"]) {
    --d0: #14181a; --d1: #1d2325; --d2: #232a2c; --d3: #394244;
    --d4: #8a9694; --d5: #a9b4b1; --d6: #eceee7;
    --stamp: #b49bff; --stamp-ink: #b49bff; --void: #ff7256;
    --seal: #45d79a; --seal-fill: #24b47e; --seal-soft: #17332a;
    --carbon-bg: #0c0f10; --carbon-ink: #eceee7; --carbon-rule: #2b3335;
    --lift: 0 1px 1px rgb(0 0 0 / .4), 0 6px 14px -6px rgb(0 0 0 / .6);
    --lift-2: 0 3px 3px rgb(0 0 0 / .5), 0 14px 26px -12px rgb(0 0 0 / .68);
  }
}

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

html {
  background: var(--d0);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--d3) var(--d0);
}

body {
  margin: 0;
  background: var(--d0);
  color: var(--d6);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Superficies del navegador: también son parte del registro. */
::selection { background: var(--seal-fill); color: #08110d; }
:root[data-paper="carbon"] ::selection,
input, textarea { caret-color: var(--void); }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: var(--d1); }
::-webkit-scrollbar-thumb { background: var(--d3); border: 3px solid var(--d1); }
::-webkit-scrollbar-thumb:hover { background: var(--d4); }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--void);
  outline-offset: 3px;
  border-radius: 1px;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--seal); text-decoration: none; text-underline-offset: .22em;
    text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }

/* ---------- voces tipográficas ----------
   Archivo = lo que el registro trae impreso de fábrica.
   Courier Prime = lo que se escribe a máquina dentro de él.  */

.typed { font-family: var(--typed); font-variant-numeric: tabular-nums; }

.label {
  font-family: var(--typed);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--d5);
}

.num { font-family: var(--typed); font-variant-numeric: tabular-nums; }

/* ---------- estructura del libro ---------- */

.sheet {
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* El filete de margen: una sola línea continua que recorre
   el documento entero de la primera anotación a la última. */
.book {
  position: relative;
  max-width: var(--column);
  margin-inline: auto;
}
.book::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--gutter) + var(--margin-rule));
  width: 1px;
  background: var(--void);
  opacity: .34;
  pointer-events: none;
}
@media (max-width: 47.99em) {
  .book::before { inset-inline-start: var(--gutter); opacity: .26; }
}

/* Cabecera del libro */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--d0) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d3);
}
.masthead__inner {
  max-width: var(--column); margin-inline: auto;
  padding: .5rem var(--gutter);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  min-height: 3.5rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--d6); font-weight: 700; font-size: 1.2rem;
  font-stretch: 108%; letter-spacing: -.035em;
}
.wordmark:hover { text-decoration: none; color: var(--d6); }
.wordmark svg { width: 1.7rem; height: 1.7rem; flex: none; }

.masthead__folio { margin-inline-start: auto; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.masthead nav { display: flex; gap: 1.15rem; }
.controls { display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 63.99em) { .masthead .controls { display: none; } }
.masthead nav a { color: var(--d5); font-family: var(--typed); font-size: .8125rem; letter-spacing: .04em; }
.masthead nav a:hover { color: var(--d6); }
@media (max-width: 63.99em) { .masthead nav { display: none; } }

/* Conmutadores: segmentos rotulados como el registro los llamaría */
.switch { display: inline-flex; border: 1px solid var(--d3); background: var(--d0); }
.switch button, .switch a {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--typed); font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--d5); padding: .42rem .6rem; line-height: 1;
  min-height: 30px;
}
.switch button + button, .switch a + a { border-inline-start: 1px solid var(--d3); }
.switch [aria-pressed="true"], .switch [aria-current="true"] { background: var(--d6); color: var(--d0); }
.switch button:hover:not([aria-pressed="true"]),
.switch a:hover:not([aria-current="true"]) { color: var(--d6); background: var(--d1); }

/* ---------- folios ---------- */

.folio { padding-top: clamp(3.25rem, 7vw, 6.5rem); padding-bottom: clamp(3.25rem, 7vw, 6.5rem);
  position: relative; }
.folio + .folio { border-top: 1px solid var(--d3); }

.folio__head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-inline-start: var(--margin-rule);
  margin-bottom: .9rem;
}
@media (max-width: 47.99em) { .folio__head { padding-inline-start: 0; } }
.folio__no {
  font-family: var(--typed); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; color: var(--void); flex: none;
}
.folio__rule { flex: 1 1 auto; height: 1px; background: var(--d3); }

.folio__body { padding-inline-start: var(--margin-rule); }
@media (max-width: 47.99em) { .folio__body { padding-inline-start: 0; } }

h2.title {
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  font-weight: 680; font-stretch: 104%;
  letter-spacing: -.035em; line-height: 1.04;
  text-wrap: balance; max-width: 22ch;
}
.lede {
  margin-top: 1rem; max-width: 62ch;
  color: var(--d5); font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  line-height: 1.6; text-wrap: pretty;
}
h3 { font-size: 1.1875rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }

/* ---------- la portada ---------- */

.cover { padding-top: clamp(2.25rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.ledgerhead {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.4rem;
  padding-block: .55rem;
  border-block: 1px solid var(--d6);
  box-shadow: 0 3px 0 -2px var(--d6);
}
.ledgerhead > * { font-family: var(--typed); font-size: .6875rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--d5); }
.ledgerhead b { color: var(--d6); font-weight: 700; }

h1.headline {
  margin-top: clamp(1.5rem, 2.6vw, 2.1rem);
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  font-weight: 720; font-stretch: 112%;
  letter-spacing: -.04em; line-height: .97;
  text-wrap: balance; max-width: 15ch;
}
h1.headline em { font-style: normal; color: var(--seal); }
h1.headline { max-width: 17ch; }

.cover__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(23rem, 1.04fr);
  align-items: start;
}
@media (max-width: 63.99em) { .cover__grid { grid-template-columns: 1fr; } }

.cover__lede { margin-top: 1.35rem; max-width: 46ch; color: var(--d5);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.58; text-wrap: pretty; }

.credentials { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.credentials li { display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--typed); font-size: .75rem; letter-spacing: .02em; color: var(--d5); }
.credentials svg { width: .95rem; height: .95rem; color: var(--seal); flex: none; }

/* ---------- el asiento pendiente (acción principal) ---------- */

.entry {
  margin-top: clamp(1.9rem, 3.4vw, 2.6rem);
  border: 1px solid var(--d6);
  background: var(--d0);
  box-shadow: var(--lift);
  position: relative;
}
.entry__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .95rem; border-bottom: 1px solid var(--d3);
  background: var(--d1);
}
.entry__form { padding: 1.05rem .95rem 1.15rem; display: grid; gap: .75rem; }
.entry__line { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }

.ruled {
  flex: 1 1 15rem; min-width: 0;
  border: 0; border-bottom: 2px dotted var(--d4);
  background: transparent; color: var(--d6);
  font-family: var(--typed); font-size: 1rem;
  padding: .55rem .2rem; min-height: 48px;
}
.ruled::placeholder { color: var(--d5); }
.ruled:focus { outline: none; border-bottom-color: var(--void); border-bottom-style: solid; }
.ruled:focus-visible { outline: 2px solid var(--void); outline-offset: 4px; }

.press {
  appearance: none; cursor: pointer; flex: none;
  border: 2px solid var(--d6); background: var(--d6); color: var(--d0);
  font-family: var(--typed); font-weight: 700; font-size: .8125rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .8rem 1.4rem; min-height: 48px;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  box-shadow: var(--lift);
}
.press:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }
.press:active { transform: translateY(1px) scale(.994); box-shadow: none; }
.press svg { width: 1rem; height: 1rem; }
.press--ghost { background: transparent; color: var(--d6); box-shadow: none; }
.press--ghost:hover { background: var(--d1); }

.entry__note { font-family: var(--typed); font-size: .8125rem; line-height: 1.5; color: var(--d5); }
.entry__note[data-state="ok"] { color: var(--seal); }
.entry__note[data-state="error"] { color: var(--void); }

/* El sello de caucho */
.stamp {
  font-family: var(--typed); font-weight: 700;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stamp); border: 2px solid currentColor;
  padding: .28rem .5rem; line-height: 1;
  display: inline-block; white-space: nowrap;
  box-shadow: inset 0 0 0 1px currentColor;
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.stamp--seal { color: var(--seal); }
.stamp--void { color: var(--void); }
.stamp--ink  { color: var(--d5); }
.stamp--big { font-size: .8125rem; padding: .45rem .75rem; }

.stamp--rotated {
  position: absolute; inset-block-start: -1.1rem; inset-inline-end: -.6rem;
  rotate: -4deg; background: var(--d0); z-index: 2;
}
@media (max-width: 47.99em) {
  .stamp--rotated {
    position: static; display: block; width: max-content;
    margin: -1.45rem .3rem .35rem auto; rotate: -2.5deg;
  }
  .js .stamp--rotated.press-in.is-stamped { rotate: -2.5deg; }
}

/* Prensado del sello: sucede porque el visitante ha llegado, no por reloj. */
.js .press-in:not(.is-stamped) { opacity: 0; scale: 1.32; filter: blur(2px); rotate: -9deg; }
.js .press-in.is-stamped {
  opacity: 1; scale: 1; filter: blur(0); rotate: 0deg;
  transition: opacity .3s var(--ease), scale .42s var(--ease),
              filter .34s var(--ease), rotate .42s var(--ease);
}
.js .stamp--rotated.press-in.is-stamped { rotate: -4deg; }

/* ---------- asientos del roadmap ---------- */

.ledger { border-block: 1px solid var(--d6); }
.ledger__cols {
  display: grid; align-items: center; gap: .75rem;
  grid-template-columns: 8.5rem minmax(0, 1fr) 7.5rem 12.5rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--d3);
}
.ledger__cols > * { font-family: var(--typed); font-size: .6875rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--d5); }
.ledger__cols :last-child { text-align: end; }
@media (max-width: 55.99em) { .ledger__cols { display: none; } }

.row {
  display: grid; align-items: center; gap: .35rem .75rem;
  grid-template-columns: 8.5rem minmax(0, 1fr) 7.5rem 12.5rem;
  padding: .7rem .8rem;
  min-height: var(--band-h);
  position: relative;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
/* La banda pautada: el campo cromático del registro. */
.ledger .row:nth-child(odd) { background: var(--d1); }
.ledger .row + .row { border-top: 1px solid var(--d2); }
.ledger .row:hover { transform: translateY(-1px); box-shadow: var(--lift); z-index: 1; }

.row__title { font-weight: 620; letter-spacing: -.012em; }
.row__desc { grid-column: 2; color: var(--d5); font-size: .9375rem; line-height: 1.45; }
.row__id { font-family: var(--typed); font-size: .75rem; color: var(--d5); }
.row__count { display: flex; align-items: center; gap: .55rem; justify-content: flex-end; }
.row__count b { font-family: var(--typed); font-size: 1.05rem; font-weight: 700; }

@media (max-width: 55.99em) {
  .ledger:not(.ledger--compact) .row { grid-template-columns: minmax(0, 1fr) auto; padding: .85rem .7rem; }
  .ledger:not(.ledger--compact) .row__state { grid-row: 1; grid-column: 2; justify-self: end; }
  .ledger:not(.ledger--compact) .row__title { grid-row: 1; grid-column: 1; }
  .ledger:not(.ledger--compact) .row__desc { grid-row: 2; grid-column: 1 / -1; }
  .ledger:not(.ledger--compact) .row__count { grid-row: 3; grid-column: 1 / -1; justify-content: flex-start; }
  .ledger:not(.ledger--compact) .row__id { display: none; }
}

/* Marcas de recuento: se cuenta sin saber quién. */
.tally { display: inline-flex; gap: 3px; align-items: center; }
.tally svg { height: 1.05rem; width: auto; color: var(--d5); flex: none; }
.tally path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none;
  stroke-dasharray: 26; stroke-dashoffset: 26; }
.tally path { stroke-dashoffset: 0; }
.js [data-votes]:not(.is-counted) .tally path { stroke-dashoffset: 26; }
.js .is-counted .tally path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease); }
.is-counted .tally path:nth-child(2) { transition-delay: .05s; }
.is-counted .tally path:nth-child(3) { transition-delay: .1s; }
.is-counted .tally path:nth-child(4) { transition-delay: .15s; }
.is-counted .tally path:nth-child(5) { transition-delay: .2s; }

/* ---------- listas de asientos numerados ---------- */

.steps { border-top: 1px solid var(--d6); }
.step {
  display: grid; gap: .35rem 1.35rem;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  padding: 1.35rem .8rem;
  border-bottom: 1px solid var(--d3);
}
.steps .step:nth-child(even) { background: var(--d1); }
.step__no { font-family: var(--typed); font-size: 1.6rem; font-weight: 700;
  color: var(--void); line-height: 1; padding-top: .1rem; }
.step p { color: var(--d5); max-width: 58ch; margin-top: .3rem; }

/* ---------- registro de capacidades ---------- */

.entries { border-top: 1px solid var(--d6); }
.item {
  display: grid; gap: .3rem 1.35rem;
  grid-template-columns: 13rem minmax(0, 1fr);
  padding: 1.05rem .8rem;
  border-bottom: 1px solid var(--d3);
}
.entries .item:nth-child(even) { background: var(--d1); }
.item p { color: var(--d5); max-width: 62ch; }
@media (max-width: 47.99em) { .item, .step { grid-template-columns: 1fr; } .step__no { padding-top: 0; } }

/* ---------- la copia al carbón (contrato) ---------- */

.carbon {
  background: var(--carbon-bg); color: var(--carbon-ink);
  border: 1px solid var(--carbon-rule);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
.carbon__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem .9rem; border-bottom: 1px solid var(--carbon-rule);
  font-family: var(--typed); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #97a3a1;
  flex-wrap: wrap;
}
.carbon pre {
  margin: 0; padding: 1rem .9rem 1.15rem; overflow-x: auto;
  font-family: var(--typed); font-size: .8125rem; line-height: 1.62;
  color: var(--carbon-ink); tab-size: 2;
}
.carbon pre::-webkit-scrollbar-track { background: var(--carbon-bg); }
.carbon pre::-webkit-scrollbar-thumb { background: var(--carbon-rule); border-color: var(--carbon-bg); }
.tok-key { color: #8fd8ff; }
.tok-str { color: #8ee6b4; }
.tok-num { color: #ffcf7a; }
.tok-dim { color: #77837f; }
.tok-cmd { color: #d9a8ff; }

.split {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}
@media (max-width: 63.99em) { .split { grid-template-columns: 1fr; } }

/* ---------- prueba adjunta ---------- */

.exhibit { position: relative; background: var(--d0); border: 1px solid var(--d3);
  padding: .6rem; box-shadow: var(--lift-2); }
.exhibit img { border: 1px solid var(--d3); }
.exhibit figcaption { font-family: var(--typed); font-size: .75rem; color: var(--d5);
  padding: .6rem .2rem 0; line-height: 1.5; }

/* ---------- cuotas ---------- */

.quotas { display: grid; gap: 1px; background: var(--d3); border: 1px solid var(--d6); }
.quota { background: var(--d0); padding: 1.25rem 1.1rem 1.4rem; }
.quota--pro { background: var(--d1); }
.quota h3 { font-size: 1.35rem; font-stretch: 104%; }
.quota ul { margin-top: 1rem; display: grid; gap: .5rem; }
.quota li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .6rem;
  align-items: baseline; font-size: .9375rem; line-height: 1.5; }
.quota li svg { width: 1.05rem; height: 1.05rem; color: var(--seal); align-self: center; }
.quota li b { font-family: var(--typed); font-weight: 700; }
@media (min-width: 48em) { .quotas { grid-template-columns: 1fr 1fr; } }

/* ---------- ledger de retención ---------- */

.retention { border-block: 1px solid var(--d6); }
.retention .row { grid-template-columns: 14rem minmax(0, 1fr) 13rem; }
.retention .row:nth-child(odd) { background: var(--d1); }
.retention .row + .row { border-top: 1px solid var(--d2); }
@media (max-width: 55.99em) { .retention .row { grid-template-columns: 1fr; gap: .25rem; } }

/* ---------- hitos con la regla de HOY ---------- */

.milestones { position: relative; border-top: 1px solid var(--d6); }
.milestone {
  display: grid; gap: .3rem 1.35rem;
  grid-template-columns: 8.5rem minmax(0, 1fr) 9rem;
  padding: 1.15rem .8rem; border-bottom: 1px solid var(--d3);
  align-items: baseline;
}
.milestones .milestone--band { background: var(--d1); }
.milestone p { color: var(--d5); max-width: 58ch; }
.milestone--past .milestone__code { color: var(--d5); }
.milestone__code { font-family: var(--typed); font-weight: 700; font-size: .8125rem;
  letter-spacing: .1em; color: var(--d6); }
.milestone__mark { justify-self: end; }
@media (max-width: 55.99em) {
  .milestone { grid-template-columns: minmax(0,1fr) auto; }
  .milestone__mark { grid-row: 1; grid-column: 2; }
  .milestone p { grid-column: 1 / -1; }
}

/* La regla de HOY: una sola línea fechada, en su posición real. */
.today {
  position: relative; display: flex; align-items: center; gap: .6rem;
  padding: 0 .8rem; margin-block: -1px; z-index: 2;
}
.today::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--void); }
.today span { font-family: var(--typed); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--void);
  background: var(--d0); padding-inline-end: .5rem; }
.today::before { content: ""; width: 8px; height: 8px; background: var(--void);
  rotate: 45deg; flex: none; }

/* ---------- preguntas ---------- */

.qa { border-top: 1px solid var(--d6); padding-top: 1px; }
.qa details { border-bottom: 1px solid var(--d3); }
.qa details:nth-child(even) { background: var(--d1); }
.qa summary {
  cursor: pointer; list-style: none; padding: 1.05rem .8rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: 1rem;
  align-items: center; font-weight: 600; letter-spacing: -.012em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--seal); }
.qa summary svg { width: 1.1rem; height: 1.1rem; color: var(--d5); justify-self: end;
  transition: rotate .22s var(--ease); }
.qa details[open] summary svg { rotate: 45deg; color: var(--void); }
.qa details > p { padding: 0 .8rem 1.2rem; color: var(--d5); max-width: 66ch; }

/* ---------- mascota, en el margen ---------- */

.margin-figure { display: grid; gap: .7rem; justify-items: start; }
.margin-figure img { width: clamp(7rem, 12vw, 10.5rem); height: auto; }
.margin-figure figcaption { font-family: var(--typed); font-size: .75rem;
  line-height: 1.5; color: var(--d5); max-width: 26ch; }
.aside { display: grid; gap: 1.6rem; align-content: start; }

/* ---------- cierre y colofón ---------- */

.closing { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.closing h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; font-stretch: 106%;
  letter-spacing: -.038em; line-height: 1.03; max-width: 18ch; text-wrap: balance; }

.colophon { border-top: 1px solid var(--d6); padding-top: 2rem; padding-bottom: 3rem; }
.colophon__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  justify-content: space-between; }
.colophon p, .colophon a, .colophon li { font-family: var(--typed); font-size: .8125rem; color: var(--d5); }
.colophon ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.colophon .controls { margin-top: .35rem; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--d6); color: var(--d0); padding: .7rem 1rem;
  font-family: var(--typed); font-size: .8125rem;
}
.skip:focus { inset-inline-start: 0; }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .press-in, .js .press-in:not(.is-stamped) { opacity: 1; scale: 1; filter: none; rotate: 0deg; }
  .js .stamp--rotated.press-in { rotate: -4deg; }
  .js [data-votes]:not(.is-counted) .tally path { stroke-dashoffset: 0; }
  .tally path { stroke-dashoffset: 0; }
}


/* ---------- variante compacta del libro mayor (portada) ----------
   La misma ley del registro en una columna estrecha: el asiento se
   apila, pero conserva banda, sello, fecha y recuento.               */

.ledger--compact .ledger__cols {
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
}
.ledger--compact .row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "state date"
    "title title"
    "desc  desc"
    "count count";
  row-gap: .3rem;
  padding: .85rem .85rem .95rem;
  align-items: baseline;
}
.ledger--compact .row__state { grid-area: state; }
.ledger--compact .row__id    { grid-area: date; justify-self: end; display: block; }
.ledger--compact .row__title { grid-area: title; margin-top: .15rem; font-size: 1.0625rem; }
.ledger--compact .row__desc  { grid-area: desc; }
.ledger--compact .row__count {
  grid-area: count; justify-content: flex-start; margin-top: .35rem;
  flex-wrap: wrap; row-gap: .25rem;
}
.ledger--compact .row__count b { min-width: 2ch; }