/* ═══════════════════════════════════════════════════════════════════════════
   ClinicVia — brand.css
   Sistema compartido de todas las páginas: tokens, tipografía, logo,
   componentes, temas light/dark, responsive.
   Fuente de verdad de marca: _config/marca-clinicvia.md (canon 2026-07-21).
   Neutros heredados de Alarife (dashboard/tokens.css). Eje semántico:
   celeste = la vía / el paciente · violeta = la máquina · terracotta = el
   traspaso humano. El violeta NUNCA colorea una acción del profesional.
   Nota de accesibilidad: los acentos como COLOR DE TEXTO solo se usan donde
   pasan AA (verificado por eje); en texto chico la semántica va por bordes,
   reglas y puntos, y el texto queda en tinta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens fijos (no dependen de tema) ─────────────────────────────── */
:root {
  --basalt: #15120e;
  --porcelain: #f3eee4;
  --bone: #f1e9d8;
  --umber: #211c16;
  --sand: #b9a47e;

  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --content-max: 1060px;
  --margin-side: 24px;
  --section-pad: clamp(72px, 10vw, 120px);
}

/* ─── Tema claro (default) ───────────────────────────────────────────── */
:root {
  --canvas: #F4F4F7;                /* blanco-gris frío (Apple), no beige */
  --elevada: #FFFFFF;               /* superficie blanca pura */
  --hairline: rgba(28, 28, 36, .10);
  --ink: #1C1C22;                   /* casi negro neutro-frío */
  --ink-soft: rgba(28, 28, 36, .64);
  --ink-mid: rgba(28, 28, 36, .46);
  --ink-faint: rgba(28, 28, 36, .11);

  /* Paleta ANCLADA AL LOGO (assets/icono.svg) — 2 ternas claro/oscuro.
     Fuente: los 3 trazos del ícono (celeste/violeta/terracotta). El traspaso
     va naranja pleno (#D9722E claro / #C8763A oscuro), confirmado por Arthur. */
  --acc-via: #0F7FAF;
  --acc-maquina: #6E3A9E;
  --acc-traspaso: #D9722E;
  /* lila CTA: ajuste al eje semántico, a confirmar con Lucky.
     El CTA es acción del humano y el violeta saturado (--acc-maquina) es de
     la máquina, que NUNCA colorea una acción del humano — por eso el botón
     usa un lila desaturado propio, ni terracotta ni violeta-máquina. */
  --acc-cta: #766A99;
  --cta-ink: #ffffff;              /* blanco sobre lila desaturado: ~4.9:1 (AA) */
  --tint-cta: rgba(118, 106, 153, .12);

  --tint-via: rgba(15, 127, 175, .08);
  --tint-maquina: rgba(110, 58, 158, .07);
  --tint-traspaso: rgba(217, 114, 46, .10);
  /* ── Sistema de profundidad (spec §1) — la profundidad SE CONSTRUYE ── */
  --surface-sunken: #ECEDF1;        /* pozos: feed, grupos del tablero, inputs */
  --elevada-2: #FFFFFF;             /* card flotante: tablero hero, vidrio prueba */
  --shadow-e1: 0 1px 2px rgba(20,22,44,.05), 0 3px 8px -2px rgba(20,22,44,.06);
  --shadow-e2: 0 2px 4px rgba(20,22,44,.05), 0 10px 24px -6px rgba(20,22,44,.12);
  --shadow-e3: 0 4px 10px rgba(20,22,44,.06), 0 24px 56px -16px rgba(20,22,44,.20);
  --shadow-card: var(--shadow-e3);  /* alias: no romper referencias viejas */
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.70), inset 0 0 0 1px rgba(255,255,255,.25);
  /* Acentos SATURADOS — SOLO el imán (fills grandes, números, reglas, washes).
     Nunca texto < 18px: ahí manda la tinta AA. Spec §2.1. */
  --acc-via-sat: #1F8FC4;           /* el celeste del logo, vibrante para glyphs/trazos */
  --acc-maquina-sat: #6E52C8;       /* el violeta del logo */
  --acc-traspaso-sat: #D9722E;      /* naranja pleno (confirmado Arthur), NO mostaza */
}

/* ─── Tema oscuro ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #141519;                /* gris-oscuro neutro-frío, no basalt cálido */
    --elevada: #1E1F26;
    --hairline: rgba(240, 241, 248, .10);
    --ink: #F1F2F6;
    --ink-soft: rgba(240, 241, 248, .66);
    --ink-mid: rgba(240, 241, 248, .44);
    --ink-faint: rgba(240, 241, 248, .13);

    --acc-via: #1F8FC4;           /* logo, terna oscura */
    --acc-maquina: #6E52C8;       /* logo */
    --acc-traspaso: #C8763A;      /* logo, naranja oscuro */
    --acc-cta: #B5ABD6;            /* lila CTA — ver nota del tema claro */
    --cta-ink: #15120e;            /* basalt sobre lila claro: ~8.7:1 (AA) */
    --tint-cta: rgba(181, 171, 214, .14);

    --tint-via: rgba(31, 143, 196, .14);
    --tint-maquina: rgba(110, 82, 200, .16);
    --tint-traspaso: rgba(200, 118, 58, .14);
    --surface-sunken: #101116;
    --elevada-2: #24262F;
    --shadow-e1: 0 1px 2px rgba(0,0,0,.30), 0 3px 8px -2px rgba(0,0,0,.35);
    --shadow-e2: 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -6px rgba(0,0,0,.45);
    --shadow-e3: 0 6px 16px rgba(0,0,0,.40), 0 28px 60px -16px rgba(0,0,0,.55);
    --shadow-card: var(--shadow-e3);
    --glass-rim: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);
    --acc-via-sat: #4FB3E4;       /* logo aclarado para pop sobre fondo oscuro */
    --acc-maquina-sat: #9E86E0;
    --acc-traspaso-sat: #E0904F;  /* naranja pleno, aclarado para oscuro */
  }
}

/* El toggle manual pisa la preferencia del sistema, en las dos direcciones */
:root[data-theme="light"] {
  --canvas: #F4F4F7; --elevada: #FFFFFF;
  --hairline: rgba(28, 28, 36, .10);
  --ink: #1C1C22; --ink-soft: rgba(28, 28, 36, .64);
  --ink-mid: rgba(28, 28, 36, .46); --ink-faint: rgba(28, 28, 36, .11);
  --acc-via: #0F7FAF; --acc-maquina: #6E3A9E; --acc-traspaso: #D9722E;
  --acc-cta: #766A99; --cta-ink: #ffffff;   /* lila CTA — ver nota arriba */
  --tint-cta: rgba(118, 106, 153, .12);
  --tint-via: rgba(15, 127, 175, .08);
  --tint-maquina: rgba(110, 58, 158, .07);
  --tint-traspaso: rgba(217, 114, 46, .10);
  --surface-sunken: #ECEDF1; --elevada-2: #FFFFFF;
  --shadow-e1: 0 1px 2px rgba(20,22,44,.05), 0 3px 8px -2px rgba(20,22,44,.06);
  --shadow-e2: 0 2px 4px rgba(20,22,44,.05), 0 10px 24px -6px rgba(20,22,44,.12);
  --shadow-e3: 0 4px 10px rgba(20,22,44,.06), 0 24px 56px -16px rgba(20,22,44,.20);
  --shadow-card: var(--shadow-e3);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.70), inset 0 0 0 1px rgba(255,255,255,.25);
  --acc-via-sat: #1F8FC4; --acc-maquina-sat: #6E52C8; --acc-traspaso-sat: #D9722E;
}
:root[data-theme="dark"] {
  --canvas: #141519; --elevada: #1E1F26;
  --hairline: rgba(240, 241, 248, .10);
  --ink: #F1F2F6; --ink-soft: rgba(240, 241, 248, .66);
  --ink-mid: rgba(240, 241, 248, .44); --ink-faint: rgba(240, 241, 248, .13);
  --acc-via: #1F8FC4; --acc-maquina: #6E52C8; --acc-traspaso: #C8763A;
  --acc-cta: #B5ABD6; --cta-ink: #15120e;   /* lila CTA — ver nota arriba */
  --tint-cta: rgba(181, 171, 214, .14);
  --tint-via: rgba(31, 143, 196, .14);
  --tint-maquina: rgba(110, 82, 200, .16);
  --tint-traspaso: rgba(200, 118, 58, .14);
  --surface-sunken: #101116; --elevada-2: #24262F;
  --shadow-e1: 0 1px 2px rgba(0,0,0,.30), 0 3px 8px -2px rgba(0,0,0,.35);
  --shadow-e2: 0 2px 6px rgba(0,0,0,.35), 0 12px 28px -6px rgba(0,0,0,.45);
  --shadow-e3: 0 6px 16px rgba(0,0,0,.40), 0 28px 60px -16px rgba(0,0,0,.55);
  --shadow-card: var(--shadow-e3);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);
  --acc-via-sat: #4FB3E4; --acc-maquina-sat: #9E86E0; --acc-traspaso-sat: #E0904F;
}

/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--acc-via);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--tint-via); }

/* ─── Realce de keywords — énfasis tipado por eje ─────────────────────────
   Cada forma = un tipo de concepto (refuerza la marca, no decora):
   marcador = outcome/dream · negrita = mecanismo/prueba · subrayado = dolor.
   Ref (NO canon): el sistema .hl-* de AGENCIA (26-sports). Adaptado al eje
   ClinicVia (celeste/violeta/naranja). El realce se gana el lugar. */
/* Highlight = banda PARCIAL transparente, fiel al color del logo. Más baja que la
   letra y corrida hacia arriba (banda 34–74% del alto, no full-height): no tapa el
   glifo ni encima líneas apiladas (fix del h1 con line-height 1.1). Tres colores del
   eje ClinicVia (celeste/violeta/naranja) con la MISMA técnica del naranja que Arthur
   aprobó (ss2). Opacidad 34% = el valor del naranja original. */
.hl, .hl-maq, .hl-nar, .hl-line {
  padding: 0 .06em;
  font-weight: 500;
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl      { background-image: linear-gradient(transparent 44%, color-mix(in srgb, var(--acc-via) 32%, transparent) 44%, color-mix(in srgb, var(--acc-via) 32%, transparent) 76%, transparent 76%); }       /* celeste · la vía */
.hl-maq  { background-image: linear-gradient(transparent 44%, color-mix(in srgb, var(--acc-maquina) 32%, transparent) 44%, color-mix(in srgb, var(--acc-maquina) 32%, transparent) 76%, transparent 76%); } /* violeta · la máquina */
.hl-nar,
.hl-line { background-image: linear-gradient(transparent 44%, color-mix(in srgb, var(--acc-traspaso) 32%, transparent) 44%, color-mix(in srgb, var(--acc-traspaso) 32%, transparent) 76%, transparent 76%); } /* naranja · el traspaso */
/* mecanismo/prueba: negrita en tinta dentro del copy (no toca el logo ni el endoso) */
.lead strong, .lamina p strong, .costo-cierre strong,
.dif-item p strong, .mec-edit p strong, .nota-cierre strong { font-weight: 600; color: var(--ink); }
/* sin transparencias: el realce cae a subrayado, sin perder el énfasis ni el contraste */
@media (prefers-reduced-transparency: reduce) {
  .hl, .hl-maq, .hl-nar { background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
  .hl     { text-decoration-color: var(--acc-via); }
  .hl-maq { text-decoration-color: var(--acc-maquina); }
  .hl-nar { text-decoration-color: var(--acc-traspaso); }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--elevada);
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus-visible { left: 12px; }

/* ─── Tipografía ─────────────────────────────────────────────────────── */
h1 {
  font-weight: 600;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: 24px;
  max-width: 22ch;
  text-wrap: balance;
}

h2 {
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin-bottom: 20px;
  max-width: 26ch;
  text-wrap: balance;
}

h3 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

p {
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 62ch;
}

p.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 54ch;
  margin-bottom: 28px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 18px;
}

.dato {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Link de texto: tinta + subrayado celeste (la vía). El texto nunca queda
   por debajo de AA; el celeste carga la semántica sin cargar la legibilidad. */
.link-via {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--acc-via);
  padding-bottom: 1px;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.link-via:hover { color: var(--acc-via); }

.link-arrow {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-arrow .arrow { transition: transform .3s var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ─── Logo (canon: ClinicV SemiBold recto + ia Regular cursiva, monocromo) ── */
.logo {
  font-family: var(--sans);
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo-c { font-weight: 600; font-style: normal; }
.logo-ia { font-weight: 400; font-style: italic; letter-spacing: 0; }

.logo-hero { font-size: clamp(26px, 3.4vw, 34px); display: inline-block; margin-bottom: 22px; }

/* Nav: el ícono de la vía dentro del círculo (medallón), junto al wordmark */
.logo-nav { display: inline-flex; align-items: center; gap: 10px; }
.logo-medallon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-medallon img { width: 100%; height: 100%; }

/* ─── Botones ────────────────────────────────────────────────────────── */
/* lila CTA: ajuste al eje semántico, a confirmar con Lucky */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--acc-cta);
  color: var(--cta-ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 14px 26px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .25s var(--ease-out);
}
.btn-wa:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--tint-cta);
}
.btn-wa:active { transform: translateY(0); }

.btn-sm { font-size: 14px; padding: 9px 16px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.btn-ghost:hover { border-color: var(--ink-mid); background: var(--elevada); }

/* ─── Nav ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--margin-side);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--acc-via);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.theme-toggle {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.theme-toggle:hover { border-color: var(--ink-mid); color: var(--ink); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 10px 8px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
  padding: 12px var(--margin-side) 20px;
}
.nav-mobile a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}
.nav-mobile a[aria-current="page"] { color: var(--acc-via); }
.nav-mobile .btn-wa {
  display: inline-flex;
  margin-top: 18px;
  border-bottom: none;
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; margin-left: auto; }
  .nav-actions { margin-left: 0; }
  .nav-actions .btn-wa { display: none; }
  .nav-mobile.open { display: block; }
}

/* ─── Lámina (contenedor de sección, esqueleto heredado de alarife-web) ── */
.lamina {
  position: relative;
  padding: var(--section-pad) var(--margin-side);
  scroll-margin-top: 80px;
  overflow-x: clip;   /* los washes decorativos (glass-wash::before, mesh bleed) no desbordan el viewport; clip no rompe sticky ni scroll-timeline */
}
.lamina + .lamina { padding-top: 0; }

.lamina-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}

.lamina-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-faint);
  position: relative;
}
.lamina-header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 3px;
  border-radius: 0 0 2px 2px;
  /* el imán cromático de la lámina — un (1) acento saturado por sección (spec §2.3).
     Cada #id define --iman; el default es celeste-sat (la firma de la vía). */
  background: var(--iman, var(--acc-via-sat));
}
.lamina-header .eyebrow { margin-bottom: 0; }
.lamina-header .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-left: auto;
}

@media (max-width: 700px) {
  .lamina-header { flex-direction: column; gap: 6px; }
  .lamina-header .meta { margin-left: 0; }
}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(56px, 8vw, 96px); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 30px 0 26px;
}

.hero-endoso {
  font-size: 14px;
  color: var(--ink-mid);
  margin-bottom: 0;
}
.hero-endoso strong { font-weight: 600; color: var(--ink-soft); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 480px; }
}

/* ─── Motivo "vía" (firma: los 3 canales del ícono, estirados) ───────── */
.via-motif {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin: clamp(48px, 7vw, 84px) auto 0;
  opacity: .85;
}
/* la firma de la vía: líneas grandes decorativas → van con los -sat (vibrantes),
   NO con la tinta apagada. El traspaso naranja pleno (#D9722E) mata el marrón mostaza. */
.via-motif .p-via { stroke: var(--acc-via-sat); }
.via-motif .p-maquina { stroke: var(--acc-maquina-sat); }
.via-motif .p-traspaso { stroke: var(--acc-traspaso-sat); }
.via-motif .dot { fill: var(--acc-traspaso-sat); }

.js .via-motif path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .via-motif .dot { opacity: 0; }
.js .via-motif.is-in path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.js .via-motif.is-in .p-maquina { transition-delay: .12s; }
.js .via-motif.is-in .p-traspaso { transition-delay: .24s; }
.js .via-motif.is-in .dot {
  opacity: 1;
  transition: opacity .5s var(--ease-out) 1.15s;
}

/* ─── Chat de muestra (la prueba en miniatura, sobria) ───────────────── */
.chat-demo {
  background: var(--elevada);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.chat-head .chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc-via);
  flex-shrink: 0;
}
.chat-head .chat-clock { margin-left: auto; color: var(--ink-mid); }

.chat-body {
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.msg .msg-time {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mid);
  margin-top: 5px;
}
.msg.in {
  align-self: flex-start;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 4px;
}
.msg.out {
  align-self: flex-end;
  background: var(--tint-maquina);
  border: 1px solid transparent;
  border-bottom-right-radius: 4px;
}
.msg.out .msg-tag {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 4px;
}

.chat-slots {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.slot {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.slot.on { border-color: var(--acc-traspaso); color: var(--ink); }

.chat-event {
  align-self: stretch;
  max-width: none;
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  /* el momento-outcome: el turno confirmándose. Terracotta-sat (no el tint
     lavado) para que en CLARO lea arcilla quemada, no beige desteñido. */
  background: color-mix(in srgb, var(--acc-traspaso-sat) 13%, var(--elevada));
  border-left: 3px solid var(--acc-traspaso-sat);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.chat-demo figcaption {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mid);
}

/* mensajes entran escalonados cuando la card aparece */
.js .chat-body > * { opacity: 0; transform: translateY(8px); }
.js .chat-demo.is-in .chat-body > * {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js .chat-demo.is-in .chat-body > :nth-child(2) { transition-delay: .35s; }
.js .chat-demo.is-in .chat-body > :nth-child(3) { transition-delay: .7s; }
.js .chat-demo.is-in .chat-body > :nth-child(4) { transition-delay: 1.05s; }
.js .chat-demo.is-in .chat-body > :nth-child(5) { transition-delay: 1.4s; }
.js .chat-demo.is-in .chat-body > :nth-child(6) { transition-delay: 1.75s; }
.js .chat-demo.is-in .chat-body > :nth-child(7) { transition-delay: 2.1s; }

/* ─── Vidrio (liquid glass, Apple) ────────────────────────────────────────
   Usar en 1-2 superficies con PESO, sobre un wash de color (.glass-wash), nunca
   en toda la página ni vidrio-sobre-vidrio. Botones adentro con fill sólido.
   Fallback sólido para Safari / prefers-reduced-transparency. Ver marca-clinicvia-ui.md */
/* Pick lockeado (output/glass-pick-final.md): frost base + hairline sobrio
   (define el canto SIN glow) + FLARE LOCAL que deriva (reemplaza al rim
   continuo, revertido: "el rim con brillo no me gusta"). La refracción
   edge-warp va SOLO en .glass-hero. */
.glass {
  position: relative;
  background: var(--elevada);                         /* fallback sólido */
  border: 1px solid color-mix(in srgb, #fff 20%, var(--hairline)); /* hairline sobrio: define, no brilla */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-e3);                       /* flotante, sin rim especular (revertido) */
  overflow: hidden;
}
.glass > * { position: relative; z-index: 1; }        /* el contenido va por encima del flare */
/* FLARE LOCAL: un destello concentrado arriba-izquierda que deriva lento —
   la firma de brillo del vidrio, localizada (no un borde entero iluminado) */
.glass::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -18%; left: -8%;
  width: 52%; height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 72%);
  filter: blur(10px);
  pointer-events: none;
  animation: glass-flare 9s ease-in-out infinite alternate;
}
@keyframes glass-flare {
  from { transform: translate(0, 0) scale(1); opacity: .9; }
  to   { transform: translate(28%, 20%) scale(1.12); opacity: .58; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: color-mix(in srgb, var(--elevada) 60%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
  }
}
/* Refracción edge-warp — SOLO superficie héroe (pick §3, condición de Arthur:
   "la visión del fondo se distorsiona cuanto más cerca del borde"). El
   displacement (#lg-refract) va enmascarado al canto: ~0 en el centro, crece
   al borde. Como ::before de otro elemento, si el backdrop url() no corre
   (p.ej. Chrome) no muestra nada y queda el frost base — degradación con
   gracia (pick §3), nunca clobberea el blur de .glass. */
.glass-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: url(#lg-refract);
  backdrop-filter: url(#lg-refract);
  -webkit-mask: radial-gradient(122% 122% at 50% 50%, transparent 52%, #000 92%);
  mask: radial-gradient(122% 122% at 50% 50%, transparent 52%, #000 92%);
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--elevada); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-hero::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glass::after { animation: none; transform: translate(10%, 6%); }
}
/* wash de color detrás del vidrio, para que el blur tenga qué difuminar */
.glass-wash { position: relative; isolation: isolate; }
.glass-wash::before {
  content: ''; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 52% at 16% 14%, var(--tint-via), transparent 70%),
    radial-gradient(54% 50% at 88% 42%, var(--tint-maquina), transparent 72%);
  filter: blur(10px);
}

/* ─── Cards genéricas ────────────────────────────────────────────────── */
.card {
  background: var(--elevada);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-e1);   /* card en reposo despega del canvas (spec §1.2) */
}

/* Mecanismo: card con regla superior en el color del actor */
.grid-mecanismo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.card-mec { position: relative; padding-top: 30px; }
.card-mec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 26px;
  width: 44px;
  height: 3px;
  border-radius: 0 0 2px 2px;
}
.card-mec.eje-via::before { background: var(--acc-via); }
.card-mec.eje-maquina::before { background: var(--acc-maquina); }
.card-mec.eje-traspaso::before { background: var(--acc-traspaso); }
.card-mec p { margin-bottom: 0; font-size: 15px; }

@media (max-width: 760px) {
  .grid-mecanismo { grid-template-columns: 1fr; }
}

/* ─── El diferencial: "cámara del motor" theme-aware (spec §4.1) ─────────
   Ya NO es un ladrillo basalt forzado en los dos temas. Es un plano un paso
   más oscuro que su entorno (se lee como "entrar bajo el capó"), pero nunca
   negro puro y SIEMPRE emergiendo del fondo (radius + sombra + rim + mesh
   bleed), jamás un rectángulo duro. Grafito frío de subtono azul, no el
   basalt cálido. En oscuro se hunde a surface-sunken y el rim lo despega. */
.panel-dark {
  position: relative;
  isolation: isolate;
  --panel-bg: #1B1D24;               /* grafito frío, subtono azul (claro) */
  --hairline: rgba(238, 239, 244, .12);
  --ink: #EEEFF4;
  --ink-soft: rgba(238, 239, 244, .66);
  --ink-mid: rgba(238, 239, 244, .46);
  --ink-faint: rgba(238, 239, 244, .13);
  --acc-via: #4FB3E4;                /* acentos del logo (aclarados): el panel es oscuro */
  --acc-maquina: #9E86E0;
  --acc-traspaso: #E0904F;
  --acc-traspaso-sat: #E0904F;       /* el imán interno del panel: naranja pleno */
  /* rim sutil oscuro (el panel siempre es oscuro, en los dos temas de página) */
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);

  background: var(--panel-bg);
  color: var(--ink);
  border: 1px solid rgba(238, 239, 244, .08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-e3), var(--glass-rim);
  padding: clamp(36px, 5vw, 64px);
  overflow: hidden;                  /* recorta el "04" fantasma con elegancia */
}
/* en oscuro el panel se hunde respecto al canvas #141519 → surface-sunken */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel-dark { --panel-bg: #101116; }
}
:root[data-theme="dark"] .panel-dark { --panel-bg: #101116; }
.panel-dark > * { position: relative; z-index: 1; }
.panel-dark p { color: var(--ink-soft); }

.dif-list { list-style: none; margin-top: 8px; }
.dif-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}
.dif-item:last-child { border-bottom: 1px solid var(--hairline); }
.dif-key {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding-top: 4px;
}
.dif-item h3 { margin-bottom: 8px; }
.dif-item p { margin-bottom: 0; font-size: 15.5px; }

.dif-cierre {
  margin-top: 28px;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--ink);
  max-width: 46ch;
}

@media (max-width: 640px) {
  .dif-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
}

/* ─── Para quién (tarjetas de nicho) ─────────────────────────────────── */
.niche-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.niche-card { padding: 22px 22px 18px; }
.niche-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.niche-card p { font-size: 14px; margin-bottom: 0; color: var(--ink-soft); }

@media (max-width: 860px) { .niche-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .niche-grid { grid-template-columns: 1fr; } }

/* Nicho en detalle (para-quien.html) */
.niche-deep { margin-bottom: 18px; }
.niche-deep .cambio {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-faint);
  font-size: 14.5px;
  color: var(--ink);
}
.niche-deep .cambio::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc-traspaso);
  margin-right: 10px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* Síntomas del intake fragmentado */
.sintomas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sintoma h3 { font-size: 17px; }
.sintoma p { font-size: 14.5px; margin-bottom: 0; }
.sintoma .dato { color: var(--ink-mid); font-size: 12px; display: block; margin-bottom: 8px; }
@media (max-width: 760px) { .sintomas { grid-template-columns: 1fr; } }

/* ─── Cómo funciona: la vía vertical ─────────────────────────────────── */
.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 44px;
}
.flow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.flow-legend i {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.flow-legend .l-via { background: var(--acc-via); }
.flow-legend .l-maquina { background: var(--acc-maquina); }
.flow-legend .l-traspaso { background: var(--acc-traspaso); }

.flow { list-style: none; max-width: 720px; }
.flow-step {
  position: relative;
  padding: 4px 0 44px 34px;
  border-left: 3px solid var(--hairline);
}
.flow-step.eje-via { border-left-color: var(--acc-via); }
.flow-step.eje-maquina { border-left-color: var(--acc-maquina); }
.flow-step.eje-traspaso { border-left-color: var(--acc-traspaso); }
.flow-step:last-of-type { padding-bottom: 10px; }

.flow-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  display: block;
  margin-bottom: 6px;
}
.flow-step h3 { font-size: 21px; }
.flow-step p { font-size: 15.5px; }
.flow-step p:last-child { margin-bottom: 0; }

.flow-end {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 34px;
  position: relative;
}
.flow-end::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--acc-traspaso);
}
.flow-end .dato { font-size: 13px; color: var(--ink); }

/* Lo que no hace */
.no-list { list-style: none; max-width: 720px; }
.no-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--ink-faint);
  align-items: baseline;
}
.no-list li:last-child { border-bottom: 1px solid var(--ink-faint); }
.no-list .no {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.no-list p { margin-bottom: 0; font-size: 15.5px; color: var(--ink); }
.no-list p span { color: var(--ink-soft); }

/* ─── Contacto ───────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card { padding: 30px 28px; }
.contact-card .canal {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: block;
  margin-bottom: 14px;
}
.contact-card .numero {
  font-family: var(--mono);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--elevada);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .2s var(--ease-out);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--acc-via);
}
.form-nota {
  font-size: 13px;
  color: var(--ink-mid);
  margin-top: 14px;
  margin-bottom: 0;
}

/* ─── CTA de cierre ──────────────────────────────────────────────────── */
.cierre { text-align: center; }
.cierre h2, .cierre p { margin-left: auto; margin-right: auto; }
.cierre .btn-wa { margin-top: 10px; }
.cierre .precio {
  font-size: 14.5px;
  color: var(--ink-mid);
  max-width: 46ch;
  margin-top: 26px;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 48px var(--margin-side) 40px;
  margin-top: var(--section-pad);
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
}
.footer-brand { display: flex; align-items: flex-start; gap: 14px; }
.footer-brand .icono { width: 30px; height: 30px; flex-shrink: 0; border-radius: 7px; }
.footer-endoso {
  font-size: 13.5px;
  color: var(--ink-mid);
  margin: 4px 0 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-links a {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }
.footer-meta {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  padding-top: 22px;
  border-top: 1px solid var(--ink-faint);
}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ─── CTA fija móvil (solo landing) ──────────────────────────────────── */
.sticky-cta {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--acc-cta);   /* lila CTA — mismo eje que .btn-wa */
  color: var(--cta-ink);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  padding: 15px 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(21, 18, 14, .28);
  transform: translateY(120%);
  transition: transform .4s var(--ease-out);
}
.sticky-cta.show { transform: translateY(0); }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 76px; }
}

/* ─── Scroll reveal (sutil: fade + 10px, nada de espectáculo) ────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ─── Reduced motion: todo quieto, todo visible ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal,
  .js .chat-body > *,
  .js .via-motif path,
  .js .via-motif .dot {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}