/* ─────────────────────────────────────────────────────────
   Medora · landing.css
   Tokens del sistema Sereno + estilos por audiencia.

   IMPORT del Design System tokens (Phase 2 fix 2026-05-27).
   `tokens.css` aquí es una COPIA de `src/styles/tokens.css`
   (canonical). Mantiene sync via `scripts/sync-tokens.mjs`
   que corre en prebuild/predev. CSS @import DEBE ser la
   primera @-rule del stylesheet — antes de cualquier otra
   regla CSS o el browser lo invalida (CSS spec §6).
   ───────────────────────────────────────────────────────── */
@import url("./tokens.css");

:root {
  /* Legacy local aliases (landing-specific, NO duplican
     tokens.css. Migrarlos progresivamente a Sereno names
     `--color-ink`, `--color-bone`, etc. en Phase 2). */
  --ink:       #1C1B17;
  --ink-soft:  #3A3933;
  --ink-mute:  rgba(28, 27, 23, 0.55);
  --ink-faint: rgba(28, 27, 23, 0.32);
  --ink-line:  rgba(28, 27, 23, 0.10);
  --ink-line-soft: rgba(28, 27, 23, 0.06);
  --sky:       #B8D0E3;
  --sky-deep:  #6F9BBD;
  --sky-tint:  #E5EFF6;
  --paper:     #EDEAE2;
  --bone:      #F7F5F0;
  --stone:     #A6A29A;
  --red:       #C73D32;
  --red-deep:  #9F2A20;
  --red-tint:  #F4DAD5;
  --red-soft:  #FBE7E2;
  --amber:     #B47A12;
  --amber-deep:#8C5A0E;
  --amber-soft:#FBF5E0;

  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Sticky-header altura. Mobile (≤720) measured 62px en iPhone 14
     y 59px en iPhone SE; usamos 64 con un buffer pequeño. Desktop
     override (≥721px) sube a 83px (padding 18×2 + brand height 38px
     + line-height + border = ~83 medido con Playwright). Se usa en:
     - scroll-padding-top global → snap alignment correcto bajo header
     - min-height: calc(100svh - --header-h) en mobile + desktop laptop
       (≤1000h) para que cada section quepa exacto en viewport-h. */
  --header-h: 64px;
}

@media (min-width: 721px) {
  /* Desktop override. Custom property en :root se redeclara sin
     side effects de cascade. Spec-safe. */
  :root { --header-h: 83px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Snap targets se alinean a `var(--header-h)` desde el top del
     viewport — así el header sticky no tapa el contenido del section
     al snap-anclar. Pareja del min-height: calc(100svh - --header-h)
     que aplica a cada section en mobile. */
  scroll-padding-top: var(--header-h);
}

/* Scroll-snap desactivado globalmente (QA feedback 2026-05-27).
   El JS snap-enforcer (installMobileSnapEnforcer en landing.js)
   también queda desactivado en early-return. */

/* ─────────────────────────────────────────────────────────
   Mobile: ajustes por-section para que cada section quepa
   EXACTAMENTE en el viewport. User feedback 2026-05-27 "todas
   las secciones del tamaño del viewport". Iteración por section
   reduciendo padding/fonts/gaps hasta que section.h ≤ 100svh.
   ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* tilcia-paciente: chaos animation + story block. 2026-05-27 post
     header-h fix: target 780. Chaos 360→330 (-30) + padding 16→16.
     Story h2 grande sigue dramatic, solo recortado el chaos. */
  #tilcia-paciente { padding: var(--space-4) 0; }
  #tilcia-paciente .tilcia-warm__chaos { max-height: 330px; }
  /* Tilcia h2 mobile post-Option-A: base .display-1 clamp 56-104
     ya funciona bien en mobile sin override. Solo ajusta margin
     compressed para viewport-h. Si Option A pierde demasiado
     visualmente, fallback a Option C con scoped clamp custom. */
  #tilcia-paciente .tilcia-warm__story .display-1 { margin: var(--space-2) 0 6px; }
  #tilcia-paciente .story p { margin-bottom: 8px; line-height: 1.45; }
  #tilcia-paciente .story p:last-child { margin-bottom: 0; }

  /* Feature-grid (Producto no promesa): 3 feature-cards stacked.
     981 actual, need 844. */
  #aud-inversionista .feature-grid { gap: 10px; margin-top: 18px; }
  #aud-inversionista .feature-card { padding: 16px 16px; }
  #aud-inversionista .feature-card h3 { font-size: 17px; margin: 8px 0 4px; }
  #aud-inversionista .feature-card p { font-size: 13px; line-height: 1.4; margin: 0; }
  #aud-inversionista .feature-card__icon svg { width: 18px; height: 18px; }

  /* cta-inversionista (Phase 2.4.b migration 2026-05-27).
     Estos #cta-* blocks tienen padding/margin/line-height hand-tuned
     para fit en target 780px (viewport-h fit constraint). Per
     DESIGN_SYSTEM.md §6.4, raw values aquí están justificados —
     migrarlos a tokens redondearia y rompería el viewport budget.
     Migradas: font-sizes 14/11 → tokens, gaps 8 → space-2, label-fs.
     Raw mantenidos: padding (18/22/24 hand-tuned), h2 clamp custom,
     letter-spacing 0.08em (más sutil que kicker 0.15), line-height
     compactos 1.4/1.15, textarea min-height (viewport-h compressed). */
  #cta-inversionista { padding: 18px 0; }
  #cta-inversionista .form-card { padding: 18px 18px; }
  #cta-inversionista .form-card h2 { font-size: clamp(24px, 6.5vw, 30px); margin: 6px 0 4px; line-height: var(--leading-snug); }
  #cta-inversionista .form-card > p { font-size: var(--text-helper); margin: 0 0 10px; line-height: 1.4; }
  #cta-inversionista .form-row { gap: var(--space-2); margin-bottom: var(--space-2); }
  #cta-inversionista .form-field label { font-size: var(--type-mono-sm); margin-bottom: 3px; letter-spacing: 0.08em; }
  #cta-inversionista .form-field input,
  #cta-inversionista .form-field select,
  #cta-inversionista .form-field textarea { padding: var(--space-2) 10px; font-size: var(--text-helper); }
  #cta-inversionista .form-field textarea { min-height: 44px; }
  /* actions stack column en mobile para que el btn no se aplaste ni el
     helper quede tapado. Pre-existing visual issue confirmado en
     screenshot 2026-05-27. */
  #cta-inversionista .actions { margin-top: 10px; gap: 6px; flex-direction: column; align-items: flex-start; }
  #cta-inversionista .actions .btn { padding: 10px 18px; font-size: var(--text-helper); white-space: nowrap; }
  #cta-inversionista .actions .helper { font-size: var(--type-mono-sm); }

  /* Stat-row blocks (inversionista "Tres fuerzas convergen" +
     "Mercado"). 3 stat-cells stacked × ~280 + section-head + padding
     = 1028 / 932. Compresión: padding section, padding cell, num size,
     det font, section-head margins. */
  /* 2026-05-27 post header-h fix: padding 28→24, stat-cell padding
     16→14 para shrinkear ~12px y entrar en 780. */
  #aud-inversionista section.block:not(:last-of-type) { padding: 24px 0; }
  #aud-inversionista .stat-row { gap: 8px; margin-top: 18px; }
  #aud-inversionista .stat-cell { padding: 14px 14px; }
  #aud-inversionista .stat-cell .num { font-size: clamp(32px, 9vw, 42px); margin-bottom: 2px; line-height: 1; }
  #aud-inversionista .stat-cell .lbl { font-size: 9.5px; margin-bottom: 4px; letter-spacing: 0.1em; }
  #aud-inversionista .stat-cell .det { font-size: 12.5px; line-height: 1.4; }
  #aud-inversionista .section-head { margin-bottom: 0; }
  #aud-inversionista .section-head h2 { font-size: clamp(26px, 7vw, 34px); margin: 6px 0 4px; line-height: var(--leading-snug); }
  #aud-inversionista .section-head p { font-size: 13px; margin: 0; line-height: 1.4; }

  /* hero--inversionista: kicker + h1 + lede + CTA + KPI row 4-item.
     Default 986, viewport 844, overflow 142. Compresión: KPI row de
     1-col stack → 2×2 grid (saves ~150), kpi cards más compactas,
     reducir margins entre bloques. */
  /* hero-inversionista mobile: Phase 2.7 migration.
     Sub-pixel 9.5px FORBIDDEN per §9 → migrado a --type-mono-sm (11, +1.5px). */
  .hero--inversionista { padding: var(--space-10) 0 var(--space-8); }
  .hero--inversionista .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--space-6); }
  .hero--inversionista .kpi { padding: 14px var(--space-3); }
  .hero--inversionista .kpi-num { font-size: clamp(28px, 8vw, 36px); margin-bottom: var(--space-1); }
  .hero--inversionista .kpi-lbl { font-size: var(--type-mono-sm); line-height: 1.3; letter-spacing: 0.08em; }
  .hero--inversionista .hero__lede { margin-bottom: var(--space-4); }
  .hero--inversionista .hero__cta { margin-bottom: 0; }

  /* how-medico: 3 step-cards stacked + section-head. 836 actual,
     target 780. Phase 2.5 migration: spacings + font tokens.
     Padding 18 (step-card) + 6 (h2 margin) hand-tuned para fit
     viewport-h, raw justificado per §6.4. */
  #how-medico { padding: var(--space-6) 0; }
  #how-medico .steps { gap: var(--space-3); margin-top: 18px; }
  #how-medico .step-card { padding: var(--space-4) 18px; }
  #how-medico .step-card h3 { font-size: 18px; margin: 0 0 var(--space-1); }
  #how-medico .step-card p { font-size: var(--text-helper); line-height: 1.4; margin: 0; }
  #how-medico .section-head { margin-bottom: 0; }
  #how-medico .section-head h2 { font-size: clamp(26px, 7vw, 34px); line-height: var(--leading-snug); margin: 6px 0 var(--space-1); }

  /* cta-paciente: 3 rows form + select. 840 actual, target 780.
     Misma compresión que cta-medico/cta-inversionista.
     Phase 2.4.b migration: font-sizes + gaps → tokens. Padding raw
     hand-tuned (viewport-h budget). */
  #cta-paciente { padding: 24px 0; }
  #cta-paciente .form-card { padding: 22px 18px; }
  #cta-paciente .form-card h2 { font-size: clamp(24px, 6.5vw, 30px); margin: 6px 0 4px; line-height: var(--leading-snug); }
  #cta-paciente .form-card > p { font-size: var(--text-helper); margin: 0 0 10px; line-height: 1.4; }
  #cta-paciente .form-row { gap: var(--space-2); margin-bottom: var(--space-2); }
  #cta-paciente .form-field label { font-size: var(--type-mono-sm); margin-bottom: 3px; letter-spacing: 0.08em; }
  #cta-paciente .form-field input,
  #cta-paciente .form-field select { padding: var(--space-2) 10px; font-size: var(--text-helper); }
  #cta-paciente .actions { margin-top: 10px; gap: var(--space-2); }
  #cta-paciente .actions .btn { padding: 10px 18px; font-size: var(--text-helper); }

  /* cta-medico: form de 4 rows + textarea. Default 996, viewport 844,
     overflow 152. Compresión agresiva: padding section + form-card,
     gaps menores, h2 más chico, textarea rows reducidas.
     2026-05-27: post header-h fix, reducido padding section 28→24.
     Phase 2.4.b migration: font-sizes + gaps → tokens. Padding raw
     hand-tuned (viewport-h budget). */
  #cta-medico { padding: 24px 0; }
  #cta-medico .form-card { padding: 22px 18px; }
  #cta-medico .form-card h2 { font-size: clamp(24px, 6.5vw, 30px); margin: 6px 0 4px; line-height: var(--leading-snug); }
  #cta-medico .form-card > p { font-size: var(--text-helper); margin: 0 0 10px; line-height: 1.4; }
  #cta-medico .form-row { gap: var(--space-2); margin-bottom: var(--space-2); }
  #cta-medico .form-field label { font-size: var(--type-mono-sm); margin-bottom: 3px; letter-spacing: 0.08em; }
  #cta-medico .form-field input,
  #cta-medico .form-field select,
  #cta-medico .form-field textarea { padding: var(--space-2) 10px; font-size: var(--text-helper); }
  #cta-medico .form-field textarea { min-height: 56px; }
  #cta-medico .actions { margin-top: 10px; gap: 6px; flex-direction: column; align-items: flex-start; }
  #cta-medico .actions .btn { padding: 10px 18px; font-size: var(--text-helper); white-space: nowrap; }
  #cta-medico .actions .helper { font-size: var(--type-mono-sm); }
}

/* ─────────────────────────────────────────────────────────
   Mobile: cada sección NON-scrolly ocupa 100svh con contenido
   centrado vertical. User feedback 2026-05-27: el snap dejaba
   secciones cortas con espacio vacío abajo (compat 741px vs
   viewport 844px en iPhone 14). Igualando section.h = viewport.h,
   el snap aterriza limpio y el contenido se ve framed.
   - scrolly sections excluidas (ya son multi-viewport por pin)
   - .site-footer EXCLUIDO (Phase 2-Audit MUST_FIX: footer ~300px
     forzado a 100svh = void negro gigante final, lee como "página
     rota"). Footer mantiene snap-align: start del rule anterior.
   - Contenido se centra vía CSS Grid (no flex column) porque grid
     `align-content: center` respeta el spacing intrínseco de los
     hijos directos. Las sections con múltiples direct children
     (ej. hero text + hero-art) NO se pegan sin gap. Cada child
     se vuelve su propia grid row con su margin natural preservado.
     Phase 2-Audit frontend-dev MUST_FIX #1.
   - Solo aplica mobile (≤720px); desktop preserva su layout natural.
   ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero,
  section.block:not(.scrolly) {
    /* 100svh - --header-h: deja el área visible debajo del header
       sticky exactamente del tamaño del section. Combinado con
       scroll-padding-top: --header-h del html, el snap alinea la
       sección JUSTO bajo el header. User feedback 2026-05-27:
       "la seccion no puede ser del tamaño del viewport si no del
       tamaño del viewport menos el header". */
    min-height: calc(100svh - var(--header-h));
    display: grid;
    align-content: center;
  }
}

/* Desktop "normal/laptop" (≥721 ancho, ≤1000 alto). User feedback
   2026-05-27 segunda iteración: en su laptop 15.3" (1536×864 lógico),
   el snap se disparaba pero las sections no encajaban al viewport
   porque su altura natural era ~600-700 (cortas) o >800 (cta-* largas).
   La pantalla externa 27" (1920×1080) NO entra al rule porque su
   altura 1080 > 1000 — el user explícitamente prefiere ese layout
   "natural" para la grande, así que el threshold quirúrgico lo
   excluye. iPad landscape 1024×768 entra: acceptable (es un laptop
   pequeño en landscape). iPad portrait 768×1024 NO entra (1024 > 1000).
   Pattern espejo del mobile rule de arriba. */
@media (min-width: 721px) and (max-height: 1000px) {
  .hero,
  section.block:not(.scrolly) {
    min-height: calc(100svh - var(--header-h));
    display: grid;
    align-content: center;
  }

  /* cta-medico + cta-inversionista forms son largas (884 y 910 natural
     en desktop). En laptop 1536×864 target = 781, overflows +103 y +129
     respectivamente. Comprimir padding del form-card, fonts y gaps
     similar al patrón mobile pero menos agresivo (desktop tiene más
     espacio horizontal disponible). Calibrado en 2 iteraciones para
     fit perfecto en 1536 y 1440. */
  /* Phase 2.4.b laptop migration: font-sizes + gaps → tokens.
     Padding 22/36/9/12 raw hand-tuned para fit laptop 1536/1440. */
  #cta-medico .form-card,
  #cta-inversionista .form-card {
    padding: 22px 36px;
  }
  #cta-medico .form-card h2,
  #cta-inversionista .form-card h2 {
    font-size: clamp(26px, 2.2vw, 32px);
    margin: 4px 0 4px;
    line-height: var(--leading-snug);
  }
  #cta-medico .form-card > p,
  #cta-inversionista .form-card > p {
    font-size: var(--text-helper);
    margin: 0 0 10px;
    line-height: 1.4;
  }
  #cta-medico .form-row,
  #cta-inversionista .form-row {
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }
  #cta-medico .form-field label,
  #cta-inversionista .form-field label {
    font-size: var(--type-mono-sm);
    margin-bottom: 3px;
    letter-spacing: 0.1em;
  }
  #cta-medico .form-field input,
  #cta-medico .form-field select,
  #cta-medico .form-field textarea,
  #cta-inversionista .form-field input,
  #cta-inversionista .form-field select,
  #cta-inversionista .form-field textarea {
    padding: 9px var(--space-3);
    font-size: var(--text-helper);
  }
  #cta-medico .form-field textarea,
  #cta-inversionista .form-field textarea {
    min-height: 50px;
  }
  #cta-medico .actions,
  #cta-inversionista .actions {
    margin-top: 10px;
  }
}
body {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  color: var(--ink);
  font-size: 17px;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Background subtly shifts hue based on scroll position.
     var(--bone) acts as fallback layer inside the multi-bg. */
  background:
    radial-gradient(
      ellipse 1400px 800px at 50% calc(50% - var(--scroll-shift, 0px)),
      rgba(184, 208, 227, 0.08),
      transparent 60%
    ),
    var(--bone);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ─── Medora logotype (the "medora." wordmark) ───────────── */
.medora-logo {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  color: var(--ink);
  letter-spacing: -0.022em;
  line-height: 1;
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}
.medora-logo .dot {
  position: absolute;
  width: 0.085em;
  height: 0.085em;
  border-radius: 50%;
  background: var(--sky-deep);
  left: 2.36em;
  top: 0.595em;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.medora-logo .period { color: var(--sky-deep); }
.medora-logo--light { color: var(--bone); }
.medora-logo--light .dot { background: var(--sky); }
.medora-logo--light .period { color: var(--sky); }

/* ─── Layout helpers ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.container--narrow {
  max-width: 880px;
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--type-kicker);
  letter-spacing: var(--tracking-kicker); /* was 0.22em */
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: var(--font-weight-regular);
}
.kicker--sky { color: var(--sky-deep); }
.kicker--red { color: var(--red-deep); }
.kicker--amber { color: var(--amber-deep); }
.kicker--light { color: rgba(247,245,240,0.55); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
p { margin: 0; }

/* ─── Sticky header (Phase 2 design system migration 2026-05-27) ───
   Migrado: padding-x, gap, font-size button → tokens. border-bottom
   rgba(28,27,23, 0.06) → --ink-line-soft (exacto). Mantenidos raw
   con razón documentada:
   - bg rgba(247,245,240, 0.X): glass effect specific (futuro: si más
     surfaces glass aparecen, promover a --surface-glass-bg).
   - backdrop-filter, box-shadow, transition: component-specific.
   - padding-y 18px: brand+switcher height tuneado a 18 (no scale).
   - .brand font-size 38px: between 36/48 scale; brand-specific.
   - .switch button padding 9px 18px: hand-tuned para que el pill
     mantenga proporciones; migración cambiaría el tap-target.
   - .switch gap 2px y padding 4px micro: switcher pill aesthetic. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.68);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--ink-line-soft);
  transform: translateY(0);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease,
    border-color 0.4s ease;
  will-change: transform;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header.is-scrolled {
  background: rgba(247, 245, 240, 0.78);
  border-bottom-color: var(--ink-line);
  box-shadow: 0 1px 24px rgba(28, 27, 23, 0.04);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
  gap: var(--space-6);
}
.site-header .brand {
  font-size: 38px;
  text-decoration: none;
  color: var(--ink);
}
.site-header .brand:hover,
.site-header .brand:focus {
  text-decoration: none;
}
.site-header .right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Audience switcher (segmented control) */
.audience-switch {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: var(--space-1);
  gap: 2px;
  position: relative;
}
/* Default (desktop): show long label, hide short. Mobile @media swaps these. */
.audience-long { display: inline; }
.audience-short { display: none; }
.audience-switch button {
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--ink-mute);
  padding: 9px 18px;
  border-radius: 999px;
  letter-spacing: 0.005em; /* TODO: probable typo, parece ser 0.05em — flag para design review */
  transition: color 0.2s ease, background 0.25s ease;
  white-space: nowrap;
}
.audience-switch button:hover {
  color: var(--ink);
}
.audience-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bone);
}

/* ─── Language switcher dropdown (NEW 2026-05-27 i18n) ─────
   Top-right del header, al lado del audience-switcher. Botón
   ícono que abre menú popover-style con opciones ES/EN. Behavior
   JS en landing.js (initLangSwitcher IIFE). */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease, border-color 0.2s ease;
}
.lang-switch__trigger:hover,
.lang-switch__trigger[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper);
}
.lang-switch__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 180px;
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-md);
  padding: var(--space-2);
  z-index: 200;
  /* Hidden when [hidden] attribute (JS-controlled) */
}
.lang-switch__menu[hidden] {
  display: none;
}
.lang-switch__menu-label {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.lang-switch__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-helper);
  transition: background 0.15s ease;
}
.lang-switch__option:hover {
  background: var(--paper);
}
.lang-switch__option.is-active {
  background: var(--paper);
  color: var(--ink);
  font-weight: var(--font-weight-medium);
}
.lang-switch__option-code {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker);
  color: var(--ink-faint);
  min-width: 24px;
}
.lang-switch__option.is-active .lang-switch__option-code {
  color: var(--sky-deep);
}
.lang-switch__option-name {
  flex: 1;
}
.lang-switch__option-check {
  color: var(--sky-deep);
}

/* Mobile compact: tighter padding around the dots icon */
@media (max-width: 720px) {
  .lang-switch__trigger {
    padding: var(--space-2);
    gap: 0;
  }
}

/* ─── Locale-detect banner (auto-detect first visit) ──────
   Aparece sticky top cuando JS detecta que el browser prefiere
   un locale distinto al actual. User decide: switch o stay.
   Hidden por default; JS lo muestra. localStorage persiste
   dismissal entre visitas. */
.lang-banner {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--ink);
  color: var(--bone);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-helper);
}
.lang-banner[hidden] {
  display: none;
}
.lang-banner__text {
  margin-right: var(--space-3);
}
.lang-banner__action {
  color: var(--sky);
  text-decoration: underline;
  margin-right: var(--space-3);
  font-weight: var(--font-weight-medium);
}
.lang-banner__action:hover {
  color: var(--bone);
}
.lang-banner__dismiss {
  background: transparent;
  border: 1px solid var(--text-on-dark-faint);
  color: var(--text-on-dark-soft);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.lang-banner__dismiss:hover {
  color: var(--bone);
  border-color: var(--bone);
}

/* ─── Hero (shared structure, content varies) — Phase 2 migration ────
   Padding 112 top mantenido raw (between space-20 80 / space-24 96 +
   header offset semantic). Bottom 96 → --space-24 exact. */
.hero {
  padding: 112px 0 var(--space-24);
  position: relative;
}

/* Mouse-tracked gradient orb in hero */
.hero--medico::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 600px at var(--mx, 70%) var(--my, 30%),
      rgba(184, 208, 227, 0.35),
      transparent 60%
    );
  opacity: 0.9;
  transition: background 0.3s ease;
  z-index: 0;
}
.hero > .container,
.hero > * {
  position: relative;
  z-index: 1;
}
.hero__kicker {
  /* margin-bottom 28: between space-6/8 (24/32), kicker→h1 rhythm
     hand-tuned para hero. Mantener raw consistent en heroes. */
  margin-bottom: 28px;
}
.hero h1 {
  /* h1 hero clamp custom (44-80) per §3.4 — hero gets dramatic display.
     letter-spacing -0.025 entre --tracking-tight (-0.015) y
     --tracking-display-xl (-0.03), keep raw para fine-tuning visual. */
  font-size: clamp(44px, 5.2vw, 80px);
  line-height: var(--leading-tight-2);
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero h1 .line {
  display: block;
  white-space: nowrap;
}
.hero h1 em {
  font-style: italic;
  color: var(--sky-deep);
}
.hero__lede {
  font-size: var(--text-lede); /* 20, era 22 (-2px) — alinea a escala */
  line-height: var(--leading-normal);
  color: var(--ink-soft);
  max-width: 620px; /* hero-lede measure, component-specific */
  margin-bottom: var(--space-10);
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  /* gap 14 between space-3/4 (12/16), CTA button-pair specific */
  gap: 14px;
}

/* CTA buttons — Phase 2 migration.
   Raw mantenidos:
   - padding-y 14px (between space-3/4, 48px target tap-target).
   - font-size 15px (between text-helper 14 / text-body 16, button-specific).
   - letter-spacing 0.01em (button micro tracking, between body/wide).
   - gap 10px (between space-2/3). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--space-6);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(28,27,23,0.18);
}
.btn:hover::before {
  transform: translateX(100%);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-line);
  box-shadow: none;
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: rgba(28,27,23,0.03);
  box-shadow: none;
}
.btn--light {
  background: var(--bone);
  color: var(--ink);
}

/* ─── Sections — Phase 2 migration ─────────────────────────
   Padding 96 → --space-24 (exact). p color on-dark 0.78 →
   --text-on-dark-soft (0.72, -0.06 negligible). */
section.block {
  padding: var(--space-24) 0;
  border-top: 1px solid var(--ink-line);
}
section.block--paper {
  background: var(--paper);
}
section.block--ink {
  background: var(--ink);
  color: var(--bone);
}
section.block--ink h2,
section.block--ink h3 { color: var(--bone); }
section.block--ink p { color: var(--text-on-dark-soft); }

/* ─── Section header (shared, Phase 2 migration 2026-05-27) ────
   Migrado: spacings + p-size. Raw mantenidos:
   - max-width 760 (between container-max-narrow 720 / container-max 1100).
   - margin-bottom 56 (between space-12 / space-16, widely used base).
   - h2 clamp (40, 4.5vw, 64) — section-head h2 custom range per §3.4.
   - line-height 1.08 (between leading-display / leading-tight-2). */
.section-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.section-head h2 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.08;
  margin: var(--space-4) 0 var(--space-5);
}
.section-head h2 em {
  font-style: italic;
  color: var(--sky-deep);
}
.section-head p {
  font-size: var(--text-lede); /* 20, era 19 (+1px) — alinea a escala */
  color: var(--ink-soft);
}

/* ─── Feature grid (3-col cards) ────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.feature-card {
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(28,27,23,0.10), 0 6px 16px rgba(28,27,23,0.04);
  border-color: rgba(28,27,23,0.18);
}
section.block--paper .feature-card {
  background: var(--bone);
}
.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--sky-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
}
.feature-card h3 {
  font-size: 26px;
  line-height: 1.2;
}
.feature-card p {
  font-size: 15.5px;
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

/* ─── How-it-works (3 numbered steps) — Phase 2 migration ──
   Migración limpia: spacings, h3→--text-h4 (exact 28), body→tokens.
   Cambio visible: letter-spacing 0.22em → --tracking-kicker 0.15em
   en step counter (01/02/03) — text más apretado pero alineado al
   sistema. Spanish all-caps legibility justification. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}
.step-card {
  position: relative;
  padding-top: var(--space-6);
}
.step-card::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: var(--type-kicker);
  letter-spacing: var(--tracking-kicker); /* 0.15, era 0.22 (-0.07em) */
  color: var(--sky-deep);
  display: block;
  margin-bottom: var(--space-4);
}
.step-card h3 {
  font-size: var(--text-h4); /* 28 exact */
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.step-card h3 em {
  font-style: italic;
  color: var(--sky-deep);
}
.step-card p {
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

/* ─── Big number row (sponsor/inv stats) ────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.stat-cell {
  padding: 40px 32px;
  border-right: 1px solid var(--ink-line);
}
.stat-cell:last-child { border-right: 0; }
.stat-cell .num {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.stat-cell .num em {
  font-style: italic;
  color: var(--sky-deep);
}
.stat-cell .lbl {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker); /* was 0.16em */
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.stat-cell .det {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 32ch;
}

/* ─── Case card (clinical case) ─────────────────────────── */
.case-card {
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.case-card__story {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-right: 1px solid var(--ink-line);
}
.case-card__story h3 {
  font-size: 32px;
  line-height: var(--leading-snug);
}
.case-card__story p {
  color: var(--ink-soft);
  font-size: var(--text-body);
}
.case-card__step {
  display: flex;
  gap: var(--space-3);
  padding: 12px 0;
}
.case-card__step .num {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  color: var(--ink-mute);
  padding-top: var(--space-1);
  flex-shrink: 0;
  width: 30px;
}
.case-card__step .body {
  font-size: var(--text-body);
  color: var(--ink);
  flex: 1;
}
.case-card__alert {
  background: var(--red-soft);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.case-card__alert::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    135deg,
    var(--red) 0 12px,
    var(--red-deep) 12px 24px
  );
}
.case-card__alert .alert-icon {
  width: 44px;
  height: 44px;
  background: var(--red);
  color: var(--bone);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-card__alert .alert-kicker {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: var(--font-weight-medium);
}
.case-card__alert h4 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.case-card__alert p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: var(--leading-normal);
}
.case-card__alert .sources {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.case-card__alert .source {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.case-card__alert .source::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
}

/* ─── Story (Tilcia) ────────────────────────────────────── */
.tilcia-block {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}
.tilcia-block__quote {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: var(--leading-snug);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.tilcia-block__quote em {
  font-style: italic;
  color: var(--red-deep);
}
.tilcia-block__body p {
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}
.tilcia-block__body p strong {
  color: var(--ink);
  font-weight: var(--font-weight-medium);
}

/* ─── FHIR / regulatory compatibility (Phase 2 migration 2026-05-27) ───
   Migraciones: gap-4 padding/margin, bone color, border on-dark, font
   sizes a escala. Raw mantenidos con razón:
   - border-radius 18px / 12px: card-radius custom (entre escala lg/xl).
   - padding 56/56/48px: card hand-tuned para grid 1.2fr 1fr proportion.
   - gap-x 56px: matched al padding-x para visual cohesion.
   - icon bg rgba(sky, 0.12): tinted accent bg, no semantic token.
   - h3 line-height 1.1: per-heading optical tune (entre tight/snug). */
.compat {
  background: var(--ink);
  color: var(--bone);
  border-radius: 18px;
  padding: 56px 56px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.compat h3 {
  color: var(--bone);
  font-size: var(--text-h3); /* 36, era 40 (-4px) — alinea a escala canónica */
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.compat h3 em {
  font-style: italic;
  color: var(--sky);
}
.compat p {
  color: var(--text-on-dark-soft);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.compat__badges {
  display: flex;
  flex-direction: column;
  gap: 14px; /* between scale 12/16 — keep, badges look right at this rhythm */
}
.compat-badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5); /* 16/20 form-card-style spacing */
  background: rgba(247,245,240,0.04); /* very-faint on-dark surface, no semantic */
  border: 1px solid var(--border-on-dark-soft);
  border-radius: 12px; /* custom small-radius (entre md/lg) */
}
.compat-badge .icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184,208,227,0.12); /* sky-tinted icon bg */
  color: var(--sky);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.compat-badge .text {
  display: flex;
  flex-direction: column;
  gap: 2px; /* micro, label-to-name spacing */
}
.compat-badge .lbl {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* 11, era 10 (+1px) */
  letter-spacing: var(--tracking-kicker); /* 0.15, era 0.16 (-0.01em) */
  text-transform: uppercase;
  color: var(--text-on-dark-faint); /* era 0.45, ahora 0.5 (+0.05) */
}
.compat-badge .name {
  font-family: var(--font-display);
  font-size: var(--text-lede); /* 20, era 18 (+2px) — alinea a escala lede */
  font-style: italic;
  color: var(--bone);
}

/* ─── Form (waitlist / contact) ─────────────────────────── */
/* ─── Form (Phase 2 design system migration 2026-05-27) ─────
   Migrado: padding-y/spacings to tokens, on-dark colors to
   --text-on-dark-*, font sizes 10→11 (+1px) y 16→16 (exact).
   Raw mantenidos:
   - border-radius 18 / 12 (custom card-radius, consistente con .compat).
   - padding-x 56 (between scale 48/64, form-card width-balanced).
   - block--ink bg/border rgbas very-faint on-dark, no semantic.
   - .form-field gap 6 micro (label-to-input).
   - input padding 8 0 10 hand-tuned para underline-style input.
   - .submitted padding-y 60 + ok-icon 60×60 (success moment hand-tuned). */
.form-card {
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: var(--space-12) 56px;
  max-width: var(--container-max-narrow);
}
section.block--ink .form-card {
  background: rgba(247,245,240,0.04);
  border-color: var(--border-on-dark-soft);
}
section.block--ink .form-card h2 { color: var(--bone); }
section.block--ink .form-card p { color: var(--text-on-dark-soft); }
section.block--ink .form-field label { color: var(--text-on-dark-faint); }
section.block--ink .form-field input,
section.block--ink .form-field select,
section.block--ink .form-field textarea {
  background: transparent;
  color: var(--bone);
  border-bottom-color: rgba(247,245,240,0.22); /* between border tokens, input-specific */
}
/* Native dropdown options use OS-rendered popup; force readable
   colors so options aren't faint-on-white on dark-themed forms. */
section.block--ink .form-field select option,
section.block--ink .form-field select optgroup {
  background: var(--ink);
  color: var(--bone);
}
/* Same belt-and-suspenders for any non-ink form (light bg form
   was fine but pin the colors anyway). */
.form-field select option,
.form-field select optgroup {
  background: var(--bone);
  color: var(--ink);
}
section.block--ink .form-field input:focus,
section.block--ink .form-field select:focus,
section.block--ink .form-field textarea:focus {
  border-bottom-color: var(--sky);
}
section.block--ink .form-card .btn {
  background: var(--bone);
  color: var(--ink);
}

.form-card h2 {
  font-size: var(--text-h3); /* 36 exact match — era 36px raw */
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}
.form-card > p {
  color: var(--ink-soft);
  margin-bottom: var(--space-8);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.form-row--single { grid-template-columns: 1fr; }
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px; /* micro label-to-input, no scale */
}
.form-field label {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* 11, era 10 (+1px) */
  letter-spacing: var(--tracking-kicker); /* 0.15, era 0.16 (-0.01em) */
  text-transform: uppercase;
  color: var(--ink-mute);
}
.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  padding: var(--space-2) 0 10px; /* 8/0/10, 10 raw para underline-style input height */
  font-size: var(--text-body); /* 16 exact */
  color: var(--ink);
  transition: border-color 0.2s;
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--sky-deep);
}
.form-field textarea {
  resize: vertical;
  min-height: var(--space-20); /* 80 exact match */
  line-height: var(--leading-normal);
  font-family: inherit;
}
.form-card .actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.form-card .helper {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* 11, era 10 (+1px) */
  letter-spacing: var(--tracking-kicker); /* 0.15, era 0.14 (+0.01em) */
  text-transform: uppercase;
  color: var(--ink-faint);
}
.form-card.submitted {
  text-align: center;
  /* padding 60px hand-tuned success state, no scale token apropriado */
  padding-top: 60px;
  padding-bottom: 60px;
}
.form-card.submitted .ok-icon {
  /* 60×60 icon hand-tuned success state */
  width: 60px;
  height: 60px;
  background: var(--sky-tint);
  color: var(--sky-deep);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
section.block--ink .form-card.submitted .ok-icon {
  background: rgba(184,208,227,0.12);
  color: var(--sky);
}

/* ─── Product preview (sketch of EPS panel) ─────────────── */
.product-preview {
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card-lg);
}
.product-preview__top {
  background: #3A3933;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-preview__top .dots {
  display: inline-flex;
  gap: 6px;
}
.product-preview__top .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.product-preview__top .dots span:nth-child(1) { background: #E65149; }
.product-preview__top .dots span:nth-child(2) { background: #E6A929; }
.product-preview__top .dots span:nth-child(3) { background: #4FBF4F; }
.product-preview__top .title {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  color: rgba(247,245,240,0.55);
  letter-spacing: var(--tracking-wide);
}
.product-preview__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  min-height: 360px;
}
.product-preview__ehr {
  padding: 22px 24px;
  background: #F0EDE5;
}
.product-preview__ehr-k {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.14em */
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.product-preview__ehr-t {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--ink);
}
.product-preview__ehr-block {
  background: var(--bone);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--ink-line-soft);
  opacity: 0.7;
}
.product-preview__ehr-line {
  height: 6px;
  background: rgba(28,27,23,0.10);
  border-radius: 2px;
  margin-bottom: 6px;
}
.product-preview__ehr-line:nth-child(2) { width: 75%; }
.product-preview__ehr-line:nth-child(3) { width: 50%; }
.product-preview__ehr-line:last-child { margin-bottom: 0; }
.product-preview__ehr-h {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.14em */
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}
.product-preview__medora {
  background: var(--bone);
  border-left: 1px solid var(--ink-line);
}
.product-preview__medora-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-preview__medora-head .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
}
.product-preview__alert {
  margin: 14px;
  padding: 12px 14px;
  background: rgba(199,61,50,0.06);
  border: 1.5px solid var(--red);
  border-radius: 10px;
}
.product-preview__alert .alert-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: var(--font-weight-medium);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-preview__alert .alert-k::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.product-preview__alert .alert-t {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}
.product-preview__alert .alert-s {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  color: var(--ink-mute);
}
.product-preview__tend {
  margin: 0 14px 12px;
  padding: 10px 12px;
  background: var(--bone);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

/* ─── Pull quote (testimonial-style) ────────────────────── */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}
.pull-quote em {
  color: var(--sky-deep);
  font-style: italic;
}
.pull-quote__attr {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 28px;
}

/* ─── Footer ────────────────────────────────────────────── */
/* ─── Footer (Phase 2 design system migration 2026-05-27) ────
   Migrado de raw px/rgba a tokens. Drift menor documentado:
   - .tagline: 26px → 28px (--type-headline). +2px, negligible.
   - .meta: letter-spacing 0.14em → 0.15em (--tracking-kicker). ~0.11px @ 11px font.
   - .bottom: 10px → 11px (--type-mono-sm). +1px, ligero.
   - .bottom: letter-spacing 0.16em → 0.15em (--tracking-kicker). ~0.11px @ 11px.
   - .meta: line-height 1.8 mantenido raw (tabular mono needs holgura
     superior a --leading-loose 1.7 para uppercase legibility). */
.site-footer {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: var(--space-16) 0 var(--space-10);
  border-top: 1px solid var(--border-on-dark-soft);
}
.site-footer .top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: end;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--border-on-dark-soft);
  margin-bottom: var(--space-8);
}
.site-footer .brand {
  font-size: var(--type-display-md);
  color: var(--text-on-dark);
}
.site-footer .brand .dot { background: var(--color-sky); }
.site-footer .brand .period { color: var(--color-sky); }
.site-footer .tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-headline);
  color: var(--text-on-dark-soft);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-1);
}
.site-footer .tagline em {
  font-style: normal;
  color: var(--color-sky);
}
.site-footer .meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
  line-height: 1.8; /* one-off: tabular mono uppercase needs > --leading-loose */
}
.site-footer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-on-dark-disabled);
}

/* Prometio attribution (2026-05-27 i18n) — "Built by Prometio Group" en
   footer right. Logo negativo (claro) sobre fondo --color-ink del footer.
   Tamaño 55px alt mínimo per brand-manual; usamos 24 height para
   balance visual con copyright line (~11px mono). */
.prometio-attribution {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-on-dark-soft);
  text-decoration: none;
  transition: opacity 0.2s ease;
  opacity: 0.85;
}
.prometio-attribution:hover {
  opacity: 1;
  color: var(--bone);
}
.prometio-attribution__text {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}
.prometio-attribution img {
  display: block;
  height: 24px;
  width: auto;
  /* Logo SVG ya tiene su color en negativo (claro) para fondo ink. */
}
@media (max-width: 720px) {
  .prometio-attribution__text {
    /* En mobile el copyright + Built by se apilan column ya per existing
       .site-footer .bottom flex-direction: column override. Compactamos
       la attribution. */
    font-size: 10px;
  }
}
.site-footer a {
  color: var(--text-on-dark-soft);
  text-decoration: none;
}
.site-footer a:hover { color: var(--color-sky); }

/* ─── Audience transition ──────────────────────────────── */
.audience-content {
  animation: aud-fade-in 0.4s ease both;
}
/* Solo opacity, NO transform. Razón: el `animation-fill-mode: both`
   retiene `transform: translateY(0)` después de terminar, lo que crea
   un containing block en .audience-content y rompe `position: sticky`
   en cualquier descendiente (mobile pin-scrub de #case-medico depende
   de sticky). Pillado por Phase 2-Audit context-analyst 2026-05-26. */
@keyframes aud-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Scroll reveals (Apple-style) ─────────────────────── */
/* Base reveal: fades up with smoother out-expo curve. */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal--scale {
  transform: translateY(40px) scale(0.94);
}
.reveal--scale.is-in {
  transform: translateY(0) scale(1);
}
.reveal--blur {
  filter: blur(14px);
}
.reveal--blur.is-in {
  filter: blur(0);
}
.reveal--right {
  transform: translateX(60px);
}
.reveal--right.is-in {
  transform: translateX(0);
}

/* Stagger children of a container */
.stagger > * {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
.stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.stagger.is-in > *:nth-child(3) { transition-delay: 0.20s; }
.stagger.is-in > *:nth-child(4) { transition-delay: 0.30s; }
.stagger.is-in > *:nth-child(5) { transition-delay: 0.40s; }
.stagger.is-in > *:nth-child(6) { transition-delay: 0.50s; }
.stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* Word-by-word headline reveal */
.h-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.65em);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.h-words.is-in .word {
  opacity: 1;
  transform: translateY(0);
}
.h-words .word + .word { margin-left: 0; }

/* ─── Sticky scrollytelling section ────────────────────── */
/* ─── Scrollytelling — Phase 2.8 base migration 2026-05-27 ──
   Migrado: shared layout primitives + .scrolly__step typography.
   Raw mantenidos:
   - padding 120/80 .scrolly (hero-style top, between space-20/24).
   - max-width 760 / 1240 / 540 (component-specific widths).
   - top: 110px sticky stage (offset hand-tuned para header + intro).
   - height: calc(100vh - 160px) sticky (160 = header + breathing).
   - h3 clamp custom (36-52, per §3.4 section heading range).
   - line-height 1.06/1.08 (between leading-display/tight-2).
   - letter-spacing -0.022em (display geometric).
   - 70vh / 14vh on .scrolly__step (vh-based intentional para pin-scrub
     rhythm). MOCK INTERNALS (`.scrolly-mock`, `.scrolly-pane`, etc.)
     diferidos — visual decoration self-contained, no shared base. */
.scrolly {
  background: var(--bone);
  padding: 120px 0 var(--space-20);
  position: relative;
  border-top: 1px solid var(--ink-line);
}
/* Mobile-stack default: oculto en desktop (mobile-only). El @media
   (max-width: 720px) abajo lo muestra y oculta .scrolly__inner. */
.scrolly__mobile-stack { display: none; }
.scrolly__intro {
  max-width: 760px;
  margin: 0 auto var(--space-20);
  text-align: center;
  padding: 0 var(--space-8);
}
.scrolly__intro h2 {
  /* Custom scrolly intro clamp per §3.4, between text-h2/h1 range */
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.06;
  margin-bottom: 18px;
}
.scrolly__intro h2 em {
  font-style: italic;
  color: var(--sky-deep);
}
.scrolly__intro p {
  font-size: var(--text-lede); /* 20, era 19 (+1px) — alinea a escala */
  color: var(--ink-soft);
}
.scrolly__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  align-items: start;
}
.scrolly__stage {
  position: sticky;
  top: 110px;
  height: calc(100vh - 160px);
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scrolly__stage-inner {
  width: 100%;
  max-width: 540px;
  transform: translateY(0) scale(1);
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.26, 1);
}
.scrolly__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.scrolly__step {
  min-height: 70vh;
  padding: 14vh 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0.28;
  transform: translateY(0);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  filter: blur(1.5px);
}
.scrolly__step.is-active {
  opacity: 1;
  filter: blur(0);
}
.scrolly__step .step-num {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* 11 exact */
  letter-spacing: var(--tracking-kicker); /* 0.15, era 0.22 (-0.07em) */
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-bottom: 14px;
}
.scrolly__step h3 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-bottom: 18px;
}
.scrolly__step h3 em {
  font-style: italic;
  color: var(--sky-deep);
}
.scrolly__step h3 .red {
  color: var(--red-deep);
  font-style: italic;
}

/* Progress dots — solo aparecen en mobile pin-scrub (ver @media de abajo).
   Default hidden para que en desktop el bloque .scrolly__dots no rompa
   el grid 2-col del .scrolly__inner. */
.scrolly__dots { display: none; }

/* Pin-intro: copia mobile del .scrolly__intro renderizada DENTRO del
   .scrolly__inner para llenar el espacio superior del pin-scrub. Oculta
   en desktop (el original .scrolly__intro de afuera ya cumple ese rol). */
.scrolly__pin-intro { display: none; }
.scrolly__step p {
  font-size: 18px; /* between body-16/lede-20, narrative paragraph */
  color: var(--ink-soft);
  line-height: var(--leading-body);
  max-width: 42ch;
}
.scrolly__step .source-chip {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* 11 exact */
  letter-spacing: var(--tracking-wide); /* 0.04 exact */
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.scrolly__step .source-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* The mockup inside the sticky stage — has slot-swapping inner content */
.scrolly-mock {
  background: var(--bone);
  border-radius: var(--radius-xl);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-card-lg);
  overflow: hidden;
}
.scrolly-mock__top {
  background: #3A3933;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.scrolly-mock__top .dots { display: inline-flex; gap: 6px; }
.scrolly-mock__top .dots span { width: 10px; height: 10px; border-radius: 50%; }
.scrolly-mock__top .dots span:nth-child(1) { background: #E65149; }
.scrolly-mock__top .dots span:nth-child(2) { background: #E6A929; }
.scrolly-mock__top .dots span:nth-child(3) { background: #4FBF4F; }
.scrolly-mock__top .title {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  color: rgba(247,245,240,0.55);
  letter-spacing: var(--tracking-wide);
}
.scrolly-mock__body {
  display: grid;
  grid-template-columns: 1fr 270px;
  min-height: 420px;
  transition: grid-template-columns 0.7s cubic-bezier(0.22, 0.7, 0.26, 1);
}
.scrolly-mock__ehr {
  padding: 22px 24px;
  background: #F0EDE5;
  position: relative;
  overflow: hidden;
}
.scrolly-mock__ehr-k {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.14em */
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.scrolly-mock__ehr-t {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--ink);
}
.scrolly-mock__ehr-block {
  background: var(--bone);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--ink-line-soft);
  opacity: 0.7;
}
.scrolly-mock__ehr-line {
  height: 6px;
  background: rgba(28,27,23,0.10);
  border-radius: 2px;
  margin-bottom: 6px;
}
.scrolly-mock__ehr-line:last-child { margin-bottom: 0; width: 60%; }
.scrolly-mock__ehr-h {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.14em */
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}

/* Swap region — sits below the headers (Consulta · M.G.S.) and
   holds both upload card and blocks stacked, so the headers stay
   visible during the state change. */
.scrolly-mock__ehr {
  position: relative;
}
.scrolly-mock__swap {
  position: relative;
  margin-top: 18px;
  min-height: 220px;
}
.scrolly-mock__upload {
  position: absolute;
  inset: 0;
  padding: 28px 20px 24px;
  border: 1.5px dashed rgba(28,27,23,0.20);
  border-radius: 10px;
  background: rgba(247,245,240,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.scrolly-mock__upload:hover {
  border-color: var(--sky-deep);
  background: rgba(184, 208, 227, 0.12);
}
.scrolly-mock__upload-icon {
  color: var(--sky-deep);
  margin-bottom: var(--space-1);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.scrolly-mock__upload-lbl {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-snug);
}
.scrolly-mock__upload-sub {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.16em */
  text-transform: uppercase;
  color: var(--ink-mute);
}

.scrolly-mock__blocks {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.scrolly-mock__blocks .scrolly-mock__ehr-block {
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-mock].is-loaded .scrolly-mock__upload {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
}
[data-mock].is-loaded .scrolly-mock__upload-icon {
  transform: translateY(-4px);
}
[data-mock].is-loaded .scrolly-mock__blocks {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.25s;
}
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(1) { transition-delay: 0.40s; }
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(2) { transition-delay: 0.58s; }
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(3) { transition-delay: 0.76s; }
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(4) { transition-delay: 0.94s; }

.scrolly-mock__blocks .scrolly-mock__ehr-line {
  background: linear-gradient(
    90deg,
    rgba(28,27,23,0.10) 0%,
    rgba(28,27,23,0.10) 38%,
    rgba(184,208,227,0.38) 50%,
    rgba(28,27,23,0.10) 62%,
    rgba(28,27,23,0.10) 100%
  );
  background-size: 220% 100%;
  background-position: 220% 0;
}
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-line {
  animation: ehr-shimmer 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(1) .scrolly-mock__ehr-line { animation-delay: 0.6s; }
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(2) .scrolly-mock__ehr-line { animation-delay: 1.0s; }
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(3) .scrolly-mock__ehr-line { animation-delay: 1.4s; }
[data-mock].is-loaded .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(4) .scrolly-mock__ehr-line { animation-delay: 1.8s; }

@keyframes ehr-shimmer {
  0%   { background-position: 220% 0; }
  60%  { background-position: -120% 0; }
  100% { background-position: -120% 0; }
}

/* Medora panel — swaps content based on data-step on parent */
.scrolly-mock__medora {
  background: var(--bone);
  border-left: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.scrolly-mock__medora-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.scrolly-mock__medora-head .badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
}
.scrolly-mock__medora-content {
  position: relative;
  flex: 1;
}
/* Step panes — only one visible at a time */
.scrolly-pane {
  position: absolute;
  inset: 0;
  padding: 14px;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.scrolly-pane.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scrolly-pane__empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: var(--space-2);
  padding: 20px;
}
.scrolly-pane__empty .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
  color: var(--ink-mute);
}
.scrolly-pane__empty .body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 200px;
  line-height: 1.3;
}

.scrolly-pane__list-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 8px 6px;
  border-bottom: 1px solid var(--ink-line-soft);
}
.scrolly-pane__list-row:last-child { border-bottom: 0; }
.scrolly-pane__list-row .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.scrolly-pane__list-row.normal .dot { background: var(--sky-deep); }
.scrolly-pane__list-row.warn .dot { background: var(--amber); }
.scrolly-pane__list-row.crit .dot {
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(199,61,50,0.45);
  animation: red-pulse 1.6s ease-out infinite;
}
.scrolly-pane__list-row .txt {
  flex: 1;
}
.scrolly-pane__list-row .ttl {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}
.scrolly-pane__list-row .meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-mute);
  margin-top: 2px;
}

.scrolly-pane__alert {
  background: rgba(199,61,50,0.06);
  border: 1.5px solid var(--red);
  border-radius: 10px;
  padding: 12px 14px;
}
.scrolly-pane__alert .a-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: var(--font-weight-medium);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.scrolly-pane__alert .a-k::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(199,61,50,0.5);
  animation: red-pulse 1.6s ease-out infinite;
}
.scrolly-pane__alert .a-t {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}
.scrolly-pane__alert .a-s {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  color: var(--ink-mute);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(199,61,50,0.22);
}

@keyframes red-pulse {
  0% { box-shadow: 0 0 0 0 rgba(199,61,50,0.45); }
  70% { box-shadow: 0 0 0 8px rgba(199,61,50,0); }
  100% { box-shadow: 0 0 0 0 rgba(199,61,50,0); }
}

/* Hero parallax — drives via JS-set custom property --p (0..1) */
.hero-art {
  transform:
    translateY(calc(var(--p, 0) * -50px))
    scale(calc(1 + var(--p, 0) * 0.02));
  transition: transform 0.12s linear;
}

/* Number count-up animation enabler */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Section reveal blur fade — used on .block during scroll */
.block {
  transition:
    background-color 0.6s ease;
}

/* Scroll progress bar (subtle, top of viewport) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sky-deep), var(--ink));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  z-index: 200;
  pointer-events: none;
  transition: transform 0.08s linear;
}

/* Form field smooth focus */
.form-field input,
.form-field select,
.form-field textarea {
  transition:
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  transform: translateY(-1px);
}

/* Audience switch button smoothing */
.audience-switch button {
  transition:
    color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.audience-switch button:active {
  transform: scale(0.97);
}

/* Compat badges smooth lift on hover */
.compat-badge {
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.compat-badge:hover {
  transform: translateX(var(--space-1));
  background: rgba(247,245,240,0.07); /* hover lift on-dark, no semantic */
  border-color: rgba(247,245,240,0.18); /* hover border on-dark, between soft/strong */
}

/* Step cards subtle lift */
.step-card {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-card:hover {
  transform: translateY(-4px);
}
.step-card h3 em {
  display: inline-block;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.step-card:hover h3 em {
  transform: translateX(3px);
}

/* KPI hover */
.kpi {
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi:hover {
  transform: translateY(-4px);
  background: var(--bone);
}

/* Footer link underline draw */
.site-footer a {
  position: relative;
}
.site-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 0%;
  background: var(--sky);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer a:hover::after {
  width: 100%;
}

/* Animated brand dot pulse (subtle, infinite) */
.medora-logo .dot {
  animation: brand-dot-breathe 4.5s ease-in-out infinite;
}
@keyframes brand-dot-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.85; }
}

/* Body subtle shift on scroll (via --scroll-shift custom prop) */

/* Headline color shift while scrolling past hero */
.hero h1 .ink-shift {
  color: var(--ink);
  transition: color 0.6s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--scale, .reveal--blur, .reveal--right,
  .stagger > *, .h-words .word, .scrolly__step {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .scrolly__stage { position: static; height: auto; min-height: 0; }
}

@media (max-width: 980px) {
  .scrolly__inner { grid-template-columns: 1fr; gap: 32px; }
  .scrolly__stage { position: static; height: auto; min-height: 0; margin-bottom: 32px; }
  .scrolly__step { min-height: 0; padding: 28px 0; opacity: 1; }
}

/* ─── Hero variants (per audience) ─────────────────────── */
.hero--medico {
  background:
    radial-gradient(ellipse 1200px 600px at 70% 0%, rgba(184,208,227,0.18), transparent 60%),
    var(--bone);
}
.hero--paciente {
  background: var(--paper);
}
.hero--paciente h1 em {
  color: var(--ink);
  font-style: italic;
}
.hero--inversionista {
  background: var(--ink);
  color: var(--bone);
}
.hero--inversionista h1 { color: var(--bone); }
.hero--inversionista h1 em { color: var(--sky); }
/* hero-inversionista on-ink: Phase 2 migration de on-dark colors */
.hero--inversionista .hero__lede { color: var(--text-on-dark-soft); }
.hero--inversionista .kicker { color: var(--text-on-dark-faint); /* era 0.55, ahora 0.5 (-0.05) */ }
.hero--inversionista .btn { background: var(--bone); color: var(--ink); }
.hero--inversionista .btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: rgba(247,245,240,0.30); /* between border-on-dark-soft/medium, ghost-btn specific */
}

/* ─── Hero hero-art column (médico audience) ───────────── */
.hero--medico .container,
.hero--paciente .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.hero--paciente .hero-art {
  /* Restored for the patient hero — was hidden in an earlier version
     before patient view had its own art. Mobile rule still hides it. */
  display: block;
}
.hero--paciente .hero-art.hero-art--mobile { display: none; }
/* Hide médico mobile-only copy on desktop (mismo patrón que paciente).
   El @media (max-width: 720px) abajo la activa como display:flex. */
.hero--medico .hero-art.hero-art--mobile { display: none; }

/* ─── Investor stat callouts — Phase 2 migration ───────────
   Raw mantenidos: kpi padding-x 22 (between space-5/6), kpi-num 44px
   (between scale text-h3/h2), letter-spacing -0.025em (hero-style
   tracking), line-height 1 (number-display tight). */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: 56px; /* matches .section-head margin-bottom widely-used base */
}
.kpi {
  padding: var(--space-6) 22px;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--ink-line);
}
section.block--ink .kpi {
  background: rgba(247,245,240,0.04); /* very-faint on-dark surface */
  border-color: var(--border-on-dark-soft);
}
section.block--ink .kpi .kpi-num { color: var(--bone); }
section.block--ink .kpi .kpi-lbl { color: var(--text-on-dark-faint); /* era 0.55 → 0.5 */ }
/* Investor hero has dark bg but the .kpi cards inside are paper-colored,
   so kpi text must be dark for contrast (overrides hero color: bone). */
.hero--inversionista .kpi { color: var(--ink); }
.hero--inversionista .kpi .kpi-num { color: var(--ink); }
.hero--inversionista .kpi .kpi-lbl { color: var(--ink-mute); }
.kpi-num {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-2);
}
.kpi-num em {
  color: var(--sky-deep);
  font-style: italic;
}
section.block--ink .kpi-num em {
  color: var(--sky);
}
.kpi-lbl {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* 11, era 10 (+1px) */
  letter-spacing: var(--tracking-kicker); /* 0.15, era 0.16 */
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ─── Team grid (sponsors view) ────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.team-card {
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.team-card .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.team-card .avatar--photo {
  padding: 0;
}
.team-card .avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card h4 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
}
.team-card .role {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.16em */
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ─── Manifesto block (paciente) ──────────────────────── */
.manifesto {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
}
.manifesto em {
  font-style: italic;
  color: var(--sky-deep);
}

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 980px) {
  .hero--medico .container,
  .hero--paciente .container,
  .tilcia-block,
  .compat {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .feature-grid,
  .steps,
  .stat-row,
  .case-card,
  .kpi-row,
  .team-grid {
    grid-template-columns: 1fr;
  }
  .case-card__story,
  .stat-cell {
    border-right: 0;
    border-bottom: 1px solid var(--ink-line);
  }
  .case-card__story:last-child,
  .stat-cell:last-child {
    border-bottom: 0;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .product-preview__body {
    grid-template-columns: 1fr;
  }
  .product-preview__medora {
    border-left: 0;
    border-top: 1px solid var(--ink-line);
  }
}
@media (max-width: 640px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); }
  .container { padding: 0 24px; }
  .hero { padding: 64px 0 56px; }
  section.block { padding: 64px 0; }
  .form-card { padding: 32px 28px; }
  /* Mobile compat padding: 36/28 hand-tuned para que .compat-badges
     2-col layout colapse a 1-col sin que el card se sienta cramped.
     36/28 entre escala (32/40 y 24/32). Keep raw. */
  .compat { padding: 36px 28px; }
  .case-card__story, .case-card__alert { padding: 28px 24px; }
  .audience-switch button { padding: var(--space-2) var(--space-3); font-size: var(--type-kicker); }
  .stat-cell { padding: 32px 24px; }
  .site-footer .top { grid-template-columns: 1fr; align-items: flex-start; }
  .site-footer .meta { text-align: left; }
  .site-footer .bottom { flex-direction: column; gap: var(--space-2); }
  .kpi-row { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────
   Mobile (≤ 720px) — kills horizontal overflow + collapses
   2-column mocks. Added 2026-05-26 after Playwright probe
   showed pages forcing layout viewport to 431-527px on iPhone
   widths (375-412): the .product-preview__body had a fixed
   280px right column, and .scrolly__stage-inner had max-width
   540px — both wider than the device, so the browser zoomed
   out and the whole design read as miniature.
   ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Header — single row: brand + switcher inline. La switcher se queda
     a la derecha del logo en vez de apilarse abajo (pedido del usuario
     2026-05-26). El logo más compacto (24px) deja espacio al pill. */
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    /* padding hand-tuned 10/14 para header compacto mobile (no scale).
       Cambiar a 12/16 sumaría ~4px de alto que rompe el target --header-h: 64. */
    padding: 10px 14px;
    flex-wrap: nowrap;
  }
  .site-header .brand {
    /* 24px brand-specific mobile size (between scale 20/28). */
    font-size: 24px;
    flex: 0 0 auto;
  }
  .site-header .right { width: auto; flex: 0 1 auto; min-width: 0; }
  .audience-switch {
    display: inline-flex;
    width: auto;
    /* 3px micro padding switcher pill (no scale). */
    padding: 3px;
    gap: 2px;
  }
  .audience-switch button {
    /* 9px/4px hand-tuned para tap target mobile sin romper grid. */
    padding: 9px var(--space-1);
    font-size: var(--type-kicker);
    text-align: center;
    min-width: 0;
    letter-spacing: 0;
  }
  .audience-long { display: none; }
  .audience-short { display: inline; }

  /* Container + section spacing */
  .container { padding: 0 16px; }
  .container--narrow { padding: 0 16px; }
  .hero { padding: 40px 0 48px; }
  section.block { padding: 48px 0; }

  /* Hero CTAs stack full-width */
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero__cta .btn { width: 100%; text-align: center; }
  .hero__lede { font-size: 17px; }

  /* Hero headline: kill the per-line nowrap (designed for wide viewports)
     and shrink the floor of the clamp so long Spanish phrases like
     "para 50 millones de historias." can wrap inside ~360px. */
  .hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .hero h1 .line { white-space: normal; }
  .h-words { word-break: normal; overflow-wrap: anywhere; }

  /* Médico hero — mismo patrón viewport-h que .hero--paciente:
     24px safe-zone, calc-height en container, grid 5-row en wrapper,
     copia del product-preview entre h1 y lede (.hero-art--mobile).
     2026-05-27 — usuario pidió recuperar el preview con el patrón
     del paciente hero. Iteración: replicar el approach del mock del
     scrollytelling (width fijo desktop-natural + zoom shrink) para
     PRESERVAR el 2-col EHR+Medora en mobile. */
  .hero--medico {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: 24px;
    padding-right: 24px;
    display: block;
    /* overflow:hidden a nivel section: garantiza que NADA dentro del
       hero pueda escaparse al área de la siguiente sección, incluso
       si zoom falla o el contenido excede el grid cell. Fix del bug
       2026-05-27 "preview tapa sección siguiente al scroll". */
    overflow: hidden;
  }
  .hero--medico .container {
    display: block;
    height: calc(100svh - var(--header-h) - 48px);
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .hero--medico .container > div {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-columns: 1fr;
    height: 100%;
    gap: 0;
    margin: 0;
    overflow: hidden;
  }
  .hero--medico .container > div > .hero__kicker {
    grid-row: 1;
    margin-bottom: var(--space-3);
    align-self: end;
  }
  .hero--medico .container > div > h1 {
    grid-row: 2;
    margin-bottom: 0;
    align-self: end;
  }
  /* MIDDLE zone: product-preview ocupa la row 3 (1fr). Esconde el
     original (desktop) y muestra la copia .hero-art--mobile. */
  .hero--medico .hero-art { display: none; }
  .hero--medico .hero-art.hero-art--mobile {
    display: flex;
    grid-row: 3;
    height: 100%;
    min-height: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  /* Mismo approach que #case-medico .scrolly-mock (líneas 2862-2873):
     width FIJO desktop-natural (600px) + zoom 0.60 → preserva el
     layout 2-col EHR(1fr) + Medora(270px) y solo encoge el render
     visual al ancho mobile. 600*0.60=360px (cabe en 358 viewport). */
  .hero--medico .hero-art--mobile .product-preview {
    width: 600px;
    max-width: none;
    zoom: 0.60;
    display: block;
    flex: 0 0 auto;
  }
  /* CRÍTICO: restaurar 2-col EHR+Medora dentro del hero mobile.
     El @media (max-width: 980px) global (L2182-2188) sobrescribe a
     1-col y rompe el layout que queremos. Esta regla gana por
     specificity (3 clases vs 1) y queda como el scrolly mock. */
  .hero--medico .hero-art--mobile .product-preview__body {
    grid-template-columns: 1fr 270px;
    min-height: 360px;
  }
  .hero--medico .hero-art--mobile .product-preview__medora {
    border-left: 1px solid var(--ink-line);
    border-top: 0;
  }
  /* BOTTOM zone: lede + CTAs anclados abajo (rows 4-5 del grid). */
  .hero--medico .container > div > .hero__lede {
    grid-row: 4;
    margin-bottom: var(--space-4);
    margin-top: 0;
    align-self: start;
  }
  .hero--medico .container > div > .hero__cta {
    grid-row: 5;
    margin: 0;
    align-self: start;
  }

  /* ─────────────────────────────────────────────────────────
     PRINCIPIO 2026-05-27 (aplica a TODAS las secciones viewport-h
     en mobile): zero aire libre arriba/abajo. El content se reparte
     uniformemente en toda la altura via layout de 3 zonas:
       · TOP    (auto height): kicker + h1     → anclado arriba
       · MIDDLE (flex 1):      visual/mock     → crece, centrado
       · BOTTOM (auto height): lede + CTAs     → anclado abajo
     Implementación: .container es flex column 100% high + wrapper
     interno también flex column con justify-content: space-between
     (o sub-grupos vía flex en hijos directos). El elemento middle
     marca `flex: 1; align-items/justify-content: center` para llenar
     el sobrante con su contenido centrado.
     ───────────────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────────────────
     PRINCIPIO MOBILE para secciones viewport-h (2026-05-27):
     · El otro agente ya estableció section { min-height:
       calc(100svh - --header-h); display: grid; align-content:
       center } como pattern global (líneas 232-244). El section
       OCUPA exactamente el viewport menos el header sticky.
     · Para repartir contenido perfectamente en top/middle/bottom:
       el container (único grid child del section) debe align-self:
       stretch (llena toda la altura) y usar grid-template-rows
       `auto auto 1fr auto auto` (kicker, h1, art, lede, cta) — el
       1fr (visual middle) crece y empuja lo de arriba al top y lo
       de abajo al bottom.
     · Padding del container: simétrico arriba/abajo (no necesita
       compensar header porque ya está descontado del section).
     ───────────────────────────────────────────────────────── */
  /* Override .hero base padding (40/48) para que la sección no tenga
     padding excesivo arriba/abajo. Solo respiro mínimo simétrico.
     Cambiar display a flex column (override del grid + align-content:
     center global de L232-244) para que el container llene perfecto
     toda la altura. Sin esto, el container queda centrado vertical
     dejando 30-60px de aire arriba Y abajo dentro de la sección. */
  /* Approach final 2026-05-27: bypass de toda la flex chain con
     altura explícita calc en el container, grid 5-row en el wrapper.
     Padding safe-zone 24px (8-point grid, Material Design / Tailwind
     p-6 / Apple "spacious" estándar). 24*2 = 48 sustraídos del
     calc del container. */
  .hero--paciente {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: 24px;
    padding-right: 24px;
    display: block;
  }
  .hero--paciente .container {
    display: block;
    height: calc(100svh - var(--header-h) - 48px);
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
    padding: 0;
  }
  .hero--paciente .container > div {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-columns: 1fr;
    height: 100%;
    gap: 0;
    margin: 0;
  }
  .hero--paciente .container > div > .hero__kicker {
    grid-row: 1;
    margin-bottom: var(--space-3);
    align-self: end;
  }
  .hero--paciente .container > div > h1 {
    grid-row: 2;
    margin-bottom: 0;
    align-self: end;
  }
  /* MIDDLE zone: hero-art ocupa la row 3 (1fr) del grid, centra las
     cards adentro. height:100% para que ocupe toda la celda. */
  .hero--paciente .hero-art { display: none; }
  .hero--paciente .hero-art.hero-art--mobile {
    display: flex;
    grid-row: 3;
    height: 100%;
    min-height: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .hero--paciente .hero-art--mobile .patient-hero-art {
    /* Reescalado mobile: container ajustado al ancho real útil
       (viewport - 48px section padding lateral). Reposicionamos
       las cards en coords proporcionales para que ocupen el ancho
       de forma balanceada (sin pegarse al borde izquierdo). */
    display: block;
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 280px;
    margin: 0 auto;
    zoom: 1;
  }
  .hero--paciente .hero-art--mobile .phero-card { width: 200px; }
  .hero--paciente .hero-art--mobile .phero-card--1 { top: 0; left: 0; }
  .hero--paciente .hero-art--mobile .phero-card--2 { top: 90px; left: 110px; }
  .hero--paciente .hero-art--mobile .phero-card--3 { top: 180px; left: 20px; }
  /* Hide el .phero-pulse (dot decorativo) en mobile — el usuario
     pidió quitarlo para dar más presencia a las cards (2026-05-27). */
  .hero--paciente .hero-art--mobile .phero-pulse { display: none; }
  /* BOTTOM zone: lede + CTAs anclados abajo (rows 4-5 del grid). */
  .hero--paciente .container > div > .hero__lede {
    grid-row: 4;
    margin-bottom: var(--space-4);
    margin-top: 0;
    align-self: start;
  }
  .hero--paciente .container > div > .hero__cta {
    grid-row: 5;
    margin: 0;
    align-self: start;
  }

  /* Scrollytelling stage — kill fixed max-width, kill pin */
  .scrolly__stage {
    position: static;
    height: auto;
    min-height: 0;
    margin-bottom: var(--space-6);
  }
  .scrolly__stage-inner { max-width: 100%; }
  .scrolly__inner { grid-template-columns: 1fr; }
  .scrolly__step {
    min-height: 0;
    padding: 24px 0;
    opacity: 1;
    filter: none;
  }
  .scrolly__step h3 { font-size: clamp(26px, 6vw, 34px); }

  /* Phone mock — already responsive via aspect-ratio, just cap width */
  .phone-stage { max-width: 280px; }

  /* Forms — single column always */
  .form-card { padding: 24px 18px; }
  .form-row { grid-template-columns: 1fr; }
  .form-row--single { grid-template-columns: 1fr; }
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: var(--text-body); }  /* prevent iOS zoom on focus */

  /* Stats / KPI cards — single column */
  .stats { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; }
  .stat-cell { padding: 24px 20px; }

  /* Steps cards — single column */
  .steps { grid-template-columns: 1fr; }

  /* Team grid — single column on narrowest, 2-up on slightly wider */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Tilcia chaos — viewport-relative width so papers stay contained */
  .tilcia-warm { grid-template-columns: 1fr; }
  .tilcia-warm__chaos {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 360px;
  }

  /* Patient hero floating cards — keep within container */
  .patient-hero-art { max-width: 100%; height: auto; min-height: 220px; }
}

/* Extra-narrow phones (≤ 380px) — tighten further */
@media (max-width: 380px) {
  /* Extra-narrow: 10.5px sub-pixel migrado a --type-mono-sm (11), +0.5px negligible.
     8px/2px micro padding tap-target preserved (no scale, hand-tuned). */
  .audience-switch button { padding: var(--space-2) 2px; font-size: var(--type-mono-sm); }
  .site-header .brand { font-size: 24px; }
  .container { padding: 0 14px; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   Mobile pin-scrub scrollytelling (≤720px, motion OK).
   Aplica a cualquier <section class="scrolly scrolly--pin-scrub">
   (médico v1 — paciente se extiende añadiendo la clase).
   Behavior: la sección se vuelve N × 100svh de alto (runway). El
   .scrolly__inner queda `position: sticky; top: 0; height: 100svh`
   y dentro presenta texto+mock+dots fijos en el viewport, swapping
   step+pane según el scroll progress de la sección. Al salir de la
   sección, sticky se libera y el scroll sigue normal.

   El número de pasos viene de --scrolly-steps (declarado inline en
   <section style="--scrolly-steps: 4">). Múltiplo del 100svh para
   dar runway proporcional al # de steps.

   Pieza requerida del JS: updateScrollyPinScrub() en landing.js
   detecta `.scrolly--pin-scrub` y aplica `.is-active` al step+pane+dot
   correspondiente.
   ───────────────────────────────────────────────────────── */
/* 2026-05-27: removida la query `(prefers-reduced-motion: no-preference)`.
   En iPhone 16 Pro Max real (iOS Safari) + Playwright Webkit, Safari
   trata esta query como NO MATCH en condiciones donde Chrome la matchea,
   colapsando todo el bloque pin-scrub a defaults position:static y
   rompiendo el layout. Ahora pin-scrub aplica sin gate de motion. La
   gestión de reduced-motion se hace en el @media de abajo como override
   quirúrgico solo de las transitions, sin tocar layout. */
@media (max-width: 720px) {
  /* Outer section = runway. 100svh por step (small-viewport: ignora
     iOS Safari address-bar collapse, así el pin no se desincroniza). */
  .scrolly.scrolly--pin-scrub {
    min-height: calc(100svh * var(--scrolly-steps, 4));
    position: relative;
    /* Desktop usa padding: 120px 0 80px para dar respiro al
       .scrolly__intro (visible solo en desktop) y al stage pinned.
       En mobile pin-scrub el .scrolly__intro está display:none y el
       inner se hace sticky bajo el header. Si dejamos el padding,
       inner.natural-y queda 120px abajo de scrolly.top y el sticky
       no engancha hasta scroll.y >= scrolly.top + 120 - 64 = +56,
       creando un "gap" visible cuando user entra al scrolly.
       Padding 0 hace que el sticky enganche justo cuando scrolly.top
       cruza el viewport.top + header-h. Fix 2026-05-27. */
    padding: 0;
  }

  /* El inner se vuelve el frame pinned debajo del header sticky.
     `top: var(--header-h)` lo ancla 64px debajo del viewport top
     (área visible del header). `height: calc(100svh - --header-h)`
     hace que el inner termine en el viewport-bottom, sin overflow.
     Cuando el inner llega al bottom de la section padre, sticky se
     libera naturalmente. User feedback 2026-05-27: "la seccion no
     puede ser del tamaño del viewport si no del tamaño del viewport
     menos el header". */
  .scrolly--pin-scrub .scrolly__inner {
    /* Posicionamiento absoluto explícito por dentro: grid y flex column
       producían un offset fantasma de ~110px en el stage que no
       respondía a place-content/align-self/order. La causa es probable
       que el `.scrolly__stage-inner` desktop tenga `transform` (creating
       containing block) interactuando con el layout flex/grid del padre
       en alguna way no documentada. Skip the indirection con position
       absolute + coords explícitas. Probe extensivo 2026-05-26. */
    position: sticky;
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    display: block;
    padding: 0;
    overflow: hidden;
    margin: 0;
  }

  /* Las 4 zonas son hijos absolutos del inner. El inner es el
     containing block (sticky / relative siempre crean uno). Variables
     CSS para que sea fácil tunear espacios sin tocar las reglas. */
  .scrolly--pin-scrub .scrolly__inner {
    /* --pin-header-pad ahora es intra-padding desde el TOP del inner
       (que ya está 64px abajo via sticky top: --header-h). Antes era
       96 para compensar el header; redujimos a 24 (respiro pequeño
       dentro del frame pin) tras el fix global de --header-h. */
    --pin-header-pad: 24px;
    --pin-side-pad: 16px;
    --pin-bottom-pad: 14px;
    /* Iteración 2026-05-26: intro vuelto a tamaño hero (h2 grande tipo
       otros section headers de la landing). Llama la atención, marca el
       inicio del caso. Height ajustado tight al contenido real
       (kicker 22px + h2 2-line ~62px ≈ 84px) — antes era 120 y
       sobraba espacio inservible debajo de "Una vida.". */
    --pin-intro-h: 86px;
    /* intro-gap igualado a --pin-gap (gap entre steps y stage). User
       feedback 2026-05-26: "agrega padding debajo del pin-intro, está
       muy pegado al steps, iguálalo con el gap del steps→stage". */
    --pin-intro-gap: var(--pin-gap);
    --pin-steps-h: clamp(130px, 20svh, 170px);
    --pin-dots-h: 30px;
    /* Gap más generoso entre step text y mock (era 10), permite que
       el hairline divider tenga respiro a cada lado. */
    --pin-gap: 18px;
  }

  /* Pin-intro: copia del .scrolly__intro al tope del pin (rellena el
     espacio que quedaba vacío arriba del texto del step). Usuario
     2026-05-26: "rellenar la parte de arriba juntando lo que dice
     caso real una alerta una vida". El original .scrolly__intro
     queda oculto en mobile pin-scrub para evitar duplicación visible. */
  .scrolly--pin-scrub > .scrolly__intro { display: none; }
  .scrolly--pin-scrub .scrolly__pin-intro {
    display: block;
    position: absolute;
    top: var(--pin-header-pad);
    left: var(--pin-side-pad);
    right: var(--pin-side-pad);
    height: var(--pin-intro-h);
    margin: 0;
    overflow: hidden;
  }
  .scrolly--pin-scrub .scrolly__pin-intro .kicker {
    display: block;
    margin-bottom: 10px;
  }
  /* h2 hero: tamaño que matchea los section heads de la landing
     ("Cómo te ayuda", "Tres cosas", etc). Reduce el peso del step text
     que tiene un h3 — el orden visual es intro h2 > step h3. */
  .scrolly--pin-scrub .scrolly__pin-intro h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 7.5vw, 36px);
    line-height: 1.02;
    margin: 0;
    letter-spacing: -0.022em;
    color: var(--ink);
    font-weight: var(--font-weight-regular);
  }
  .scrolly--pin-scrub .scrolly__pin-intro h2 em {
    font-style: italic;
    color: var(--sky-deep);
  }

  /* Steps container: top, debajo del intro. */
  .scrolly--pin-scrub .scrolly__steps {
    position: absolute;
    top: calc(var(--pin-header-pad) + var(--pin-intro-h) + var(--pin-intro-gap));
    left: var(--pin-side-pad);
    right: var(--pin-side-pad);
    height: var(--pin-steps-h);
    margin: 0;
    overflow: hidden;
  }
  /* 4 steps superpuestos, solo .is-active visible. Crossfade idéntico
     al desktop (opacity + translateY 14px) para mantener "alta fidelidad
     al diseño desktop" pedida por el usuario. */
  .scrolly--pin-scrub .scrolly__step {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(14px);
    filter: none;
    transition:
      opacity 0.45s cubic-bezier(0.22, 0.7, 0.26, 1),
      transform 0.45s cubic-bezier(0.22, 0.7, 0.26, 1);
    pointer-events: none;
    /* Texto TOP-aligned dentro del container — usuario pidió reducir
       el gap entre intro ("Una alerta. Una vida.") y el step text.
       Override 2026-05-26: antes era flex-end (texto pegado al mock),
       ahora flex-start (texto pegado al intro). */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .scrolly--pin-scrub .scrolly__step.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Step h3/p más compactos para caber en 28svh top. */
  .scrolly--pin-scrub .scrolly__step h3 {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: var(--space-2);
  }
  .scrolly--pin-scrub .scrolly__step p {
    font-size: 15px;
    line-height: 1.45;
  }
  .scrolly--pin-scrub .scrolly__step .step-num {
    font-size: var(--type-mono-sm); /* was 10px, +1 */
    margin-bottom: 6px;
  }

  /* Stage: fila 2 = 1fr. height:100% + min-height:0 fuerza al stage
     a respetar la celda del grid (sin esto, el mock 2-col stretchea
     el grid row a su intrinsic height y rompe el budget de 100svh). */
  .scrolly--pin-scrub .scrolly__stage {
    /* Stage absoluto: ocupa el medio. Top = header-pad + intro + steps + gaps.
       Bottom = bottom-pad + dots + gap. Hairline divider tick mark vía
       ::before (separa zona TEXT de zona MOCK). overflow: visible para
       que el ::before no se clipee fuera del stage rect. */
    position: absolute;
    left: var(--pin-side-pad);
    right: var(--pin-side-pad);
    top: calc(var(--pin-header-pad) + var(--pin-intro-h) + var(--pin-intro-gap) + var(--pin-steps-h) + var(--pin-gap));
    bottom: calc(var(--pin-bottom-pad) + var(--pin-dots-h) + var(--pin-gap));
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    display: flex;
    /* Mock al TOP del stage cell (no centered) — se pega justo debajo
       del texto que cierra arriba. Sin esto, el mock flota centered
       con whitespace arriba (Phase 5 user feedback). */
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
  }
  /* Hairline tick — 60px centered line en --ink-line, ~9px arriba del
     stage. Iteración usuario: "divider sutil entre zona TEXT y MOCK". */
  .scrolly--pin-scrub .scrolly__stage::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--ink-line);
  }
  /* Mock MÉDICO: renderizar con LAYOUT DE DESKTOP (2-col EHR+Medora)
     pero shrunk con `zoom` al ancho del viewport mobile. Decisión del
     usuario 2026-05-26: "el médico no usa la app en teléfono, este
     mock es solo ilustrativo de cómo se ve en escritorio".
     `zoom` reduce VISUAL + LAYOUT al mismo tiempo, sin necesidad de
     negative margins (vs `transform: scale`). Chrome/Safari soportan
     `zoom` desde siempre, Firefox desde v126 (mayo 2024).
     720px = natural width comfortable de un EHR(450) + Medora(270).
     Zoom 0.46 fits incluso iPhone SE (343 disponible): 720*0.46=331.

     IMPORTANTE: scope estricto a #case-medico — paciente usa un phone
     mock que YA es vertical y NO necesita zoom (renderea al natural). */
  #case-medico .scrolly__stage-inner {
    width: 600px;
    max-width: none;
    height: auto;
    min-height: 0;
    /* Iteración usuario 2026-05-26 "texto del preview más grande":
       reduzco mock natural width 720→600 y bumpeo zoom 0.52→0.60.
       Resultado: mismo ancho visible (~360px = fit en 358 viewport)
       pero el texto INTERNO aparece a 60% del desktop (vs 52% antes),
       ~15% más grande. Tradeoff: EHR columna pasa de 450 a 330 wide
       (15% más estrecho) — algunos labels pueden wrapear más, pero
       el contenido es decorativo. */
    zoom: 0.60;
    display: block;
    transform: none; /* override desktop translateY(0) scale(1) */
  }
  #case-medico .scrolly-mock {
    width: 600px;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  #case-medico .scrolly-mock__body {
    display: grid;
    grid-template-columns: 1fr 270px;
    grid-template-rows: auto;
    min-height: 380px;
  }

  /* ─────────────────────────────────────────────────────────
     User feedback 2026-05-27: invertir layout vertical en médico:
       · mock CENTRADO en el viewport
       · step text DEBAJO del mock (en lugar de arriba)
       · gap inferior del step text (hacia dots) = gap inferior del
         pin-intro (hacia el mock)
     Solo médico. Paciente sigue con su orden actual (intro→steps→mock).
     ───────────────────────────────────────────────────────── */
  #case-medico .scrolly__stage {
    /* Stage extiende desde justo abajo del pin-intro hasta justo
       arriba del steps row. align-items: center centra el mock
       verticalmente en ese cell amplio. */
    position: absolute;
    left: var(--pin-side-pad);
    right: var(--pin-side-pad);
    top: calc(var(--pin-header-pad) + var(--pin-intro-h) + var(--pin-intro-gap));
    bottom: calc(var(--pin-bottom-pad) + var(--pin-dots-h) + var(--pin-gap) + var(--pin-steps-h) + var(--pin-gap));
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  #case-medico .scrolly__steps {
    /* Steps queda anclado al fondo: bottom = bottom-pad + dots + gap.
       Así el gap bajo el steps row (hacia los dots) = --pin-gap = 18,
       mismo que --pin-intro-gap = gap bajo el pin-intro hacia el mock. */
    position: absolute;
    left: var(--pin-side-pad);
    right: var(--pin-side-pad);
    bottom: calc(var(--pin-bottom-pad) + var(--pin-dots-h) + var(--pin-gap));
    top: auto;
    height: var(--pin-steps-h);
    margin: 0;
    overflow: hidden;
  }

  /* Mock PACIENTE: usar `zoom` (como médico) para preservar proporciones
     del notch + dot indicators + phone bezel. Reducir el ancho con
     max-width directamente hacía que el notch (108×32 fijo) se viera
     desproporcionadamente grande en un phone shrunk. Con zoom todo
     escala uniformemente.
     320 × (676 alto natural) → con zoom 0.58: 186 × 392, fits stage
     cell ~411 alto comfortablemente. */
  /* Paciente phone: bigger fill. User feedback 2026-05-26 "queda mucho
     espacio abajo del teléfono, aumenta tamaño".
     Override del steps-h paciente (textos cortos, no necesita los 170px
     del default) → libera ~35px vertical para el phone.
     Phone 320×676 a zoom 0.70 = 224×473 — llena el stage cell ~475 alto
     con 2px de respiro. */
  /* Paciente: maximizar el tamaño del phone. User feedback iterativo
     2026-05-26 "el phone debe llenar el espacio".
     Estrategia: reducir TODAS las reservaciones verticales para que el
     stage cell sea lo más grande posible.
       · intro-h/gap → 0 (paciente no usa .scrolly__pin-intro)
       · header-pad: 96→72 (paciente header pad más agresivo)
       · steps-h: clamp(120,17svh,145) — text más compacto, h3 1 línea
       · bottom-pad: 14→10
       · dots-h: 30→24
       · gap: 18→12 (steps-stage y stage-dots)
     Stage cell efectivo ≈ 844 - 72 - 145 - 12 - 12 - 24 - 10 = 569
     Phone zoom 0.82: 320*0.82=262 w, 676*0.82=554 h. Fits 569 con 15px. */
  #discoveries-paciente .scrolly__inner {
    /* Inner ya se ancla 64px abajo del viewport top (sticky top:
       --header-h). pin-header-pad ahora es intra-padding: 12 da el
       mismo respiro simétrico que --pin-gap entre kicker→step y
       step→phone. Antes era 74 porque el inner estaba en top:0. */
    --pin-header-pad: 12px;
    --pin-intro-h: 0px;
    --pin-intro-gap: 0px;
    --pin-steps-h: clamp(120px, 17svh, 145px);
    --pin-bottom-pad: 10px;
    --pin-dots-h: 24px;
    --pin-gap: 12px;
  }
  /* Step text centrado verticalmente en su row + más compacto. center
     reparte el aire del row (steps_h - content_h) por igual arriba y
     abajo. Sumando los gaps externos iguales (header-pad - header.bot
     arriba, --pin-gap abajo), el gap visible queda simétrico. User
     feedback 2026-05-26. */
  #discoveries-paciente .scrolly__step {
    justify-content: center;
  }
  #discoveries-paciente .scrolly__step h3 {
    font-size: clamp(20px, 5vw, 24px);
    margin-bottom: 6px;
  }
  #discoveries-paciente .scrolly__step p {
    font-size: var(--text-helper);
    line-height: 1.4;
  }
  #discoveries-paciente .scrolly__stage-inner.phone-stage,
  #discoveries-paciente .phone-stage {
    max-width: 320px;
    width: 320px;
    margin: 0 auto;
    height: auto;
    zoom: 0.82;
    transform: none;
  }
  #discoveries-paciente .scrolly__stage-inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Dots indicator: bottom absoluto. */
  .scrolly--pin-scrub .scrolly__dots {
    position: absolute;
    left: var(--pin-side-pad);
    right: var(--pin-side-pad);
    bottom: var(--pin-bottom-pad);
    height: var(--pin-dots-h);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0;
  }
  .scrolly--pin-scrub .scrolly__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-faint);
    transition:
      background 0.35s ease,
      width 0.35s ease,
      border-radius 0.35s ease;
  }
  .scrolly--pin-scrub .scrolly__dot.is-active {
    background: var(--sky-deep);
    width: 22px;
    border-radius: var(--radius-sm);
  }

  /* El intro (caso real · Una alerta. Una vida.) está dentro del
     section pero fuera del .scrolly__inner — scrollea normalmente
     antes de que el pin se active. */
  .scrolly--pin-scrub .scrolly__intro {
    margin-bottom: var(--space-3);
  }
}

/* Reduced-motion fallback: stack lineal sin pin. Sin pin la narrativa
   "mock evoluciona" se pierde, pero el JS (rama dedicada) fuerza el
   mock al último estado (.is-loaded + pane=N activo) para que el user
   vea EL OUTCOME en lugar del estado inicial vacío. */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  /* Desactivar SOLO las transiciones del crossfade. El layout pin-scrub
     (sticky + absolute coords + zoom) sigue funcionando idéntico —
     iOS/Safari user con motion preferences ON ve la misma estructura
     visual, solo sin el suave fade entre steps. JS también detecta
     reducedMotion y aplica el step activo sin animación. */
  .scrolly--pin-scrub .scrolly__step {
    transition: none;
  }
  .scrolly--pin-scrub .scrolly__dot {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE STACKED MODE (replaces pin-scrub on ≤720px when the
   section has a .scrolly__mobile-stack block).

   Por qué: QA feedback 2026-05-27. El pin-scrub mobile requería
   4-5 scrolls por step (UX malo) y el .phone-mock se cortaba 11-95px
   en viewports realistas (URL bar visible / iPhone SE) porque los
   children del .scrolly__inner sticky tienen `top` absolute hardcoded
   calibrado para ~844px, mientras sticky.height=calc(100svh - 64px)
   shrinkea con el viewport real.

   La solución: convertir cada step en una viewport-h section autónoma
   (1 scroll = 1 step). Cada step tiene SU mock con SU pane visible.
   Pattern usado por NYT, Pudding, Apple para scrollytelling mobile.
   Desktop pin-scrub queda 100% intacto (este bloque solo activa con
   :has(.scrolly__mobile-stack)).
   ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Override pin-scrub para sections con mobile-stack. La specificity
     .scrolly--pin-scrub:has(.scrolly__mobile-stack) = 2 clases iguala
     .scrolly.scrolly--pin-scrub del bloque anterior; gana por source
     order (esta regla viene después). */
  .scrolly--pin-scrub:has(.scrolly__mobile-stack) {
    min-height: auto;
    padding: 0;
  }
  .scrolly--pin-scrub:has(.scrolly__mobile-stack) .scrolly__inner {
    display: none;
  }
  /* Show the stacked view. */
  .scrolly__mobile-stack {
    display: block;
  }
  /* Each stack-step = its own viewport-h slot with safe-zone padding.
     min-height en lugar de height para no recortar contenido grande;
     flex column con justify-content center vertically balances el mock
     + step text. */
  .scrolly__stack-step {
    min-height: calc(100svh - var(--header-h));
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    box-sizing: border-box;
  }
  /* Phone-mock mobile-stack: width 280px (iPhone Pro Max feel — más
     wide que los 240 anteriores que se veían angostos). Aspect-ratio
     9/19 = 591px de alto. Cabe en iPhone 14 (844vh - 64 header - 48
     padding - 120 text - 24 gap = 588 useable) tight; en iPhone SE
     overflowea ~180px y el step crece por encima de min-height
     (acceptable — scroll natural). User feedback 2026-05-27. */
  .scrolly__stack-step .phone-mock--mobile-stack {
    width: 280px;
    flex-shrink: 0;
    margin: 0;
  }
  /* Scrolly-mock mobile-stack: mismo approach que el hero (line 2410+).
     Width fija desktop-natural 600px + zoom 0.55 → 330px visual.
     Preserva el 2-col EHR+Medora del desktop. */
  .scrolly__stack-step .scrolly-mock--mobile-stack {
    width: 600px;
    max-width: none;
    zoom: 0.55;
    flex-shrink: 0;
    display: block;
  }
  /* Igualar tamaño entre los 4 mocks del médico. Cada pane tiene
     contenido de altura distinta (upload card vs scanning list vs
     alert vs evidencia), lo que producía 4 mocks de tamaños/aspecto
     variables. min-height 480 (~264 visual con zoom 0.55) garantiza
     el alto del pane más grande; los menores se centran via grid
     stretch natural. User feedback 2026-05-27. */
  .scrolly__stack-step .scrolly-mock--mobile-stack .scrolly-mock__body {
    min-height: 480px;
  }
  /* Step text: reset cualquier transform/opacity del pin-scrub
     (.scrolly__step en mobile pin tiene opacity transitions). */
  .scrolly__stack-step .scrolly__step {
    opacity: 1;
    transform: none;
    transition: none;
    text-align: left;
    max-width: 480px;
    width: 100%;
    padding: 0;
    /* Override pin-scrub specific positioning + sizing of .scrolly__step */
    position: static;
    height: auto;
    min-height: 0;
  }
  /* Pane visibility: en stack mode, cada pane está marcado .is-active
     en el HTML. Asegurar visibilidad explícita (override de cualquier
     regla de pin-scrub que oculte panes inactivos). */
  .scrolly__stack-step .phone-pane,
  .scrolly__stack-step .scrolly-pane {
    opacity: 1;
    position: static;
    display: block;
  }

  /* ─────────────────────────────────────────────────────
     Mobile-stack pane animations. Disparadas por .is-in-view
     (agregada por JS IntersectionObserver cuando el stack-step
     entra al viewport). Filosofía: sutiles, tipo-app, para
     compensar la pérdida del pin-scrub dynamism. One-shot al
     entrar + 1 loop por pane (el "elemento de atención").
     ───────────────────────────────────────────────────── */

  /* Estado base (antes de entrar al viewport): elementos animables
     start opacity 0 + small translate, transform-origin: center.
     forwards keep el estado final después de animar. */

  /* === PACIENTE STEP 1 — Interacción === */
  .scrolly__stack-step .phone-alert,
  .scrolly__stack-step .phone-meds .phone-med,
  .scrolly__stack-step .phone-action {
    opacity: 0;
    transform: translateY(8px);
  }
  .scrolly__stack-step.is-in-view .phone-alert {
    animation: ms-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  }
  .scrolly__stack-step.is-in-view .phone-meds .phone-med:nth-child(1) {
    animation: ms-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  }
  .scrolly__stack-step.is-in-view .phone-meds .phone-med:nth-child(2) {
    animation: ms-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
  }
  .scrolly__stack-step.is-in-view .phone-action {
    animation: ms-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
  }
  /* "Nuevo" dot pulse loop — llamativo pero no agresivo */
  .scrolly__stack-step.is-in-view .phone-med__dot--new {
    animation: ms-dot-pulse 2.2s ease-in-out 1.2s infinite;
  }

  /* === PACIENTE STEP 2 — Tendencia === */
  /* SVG chart line traza de L a R. stroke-dasharray=480 (path length aprox),
     dashoffset 480→0 reveals the line. Circles + delta scale-in después. */
  .scrolly__stack-step .phone-trend__chart path:not([fill="rgba(199,61,50,0.12)"]) {
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
  }
  .scrolly__stack-step .phone-trend__chart circle {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
  }
  .scrolly__stack-step .phone-trend__delta,
  .scrolly__stack-step .phone-explain {
    opacity: 0;
    transform: translateY(6px);
  }
  .scrolly__stack-step.is-in-view .phone-trend__chart path:not([fill="rgba(199,61,50,0.12)"]) {
    animation: ms-stroke-draw 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  }
  .scrolly__stack-step.is-in-view .phone-trend__chart circle {
    animation: ms-circle-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  /* Stagger circles a lo largo de la línea */
  .scrolly__stack-step.is-in-view .phone-trend__chart circle:nth-child(4) { animation-delay: 0.4s; }
  .scrolly__stack-step.is-in-view .phone-trend__chart circle:nth-child(5) { animation-delay: 0.6s; }
  .scrolly__stack-step.is-in-view .phone-trend__chart circle:nth-child(6) { animation-delay: 0.8s; }
  .scrolly__stack-step.is-in-view .phone-trend__chart circle:nth-child(7) { animation-delay: 1.0s; }
  .scrolly__stack-step.is-in-view .phone-trend__chart circle:nth-child(8) { animation-delay: 1.2s; }
  .scrolly__stack-step.is-in-view .phone-trend__chart circle:nth-child(9) { animation-delay: 1.4s; }
  /* Último circle (data point actual) pulse loop */
  .scrolly__stack-step.is-in-view .phone-trend__chart circle:nth-child(10) {
    animation:
      ms-circle-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s forwards,
      ms-circle-pulse 2.4s ease-in-out 2.4s infinite;
  }
  .scrolly__stack-step.is-in-view .phone-trend__delta {
    animation: ms-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  }
  .scrolly__stack-step.is-in-view .phone-explain {
    animation: ms-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
  }

  /* === PACIENTE STEP 3 — Patrón === */
  .scrolly__stack-step .phone-timeline__row,
  .scrolly__stack-step .phone-alert--insight {
    opacity: 0;
    transform: translateX(-10px);
  }
  .scrolly__stack-step .phone-alert--insight {
    transform: translateY(8px);
  }
  .scrolly__stack-step.is-in-view .phone-timeline__row {
    animation: ms-slide-in-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .scrolly__stack-step.is-in-view .phone-timeline__row:nth-child(1) { animation-delay: 0.15s; }
  .scrolly__stack-step.is-in-view .phone-timeline__row:nth-child(2) { animation-delay: 0.35s; }
  .scrolly__stack-step.is-in-view .phone-timeline__row:nth-child(3) { animation-delay: 0.55s; }
  .scrolly__stack-step.is-in-view .phone-alert--insight {
    animation: ms-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
  }
  /* Timeline dots pulse muy sutil loop después de aparecer */
  .scrolly__stack-step.is-in-view .phone-timeline__row .phone-timeline__dot {
    animation: ms-dot-pulse-soft 3s ease-in-out 1.8s infinite;
  }

  /* === MÉDICO STEP 1 — Upload === */
  /* Icono upload con micro-bounce loop sutil (flecha "sube") */
  .scrolly__stack-step.is-in-view .scrolly-mock__upload-icon {
    animation: ms-upload-bounce 2.4s ease-in-out infinite;
  }
  /* Card upload con breathing (border opacity oscila) */
  .scrolly__stack-step .scrolly-mock__upload {
    opacity: 0;
  }
  .scrolly__stack-step.is-in-view .scrolly-mock__upload {
    animation: ms-fade-in 0.4s ease-out 0.1s forwards;
  }

  /* === MÉDICO STEP 2 — Análisis === */
  .scrolly__stack-step .scrolly-mock__blocks .scrolly-mock__ehr-block,
  .scrolly__stack-step .scrolly-pane__list-row {
    opacity: 0;
    transform: translateX(-8px);
  }
  .scrolly__stack-step.is-in-view .scrolly-mock__blocks .scrolly-mock__ehr-block {
    animation: ms-slide-in-left 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .scrolly__stack-step.is-in-view .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(1) { animation-delay: 0.1s; }
  .scrolly__stack-step.is-in-view .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(2) { animation-delay: 0.25s; }
  .scrolly__stack-step.is-in-view .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(3) { animation-delay: 0.4s; }
  .scrolly__stack-step.is-in-view .scrolly-mock__blocks .scrolly-mock__ehr-block:nth-child(4) { animation-delay: 0.55s; }
  .scrolly__stack-step.is-in-view .scrolly-pane__list-row {
    animation: ms-slide-in-left 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .scrolly__stack-step.is-in-view .scrolly-pane__list-row:nth-child(1) { animation-delay: 0.5s; }
  .scrolly__stack-step.is-in-view .scrolly-pane__list-row:nth-child(2) { animation-delay: 0.7s; }
  .scrolly__stack-step.is-in-view .scrolly-pane__list-row:nth-child(3) { animation-delay: 0.9s; }
  .scrolly__stack-step.is-in-view .scrolly-pane__list-row:nth-child(4) { animation-delay: 1.1s; }
  .scrolly__stack-step.is-in-view .scrolly-pane__list-row:nth-child(5) { animation-delay: 1.3s; }

  /* === MÉDICO STEP 3 — Alerta crítica === */
  .scrolly__stack-step .scrolly-pane__alert {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: center;
  }
  .scrolly__stack-step.is-in-view .scrolly-pane__alert {
    animation:
      ms-scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards,
      ms-alert-pulse 2.8s ease-in-out 1.2s infinite;
  }

  /* === MÉDICO STEP 4 — Evidencia === */
  /* La scrolly-pane__alert ya tiene el scale-in animation above.
     Aquí solo el quote blockquote interno con un fade extra suave. */
  .scrolly__stack-step .scrolly-pane__alert > div[style*="background: var(--bone)"] {
    opacity: 0;
  }
  .scrolly__stack-step.is-in-view .scrolly-pane__alert > div[style*="background: var(--bone)"] {
    animation: ms-fade-in 0.6s ease-out 1s forwards;
  }
}

/* Keyframes (fuera del @media para que prefers-reduced-motion las override).
   Prefix ms- (mobile-stack) para no chocar con otras animaciones. */
@keyframes ms-fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ms-fade-in {
  to { opacity: 1; }
}
@keyframes ms-slide-in-left {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ms-scale-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes ms-circle-pop {
  to { opacity: 1; transform: scale(1); }
}
@keyframes ms-stroke-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ms-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,61,50,0.6); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(199,61,50,0); transform: scale(1.15); }
}
@keyframes ms-dot-pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.85; }
}
@keyframes ms-circle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
@keyframes ms-upload-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes ms-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,61,50,0.0), inset 0 0 0 1px rgba(199,61,50,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(199,61,50,0.08), inset 0 0 0 1px rgba(199,61,50,0.6); }
}

/* Respect reduced motion: skip all the ms-* animations */
@media (prefers-reduced-motion: reduce) {
  .scrolly__stack-step *,
  .scrolly__stack-step.is-in-view * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ─── Patient discoveries · phone mockup scrollytelling ── */
.phone-stage {
  max-width: 320px;
  margin: 0 auto;
}
.phone-mock {
  width: 100%;
}
.phone-mock__bezel {
  position: relative;
  aspect-ratio: 9 / 19;
  background: #1C1B17;
  border-radius: 52px;
  padding: 9px;
  box-shadow:
    0 40px 80px rgba(28,27,23,0.18),
    0 10px 30px rgba(28,27,23,0.10),
    inset 0 0 0 2px rgba(247,245,240,0.08),
    inset 0 0 0 4px rgba(28,27,23,0.4);
}
.phone-mock__notch {
  /* Dynamic Island — floating pill, not connected to top edge */
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 32px;
  background: #0a0a0a;
  border-radius: 99px;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.phone-mock__screen {
  position: relative;
  height: 100%;
  background: var(--bone);
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px 4px;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  color: var(--ink);
  font-weight: var(--font-weight-medium);
}
.phone-status-icons {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--ink);
}

.phone-mock__app {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  overflow: hidden;
}
.phone-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.phone-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
}

/* Phone panes — only one active at a time, soft crossfade */
.phone-pane {
  position: absolute;
  inset: 76px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.phone-pane.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.phone-pane__kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.22em */
  text-transform: uppercase;
  color: var(--ink-mute);
}
.phone-pane__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 6px;
}

/* Interacción */
.phone-alert {
  background: rgba(199,61,50,0.06);
  border: 1px solid rgba(199,61,50,0.22);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  padding: 12px 14px;
}
.phone-alert__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
}
.phone-alert__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(199,61,50,0.45);
  animation: red-pulse 1.6s ease-out infinite;
}
.phone-alert__lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.16em */
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: var(--font-weight-medium);
}
.phone-alert__body {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.phone-alert__body strong {
  font-weight: var(--font-weight-medium);
}

/* Variant: insight alert (with action arrow). Used in pane 3 to
   surface the diagnostic hypothesis that only the full timeline
   reveals. */
.phone-alert--insight {
  margin-top: var(--space-1);
}
.phone-alert--insight .phone-alert__action {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(199,61,50,0.18);
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.16em */
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: var(--font-weight-medium);
}

.phone-meds {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.phone-med {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  font-size: var(--type-kicker);
  color: var(--ink);
}
.phone-med__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-mute);
}
.phone-med__dot--new {
  background: var(--red);
}
.phone-med__since {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

.phone-action {
  margin-top: var(--space-3);
  padding: 12px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}
.phone-action--sky {
  background: var(--sky-deep);
}

/* Tendencia */
.phone-trend {
  background: var(--paper);
  border-radius: 12px;
  padding: 14px;
}
.phone-trend__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.phone-trend__delta {
  color: var(--red-deep);
  font-weight: var(--font-weight-medium);
}
.phone-trend__chart {
  width: 100%;
  height: 90px;
  display: block;
}
.phone-trend__months {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}
.phone-explain {
  padding: 12px;
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 10px;
}
.phone-explain__lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-bottom: 6px;
}
.phone-explain p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* Patrón / timeline */
.phone-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 4px 0;
}
.phone-timeline__row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}
.phone-timeline__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
  margin-top: 5px;
  margin-left: 3px;
  box-shadow: 0 0 0 2px var(--bone), 0 0 0 3px rgba(28,27,23,0.10);
}
.phone-timeline__dot--sky {
  background: var(--sky-deep);
  box-shadow: 0 0 0 2px var(--bone), 0 0 0 3px var(--sky);
}
.phone-timeline__date {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2px;
}
.phone-timeline__txt {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
}
.phone-timeline__row--insight .phone-timeline__date { color: var(--sky-deep); }
.phone-timeline__row--insight .phone-timeline__txt strong {
  color: var(--ink);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 980px) {
  .phone-stage { max-width: 280px; }
}

/* Hero art for patient view: floating layered cards */
.patient-hero-art {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 380px;
  margin-left: auto;
}
.phero-card {
  position: absolute;
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow:
    0 24px 40px rgba(28,27,23,0.06),
    0 6px 14px rgba(28,27,23,0.04);
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: phero-float 8s ease-in-out infinite;
}
.phero-card .kicker {
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  color: var(--sky-deep);
}
.phero-card .phero-line {
  height: 8px;
  background: rgba(28,27,23,0.08);
  border-radius: 2px;
}
.phero-card .phero-line.short { width: 60%; }
.phero-card--1 { top: 0; left: 0; transform: rotate(-4deg); animation-delay: 0s; }
.phero-card--2 {
  top: 110px; left: 110px; transform: rotate(3deg);
  background: rgba(184, 208, 227, 0.18);
  border-color: rgba(111, 155, 189, 0.30);
  animation-delay: 1.2s;
}
.phero-card--2 .kicker { color: var(--red-deep); }
.phero-card--2 .phero-line { background: rgba(111, 155, 189, 0.3); }
.phero-card--3 { top: 220px; left: 30px; transform: rotate(-2deg); animation-delay: 2.4s; }
.phero-pulse {
  position: absolute;
  top: 60px;
  right: 30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,208,227,0.45), transparent 70%);
  filter: blur(8px);
  animation: phero-pulse 5s ease-in-out infinite;
}
@keyframes phero-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes phero-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Softer warm bg in patient hero */
.hero--paciente {
  background:
    radial-gradient(circle 600px at 80% 30%, rgba(184,208,227,0.25), transparent 60%),
    var(--paper);
  border-bottom: 1px solid var(--ink-line);
}

/* Tilcia warm block — magazine-editorial layout with photo */
.tilcia-warm {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 88px;
  align-items: center;
}
.tilcia-warm__portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tilcia-warm__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 30px 70px rgba(28,27,23,0.14),
    0 8px 24px rgba(28,27,23,0.08);
  border: 6px solid var(--bone);
  isolation: isolate;
}
.tilcia-warm__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle warm halo behind the photo */
.tilcia-warm__portrait::before {
  content: "";
  position: absolute;
  inset: -40px -40px -40px -40px;
  background: radial-gradient(circle at 50% 45%, rgba(184,208,227,0.32), transparent 60%);
  filter: blur(10px);
  z-index: -1;
}
.tilcia-warm__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}
.tilcia-warm__caption .kicker {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm); /* was 10px, +1 */
  letter-spacing: var(--tracking-kicker); /* was 0.22em */
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tilcia-warm__caption .years {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body);
  color: var(--ink-soft);
}

/* Tilcia h2 — Phase 2.6 hybrid migration 2026-05-27.
   El h2 ahora usa class="display-1" (per .display-1 default clamp 56-104).
   Este scoped override EXTIENDE el clamp para Tilcia hasta 140px max,
   preservando el brand-moment impact original (era 160px raw).
   - clamp 80-140 (era 80-160, -20px en máximo).
   - letter-spacing -0.04em (display geometric, era -0.04 mantenido).
   - line-height 0.9 (tight para display impact, era 0.9 mantenido).
   - margin 12/10 hand-tuned para rhythm con kicker+lede arriba/abajo.
   Documentado como excepción aprobada en DESIGN_SYSTEM.md §12. */
/* Tilcia h2 — Phase 2.6 Option A puro (2026-05-27 iteración 2):
   removidos los overrides de font-size, letter-spacing, line-height.
   Ahora usa la base .display-1 (clamp 56-104, --tracking-display-xl,
   --leading-display 0.95). Si visualmente queda débil vs el 140px
   anterior, fallback a Option C (uncomment block abajo). */
.tilcia-warm__story .display-1 {
  /* Solo margin rhythm con kicker+lede arriba/abajo. Resto inherited. */
  margin: var(--space-3) 0 10px;
}
.tilcia-warm__story .display-1 .t-period {
  color: var(--sky-deep);
}
/* OPTION C fallback (uncomment si Option A pierde demasiado impacto):
.tilcia-warm__story .display-1 {
  font-size: clamp(80px, 10vw, 140px);
  letter-spacing: -0.04em;
  line-height: 0.9;
} */

/* Paper chaos animation — adapted from pitch deck slide 02.
   Percentage-based positions so it scales with column width.
   Animations fire when .is-in is added by the reveal observer. */
.tilcia-warm__chaos {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 480px;
  margin-left: auto;
  pointer-events: none;
}
/* Paper-chaos: scroll-tied reveal.
   Each paper starts above the container, off-screen and rotated.
   JS adds .is-shown to each paper one by one as the user scrolls
   through the section. CSS transitions handle the smooth landing. */
.t-paper {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  height: calc(var(--h) * 1%);
  background: var(--bone);
  border: 1px solid var(--ink-line);
  box-shadow:
    0 12px 26px rgba(28,27,23,0.07),
    0 3px 8px rgba(28,27,23,0.04);
  padding: 10px 12px;
  overflow: hidden;
  border-radius: 2px;
  /* Resting state: papers stay above-left until shown */
  transform: translateY(-360px) rotate(calc((var(--rot) + 20) * 1deg));
  opacity: 0;
  transition:
    transform 0.95s cubic-bezier(0.22, 0.65, 0.28, 1),
    opacity 0.55s cubic-bezier(0.22, 0.65, 0.28, 1);
  will-change: transform, opacity;
}
.t-paper.is-shown {
  transform: translateY(0) rotate(calc(var(--rot) * 1deg));
  opacity: 1;
}

.t-stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  background: rgba(247, 245, 240, 0.94);
  border: 3px solid var(--red);
  color: var(--red);
  padding: 12px 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.012em;
  border-radius: 5px;
  box-shadow:
    0 10px 24px rgba(199, 61, 50, 0.16),
    0 3px 8px rgba(199, 61, 50, 0.10);
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0.4) rotate(28deg);
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.34, 1.4, 0.55, 1),
    opacity 0.5s ease-out;
  will-change: transform, opacity;
  transform-origin: center center;
}
.t-stamp.is-shown {
  transform: translate(-50%, -50%) scale(1) rotate(-6deg);
  opacity: 1;
}
.t-paper .t-line {
  height: 4px;
  background: rgba(28,27,23,0.10);
  border-radius: 1px;
  margin-bottom: 5px;
}
.t-paper .t-line.short { width: 70%; }
.t-paper .t-line.shorter { width: 45%; }
.t-paper .t-line.t-title {
  background: rgba(28,27,23,0.85);
  height: 6px;
  width: 60%;
  margin-bottom: 10px;
}
.t-paper .t-line.header {
  background: rgba(28,27,23,0.40);
  height: 4px;
  width: 35%;
  margin-top: 6px;
  margin-bottom: 3px;
}
.t-paper .t-meta {
  font-family: var(--font-mono);
  font-size: 7px;
  color: rgba(28,27,23,0.35);
  letter-spacing: 0.10em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.t-paper .t-img-block {
  height: 18px;
  background: rgba(28,27,23,0.06);
  border-radius: 2px;
  margin: 4px 0 5px;
}
.t-stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid var(--red);
  border-radius: 3px;
  opacity: 0.5;
  pointer-events: none;
}
.t-stamp-meta {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: 9px;
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  margin-top: 5px;
  opacity: 0.85;
  text-transform: uppercase;
}
.tilcia-warm__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 26ch;
  margin: 0 0 32px;
}
.tilcia-warm__sub em {
  color: var(--red-deep);
  font-style: italic;
}
.tilcia-warm__body {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid var(--ink-line);
  margin: 22px 0;
}
.tilcia-warm__body p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 48ch;
}
.tilcia-warm__body p:last-child { margin-bottom: 0; }
.tilcia-warm__body p strong {
  color: var(--ink);
  font-weight: var(--font-weight-semibold);
}
.tilcia-warm__body p em {
  font-style: italic;
  color: var(--red-deep);
}

/* Inline accent for negative facts — brand red, no bold weight.
   Brand rule: negative perceptions in red, positive in sky. */
.tilcia-warm .t-bad {
  color: var(--red-deep);
  font-weight: var(--font-weight-regular);
  font-style: normal;
}
.tilcia-warm .t-good {
  color: var(--sky-deep);
  font-style: italic;
}
.tilcia-warm__punch {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
  max-width: 26ch;
}
.tilcia-warm__punch em {
  color: var(--sky-deep);
  font-style: italic;
}
.tilcia-warm__close {
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 44ch;
  margin: 0;
}

/* Discovery rows */
.discovery {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.discovery__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-8);
  padding: 36px 0;
  border-top: 1px solid var(--ink-line);
  align-items: start;
}
.discovery__row:last-child {
  border-bottom: 1px solid var(--ink-line);
}
.discovery__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-kicker); /* was 0.18em */
  color: var(--sky-deep);
  padding-top: var(--space-2);
}
.discovery__row h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
  max-width: 22ch;
}
.discovery__row h3 em {
  font-style: italic;
  color: var(--sky-deep);
}
.discovery__row p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
}

/* Family quote */
.family-quote {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 0;
}
/* Reveal lento + dramático para esta sección — el usuario pidió un
   fade claramente gradual (no un "pop"). Override de la duración base
   (1.1s) a 2s + cubic-bezier más suave. Aplica a kicker, h2 y p. */
.family-quote .reveal {
  transition:
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Spans son inline → no aceptan transform translateY. Forzar
   inline-block para que el fade-up funcione en el kicker. */
.family-quote__kicker {
  display: inline-block;
}
/* Manifiesto pull-quote — dos líneas con fade secuencial + cambio
   de color tardío en las palabras clave (salvó / descubrir).
   Lenguaje cinematográfico igual al de .family-quote (2s + blur). */
.manifest-line {
  display: block;
}
.manifest-line.reveal {
  transition:
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Palabras destacadas: arrancan al color del texto (bone) y se
   "encienden" a sky-deep EN PARALELO con el fade de su línea
   (misma duración 2s + mismo delay que el fade). */
.manifest-ink-shift {
  color: var(--bone);
  transition: color 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.manifest-line.is-in .manifest-ink-shift {
  color: var(--sky-deep);
  transition-delay: var(--reveal-delay, 0s);
}
.family-quote h2 {
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px 0 28px;
}
.family-quote h2 em {
  font-style: italic;
  color: var(--sky-deep);
}
.family-quote p {
  font-size: var(--text-lede);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0 auto;
}

/* FAQ */
.faq {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.faq__item {
  background: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 28px 28px 26px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s;
}
.faq__item:hover {
  transform: translateY(-3px);
  border-color: rgba(28,27,23,0.18);
}
.faq__item h4 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.faq__item p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 860px) {
  .tilcia-warm { grid-template-columns: 1fr; gap: 32px; }
  .discovery__row { grid-template-columns: 1fr; gap: 8px; }
  .faq { grid-template-columns: 1fr; }
  .patient-hero-art { display: none; }
}