/* ===== 01-umbral ===== */
/* 01-umbral · #manana · 06:40 hoy · "Tu mañana": escena a pantalla completa, fiel a Territorio
   (hero.css/hero.js/index.html 100-230, capturas lab/v2/*.png), NO el patrón .umbral en su grid de
   2 columnas (eso fue lo que Jesús rechazó: "cubría la totalidad de la web y aquí no pasa"). Reutiliza
   las subclases del patrón (.umbral__blob/.umbral__img/.umbral__lineas), el componente .riel y .glass,
   pero la composición completa (placas de fondo a sangre completa, esquirlas, riel, copy, panel) es
   propia, prefijo umbral-hero__. Pin span 2.2: el motor publica --sc-p en la sección; aquí se derivan
   --open (rampa .45→.8, "abriendo") y --abierto (rampa .8→.88, estado final) una sola vez en el stage
   y las usan todas las capas de abajo. Parche de Territorio (obligatorio): la placa de ciudad es
   inmóvil (solo opacity, cero transform), el umbral escala como máximo 1.75×, y ninguna capa que
   escala o se mueve con el scroll lleva filter/backdrop-filter (el panel .glass del estado abierto es
   de tamaño fijo: ahí sí). Cero hex: solo var(--…). */

.umbral-hero { position: relative; }

.umbral-hero__stage {
  background: var(--panel);
  --open: clamp(0, calc((var(--sc-p, 0) - .45) / .35), 1);
  --abierto: clamp(0, calc((var(--sc-p, 0) - .8) / .08), 1);
  --blob-scale: calc(1 + var(--open) * .6 + var(--abierto) * .15);
}

/* ---- capas de fondo a sangre completa (sin .wrap): la placa de ciudad es SIEMPRE inmóvil --------- */
.umbral-hero__lejana,
.umbral-hero__ciudad {
  position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.umbral-hero__lejana {
  z-index: 0; background-image: var(--hero-img);
  transform: translate3d(calc(var(--px, 0) * -1px), calc(var(--sc-p, 0) * -3%), 0) scale(calc(1.06 - var(--sc-p, 0) * .04));
  transform-origin: 50% 40%;
}
.umbral-hero__ciudad {
  z-index: 1; background-image: var(--city-img);
  opacity: var(--open); /* de día: apagada, sube con el scroll. Cero transform: regla dura del parche. */
}
[data-mode="noche"] .umbral-hero__ciudad { opacity: 1; }

.umbral-hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--panel) 46%, transparent) 0%, transparent 17%),
    linear-gradient(270deg, color-mix(in oklab, var(--canvas) 84%, transparent) 0%, color-mix(in oklab, var(--canvas) 50%, transparent) 42%, transparent 68%),
    linear-gradient(0deg, color-mix(in oklab, var(--panel) 42%, transparent) 0%, transparent 22%);
}

/* ---- el umbral: caja propia (no .umbral__stage, que es de 4/5 atado al grid); las subclases del
   patrón (blob/img/lineas) se usan tal cual, solo se les quita la transición para no pelear con el
   scroll frame a frame y se les da la escala calculada arriba. */
.umbral-hero__umbral {
  position: absolute; z-index: 3; left: 30%; top: 50%;
  height: min(62vh, 540px); aspect-ratio: 4 / 5;
  transform: translate3d(calc(-50% + var(--px, 0) * .4px), calc(-50% + var(--py, 0) * .4px), 0);
}
#manana .umbral__blob,
#manana .umbral__lineas {
  transform-origin: center;
  transition: none;
}
#manana .umbral__blob { transform: scale(var(--blob-scale)); }
#manana .umbral__lineas { transform: scale(var(--blob-scale)); }

/* ---- esquirlas: vidrio biselado SIN backdrop-filter (regla dura, capa que escala/se mueve) -------- */
.umbral-hero__esquirla {
  position: absolute; z-index: 4;
  width: clamp(84px, 10.5vw, 172px); height: clamp(52px, 6.6vw, 108px);
  background: var(--glass); border: 1px solid var(--glass-line);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  transition: none;
}
.umbral-hero__esquirla--a {
  left: 4%; top: 15%;
  transform: rotate(-7deg) translate3d(calc(var(--open) * -3.2vw + var(--px, 0) * .6px), calc(var(--open) * -2vh + var(--py, 0) * .6px), 0);
}
.umbral-hero__esquirla--b {
  left: 34%; top: 6%;
  transform: rotate(6deg) translate3d(calc(var(--open) * 2.6vw + var(--px, 0) * .6px), calc(var(--open) * -2.6vh + var(--py, 0) * .6px), 0);
}
.umbral-hero__esquirla--c {
  left: 15%; top: 76%;
  transform: rotate(3deg) translate3d(calc(var(--px, 0) * .6px), calc(var(--open) * 3.4vh + var(--py, 0) * .6px), 0);
}

/* ---- riel del sistema, reutilizado tal cual; --riel-p sigue al progreso del acto ------------------ */
.umbral-hero__riel-pos { position: absolute; z-index: 5; left: clamp(14px, 2.6vw, 26px); top: 50%; transform: translateY(-50%); }
.umbral-hero__riel-pos .riel { --riel-p: var(--sc-p, 0); }
.umbral-hero__riel-pos .riel__palabras .lbl { color: var(--panel-soft); }
.umbral-hero__riel-pos .riel__linea { background: linear-gradient(to bottom, var(--leaf-fill) calc(var(--riel-p, 0) * 100%), color-mix(in oklab, var(--panel-ink) 30%, transparent) 0); }

/* ---- copy: a la derecha, con scrim detrás para legibilidad en ambos modos ------------------------- */
.umbral-hero__copy {
  position: absolute; z-index: 6; inset-block: 0; right: 0;
  width: min(36vw, 560px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-7) var(--gutter) var(--sp-7) var(--sp-6);
  color: var(--ink);
  /* legibilidad sobre la escena (mismo truco que .hero__caption del hero v2 y el umbral anterior):
     halo hacia --canvas, no un color de texto distinto */
  text-shadow: 0 1px 3px color-mix(in oklab, var(--canvas) 85%, transparent), 0 2px 20px color-mix(in oklab, var(--canvas) 82%, transparent);
}
.umbral-hero__eyebrow { margin: 0 0 var(--sp-3); }
.umbral-hero__titulo {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  /* --fs-display (hasta 84px) fue pensado para la columna ancha del patrón .umbral (1fr); esta
     columna es angosta a propósito (deja sitio a la escena) y con --fs-display el h1 pasaba a 5
     líneas a 1440 (tope 4, check-v3). Clamp propio, más contenido, mismo espíritu de "titular grande". */
  font-size: clamp(40px, 5.2vw, 68px); line-height: var(--lh-display); letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.umbral-hero__titulo em { font-style: normal; color: var(--leaf-fill); }
[data-mode="noche"] .umbral-hero__titulo em { color: var(--leaf); }

/* la frase del estado abierto: en flujo (sin salto de layout), sube de opacity solo pasado p=.8 */
.umbral-hero__frase {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--soft);
  opacity: var(--abierto);
  transform: translate3d(0, calc((1 - var(--abierto)) * 6px), 0);
}

.umbral-hero__lede { margin: var(--sp-5) 0 0; color: var(--ink); }
.umbral-hero__cta { margin-top: var(--sp-6); }
.umbral-hero__nota {
  margin: var(--sp-3) 0 0; max-width: 38ch;
  font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--soft);
}

/* ---- panel .glass del estado abierto: tamaño fijo, aquí SÍ puede llevar backdrop-filter (heredado
   de .glass); solo controlamos aparición + el grafo mínimo del hero v2, reescalado y con prefijo propio */
.umbral-hero__panel {
  position: absolute; z-index: 7; left: var(--gutter); bottom: calc(var(--rail-h) + var(--sp-5));
  width: min(300px, 82vw);
  padding: var(--sp-4);
  opacity: var(--abierto);
  transform: translate3d(0, calc((1 - var(--abierto)) * 14px), 0);
}
.umbral-hero__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.umbral-hero__running .dot { margin-right: .5em; }
.umbral-hero__sys { width: 100%; height: auto; display: block; overflow: visible; }
.umbral-hero__sys text { font: 8px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.umbral-hero__node { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.umbral-hero__node--core { fill: var(--panel); stroke: var(--leaf-fill); }
.umbral-hero__nt { fill: var(--ink); }
.umbral-hero__core { fill: var(--panel-ink); font-size: 8.5px; }
.umbral-hero__st { font-size: 7px; fill: var(--soft); text-transform: none; letter-spacing: 0; }
.umbral-hero__st--ok { fill: var(--leaf); }
.umbral-hero__st--warm { fill: var(--copper); }
.umbral-hero__panel .pulse { r: 2.4px; }
.umbral-hero__panel-foot {
  margin: var(--sp-3) 0 0; font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--soft);
}

/* ================================================================== móvil (≤860px, breakpoint del sitio) */
@media (max-width: 860px) {
  .umbral-hero__umbral {
    left: 50%; top: clamp(78px, 14vh, 120px);
    height: clamp(180px, 52vw, 300px);
    transform: translate3d(calc(-50% + var(--px, 0) * .3px), -50%, 0);
  }
  .umbral-hero__esquirla--a { left: 6%; top: 8%; width: clamp(60px, 20vw, 92px); height: clamp(38px, 12vw, 58px); }
  .umbral-hero__esquirla--b { left: auto; right: 6%; top: 4%; width: clamp(60px, 20vw, 92px); height: clamp(38px, 12vw, 58px); }
  .umbral-hero__esquirla--c { display: none; }
  .umbral-hero__riel-pos { display: none; } /* .riel del sistema ya se oculta solo aquí; la caja también */
  .umbral-hero__panel { display: none; }

  .umbral-hero__copy {
    position: absolute; z-index: 6; inset: auto 0 0 0; width: auto;
    display: block; justify-content: normal;
    padding: 0 var(--gutter) calc(var(--rail-h) + var(--sp-5));
  }
  .umbral-hero__scrim {
    background:
      linear-gradient(0deg, color-mix(in oklab, var(--canvas) 74%, transparent) 0%, color-mix(in oklab, var(--canvas) 30%, transparent) 34%, transparent 58%),
      linear-gradient(180deg, color-mix(in oklab, var(--panel) 40%, transparent) 0%, transparent 30%);
  }
}

@media (max-width: 860px) and (max-height: 700px) {
  .umbral-hero__umbral { top: clamp(64px, 11vh, 92px); height: clamp(150px, 42vw, 220px); }
  .umbral-hero__frase { display: none; }
  .umbral-hero__titulo { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
  .umbral-hero__lede { margin-top: var(--sp-3); font-size: var(--fs-body); line-height: var(--lh-body); }
  .umbral-hero__cta { margin-top: var(--sp-4); }
  .umbral-hero__nota { display: none; }
  .umbral-hero__copy { padding-bottom: calc(var(--rail-h) + var(--sp-4)); }
}

@media (prefers-reduced-motion: reduce) {
  .umbral-hero__lejana,
  .umbral-hero__esquirla,
  .umbral-hero__umbral,
  #manana .umbral__blob,
  #manana .umbral__lineas { transform: none !important; }
  .umbral-hero__frase,
  .umbral-hero__panel { opacity: 1; transform: none; }
}

/* ===== 02-pendiente ===== */
/* 02-pendiente: campo de tareas (.campo/.pieza de patrones.css, sin redefinir) con tres materialidades
   que eligen el hilo de la página (JMH.setPendiente). Prefijo propio: pendiente__ / .pendiente- */

.pendiente { padding-block: clamp(var(--sp-8), 9vw, var(--sp-9)) clamp(var(--sp-7), 7vw, var(--sp-8)); }

.pendiente__eyebrow { margin: 0 0 var(--sp-3); }

.pendiente__sub { max-width: 50ch; margin: var(--sp-3) 0 var(--sp-7); }

.pendiente__campo { margin-bottom: var(--sp-6); }

/* pie mono bajo cada materialidad: extensión nuestra, .pieza/.pieza--* no se tocan */
.pendiente__pie { display: block; margin-top: var(--sp-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--soft); }
.pieza--datos .pendiente__pie { color: var(--panel-soft); }

/* la pieza elegida la pinta el patrón (.is-elegida / [aria-pressed="true"]: se endereza, sube, la línea de
   acción cambia de texto y las hermanas bajan al 70 %); aquí solo la zona de tap y la transición de opacidad */
.pendiente__pieza { min-height: 44px; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.pendiente__globo-txt { display: block; width: 100%; font-size: var(--fs-label); color: var(--soft); margin-bottom: var(--sp-2); text-align: left; }

.pendiente__noscript { margin: 0 0 var(--sp-5); color: var(--soft); font-size: var(--fs-small); }

.pendiente__linea { max-width: 54ch; margin: 0 0 var(--sp-3); font-size: var(--fs-body); color: var(--ink); }

.pendiente__nota { font-size: var(--fs-small); color: var(--soft); margin: 0; }

/* ===== 03-sistema ===== */
/* ================================================================
   03 · sistema · #metodo · 09:00 hoy · "Cuatro sesiones"
   Pin span 2.8 (2.4 móvil). Stage partido: izquierda rail de 4 pasos
   (solo el activo encendido), derecha el isométrico <!--SVG:sistema-->
   armándose por capas según --sc-p (que el motor publica en el acto):
   01 placa, 02 fuentes + cables (stroke-dashoffset), 03 agentes,
   04 anillo de cadencia. Dentro del paso 04, en flujo con su rail,
   vive la compuerta humana funcional: único lugar de la página con
   amarillo (lo trae .compuerta de assets/ds/patrones.css tal cual).
   Las clases .iso del dibujo (v1/styles.css, usadas con capas en
   src/v2/sections/03-metodo.*) se copian aquí escopadas bajo
   .sistema__draw y retimbradas a mis 4 cuartos de --sc-p; las
   anotaciones baked del SVG (texto viejo con léxico vetado) se
   ocultan porque el rail en HTML real ya cuenta cada paso.
   Prefijo propio: sistema__ / .sistema-.
   ================================================================ */

/* ---------------------------------------------------------- stage -- */
.sistema { --sis-k: clamp(0, calc((0.5 - var(--sc-p, 0)) / 0.25), 1); }
.sistema__stage { display: flex; align-items: center; }
.sistema__wrap {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center; width: 100%;
  padding-block: calc(var(--bar-h) + var(--sp-4)) var(--sp-4);
}
/* el rail crece cuando el paso 04 despliega la compuerta; con paso 01 en pantalla el eyebrow+h2+intro
   caben de sobra, pero sumados a los 4 pasos + compuerta no caben en un stage del alto del viewport
   (medido en vivo: compuerta quedaba 97px bajo el borde). Título más contenido y la intro se retira
   sola (grid-template-rows a 0fr) en cuanto el rail avanza del paso 01: mismo truco que .step-body. */
.sistema__rail .lbl { margin-bottom: var(--sp-2); }
.sistema__rail h2 { font-size: clamp(30px, 3vw, 42px); margin-bottom: var(--sp-2); }
.sistema__intro-wrap { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-base) var(--ease); }
.sistema__rail.is-avanzado .sistema__intro-wrap { grid-template-rows: 0fr; opacity: 0; }
.sistema__intro-wrap > div { overflow: hidden; min-height: 0; }
.sistema__intro { margin: var(--sp-3) 0 0; max-width: 46ch; }

/* ------------------------------------------------------------ rail -- */
.sistema__steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.sistema__step { margin: 0; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); opacity: .45; transition: opacity var(--t-slow) var(--ease), padding var(--t-slow) var(--ease); }
.sistema__step.is-active { opacity: 1; padding-block: var(--sp-4); }
.sistema__step-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: .8rem; }
.sistema__dot { width: 7px; height: 7px; border-radius: 50%; background: none; border: 1px solid var(--line-strong); align-self: center; transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.sistema__step.is-active .sistema__dot { background: var(--leaf-fill); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--leaf-fill) 25%, transparent); }
.sistema__n { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--soft); font-variant-numeric: tabular-nums; }
.sistema__step.is-active .sistema__n { color: var(--leaf); }
.sistema__stitle { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h4); margin: 0; }
.sistema__step-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-base) var(--ease); }
.sistema__step-body > div { overflow: hidden; min-height: 0; }
.sistema__step-body p { margin: var(--sp-2) 0 0; max-width: 46ch; color: var(--soft); font-family: var(--mono); font-size: var(--fs-body); line-height: var(--lh-body); }
.sistema__step-body p:first-child { margin-top: var(--sp-3); }
.sistema__take { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--soft); }
.sistema__take b { color: var(--leaf); font-weight: 500; text-transform: none; letter-spacing: 0; }
.sistema__step.is-active .sistema__step-body { grid-template-rows: 1fr; opacity: 1; }

/* la palabra del proceso elegido (jmh:pendiente), paso 03: mark sin fondo, en --leaf */
.sistema__palabra { background: none; color: inherit; }
.sistema__palabra.is-elegida { color: var(--leaf); }

/* la compuerta vive dentro del paso 04, al final de su contenido; único amarillo de la página.
   Mismo patrón .compuerta de assets/ds/patrones.css (funcional tal cual); solo el margen y el padding
   se acotan aquí para que quepa junto al resto del rail dentro del alto del viewport. */
.sistema__compuerta { margin-top: var(--sp-2); max-width: 28rem; }
.sistema__compuerta.compuerta { padding: var(--sp-4); }
.sistema__compuerta .compuerta__titulo { margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------- dibujo -- */
.sistema__draw { margin: 0; }
.sistema__draw svg.iso { width: 100%; height: auto; display: block; overflow: visible; }

/* caras del bloque isométrico: cero hex, mezcla sobre los tokens de superficie/tinta */
.sistema__draw .iso .face { fill: var(--sc-surface); stroke: var(--sc-ink); stroke-width: 1; stroke-linejoin: round; }
.sistema__draw .iso .face-l { fill: color-mix(in oklab, var(--sc-surface) 88%, var(--sc-ink) 12%); }
.sistema__draw .iso .face-r { fill: color-mix(in oklab, var(--sc-surface) 78%, var(--sc-ink) 22%); }
.sistema__draw .iso .plate-grid path { stroke: var(--sc-ink); stroke-opacity: .12; stroke-width: .8; }
.sistema__draw .iso .lbl { font-family: var(--sc-font-mono); font-size: 11px; fill: var(--sc-ink); letter-spacing: .06em; text-transform: uppercase; }
.sistema__draw .iso .glyph path { fill: none; stroke: var(--sc-ink); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.sistema__draw .iso .leader { fill: none; stroke: var(--sc-ink); stroke-width: 1; }
.sistema__draw .iso .port { fill: var(--sc-accent); stroke: var(--sc-ink); stroke-width: 1; }
.sistema__draw .iso .sheet { fill: var(--sc-surface); stroke: var(--sc-ink); stroke-width: 1; }
.sistema__draw .iso .sheet-line { stroke: var(--sc-ink); stroke-opacity: .5; }
.sistema__draw .iso .agent-mark { stroke: var(--sc-accent); stroke-width: 2; }
.sistema__draw .iso .ring { fill: none; stroke: var(--sc-ink); stroke-width: 1; }
.sistema__draw .iso .tick { stroke: var(--sc-ink); stroke-width: 1.2; }

/* anotaciones baked del SVG (texto y nombres de paso viejos): las oculto, el rail en HTML ya las dice */
.sistema__draw .iso .anno, .sistema__draw .iso .lbl-anno, .sistema__draw .iso .leader-anno { display: none; }
/* el nodo "tú": ya lo cuenta el umbral del hero, aquí el dibujo empieza directo en la placa */
.sistema__draw .iso .you, .sistema__draw .iso .wire-you, .sistema__draw .iso .wire-you-sys { display: none; }

/* paso 02: las fichas de fuentes llegan desde su offset (--sx/--sy) y se asientan en su sitio */
.sistema__draw .iso .tile { transform: translate(calc(var(--sx) * var(--sis-k)), calc(var(--sy) * var(--sis-k))); opacity: calc(1 - var(--sis-k)); transform-box: fill-box; }

/* grupo por opacidad: agentes (03), salidas y cadencia (04) entran cuando --sc-p pasa su --at */
.sistema__draw .iso .agent, .sistema__draw .iso .output, .sistema__draw .iso .cadence {
  --sis-w: clamp(0, calc((var(--sc-p, 0) - var(--at, 0)) / .12), 1);
  opacity: var(--sis-w);
}
.sistema__draw .iso .agent { transform: translateY(calc((1 - var(--sis-w)) * 18px)); transform-box: fill-box; }
.sistema__draw .iso .output { transform: translateY(calc((1 - var(--sis-w)) * 14px)); transform-box: fill-box; }

/* los cables de fuentes (paso 02) se dibujan con stroke-dashoffset; --len lo mide 03-sistema.js */
.sistema__draw .iso .wire-sys {
  fill: none; stroke: var(--sc-ink); stroke-width: 1.1;
  --sis-w2: clamp(0, calc((var(--sc-p, 0) - var(--at, 0)) / .12), 1);
  stroke-dasharray: var(--len, 0); stroke-dashoffset: calc(var(--len, 0) * (1 - var(--sis-w2)));
}
/* una vez dibujados (--sc-p >= .5), 03-sistema.js agrega .is-flowing: quedan fluyendo a baja intensidad,
   el único loop ambiental de este acto mientras el paso 04 (y su propia compuerta) todavía no llega */
.sistema__draw.is-flowing .iso .wire-sys { stroke: var(--blue-fill); stroke-width: 1.3; stroke-dasharray: 4 6; stroke-dashoffset: 0; opacity: .95; animation: sistema-flujo var(--amb-flow) linear infinite; }

/* paso 04: el anillo de cadencia y sus marcas se dibujan hasta asentarse */
.sistema__draw .iso .ring, .sistema__draw .iso .tick {
  --sis-w3: clamp(0, calc((var(--sc-p, 0) - var(--at, 0)) / .16), 1);
  stroke-dasharray: var(--len, 0); stroke-dashoffset: calc(var(--len, 0) * (1 - var(--sis-w3)));
}

/* retimbrado: los --at horneados por tools/iso.py cubrían un arco hero+método que aquí no existe; los
   reparto en mis 4 cuartos (paso 02 arranca en .25, agentes desde .5, cadencia desde .75) DESDE JS
   (03-sistema.js reescribe el --at inline de cada elemento con su style; un !important en esta hoja
   no le gana al --at que el <g style="--at:…"> ya trae inline, verificado en vivo, así que no lo
   intento aquí). Las dos salidas (cotización lista / seguimiento enviado), --at .82 y .88, se dejan
   tal cual: cierran el paso 03 y entregan justo cuando arranca el 04, "el agente entrega, tú revisas" */

/* ------------------------------------------------------------- ficha -- */
.sistema__spec-wrap { padding-block: var(--sp-8); border-top: 1px solid var(--line); }
.sistema__spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); margin: 0; }
.sistema__spec div { display: grid; gap: .4rem; }
.sistema__spec dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--soft); }
.sistema__spec dd { margin: 0; font-size: var(--fs-body); color: var(--ink); text-wrap: pretty; }

/* -------------------------------------------------------------- móvil -- */
@media (max-width: 860px) {
  /* el stage sigue siendo del alto del viewport (el pin no cambia en móvil); apilado el isométrico
     compacto arriba + el rail completo (paso 04 con su compuerta) no cabía, medido en vivo a 390×844
     (la compuerta quedaba hasta 49px bajo el borde): dibujo más chico y menos aire alrededor */
  .sistema__wrap { grid-template-columns: 1fr; gap: var(--sp-3); padding-block: calc(var(--bar-h) + var(--sp-2)) var(--sp-2); }
  .sistema__draw { order: -1; max-width: 15rem; margin-inline: auto; }
  .sistema__rail h2 { font-size: clamp(22px, 6vw, 30px); }
  .sistema__steps { margin-top: var(--sp-3); }
  .sistema__step, .sistema__step.is-active { padding-block: var(--sp-2); }
  .sistema__compuerta.compuerta { padding: var(--sp-3); }
  /* el botón fijo .motion-toggle (esquina inferior derecha, z-index alto, ajeno: vive en el shell) cae
     justo sobre "Aprobar" durante todo el paso 04 a 390px, medido en vivo (rects se intersectan). Le
     dejo su columna libre: el renglón de acciones se envuelve antes de llegar a esa esquina. */
  .sistema__compuerta .compuerta__acciones { max-width: 11rem; }
  .sistema__draw .iso .lbl-tick { display: none; }
  .sistema__draw .iso .lbl { font-size: 13px; }
  .sistema__spec { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}
@media (max-width: 520px) {
  .sistema__spec { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .sistema__draw .iso .tile, .sistema__draw .iso .agent, .sistema__draw .iso .output { transform: none !important; }
  .sistema__draw.is-flowing .iso .wire-sys { animation: none !important; }
}

/* ===================================================================== */
/* KEYFRAMES (solo stroke-dashoffset, CONTRATO §2.9)                     */
/* base.css ya apaga esto bajo prefers-reduced-motion                    */
/* ===================================================================== */
@keyframes sistema-flujo { to { stroke-dashoffset: -32; } }

/* ===== 04-lineas ===== */
/* 04-lineas · #servicios · "Cuatro maneras" · flujo con un carril horizontal de scroll-snap.
   Reusa .instrumento--dupla/--maquina/--ronda/--onda de patrones.css tal cual (solo se le
   quita su borde/radio propios para que se funda con el panel que lo aloja); este archivo
   aporta el carril (tabs + flechas + viewport con snap), el layout de cada panel (instrumento
   55% / copy 45%, orden invertido en móvil) y el estado .is-sugerido que pinta 04-lineas.js
   al recibir jmh:pendiente. Sin precios: la ficha 04 reescrita (2026-09-10 tarde) los quita.
   Revisión 2026-09-10 (tarde 2): familia persona (glifo .persona compartido); lente, módulos
   y órbita quedan retirados a favor de dupla/máquina/ronda, onda se mantiene. */

/* la sección anterior (03-sistema) es un acto fijado: padding-top reducido para
   no sumar otra pantalla casi vacía encima de su scroll-off (devices.md §8) */
#servicios.sc-section { padding-top: var(--sp-7); }

.lineas__intro { max-width: 56ch; margin: 0 0 var(--sp-7); }
.lineas__intro .lbl { margin: 0 0 var(--sp-3); }
.lineas__title { margin: 0 0 var(--sp-4); }
.lineas__sub { margin: 0; max-width: 52ch; }

/* ===================================================================== */
/* CARRIL: nav (tabs + flechas) alineado al gutter de la página; el       */
/* viewport vive FUERA de cualquier .sc-wrap para que los paneles puedan  */
/* medir de verdad contra la pantalla (ficha: "≥ 78vw"), pero su propio   */
/* overflow-x:auto contiene todo el ancho real del carril: nunca abre     */
/* scroll horizontal del documento (body ya lleva overflow-x:clip).       */
/* ===================================================================== */

.lineas__carril {
  --lineas-inset: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter)));
}

.lineas__nav { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.lineas__tabs { flex: 1; min-width: 0; }
.lineas__controles { display: flex; flex: none; gap: var(--sp-2); }
.lineas__flecha { border-radius: 50%; }

.lineas__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-left: var(--lineas-inset);
  scroll-padding-inline-start: var(--lineas-inset);
}
.lineas__viewport::-webkit-scrollbar { display: none; }
.lineas__viewport:focus-visible { outline: 2px solid var(--blue-fill); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) { .lineas__viewport { scroll-behavior: smooth; } }

.lineas__track { display: flex; gap: var(--sp-5); padding-right: var(--sc-gutter); }

/* ===================================================================== */
/* PANEL: fondo --panel a lo ancho del ítem. Instrumento a la izquierda   */
/* (~55%, tamaño grande), copy a la derecha (~45%). Mismo orden de        */
/* origen en móvil: instrumento arriba, copy abajo (el grid solo cambia   */
/* de columnas a filas).                                                  */
/* ===================================================================== */

.lineas__panel {
  flex: 0 0 80vw;
  min-height: clamp(520px, 72vh, 760px);
  display: grid;
  grid-template-columns: 55fr 45fr;
  grid-template-areas: "instrumento copy";
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--panel);
  color: var(--panel-ink);
  scroll-snap-align: start;
}

.lineas__instrumento-col { grid-area: instrumento; height: 100%; min-width: 0; }

/* el instrumento se funde con el panel que lo aloja: sin su borde/radio propios */
.lineas__instrumento.instrumento {
  height: 100%;
  min-height: 62vh;
  border: 0;
  border-radius: 0;
}

.lineas__copy {
  grid-area: copy;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(var(--sp-6), 5vw, var(--sp-8));
  border-inline-start: var(--line-hair) solid var(--glass-line);
}

.lineas__nombre { margin: 0 0 var(--sp-4); }

.lineas__parrafo { max-width: 42ch; margin: 0 0 var(--sp-5); color: var(--panel-soft); }

.lineas__ficha { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-6); padding-top: var(--sp-4); border-top: var(--line-hair) solid var(--glass-line); }
.lineas__ficha > div { display: grid; gap: var(--sp-1); margin: 0; }
.lineas__ficha dt { font: var(--fs-label) / var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--panel-soft); margin: 0; }
.lineas__ficha dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--panel-ink); }

.lineas__ejemplos { margin: 0; padding-left: 1.1em; }
.lineas__ejemplos li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--panel-ink); }
.lineas__ejemplos li + li { margin-top: var(--sp-1); }

/* enlaces y botón fantasma: los tokens por defecto (--ink, --line, --leaf) están calibrados
   para --surface clara; sobre --panel oscuro se leen casi invisibles, así que aquí se
   reescriben a sus pares de panel (mismo criterio que .instrumento__tag en patrones.css) */
.lineas__panel .link { color: var(--leaf-fill); }
.lineas__panel .link:hover { color: var(--panel-ink); }
.lineas__panel .btn--ghost { color: var(--panel-ink); border-color: var(--glass-line); }
@media (hover: hover) and (pointer: fine) {
  .lineas__panel .btn--ghost:hover { background: var(--glass); }
}

/* el CTA (y su acompañante: chip o enlace secundario) se asienta al fondo de la
   columna aunque el párrafo/ficha vecina sea más corta */
.lineas__copy > .lineas__cta,
.lineas__copy > .lineas__acciones { margin-top: auto; }
.lineas__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

/* chip "sugerido para tu pendiente": neutro (el botón ya es la única cosa encendida
   del panel), nunca una barra de color; lo pinta 04-lineas.js con .is-sugerido en el panel */
.lineas__chip {
  display: none;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border: var(--line-hair) solid var(--glass-line);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--panel-soft);
  font: 500 var(--fs-label) / var(--lh-label) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.lineas__panel.is-sugerido .lineas__chip { display: inline-flex; }

@media (max-width: 700px) {
  .lineas__panel {
    flex-basis: 88vw;
    min-height: 0;
    grid-template-columns: 1fr;
    /* los cuatro paneles miden lo mismo (el carril los estira al más alto); con dos filas
       auto el sobrante se repartía entre ambas y abría un hueco entre instrumento y copy
       en los paneles de copy corto: el sobrante va a la fila del copy */
    grid-template-rows: auto 1fr;
    grid-template-areas: "instrumento" "copy";
  }

  /* los cuatro instrumentos posicionan TODO su contenido en absolute: sin una altura
     explícita el contenedor colapsa a 0 (nada de su interior aporta altura propia),
     así que aquí se fija (no solo se acota con max-height) dentro del techo de la ficha */
  .lineas__instrumento-col { height: 260px; max-height: 300px; }
  .lineas__instrumento.instrumento { height: 100%; min-height: 0; }

  /* a 260px de alto los patrones se calibran para tarjetas más grandes: se reduce
     cada uno para que nada se encime con sus propias etiquetas/nota. Familia persona:
     el glifo .persona se achica por --persona-w (16-18px; el orador de la onda a 30px,
     sigue siendo el más grande de la escena) en vez de reescribir cada instrumento. */
  .lineas__instrumento .persona { --persona-w: 18px; }
  .lineas__instrumento .instrumento__orador .persona { --persona-w: 30px; }

  .lineas__instrumento .instrumento__tag { font-size: 8px; padding: 3px 6px; }
  /* dupla y máquina ponen Entrada arriba (patrones.css, top:12%); si aquí se fija bottom sin
     anular top, quedan los dos activos y el tag se estira como un listón que tapa la pila */
  .lineas__instrumento .instrumento__tag--entrada { left: 3%; top: 6%; bottom: auto; }
  .lineas__instrumento .instrumento__tag--entrega { right: 3%; top: 6%; }

  /* cadena (dupla) y mini nodo (ronda): mismo ancho reducido, la mini se queda más baja */
  .lineas__instrumento .instrumento__nodo { width: 68px; min-height: 32px; padding: 4px 6px; font-size: 9px; }
  .lineas__instrumento .instrumento__nodo--mini { width: 50px; min-height: 16px; padding: 2px 4px; font-size: 8px; }

  /* etiqueta (pila/tabla de la máquina): a 260-300px de ancho el rótulo de una línea
     (white-space:nowrap en patrones.css) se sale del panel; aquí se permite envolver a dos */
  .lineas__instrumento .instrumento__etiqueta { font-size: 8px; white-space: normal; width: max-content; max-width: 92px; text-align: center; }

  /* tabla (máquina): 6 filas no caben en 260-300px de alto: se quedan las primeras 4 */
  .lineas__instrumento .instrumento__celda:nth-child(n+13) { display: none; }
  /* máquina: a 330-343px de panel la caja de 160px (centro 50%) pisaba la tabla (centro 81%,
     60px de ancho): 124px deja 8-10px de aire a cada lado; la pila se corre un poco al borde */
  .lineas__instrumento .instrumento__maquina { width: 124px; padding: var(--sp-2); }
  .lineas__instrumento .instrumento__maquina strong { font-size: 10px; }
  .lineas__instrumento.instrumento--maquina .instrumento__pila, .lineas__instrumento.instrumento--maquina .instrumento__etiqueta--pila { left: 17%; }
  .lineas__instrumento.instrumento--maquina .instrumento__tabla, .lineas__instrumento.instrumento--maquina .instrumento__etiqueta--tabla, .lineas__instrumento.instrumento--maquina .instrumento__figura--tu { left: 83%; }

  /* ronda: los desplazamientos del mini nodo (patrones.css, en px fijos pensados para el
     escritorio) sacan p2/p5 del panel a 343px de ancho; misma proporción, a escala más chica */
  .lineas__instrumento.instrumento--ronda .instrumento__nodo--p1 { transform: translate(-50%, calc(-50% - 18px)); }
  .lineas__instrumento.instrumento--ronda .instrumento__nodo--p2 { transform: translate(calc(-50% + 23px), calc(-50% - 3px)); }
  .lineas__instrumento.instrumento--ronda .instrumento__nodo--p3 { transform: translate(calc(-50% + 20px), calc(-50% + 7px)); }
  .lineas__instrumento.instrumento--ronda .instrumento__nodo--p4 { transform: translate(calc(-50% - 20px), calc(-50% + 7px)); }
  .lineas__instrumento.instrumento--ronda .instrumento__nodo--p5 { transform: translate(calc(-50% - 23px), calc(-50% - 3px)); }

  /* orador: sin override de posición aquí desde 2026-09-10; patrones.css ya lo ancla por `bottom`
     (fijo en px, ver el comentario en el patrón onda), así que el mismo valor sirve a este panel de
     260-300px como al de la guía. */
  .lineas__instrumento .instrumento__audiencia { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-6); }

  .lineas__instrumento .instrumento__nota { font-size: 8px; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-2); }

  .lineas__copy {
    justify-content: flex-start;
    border-inline-start: 0;
    border-top: var(--line-hair) solid var(--glass-line);
  }
  .lineas__cta { width: 100%; justify-content: center; }
  .lineas__acciones { width: 100%; }
  .lineas__acciones .lineas__cta { width: 100%; justify-content: center; }
}

/* ===== 05-voces ===== */
/* ===== 05 · voces: riel horizontal (pan) de recibos de cita + muro de cierre =====
   Referencia técnica: src/v2/sections/05-voces.css (riel + settle por --sc-p).
   Copy y colores solo de la ficha v3 / tokens v3. Prefijo voces__. */

.voces__stage { display: flex; align-items: center; padding-block: var(--bar-h) var(--rail-h); }
.voces__rail { align-items: stretch; gap: clamp(1.5rem, 3vw, var(--sp-8)); padding-inline: var(--gutter); }

.voces__item { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; }

.voces__lead { width: clamp(17rem, 26vw, 24rem); padding-right: var(--sp-5); border-right: 1px solid var(--line-strong); }
.voces__lead h2 { margin: 0; }
.voces__lead .sc-body { margin: var(--sp-3) 0 0; max-width: 28ch; }

/* el recibo trae su propio fondo/padding/borde de patrones.css; aquí solo su ancho de riel */
.voces__recibo { width: clamp(280px, 27vw, 340px); align-self: center; }

.voces__wall { width: clamp(22rem, 30vw, 30rem); justify-content: center; }
.voces__wall-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; columns: 2; column-gap: var(--sp-5); }
.voces__wall-list li { break-inside: avoid; margin: 0 0 var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-family: var(--mono); line-height: 1.5; letter-spacing: var(--ls-data); color: var(--ink); text-wrap: pretty; }
/* distintos tamaños (ficha): masonry sencillo vía nth-child, sin clases extra */
.voces__wall-list li:nth-child(1) { font-size: var(--fs-small); color: var(--soft); padding-top: var(--sp-6); }
.voces__wall-list li:nth-child(2) { font-size: var(--fs-body); }
.voces__wall-list li:nth-child(3) { font-size: var(--fs-label); color: var(--soft); padding-top: var(--sp-7); }
.voces__wall-list li:nth-child(4) { font-size: var(--fs-data); padding-top: var(--sp-2); }
.voces__arrow { color: var(--blue); }

/* asentamiento escalonado desde --sc-p (patrón v2): exime al lead, piso de opacidad .55 */
@media (prefers-reduced-motion: no-preference) {
  .voces__item[style*="--i"] {
    --settle: clamp(0, calc((var(--sc-p, 1) - var(--i) * 0.09) * 5), 1);
    opacity: calc(.55 + var(--settle) * .45);
    transform: translateY(calc((1 - var(--settle)) * 18px));
  }
}

@media (max-width: 860px) {
  .voces__stage { align-items: flex-start; padding-block: calc(var(--bar-h) + var(--sp-5)) var(--rail-h); }
  .voces__lead, .voces__recibo, .voces__wall { width: 80vw; }
  .voces__lead { border-right: 0; padding-right: 0; }
  .voces__wall-list { columns: 1; }
}

/* ===== 06-para-ti ===== */
/* ================================================================
   06 · para-ti · #para-ti · 16:00 hoy · "¿Es para ti?"
   Pin span 2.4 (2 móvil, lo fija 06-para-ti.js antes de ScrollCraft.mount).
   Stage = panel oscuro a ancho completo con margen. Centro: eyebrow + h2 +
   frase grande en serif (el "ground" siempre visible: sin él el panel se ve
   vacío durante el pre-roll del pin, devices.md §2). Alrededor, dos bandas
   full-height (izquierda "sí", derecha "todavía no") con sus 4 .nota-doblada
   cada una en posiciones fijas dispersas y alturas distintas; cada nota
   aparece con --at escalonado sobre --sc-p (mecanismo heredado tal cual de
   src/v2/sections/06-para-ti.css: mismos 8 valores de --at, mismo divisor
   .09) — opacidad + una pequeña caída con rotación hacia su --rest-rot de
   reposo. Solo transform/opacity (regla dura de movimiento).
   El FAQ vive FUERA de la sección, como sibling tras </section>: un hijo en
   flujo dentro del mismo elemento pinneado queda sepultado tras el stage
   sticky hasta que el acto entero termina (bug que v2 ya documentó, y que
   además rompe section-shot.mjs: su medición de "pinned" y de "height" lee
   el propio #para-ti, así que data-sc-act vive en la <section> misma, igual
   que 03-sistema/08-prueba, no en un div envoltorio aparte).
   Prefijo parati__.
   ================================================================ */

.parati__stage {
  margin-inline: var(--gutter);
  padding: 0;
  min-height: 100svh; /* red de seguridad sin JS: .sc-stage (motor) ya pone height:100svh */
}

.parati__inner { position: relative; height: 100%; width: 100%; }

/* ---- centro: eyebrow + h2 + frase, siempre visible (el "ground") -------- */
.parati__center {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(30ch, 58%);
  text-align: center;
}
.parati__eyebrow { margin: 0 0 var(--sp-2); }
.parati__h2 { margin: 0 0 var(--sp-4); font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); max-width: none; }
.parati__phrase {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
  line-height: 1.36; letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--panel-ink);
}

/* ---- bandas laterales: full height, banco de posiciones fijas ---------- */
.parati__side {
  position: absolute; z-index: 1; width: 40%;
  top: calc(var(--bar-h) + var(--sp-4)); bottom: calc(var(--rail-h) + var(--sp-4));
}
.parati__side--si { left: 0; }
.parati__side--no { right: 0; }

.parati__glabel { position: absolute; top: 0; margin: 0; }
.parati__side--si .parati__glabel { left: var(--sp-4); }
.parati__side--no .parati__glabel { right: var(--sp-4); text-align: right; }

.parati__notas { list-style: none; margin: 0; padding: 0; }

/* ---- una ficha: .nota-doblada del sistema + reveal por --at/--sc-p ----- */
.parati__nota {
  position: absolute;
  max-width: 230px;
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  --nota-fondo: var(--panel); /* la nota va sobre el panel oscuro del stage, no sobre --canvas */
  --v: clamp(0, calc((var(--sc-p, 1) - var(--at, 0)) / .09), 1);
  opacity: var(--v);
  transform:
    translateY(calc((1 - var(--v)) * -18px))
    rotate(calc(var(--rest-rot, -5deg) + (1 - var(--v)) * -9deg));
}
.parati__nota .nota-doblada__frase { margin: 0; font-family: var(--mono); font-size: var(--fs-body); line-height: 1.5; }
.parati__nota .link { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 2px; }
.parati__nota .link:hover, .parati__nota .link:focus-visible { color: var(--leaf-fill); }

.parati__dot { display: inline-block; width: 7px; height: 7px; margin-right: .5em; border-radius: 50%; vertical-align: middle; position: relative; top: -1px; }
.parati__dot--si { background: var(--leaf-fill); }
.parati__dot--no { background: var(--copper-fill); }

/* posiciones fijas dispersas: 4 a la izquierda, 4 a la derecha, alturas
   distintas (% relativo a cada banda, ya recortada de bar/rail arriba) */
.parati__nota--si1 { top: 8%;  left: 0; }
.parati__nota--si2 { top: 33%; left: 10%; }
.parati__nota--si3 { top: 58%; left: 2%; }
.parati__nota--si4 { top: 80%; left: 12%; }
.parati__nota--no1 { top: 8%;  right: 0; }
.parati__nota--no2 { top: 33%; right: 12%; }
.parati__nota--no3 { top: 58%; right: 2%; }
.parati__nota--no4 { top: 80%; right: 10%; }

@media (prefers-reduced-motion: reduce) {
  .parati__nota { opacity: 1 !important; transform: rotate(var(--rest-rot, -5deg)) !important; }
}

/* ---------------------------------------------------------------- móvil -- */
@media (max-width: 860px) {
  /* las 8 notas + cabecera deben caber en un solo 100svh (el stage recorta
     con overflow:clip, no hay scroll interno): empaque compacto a propósito,
     medido contra sheet-dia-390.jpg (la 8ª nota se salía del viewport antes
     de este ajuste). */
  .parati__inner {
    position: static; height: auto;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: calc(var(--bar-h) + var(--sp-1)) var(--sp-3) calc(var(--rail-h) + var(--sp-1));
  }
  .parati__center { position: static; transform: none; width: 100%; }
  .parati__eyebrow { margin-bottom: 4px; }
  .parati__h2 { font-size: clamp(1.4rem, 1.1rem + 1.8vw, 1.8rem); margin-bottom: var(--sp-2); }
  .parati__phrase { font-size: .95rem; line-height: 1.32; max-width: 34ch; margin-inline: auto; }

  .parati__side { position: static; width: 100%; top: auto; bottom: auto; }
  .parati__glabel { position: static; display: block; text-align: center; margin: 0 0 6px; }
  .parati__side--no .parati__glabel { text-align: center; }

  .parati__notas { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .parati__nota {
    position: static; width: 100%; max-width: 352px;
    padding: 7px var(--sp-3) 15px;
    --doblez: 16px; /* notas diminutas en móvil: la solapa de 28px no cabe */
    transform:
      translateY(calc((1 - var(--v)) * -14px))
      rotate(calc(var(--rest-rot, -5deg) * .5 + (1 - var(--v)) * -6deg));
  }
  .parati__nota .nota-doblada__frase { font-size: 11px; line-height: 1.38; }
}

/* pantallas bajas (p.ej. 360×640, el "compact" de tools/check-v3.mjs): a 390×844
   el empaque de arriba ya cabe con margen, pero medido en vivo (Playwright,
   getBoundingClientRect de .parati__nota--no4 contra el stage) la 8ª nota se
   salía 95px del svh en 640px de alto. Un segundo recorte, solo aquí. */
@media (max-width: 860px) and (max-height: 749px) {
  .parati__inner { gap: 4px; padding: var(--bar-h) var(--sp-2) var(--rail-h); }
  .parati__eyebrow { margin-bottom: 2px; }
  .parati__h2 { font-size: clamp(1.2rem, 1rem + 1.4vw, 1.5rem); margin-bottom: 4px; }
  .parati__phrase { font-size: .85rem; line-height: 1.24; max-width: 32ch; }
  .parati__glabel { margin-bottom: 3px; }
  .parati__notas { gap: 4px; }
  .parati__nota { padding: 4px var(--sp-2) 10px; }
  .parati__nota .nota-doblada__frase { font-size: 10px; line-height: 1.3; }
}

/* --------------------------------------------------- FAQ (fuera del pin) - */
.parati__faq { max-width: var(--sp-measure); margin-inline: auto; padding-block: clamp(3rem, 6vw, var(--sp-9)); display: grid; }
.parati__q { border-top: 1px solid var(--line); padding: var(--sp-4) 0; }
.parati__q:last-child { border-bottom: 1px solid var(--line); }
.parati__q summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6em; min-height: 40px;
  font-family: var(--mono); font-size: var(--fs-body); letter-spacing: var(--ls-body); color: var(--ink);
}
.parati__q summary::-webkit-details-marker { display: none; }
.parati__q summary::before { content: "▸"; flex: 0 0 auto; color: var(--leaf); display: inline-block; transition: transform var(--t-fast) var(--ease); }
.parati__q[open] summary::before { transform: rotate(90deg); }
.parati__q p { margin: var(--sp-3) 0 0 1.5em; max-width: 64ch; font-family: var(--mono); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--soft); }

/* ===== 07-quien ===== */
/* 07-quien: fila 1 = .comparador de retratos (patrón compartido) junto al eyebrow/título/copy/enlaces;
   fila 2 = .cuaderno de verbos (papel, patrón compartido, rehecho como notas a mano 2026-09-10) junto al
   escritorio en .bleed con tipografía .fantasma y los tres .stat sobre .glass. Solo layout propio con
   prefijo quien__: .comparador, .cuaderno, .bleed, .fantasma-stage/.fantasma, .glass y .stat ya están
   definidos en assets/ds/patrones.css y assets/ds/components.css. */
.quien { padding-block: clamp(3rem, 6vw, 6rem); }

.quien__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* ---- fila 1, derecha: eyebrow + h2 + dos párrafos + enlaces ------------ */
.quien__copy > * + * { margin-top: var(--sp-4); }
.quien__copy h2 { margin-top: var(--sp-2); }
.quien__p { color: var(--soft); }
.quien__links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5); }

/* ---- fila 2, izquierda: cuaderno ---------------------------------------
   .cuaderno ya trae max-width:420px; solo lo alineamos arriba de su celda para
   que no quede flotando a medio alto junto al escritorio, más alto que él. */
.quien__cuaderno { align-self: start; }

/* ---- fila 2, derecha: escritorio en .bleed + palabra fantasma + .stat -- */
.quien__stage { height: clamp(420px, 31vw, 480px); }

/* .bleed llena el stage (en vez de su cabida natural por aspect-ratio): mismo recurso que usa la propia
   guía para el fantasma con <img> suelta (demo-fantasma__img), adaptado a las tres capas de .bleed.
   margin:0 porque .bleed es un <figure> y el user-agent le pone 1em 40px por defecto; assets/ds/components.css
   no lo resetea (nadie lo había estirado a inset:0 antes) y con inset:0 ese margen se sumaba al hueco,
   dejando 40px de .quien__stage sin foto a cada lado (hallazgo de esta sesión, 2026-09-10). */
.quien__stage .bleed { position: absolute; inset: 0; margin: 0; }
.quien__stage .bleed .b-front { width: 100%; height: 100%; object-fit: cover; }

/* la palabra fantasma por defecto se ancla abajo (bottom:-.06em) y a todo el ancho (14vw): pensada para
   un stage sin copy debajo. Aquí el panel .glass de los .stat también vive abajo, así que la subimos
   arriba (mismo recurso que usa guia/patrones.html en su propio demo cuando el copy ocupa el suelo del
   stage) y la achicamos: a media columna (~530px) el tope de 180px se desbordaba casi por completo. */
.quien__stage .fantasma { top: var(--sp-4); bottom: auto; font-size: clamp(40px, 7vw, 96px); }

/* panel .glass: tamaño fijo (no escala ni se mueve con el scroll, la sección entera es flujo con
   data-sc-in). El primer .stat (el de más dígitos) a todo lo ancho arriba; los otros dos en fila de dos
   columnas abajo: apilar los tres uno sobre otro dejaba un panel casi tan alto como el stage entero y
   tapaba la foto casi por completo (hallazgo de esta sesión, 2026-09-10). */
.quien__stats {
  position: absolute; z-index: 1; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5);
  padding: var(--sp-4);
  color: var(--ink);
}
/* .stat__lbl trae max-width:22ch de fábrica (pensado para columnas angostas de kpi-row); en las columnas
   anchas de este panel (~430px arriba, ~205px cada una abajo) esa medida partía cada etiqueta en 4-6
   renglones y estiraba el panel al 85% del stage. Aquí sí hay ancho real de columna: que lo use. */
.quien__stats .stat__lbl { max-width: 100%; color: var(--soft); }
.quien__stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-3); }

@media (max-width: 860px) {
  .quien__grid { grid-template-columns: 1fr; align-items: stretch; gap: 2.6rem; }
  .quien__stage { height: clamp(460px, 62vw, 560px); }
}

@media (max-width: 640px) {
  .quien__grid { gap: 2rem; }
  .quien__stats { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); }
  .quien__stats-row { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ===== 08-prueba ===== */
/* ============================================================================
   08-prueba · #prueba · 23:50 hoy -> 07:45 mañana · prueba de apoyo
   Pin span 2.6 (2.2 en móvil, lo fija 08-prueba.js antes de ScrollCraft.mount).
   Stage en --panel (mar profundo, ya es oscuro en día y en noche): ciudad muy
   oscurecida detrás + 30 luces que titilan en la mitad superior. Izquierda:
   eyebrow + h2 + línea de traducción + contadores + remate. Derecha: bitácora
   que se escribe línea por línea con --sc-p / --at (fórmula canónica de
   SECTIONS.md), alineada abajo, recorta arriba con max-height + overflow.
   Prefijo prueba__ / .prueba-.
   ========================================================================== */

.prueba__stage {
  background: var(--panel);
  color: var(--panel-ink);
}

/* ciudad detrás, muy oscurecida con --panel (no --scrim: ese token se aclara
   en modo día porque replica --canvas, y este stage debe quedarse oscuro en
   los dos modos). Sin filter. */
.prueba__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--city-img) center 32% / cover no-repeat;
}
.prueba__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--panel) 80%, transparent) 0%,
    color-mix(in oklab, var(--panel) 88%, transparent) 45%,
    color-mix(in oklab, var(--panel) 92%, transparent) 100%);
}

/* 30 luces (las coloca 08-prueba.js, posición y retardo aleatorios, solo en
   la mitad superior); un único loop ambiental de este viewport. */
.prueba__lights { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.prueba__lights i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--blue-fill);
  animation: prueba-twinkle 3.6s ease-in-out infinite;
}
@keyframes prueba-twinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50% { opacity: .95; transform: scale(1); }
}

/* contenido */
.prueba__grid {
  position: relative; z-index: 3; min-height: 100%;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding: calc(var(--bar-h) + var(--sc-6)) var(--gutter) calc(var(--rail-h) + var(--sc-6));
}
.prueba__head { display: grid; gap: var(--sc-4); align-content: center; }
.prueba__eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--panel-soft); margin: 0;
}
.prueba__stage h2 { color: var(--panel-ink); margin: 0; }
.prueba__linea {
  font-family: var(--mono); font-size: var(--sc-t-sm); line-height: 1.5;
  color: var(--panel-soft); max-width: 42ch; text-wrap: pretty; margin: 0;
}
.prueba__counts {
  display: flex; gap: var(--sc-6); font-family: var(--mono); font-size: var(--sc-t-sm);
  color: var(--panel-soft); text-transform: uppercase; letter-spacing: .06em; margin: 0;
}
.prueba__counts b {
  display: block; font-family: var(--serif); font-weight: 400; font-size: var(--sc-t-3xl);
  letter-spacing: -0.02em; line-height: 1; color: var(--leaf-fill); text-transform: none;
  font-variant-numeric: tabular-nums;
}
/* remate: aparece a p >= .9, fórmula canónica de SECTIONS.md (--at fijo en .9) */
.prueba__remate {
  color: var(--panel-ink); font-size: var(--sc-t-lg); max-width: 32ch; text-wrap: pretty; margin: 0;
  opacity: clamp(0, calc((var(--sc-p, 1) - .9) / .08), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--sc-p, 1) - .9) / .08), 1)) * 10px));
}

/* bitácora: se escribe línea por línea con --sc-p, alineada abajo, recorta arriba */
.prueba__log {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-height: calc(100svh - var(--bar-h) - var(--rail-h) - var(--sc-6));
  overflow: hidden;
  border-top: 1px solid color-mix(in oklab, var(--panel-ink) 22%, transparent);
}
.prueba__log li {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--sc-4);
  align-items: baseline; padding: var(--sc-2) 0;
  border-bottom: 1px solid color-mix(in oklab, var(--panel-ink) 12%, transparent);
  font-size: var(--sc-t-sm); line-height: 1.4; text-wrap: pretty;
  --v: clamp(0, calc((var(--sc-p, 1) - var(--at)) / .08), 1);
  opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 8px));
}
.prueba__hora { font-family: var(--mono); color: var(--blue-fill); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.prueba__txt { color: var(--panel-ink); }
/* .badge es el componente ya definido para "estado de un loop/proceso" (assets/ds/components.css).
   Se reusa tal cual; solo se corrige el color de texto: --leaf/--copper son tinta oscura pensada
   para superficies claras (en modo día valen ~3.2:1 sobre --panel, bajo el mínimo de 4.5:1 de la
   regla 7) y este stage es oscuro en los dos modos. Las variantes -fill sí cumplen contraste aquí. */
.prueba__log .badge { justify-self: end; }
.prueba__log .badge--ok { color: var(--leaf-fill); white-space: nowrap; }
.prueba__log .badge--degraded { color: var(--copper-fill); white-space: normal; }

@media (max-width: 860px) {
  .prueba__grid {
    grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start;
    gap: var(--sc-4); padding: calc(var(--bar-h) + var(--sc-4)) var(--gutter) calc(var(--rail-h) + var(--sc-4));
  }
  .prueba__head { gap: var(--sc-2); }
  .prueba__counts b { font-size: var(--sc-t-2xl); }
  .prueba__remate { display: none; }
  .prueba__log { max-height: 44svh; }
  .prueba__log li {
    font-size: var(--sc-t-xs); padding: var(--sc-2) 0; row-gap: .2rem;
    grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-areas: "hora stat" "txt txt";
  }
  .prueba__hora { grid-area: hora; }
  .prueba__log .badge { grid-area: stat; justify-self: end; }
  .prueba__txt { grid-area: txt; }
}

@media (prefers-reduced-motion: reduce) {
  .prueba__log li, .prueba__remate { opacity: 1 !important; transform: none !important; }
}

/* ===== 09-cierre ===== */
/* 09-cierre · #cierre · 08:00 mañana · "Abres la laptop": flujo, no acto pin, no lee --sc-p.
   Referencias: arrakis (corte de oscuro a claro), solidroad (el mismo paisaje al amanecer). Fondo
   hero-day.webp en los DOS modos (es el amanecer: se permite clara aunque el modo sea noche); solo
   el scrim cambia de tono con --canvas. El seam funde con el --panel oscuro de 08-prueba, la
   sección de arriba. El spotlight de puntero ya lo resuelve scrollcraft.css sobre [data-sc-spotlight]
   (usa --sc-accent, que styles-v3.css ya mapea a --leaf-fill): no se redefine aquí. Prefijo propio:
   cierre__ / .cierre- */

.cierre {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
}

.cierre__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url(/img/home-2026/hero-day.webp) center 60% / cover no-repeat;
}

/* neblina de amanecer: única animación ambiental de la sección, baja intensidad, solo transform/opacity */
.cierre__mist {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .45;
  background: radial-gradient(44% 32% at 76% 26%, color-mix(in oklab, var(--canvas) 48%, transparent), transparent 72%);
  animation: cierre-mist 22s var(--ease-in-out) infinite alternate;
}
@keyframes cierre-mist {
  from { transform: scale(1) translate(0, 0); opacity: .35; }
  to   { transform: scale(1.08) translate(-1%, 1%); opacity: .58; }
}

/* scrim fuerte hacia --canvas: día es piedra clara, noche es el mismo canvas oscuro; --ink de cada
   modo ya está calibrado contra su propio --canvas, así el texto siempre contrasta */
.cierre__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(92% 78% at 8% 100%, color-mix(in oklab, var(--canvas) 92%, transparent) 0%, color-mix(in oklab, var(--canvas) 60%, transparent) 40%, transparent 72%),
    linear-gradient(to top, color-mix(in oklab, var(--canvas) 56%, transparent) 0%, transparent 48%),
    linear-gradient(to right, color-mix(in oklab, var(--canvas) 40%, transparent) 0%, transparent 38%);
}

/* funde desde el --panel oscuro de la sección anterior (08-prueba) */
.cierre__seam {
  position: absolute; inset: 0 0 auto 0; z-index: 2; height: 9rem; pointer-events: none;
  background: linear-gradient(to bottom, var(--panel) 0%, color-mix(in oklab, var(--panel) 45%, transparent) 55%, transparent 100%);
}

.cierre__inner {
  position: relative; z-index: 3;
  display: grid; gap: var(--sp-4); justify-items: start;
  padding-block: clamp(7rem, 15vw, 10rem) calc(var(--rail-h) + clamp(2.5rem, 6vw, 4rem));
}
.cierre__titulo { max-width: 15ch; margin-top: var(--sp-3); }
.cierre__lede { max-width: 42ch; }
.cierre__cta { display: grid; gap: var(--sp-5); justify-items: start; margin-top: var(--sp-4); }
.cierre__pregunta {
  margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: var(--lh-h3);
  color: var(--soft); text-wrap: balance;
}

@media (max-width: 860px) {
  .cierre__inner { padding-block: clamp(5.5rem, 26vw, 7.5rem) calc(var(--rail-h) + var(--sp-6)); }
  .cierre__titulo { max-width: 12ch; }
  .cierre__lede { max-width: 32ch; }
}

@media (prefers-reduced-motion: reduce) {
  .cierre__mist { animation: none; }
}