/* ============================================================================
   antpathads · page.css
   Tema (tokens) + markup propio. No restyla .sc-stage, .sc-copy ni [data-sc-*].
   Gramática: chaptered editorial. Papel blanco, tinta negra, dibujo técnico.
   ========================================================================== */

:root {
  --sc-canvas:      #ffffff;
  --sc-surface:     #f4f4f2;
  --sc-ink:         #0a0a0a;
  --sc-ink-soft:    #5b5e63;
  --sc-accent:      #0a0a0a;
  --sc-accent-ink:  #ffffff;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* una sola escala de radio: cuadrado */
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px; --sc-r-pill: 2px;

  /* lienzo claro: sombras a la mitad, sin edge light (leería como suciedad) */
  --sc-shadow-color: 220 10% 10%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.12);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.09), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: none;

  --sc-maxw: 88rem;
  --folio-w: 15rem;
  --ink-2: color-mix(in oklab, var(--sc-ink) 40%, transparent);
}

/* el grano sube con la velocidad de scroll (--vel, 0..1 desde page.js) y se asienta al frenar */
.sc-grain { opacity: calc(0.03 + var(--vel, 0) * 0.07); transition: opacity 160ms linear; }

/* ---------------------------------------------------------------- folio -- */
.folio {
  position: fixed;
  left: var(--sc-gutter); top: var(--sc-5); bottom: var(--sc-5);
  width: var(--folio-w);
  display: flex; flex-direction: column; gap: var(--sc-5);
  z-index: var(--sc-z-chrome);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.02em;
  color: var(--sc-ink-soft);
}
.folio__mark img { width: 8.5rem; height: auto; }
.folio__now { margin: 0; color: var(--sc-ink); }
.folio__now-num { display: inline-block; min-width: 1.6em; }
.folio__menu summary { display: none; }
.folio__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.folio__list a {
  display: grid; grid-template-columns: 1.6em 1fr; gap: var(--sc-2);
  text-decoration: none; color: var(--sc-ink-soft);
  padding-block: 2px;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.folio__list a:hover, .folio__list a[aria-current="true"] { color: var(--sc-ink); }
.folio__list a[aria-current="true"] span::after { content: "·"; margin-left: 0.3em; }
.folio__cta { margin-top: auto; color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.folio__cta:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- page ---- */
.page { padding-left: calc(var(--folio-w) + var(--sc-gutter)); }
.chapter__rule { background: var(--sc-ink); opacity: 0.85; }
/* la regla de cada capítulo se traza de izquierda a derecha al entrar */
.chapter__rule[data-sc-in] { opacity: 0.85; transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--sc-ease-out); }
.chapter__rule[data-sc-in].sc-in { transform: scaleX(1); }
.chapter { padding-block: var(--sc-section); }
.chapter--after-pin { padding-top: var(--sc-6); }
.chapter__head { display: grid; gap: var(--sc-5); margin-block: var(--sc-6) var(--sc-9); max-width: 60rem; }
.chapter__title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-3xl);
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-lede { color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- cover --- */
.cover {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  padding-block: var(--sc-9) var(--sc-8);
  overflow: clip;
}
/* Tres planos: grilla (lenta), cifra (rápida, se aleja), cláusulas (1x). --px/--py
   llegan del puntero en escritorio; --sc-p del engine. La grilla se dibuja al cargar. */
.cover__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--sc-hairline) 0 1px, transparent 1px calc(100% / 12));
  background-size: calc(100% - 2 * var(--sc-gutter)) 100%;
  background-position: var(--sc-gutter) 0;
  background-repeat: no-repeat;
  transform: translate3d(calc(var(--px, 0) * -4px), calc((var(--sc-p, 0.5) - 0.5) * -60px), 0);
  animation: cover-grid 1100ms var(--sc-ease-out) 120ms both;
}
@keyframes cover-grid { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.cover__inner { position: relative; display: grid; gap: var(--sc-7); }
.cover__figure {
  margin: 0;
  display: grid; gap: var(--sc-4);
  transform: translate3d(calc(var(--px, 0) * 10px), calc((var(--sc-p, 0.5) - 0.5) * -240px + var(--py, 0) * 6px), 0)
             scale(calc(1 - (var(--sc-p, 0.5) - 0.5) * 0.14));
  transform-origin: left bottom;
  will-change: transform;
}
/* cifra + unidad al pie, como en una lámina: el número grande, la unidad pequeña a su lado */
.cover__figure-row { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sc-3) var(--sc-5); }
.cover__num { animation: cover-num 900ms var(--sc-ease-out) 80ms both; }
@keyframes cover-num { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
.cover__num {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(5.5rem, 21vw, 19rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  margin-left: -0.04em;
}
.cover__unit {
  display: grid; gap: 0.35em;
  padding-bottom: 0.2em;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  animation: cover-num 900ms var(--sc-ease-out) 360ms both;
}
.cover__unit span:first-child { color: var(--sc-ink); }
/* ficha bajo la cifra: qué es el inventario, cómo se accede, dónde, para quién */
.cover__rule { max-width: 64rem; }
.cover__spec {
  margin: 0; max-width: 64rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5);
}
.cover__spec > div { display: grid; gap: var(--sc-2); min-width: 0; align-content: start; }
.cover__spec dt {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0;
}
.cover__spec dd { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.cover__clauses { max-width: 44rem; }
.cover__h1 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-2xl);
  line-height: 1.0;
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  max-width: 24ch;
  margin: 0;
}
.cover__line { color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; margin: 0; }
.cover__cta { margin: 0; }
.cover__cta a, .protocol__step a {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  text-decoration: underline; text-underline-offset: 0.3em;
}
.cover__cta a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- ledger -- */
.ledger-wrap { margin: 0 0 var(--sc-9); overflow-x: auto; }
.ledger {
  width: 100%; min-width: 40rem;
  border-collapse: collapse;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  line-height: 1.4;
}
.ledger caption { text-align: left; padding-bottom: var(--sc-3); caption-side: top; }
.ledger th, .ledger td { text-align: left; padding: var(--sc-3) var(--sc-3) var(--sc-3) 0; border-top: 1px solid var(--sc-ink); vertical-align: top; }
.ledger th { font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); border-top: 0; }
.ledger td:first-child { color: var(--sc-ink-soft); width: 3.5rem; }
.ledger__take { text-align: right; padding-right: 0; white-space: nowrap; }
/* las tres filas de reseller se encienden una tras otra con el recorrido del acto */
.ledger { position: relative; isolation: isolate; }
.ledger__hop td { position: relative; }
.ledger__hop td::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sc-surface);
  transform: scaleX(clamp(0, calc((var(--sc-p, 1) - 0.22 - var(--i, 0) * 0.08) / 0.16), 1));
  transform-origin: left center;
}
.ledger__hop .ledger__take { font-weight: 500; }
.ledger tfoot td { border-top: 2px solid var(--sc-ink); border-bottom: 1px solid var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); }

.frictions, .specs, .sheet { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--sc-ink); }
.frictions__item, .specs__row, .sheet__row {
  display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: var(--sc-5);
  padding-block: var(--sc-5);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.frictions dt, .specs dt, .sheet dt { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: 0.02em; margin: 0; }
.frictions dd, .specs dd, .sheet dd { margin: 0; color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; }

/* ------------------------------------------- spread: lista + placa fotográfica --
   Gramática: el medio va en su propia columna con pie, nunca debajo del texto.
   La imagen llega ya gradada a B&N; acá solo marco, paralaje leve y pie. */
.spread { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sc-8); align-items: start; }
/* dentro del spread la lista pierde la mitad del ancho: término arriba, descripción abajo */
.spread .frictions__item, .spread .specs__row, .spread .sheet__row { grid-template-columns: 1fr; gap: var(--sc-2); }
.plate-photo { margin: 0; }
.plate-photo__frame { overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); }
.plate-photo img {
  width: 112%; height: 112%; max-width: none;
  margin: -6% 0 0 -6%;
  object-fit: cover;
  will-change: transform;
}
.plate-photo figcaption { display: grid; gap: var(--sc-2); margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }

/* ---------------------------------------------------------------- dibujo -- */
.draw { width: 100%; height: auto; overflow: visible; }
/* Grosor en unidades del viewBox: non-scaling-stroke rompe pathLength="1" en Chromium
   (el patrón de guiones pasa a píxeles de pantalla y el trazo se ve punteado). */
.draw rect, .draw path { fill: none; stroke: var(--sc-ink); stroke-width: 1.35; stroke-linecap: square; stroke-linejoin: miter; }
.draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 1)); }
.wire__t {
  font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  fill: var(--sc-ink-soft); stroke: none;
  opacity: var(--t, 1);
}
.wire__t--strong { fill: var(--sc-ink); font-weight: 500; }
.wire__arrow { stroke-linecap: butt; }

/* Sala de máquinas: los segmentos se dibujan en secuencia con el recorrido del acto */
.wire { margin: 0 0 var(--sc-9); }
.wire .d1 { --d: clamp(0, calc((var(--sc-p, 1) - 0.10) / 0.16), 1); }
.wire .d2 { --d: clamp(0, calc((var(--sc-p, 1) - 0.22) / 0.10), 1); }
.wire .d3 { --d: clamp(0, calc((var(--sc-p, 1) - 0.30) / 0.16), 1); }
.wire .d4 { --d: clamp(0, calc((var(--sc-p, 1) - 0.44) / 0.10), 1); }
.wire .d5 { --d: clamp(0, calc((var(--sc-p, 1) - 0.52) / 0.14), 1); }
.wire .d6 { --d: clamp(0, calc((var(--sc-p, 1) - 0.62) / 0.12), 1); }
.wire .wire__dims .wire__t { --t: clamp(0, calc((var(--sc-p, 1) - 0.66) / 0.10), 1); }
.wire__caption, .plate__caption { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: var(--sc-4); max-width: 60ch; }

/* Hoja de datos: línea de tiempo del pod */
.pod { margin: 0 0 var(--sc-8); }
.pod .q1 { --d: clamp(0, calc((var(--sc-p, 1) - 0.08) / 0.14), 1); }
.pod .q2 { --d: clamp(0, calc((var(--sc-p, 1) - 0.18) / 0.20), 1); }
.pod .q3 { --d: clamp(0, calc((var(--sc-p, 1) - 0.34) / 0.12), 1); }
.pod .wire__t { --t: clamp(0, calc((var(--sc-p, 1) - 0.40) / 0.10), 1); }

/* ---------------------------------------------------------------- pico ---- */
.peak { display: grid; align-items: center; }
.peak__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "head head" "figs plate";
  column-gap: var(--sc-8); row-gap: var(--sc-7);
  align-items: end;
  padding-block: var(--sc-7);
}
.peak__head { grid-area: head; }
.peak__title { max-width: 18ch; }
.peak__figures { grid-area: figs; display: grid; gap: var(--sc-5); margin: 0; }
.peak__fig { margin: 0; display: grid; gap: var(--sc-1); border-top: 1px solid var(--sc-ink); padding-top: var(--sc-3); }
.peak__num {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 9.5vw, 8.6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.peak__label { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }

.plate { grid-area: plate; margin: 0; align-self: center; }
.plate__svg { max-height: 56svh; }
.plate .p1 { --d: clamp(0, calc((var(--sc-p, 1) - 0.02) / 0.22), 1); }
.plate .p2 { --d: clamp(0, calc((var(--sc-p, 1) - 0.80) / 0.12), 1); }
.plate .plate__dims .wire__t { --t: clamp(0, calc((var(--sc-p, 1) - 0.88) / 0.06), 1); }
/* Las barras suben una tras otra entre p 0.18 y 0.82. El relleno va acá porque
   `.draw rect { fill: none }` le gana al atributo fill del markup. */
.plate__bars rect {
  stroke: none;
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(clamp(0, calc((var(--sc-p, 1) - 0.18 - var(--i) * 0.07) / 0.22), 1));
}
.plate__bars rect:nth-child(1) { fill: #0a0a0a; }
.plate__bars rect:nth-child(2) { fill: #2a2a2a; }
.plate__bars rect:nth-child(3) { fill: #4a4a4a; }
.plate__bars rect:nth-child(4) { fill: #6a6a6a; }
.plate__bars rect:nth-child(5) { fill: #8f8f8f; }
.plate__bars rect:nth-child(6) { fill: #b8b8b8; }
.plate__bars rect:nth-child(7) { fill: #e2e2e2; }
.plate__caption { display: grid; gap: var(--sc-2); }

/* Reduced motion: los dibujos aparecen completos; el scroll no mueve nada. */
@media (prefers-reduced-motion: reduce) {
  .draw [pathLength] { stroke-dashoffset: 0 !important; }
  .wire__t { opacity: 1 !important; }
  .plate__bars rect { transform: none !important; }
  .cover__grid, .cover__figure { transform: none !important; }
}

/* ---------------------------------------------------------------- protocolo */
.protocol { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--sc-ink); }
.protocol__step {
  display: grid; grid-template-columns: 4rem 1fr; gap: var(--sc-5);
  padding-block: var(--sc-6);
  border-bottom: 1px solid var(--sc-hairline-strong);
  line-height: 1.05;
}
.protocol__n { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); padding-top: 0.5em; }
.protocol__step h3 {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.02;
  margin: 0 0 var(--sc-3);
  grid-column: 2;
}
.protocol__step p { margin: 0; color: var(--sc-ink-soft); max-width: 60ch; line-height: var(--sc-leading-body); grid-column: 2; }
.protocol__step > * { min-width: 0; }
.protocol__step .protocol__n { grid-row: 1 / span 2; }

/* partner mayorista: definición a la izquierda, condiciones del acuerdo marco a la derecha */
.partner {
  margin-top: var(--sc-9);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sc-8);
  align-items: start;
  border-top: 2px solid var(--sc-ink);
  padding-top: var(--sc-6);
}
.partner__def { display: grid; gap: var(--sc-4); align-content: start; }
.partner__def .sc-label { margin: 0; }
.partner__lede {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.1;
  text-wrap: balance; max-width: 30ch;
}
.partner__note { margin: 0; color: var(--sc-ink-soft); max-width: 40ch; text-wrap: pretty; }
.partner__terms { margin: 0; display: grid; gap: 0; }
.partner__terms > div:first-child { padding-top: 0; }
.partner__terms > div {
  display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: var(--sc-5);
  padding-block: var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.partner__terms dt { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: 0.02em; margin: 0; }
.partner__terms dd { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }

/* ---------------------------------------------------------------- colofón -- */
.colophon { padding-bottom: var(--sc-8); }
.colophon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr);
  gap: var(--sc-9);
  align-items: start;
}

.term { display: grid; gap: var(--sc-6); font-family: var(--sc-font-mono); }
.term__set { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2); align-items: center; }
.term__set legend, .term__seg + .sc-label { float: left; width: 100%; margin-bottom: var(--sc-2); }
.term__set label, .term__seg label { position: relative; }
.term__set input, .term__seg input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.term__set span, .term__seg span {
  display: inline-block;
  padding: 0.45em 0.8em;
  border: 1px solid var(--sc-ink);
  font-size: var(--sc-t-sm);
  line-height: 1;
  color: var(--sc-ink);
  background: var(--sc-canvas);
  cursor: pointer;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.term__set input:checked + span, .term__seg input:checked + span { background: var(--sc-ink); color: var(--sc-canvas); }
.term__set input:focus-visible + span, .term__seg input:focus-visible + span { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .term__set input:not(:checked) + span:hover, .term__seg input:not(:checked) + span:hover { background: var(--sc-surface); }
}

.term__screen {
  --sc-ink: #ffffff; --sc-ink-soft: #a7abb2; --sc-accent: #ffffff; --sc-accent-ink: #0a0a0a;
  color: var(--sc-ink);
  background: #0a0a0a;
  padding: var(--sc-5) var(--sc-6);
  min-height: 19rem;
  display: grid; align-content: start; gap: var(--sc-4);
}
.term__status { margin: 0; color: var(--sc-ink-soft); display: flex; align-items: center; gap: var(--sc-2); }
.term__dot { width: 8px; height: 8px; background: var(--sc-ink); display: inline-block; }
.term__out {
  margin: 0; font: inherit; font-size: var(--sc-t-sm); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  color: var(--sc-ink);
}
.term__out .ln { display: block; animation: term-ln 220ms var(--sc-ease-out) both; animation-delay: calc(var(--n, 0) * 55ms); }
.term__out .c { color: var(--sc-ink-soft); }
.term__out .k { color: var(--sc-ink-soft); }
.term__out .cur {
  display: inline-block; width: 0.6em; height: 1.05em; background: var(--sc-ink); vertical-align: -0.15em;
  animation: term-ln 220ms var(--sc-ease-out) both, blink 1s steps(1) infinite;
  animation-delay: calc(var(--n, 0) * 55ms), calc(var(--n, 0) * 55ms + 220ms);
}
@keyframes term-ln { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term__out .ln, .term__out .cur { animation: none; } }

.term__actions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sc-4); align-items: baseline; }
.term__copy, .term__submit button {
  font: inherit; font-size: var(--sc-t-sm);
  background: none; border: 0; padding: 0;
  color: var(--sc-ink);
  text-decoration: underline; text-underline-offset: 0.3em;
  cursor: pointer;
  transition: text-decoration-thickness var(--sc-d-fast) var(--sc-ease-out);
}
.term__copy:hover, .term__submit button:hover { text-decoration-thickness: 2px; }
.term__copy:active, .term__submit button:active { transform: translateY(1px); }
.term__request { border: 0; margin: 0; padding: var(--sc-6) 0 0; border-top: 1px solid var(--sc-ink); display: grid; gap: var(--sc-5); }
.term__request[hidden] { display: none; }
.term__request legend { float: left; width: 100%; margin-bottom: var(--sc-3); }
.term__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-6); }
.term__field { display: grid; gap: var(--sc-2); }
.term__field input {
  width: 100%; border: 0; border-bottom: 1px solid var(--sc-ink);
  background: transparent; padding: 0.5em 0; font: inherit; font-size: var(--sc-t-base);
  border-radius: 0;
}
.term__field input:focus-visible { outline: none; border-bottom-width: 2px; }
.term__seg { display: flex; gap: var(--sc-2); }
.term__submit { margin: 0; display: grid; gap: var(--sc-2); }
.term__micro { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.term__feedback { margin: 0; }
.term__noscript { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.masthead { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.02em; color: var(--sc-ink-soft); display: grid; gap: var(--sc-4); padding-top: var(--sc-2); }
.masthead p { margin: 0; }
.masthead__brand { color: var(--sc-ink); }
.masthead a { color: var(--sc-ink); }
.masthead__legal { padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }

/* ---------------------------------------------------------------- silencio - */
.silence { height: 50vh; height: 50svh; }

/* ---------------------------------------------------------------- mobile --- */
@media (max-width: 1100px) {
  :root { --folio-w: 0rem; }
  .page { padding-left: 0; }
  .folio {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto;
    flex-direction: row; align-items: center; gap: var(--sc-4);
    padding: var(--sc-3) var(--sc-gutter);
    background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--sc-hairline-strong);
  }
  .folio__mark img { width: 6.5rem; }
  .folio__now { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .folio__menu { position: relative; }
  .folio__menu summary { display: inline-block; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 0.25em; color: var(--sc-ink); }
  .folio__menu summary::-webkit-details-marker { display: none; }
  .folio__menu[open] .folio__list {
    position: absolute; right: 0; top: calc(100% + var(--sc-3));
    background: var(--sc-canvas); border: 1px solid var(--sc-ink);
    padding: var(--sc-4); min-width: 16rem;
    box-shadow: var(--sc-e2);
  }
  .folio__cta { display: none; }
  .cover { padding-top: calc(var(--sc-9) + 2.5rem); }
  .peak__inner { grid-template-columns: 1fr; grid-template-areas: "head" "figs" "plate"; row-gap: var(--sc-5); padding-block: calc(var(--sc-6) + 2.5rem) var(--sc-5); align-items: start; }
  .peak__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-3); }
  .peak__num { font-size: clamp(2.4rem, 10vw, 5rem); }
  .plate__svg { max-height: 30svh; }
  .plate__caption span:last-child { display: none; }
  .colophon__grid { grid-template-columns: 1fr; gap: var(--sc-8); }
  .spread { grid-template-columns: 1fr; gap: var(--sc-6); }
  .partner { grid-template-columns: 1fr; gap: var(--sc-6); }
}
@media (max-width: 700px) {
  .cover__h1 { font-size: var(--sc-t-xl); }
  .cover__spec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
  .partner__terms > div { grid-template-columns: 1fr; gap: var(--sc-2); }
  .frictions__item, .specs__row, .sheet__row { grid-template-columns: 1fr; gap: var(--sc-2); }
  .protocol__step { grid-template-columns: 3rem 1fr; }
  .term__fields { grid-template-columns: 1fr; }
  .term__screen { padding: var(--sc-4); min-height: 16rem; }
  .peak__label { font-size: 0.68rem; }
  /* en teléfono el viewBox se reduce ~2.5x: engrosar el trazo y sacar las cotas SVG
     (las listas HTML ya llevan la información) */
  .draw rect, .draw path { stroke-width: 2.6; }
  .wire__t, .plate__dims, .wire__dims path { display: none; }
  /* tabla forense: en teléfono entran salto, quién y toma; la descripción sobra */
  .ledger { min-width: 0; font-size: 0.78rem; }
  .ledger th:nth-child(3), .ledger td:nth-child(3) { display: none; }
}

/* ---------------------------------------------------- vida ambiental -------
   Bucles cortos que solo existen cuando el dibujo está completo y la sección
   está en pantalla (.is-live desde page.js). Solo transform/opacity/trazo. */
.draw .wire__pulse {
  stroke-dasharray: 0.14 0.86; stroke-dashoffset: 1; stroke-width: 3; stroke-linecap: butt;
  opacity: var(--pulse, 0);
  animation: wire-pulse 1.5s linear infinite; animation-play-state: paused;
}
.draw .wire__pulse--2 { animation-delay: 0.75s; }
.wire .wire__pulse { --pulse: clamp(0, calc((var(--sc-p, 1) - 0.62) / 0.08), 1); }
.chapter.is-live .wire__pulse { animation-play-state: running; }
@keyframes wire-pulse { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -0.14; } }

.plate .plate__sweep {
  fill: var(--sc-ink); stroke: none;
  --sweep: clamp(0, calc((var(--sc-p, 1) - 0.86) / 0.06), 1);
  opacity: var(--sweep, 0);
  animation: plate-sweep 3.2s var(--sc-ease-in-out) infinite; animation-play-state: paused;
}
.peak-act.is-live .plate__sweep { animation-play-state: running; }
@keyframes plate-sweep { from { transform: translateX(0); } to { transform: translateX(557px); } }

.pod .pod__head {
  fill: var(--sc-ink); stroke: none;
  --head: clamp(0, calc((var(--sc-p, 1) - 0.48) / 0.06), 1);
  opacity: var(--head, 0);
  animation: pod-head 6s linear infinite; animation-play-state: paused;
}
.chapter.is-live .pod__head { animation-play-state: running; }
@keyframes pod-head { from { transform: translateX(0); } to { transform: translateX(878px); } }

/* protocolo: una línea une los tres pasos a medida que el lector baja */
.protocol { position: relative; }
.protocol::before {
  content: ""; position: absolute; left: 0.55rem; top: 0; bottom: 0; width: 1px;
  background: var(--sc-ink);
  transform: scaleY(clamp(0, calc((var(--sc-p, 1) - 0.06) / 0.40), 1));
  transform-origin: top center;
}
.protocol__n { position: relative; z-index: 1; background: var(--sc-canvas); align-self: start; padding-right: 0.4em; }

@media (prefers-reduced-motion: reduce) {
  .cover__grid, .cover__num, .cover__unit { animation: none; }
  .chapter__rule[data-sc-in] { transform: none; transition: none; }
  .ledger__hop td::before, .protocol::before { transform: none; }
  .wire__pulse, .plate__sweep, .pod__head { display: none; }
  .sc-grain { opacity: 0.03; }
}