/* =====================================================================
   MD Dental · site.css — componentes y layout.
   Consume tokens.css (única fuente de color, tipo, espacio, motion).
   Regla V8: sin hex, px (salvo 0px/1px hairline) ni ms/cubic-bezier aquí.
   ===================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --hdr: var(--header-height-sm);
  --band-h: 42vh;                 /* banda de personajes (móvil) */
  --steps-x: 26vh;                /* desfase copy ↔ progreso (móvil) */
  --copy-top: calc(var(--hdr) + var(--band-h) + var(--space-6));
  --icon-stroke: 1.75;
}
@media (max-width: 63.99rem) and (max-height: 42rem) { :root { --band-h: 33vh; } }
@media (min-width: 64rem) {
  :root { --steps-x: 13vh; --copy-top: calc(var(--hdr) + 15vh); }
}
@media (min-width: 64rem) {
  :root { --hdr: var(--header-height); }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr) + var(--space-5));
  background: var(--color-bone);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body-l);
  line-height: var(--leading-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--text-accent); }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
[hidden] { display: none !important; }

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

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.icon { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }

.container { width: min(100% - 2 * var(--grid-margin), var(--container-max)); margin-inline: auto; }

/* ---------- Tipografía ---------- */
.display-xl, .display-l, .display-m {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  font-variant-numeric: lining-nums;
}
.display-xl { font-size: var(--text-display-xl); line-height: var(--leading-display); letter-spacing: var(--tracking-display-xl); }
.display-l { font-size: var(--text-display-l); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.display-m { font-size: var(--text-display-m); line-height: var(--leading-display-m); }
.title {
  font-family: var(--font-sans);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.lead {
  font-size: clamp(1.1875rem, 1.1161rem + 0.2857vw, 1.375rem);
  line-height: var(--leading-body-l);
  color: var(--text-body);
  max-width: var(--measure-prose);
}
.eyebrow {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-rose-700);
  display: flex; align-items: center; gap: var(--space-3);
}
.eyebrow::before { content: ""; width: var(--space-6); border-top: 1px solid currentColor; }

/* ---------- Enlaces de salto ---------- */
.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5); min-height: var(--tap-min);
  background: var(--color-mineral); color: var(--color-crimson);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-2);
  font-weight: var(--weight-semibold); font-size: 1rem; text-decoration: none;
  clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.skip-link:focus, .skip-link:focus-visible { clip-path: none; opacity: 1; pointer-events: auto; }
.skip-link { top: calc(var(--hdr) + var(--space-2)); position: fixed; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 var(--space-5);
  border-radius: var(--radius-pill); border: var(--border-strong) solid transparent;
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.2; font-weight: var(--weight-semibold); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.btn .icon--arrow { transition: transform var(--dur-fast) var(--ease-out-soft); }
.btn:hover .icon--arrow { transform: translateX(calc(var(--motion-shift-sm) / 2)); }
.btn--primary { background: var(--color-crimson); color: var(--color-mineral); min-width: var(--measure-btn-min); }
.btn--primary:hover { background: var(--color-crimson-700); box-shadow: var(--shadow-cta); }
.btn--primary:active { background: var(--color-crimson-700); box-shadow: none; transform: translateY(1px); }
.btn--secondary { border-color: var(--color-crimson); color: var(--color-crimson); background: transparent; }
.btn--secondary:hover { background: var(--color-rose-soft); color: var(--color-crimson-700); }
.btn--secondary:active { background: var(--color-rose-soft); border-color: var(--color-crimson-700); }
.btn--ghost { color: var(--color-stone); background: transparent; text-decoration: underline; text-decoration-color: var(--color-border-control); text-underline-offset: 0.25em; }
.btn--ghost:hover { color: var(--color-crimson); text-decoration-color: currentColor; }
.btn--lg { min-height: calc(var(--control-height) + var(--space-2)); padding-inline: var(--space-6); font-size: 1.0625rem; }
.btn--header {
  min-height: var(--control-height-sm); min-width: 0; padding-inline: var(--space-4);
  font-size: 0.875rem;
}
.cta-short { display: none; }
@media (max-width: 22.5rem) {
  .btn--header .cta-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn--header .cta-short { display: inline; }
}
.btn--header[data-quiet] { background: transparent; color: var(--color-crimson); border-color: var(--color-crimson); box-shadow: none; }
.btn--header[data-quiet]:hover { background: var(--color-rose-soft); color: var(--color-crimson-700); }

.link-action {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
  color: var(--text-accent); font-weight: var(--weight-semibold); font-size: 1rem; text-decoration: none;
  border-radius: var(--radius-note);
}
.link-action .icon { transition: transform var(--dur-fast) var(--ease-out-soft); }
.link-action:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.link-action:hover .icon--arrow { transform: translateX(calc(var(--motion-shift-sm) / 2)); }
.link-action:hover .icon--arrow-l { transform: translateX(calc(var(--motion-shift-sm) / -2)); }
.link-action:active { color: var(--color-crimson-700); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--hdr);
  transition: background-color var(--dur-normal) var(--ease-out-soft), box-shadow var(--dur-normal) var(--ease-out-soft);
}
.site-header[data-scrolled] {
  background: var(--color-mineral);
  box-shadow: inset 0 -1px 0 var(--color-border-subtle), var(--shadow-1);
}
.layer-operativa .site-header, .page-404 .site-header { background: var(--color-mineral); box-shadow: inset 0 -1px 0 var(--color-border-subtle); }
.layer-operativa .site-header[data-scrolled] { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-mineral); }
.site-header__inner {
  height: 100%; display: flex; align-items: center; gap: var(--space-3);
  width: min(100% - 2 * var(--grid-margin), var(--container-max)); margin-inline: auto;
}
.brand {
  margin-right: auto; display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-graphite); text-decoration: none; white-space: nowrap;
}
.nav { display: none; }
.nav__list { display: flex; gap: var(--space-1); }
.nav__link {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-3);
  color: var(--color-stone); text-decoration: none; font-size: 0.9375rem; font-weight: var(--weight-medium);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0% 1px; background-position: var(--space-3) 72%;
  transition: color var(--dur-fast) var(--ease-out-soft), background-size var(--dur-fast) var(--ease-out-soft);
}
.nav__link:hover { color: var(--color-crimson); background-size: calc(100% - 2 * var(--space-3)) 1px; }
.nav__link[aria-current] { color: var(--color-crimson); background-size: calc(100% - 2 * var(--space-3)) var(--border-strong); }

.menu { position: static; }
.menu__btn {
  list-style: none; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--radius-pill); cursor: pointer; color: var(--color-graphite);
  position: relative; z-index: calc(var(--z-menu) + 1);
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn:hover { background: var(--color-rose-soft); }
.menu__btn path { transform-box: fill-box; transform-origin: center; }
.menu[open] .menu__btn .l1 { transform: translateY(0.3125rem) rotate(45deg); }
.menu[open] .menu__btn .l2 { opacity: 0; }
.menu[open] .menu__btn .l3 { transform: translateY(-0.3125rem) rotate(-45deg); }
.menu__btn path { transition: transform var(--dur-normal) var(--ease-out-soft), opacity var(--dur-normal) var(--ease-out-soft); }
.menu__panel {
  position: fixed; inset: var(--hdr) 0 0; z-index: var(--z-menu);
  background: var(--color-mineral); padding: var(--space-6) var(--grid-margin);
  box-shadow: inset 0 1px 0 var(--color-border-subtle);
}
.menu__list { display: grid; gap: var(--space-1); }
.menu__link {
  display: flex; align-items: center; min-height: calc(var(--tap-min) + var(--space-3));
  font-family: var(--font-display); font-size: var(--text-display-m); font-weight: var(--weight-medium);
  color: var(--color-graphite); text-decoration: none; border-bottom: 1px solid var(--color-border-subtle);
}
.menu__link:hover { color: var(--color-crimson); }
.menu__link { padding-inline: var(--space-2); margin-inline: calc(var(--space-2) * -1); }
.btn--block { display: flex; width: 100%; }
.menu__cta { margin-top: var(--space-7); }
.menu__panel { display: flex; flex-direction: column; }
.menu__fig { margin-top: auto; padding-top: var(--space-6); display: grid; place-items: center; }
.menu__fig img { width: min(100%, 20rem); height: auto; aspect-ratio: 590 / 420; }
@media (max-height: 40rem) { .menu__fig { display: none; } }

@media (max-width: 23.4375rem) { /* ≤ 375 */
  .site-header__inner { gap: var(--space-2); }
  .brand { font-size: 0.875rem; letter-spacing: 0.06em; }
  .btn--header { padding-inline: var(--space-3); font-size: 0.8125rem; }
}
@media (min-width: 64rem) {
  .brand { font-size: 1.125rem; letter-spacing: 0.12em; }
  .nav { display: block; margin-right: var(--space-4); }
  .menu { display: none; }
  .btn--header { padding-inline: var(--space-5); font-size: 0.9375rem; }
}

/* =====================================================================
   HISTORIA — 8 escenas
   ===================================================================== */
.story {
  position: relative;
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-paper-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px);
  background-size: var(--paper-grid-size) var(--paper-grid-size);
  isolation: isolate;
}
.stage, .actors { display: none; }

/* --- Escena (estado base = sin JS / reduced-motion / Save-Data: bloques apilados) --- */
.scene {
  display: grid; gap: var(--space-5);
  padding: calc(var(--hdr) + var(--space-6)) var(--grid-margin) var(--space-7);
  max-width: calc(var(--stage-max));
  margin-inline: auto;
}
.scene + .scene { padding-top: var(--space-7); border-top: 1px dashed var(--color-paper-edge); }
.scene__fig { order: -1; display: grid; place-items: center; }
.scene__fig img { width: auto; max-width: 100%; height: auto; max-height: 30vh; aspect-ratio: 590 / 420; }
.scene__copy { max-width: var(--measure-hero); }
.steps__end { display: none; }

@media (min-width: 48rem) {
  .scene {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: var(--space-8);
    width: min(100% - 2 * var(--grid-margin), var(--container-max)); padding-inline: 0;
  }
  .scene__fig { order: 0; }
  .scene__fig img { max-height: 60vh; }
  /* sin JS / reduced-motion / Save-Data (≥ 48rem): la pose estática sobre su velo Diagnostic Veil, en la zona segura (x 25–75 %, y 35–95 %) */
  .scene__fig { position: relative; display: block; width: min(100%, 72vh); aspect-ratio: 1; margin-inline: auto; background: center / contain no-repeat; }
  .scene__fig img { position: absolute; left: 10%; top: 26%; width: 80%; height: 70%; max-height: none; object-fit: contain; object-position: 50% 100%; }
  .scene[data-scene="1"] .scene__fig { background-image: url("../veil/scene_01.svg"); }
  .scene[data-scene="2"] .scene__fig { background-image: url("../veil/scene_02.svg"); }
  .scene[data-scene="3"] .scene__fig { background-image: url("../veil/scene_03.svg"); }
  .scene[data-scene="4"] .scene__fig { background-image: url("../veil/scene_04.svg"); }
  .scene[data-scene="5"] .scene__fig { background-image: url("../veil/scene_05.svg"); }
  .scene[data-scene="6"] .scene__fig { background-image: url("../veil/scene_06.svg"); }
  .scene[data-scene="7"] .scene__fig { background-image: url("../veil/scene_07.svg"); }
  .scene[data-scene="8"] .scene__fig { background-image: url("../veil/scene_08.svg"); }
}

/* --- Piezas de copy --- */
.brandline {
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-stone);
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5);
}
.brandline::after { content: ""; flex: 0 0 var(--space-7); border-top: 1px solid var(--color-rose-700); }
.kicker {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-3);
  font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-rose-700);
}
.kicker__num {
  font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-chapter);
  line-height: 1; letter-spacing: 0; color: var(--color-rose-700); font-variant-numeric: lining-nums;
}
.scene__title { text-wrap: balance; }
.hero-sub { margin-top: var(--space-4); font-size: 1.0625rem; line-height: var(--leading-body-l); color: var(--color-stone); max-width: 28rem; }
.scene[data-scene="1"] .scene__title { font-size: calc(var(--text-display-xl) * 1.18); letter-spacing: -0.02em; }

.notes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); }
.note {
  font-family: var(--font-hand); font-size: var(--text-hand-m); line-height: var(--leading-hand);
  color: var(--text-hand); background: var(--color-ivory);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-note); box-shadow: var(--shadow-note);
  max-width: min(100%, calc(var(--measure-note) * 1.3)); width: fit-content; text-wrap: pretty;
  transform: rotate(-0.7deg);
}
.note:nth-child(2n) { transform: rotate(0.8deg); }
.note:nth-child(3n) { transform: rotate(-0.3deg); }
.note[data-speaker="b"] { margin-left: clamp(var(--space-5), 9%, var(--space-8)); }
.note[data-speaker="ab"] {
  position: relative; background: var(--surface-note); font-size: var(--text-hand-m);
  margin-top: var(--space-2); transform: rotate(-1.2deg);
}
.note[data-speaker="ab"]::before { /* cinta */
  content: ""; position: absolute; top: calc(var(--space-2) * -1); left: 50%; width: var(--space-8); height: var(--space-4);
  translate: -50% 0; rotate: 4deg; background: var(--color-sand); opacity: 0.75;
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 45%);
}
.note--cue { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; box-shadow: none; padding-inline: 0; transform: none; }
.note--cue::after {
  content: ""; width: var(--space-3); height: var(--space-3); border-right: var(--border-strong) solid currentColor; border-bottom: var(--border-strong) solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}
.scene[data-scene="1"] .note--cue { margin-left: 0; }

.tags { margin-top: var(--space-2); display: grid; gap: var(--space-2); }
.tags__main, .tags__fig { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags__main span, .tags__fig span {
  font-size: var(--text-label); line-height: 1; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  text-transform: uppercase; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
}
.tags__main span, .tags__fig span { background: transparent; color: var(--color-stone); box-shadow: inset 0 0 0 1px var(--color-pencil); }
.tags__main span { background: var(--color-rose-soft); color: var(--color-graphite); }

.steps-mini { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 0; margin-top: var(--space-4); counter-reset: st; }
.steps-mini li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-stone);
}
.steps-mini li + li::before { content: ""; width: var(--space-5); border-top: 1px solid var(--color-border-control); margin-inline: var(--space-2); }

.scene__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Escena 01 en móvil (todos los modos): CTA y resumen antes del diálogo, para que queden en el primer viewport (SEO-06/07) */
@media (max-width: 47.99rem) {
  .scene[data-scene="1"] .scene__copy { display: flex; flex-direction: column; }
  .scene[data-scene="1"] .scene__actions, .scene[data-scene="1"] .hero-sub { order: 1; }
  .scene[data-scene="1"] .scene__actions { margin-top: var(--space-4); }
  .scene[data-scene="1"] .notes { order: 2; }
}

/* ======================== MODO SCROLLY (capa de experiencia) ======================== */
.story[data-mode="scrolly"] { display: grid; grid-template-columns: 100%; background: var(--color-paper); }
.story[data-mode="scrolly"] > .stage,
.story[data-mode="scrolly"] > .actors,
.story[data-mode="scrolly"] > .steps { grid-area: 1 / 1; }
.story[data-mode="scrolly"] > script { display: none; }

[data-mode="scrolly"] .stage {
  display: block; position: sticky; top: 0; height: 100vh; align-self: start;
  z-index: var(--z-base); pointer-events: none;
}
.stage__sheet {
  position: absolute; inset: var(--hdr) 0 0;
  background-color: var(--color-paper);
  background-image:
    linear-gradient(90deg, transparent calc(var(--grid-margin) - var(--space-3)), var(--color-margin-rule) calc(var(--grid-margin) - var(--space-3)), var(--color-margin-rule) calc(var(--grid-margin) - var(--space-3) + 1px), transparent calc(var(--grid-margin) - var(--space-3) + 1px)),
    linear-gradient(var(--color-paper-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px);
  background-size: 100% 100%, var(--paper-grid-size) var(--paper-grid-size), var(--paper-grid-size) var(--paper-grid-size);
  overflow: hidden;
}
.stage__sheet::after { /* grano: tile estático (assets/img/grain.webp = --texture-grain a opacidad 0.06, pre-rasterizado) */
  content: ""; position: absolute; inset: 0; background-image: url("../img/grain.webp");
}
.stage__rings, .stage__tape, .stage__ticks { display: none; }

[data-mode="scrolly"] .actors {
  display: block; position: sticky; top: 0; height: 100vh; align-self: start;
  z-index: var(--z-characters); pointer-events: none;
}
.actors__band { position: absolute; inset: var(--hdr) 0 auto; height: var(--band-h); }
.actors__box { position: absolute; inset: var(--space-2) var(--space-4) var(--space-3); contain: layout paint; }
.actors__bg, .actors__rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

[data-mode="scrolly"] .steps { position: relative; z-index: var(--z-copy); }
[data-mode="scrolly"] .scene {
  display: block; height: 100vh; padding: var(--copy-top) var(--grid-margin) 0; border: 0;
  width: auto; max-width: none;
}
[data-mode="scrolly"] .scene:first-child { height: calc(100vh + var(--steps-x)); }
[data-mode="scrolly"] .scene:last-of-type { height: calc(200vh - var(--steps-x)); }
[data-mode="scrolly"] .scene__copy { position: sticky; top: var(--copy-top); will-change: opacity; }
[data-mode="scrolly"] .scene__fig { display: none; }
/* en la historia animada las etiquetas del proceso van bajo cada nodo del escenario; aquí quedan para lectores de pantalla */
[data-mode="scrolly"] .steps-mini { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }


/* Móvil y tablet: banda de personajes por encima del copy (el copy pasa por debajo al salir) */
@media (max-width: 63.99rem) {
  :root { --steps-x: calc(var(--hdr) + var(--band-h)); }  /* el copy de cada escena se asienta justo cuando su escena termina de entrar en la banda */
  [data-mode="scrolly"] .actors { z-index: calc(var(--z-copy) + 1); }
  /* el copy siguiente sigue de cerca al anterior (sin franja vacía); la escena 1 conserva su posición de hero */
  [data-mode="scrolly"] .scene:not(:first-child) { padding-top: var(--space-6); }
  .actors__band { /* mismo papel que .stage__sheet (margen, retícula y grano alineados): sin costura en el borde */
    background-color: var(--color-paper);
    background-image:
      url("../img/grain.webp"),
      linear-gradient(90deg, transparent calc(var(--grid-margin) - var(--space-3)), var(--color-margin-rule) calc(var(--grid-margin) - var(--space-3)), var(--color-margin-rule) calc(var(--grid-margin) - var(--space-3) + 1px), transparent calc(var(--grid-margin) - var(--space-3) + 1px)),
      linear-gradient(var(--color-paper-rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px);
    background-size: auto, 100% 100%, var(--paper-grid-size) var(--paper-grid-size), var(--paper-grid-size) var(--paper-grid-size);
  }
  /* velos: fundido lateral para que nada toque el borde de la banda */
  .veils {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--color-void) var(--space-3), var(--color-void) calc(100% - var(--space-3)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--color-void) var(--space-3), var(--color-void) calc(100% - var(--space-3)), transparent);
  }
  .d-only { display: none; }
  [data-mode="scrolly"] .scene__copy { max-width: none; }
  [data-mode="scrolly"] .scene .notes {
    display: block; margin-top: var(--space-4);
    background: var(--color-ivory); border-radius: var(--radius-note); box-shadow: var(--shadow-note);
    padding: var(--space-3) var(--space-4);
  }
  [data-mode="scrolly"] .scene .note {
    background: transparent; box-shadow: none; padding: 0; transform: none; max-width: none; width: auto;
    font-size: var(--text-hand-m); margin: 0;
  }
  [data-mode="scrolly"] .scene .note + .note { margin-top: var(--space-1); }
  [data-mode="scrolly"] .scene .note[data-speaker="b"] { padding-left: var(--space-5); }
  [data-mode="scrolly"] .scene .note[data-speaker="ab"] { display: inline; margin-top: 0; }
  [data-mode="scrolly"] .scene .note[data-speaker="ab"]::after { content: ""; display: block; }
  [data-mode="scrolly"] .scene .note--cue { display: flex; }
  [data-mode="scrolly"] .scene .note + .note[data-speaker="ab"]::before { content: ""; display: block; position: static; width: auto; height: 0.25em; background: none; opacity: 1; translate: none; rotate: none; clip-path: none; }  /* aire sobre el resaltado */
  [data-mode="scrolly"] .scene .note[data-speaker="ab"]::before { display: none; }
  [data-mode="scrolly"] .scene .note[data-speaker="ab"] { background: linear-gradient(transparent 12%, var(--color-rose-soft) 12%, var(--color-rose-soft) 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  [data-mode="scrolly"] .scene .tags { margin-top: var(--space-3); }
  [data-mode="scrolly"] .kicker { margin-bottom: var(--space-2); }
  [data-mode="scrolly"] .kicker__num { font-size: var(--text-display-m); }
  [data-mode="scrolly"] .scene__actions { margin-top: var(--space-4); }
  [data-mode="scrolly"] .scene[data-scene="1"] .brandline { margin-bottom: var(--space-3); }
  [data-mode="scrolly"] .scene[data-scene="1"] .scene__title { font-size: var(--text-display-xl); }
  [data-mode="scrolly"] .scene__actions .btn { flex: 1 1 auto; }
  /* escena 1: la CTA sube antes de las notas para quedar dentro del primer viewport (390×844 y 320×640) */
  [data-mode="scrolly"] .scene[data-scene="1"] .scene__copy { display: flex; flex-direction: column; }
  [data-mode="scrolly"] .scene[data-scene="1"] .scene__actions { order: 1; margin-top: var(--space-4); }
  [data-mode="scrolly"] .scene[data-scene="1"] .hero-sub { order: 1; }
  [data-mode="scrolly"] .scene[data-scene="1"] .notes { order: 2; }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  :root { --band-h: 46vh; }
  [data-mode="scrolly"] .scene .note { font-size: 1.5rem; }
  [data-mode="scrolly"] .scene__title.display-l { font-size: 2.75rem; }
  [data-mode="scrolly"] .scene__copy { max-width: 40rem; margin-inline: auto; }
  [data-mode="scrolly"] .scene .notes { padding: var(--space-4) var(--space-5); margin-top: var(--space-5); }
  [data-mode="scrolly"] .scene .note + .note { margin-top: var(--space-2); }
  [data-mode="scrolly"] .kicker__num { font-size: var(--text-chapter); }
  [data-mode="scrolly"] .scene__copy { max-width: 38rem; }
  .actors__box { inset: var(--space-2) 4% var(--space-2); }
}
/* Desktop: copy a la izquierda, personajes a la derecha, anclados abajo (sin vacío inferior) */
@media (min-width: 64rem) {
  .actors__band { inset: var(--hdr) 0 0; height: auto; }
  [data-mode="scrolly"] .scene { width: min(100% - 2 * var(--grid-margin), var(--container-max)); margin-inline: auto; padding-inline: 0; }
  [data-mode="scrolly"] .scene__copy { max-width: min(var(--measure-hero), 46%); }
  .stage__sheet { inset: var(--hdr) 0 0; border: 0 solid var(--color-sand); border-width: 0 var(--space-3) var(--space-3); border-radius: 0 0 calc(var(--radius-frame) + var(--space-3)) calc(var(--radius-frame) + var(--space-3)); }
}
@media (min-width: 64rem) {
  .actors__box { inset: 0 var(--space-7) 0 41%; }
  /* zona segura del velo en desktop: se funde bajo el header y antes del borde derecho (nada recortado en seco) */
  .veils {
    -webkit-mask-image: linear-gradient(transparent, var(--color-void) var(--space-8)), linear-gradient(to left, transparent, var(--color-void) var(--space-7));
    mask-image: linear-gradient(transparent, var(--color-void) var(--space-8)), linear-gradient(to left, transparent, var(--color-void) var(--space-7));
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .stage__rings { display: block; position: absolute; left: var(--space-2); top: var(--space-7); bottom: var(--space-7); width: var(--space-5); height: auto; }
  .stage__rings .hole { fill: var(--color-sand); stroke: var(--color-pencil-soft); stroke-width: 1; opacity: 0.8; }
  .stage__rings .wire { fill: none; stroke: var(--color-bracket-shade); stroke-width: 2; stroke-linecap: round; }
  .stage__tape { display: block; position: absolute; width: var(--space-9); height: var(--space-5); background: var(--color-sand); opacity: 0.7; clip-path: polygon(2% 8%, 98% 0, 100% 48%, 97% 100%, 1% 92%, 0 52%); }
  .stage__tape--a { top: var(--space-5); right: 30%; rotate: -4deg; }
  .stage__tape--b { bottom: var(--space-6); right: var(--space-6); rotate: 6deg; }
  .stage__ticks { display: grid; grid-auto-flow: column; align-items: center; gap: var(--space-2); position: absolute; right: var(--space-8); bottom: var(--space-5); }
  .stage__ticks li { width: var(--space-4); height: var(--border-strong); background: var(--color-border-control); opacity: 0.45; border-radius: var(--radius-pill); transition: width var(--dur-normal) var(--ease-out-soft), opacity var(--dur-normal) var(--ease-out-soft), background-color var(--dur-normal) var(--ease-out-soft); }
  .stage[data-scene="1"] .stage__ticks li:nth-child(1), .stage[data-scene="2"] .stage__ticks li:nth-child(2),
  .stage[data-scene="3"] .stage__ticks li:nth-child(3), .stage[data-scene="4"] .stage__ticks li:nth-child(4),
  .stage[data-scene="5"] .stage__ticks li:nth-child(5), .stage[data-scene="6"] .stage__ticks li:nth-child(6),
  .stage[data-scene="7"] .stage__ticks li:nth-child(7), .stage[data-scene="8"] .stage__ticks li:nth-child(8) { width: var(--space-6); opacity: 1; background: var(--color-rose-700); }
}

/* --- Diagnostic Veil por escena: <image> del velo + overlays animables (mismo plano 800×800 que el rig) --- */
.veils { position: absolute; inset: 0; }
.veil-w { position: absolute; inset: 0; overflow: hidden; visibility: hidden; will-change: transform; }
.veil-i { position: absolute; inset: 0; will-change: transform; }
.veil-w[data-bg="1"] { visibility: visible; }
/* línea de escáner del barrido entre velos (solo transform/opacity) */
.veil-scan { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; border-top: 1px solid var(--color-rose-700); }
.veil-scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--space-8); background: linear-gradient(transparent, var(--veil-rose)); }
.actors__bg .ov-lbl { font-family: var(--font-sans); font-size: 0.75rem; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-ink-muted); }
.actors__bg .ov-lbl[data-lit] { fill: var(--color-rose-700); opacity: 1; }
@media (max-width: 63.99rem) {
  /* en la banda las etiquetas SVG quedarían < 11 px: se usa la fila HTML de pasos, en línea y en orden */
  .actors__bg .ov-lbl { display: none; }
  [data-mode="scrolly"] .scene .steps-mini { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: flex; flex-wrap: wrap; row-gap: var(--space-1); margin-top: var(--space-3); }
  [data-mode="scrolly"] .scene .steps-mini li { font-size: 0.6875rem; letter-spacing: 0.04em; }
  [data-mode="scrolly"] .scene .steps-mini li + li::before { display: block; width: var(--space-3); margin-inline: var(--space-2); }
}
[data-mode="scrolly"] .scene .steps-mini li.is-on { color: var(--color-rose-700); }
@media (max-width: 22.5rem) {
  /* 320: rejilla 2×2 numerada (el orden se lee por el número; ningún separador colgando al inicio de línea) */
  [data-mode="scrolly"] .scene .steps-mini { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--space-5); row-gap: var(--space-1); counter-reset: st; }
  [data-mode="scrolly"] .scene .steps-mini li { counter-increment: st; letter-spacing: 0.03em; }
  [data-mode="scrolly"] .scene .steps-mini li::before, [data-mode="scrolly"] .scene .steps-mini li + li::before {
    content: counter(st); display: inline; width: auto; border: 0; margin: 0 var(--space-1) 0 0; font-family: var(--font-display); font-size: 0.8125rem; color: var(--color-rose-700);
  }
}
.actors__rig { will-change: transform; }
.actors__bg .ov-trail { fill: none; stroke: var(--color-crimson); stroke-width: 1.6; stroke-linecap: round; opacity: 0.55; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.actors__bg .ov-prog { fill: none; stroke: var(--color-rose-700); stroke-width: 2.4; stroke-linecap: round; opacity: 0.8; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.actors__bg .node { fill: var(--color-ivory); stroke: var(--color-pencil-soft); stroke-width: 1.4; }
.actors__bg .node[data-lit] { fill: var(--color-crimson); stroke: var(--color-crimson); }
.actors__bg .mini { fill: var(--color-ivory); stroke: var(--color-pencil-soft); stroke-width: 0.7; opacity: 0.55; }
.actors__bg .mini[data-lit] { fill: var(--color-rose-soft); stroke: var(--color-graphite); opacity: 1; }
.actors__bg .ov-arrow { fill: none; stroke: var(--color-crimson); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.actors__bg .ov-dot { fill: var(--color-crimson); opacity: 0.7; }

/* =====================================================================
   SECCIONES INFORMATIVAS
   ===================================================================== */
.section { padding-block: var(--space-section); position: relative; }
.section__head { display: grid; gap: var(--space-4); max-width: 44rem; }
.section__head .lead { margin-top: var(--space-1); }
.split { display: grid; gap: var(--space-7); }
.split__head { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.split__head .btn { margin-top: var(--space-3); }
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(var(--space-9) + var(--space-5)); }
  .split__head { position: sticky; top: calc(var(--hdr) + var(--space-7)); }
}

.section--val { background: var(--color-bone); }
.section--val::before, .section--end::before {
  content: ""; position: absolute; inset: 0; background-image: url("../img/grain.webp"); pointer-events: none;
}
.section > .container { position: relative; }
/* placa translúcida (Diagnostic Veil) con los personajes en corte: da peso a la columna del intro */
.val-plate {
  position: relative; width: min(100%, 26rem); margin-top: var(--space-6); padding: var(--space-5) var(--space-5) var(--space-3);
  background-color: var(--veil-taupe);
  background-image: linear-gradient(var(--color-paper-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px),
    radial-gradient(closest-side, var(--veil-rose), transparent);
  background-size: var(--paper-grid-size) var(--paper-grid-size), var(--paper-grid-size) var(--paper-grid-size), 100% 100%;
  border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--color-border-subtle);
  rotate: -1.2deg;
}
.val-plate img { width: 100%; height: auto; aspect-ratio: 590 / 420; }
.val-plate--form { width: min(100%, 22rem); }
@media (max-width: 63.99rem) { .val-plate.val-plate--form { width: 12rem; margin-top: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-2); } }
.val-plate__tape { position: absolute; top: calc(var(--space-3) * -1); left: 38%; width: var(--space-9); height: var(--space-5); background: var(--color-sand); opacity: 0.8; rotate: 3deg; clip-path: polygon(2% 8%, 98% 0, 100% 48%, 97% 100%, 1% 92%, 0 52%); }
.val-plate__reg { position: absolute; width: var(--space-4); height: var(--space-4); border: 1px solid var(--color-rose); border-radius: 50%; }
.val-plate__reg::before { content: ""; position: absolute; inset: 50% calc(var(--space-2) * -1) auto; border-top: 1px solid var(--color-rose); }
.val-plate__reg--a { left: var(--space-2); bottom: var(--space-2); }
.val-plate__reg--b { right: var(--space-2); top: var(--space-2); }
@media (max-width: 47.99rem) { .val-plate { width: min(100%, 20rem); margin-top: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .val-plate, .val-plate__tape { rotate: none; } }
.val-list { display: grid; gap: 0; counter-reset: val; border-top: 1px solid var(--color-border-subtle); }
.val-list__item {
  display: grid; gap: var(--space-2); padding: var(--space-6) 0 var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle); position: relative; counter-increment: val;
}
.val-list__item::before {
  content: counter(val, lower-roman) "."; position: absolute; left: 0; top: var(--space-6);
  font-family: var(--font-display); font-size: var(--text-display-m); line-height: 1.1; color: var(--color-rose-700);
}
.val-list__item p { color: var(--color-stone); max-width: var(--measure-prose); }

.section--proc {
  background-color: var(--color-ivory);
  background-image: linear-gradient(var(--color-paper-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px);
  background-size: var(--paper-grid-size) var(--paper-grid-size);
}
.process { display: grid; gap: 0; margin-top: var(--space-8); counter-reset: step; position: relative; }
.process__step { position: relative; counter-increment: step; display: grid; gap: var(--space-2); align-content: start; padding: 0 0 var(--space-7) var(--space-9); }
.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--space-1) * -1);
  font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-chapter); line-height: 1;
  color: var(--color-rose-700); font-variant-numeric: lining-nums;
}
.process__node { /* alambre + bracket (metáfora del proceso) */
  position: absolute; left: calc(var(--space-9) - var(--space-6) - var(--space-3)); top: 0; bottom: 0; width: var(--space-6);
  background: linear-gradient(var(--color-wire), var(--color-wire)) center / var(--border-control) 100% no-repeat;
}
.process__node svg { width: var(--space-6); height: auto; margin-top: var(--space-1); }
.process__node .pb-body { fill: var(--color-bracket); stroke: var(--color-bracket-shade); stroke-width: 1; }
.process__node .pb-wing { fill: var(--color-bracket-light); stroke: var(--color-bracket-shade); stroke-width: 1; }
.process__node .pb-slot { stroke: var(--color-bracket-shade); stroke-width: 1.2; }
.process__node .pb-hi { stroke: var(--color-bracket-light); stroke-width: 1.4; stroke-linecap: round; }
.process__step:last-child .process__node { bottom: auto; height: var(--space-6); }
.process__step p { color: var(--color-stone); max-width: var(--measure-mod3); }
@media (min-width: 64rem) {
  .process { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--space-6); margin-top: var(--space-9); }
  .process::before { /* alambre que une los pasos (metáfora del arco) */
    content: ""; position: absolute; left: var(--space-3); right: 0; top: calc(var(--space-8) + var(--space-3));
    border-top: var(--border-control) solid var(--color-wire);
  }
  .process__step { padding: calc(var(--space-9) + var(--space-3)) 0 0; }
  .process__step::before { top: 0; }
  .process__node { left: 0; top: calc(var(--space-8) - var(--space-1)); bottom: auto; height: auto; background: none; }
  .process__step:last-child .process__node { height: auto; }
}

.section--faq {
  background-color: var(--color-paper);
  background-image: linear-gradient(var(--color-paper-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px);
  background-size: var(--paper-grid-size) var(--paper-grid-size);
}
/* velo Diagnostic Veil sutil por sección, anclado a la derecha (estático, sin coste de scroll) */
.section--proc::after, .section--faq::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: min(46rem, 60vw); aspect-ratio: 1; pointer-events: none;
  background: right bottom / contain no-repeat; opacity: 0.28;
}
.section--proc::after { display: none; }
@media (min-width: 64rem) {
  /* velo propio de #proceso: solo la arcada a lápiz, arriba a la derecha, fuera de las columnas de texto */
  .section--proc::after {
    display: block; background-image: url("../veil/section_proceso.svg"); background-position: center;
    top: var(--space-8); right: var(--grid-margin); bottom: auto; width: 18rem; opacity: 0.18;
    -webkit-mask-image: radial-gradient(closest-side, var(--color-void) 70%, transparent);
    mask-image: radial-gradient(closest-side, var(--color-void) 70%, transparent);
  }
}
.section--faq::after { background-image: url("../veil/scene_02.svg"); opacity: 0.18;
  -webkit-mask-image: linear-gradient(transparent, var(--color-void) 15%, var(--color-void) 85%, transparent);
  mask-image: linear-gradient(transparent, var(--color-void) 15%, var(--color-void) 85%, transparent); }
@media (max-width: 63.99rem) { .section--faq::after { display: none; } }
.section--proc > .container, .section--faq > .container { z-index: 1; }
.section--faq { overflow: clip; }  /* el velo de FAQ nunca invade el pie de Proceso */
.faq { border-top: 1px solid var(--color-border-subtle); }
.faq__item { border-bottom: 1px solid var(--color-border-subtle); }
.faq__q {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: calc(var(--tap-min) + var(--space-3)); padding: var(--space-4) var(--space-2) var(--space-4) 0;
  cursor: pointer; color: var(--color-graphite); border-radius: var(--radius-note);
  transition: color var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast) var(--ease-out-soft);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-crimson); }
.faq__q:focus-visible { outline-offset: calc(var(--focus-ring-width) * -1); }
.faq__qtext { font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-semibold); }
.faq__q .icon--chevron { transition: transform var(--dur-normal) var(--ease-out-soft); color: var(--color-crimson); }
.faq__item[open] .faq__q .icon--chevron { transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-7) var(--space-5) 0; }
.faq__a p { max-width: var(--measure-prose); color: var(--color-stone); }
.faq__more { font-weight: var(--weight-semibold); color: var(--color-stone); margin-top: var(--space-2); }

.section--end { background: var(--color-bone); padding-block: var(--space-section); }
.end {
  position: relative; display: grid; gap: var(--space-6); align-items: center;
  background-color: var(--color-paper);
  background-image: linear-gradient(var(--color-paper-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px);
  background-size: var(--paper-grid-size) var(--paper-grid-size);
  border-radius: var(--radius-frame); box-shadow: var(--shadow-3); padding: var(--space-7) var(--space-5); overflow: hidden;
}
.end::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--veil-rose); top: -12%; left: -14%; }
.end__fig { position: relative; display: grid; place-items: center; }
.end__fig img { width: min(100%, 34rem); height: auto; aspect-ratio: 590 / 420; }
.end__copy { position: relative; display: grid; gap: var(--space-4); justify-items: start; text-align: left; }
.end__copy .btn { margin-top: var(--space-3); }
@media (max-width: 47.99rem) { .end__copy .btn { width: 100%; } }
@media (min-width: 48rem) {
  .end { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-7); }
}

/* ---------- CTA fija inferior (móvil, index y 404) · SEO-08 ---------- */
.sticky-cta { display: none; }
@media (max-width: 47.99rem) {
  .page-index, .page-404 { --sticky-h: calc(var(--control-height) + 2 * var(--space-3) + env(safe-area-inset-bottom)); padding-bottom: var(--sticky-h); }
  .page-index .sticky-cta, .page-404 .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) - 1);
    padding: var(--space-3) var(--grid-margin) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-mineral); box-shadow: inset 0 1px 0 var(--color-border-subtle), var(--shadow-2);
    animation: sticky-in var(--dur-normal) var(--ease-out-soft);
  }
}
@keyframes sticky-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { animation: none !important; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-bone); border-top: 1px solid var(--color-border-subtle); padding-block: var(--space-7); }
.site-footer__inner { display: grid; gap: var(--space-3); justify-items: start; }
.site-footer__brand { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-medium); color: var(--color-graphite); }
.site-footer__legal, .site-footer__copy { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); max-width: var(--measure-prose); }
@media (min-width: 64rem) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-8); }
  .site-footer__legal { grid-column: 1; }
  .site-footer__copy { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* =====================================================================
   VALORACIÓN (capa Operativa)
   ===================================================================== */
.form-page { padding-top: calc(var(--hdr) + var(--space-7)); padding-bottom: var(--space-section); }
.form-layout { display: grid; gap: var(--space-7); }
.form-intro { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.form-intro__title { margin-top: var(--space-2); }
.form-intro > p:not(.eyebrow):not(.lead) { color: var(--color-stone); max-width: var(--measure-prose); }
.link-action--back { margin-left: calc(var(--space-1) * -1); margin-bottom: var(--space-2); }
.next { padding-top: var(--space-5); border-top: 1px solid var(--color-border-subtle); width: 100%; max-width: var(--measure-prose); }
@media (min-width: 64rem) { .next { margin-top: var(--space-6); } }
.next__list { margin-top: var(--space-3); display: grid; gap: var(--space-3); counter-reset: nx; }
.next__list li { counter-increment: nx; display: grid; grid-template-columns: var(--space-6) 1fr; align-items: baseline; color: var(--color-stone); }
.next__list li::before { content: counter(nx) "."; font-family: var(--font-display); font-size: var(--text-title); color: var(--color-rose-700); }
@media (min-width: 64rem) {
  .form-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: var(--space-9); row-gap: 0; }
  .form-intro { grid-column: 1; grid-row: 1; }
  .form-col { grid-column: 2; grid-row: 1 / span 2; }
  .next { grid-column: 1; grid-row: 2; align-self: start; }
}
.form-col { display: grid; gap: var(--space-5); align-content: start; max-width: var(--measure-form); width: 100%; }
.form-col:focus { outline: none; }
.demo-note, .noscript-note {
  font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-stone);
  background: var(--color-bone); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4);
  box-shadow: inset var(--border-strong) 0 0 var(--color-rose-700);
}
.form { background: var(--color-ivory); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-panel); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .form { padding: var(--space-7); } }
.form__req { font-size: var(--text-small); color: var(--text-muted); }
.form__section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-5); }
.form__section + .form__section { padding-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); }
.form__legend { font-family: var(--font-display); font-size: var(--text-display-m); line-height: var(--leading-display-m); font-weight: var(--weight-medium); color: var(--color-graphite); padding: 0; margin-bottom: var(--space-5); float: left; width: 100%; }
.form__legend + * { clear: both; }

.field { display: grid; gap: var(--space-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.field__label { font-size: 1rem; line-height: var(--leading-title); font-weight: var(--weight-semibold); color: var(--color-graphite); padding: 0; }
.field--group > .field__label { float: left; width: 100%; margin-bottom: var(--space-2); }
.field--group > .field__label + * { clear: both; }
.req { color: var(--color-crimson); margin-left: var(--space-1); }
.opt { font-weight: var(--weight-regular); color: var(--text-muted); margin-left: var(--space-2); }
.field__help { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.field__error { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-error); font-weight: var(--weight-semibold); }
.field__error .icon { margin-top: 0.15em; stroke-width: 2; }
.input {
  width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--control-pad-x);
  background: var(--color-mineral); border: var(--border-control) solid var(--color-border-control); border-radius: var(--radius-input);
  box-shadow: var(--shadow-inset-control); font-size: 1rem; line-height: 1.4; color: var(--color-graphite);
  transition: border-color var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.input:hover { border-color: var(--color-stone); }
.input:focus { border-color: var(--color-graphite); outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); box-shadow: var(--shadow-1); }
.input[aria-invalid="true"] { border: var(--border-strong) solid var(--color-error); }
.input--area { min-height: calc(var(--space-9) + var(--space-5)); resize: vertical; }
.select { position: relative; }
.input--select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--space-7) - var(--space-1)); cursor: pointer; }
.select .icon--chevron { position: absolute; right: var(--space-4); top: 50%; translate: 0 -50%; pointer-events: none; color: var(--color-graphite); width: var(--space-4); height: var(--space-4); }
.field__count { font-size: var(--text-small); color: var(--text-muted); justify-self: end; font-variant-numeric: tabular-nums; }

.choices { display: grid; gap: var(--space-1); }
.field--inline .choices { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-2); }
.choice { position: relative; }
.choice__input { position: absolute; opacity: 0; width: var(--tap-min); height: var(--tap-min); margin: 0; left: 0; top: 0; cursor: pointer; }
.choice__label {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-2) 0;
  font-size: 1rem; line-height: 1.4; cursor: pointer; color: var(--color-graphite);
}
.choice__label::before {
  content: ""; flex: none; width: var(--check-size); height: var(--check-size); border-radius: 50%;
  background: var(--color-mineral); box-shadow: inset 0 0 0 var(--border-control) var(--color-border-control);
  transition: box-shadow var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast) var(--ease-out-soft);
}
.choice__label:hover::before { box-shadow: inset 0 0 0 var(--border-control) var(--color-stone); }
.choice__input:checked + .choice__label::before { background: var(--color-crimson); box-shadow: inset 0 0 0 var(--border-control) var(--color-crimson), inset 0 0 0 calc(var(--check-size) / 3.4) var(--color-mineral); }
.choice__input:focus-visible + .choice__label::before { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.choice__input[aria-invalid="true"] + .choice__label::before { box-shadow: inset 0 0 0 var(--border-strong) var(--color-error); }
.choice--check .choice__label { align-items: flex-start; padding-top: var(--space-3); }
.choice--check .choice__label::before { border-radius: var(--radius-note); margin-top: 0.1em; }
.choice--check .choice__input:checked + .choice__label::before {
  background: var(--color-crimson) center / 80% no-repeat;
  background-image: linear-gradient(transparent, transparent);
  box-shadow: inset 0 0 0 var(--border-control) var(--color-crimson);
}
.choice--check .choice__input:checked + .choice__label::after {
  content: ""; position: absolute; left: calc(var(--check-size) * 0.34); top: calc(var(--space-3) + var(--check-size) * 0.12);
  width: calc(var(--check-size) * 0.32); height: calc(var(--check-size) * 0.58);
  border-right: var(--border-strong) solid var(--color-mineral); border-bottom: var(--border-strong) solid var(--color-mineral); rotate: 45deg;
}

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-top: var(--space-2); }
.btn--submit { min-width: var(--measure-btn-min); }
.btn--submit[aria-disabled="true"] { background: var(--color-crimson-700); opacity: 0.72; cursor: progress; }
@media (max-width: 47.99rem) { .btn--submit { width: 100%; } }

.error-summary {
  background: var(--color-error-soft); border-radius: var(--radius-card); box-shadow: inset var(--space-1) 0 0 var(--color-error);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
}
.error-summary:focus { outline: var(--focus-ring-width) solid var(--color-error); outline-offset: var(--focus-ring-offset); }
.error-summary__title { font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-semibold); color: var(--color-graphite); }
.error-summary__list { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.error-summary__list a { display: inline-block; min-height: var(--tap-min); padding-block: var(--space-2); white-space: pre-wrap; color: var(--color-error); font-weight: var(--weight-semibold); font-size: 1rem; text-decoration: underline; text-underline-offset: 0.2em; }
.error-summary__list a:hover { text-decoration-thickness: var(--border-strong); }
.error-summary__list a { color: var(--color-graphite); text-decoration-color: var(--color-error); }
@media (max-width: 47.99rem) {
  /* móvil: solo el nombre del campo (el mensaje ya está junto al campo), en fila con salto */
  .error-summary { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); }
  .error-summary__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-2); }
  .error-summary__msg { display: none; }
}

.success { background: var(--color-rose-soft); border-radius: var(--radius-panel); padding: var(--space-7) var(--space-6); }
.demo-note--success { background: var(--color-mineral); margin-top: var(--space-2); }
.success__inner { display: grid; gap: var(--space-4); justify-items: start; }
.success .icon--check { color: var(--color-crimson); width: var(--space-7); height: var(--space-7); stroke-width: 1.6; }
.success__title:focus { outline: none; }
.success__title:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.success__body { font-size: var(--text-body-l); color: var(--color-graphite); max-width: var(--measure-prose); }
.success__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }

/* ---------- 404 ---------- */
.p404 { padding-top: calc(var(--hdr) + var(--space-8)); padding-bottom: var(--space-section); background-color: var(--color-paper);
  background-image: linear-gradient(var(--color-paper-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-paper-rule) 1px, transparent 1px);
  background-size: var(--paper-grid-size) var(--paper-grid-size); min-height: 80vh; }
.p404__inner { display: grid; gap: var(--space-6); align-items: center; }
.p404__fig img { width: min(62vw, 18rem); height: auto; aspect-ratio: 360 / 420; margin-inline: auto; }
.p404__copy { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 48rem) { .p404__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-8); } }

/* ---------- Reduced motion: sin transformaciones decorativas ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  .note, .note:nth-child(2n), .note:nth-child(3n), .note[data-speaker="ab"] { transform: none; }
  .note[data-speaker="ab"]::before { rotate: none; }
  .btn:hover .icon--arrow, .link-action:hover .icon { transform: none; }
  .btn--primary:active { transform: none; }
}

/* Pantallas muy estrechas (≤ 360): hero compacto para que la CTA quede cerca del primer viewport */
@media (max-width: 22.5rem) {
  :root { --band-h: 36vh; }
  .hero-sub { font-size: 1rem; margin-top: var(--space-2); }
}

/* Móvil bajo (≤ 42rem de alto, p. ej. 320×640 / 375×667): copy más compacto para que cada escena quepa entera bajo la banda */
@media (max-width: 63.99rem) and (max-height: 42rem) {
  :root { --copy-top: calc(var(--hdr) + var(--band-h) + var(--space-4)); }
  [data-mode="scrolly"] .scene:not(:first-child) { padding-top: var(--space-4); }
  [data-mode="scrolly"] .scene__title.display-l { font-size: 1.75rem; }
  [data-mode="scrolly"] .scene .note { font-size: 1.125rem; }
  [data-mode="scrolly"] .scene .notes { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); }
  [data-mode="scrolly"] .kicker__num { font-size: var(--text-title); }
}

/* =====================================================================
   PIEZAS NUEVAS · mdd-landing (24-oct-2026). Sólo componentes que no existían: tipos de valoración,
   tratamientos, contacto, datos del pie, aviso corto, Turnstile y la página de privacidad.
   Mismos tokens, misma tipografía y misma paleta; ninguna regla anterior cambia.
   ===================================================================== */
.split__body { display: grid; gap: var(--space-7); align-content: start; min-width: 0; }

/* --- Tipos de valoración (dentro de «La valoración») --- */
.val-tipos { display: grid; gap: var(--space-4); }
.val-tipos__list { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .val-tipos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.val-tipo {
  display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5);
  background: var(--color-ivory); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card);
}
.val-tipo__name { margin: 0; font-family: var(--font-display); font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-medium); color: var(--color-graphite); }
.val-tipo__data { display: grid; gap: var(--space-1); margin: 0; font-size: var(--text-body); line-height: var(--leading-body); }
.val-tipo__data dt, .val-tipo__data dd { display: inline; margin: 0; }
.val-tipo__data dt { font-weight: var(--weight-semibold); color: var(--color-graphite); }
.val-tipo__data dt::after { content: ": "; }
.val-tipo__data dd { color: var(--color-stone); }
.val-tipo p { color: var(--color-stone); font-size: var(--text-body); line-height: var(--leading-body); }
.val-tipo__label { font-weight: var(--weight-semibold); color: var(--color-graphite); }

/* --- Tratamientos --- */
.section--trat { background: var(--color-bone); }
.trat-list { display: grid; gap: 0; margin-top: var(--space-8); border-top: 1px solid var(--color-border-subtle); }
.trat { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border-subtle); }
.trat p { color: var(--color-stone); max-width: var(--measure-prose); }
@media (min-width: 48rem) {
  .trat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
}
@media (min-width: 64rem) {
  .trat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Contacto --- */
.section--cont { background: var(--color-ivory); }
.cont-list { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--color-border-subtle); }
.cont-list__row { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-subtle); }
.cont-list__row dt { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-rose-700); }
.cont-list__row dd { margin: 0; color: var(--color-graphite); }
.cont-list__row a { color: var(--text-accent); text-underline-offset: 0.2em; }
@media (min-width: 48rem) { .cont-list__row { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--space-5); align-items: baseline; } }

/* --- Pie: datos profesionales, contacto y enlaces --- */
.site-footer__prof, .site-footer__contact { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-stone); max-width: var(--measure-prose); }
.site-footer__contact a, .site-footer__links a { color: var(--text-accent); text-underline-offset: 0.2em; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-size: var(--text-small); line-height: var(--leading-small); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
@media (min-width: 64rem) {
  .site-footer__prof, .site-footer__contact, .site-footer__links { grid-column: 1; }
}

/* --- Formulario: aviso corto, Turnstile, campo trampa y folio --- */
.form__aviso { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-stone); max-width: var(--measure-prose); }
.form__aviso strong { color: var(--color-graphite); font-weight: var(--weight-semibold); }
.form__aviso a, .choice__label a { color: var(--text-accent); text-underline-offset: 0.2em; }
.field--ts { min-height: var(--space-9); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.success__folio { font-weight: var(--weight-semibold); color: var(--color-graphite); font-variant-numeric: tabular-nums; }

/* --- Página de privacidad --- */
.legal-page { padding-top: calc(var(--hdr) + var(--space-7)); padding-bottom: var(--space-section); }
.legal { display: grid; gap: var(--space-4); max-width: var(--measure-prose); }
.legal__meta { font-size: var(--text-small); color: var(--text-muted); }
.legal__h { margin-top: var(--space-5); }
.legal p, .legal li { color: var(--color-stone); }
.legal strong { color: var(--color-graphite); font-weight: var(--weight-semibold); }
.legal__list { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; }

/* --- Tarjeta de cookies (sólo con analítica; hoy no se sirve) --- */
.cookies {
  position: fixed; left: var(--grid-margin); right: var(--grid-margin); bottom: var(--space-4); z-index: calc(var(--z-header) + 1);
  max-width: 34rem; display: grid; gap: var(--space-4); padding: var(--space-5);
  background: var(--color-mineral); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-3);
  font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-stone);
}
.cookies a { color: var(--text-accent); }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-footer__pref { background: none; border: 0; padding: 0; min-height: var(--tap-min); color: var(--text-accent); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; font-size: inherit; }

/* --- Logotipo oficial en el encabezado (DATOS §1), a su tamaño mínimo legible (Miguel, 24-oct) ---
   La leyenda «ORTODONCIA ESPECIALIZADA» mide 3 % del ancho del logotipo: a 240 px sus mayúsculas miden unos 7.2 px.
   El encabezado crece para contenerlo (todo el sitio se acomoda con --hdr). En celular, el logotipo toma el ancho
   que deja el botón corto «Agenda» y el menú (unos 200 px a 390 de ancho). */
:root { --header-height-sm: 6.5rem; --header-height: 8rem; }
.brand { min-height: 0; }
.brand__logo { display: block; width: min(12.5rem, calc(100vw - 2 * var(--grid-margin) - 9.5rem)); height: auto; }
@media (max-width: 47.99rem) {
  .btn--header .cta-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn--header .cta-short { display: inline; }
}
@media (min-width: 48rem) { .brand__logo { width: 15rem; } }