/* ─────────────────────────────────────────────────────────────────
   landing-hero-v2.css — Velandra hero modernization (2026-05-15)
   Linear/Stripe/Anthropic-grade overrides on top of landing.css.
   Cargado DESPUÉS de landing.css en index.html para que estos
   estilos ganen por cascade order (misma specificity).
   ───────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   Step 12 · 2026-05-17 · Paleta fría coherente · Linear/Vercel-grade
   Step 22 · 2026-05-22 · DARK MIGRATION · founder unseal (diferenciación
          vs Nabla/Abridge/Suki light; coherencia con producto dark).
   Step 23 · 2026-05-22 · CLEANUP DESIGN.md §4 — removido override hardcoded
          de tokens (var(--bg-page), var(--bg-surface)...). Ahora hereda de design-tokens.css
          bajo [data-theme='dark'] directamente. Single source of truth.
   ════════════════════════════════════════════════════════════════ */

/* ── NAV · wordmark refinado · Linear/Cursor pattern ─────────────── */
/* scoped a #main-nav (2026-05-28): el selector `nav` desnudo se filtraba a
   cualquier <nav> (rompió .chapter-megamenu con height/backdrop). Las 3 páginas
   que cargan este CSS usan <nav id="main-nav">. */
#main-nav {
  height: 68px;
  transition: box-shadow var(--transition), background var(--transition);
  /* Step 11 · 2026-05-17 · Override local del nav blur (sin saturate)
     --glass-blur shared token tiene saturate(160%) — too "Apple marketing"
     Linear nav usa blur puro · saturate sobra · L-07 override targeted */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
nav.scrolled {
  box-shadow: 0 1px 0 var(--border);
}
.logo {
  gap: 8px;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.025em;
  font-family: 'Inter Tight', 'Inter', sans-serif;
}
.logo svg {
  color: var(--accent);
}
.logo .wm-mid {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
/* Step 11 · 2026-05-17 · Wordmark Velandra nav · L-07 compliance
   Mueve inline-style del <span> en index.html a clase CSS dedicada.
   Camino A 2026-05-20: IBM Plex Sans eliminado → Inter 500 canónico (CLAUDE.md L88) */
.logo-wordmark {
  font-family: 'Inter', 'system-ui', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--text-primary);
}
/* Step 21 · 2026-05-17 · Nav separator · Linear pattern
   Separador vertical entre nav-links centrales y nav-actions (right side)
   Matches Linear: Product Resources... | Docs Open app */
body.landing-body nav .nav-actions {
  position: relative;
  padding-left: 24px;
}
body.landing-body nav .nav-actions::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--border);
}
/* Trust strip separators · removidos de inline · QA-10 compliant */
.trust-dot {
  opacity: 0.3;
  margin: 0 12px;
}

/* ── HERO · magnetism con mesh gradient + grain texture ──────────── */
/* Step 1 · §12 spacing canon (no φ random)
   Step 9 · 2026-05-17 · Linear-grade whitespace (160px top, 120px bottom)
   Step 10 · 2026-05-17 · Vertical Linear pattern (text top centrado + mockup bottom full-width)
   Linear hero tiene ~200px de aire antes del headline. Velandra a 160px. */
.hero {
  position: relative;
  /* Commit 5 · 2026-05-22 · padding lateral 14vw→6vw para que quepan 2-col side-by-side
     (Linear-mirror). H1 LEFT col + meta-row RIGHT col necesitan ~1200px útiles. */
  padding: 128px clamp(20px, 6vw, 80px) 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  isolation: isolate;
}
/* Step 16 · Vignette sutil · profundidad Linear-grade en light mode
   Radial gradient muy sutil en bottom-edges · NO el blob morado anterior
   Da la sensación de "página viva" sin saturar · 100% sealed Light */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* Dark migration · subtle accent glow top-left + nothing bottom (let dark drop) */
  background:
    radial-gradient(ellipse 60% 35% at 8% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 92% 15%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 70%);
}
/* Commit 5 · 2026-05-22 · Linear-mirror 2-col row layout
   ANTES: column con H1 arriba + meta-row debajo (full width)
   AHORA: row 2-col · H1 LEFT (flex grow) · meta-row RIGHT (stack vertical)
   align-items: flex-end alinea el bottom del H1 con el bottom del right-col
   matching la foto Linear donde el right-col cierra en línea con la 2da línea del H1 */
.hero-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.mockup-wrap {
  width: 100%;
  max-width: 100%;
  /* Step 13 · gap sub→mockup 64→32 · mockup empieza casi inmediato después del sub
     Linear pattern · text-content compacto · mockup ocupa mayoría del viewport */
  margin: 32px 0 0;
  isolation: isolate; /* contiene el glow detrás del mockup */
}
/* Backdrop ambient detrás del mockup (2026-05-28) · el "lift" de Linear en dark.
   Glow accent suave centrado · reusa el mismo var(--accent) que .hero::before.
   Gradiente decorativo permitido en hero (DESIGN.md §7). .mockup-wrap ya es position
   relative vía `.hero > *`. */
.mockup-wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -8%;            /* sangra por encima del borde superior → halo "crown" Linear */
  width: 100%;         /* más ancho que el frame → ambient visible a los lados */
  height: 60%;
  transform: translateX(-50%);
  pointer-events: none;
  /* Dos capas (no un disco plano saturado): core más definido + spread suave =
     halo dimensional, no "blob morado" (anti-pattern sellado Step 11).
     color-mix con var(--accent) en vez de literal → cumple DESIGN.md §4
     y el diff-gate de design-tokens. Render idéntico al accent con alpha. */
  background:
    radial-gradient(ellipse 46% 62% at 50% 22%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 82% 70% at 50% 28%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 74%);
  filter: blur(44px);
}
/* Step 16 · 2026-05-17 · Subtle separator entre hero y siguiente sección
   Linear-grade · 1px gradient horizontal fade · da rhythm sin border duro
   ::after en .hero para no agregar elemento extra · z-index dentro del isolate */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 30%,
    rgba(255, 255, 255, 0.10) 70%,
    transparent 100%);
}
/* Step 11 · 2026-05-17 · ELIMINADO mesh gradient (3 blobs indigo+teal) + grain texture
   Razón: blobs morados saturados = cookie-cutter SaaS · Linear es fondo casi blanco plano.
   El hero ya no tiene ::before ni ::after · background hereda --bg-surface limpio. */
.hero > * {
  position: relative;
  z-index: var(--z-sticky);
}

/* ── HERO KICKER · etiqueta clínica sobre el headline (legacy) ────── */
.hero-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 700;
}
/* Step 11 · 2026-05-17 · Hero badge sutil · Linear "What's new" pattern
   Reemplaza el eyebrow uppercase morado largo · pill discreto neutro
   con dot accent + arrow · clickable a #workflow */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  /* Step 12 · badge margin-bottom 24→20 (apretar rhythm) */
  margin-bottom: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.hero-badge:hover {
  background: var(--bg-elevated, rgba(255,255,255,0.05));
  border-color: var(--border-strong, rgba(255,255,255,0.14));
  color: var(--text-primary);
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.hero-badge svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform .2s, opacity .2s;
}
.hero-badge:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

/* ── H1 Inter Tight · Linear-grade typography ───────────────────────
   STEP 12 · 2026-05-17 · Linear/Vercel canon
   ANTES: weight 600 · tracking -0.028em · max-width 12ch (forzaba wrap raro)
   AHORA: weight 500 (Linear-grade liviano) · tracking -0.04em (apretado canon)
          · font-size clamp(2.5rem, 4.5vw, 4.5rem) = 40-72px responsivo
          · max-width fluye natural · line-height 1.05 compacto
   Razón: 600 era chunky publicitario · Linear usa 500 (Inter variable ~510). */
h1 {
  /* Step 14 · 2026-05-17 · Letras respirando · Linear actual ref
     ANTES: Inter Tight 500 + tracking -0.04em + ss01/ss02/cv11
            = letras chocando ("clínico", "consultas." pegadas)
            + Inter Tight NO tiene weight 500 cargado (solo 600-800) → fallback raro
     AHORA: Inter regular 600 + tracking -0.022em + line-height 1.1
            sin stylistic alternates · glifos definidos · respiración Linear */
  /* Commit 8 · 2026-05-22 · Fix B6 · Inter → Inter Tight per DESIGN.md §5
     ANTES: 'Inter, system-ui, ...' (era fallback de Step 14 porque weight 500
            no estaba cargado en Inter Tight)
     AHORA: 'Inter Tight, Inter, ...' (weight 600 SÍ está cargado en Inter Tight
            via <link> Google Fonts wght@600;700;800)
     CLAUDE.md identity: "Tipografía hero · Inter Tight 600/700/800 — solo hero >22px" */
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  /* Commit 6 REVERT (2026-05-22): bump 70px causaba 3 líneas con copy ES.
     Vuelvo a clamp(2rem, 4vw, 4rem) = 32-64px · @ vp1400 = 56px · 2 líneas */
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-feature-settings: normal;
  margin: 0 0 32px 0;
  text-wrap: balance;
  max-width: 22ch;
  color: var(--text-primary);
}
/* Commit 5 · 2026-05-22 · hero-meta-row es ahora el RIGHT col del 2-col layout
   Stack vertical: BADGE arriba + SUB abajo (Linear pattern)
   max-width 380px da la sensación de "columna derecha estrecha" que tiene Linear */
.hero-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 0 1 380px;
  max-width: 380px;
  min-width: 280px;
}
.hero-meta-row .hero-sub {
  margin: 0;
  flex: none;
}
.hero-meta-row .hero-badge {
  flex-shrink: 0;
  margin: 0;
}
.hero-sub {
  /* Step 19 · 17px · ratio H1:Sub 5.6:1 Linear ref */
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  max-width: 580px;
  margin: 0;
  color: var(--text-secondary);
}

/* ── CTA row · primary pill + secondary link + tertiary tour link ─ */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;  /* Step 10 · centrar CTAs en layout vertical */
}
.hero-trust {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-top: 1.25rem;
}
.landing-tertiary-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition);
}
.landing-tertiary-link:hover {
  color: var(--accent);
}
.landing-tertiary-link svg {
  flex-shrink: 0;
  color: currentColor;
}

/* ── HERO STRIP · stats inline después del CTA · Linear pattern ──── */
.hero-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  /* Step 10 · centrar en layout vertical · Linear pattern */
  max-width: 640px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;  /* numbers + labels flush-left dentro de cada strip-item */
}
.hero-strip .strip-item {
  display: flex;
  flex-direction: column;
  padding-right: 1.5rem;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.hero-strip .strip-item:last-child {
  border-right: 0;
  padding-right: 0;
}
.hero-strip .strip-item + .strip-item {
  padding-left: 1.5rem;
}
.hero-strip .strip-num {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
  white-space: nowrap;
}
.hero-strip .strip-num span {
  color: var(--accent);
}
.hero-strip .strip-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .hero-strip {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 1rem;
    margin-top: 1.25rem;
  }
  .hero-strip .strip-item {
    border-right: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
  }
  .hero-strip .strip-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .hero-strip .strip-item + .strip-item {
    padding-left: 0;
  }
}

/* ── SOCIAL PROOF · refinado de "card chunky" a "pill discreto" ──── */
.hero-social-proof {
  gap: 10px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
}
.hero-social-proof-dot {
  width: 7px;
  height: 7px;
}
.hero-social-proof-copy {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}
.hero-social-proof-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.hero-social-proof-text {
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
}
.hero-social-proof-text strong {
  font-size: inherit;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════════
   Step 17 · 2026-05-17 · Section restraint · consistencia con hero
   .sec-tag (eyebrow) y .sec-h2 (headline) overridden globalmente para
   eliminar el patrón "uppercase morado grito + Inter Tight 800 chunky"
   que aparecía en 7 secciones · matchea la restraint Linear-grade del hero
   ════════════════════════════════════════════════════════════════ */
/* Section eyebrow · de uppercase morado a label sutil neutral
   ANTES: 0.75rem · weight 700 · tracking .12em · UPPERCASE · color accent (morado)
   AHORA: 0.81rem (13px) · weight 500 · tracking normal · case original · color secondary
   background: transparent explicit (override de algún highlight inherited) */
body.landing-body .sec-tag {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  /* !important para override de cascade desconocida que aplica bg --bg-elevated */
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 20px;
  text-transform: capitalize;
  text-decoration: none;
  border: 0;
}

/* Step 17.5 · CTA dark section override · texto blanco legible sobre #140539
   El CTA section tiene bg dark purple por diseño (única sección dark del landing)
   Necesita colors blancos para eyebrow + sub que sino quedan ilegibles sobre dark
   !important para override de cascade desconocida que aplica text-primary global */
body.landing-body #cta .sec-tag {
  color: rgba(255, 255, 255, 0.7) !important;
}
body.landing-body #cta .sec-h2 {
  color: var(--text-on-accent) !important;
}
body.landing-body #cta p:not(.cta-note):not(.cta-clinic-note),
body.landing-body #cta .sec-sub {
  color: rgba(255, 255, 255, 0.7) !important;
}
/* Section H2 · alinear tipografía con h1 hero (Inter 600 -0.022em 1.1)
   ANTES: Inter Tight 800 · tracking -0.035em · line-height 1.08 (chunky publicitario)
   AHORA: Inter regular 600 · tracking -0.022em · line-height 1.1 (Linear-grade)
   font-feature-settings: normal · sin stylistic alternates · glifos limpios */
body.landing-body .sec-h2 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-feature-settings: normal;
  margin-bottom: 24px;
  color: var(--text-primary);
}
/* Section sub · text-secondary cool grey (no warm) */
body.landing-body .sec-sub,
body.landing-body section p:not(.hero-sub):not(.foot-tagline) {
  color: var(--text-secondary);
}

/* ── BETA SECTION · QA-10 compliance fixes for legacy inline styles ──── */
.sec-h2.sec-h2--narrow {
  max-width: 560px;
  margin: 0 auto 1rem;
}
.beta-adopter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  max-width: 860px;
  margin: 0 auto;
}
.cta-clinic-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  opacity: 0.6;
}
.cta-clinic-link {
  color: var(--text-primary);
  text-underline-offset: 3px;
}
.foot-whatsapp-label {
  font-size: 0.875rem;
  font-weight: 600;
}
.foot-tagline {
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────────
   PRODUCT SHOWCASE · iframe del mockup real DS-02 con tilt 3D
   Linear/Stripe/Anthropic pattern · el producto SE MUESTRA real,
   no se reproduce en HTML/CSS aparte.
   ───────────────────────────────────────────────────────────────── */
.product-showcase {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  /* Step 16 · 2026-05-17 · Border-radius 14→18px + shadow dramática
     ANTES: shadow blueish soft · radius pequeño
     AHORA: shadow neutral más profunda · flota sobre light bg Linear-grade
            radius 18px matches Linear product image rounded */
  border-radius: 18px;
  overflow: hidden;
  /* Dark-mode elevation fix (2026-05-28) · el landing migró a dark pero la
     shadow seguía calibrada para light (negro sobre negro = invisible,
     comentario antiguo: "flota sobre light bg"). Linear-grade dark float =
     light ring (separa el borde de la página) + drop oscuro amplio para grounding +
     bevel superior sutil (antes era artefacto light). Excepción hero autorizada. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 32px 64px -24px rgba(0, 0, 0, 0.65),
    0 12px 28px -18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  width: 100%;
  /* Step 20 · OPCIÓN B (autorizada) · mockup max-width 1280 → 1100 (más restraint) */
  max-width: 1100px;
  aspect-ratio: 16 / 10;
  margin: 0 auto;
}
/* Chrome de navegador falso (.product-showcase__chrome/__dot/__url) ELIMINADO
   2026-05-28: Linear muestra el shot full-bleed sin marco de navegador. Quita
   de paso 3 colores hardcoded de los semáforos (eran macOS rojo/amarillo/verde). */
.product-showcase__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-page);
  pointer-events: none;       /* iframe es decorativo · no quita scroll del page */
}
/* Mobile · disable tilt 3D y achica aspect ratio */
@media (max-width: 900px) {
  .product-showcase {
    transform: none;
    aspect-ratio: 4 / 3;
    max-width: 100%;
  }
  .product-showcase:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-showcase {
    transform: none;
    transition: none;
  }
  .product-showcase:hover {
    transform: none;
  }
}

/* ── SOAP DEMO ANIMATION STATES · QA-17 compliant (no inline styles) ── */
.soap-anim-init .ai-card,
.soap-anim-init .extract-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.soap-anim-init .extract-row {
  transform: none;
}
.soap-anim-running .ai-card[data-soap-shown="true"],
.soap-anim-running .extract-row[data-soap-shown="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────
   PRODUCT SHOWCASE · inline HTML mockup (replaces hero-product.png)
   Camino A 2026-05-26 · BRAND-VELANDRA-AURORA-EXTERMINATION-01
   Reason: PNG anterior tenía "Aurora" baked in. HTML/CSS approach es
   themable, no goes-stale, fits comment del index.html L123-126.
   Scope: dark mode hardcoded (consultation siempre dark per CLAUDE.md
   ADR-22). Sin gradientes, sin box-shadow en cards (DESIGN.md §7).
   ───────────────────────────────────────────────────────────────── */
.ps-stage {
  width: 100%;
  height: 100%;
  background: var(--bg-surface);
  color: var(--text-primary);
  display: grid;
  grid-template-rows: 56px 1fr;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow: hidden;
}
.ps-stage__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 12px;
}
.ps-stage__mark {
  flex-shrink: 0;
}
.ps-stage__crumb {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ps-stage__chip {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-stage__patient {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.ps-stage__patient strong {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}
.ps-stage__patient em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: 11px;
}
.ps-stage__spacer {
  flex: 1;
}
.ps-stage__vitals {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  font-size: 11px;
}
.ps-stage__vitals em {
  font-style: normal;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.ps-stage__vitals b {
  font-weight: 500;
  color: var(--text-primary);
  margin-right: 6px;
}
.ps-stage__vitals b:last-child {
  margin-right: 0;
}
.ps-stage__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.ps-stage__livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ps-stage__body {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.ps-stage__clinical,
.ps-stage__insights {
  background: var(--bg-surface);
  padding: 24px 24px;
  overflow: hidden;
}
.ps-stage__h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 20px 0 8px;
  font-weight: 500;
}
.ps-stage__h:first-child {
  margin-top: 0;
}
.ps-stage__p {
  margin: 0;
  color: #C7CAD1;
  font-size: 12px;
  line-height: 1.55;
}
.ps-stage__p strong {
  color: var(--text-primary);
  font-weight: 500;
}
.ps-stage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-stage__list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 6px;
  font-size: 12px;
}
.ps-stage__list--meds li {
  flex-wrap: wrap;
}
.ps-stage__list li strong {
  color: var(--text-primary);
  font-weight: 500;
  flex-shrink: 0;
}
.ps-stage__list li span {
  color: var(--text-secondary);
  font-size: 11px;
}
.ps-stage__list li em {
  margin-left: auto;
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #C7CAD1;
}
.ps-stage__pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-radius: 4px;
  flex-shrink: 0;
}
.ps-stage__alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 16px 16px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 8px;
  color: #C7CAD1;
  align-items: start;
  margin-bottom: 16px;
}
.ps-stage__alert svg {
  color: var(--accent);
  margin-top: 4px;
}
.ps-stage__alert strong {
  display: block;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 4px;
}
.ps-stage__alert p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.ps-stage__alertcta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  align-self: center;
  white-space: nowrap;
}
.ps-stage__card {
  padding: 16px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  margin-bottom: 12px;
}
.ps-stage__card--accent {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.ps-stage__cardlabel {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ps-stage__card strong {
  display: block;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 4px;
}
.ps-stage__card small {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.55;
}
.ps-stage__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: var(--text-secondary);
}
.ps-stage__row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.ps-stage__row b {
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text-primary);
}

/* Responsive · mobile compact (mockup smaller) */
@media (max-width: 900px) {
  .ps-stage {
    font-size: 11px;
  }
  .ps-stage__body {
    grid-template-columns: 1fr;
  }
  .ps-stage__clinical {
    display: none; /* solo insights en mobile */
  }
  .ps-stage__vitals,
  .ps-stage__crumb {
    display: none;
  }
  .ps-stage__topbar {
    gap: 6px;
    padding: 0 10px;
  }
  .ps-stage__patient em {
    display: none;
  }
}
@media (max-width: 560px) {
  .ps-stage__live {
    font-size: 11px;
  }
  .ps-stage__chip {
    display: none;
  }
}