/* ============================================================
   CEF CHILE · Cinematic Medical Experience
   Palette inspired by CEF Chile (deep navy + medical cyan)
   ============================================================ */

:root {
  /* ============================================================
     PALETA DE MARCA CEF (constante en ambos temas)
     navy #001050 · turquesa #00c1bc (Salud) · turquesa #00c1bc (Movimiento)
     ============================================================ */
  /* Azul de MARCA = navy #001050 (logo CEF). En CLARO es texto/botón azul (AAA).
     El navy plano se funde sobre el fondo oscuro (#071529 = 1.04:1), por eso el
     bloque :root[data-theme="dark"] lo remapea a una derivada clara visible. */
  --primary:    #001854;
  --primary-2:  #1a2d6b;
  --primary-acc: #2a3f80;
  --accent:    #00c1bc;
  --accent-2:  #3dd6d0;
  /* Verde de marca WhatsApp (señalética de contacto de terceros): FIJO en ambos
     temas, como su logo. Único origen del verde → sin hex suelto repartido. */
  --wa-green:        #25d366;
  --wa-green-strong: #1ebe5d;   /* hover (un punto más oscuro) */
  /* Primitivo turquesa oscurecido para enlaces/CTA sobre blanco (pasa AA). */
  --teal-700:  #00807c;
  /* ----- CAPA SEMÁNTICA (rol, no pigmento) — base de la unificación navy+turquesa.
     Apuntan al sistema azul-cian; antes el área Movimiento las teñía de turquesa.
     Tras la unificación CEF es UNA marca: una sola familia de acento. ----- */
  --color-accent:     var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-on-accent:  var(--on-accent);
  --color-accent-2:   var(--accent-2);
  --color-accent-deep: var(--teal-deep);
  --neutral:   #857f70;   /* gris cálido neutral (5º color) */
  --neutral-2: #a8a294;
  --white:     #ffffff;   /* blanco real, para texto sobre elementos de color */

  /* Fuentes — dos únicas familias en todo el sitio */
  --font-serif: 'IBM Plex Serif', 'IBM Plex Serif Fallback', Georgia, 'Times New Roman', serif; /* títulos */
  --font-sans:  'Source Sans 3', 'Source Sans 3 Fallback', system-ui, -apple-system, sans-serif; /* cuerpo */

  /* Sistema de TÍTULO editorial (SectionTitle) — color theme-aware.
     En tema claro toman los valores del brief; el bloque dark los remapea. */
  --navy:      #182230;   /* línea principal del título */
  --navy-soft: #46566a;   /* bajada / subtítulo */
  --teal:      #0a6f6a;   /* acento texto · ~5.6:1 sobre #f5f7fa (AA) — antes #12b3a6 (~2.4:1) */
  /* Tintas de acento para TEXTO sobre fondo claro (legibles AA) */
  --accent-ink: #0a6f6a; /* turquesa oscuro · ~5.6:1 sobre #f5f7fa */

  /* Rellenos PROFUNDOS de monograma/avatar de equipo. Las iniciales son BLANCAS,
     así que el relleno debe ser oscuro para contrastar (umbral AA-grande 3:1, las
     iniciales son ~62px). Centralizados (un solo lugar) para no re-hardcodear ni
     desincronizar. Uno por área: navy (Salud), teal (kine/sub), turquesa (Movimiento). */
  --navy-deep:   #001050; /* iniciales blancas ≈ 16:1 */
  --teal-deep:   #0a7d76; /* iniciales blancas ≈ 4.6:1 */

  /* ----- SISTEMA DE DISEÑO UNIFICADO (orden global) ----- */
  /* Escala de espaciado (única fuente de verdad para ritmo y padding) */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 2.75rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --pad-x: clamp(16px, 4vw, 24px);   /* padding lateral consistente móvil↔desktop (P1 #5) */

  /* Profundidad de cards (lenguaje único en todo el sitio) */
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.4);

  /* Escala de border-radius (única fuente de verdad). Los radios ad-hoc se
     mapean al token más cercano (≤2px → cambio imperceptible). Círculos usan
     50% directo; el .device (maqueta de teléfono) conserva sus radios propios. */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;   /* radio de card por defecto (antes --radius-card) */
  --r-xl:   24px;
  --r-pill: 999px;

  /* Escala tipográfica (clamp = responsive) — fuente única de verdad */
  --fs-display: clamp(3rem, 8vw, 7.5rem);   /* números gigantes decorativos */
  --fs-h1:      clamp(2.6rem, 6.5vw, 5.25rem);
  --fs-h2:      clamp(2rem, 4vw, 3.25rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2rem);
  --fs-sub:     clamp(1.1rem, 1.7vw, 1.3rem);   /* bajada / subtítulo */
  --fs-h4:      clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);  /* párrafos destacados */
  --fs-body:    1.125rem;                  /* cuerpo normal (18px) */
  --fs-small:   clamp(0.8125rem, 1vw, 0.875rem);    /* metadata, etiquetas */
  --fs-tiny: 0.75rem;                        /* tags, uppercase labels */

  /* Alias retro-compatibles: --st-* apuntan a la escala única --fs-* */
  --st-h1:  var(--fs-h1);
  --st-h2:  var(--fs-h2);
  --st-h3:  var(--fs-h3);
  --st-sub: var(--fs-sub);

  /* Pesos estándar */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Interlineados */
  --lh-tight:   1.1;   /* títulos grandes */
  --lh-snug:    1.25;  /* títulos medianos */
  --lh-normal:  1.6;   /* cuerpo */
  --lh-relaxed: 1.7;   /* lectura larga (artículos del blog) */

  --ease: cubic-bezier(.16,.84,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   TEMA CLARO (por defecto) — fondo blanco institucional
   ============================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  /* Fondo plano único en TODO el sitio */
  --bg-deep:   #f5f7fa;
  --bg-mid:    #f5f7fa;
  --bg-soft:   #f5f7fa;

  --light:     #1a1f2e;   /* texto principal (oscuro) */
  --soft:      #2a3142;   /* texto secundario */
  --muted:     rgba(26, 31, 46, 0.65);
  --line:      rgba(26, 31, 46, 0.10);
  --line-strong: rgba(26, 31, 46, 0.20);

  --surface:      #ffffff;                 /* fondo de tarjetas (blanco puro) */
  --surface-2:    #ffffff;                 /* fondo de inputs */
  --surface-pill: rgba(255, 255, 255, 0.85); /* pills/badges translúcidos */
  --on-accent:    #06302f;                 /* texto sobre botón turquesa */

  --nav-bg:        rgba(255, 255, 255, 0.82);
  --nav-bg-solid:  rgba(255, 255, 255, 0.98);

  --s-light-bg:      #f5f7fa;              /* secciones .s-light = mismo fondo */
  --s-light-bg-grey: #f5f7fa;

  --stroke-faint: transparent;  /* palabras/números gigantes de fondo desactivados */
  --grid-line:    transparent;  /* grillas decorativas desactivadas */

  --shadow-1: 0 4px 24px -8px rgba(26, 31, 46, 0.06);
  --shadow-2: 0 18px 40px -16px rgba(26, 31, 46, 0.14);
  --glow-op: 0;   /* glows de color desactivados */

  /* Sistema de contenedor global (mismo ancho y gutter en nav, secciones y footer) */
  --container: 1320px;
  --gutter:    clamp(24px, 5vw, 80px);

  /* Overlay del hero: transparente para que la aurora sea CONTINUA
     (un overlay con color creaba una costura dura al cortar en el
     borde inferior del hero). */
  --hero-overlay: transparent;
}

/* ============================================================
   TEMA OSCURO — navy CEF de fondo plano (misma paleta de marca)
   Solo redefine fondos/texto/superficies; los acentos
   (azul/turquesa/turquesa) son constantes en ambos temas.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Fondo plano único oscuro (navy derivado del azul CEF #046bd2) */
  --bg-deep:   #071529;
  --bg-mid:    #071529;
  --bg-soft:   #071529;

  --light:     #eaf3ff;   /* texto principal (claro) */
  --soft:      #c7d8ec;   /* texto secundario */
  --muted:     rgba(234, 243, 255, 0.62);
  --line:      rgba(234, 243, 255, 0.12);
  --line-strong: rgba(234, 243, 255, 0.24);

  /* Azul de marca remapeado para OSCURO: el navy #001050 se funde sobre el
     fondo oscuro (1.04:1), así que aquí va una derivada navy-family DESATURADA
     y más clara — coherente con la identidad navy pero visible y AA tanto como
     texto (rol Salud, .cell__link, .btn--salud) como relleno (orbs/glows).
     Verificado con axe: 0 violaciones color-contrast en las 21 páginas. */
  --primary:    #6f8cc4;   /* navy-apagado, AA sobre superficies oscuras */
  --primary-2:  #8aa3d6;   /* variante más clara (hover/gradientes) */
  --primary-acc: #3d5aa8;  /* relleno/acento navy más subido para oscuro */
  /* Monograma navy: en oscuro un navy un poco más alto que #001050 para que la
     tarjeta resalte sobre el fondo, manteniendo blanco AAA (12.87:1). Igual que
     el relleno del botón (#1a2d6b). teal-deep/acento-deep ya sirven en ambos temas. */
  --navy-deep:  #1a2d6b;

  --surface:      #0e2238;                    /* tarjetas */
  --surface-2:    #0b1d31;                    /* inputs */
  --surface-pill: rgba(11, 29, 49, 0.85);     /* pills/badges */
  --on-accent:    #04162e;                     /* texto sobre botón turquesa */

  --nav-bg:        rgba(7, 21, 41, 0.78);
  --nav-bg-solid:  rgba(7, 21, 41, 0.97);

  --s-light-bg:      #071529;
  --s-light-bg-grey: #071529;

  --stroke-faint: transparent;
  --grid-line:    transparent;

  --shadow-1: 0 18px 45px -22px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 30px 70px -24px rgba(0, 0, 0, 0.65);
  --glow-op: 0;

  --hero-overlay: transparent;

  /* SectionTitle — remapeo claro para conservar contraste AA en oscuro */
  --navy:      #eaf3ff;   /* línea principal sobre fondo navy */
  --navy-soft: #c7d8ec;   /* bajada / subtítulo */
  --teal:      #3dd6d0;   /* acento más brillante para legibilidad en oscuro */
  /* En oscuro las tintas = acento de marca actual → el oscuro NO cambia */
  --accent-ink: var(--accent);
}

/* TEMA CLARO · turquesa de Movimiento más vivo SOLO como RELLENO.
   En claro el #00c1bc se ve tenue sobre #f5f7fa; #f07000 (más profundo) da más
   presencia en orbs, barras, fondo de botón turquesa, íconos y gradientes.
   NO afecta al texto (ese usa --acento-ink #0a6f6a, AA). El OSCURO conserva
   #00c1bc (este override es solo [data-theme="light"]). */
:root[data-theme="light"] {
}
/* Orb turquesa con más presencia en claro (antes .22) */
:root[data-theme="light"] .mov__orb.mo1 {
  opacity: 0.32;
}

/* Transición suave al alternar tema */
body, .nav, .footer, .cine-cta__card,
.area-card, .program, .plan, .pillar, .partner {
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* El atributo `hidden` SIEMPRE oculta, aunque la clase fije display (p.ej. las
   tarjetas .svc-card son display:flex). Sin esto, los filtros JS no esconden
   nada visualmente. Base estándar (normalize/boilerplate). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  background-color: var(--bg-deep);
  /* El nav es fijo (~52–60px compacto): reserva su alto + respiro para que
     las anclas internas (#programas, #faq, #planes…) no queden tapadas. */
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--soft);
  line-height: 1.6;
  overflow-x: hidden;   /* fallback: navegadores sin overflow:clip (Safari <16) */
  overflow-x: clip;     /* moderno: clip NO crea scroll container → NO rompe position:sticky (a diferencia de hidden) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
}

/* Red de seguridad tipográfica: aunque una página no tenga estilos
   específicos, hereda las dos fuentes correctas. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
}
p, li, span, a, label, input, select, textarea, button {
  font-family: var(--font-sans);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }   /* escala proporcional → ningún medio desborda en móvil (P1 #5) */
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, var(--bg-soft), var(--bg-deep) 70%);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; width: min(420px, 80vw); }
.preloader__logo { width: 140px; height: 140px; margin: 0 auto 28px; }
.pulse-svg { width: 100%; height: 100%; }
.pulse-ring { transform-origin: center; animation: pulseRing 2s var(--ease) infinite; }
.pulse-ring.delay { animation-delay: 1s; }
@keyframes pulseRing {
  0% { transform: scale(.7); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.heartbeat { stroke-dasharray: 300; stroke-dashoffset: 300; animation: dash 2s var(--ease) infinite; }
@keyframes dash { to { stroke-dashoffset: -300; } }

.preloader__text {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: .25em;
  color: var(--light);
  margin-bottom: 32px;
}
.preloader__text span { display: inline-block; opacity: 0; transform: translateY(20px); animation: revealUp .6s var(--ease-out) forwards; }
.preloader__text span.space { opacity: 1; }
.preloader__text span:nth-child(1) { animation-delay: .1s; }
.preloader__text span:nth-child(2) { animation-delay: .2s; }
.preloader__text span:nth-child(3) { animation-delay: .3s; }
.preloader__text span:nth-child(5) { animation-delay: .5s; }
.preloader__text span:nth-child(6) { animation-delay: .55s; }
.preloader__text span:nth-child(7) { animation-delay: .6s; }
.preloader__text span:nth-child(8) { animation-delay: .65s; }
.preloader__text span:nth-child(9) { animation-delay: .7s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

.preloader__bar {
  height: 1px; background: var(--line); position: relative; overflow: hidden;
  margin-bottom: 12px;
}
.preloader__bar-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary-2));
  width: 0%;
  transition: width .2s linear;
  box-shadow: 0 0 12px var(--accent);
}
.preloader__pct {
  font-size: 11px; letter-spacing: .3em; color: var(--muted);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled {
  padding: 12px 0;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(26,31,46,.04), 0 8px 30px -18px rgba(26,31,46,.18);
}

/* ── Nav sobre hero OSCURO (.nav-over-dark: home, telemed, …) ──────────────
   El nav es transparente al top; en tema CLARO su texto es oscuro → invisible
   sobre el hero navy (en dark ya es claro). Solo al TOP (sin .scrolled):
   (1) velo superior sutil (gradiente navy, iOS-safe) que oscurece parejo la
       franja del nav → el texto claro se lee sobre el navy Y sobre la foto;
   (2) texto/bordes claros SOLO en los elementos de la BARRA — NO en el
       mega-panel (.nav__mega*, fondo claro propio) para no invertirle el texto.
   Al scrollear, .scrolled trae --nav-bg (fondo claro) y vuelve el estado normal.
   Reutilizable: cualquier página con hero oscuro añade darkHero:true. */
.nav-over-dark .nav:not(.scrolled) {
  background: linear-gradient(180deg, rgba(0, 18, 56, 0.55) 0%, rgba(0, 18, 56, 0) 100%);
}
.nav-over-dark .nav:not(.scrolled) .nav__logo,
.nav-over-dark .nav:not(.scrolled) .nav__theme,
.nav-over-dark .nav:not(.scrolled) .nav__agendar-mobile { color: #eaf3ff; }
.nav-over-dark .nav:not(.scrolled) .nav__menu > a,
.nav-over-dark .nav:not(.scrolled) .nav__mega-btn,
.nav-over-dark .nav:not(.scrolled) .nav__contact { color: #c7d8ec; }
.nav-over-dark .nav:not(.scrolled) .nav__contact,
.nav-over-dark .nav:not(.scrolled) .nav__theme { border-color: rgba(255, 255, 255, 0.28); }
.nav-over-dark .nav:not(.scrolled) .nav__burger span { background: #eaf3ff; }
.nav__inner {
  width: min(1280px, 92%);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--light);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  flex-shrink: 0;
  line-height: 1;
}
.nav__logo svg { flex-shrink: 0; }
.nav__logo small {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--accent-ink);
  display: block;
  font-weight: 500;
  margin-top: 2px;
}
.nav__menu {
  display: flex; gap: 18px;
  flex-wrap: nowrap;
}
.nav__menu a {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--soft);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__menu a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .35s var(--ease);
}
.nav__menu a:hover { color: var(--accent-ink); }
.nav__menu a:hover::after { width: 100%; }

/* ----- Megamenú "Servicios" (desktop) ----- */
/* Sin position:relative → el panel (.nav__mega, absolute) se ancla al header .nav
   (fixed, full-width) y queda centrado en el VIEWPORT vía left:50%/translateX(-50%),
   no sobre el botón. Necesario para que las 4 columnas (960px) no se corten a la
   izquierda. El panel solo existe en desktop (>1300px); móvil usa lista plana. */
.nav__mega-wrap { display: inline-flex; }
.nav__mega-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500; color: var(--soft);
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  transition: color .25s var(--ease);
}
.nav__mega-btn:hover, .nav__mega-btn[aria-expanded="true"] { color: var(--accent-ink); }
.nav__mega-chev { transition: transform .25s var(--ease); }
.nav__mega-btn[aria-expanded="true"] .nav__mega-chev { transform: rotate(180deg); }
.nav__mega {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  width: min(960px, 92vw);
  background: var(--surface); color: var(--light);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 26px;
  z-index: 200;
}
.nav__mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nav__mega-title {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 700; margin: 0 0 9px;
}
/* gap compactado (9→6px) + título (12→9px) para bajar la altura del panel sin amontonar */
.nav__mega-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.nav__mega-list a { color: var(--soft); font-size: 14px; font-weight: 500; transition: color .2s var(--ease); }
.nav__mega-list a:hover, .nav__mega-list a:focus-visible { color: var(--accent-ink); }
.nav__mega-list a[aria-current="page"] { color: var(--accent-ink); font-weight: 700; }
.nav__mega-all {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-ink);
}

/* Submenús desplegables (Salud / Movimiento) */
.nav__drop { position: relative; display: inline-flex; align-items: center; }
.nav__drop-trigger::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: 7px;
  margin-bottom: 2px;
  opacity: .6;
  transition: transform .3s var(--ease);
}
.nav__drop:hover .nav__drop-trigger::before { transform: rotate(225deg); }
/* puente invisible para que el hover no se corte */
.nav__drop::after {
  content: ''; position: absolute; top: 100%; left: -10px; right: -10px; height: 16px;
}
.nav__sub {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px;
  background: var(--nav-bg-solid);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 24px 60px -20px rgba(26,31,46,.22);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
  z-index: 120;
}
.nav__drop:hover .nav__sub,
.nav__drop:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__sub a {
  padding: 11px 16px; border-radius: var(--r-sm);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  color: var(--soft); white-space: nowrap;
}
.nav__sub a::after { display: none; }
.nav__sub a:hover { background: rgba(0,193,188,.12); color: var(--accent-ink); }

.nav__cta {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-ink);
  transition: all .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.nav__cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .4s var(--ease);
  z-index: -1;
}
.nav__cta:hover { color: var(--on-accent); }
.nav__cta:hover::before { transform: translateX(0); }

/* Grupo de acciones del header (David r2): "Contacto" + "Agendar". Al ser UN ítem
   flex con flex-shrink:0, el .nav__inner ya no comprime el CTA al repartir ancho →
   "Agendar hora" queda en 1 línea (idéntico al original) SIN tocar .nav__cta. El gap
   interno los deja como par visual. */
.nav__actions {
  display: inline-flex; align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Botón "Contacto" del header (David r2): acción SECUNDARIA, a la izquierda del CTA
   "Agendar". Pill de borde neutro (no compite con el CTA primario turquesa). Mismo
   alto visual que .nav__cta para que lean como par. */
.nav__contact {
  display: inline-flex; align-items: center;
  padding: 11px 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--soft);
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.nav__contact:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.nav__contact:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,193,188,.35); }

/* Botón de cambio de tema (claro/oscuro) */
.nav__theme {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--light);
  border: 1px solid var(--line-strong);
  background: transparent;
  flex-shrink: 0;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), transform .35s var(--ease);
}
.nav__theme:hover { color: var(--accent-ink); border-color: var(--accent-ink); transform: rotate(20deg); }
.nav__theme:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,193,188,.35); }
.nav__theme svg { width: 18px; height: 18px; }
.nav__theme-sun { display: none; }
[data-theme="dark"] .nav__theme-sun  { display: block; }
[data-theme="dark"] .nav__theme-moon { display: none; }

.nav__burger {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px;   /* tap target ≥44px (las barras quedan centradas) */
}
.nav__burger span {
  display: block; width: 28px; height: 1.5px; background: var(--soft);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Agendar SOLO móvil (ícono calendario): oculto en desktop (ahí la acción es el .nav__cta
   de .nav__actions); se muestra en el @media ≤768px más abajo. */
.nav__agendar-mobile { display: none; }

/* ============================================================
   MENÚ MÓVIL LATERAL · drill-down (iOS-safe: solo transform/opacity, sin backdrop-filter)
   #navScrim + #navMobile son hijos directos de <body>. El .nav__burger NO se toca.
   ============================================================ */
:root { --drawer-w: min(85vw, 360px); --drawer-ease: cubic-bezier(.4, 0, .2, 1); }

.nav__scrim {
  position: fixed; inset: 0;
  background: rgba(0, 24, 84, .55);          /* navy plano, SIN blur */
  opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--drawer-ease), visibility 0s linear 200ms;
  z-index: 1000;
}
.nav__scrim.is-open { opacity: 1; visibility: visible; transition: opacity 240ms var(--drawer-ease); }

.nav__mobile {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--drawer-w);
  background: var(--bg-deep); color: var(--light);
  transform: translateX(-100%);              /* off-canvas; solo transform anima */
  transition: transform 200ms var(--drawer-ease);
  z-index: 1001;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 2px 0 18px rgba(0, 0, 0, .25);
}
.nav__mobile.is-open { transform: translateX(0); transition: transform 240ms var(--drawer-ease); }

.nav__head { display: flex; align-items: center; min-height: 56px; padding: 8px; }
.nav__close {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 0; color: var(--light); cursor: pointer; border-radius: 8px;
}
.nav__close:focus-visible { outline: 3px solid var(--accent); }

.nav__levels { position: relative; flex: 1 1 auto; overflow: hidden; }
/* Drill-down nivel 0 ↔ 1. FIX iOS (bug INTERMITENTE de repaint del transform):
   1) translate3d(): promueve cada nivel a su propia capa GPU → iOS repinta el slide de forma
      confiable. NO usa will-change/backdrop-filter → respeta la restricción iOS.
   2) visibility atada a .show-child: el nivel ACTIVO es siempre visibility:visible (pintado) y
      el inactivo visibility:hidden → "mostrar el nivel 1" NO depende solo de que iOS repinte el
      transform. El slide del nivel ENTRANTE se conserva (visibility:visible es inmediata); solo
      el nivel saliente (que queda tapado por el entrante) se oculta al instante. */
.nav__level {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translate3d(0, 0, 0); transition: transform 240ms var(--drawer-ease);
  visibility: hidden;                 /* el nivel activo se hace visible en las reglas de abajo */
  background: var(--bg-deep);
  list-style: none; margin: 0; padding: 0;
}
.nav__levels .nav__level[data-level="0"] { visibility: visible; }   /* raíz visible por defecto */
.nav__level[data-level="1"] { transform: translate3d(100%, 0, 0); }
.nav__levels.show-child .nav__level[data-level="0"] { transform: translate3d(-30%, 0, 0); visibility: hidden; }
.nav__levels.show-child .nav__level[data-level="1"] { transform: translate3d(0, 0, 0); visibility: visible; }

.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 20px;
  color: var(--light); font-family: var(--font-sans); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.nav__row:hover, .nav__row:focus-visible { background: rgba(255, 255, 255, .06); }
.nav__row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.nav__row .chev { color: var(--accent); font-size: 1.25rem; line-height: 1; }
.nav__back { color: var(--muted); }
.nav__row--all { color: var(--accent-ink); }

.nav__drawer-cta {
  margin: 12px 20px calc(16px + env(safe-area-inset-bottom)); padding: 14px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; text-transform: uppercase; text-align: center;
  border-radius: 10px; text-decoration: none;
}

body.nav-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav__mobile, .nav__scrim, .nav__level { transition-duration: .01ms !important; }
}

/* Colapso a hamburguesa. Era 1150px; con el menú nuevo (David r2: +"Wellness
   Corporativo" + botón "Contacto") la fila horizontal solo entra sin comprimir el
   CTA "Agendar" a partir de ~1300px, así que el burger entra un poco antes. ≥1301px
   (1366/1440/1920…) muestran el menú completo; 1280 y abajo van a hamburguesa.
   Se oculta el grupo .nav__actions completo (Contacto + Agendar). */
@media (max-width: 1300px) {
  .nav__menu, .nav__actions { display: none; }
  .nav__burger { display: flex; }
}

/* ----- Header MÓVIL (≤768px): layout estilo ilus -----
   Altura fija 56px + safe-area-inset-top (igual en reposo y .scrolled → sin salto, CLS 0).
   Reorden con flexbox `order`: hamburguesa IZQUIERDA · logo (anillos + "CEF CHILE") CENTRADO ·
   tema + Agendar (ícono) DERECHA. El logo toma el espacio central (flex:1) y se centra.
   #burger y #themeToggle conservan sus ids (drawer/tema intactos).
   Desktop (>768px) intacto: todo dentro de este media query. */
@media (max-width: 768px) {
  .nav, .nav.scrolled { padding: env(safe-area-inset-top) 0 0; }
  .nav__inner {
    width: 100%;
    min-height: 56px;
    padding-inline: var(--pad-x);
    gap: 8px;
    position: relative;
  }
  /* Reorden ilus: burger(1) | logo centrado(2) | tema(3) | agendar(4).
     El logo se acota a `.nav__inner` para NO afectar al logo del footer (.footer__brand
     reusa la clase .nav__logo). burger/theme/agendar son clases solo del header. */
  .nav__burger { order: 1; }
  .nav__inner .nav__logo { order: 2; flex: 1 1 auto; justify-content: center; font-size: 18px; gap: 8px; }
  .nav__theme  { order: 3; margin-left: 0; }   /* reemplaza el viejo margin-left:auto */
  .nav__agendar-mobile {
    order: 4;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    flex: 0 0 auto;
  }
  .nav__logo-img  { width: 30px; height: 30px; }
  .nav__logo-text { font-size: 17px; letter-spacing: 0.02em; white-space: nowrap; }
}

/* Pantallas muy chicas: que "CEF CHILE" no apriete. */
@media (max-width: 360px) {
  .nav__logo-text { font-size: 15px; }
  .nav__logo-img  { width: 26px; height: 26px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* svh: la barra del navegador móvil no rompe el alto (P1 #5) */
  overflow: hidden;
  display: flex; align-items: center;
  padding: 110px 0 70px;
}
.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .12;
  filter: saturate(1.05) brightness(1.05);
}
.hero__overlay {
  position: absolute; inset: 0;
  background: var(--hero-overlay);
  z-index: 2;
  pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  z-index: 2;
  opacity: .25;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero__content {
  position: relative;
  z-index: 5;
  width: min(1280px, 92%);
  margin: 0 auto;
}

.hero__tag {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--light);
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.hero__tag .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0,193,188,.2);
  animation: tagDot 2s var(--ease) infinite;
}
@keyframes tagDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,193,188,.2); }
  50% { box-shadow: 0 0 0 10px rgba(0,193,188,0); }
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6.2vw, 5.75rem);
  line-height: 1.08;
  color: var(--light);
  letter-spacing: -.015em;
  margin-bottom: 26px;
  font-weight: 600;
}
.hero__title .line { display: block; overflow: hidden; padding: 0.06em 0; }
.hero__title .word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.hero__title .word.italic { font-style: italic; color: var(--accent-ink); }
.hero__title .word.accent {
  background: linear-gradient(120deg, var(--accent), var(--primary-2), var(--light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.hero.ready .hero__title .word { transform: translateY(0); }
.hero.ready .hero__title .line:nth-child(1) .word:nth-child(1) { transition-delay: .1s; }
.hero.ready .hero__title .line:nth-child(1) .word:nth-child(2) { transition-delay: .18s; }
.hero.ready .hero__title .line:nth-child(1) .word:nth-child(3) { transition-delay: .26s; }
.hero.ready .hero__title .line:nth-child(2) .word:nth-child(1) { transition-delay: .42s; }
.hero.ready .hero__title .line:nth-child(2) .word:nth-child(2) { transition-delay: .5s; }
.hero.ready .hero__title .line:nth-child(2) .word:nth-child(3) { transition-delay: .58s; }

.hero__sub {
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  max-width: 560px;
  color: var(--light);
  margin-bottom: 32px;
  font-weight: 300;
}

.hero__ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 44px;
}

.hero__meta {
  display: flex; gap: 48px; flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero__meta > div {
  display: flex; flex-direction: column;
}
.hero__meta strong {
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--light);
  font-weight: 700;
}
.hero__meta span {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.hero__scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px; height: 60px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line div {
  position: absolute; top: -60px; left: 0;
  width: 100%; height: 60px;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: scrollDown 2.2s var(--ease) infinite;
}
@keyframes scrollDown { to { top: 100%; } }

.hero__side {
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  z-index: 5;
  display: flex; align-items: center; gap: 20px;
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__side-time { color: var(--accent-ink); }
@media (max-width: 1100px) { .hero__side { display: none; } }

/* Reveal helper */
.reveal { opacity: 0; transform: translateY(40px); transition: all .9s var(--ease-out); }
.hero.ready .reveal { opacity: 1; transform: none; }
.hero.ready .reveal:nth-of-type(1) { transition-delay: .8s; }
.hero.ready .reveal:nth-of-type(2) { transition-delay: .9s; }
.hero.ready .reveal:nth-of-type(3) { transition-delay: 1s; }
.hero.ready .reveal:nth-of-type(4) { transition-delay: 1.1s; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px;
  min-height: 44px;   /* tap target ≥44px incluso en variantes compactas */
  border-radius: var(--r-pill);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent); /* texto oscuro sobre turquesa para contraste AA */
  box-shadow: 0 8px 24px -8px rgba(0,193,188,.5);
}
.btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  /* hover: oscurece el turquesa sin saltar a azul (mantiene legible el texto oscuro) */
  background: linear-gradient(120deg, var(--accent-2), #009a96);
  transform: translateX(-101%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(0,193,188,.45); }
.btn--primary:hover::before { transform: translateX(0); }

.btn--ghost {
  background: transparent;
  color: var(--soft);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  background: rgba(0,193,188,.08);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}
.btn--ghost.light {
  color: var(--light);
  border-color: var(--line-strong);
}

/* WhatsApp = acción SECUNDARIA. Misma base outline que .btn--ghost (legible en
   ambos temas y sobre héroes oscuros o tarjetas claras); el icono verde y el
   borde verde en hover lo identifican como WhatsApp sin competir con la Agenda. */
.btn--whatsapp {
  background: transparent;
  color: var(--soft);
  border: 1px solid var(--line-strong);
}
.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background: rgba(37, 211, 102, 0.10);
  border-color: #25d366;
  color: var(--accent-ink);
}
.btn--whatsapp.light { color: var(--light); }
.btn--whatsapp .icon { color: var(--wa-green); }

.btn--block { width: 100%; justify-content: center; }

/* Grupo de botones de agendar (partial booking-buttons.njk): Medilink arriba +
   WhatsApp abajo, apilados full-width. Los .btn reusan sus estilos existentes. */
.booking-buttons { display: flex; flex-direction: column; gap: 8px; width: 100%; }
/* WhatsApp del grupo = SECUNDARIO (outline verde), no navy. refinamiento.css unifica
   .btn--whatsapp a navy sólido; acá lo devolvemos a su estilo WhatsApp (outline + ícono
   verde) para que "Agendar online" (navy) sea el primario y no queden 2 pills navy
   amontonadas. Especificidad (0,2,0) le gana a refinamiento (.btn--whatsapp = 0,1,0).
   Scopeado a .booking-buttons → NO toca especialidad ni otros .btn--whatsapp. */
.booking-buttons .btn--whatsapp {
  background: transparent;
  color: var(--soft);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.booking-buttons .btn--whatsapp:hover,
.booking-buttons .btn--whatsapp:focus-visible {
  background: rgba(37, 211, 102, 0.10);
  border-color: #25d366;
  color: var(--accent-ink);
}

/* Acción SECUNDARIA sólida: relleno navy (--navy-deep, profundo en ambos temas)
   con texto blanco. Un escalón por debajo del .btn--primary turquesa (acción
   principal = turquesa, secundaria = navy). Contraste blanco sobre navy:
   ~16:1 en claro (#001050) y 12.87:1 en oscuro (#1a2d6b) → AAA en los dos.
   Reutilizable en cualquier acción secundaria del sitio (nombre no atado a página). */
.btn--secondary {
  background: var(--navy-deep);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 16, 80, 0.5);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(0, 16, 80, 0.5);
  /* hover OSCURECE el navy → el blanco contrasta aún más (nunca baja de AA) */
  background: color-mix(in srgb, var(--navy-deep) 82%, #000);
}

/* ============================================================
   CONFIANZA / PRUEBA SOCIAL (trust.njk)
   Hereda los reveals del layout (data-cine-reveal) → respeta reduced-motion.
   ============================================================ */
.trust { padding: clamp(56px, 8vw, 110px) 0; }
.trust__inner { width: min(1180px, 92vw); margin: 0 auto; }
.trust__pre {
  display: block;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; margin-bottom: 12px;
}
.trust__title {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  line-height: 1.12; color: var(--light);
  max-width: 22ch; margin: 0 0 clamp(32px, 4vw, 52px);
}
.trust__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: clamp(36px, 4vw, 56px);
}
.trust__card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  --seal: var(--accent-ink);
}
.trust__card[data-area="movimiento"] { --seal: var(--accent-ink); }
.trust__quote-mark { color: var(--seal); }
.trust__quote { font-size: 16px; line-height: 1.6; color: var(--soft); font-style: italic; margin: 0; }
.trust__who { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.trust__name { font-weight: 700; color: var(--light); }
.trust__role { font-size: 13px; color: var(--seal); letter-spacing: .02em; }

.trust__seals {
  display: grid; gap: 18px 28px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding: clamp(24px, 3vw, 36px);
  margin: 0; list-style: none;
  background: var(--bg-mid);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.trust__seal { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.trust__seal-val {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 700;
  color: var(--accent-ink); line-height: 1.05;
}
.trust__seal-label { font-size: 13px; color: var(--soft); line-height: 1.4; }

/* ============================================================
   RESEÑAS / PRUEBA SOCIAL (reviews.njk)
   ============================================================ */
.reviews { padding: clamp(48px, 7vw, 96px) 0; }
.reviews__inner { width: min(1180px, 92vw); margin: 0 auto; }
.reviews__pre {
  display: block;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; margin-bottom: 12px;
}
.reviews__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.375rem);
  line-height: 1.12; color: var(--light);
  margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.reviews__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.reviews__card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.reviews__stars { color: var(--accent-ink); font-size: 17px; letter-spacing: 2px; }
.reviews__text { font-size: 15px; line-height: 1.6; color: var(--soft); font-style: italic; margin: 0; }
.reviews__who { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.reviews__author { font-weight: 700; color: var(--light); }
.reviews__source { font-size: 12px; color: var(--soft); letter-spacing: .02em; }

/* ============================================================
   EQUIPO · grupos por disciplina + tarjetas de profesional (equipo.html)
   ============================================================ */
.team-group { padding: clamp(40px, 6vw, 68px) 0; }
.team-group:nth-child(even) { background: var(--bg-mid); }
.team-group__inner { width: min(1180px, 92vw); margin: 0 auto; }
.team-group__title {
  font-family: var(--font-serif); font-size: clamp(1.375rem, 3vw, 2rem);
  color: var(--light); margin: 0 0 clamp(22px, 3vw, 34px);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.team-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.pro-card {
  display: flex; flex-direction: column; gap: 13px;
  padding: 24px 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.pro-card:hover, .pro-card:focus-within {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 18px 40px -16px rgba(0, 193, 188, 0.4);
}
.pro-card__head { display: flex; align-items: center; gap: 14px; }
.pro-card__avatar {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 20px;
  letter-spacing: .02em; overflow: hidden;
}
.pro-card__avatar--photo { object-fit: cover; object-position: var(--pp, center 25%); }
.pro-card__name { font-size: 17px; color: var(--light); margin: 0; line-height: 1.2; }
.pro-card__role { font-size: 13px; color: var(--accent-ink); font-weight: 600; margin: 2px 0 0; }
.pro-card__bio { font-size: 14px; line-height: 1.55; color: var(--soft); margin: 0; }
.pro-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pro-card__tags li {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: var(--r-pill);
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.pro-card__reg {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--accent-ink); margin: 0;
}
.pro-card__reg a { text-decoration: underline; }
.pro-card__more { font-size: 13.5px; }
.pro-card__more > summary {
  cursor: pointer; font-weight: 600; color: var(--soft);
  list-style: none; padding: 4px 0;
}
.pro-card__more > summary::-webkit-details-marker { display: none; }
.pro-card__more > summary::before { content: '＋ '; color: var(--accent-ink); }
.pro-card__more[open] > summary::before { content: '－ '; }
.pro-card__more > summary:hover { color: var(--accent-ink); }
.pro-card__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin: 12px 0 6px; }
.pro-card__list { margin: 0; padding-left: 18px; color: var(--soft); line-height: 1.5; display: flex; flex-direction: column; gap: 3px; }
.pro-card__cef { color: var(--soft); line-height: 1.55; margin: 0; }
.pro-card__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.pro-card__cta { padding: 11px 22px; font-size: 12px; }
.pro-card__profile { display: inline-flex; align-items: center; min-height: 24px; font-size: 13px; font-weight: 600; color: var(--soft); text-decoration: underline; }
.pro-card__profile:hover { color: var(--accent-ink); }
.equipo__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   QUIZ DE ORIENTACIÓN (triage.njk)
   ============================================================ */
.triage { padding: clamp(40px, 6vw, 72px) 0; }
.triage__inner { width: min(900px, 92vw); margin: 0 auto; }
.triage__pre {
  display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; margin-bottom: 10px;
}
.triage__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.4vw, 2.375rem); color: var(--light); margin: 0 0 14px; }
.triage__disclaimer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); margin: 0 0 24px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--r-md);
}
.triage__disclaimer .icon { color: var(--accent-ink); flex-shrink: 0; }
.triage__disclaimer a { color: var(--accent-ink); font-weight: 700; }
.triage__q { font-size: 18px; font-weight: 700; color: var(--light); margin: 0 0 16px; }
.triage__options { display: flex; flex-direction: column; gap: 10px; }
.triage__opt {
  text-align: left; padding: 16px 20px; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  color: var(--strong, var(--light)); background: var(--surface);
  border: 1px solid var(--line-strong); cursor: pointer;
  transition: all .2s var(--ease);
}
.triage__opt:hover, .triage__opt:focus-visible { border-color: var(--accent); color: var(--accent-ink); transform: translateX(3px); }
.triage__opt--wa { color: var(--muted); font-weight: 500; font-size: 14.5px; }

.triage__result-pre { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin: 0 0 14px; }
.triage__recos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.triage__reco {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
.triage__reco--movimiento { border-left-color: var(--accent); }
.triage__reco-title { font-size: 19px; color: var(--light); margin: 0; }
.triage__reco-lead { font-size: 14px; line-height: 1.55; color: var(--soft); margin: 0; }
.triage__reco-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.triage__reco-actions .btn { padding: 11px 18px; font-size: 12px; }
.triage__restart {
  margin-top: 18px; padding: 10px 18px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--soft); background: transparent; border: 1px solid var(--line-strong); cursor: pointer;
}
.triage__restart:hover, .triage__restart:focus-visible { border-color: var(--accent-ink); color: var(--accent-ink); }

/* ============================================================
   SERVICIOS POR NECESIDAD (servicios.html)
   ============================================================ */
.svc-head { padding: clamp(96px, 12vh, 150px) 0 clamp(28px, 4vw, 44px); }
.svc-head__inner { width: min(900px, 92vw); margin: 0 auto; }
.svc-head__title {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 6vw, 4rem); line-height: 1.05;
  color: var(--light); margin: 14px 0 18px;
}
.svc-head__title em { color: var(--accent-ink); font-style: italic; }
.svc-head__lead { font-size: clamp(1rem, 2vw, 1.1875rem); color: var(--soft); max-width: 60ch; line-height: 1.55; }
.svc-head__note {
  display: inline-block; margin: 6px 0 14px;
  font-size: 13px; color: var(--accent-ink); font-weight: 600;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.svc-head__rescue { margin-top: 18px; font-size: 15px; color: var(--muted); }
.svc-head__rescue a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }

.svc-filters {
  position: sticky; top: 64px; z-index: 40;
  padding: 14px 0;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}
.svc-filters__inner {
  width: min(1180px, 92vw); margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.svc-search { position: relative; display: flex; align-items: center; }
.svc-search__icon { position: absolute; left: 16px; color: var(--soft); pointer-events: none; }
.svc-search__input {
  width: 100%; padding: 13px 16px 13px 46px;
  font-family: var(--font-sans); font-size: 15px; color: var(--light);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}
.svc-search__input::placeholder { color: var(--muted); }
.svc-search__input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent); }
.svc-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.svc-index__title { font-family: var(--font-serif); font-size: clamp(1.375rem, 3vw, 2.125rem); color: var(--light); margin: 0 0 clamp(22px, 3vw, 36px); }
.svc-empty { margin-top: 28px; font-size: 16px; color: var(--soft); }
.svc-empty a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }
.svc-chip {
  display: inline-flex; align-items: center; min-height: 44px;   /* tap target */
  padding: 9px 18px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--soft); background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.svc-chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.svc-chip.is-active {
  color: var(--on-accent); background: var(--accent);
  border-color: var(--accent);
}

/* ===== /equipo · chips de filtro en MÓVIL (≤768px): una fila horizontal deslizable =====
   En desktop los chips hacen wrap (reglas de arriba, intactas). En móvil, los 18 chips
   envueltos formaban una barra sticky de ~500–670px que tapaba el contenido. Acá pasan a
   UNA fila con scroll horizontal. Solo móvil; el CSS desktop de .svc-filters/.svc-chips
   no se modifica. */
@media (max-width: 768px) {
  .svc-filters {
    /* El header móvil mide 56px + safe-area-inset-top y es CONSTANTE en reposo y .scrolled
       (ver "Header MÓVIL" en la sección del nav). Por eso 56px (no 60px): los chips se pegan
       justo bajo el nav sin hueco ni solape. */
    top: calc(56px + env(safe-area-inset-top, 0px));
    padding: 10px 0;
  }
  .svc-filters__inner {
    position: relative;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  /* Fade en el borde derecho: insinúa que la fila se desliza (hay más chips). */
  .svc-filters__inner::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    background: linear-gradient(to right, transparent, var(--bg-deep));
    pointer-events: none;
  }
  .svc-chips {
    flex-wrap: nowrap;              /* una sola fila */
    overflow-x: auto;               /* scroll horizontal */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox: sin barra */
    scroll-snap-type: x proximity;
    gap: 8px;
    /* margen negativo + padding: el scroll llega a los bordes de la barra */
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-left)));
    padding: 2px max(16px, env(safe-area-inset-left));
  }
  .svc-chips::-webkit-scrollbar { display: none; }   /* Safari/Chrome: sin barra */
  .svc-chip {
    flex: 0 0 auto;                 /* no se encogen; mantienen su ancho */
    white-space: nowrap;            /* texto del chip en una línea */
    scroll-snap-align: start;
  }
}

.svc-group { padding: clamp(40px, 6vw, 72px) 0; }
.svc-group:nth-child(even) { background: var(--bg-mid); }
.svc-group__inner { width: min(1180px, 92vw); margin: 0 auto; }
.svc-group__head { margin-bottom: clamp(24px, 3vw, 40px); }
.svc-group__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.4vw, 2.375rem); color: var(--light); margin: 0 0 8px; }
.svc-group__sub { font-size: 16px; color: var(--soft); max-width: 56ch; }
.svc-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.svc-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.svc-card--movimiento { border-left-color: var(--accent); }
.svc-card__area {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-ink);
}
.svc-card--movimiento .svc-card__area { color: var(--accent-ink); }
.svc-card__title { font-size: 20px; color: var(--light); margin: 0; }
.svc-card__lead { font-size: 14.5px; line-height: 1.55; color: var(--soft); margin: 0; }
.svc-card__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.svc-card__actions .btn { padding: 12px 20px; font-size: 12px; }
.svc-card__detail { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; font-weight: 600; color: var(--soft); text-decoration: underline; }
.svc-card__detail:hover { color: var(--accent-ink); }
/* Toggle "Ver más/menos": afordancia SOLO móvil. Oculto de base → no aparece en
   desktop (el grid de desktop queda intacto, con el lead y el link siempre visibles). */
.svc-card__toggle { display: none; }

/* ============ /servicios · grilla compacta de 2 columnas + cards expandibles (SOLO móvil) ============
   Desktop no se toca: todo vive en este @media. La expansión usa la clase .is-expanded
   (ortogonal al filtro, que oculta cards con el atributo [hidden]). */
@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .svc-card { padding: 14px 13px; gap: 8px; }
  .svc-card__title { font-size: 15px; line-height: 1.2; }
  .svc-card__lead {
    font-size: 12.5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;                 /* colapsado: 2 líneas máx */
  }
  .svc-card__actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 4px; padding-top: 0; }
  .svc-card__actions .btn--primary { width: 100%; padding: 9px; font-size: 12px; justify-content: center; text-align: center; }
  .svc-card__toggle {
    display: block; width: 100%; padding: 7px; font-size: 12px;
    background: none; border: 1px solid var(--line); border-radius: 7px;
    color: var(--muted); cursor: pointer;
  }
  .svc-card__intro { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
  .svc-card__detail { font-size: 12px; }
  /* Colapsado: el link "Ver página" sólo aparece al expandir (sin tocar [hidden]) */
  .svc-card:not(.is-expanded) .svc-card__detail { display: none; }
  /* Expandida: ocupa el ancho completo de la fila y muestra el lead sin recorte */
  .svc-card.is-expanded { grid-column: 1 / -1; }
  .svc-card.is-expanded .svc-card__lead { -webkit-line-clamp: unset; overflow: visible; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  overflow: hidden;
  padding: 28px 0;
  background: var(--bg-mid);
}
.marquee__track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--light);
}
.marquee__track span:nth-child(even) {
  color: var(--accent-ink);
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 200;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 48px;
}
.section-head__num {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-ink);
  letter-spacing: -.01em;
}
.section-head__label {
  display: inline-flex; align-items: center;
  font-size: 14px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--soft);
}
.section-head__label::before {
  content: '';
  display: inline-block; width: 44px; height: 2px;
  border-radius: var(--r-xs);
  background: var(--accent);
  opacity: .55;
  vertical-align: middle;
  margin-right: 16px;
}
.section-head.light .section-head__label { color: var(--light); }
.section-head.light .section-head__num { color: var(--accent-ink); }

/* Reveal lines (titles) */
.reveal-line {
  display: block; overflow: hidden;
}
.reveal-line > * { display: inline-block; }
.reveal-line-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.in-view .reveal-line-inner { transform: translateY(0); }
.in-view .reveal-line:nth-child(2) .reveal-line-inner { transition-delay: .12s; }
.in-view .reveal-line:nth-child(3) .reveal-line-inner { transition-delay: .24s; }

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  position: relative;
  padding: 160px 0;
  overflow: hidden;
}

.pillar {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(202,240,248,.02);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.pillar:hover { border-color: var(--accent-ink); transform: translateY(-4px); background: rgba(0,193,188,.05); }
.pillar__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(0,193,188,.1);
  border-radius: var(--r-md);
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.pillar__icon svg { width: 22px; height: 22px; }
.pillar h4 { font-size: 15px; color: var(--light); margin-bottom: 6px; }
.pillar p { font-size: 13px; color: var(--muted); }

.area-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.area-card:hover { border-color: var(--accent-ink); transform: translateY(-4px); }
.area-card__tag {
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.area-card h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--light);
  font-weight: 500;
  margin: 8px 0 10px;
}
.area-card p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
.area-card__icon { display: block; margin-bottom: 6px; }
.area-card__icon svg { width: 32px; height: 32px; }
.area-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
  transition: gap .3s var(--ease);
}
.area-card:hover .area-card__link { gap: 14px; }

/* Salud = navy (var(--primary), theme-aware: #001854 claro / #6f8cc4 oscuro). Color
   como MARCADOR (tag/título/ícono/enlace), no relleno bajo texto -> AA ambos temas. */
.area-card--salud .area-card__tag,
.area-card--salud h3,
.area-card--salud .area-card__icon,
.area-card--salud .area-card__link { color: var(--primary); }
.area-card--salud:hover { border-color: var(--primary); }

.area-card--movimiento .area-card__tag,
.area-card--movimiento .area-card__icon,
.area-card--movimiento .area-card__link { color: var(--accent-ink); }
.area-card--movimiento h3 { color: var(--accent-2); }
.area-card--movimiento:hover { border-color: var(--accent-ink); }

.about__card {
  background: linear-gradient(160deg, var(--bg-soft), var(--bg-mid));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.about__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.ekg-line {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: ekg 4s linear infinite;
  filter: drop-shadow(0 0 6px var(--accent));
}
@keyframes ekg { to { stroke-dashoffset: -1500; } }

.num {
  display: block;
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--accent-ink);
  font-weight: 600;
}

.float-card {
  position: absolute;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  color: var(--accent-ink);
  animation: floatY 4s ease-in-out infinite;
}
.float-card strong { display: block; font-size: 13px; color: var(--light); }
.float-card span { font-size: 11px; color: var(--muted); }
.float-card.f1 { top: -20px; right: -20px; }
.float-card.f2 { bottom: -10px; left: -20px; animation-delay: 1.5s; color: var(--accent-ink); }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============================================================
   TELEMEDICINA
   ============================================================ */
.telemed {
  position: relative;
  padding: 160px 0;
  background: linear-gradient(180deg, var(--bg-mid), var(--bg-deep) 60%, var(--bg-mid));
  overflow: hidden;
}
.telemed__bg { position: absolute; inset: 0; pointer-events: none; }
.telemed__orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .35;
}
.telemed__orb.o1 { background: var(--primary); top: -200px; left: -100px; }
.telemed__orb.o2 { background: var(--accent); bottom: -200px; right: -100px; opacity: .25; }
.telemed__orb.o3 { background: var(--primary-2); top: 40%; left: 50%; opacity: .2; }

.telemed__inner {
  position: relative; z-index: 1;
  width: min(1280px, 92%);
  margin: 0 auto;
}
.telemed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1000px) { .telemed__grid { grid-template-columns: 1fr; gap: 60px; } }

.telemed__title {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 6vw, 5.625rem);
  line-height: 1;
  color: var(--light);
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 32px;
}
.telemed__title em { font-style: italic; color: var(--accent-ink); font-weight: 400; }
.telemed__lead {
  font-size: 17px;
  color: var(--light);
  font-weight: 300;
  margin-bottom: 40px;
  max-width: 540px;
}
.telemed__features {
  list-style: none;
  margin-bottom: 40px;
}
.telemed__features li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--light);
  font-size: 15px;
}
.telemed__features li svg { color: var(--accent-ink); flex-shrink: 0; }
.telemed__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Device mockup */
.telemed__right { position: relative; display: grid; place-items: center; }
.device {
  width: 100%; max-width: 360px;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 40px;
  border: 8px solid #1a2a3f;
  padding: 12px;
  position: relative;
  box-shadow: 0 40px 90px -30px rgba(26,31,46,.35), 0 0 0 1px rgba(0,193,188,.2);
  animation: deviceFloat 6s ease-in-out infinite;
}
@keyframes deviceFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(-1deg); }
}
.device__notch {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 18px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.device__screen {
  width: 100%; height: 100%;
  /* La pantalla del teléfono mantiene una UI de app oscura en AMBOS temas;
     por eso fija localmente tokens de texto claros para legibilidad. */
  background: linear-gradient(160deg, #072447, #021024);
  --light: #cfe6ff;
  --soft: #eaf3ff;
  --muted: rgba(207, 230, 255, 0.65);
  --line: rgba(207, 230, 255, 0.12);
  --on-accent: #021024;
  border-radius: 28px;
  padding: 30px 20px 16px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.device__call { display: flex; flex-direction: column; height: 100%; }
.device__doc {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
  margin-bottom: 16px;
}
.device__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.device__doc-info strong { display: block; color: var(--light); font-size: 12px; }
.device__doc-info span { font-size: 9px; color: var(--muted); letter-spacing: .1em; }
.device__live {
  font-size: 8px;
  color: #ff4d6d;
  letter-spacing: .15em;
  font-weight: 700;
  animation: liveBlink 1.5s ease-in-out infinite;
}
@keyframes liveBlink { 50% { opacity: .4; } }

.device__vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.vital {
  background: rgba(0,193,188,.08);
  border: 1px solid rgba(0,193,188,.2);
  border-radius: var(--r-md);
  padding: 8px 6px;
  text-align: center;
}
.vital span { font-size: 8px; color: var(--muted); letter-spacing: .15em; text-transform: uppercase; }
.vital strong { display: block; font-family: var(--font-serif); color: var(--light); font-size: 16px; margin-top: 2px; }
.vital small { font-size: 8px; color: var(--accent-ink); }
.vital-mini { width: 100%; height: 16px; margin-top: 4px; }

.device__chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 11px;
  line-height: 1.4;
  animation: bubbleIn .5s var(--ease-out) both;
}
.bubble.doc { background: rgba(202,240,248,.1); color: var(--light); align-self: flex-start; border-bottom-left-radius: var(--r-xs); }
.bubble.me { background: var(--accent); color: var(--on-accent); align-self: flex-end; border-bottom-right-radius: var(--r-xs); animation-delay: .8s; }
.bubble.typing { display: flex; gap: 4px; padding: 12px; animation-delay: 1.6s; }
.bubble.typing span {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  animation: typing 1.2s ease-in-out infinite;
}
.bubble.typing span:nth-child(2) { animation-delay: .2s; }
.bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.device__actions {
  display: flex; justify-content: center; gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.device__btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(202,240,248,.1);
  border-radius: 50%;
  color: var(--light);
  cursor: pointer;
}
.device__btn--end { background: #ff4d6d; color: white; }

.telemed__pings { position: absolute; inset: 0; pointer-events: none; }
.ping {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,193,188,.5);
  animation: ping 2.5s ease-out infinite;
}
.ping.p1 { top: 15%; left: 10%; }
.ping.p2 { top: 70%; right: 5%; animation-delay: .8s; }
.ping.p3 { bottom: 10%; left: 30%; animation-delay: 1.6s; }
@keyframes ping {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,193,188,.5); }
  100% { transform: scale(1); box-shadow: 0 0 0 40px rgba(0,193,188,0); }
}

/* ============================================================
   ÁREA SALUD  (tema turquesa de marca)
   ============================================================ */
.salud {
  position: relative;
  padding: 160px 0;
  background: linear-gradient(180deg, var(--bg-deep), var(--bg-mid));
  overflow: hidden;
}
.salud__orb {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  filter: blur(130px);
}
.salud__orb.so1 { background: var(--accent); opacity: .2; top: -180px; left: -120px; }
.salud__orb.so2 { background: var(--primary); opacity: .25; bottom: -200px; right: -120px; }

.salud-num { color: var(--accent-ink) !important; }
.salud .section-head__label { color: var(--accent-ink); }

.area-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.chip-link { cursor: pointer; outline: none; }
.chip-link:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }

.sal-service {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(0,193,188,.03);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.sal-service:hover {
  transform: translateY(-6px);
  border-color: var(--accent-ink);
  background: rgba(0,193,188,.08);
}
.sal-service svg {
  color: var(--accent-ink); margin-bottom: 18px;
  padding: 11px; width: 48px; height: 48px;
  background: rgba(0,193,188,.12);
  border-radius: var(--r-md);
}
.sal-service h4 {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--light);
  font-weight: 600;
  margin-bottom: 8px;
}
.sal-service p { font-size: 13px; color: var(--muted); line-height: 1.55; }

.program {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.program:hover { transform: translateY(-6px); border-color: var(--accent-ink); }
.program__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(0,193,188,.12);
  border-radius: var(--r-md);
  color: var(--accent-ink);
}
.program h4 {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--light);
  font-weight: 600;
  margin-bottom: 8px;
}
.program p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ============================================================
   ÁREA MOVIMIENTO  (tema turquesa de marca)
   ============================================================ */
.btn--primary {
  background: var(--accent);
  color: #1a1000;
  box-shadow: 0 8px 30px rgba(0, 193, 188,.35);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--accent-2);
  box-shadow: 0 14px 40px rgba(0, 193, 188,.5);
}

.mov {
  position: relative;
  padding: 160px 0;
  background: linear-gradient(180deg, var(--bg-mid), var(--bg-deep));
  overflow: hidden;
}
.mov__orb {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  filter: blur(130px);
}
.mov__orb.mo1 { background: var(--accent); opacity: .22; top: -180px; right: -120px; }
.mov__orb.mo2 { background: var(--primary); opacity: .25; bottom: -200px; left: -120px; }

.mov-num { color: var(--accent-ink) !important; }
.mov .section-head__label { color: var(--accent-ink); }
.mov .section-head__label::before { background: var(--accent); }
.salud .section-head__label::before { background: var(--accent); }
.team-area--ent .section-head__label::before { background: var(--accent); }

.mov-service {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(0, 193, 188,.03);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.mov-service:hover {
  transform: translateY(-6px);
  border-color: var(--accent-ink);
  background: rgba(0, 193, 188,.08);
}
.mov-service svg {
  color: var(--accent-ink); margin-bottom: 18px;
  padding: 11px; width: 48px; height: 48px;
  background: rgba(0, 193, 188,.12);
  border-radius: var(--r-md);
}
.mov-service h4 {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--light);
  font-weight: 600;
  margin-bottom: 8px;
}
.mov-service p { font-size: 13px; color: var(--muted); line-height: 1.55; }

.plan {
  display: flex; flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.plan:hover { transform: translateY(-6px); border-color: var(--accent-ink); }
.plan--featured {
  border-color: rgba(0, 193, 188,.5);
  background: var(--surface);
  position: relative;
}
.plan--featured::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.plan__badge {
  position: absolute;
  top: 20px; right: 24px;
  background: var(--accent);
  color: #1a1000;
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.plan__head { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.plan__head h3 {
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--light);
  font-weight: 600;
  margin-bottom: 6px;
}
.plan__head span { font-size: 12px; color: var(--muted); }
.plan__rows { list-style: none; flex: 1; margin-bottom: 24px; }
.plan__rows li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.plan__rows li:last-child { border-bottom: 0; }
.plan__rows li span { font-size: 13px; color: var(--light); letter-spacing: .02em; }
.plan__rows li strong {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--light);
  font-weight: 600;
  white-space: nowrap;
}
.plan__rows li strong small {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.plan__rows li.best { background: rgba(0, 193, 188,.08); border-radius: var(--r-md); padding: 12px; margin-top: 4px; }
.plan__rows li.best strong { color: var(--accent-2); }
.plan__cta {
  display: block;
  text-align: center;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--soft);
  transition: all .3s var(--ease);
}
.plan__cta:hover { background: var(--accent); border-color: var(--accent-ink); color: #1a1000; }
.plan--featured .plan__cta { background: var(--accent); border-color: var(--accent-ink); color: #1a1000; }
.plan--featured .plan__cta:hover { background: var(--accent-2); }
.plan--group .plan__rows li strong { font-size: 18px; }

.partners-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 20px;
}
.partner {
  flex: 1 1 200px;
  max-width: 260px;
  min-height: 110px;
  display: grid; place-items: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(0, 193, 188,.03);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.partner:hover { transform: translateY(-6px); border-color: var(--accent-ink); background: rgba(0, 193, 188,.07); }
.partner__logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .04em;
  color: var(--navy-soft);   /* contraste AA (antes --muted + opacity .7 → 2.91:1) */
  filter: grayscale(1);
  opacity: 1;
  transition: color .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease);
  text-align: center;
  line-height: 1.1;
}
.partner:hover .partner__logo { opacity: 1; filter: none; }
.partner__logo small {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  margin-top: 4px;
}
/* marca de color por partner al hover */
.partner--everlast:hover .partner__logo { color: #111111; }
.partner--ilus:hover .partner__logo { color: var(--primary); }
.partner--kinegun:hover .partner__logo { color: var(--accent-ink); }
.s-light .partner__logo { color: var(--navy-soft); }

/* ============================================================
   STATS
   ============================================================ */
.stats {
  padding: 100px 0;
  background: var(--bg-deep);
}
.stats__inner {
  width: min(1280px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 6vw, 6rem);
  color: var(--accent-ink);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(180deg, var(--accent), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   TEAM
   ============================================================ */
.team {
  padding: 160px 0;
}
.team__inner {
  width: min(1280px, 92%);
  margin: 0 auto;
}
.team__title {
  font-family: var(--font-serif);
  font-size: clamp(2.375rem, 5vw, 5rem);
  line-height: 1.02;
  color: var(--light);
  font-weight: 500;
  margin-bottom: 64px;
}
.team__title em { font-style: italic; color: var(--accent-ink); font-weight: 400; }

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.doctor {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: transform .5s var(--ease);
}
.doctor:hover { transform: translateY(-6px); }
.doctor__photo {
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: var(--r-lg);
  position: relative;
}
.doctor__photo svg { width: 100%; height: 100%; transition: transform .8s var(--ease); }
.doctor:hover .doctor__photo svg { transform: scale(1.08); }
.doctor__photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,16,31,.95));
}
.doctor__info {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;
}
.doctor__info strong {
  display: block;
  font-family: var(--font-serif);
  /* El nombre va sobre el degradado oscuro de la foto (::after) en ambos temas */
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 4px;
}
.doctor__info span {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ============================================================
   QUOTES
   ============================================================ */
.quotes {
  padding: 140px 0;
  background: var(--bg-mid);
  position: relative;
}
.quotes__inner {
  width: min(900px, 92%);
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.quotes__mark {
  width: 60px; height: 60px;
  color: var(--accent-ink);
  opacity: .4;
  margin: 0 auto 32px;
}
.quotes__track {
  position: relative;
  min-height: 200px;
}
.quote {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.quote.active { opacity: 1; position: relative; }
.quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.4;
  color: var(--light);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 24px;
}
.quote cite {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.quotes__dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 32px;
}
.quotes__dots button {
  width: 24px; height: 2px;
  background: var(--line-strong);
  transition: background .3s var(--ease);
}
.quotes__dots button.active { background: var(--accent); }

/* ============================================================
   CTA
   ============================================================ */
.cta {
  padding: 160px 0;
  background: var(--bg-deep);
  position: relative;
}
.cta__inner {
  width: min(800px, 92%);
  margin: 0 auto;
  text-align: center;
}
.cta__title {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 6vw, 6.25rem);
  line-height: 1;
  color: var(--light);
  font-weight: 500;
  margin-bottom: 24px;
}
.cta__title em { font-style: italic; color: var(--accent-ink); font-weight: 400; }
.cta__sub {
  font-size: 17px;
  color: var(--light);
  max-width: 500px;
  margin: 0 auto 56px;
}
.cta__form {
  text-align: left;
  display: grid;
  gap: 20px;
  position: relative;
}
.cta__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .cta__row { grid-template-columns: 1fr; } }
.cta__form label {
  display: flex; flex-direction: column;
  gap: 8px;
}
.cta__form label span {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}
.cta__form input,
.cta__form select,
.cta__form textarea {
  font: inherit;
  background: rgba(202,240,248,.04);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  color: var(--light);
  outline: none;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  font-size: 15px;
  font-family: var(--font-sans);
  resize: vertical;
}
.cta__form input:focus,
.cta__form select:focus,
.cta__form textarea:focus {
  border-color: var(--accent-ink);
  background: rgba(0,193,188,.05);
}
.cta__form select option { background: var(--bg-deep); }
.cta__sent {
  display: none;
  padding: 16px;
  background: rgba(0,193,188,.1);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  color: var(--accent-ink);
  text-align: center;
}
.cta__form.sent .cta__sent { display: block; }
.cta__form.sent button[type="submit"] { display: none; }

.cta__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.cta__info strong {
  display: block;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 6px;
}
.cta__info span {
  font-size: 14px;
  color: var(--light);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-mid);
  padding: 80px 0 32px;
}
.footer__inner {
  width: min(1280px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 80px;
  margin-bottom: 60px;
}
@media (max-width: 800px) { .footer__inner { grid-template-columns: 1fr; gap: 40px; } }
.footer__brand p {
  color: var(--muted);
  font-size: 14px;
  max-width: 320px;
  margin-top: 16px;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 600px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
.footer__cols h2 {
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.footer__cols a {
  display: block;
  font-size: 14px;
  color: var(--soft);
  padding: 6px 0;
  transition: color .3s var(--ease), padding .3s var(--ease);
}
.footer__cols a:hover { color: var(--accent-ink); padding-left: 6px; }

.footer__bottom {
  width: min(1280px, 92%);
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .1em;
}

/* ============================================================
   PÁGINA INTERNA (Nosotros)
   ============================================================ */
.hero--page { min-height: 82vh; min-height: 82svh; }
.hero--page .hero__title { max-width: 14ch; }

/* Hero de página interna: identidad turquesa para diferenciarse del home */
.hero--mov .hero__overlay {
  background: var(--hero-overlay);
}
.hero--mov .hero__title .word.accent {
  background: linear-gradient(120deg, var(--accent), var(--accent-2), #ffd9a6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--mov .hero__tag .dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 193, 188,.2);
  animation: tagDotMov 2s var(--ease) infinite;
}
@keyframes tagDotMov {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 193, 188,.2); }
  50% { box-shadow: 0 0 0 10px rgba(0, 193, 188,0); }
}
.hero--mov .breadcrumb a { color: var(--accent-ink); }
.hero--mov .hero__scroll-line div { background: linear-gradient(180deg, transparent, var(--accent)); }

.breadcrumb {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.breadcrumb a { color: var(--accent-ink); }
.breadcrumb span { opacity: .5; }

.philos__orb {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  filter: blur(130px); background: var(--accent); opacity: .18;
  top: -160px; right: -120px; pointer-events: none;
}
.philos-card {
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.philos-card:hover { transform: translateY(-6px); border-color: var(--accent-ink); box-shadow: var(--shadow-2); }
.philos-card h3 {
  font-family: var(--font-serif); font-size: 28px; color: var(--light);
  font-weight: 600; margin: 12px 0 14px;
}
.philos-card p { font-size: 16px; color: var(--light); font-weight: 300; line-height: 1.65; }

/* Tarjetas de servicio interactivas (mov-service / sal-service) */
.svc-open { cursor: pointer; position: relative; display: flex; flex-direction: column; }
.svc-open:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent); }
.svc-open p { flex: 1; }
.svc-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-ink);
  transition: gap .3s var(--ease);
}
.svc-open:hover .svc-more { gap: 12px; }
.team-area--ent .svc-more, .mov .svc-more { color: var(--accent-ink); }

/* Modal de servicio */
.svcmodal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.svcmodal.open { opacity: 1; visibility: visible; }
.svcmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2,16,36,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.svcmodal__card {
  position: relative; z-index: 1;
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: #ffffff; color: #33373d;
  border-radius: var(--r-xl); padding: 40px;
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  transform: translateY(20px) scale(.98);
  transition: transform .4s var(--ease-out);
}
.svcmodal.open .svcmodal__card { transform: none; }
@media (max-width: 520px) { .svcmodal__card { padding: 28px; } }
.svcmodal__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #f1f6fb; color: #1a1d22;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.svcmodal__close:hover { background: #e4ecf5; transform: rotate(90deg); }
.svcmodal__icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 20px;
  background: rgba(0, 193, 188,.12); color: var(--svc-accent);
}
.svcmodal__tag {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  color: var(--svc-accent);
}
.svcmodal__title {
  font-family: var(--font-serif); font-size: 28px; font-weight: 700;
  color: #1a1d22; margin: 6px 0 12px;
}
.svcmodal__desc { font-size: 15px; line-height: 1.7; color: #4a4f57; margin-bottom: 20px; }
.svcmodal__list { list-style: none; margin-bottom: 28px; display: grid; gap: 12px; }
.svcmodal__list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: #33373d; line-height: 1.5;
}
.svcmodal__list svg { color: var(--svc-accent); flex-shrink: 0; margin-top: 2px; }
.svcmodal__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.svcmodal__actions .btn--ghost { color: #33373d; border-color: rgba(20,25,35,.2); }
.svcmodal__actions .btn--ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/* La tarjeta del modal es blanca FIJA en ambos temas → el acento se fija con valores
   claros (AA sobre blanco), no con tokens theme-aware (que en oscuro se aclaran y
   fallarían). Turquesa por defecto (Movimiento); teal para Salud/Telemed (.svcmodal--teal). */
.svcmodal { --svc-accent: #0a6f6a; }            /* turquesa · 5.34:1 sobre blanco (AA) */
.svcmodal--teal { --svc-accent: #0a6f6a; }      /* teal · 6.01:1 sobre blanco (AA) */
.svcmodal--teal .svcmodal__icon { background: rgba(0,193,188,.12); }

/* ============================================================
   ÁREAS QUE SE COMPLEMENTAN (Salud + Movimiento juntas)
   ============================================================ */
.areas { padding: 140px 0; position: relative; }
.areas__inner { width: min(1280px, 92%); margin: 0 auto; }
.areas__head { max-width: 760px; margin-bottom: 56px; }
.areas__title {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 5vw, 4.5rem);
  line-height: 1.02; font-weight: 600; letter-spacing: -.02em;
  color: var(--light); margin-bottom: 24px;
}
.areas__title em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(120deg, var(--accent), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.areas__lead { font-size: 17px; color: var(--light); font-weight: 300; }

.areas__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px; align-items: stretch;
}
@media (max-width: 900px) { .areas__pair { grid-template-columns: 1fr; gap: 20px; } }

.area-panel {
  display: flex; flex-direction: column;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.area-panel:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(20,25,35,.1); }
.area-panel h3 {
  font-family: var(--font-serif); font-size: 26px; font-weight: 600;
  color: var(--light); margin: 10px 0 12px;
}
.area-panel p { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.area-panel .salud__disciplines,
.area-panel .mov__disciplines { margin-bottom: 26px; }
.area-panel .area-cta { margin-top: auto; }

.areas__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
@media (max-width: 900px) { .areas__link { flex-direction: row; padding: 6px 0; } }
.areas__plus {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 30px; font-weight: 700; line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  box-shadow: 0 12px 30px rgba(0,193,188,.3);
}
.areas__link-label {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.areas__note {
  text-align: center; margin-top: 48px;
  font-size: 14px; letter-spacing: .04em; color: var(--muted);
}
.areas__note strong { color: var(--light); font-weight: 700; }

/* Cómo funciona (pasos) — Telemedicina */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: 32px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(0,193,188,.04);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.step:hover { transform: translateY(-6px); border-color: var(--accent-ink); }
.step__num {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-deep);
  font-family: var(--font-serif);
  font-weight: 700; font-size: 20px;
  margin-bottom: 18px;
}
.step h4 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--light); margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* Equipo por áreas */
.team-area { margin-top: 64px; }
.team-area:first-of-type { margin-top: 8px; }
.team-area__title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-serif); font-size: 24px; font-weight: 600;
  color: var(--light); margin-bottom: 28px;
}
.team-area__title small {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}
.team-area__title::before {
  content: ''; width: 30px; height: 3px; border-radius: var(--r-xs); background: var(--accent);
}
.team-area--ent .team-area__title::before { background: var(--accent); }
.team-area--kine .team-area__title::before { background: var(--primary); } /* Kinesiología = Salud (azul) */
.team-area--nutri .team-area__title::before { background: var(--primary); }
/* Especialidad bajo la foto: va sobre el overlay OSCURO de .doctor__photo
   (rgba(4,16,31,.95)) en ambos temas → tono de marca brillante, no tinta. */
.team-area--ent .doctor__info span { color: var(--accent-ink); } /* texto AA en claro (#0a6f6a); en oscuro = var(--accent), idéntico */
.team-area--kine .doctor__info span { color: var(--primary); } /* Kinesiología = Salud (azul) */
.team-area--nutri .doctor__info span { color: var(--primary); }
.team-area--med .team-area__title::before { background: var(--primary); }
.team-area--med .doctor__info span { color: var(--primary); }
.team-area--osteo .team-area__title::before { background: var(--accent-2); }
.team-area--osteo .doctor__info span { color: var(--accent-2); }
.team-area--psico .team-area__title::before { background: var(--primary-2); }
.team-area--psico .doctor__info span { color: var(--primary-2); }
.doctor__photo text { font-family: var(--font-serif); }
/* evita que una sola tarjeta se estire a todo el ancho */
.team-area--nutri .team__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); }

/* tarjeta de especialista clickeable */
.doctor--open { cursor: pointer; outline: none; }
.doctor--open:focus-visible { box-shadow: 0 0 0 3px var(--accent); border-radius: var(--r-lg); }
.doctor__view {
  position: absolute; left: 24px; bottom: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.3);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: #fff; opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.doctor--open:hover .doctor__view,
.doctor--open:focus-visible .doctor__view { opacity: 1; transform: translateY(0); }
/* el nombre/rol se mueve arriba para dejar espacio al chip "ver perfil" */
.doctor--open:hover .doctor__info { transform: translateY(-44px); }
.doctor__info { transition: transform .35s var(--ease); }

/* ============================================================
   MODAL ESPECIALISTA · equipo.html (poblado por equipo.js)
   Blanco en AMBOS temas (consistente con mega-menú/chooser) → los colores van
   HARDCODEADOS para no invertirse en dark. SIN backdrop-filter (regla iOS dura).
   Desktop: foto fija a la izquierda, scrollea SOLO el cuerpo. Móvil: 1 columna,
   foto arriba, scrollea toda la tarjeta. Informativo → sin botón de agendar.
   ============================================================ */
.smodal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.smodal.open { opacity: 1; visibility: visible; }
.smodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(2,16,36,.72);
}
.smodal__card {
  position: relative; z-index: 1;
  width: min(760px, 100%); max-height: 90vh; overflow: hidden;
  background: #ffffff; color: #33373d;
  border-radius: var(--r-xl);
  display: grid; grid-template-columns: 260px 1fr;
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  transform: translateY(20px) scale(.98);
  transition: transform .35s var(--ease-out);
}
.smodal.open .smodal__card { transform: none; }

/* Foto FLOTANTE (cutout PNG con alfa) — SIN panel de fondo: la persona se ve sobre
   el blanco del modal. `contain` la muestra completa; drop-shadow (sigue la silueta)
   le da el efecto de flotar. Iniciales → círculo flotante con su gradiente. */
.smodal__photo {
  overflow: hidden; align-self: stretch; min-height: 260px;
  display: flex; align-items: center; justify-content: center; padding: 22px 8px;
}
.smodal__img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  display: block; max-height: 86vh;
  filter: drop-shadow(0 14px 24px rgba(16, 52, 62, .30));
}
.smodal__mono {
  width: 158px; height: 158px; border-radius: 50%; margin: auto;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 62px;
  color: #fff; letter-spacing: .03em;
  box-shadow: 0 18px 30px -14px rgba(16, 52, 62, .45);
}

/* Botón cerrar */
.smodal__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: #1a1d22;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: background .2s var(--ease), transform .25s var(--ease);
}
.smodal__close:hover { background: #fff; transform: rotate(90deg); }

/* Cuerpo — único que scrollea en desktop (la foto queda fija) */
.smodal__body { padding: 40px; overflow: auto; max-height: 90vh; }
.smodal__area { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: #0a6f6a; margin: 0; }
.smodal__name { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: #1a1d22; margin: 8px 0 4px; line-height: 1.15; }
.smodal__role { font-size: 13px; letter-spacing: .03em; color: #2b3a5c; font-weight: 600; margin: 0 0 18px; }
.smodal__reg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: #0a6f6a; margin: 0 0 18px; }
.smodal__reg a { color: #0a6f6a; text-decoration: underline; }

/* Ficha clonada del pro-card → colores oscuros forzados (el modal es siempre blanco) */
.smodal__content .pro-card__bio,
.smodal__content .pro-card__cef,
.smodal__content .pro-card__list { color: #4a4f57; }
.smodal__content .pro-card__bio { font-size: 15px; line-height: 1.7; margin: 0 0 4px; }
.smodal__content .pro-card__cef { font-size: 15px; line-height: 1.7; margin: 0; }
.smodal__content .pro-card__list { font-size: 14px; line-height: 1.6; }
.smodal__content .pro-card__label { color: #0a6f6a; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 20px 0 8px; }

/* Móvil: 1 columna, foto arriba, scrollea toda la tarjeta; cerrar fijo al viewport */
@media (max-width: 640px) {
  .smodal { padding: 14px; }
  .smodal__card { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
  .smodal__photo { min-height: 250px; max-height: 320px; align-self: auto; padding: 18px 8px 0; }
  .smodal__img { max-height: 300px; }
  .smodal__mono { width: 140px; height: 140px; font-size: 56px; }
  .smodal__body { overflow: visible; max-height: none; padding: 26px 22px 30px; }
  .smodal__close { position: fixed; top: 22px; right: 22px; }
}

/* ============================================================
   TEMA CLARO POR SECCIONES — paleta original CEF (cefchile.cl)
   Fondo blanco / gris claro, texto gris oscuro,
   acentos azul (#046bd2) · turquesa (#00c1bc) · turquesa (#00c1bc)
   ============================================================ */
/* Las secciones .s-light ahora SIGUEN el tema global (claro u oscuro)
   vía los tokens; ya no fuerzan claro. */
.s-light {
  background: var(--s-light-bg);
  color: var(--soft);
}
.s-light.s-grey { background: var(--s-light-bg-grey); }

/* Pilares */
.s-light .pillar { background: var(--surface); box-shadow: var(--shadow-1); }
.s-light .pillar:hover { background: var(--surface); border-color: var(--accent-ink); box-shadow: var(--shadow-2); }

/* Tarjeta monitor: se mantiene oscura (como un dispositivo) en ambos temas */
.s-light .about__card {
  --light: #cfe6ff;
  --soft: #eaf3ff;
  --muted: rgba(207,230,255,.65);
  --line:  rgba(207,230,255,.12);
  background: linear-gradient(160deg, #072447, #04162e);
  box-shadow: 0 30px 70px -28px rgba(26,31,46,.30);
}
/* Chips flotantes */
.s-light .float-card {
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

/* Orbes de fondo más sutiles */
.s-light .salud__orb, .s-light .mov__orb { opacity: .1; }

/* Servicios / programas de área (fondo plano blanco) */
.s-light .program { background: var(--surface); }

/* Planes de Movimiento */
.s-light .plan { background: var(--surface); box-shadow: var(--shadow-1); }
.s-light .plan--featured { background: var(--surface); }

/* Equipo: el nombre va sobre el degradado de color de la foto (siempre claro) */
.s-light .doctor__info strong { color: #ffffff; }
.s-light .doctor__info span { color: var(--accent); }

/* Citas */
.s-light .quotes__dots button { background: var(--line-strong); }

/* ============================================================
   CAPA CINEMATOGRÁFICA (global)
   ============================================================ */

/* Barra de progreso de scroll */
.scrollbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
  z-index: 200; will-change: transform;
  box-shadow: 0 0 12px rgba(0,193,188,.4);
}

/* Gradientes animados (shimmer) en acentos */
.areas__title em, .hero__title .word.accent, .areas__plus {
  background-size: 220% auto;
  animation: gradShift 7s ease infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Reveal cinematográfico (escala + desenfoque sutil) */
.cine {
  opacity: 0;
  transform: translateY(48px) scale(.97);
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  will-change: transform, opacity, filter;
}
.cine.in {
  opacity: 1; transform: none; filter: blur(0);
}

/* Brillo que recorre las tarjetas al pasar el mouse */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease);
  pointer-events: none; z-index: 4;
}
.shine:hover::after { left: 140%; }
/* en tarjetas oscuras el brillo es más tenue */
.plan .shine::after, .step.shine::after { background: linear-gradient(100deg, transparent, rgba(0,193,188,.18), transparent); }

/* Viñeta cinematográfica en secciones oscuras */
.hero::after, .telemed::after, .cta::after, .philos::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.38) 100%);
}
.hero__content, .telemed__inner, .cta__inner, .philos__inner { position: relative; z-index: 5; }

/* Parallax suave por defecto */
[data-cine-parallax] { will-change: transform; }

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;   /* corta marquee/grain/floats infinitos */
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- MÓVIL · TOUCH TARGETS (P2 #6) — ≥44px (Apple), separación ≥8px -----
   El reduced-motion global (arriba) y el contraste AA de marca (navy↔turquesa y
   texto on-accent sobre turquesa, ~7:1) ya cumplen. Aquí subimos a ≥44px los
   controles que quedaban por debajo en móvil. Solo ≤768px; desktop intacto. */
@media (max-width: 768px) {
  .nav__theme { width: 44px; height: 44px; }   /* era 40px → 44 (Apple HIG) */
}

/* ============================================================
   SISTEMA DE CONTENEDOR UNIFICADO
   Mismo ancho máximo (--container) y mismo gutter horizontal
   (--gutter) en nav, footer y TODOS los *__inner. Las <section>
   dejan solo el padding vertical; el horizontal lo aporta el
   __inner. Así el borde de contenido coincide en todo el sitio.
   ============================================================ */
.nav__inner, .footer__inner,
.cine-hero__inner, .cine-manifesto__inner, .cine-synergy__inner,
.cine-telemed__inner, .cine-method__inner, .cine-stats__inner,
.cine-team__inner, .cine-cta__inner, .cine-sec__inner,
.entr-hero__inner, .entr-manifiesto__inner, .entr-trainer__inner,
.entr-outro__inner,
.about__inner, .telemed__inner, .salud__inner, .mov__inner,
.stats__inner, .team__inner, .quotes__inner, .cta__inner,
.philos__inner, .areas__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Excepción intencional: el bloque de citas es más angosto, pero
   sigue centrado y dentro del mismo gutter (no lo rompe). */
.cine-quotes__inner {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   Botones de equipo · color por disciplina
   ============================================================ */
.btn--team {
  background: transparent;
  border: 1px solid;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--team::before {
  content: '';
  position: absolute; inset: 0;
  /* Relleno del botón: separado de --team (identidad/borde) para poder darle
     un navy PROFUNDO donde el texto claro deba contrastar (ver .btn--salud). */
  background: var(--team-fill, var(--team));
  transform: translateY(101%);
  transition: transform .45s var(--ease);
  z-index: -1;
}
.btn--team:hover,
.btn--team:focus-visible {
  border-color: var(--team);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px var(--team-glow);
}
.btn--team:hover::before,
.btn--team:focus-visible::before { transform: translateY(0); }
/* El relleno sube también al PRESIONAR — sirve en móvil/tap */
.btn--team:active { border-color: var(--team); }
.btn--team:active::before { transform: translateY(0); }

.btn--salud {
  --team: var(--primary);                                      /* identidad/borde (navy) */
  --team-glow: color-mix(in srgb, var(--primary) 50%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: #dcecff;
}
.btn--salud:hover,
.btn--salud:focus-visible { color: #fff; }

/* OSCURO: el relleno necesita ser navy PROFUNDO para que el texto claro
   contraste (el --primary #6f8cc4 es demasiado claro: #fff sobre él = 3.37:1).
   #1a2d6b → #fff = 12.87:1 (AAA). El borde/glow siguen en --primary (visibles). */
:root[data-theme="dark"] .btn--salud { --team-fill: #1a2d6b; }

.btn--mov {
  /* Movimiento en TURQUESA (su identidad de área) */
  --team: var(--accent);
  --team-glow: rgba(0, 193, 188, .5);
  border-color: rgba(0, 193, 188, .6);
  color: #cdf6f3;
}
.btn--mov:hover,
.btn--mov:focus-visible,
.btn--mov:active { color: var(--on-accent); }

/* ============================================================
   LEGIBILIDAD TEMA CLARO · íconos brillantes + acentos -2 de texto
   ============================================================ */
.pillar__icon,
.telemed__features li svg,
.sal-service svg,
.program__icon { color: var(--accent); }
.mov-service svg { color: var(--accent); }
/* .svcmodal__icon / .svcmodal__list svg NO van aquí: la tarjeta del modal es blanca
   fija en ambos temas; usa --svc-accent (fijo, AA sobre blanco) — ver bloque svcmodal. */

/* --accent-2 / --acento-2 usados como TEXTO → solo fijan el claro */
:root[data-theme="light"] .area-card--movimiento h3,
:root[data-theme="light"] .plan__rows li.best strong,
:root[data-theme="light"] .mov__title em { color: var(--accent-ink); }

/* ============================================================
   TEMA CLARO · botones Equipo CEF: tapar bleed-through del DNA
   El .cef-bg (DNA global) se veía a través del botón ghost. Se le
   da fondo de pill semiopaco y se reordena el apilamiento:
   fondo del botón < relleno ::before (hover) < texto.
   Solo [data-theme="light"] → el oscuro no cambia.
   ============================================================ */
:root[data-theme="light"] .btn--team {
  position: relative;
  isolation: isolate;          /* contexto de apilamiento propio */
  overflow: hidden;            /* el relleno respeta el pill */
  border-width: 1.5px;
  background: var(--surface-pill);              /* tapa el DNA detrás */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root[data-theme="light"] .btn--team > span { position: relative; z-index: 2; }
:root[data-theme="light"] .btn--team::before { z-index: 1; }   /* override del -1 */
:root[data-theme="light"] .btn--salud { color: var(--primary-2); border-color: var(--primary); }
:root[data-theme="light"] .btn--mov   { color: var(--accent-ink); border-color: var(--accent-ink); }

/* Texto NEGRO en todos los estados (solo claro). El prefijo [data-theme="light"]
   gana especificidad sobre el color:#fff / --on-accent del hover/active.
   El <span> hereda el color, así que basta con esto. */
:root[data-theme="light"] .btn--team,
:root[data-theme="light"] .btn--team:hover,
:root[data-theme="light"] .btn--team:focus-visible,
:root[data-theme="light"] .btn--team:active,
:root[data-theme="light"] .btn--salud,
:root[data-theme="light"] .btn--salud:hover,
:root[data-theme="light"] .btn--salud:focus-visible,
:root[data-theme="light"] .btn--salud:active,
:root[data-theme="light"] .btn--mov,
:root[data-theme="light"] .btn--mov:hover,
:root[data-theme="light"] .btn--mov:focus-visible,
:root[data-theme="light"] .btn--mov:active {
  color: #111;   /* negro en todos los estados */
}

/* EXCEPCIÓN: .btn--salud se RELLENA de navy (#001050) al interactuar, así que
   su texto en los estados rellenos debe ser BLANCO (negro #111 sobre navy =
   1.1:1; #fff sobre #001050 = 17.6:1 AAA). Va DESPUÉS del bloque #111 para
   ganar por orden (misma especificidad). El reposo sigue #111 sobre el pill. */
:root[data-theme="light"] .btn--salud:hover,
:root[data-theme="light"] .btn--salud:focus-visible,
:root[data-theme="light"] .btn--salud:active {
  color: #fff;
}

/* Preloader gateado: en móvil (≤768) y con reduce-motion NO se muestra
   → contenido visible de inmediato (mejor FCP/LCP). Desktop: intacto. */
@media (max-width: 768px) {
  #preloader { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #preloader { display: none !important; }
}

/* ============================================================
   RESERVA ONLINE (Fase 3) · FAB escritorio + barra móvil + modal lazy
   Jerarquía z-index: preloader(9999) > modal abierto(9000) > nav/FAB(110) > contenido
   ============================================================ */

/* FAB WhatsApp flotante — círculo verde abajo-derecha, en ESCRITORIO y MÓVIL.
   Único FAB: Agendar vive en el header (.nav__cta en desktop, .nav__agendar-mobile
   en móvil). Autosuficiente (ya no hereda de un .booking__fab base). */
.booking__fab--wa {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 110;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  color: var(--white); background: var(--wa-green);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.4), 0 2px 8px rgba(2, 16, 36, 0.2);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.booking__fab--wa:hover { background: var(--wa-green-strong); box-shadow: 0 20px 44px rgba(37, 211, 102, 0.55); }
.booking__fab--wa:focus-visible { outline: 3px solid #128c3e; outline-offset: 3px; }
.booking__fab--wa svg { flex-shrink: 0; }

/* Fallback de reserva (medilinkUrl vacío) — usado por /agendar (.agendar__mount). */
.bk-empty { margin: auto; max-width: 420px; text-align: center; padding: 36px 28px; }
.bk-empty__msg {
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  color: #1a1d22; margin: 0 0 10px;
}
.bk-empty__sub { font-size: 15px; line-height: 1.6; color: #4a4f57; margin: 0 0 22px; }

/* Página utilitaria /agendar */
.agendar {
  position: relative; z-index: 1; min-height: 72vh;
  display: grid; place-items: center; padding: 150px 24px 110px;
}
/* Ancho del marco: SOLO aplica a /agendar (.agendar__inner). max-width + margin auto
   + place-items:center en .agendar -> en monitores anchos queda centrado, no estirado
   de borde a borde. La banda y los pasos van centrados; el layout, alineado a la izq. */
.agendar__inner { width: min(1040px, 100%); margin: 0 auto; text-align: center; }
.agendar__back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-ink); font-weight: 600; margin-bottom: 28px;
}
.agendar__back:hover { color: var(--accent); }

/* Banda de encabezado de área. Color FIJO (#001854 navy / #0a6f6a turquesa) con texto
   blanco -> AA en claro Y oscuro (var(--primary) en oscuro es #6f8cc4 y fallaría como
   relleno bajo blanco). Turquesa solo si ?area=movimiento (vía body[data-agenda-area]). */
.agendar__band {
  background: #001854; border-radius: var(--r-xl);
  padding: 36px 28px; margin-bottom: 24px;
}
.agendar__area-label {
  display: inline-block; margin: 0 0 8px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  color: #fff;
}
.agendar__band .agendar__title {
  font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700; color: #fff; margin: 0;
}
.agendar__band-sub { font-size: 16px; line-height: 1.5; color: #fff; margin: 10px 0 0; }

/* Pasos 1-2-3 (orientativos, no interactivos; el flujo real ocurre en el widget). */
.agendar__steps {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin: 0 0 32px; padding: 0;
}
.agendar__steps li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--light);
}
.agendar__step-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: #0a6f6a; color: #fff; /* deep teal fijo -> blanco AA en ambos temas */
}

/* Layout: widget + columna de contexto (desktop) / apilado, columna abajo (móvil). */
.agendar__layout { display: grid; gap: 24px; text-align: left; }
.agendar__main { min-width: 0; }
.agendar__mount {
  background: #fff; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 30px 90px rgba(2, 16, 36, 0.28);
  min-height: 260px; display: flex;
  position: relative;
}
.agendar__mount .bk-empty { margin: auto; }
/* Iframe del widget (cuando medilinkUrl tiene valor). Alto reservado -> 0 CLS. */
.agendar__frame { width: 100%; height: min(78vh, 640px); border: 0; display: block; }

/* Skeleton del widget: shimmer CSS puro mientras el iframe carga. Lo oculta el
   script de agendar.njk en el evento `load`. Respeta prefers-reduced-motion. */
.agendar__skeleton {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px; background: #fff;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.agendar__skeleton.is-hidden { opacity: 0; visibility: hidden; }
.agendar__skeleton-line,
.agendar__skeleton-grid > span {
  background: linear-gradient(100deg, #eef2f7 30%, #dce4ee 50%, #eef2f7 70%);
  background-size: 200% 100%;
  animation: agendaShimmer 1.3s ease-in-out infinite;
  border-radius: 8px;
}
.agendar__skeleton-line { height: 16px; }
.agendar__skeleton-line--title { height: 26px; width: 55%; }
.agendar__skeleton-grid {
  margin-top: auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.agendar__skeleton-grid > span { height: 46px; }
@keyframes agendaShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .agendar__skeleton-line,
  .agendar__skeleton-grid > span { animation: none; }
}
.agendar__alt { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.agendar__alt a { color: var(--accent-ink); font-weight: 600; }

/* Columna de contexto */
.agendar__context {
  border: 1px solid rgba(128, 140, 160, 0.22);
  border-radius: var(--r-lg);
  background: rgba(128, 140, 160, 0.05);
  padding: 4px 18px; align-self: start;
}
.agendar__ctx {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid rgba(128, 140, 160, 0.16);
}
.agendar__ctx:last-child { border-bottom: 0; }
.agendar__ctx-icon { flex: 0 0 auto; color: var(--accent-ink); margin-top: 1px; }
.agendar__ctx-title {
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  color: var(--light); margin: 0 0 3px;
}
.agendar__ctx p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.agendar__ctx a { color: var(--accent-ink); font-weight: 600; }

@media (min-width: 900px) {
  .agendar__layout { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
}

/* La barra inferior fija se ELIMINÓ: WhatsApp es ahora un FAB flotante (.booking__fab--wa,
   arriba) y Agendar vive en el header. Ya no se reserva alto full-width: el FAB es de esquina.
   Solo damos un poco de aire al final del footer en móvil para que el FAB (esquina inferior
   derecha) no tape la última línea. Menos que la barra vieja (que reservaba ~72px full-width). */
@media (max-width: 768px) {
  .footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* Respeta reduced-motion: sin transiciones ni desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .booking__fab--wa {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   ACCESIBILIDAD (Fase 4) · skip-link, foco visible, landmark main
   ============================================================ */

/* Anillo de foco con contraste en AMBOS temas (no el --accent débil en claro) */
:root { --focus-ring: var(--accent-ink); }            /* claro: #0a6f6a (~5.6:1) */
:root[data-theme='dark'] { --focus-ring: #5fe0da; }   /* oscuro: turquesa claro, alto contraste */

main {
  display: block;
}

/* Skip-link: oculto hasta recibir foco; por encima del preloader */
/* Solo para lectores de pantalla (anuncios visualmente ocultos). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  transform: translateY(-160%);
  padding: 12px 20px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(2, 16, 36, 0.35);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Baseline de foco visible para TODO lo interactivo que no traiga el suyo */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Sin anillo al click/touch (solo teclado) */
:focus:not(:focus-visible) {
  outline: none;
}
/* <main> recibe foco programático (skip-link) SIN anillo permanente */
#main:focus,
#main:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none !important;
  }
}

/* ============================================================
   LANDINGS POR ESPECIALIDAD (Fase 6)
   ============================================================ */
.spec-includes {
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin: 28px 0 0;
}
.spec-includes li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--light);
}
.spec-includes svg {
  flex-shrink: 0;
  color: var(--accent-ink);
  margin-top: 2px;
}
.cine-sec--mov .spec-includes svg {
  color: var(--accent-ink);
}
.spec-team {
  max-width: 720px;
  margin-top: 32px;
  font-size: 16px;
  color: var(--muted);
}
.spec-team a {
  color: var(--accent-ink);
  font-weight: 600;
}
.cine-sec--mov .spec-team a {
  color: var(--accent-ink);
}
/* Párrafo introductorio ("¿Qué encontrarás aquí?") */
.spec-intro {
  max-width: 760px;
  margin: 24px 0 0;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.8;
  color: var(--light);
}
/* Subtítulo dentro de una sección (p. ej. "Áreas de atención" en Medicina) */
.spec-subtitle {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 0;
  color: var(--light);
}
/* Chips de áreas de atención (solo Medicina) */
.spec-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin: 18px 0 0;
}
.spec-areas__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--accent-ink);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--light);
}
.cine-sec--mov .spec-areas__chip { border-color: var(--accent-ink); }
/* Especialistas: fichas expandibles (<details>) con bio completa. Colapsadas por
   defecto para que páginas con 4 no queden larguísimas. Sin foto aún (inicial). */
.spec-team-hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.spec-team-grid {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin: 24px 0 0;
}
.spec-pro {
  border: 1px solid rgba(128, 140, 160, 0.25);
  border-radius: var(--r-lg);
  background: rgba(128, 140, 160, 0.06);
  overflow: hidden;
}
.spec-pro__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.spec-pro__head::-webkit-details-marker { display: none; }
/* Ficha estática (especialista sin perfil que mostrar, p. ej. bio pendiente): mismo
   look que la expandible pero sin chevron ni cursor de clic. Ver especialidad.njk. */
.spec-pro--static .spec-pro__head { cursor: default; }
.spec-pro__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  background: rgba(0, 193, 188, 0.14);
  color: var(--light);
}
.cine-sec--mov .spec-pro__avatar { background: rgba(0, 193, 188, 0.14); }
.spec-pro__id { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.spec-pro__name { font-size: 17px; font-weight: 700; color: var(--light); }
.spec-pro__role { font-size: 13px; color: var(--muted); }
.spec-pro__chev { flex: 0 0 auto; color: var(--muted); transition: transform 0.3s var(--ease); }
.spec-pro[open] .spec-pro__chev { transform: rotate(180deg); }
.spec-pro__body { padding: 0 18px 20px; }
.spec-pro__motivation {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--light);
}
.spec-pro__label {
  margin: 18px 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-ink);
}
.cine-sec--mov .spec-pro__label { color: var(--accent-ink); }
.spec-pro__list { list-style: none; display: grid; gap: 7px; }
.spec-pro__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.spec-pro__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-ink);
}
.cine-sec--mov .spec-pro__list li::before { background: var(--accent-ink); }
.spec-pro__cef {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  font-style: italic;
  color: var(--muted);
}

/* FAQ — accordion nativo (<details>), accesible y sin JS */
.faq {
  max-width: 760px;
  margin-top: 28px;
  display: grid;
  gap: 12px;
}
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--light) 4%, transparent);
  overflow: hidden;
}
.faq__q {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::after {
  content: '+';
  font-size: 26px;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform 0.25s var(--ease);
}
.cine-sec--mov .faq__q::after {
  color: var(--accent-ink);
}
.faq__item[open] .faq__q::after {
  transform: rotate(45deg);
}
.faq__q:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}
.faq__a {
  padding: 0 22px 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* Banda CTA al cierre de la landing */
.cine-cta-band__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}
.cine-cta-band__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--light);
}
.cine-cta-band__sub {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 8px;
}
/* Transparencia de precios en la banda CTA (Fase 2). */
.cine-cta-band__price { font-size: 15px; color: var(--muted); margin: -4px 0 4px; }
.cine-cta-band__price strong { color: var(--light); font-weight: 700; }
.cine-cta-band__price a { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* Credencial verificable del profesional: Nº de Registro de la Superintendencia
   de Salud (Fase 2 · confianza). Solo se muestra cuando hay número real. */
.spec-pro__registro {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-md);
}
.spec-pro__registro .icon { flex-shrink: 0; }
.spec-pro__registro a { color: var(--accent-ink); text-decoration: underline; }

/* ============================================================
   SISTEMA DE ICONOS (Fase C · iconografía cohesiva)
   ------------------------------------------------------------
   UNA familia line-icon, grid 24×24, un solo grosor (--icon-stroke).
   - .icon normaliza SOLO el grosor de trazo → NO toca color/fill, así
     cada icono conserva su identidad (WhatsApp hereda el color del
     botón, el icono CTA teal mantiene su color: var(--accent), etc.).
   - El tamaño se controla por instancia (width/height) o por modificador,
     nunca por .icon base → 0 CLS y sin cambios de alineación.
   - currentColor se mantiene: los paths siguen con stroke="currentColor".
   ============================================================ */
:root {
  --icon-stroke: 1.8;
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 24px;

  /* Eyebrows / kickers (Fase E) — tamaño y tracking únicos.
     El color usa --accent-ink (theme-aware, AA en claro y oscuro). */
  --eyebrow-size: 12px;
  --eyebrow-tracking: 0.24em;
}

/* Grosor unificado. Se aplica al host (para los <use> del sprite, que
   heredan stroke-width) y a los hijos de iconos inline (cuyo atributo
   stroke-width hay que sobreescribir vía CSS). */
.icon {
  stroke-width: var(--icon-stroke);
}
.icon :is(path, line, circle, rect, ellipse, polyline, polygon) {
  stroke-width: var(--icon-stroke);
}

/* Modificadores de tamaño por token (opcionales; las instancias con
   width/height propios los conservan). */
.icon--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.icon--md {
  width: var(--icon-md);
  height: var(--icon-md);
}
.icon--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* El sprite inyectado nunca ocupa espacio ni es enfocable. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================================
   TRANSICIÓN DE TEMA (clase temporal, la añade main.js SOLO al
   togglear). Transición solo de propiedades de color → 0 costo
   de perf en scroll (no es permanente) y sin transform/opacity.
   Reduced-motion: main.js no añade la clase, así que no transiciona.
   ============================================================ */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    fill 0.3s ease,
    stroke 0.3s ease !important;
}

/* ============================================================
   IMPRESIÓN — tema legible en papel (útil para imprimir la
   dirección/horarios de la sede). Fondo blanco, texto negro,
   sin la aurora ni el chrome de navegación. 0 desperdicio de tinta.
   ============================================================ */
@media print {
  :root,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body *,
  body *::before,
  body *::after {
    background: transparent !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Aurora, chrome y elementos decorativos: fuera del papel. */
  .cef-bg,
  #webgl,
  .cine-hero__canvas,
  .nav,
  .booking,
  .preloader,
  .cine__progress,
  .cine-cta__bg,
  .cine-cta__bgword,
  .cine-hero__bgword,
  .cine-hero__scroll,
  .cine-marquee,
  .cine-telemed__bg,
  .cine-manifesto__bgnum {
    display: none !important;
  }
  a {
    text-decoration: underline;
  }
}

/* ============================================================
   FEEDBACK DE BOTONES — :active (toque) y :disabled (higiene)
   ------------------------------------------------------------
   En móvil no hay hover: :active es el ÚNICO feedback al tocar.
   - brightness: SIEMPRE (también reduced-motion y táctil) → cue sin movimiento.
   - scale: solo con movimiento permitido.
   - En desktop, los botones que LEVANTAN en hover componen lift+hundir (sin salto).
   - En táctil (hover:none) se neutraliza el lift de hover (no se queda pegado).
   Van al final → ganan por orden sobre los :hover previos. Sin tocar color/marca.
   ============================================================ */
.btn:active,
.nav__cta:active,
.booking__fab--wa:active,
.plan__cta:active {
  filter: brightness(0.95);
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active,
  .nav__cta:active,
  .booking__fab--wa:active,
  .plan__cta:active {
    transform: scale(0.97);
  }
  /* Botones que levantan en hover: en desktop el press mantiene el lift y hunde
     (translateY + scale en una sola declaración → transición sin salto). */
  @media (hover: hover) {
    .btn--primary:active,
    .btn--team:active {
      transform: translateY(-2px) scale(0.97);
    }
  }
}
/* Táctil: el lift de hover no debe "quedarse pegado" tras tocar. */
@media (hover: none) {
  .btn--primary:hover,
  .btn--team:hover {
    transform: none;
  }
}

/* :disabled / [aria-disabled] base (hoy sin uso; patrón listo). Va último para
   ganar sobre :hover/:active. */
:is(.btn, .nav__cta, .plan__cta, button):is(
    :disabled,
    [disabled],
    [aria-disabled="true"]
  ) {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}

/* ===== MODO MÓVIL SIMPLE (anti-artefactos iOS) ===== */
@media (max-width: 768px) {
  /* 1. CERO backdrop-filter en móvil: es el disparador #1 de iOS */
  .nav.scrolled, .svc-filters, .cine-subnav, .nav__sub,
  .cine-hero__tag, .cine-area__media-tag, .float-card, .doctor__view,
  .svcmodal__backdrop, .smodal__backdrop, .cine-hero--home .cine-hero__meta {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Los que eran translúcidos + glass: fondo SÓLIDO para que sigan legibles */
  .nav.scrolled { background: var(--bg-deep) !important; }
  .svc-filters  { background: var(--bg-deep) !important; }
  .cine-subnav  { background: var(--bg-deep) !important; }

  /* 2. Apagar blurs pesados + animaciones del fondo (compositing caro en iOS) */
  .cef-bg__blob, .cef-bg__waves { filter: none !important; animation: none !important;
    will-change: auto !important; mix-blend-mode: normal !important; opacity: .5 !important; }
  .cef-bg__grain { display: none !important; }
  body:before { box-shadow: none !important; }

  /* 3. Apagar glows con filter:blur (orbs/glows decorativos) en móvil */
  .cine-hero__glow, .cine-telemed__orb, .cine-cta__glow,
  .cine-hero--home .cine-hero__title:before { filter: none !important; opacity: 0 !important; }

  /* 4. Quitar will-change de capas permanentes (libera GPU en iOS) */
  .cine-hero__layer, .cine-hero__bgword, .cine-hero__inner, .cine-telemed__bgword,
  .cine-cta__bgword, [data-cine-parallax] { will-change: auto !important; }

  /* 5. Anillos de /telemed (pings que pulsan): off en móvil */
  .cine-telemed__pings { display: none !important; }
}

/* ===== SELECTOR DE RESERVA GUIADO · bottom-sheet (iOS-safe, sin backdrop-filter) ===== */
.bchooser {
  position: fixed; inset: 0; z-index: 300;          /* sobre barra (110), nav (100), mega (200) */
  display: flex; align-items: flex-end; justify-content: center;
}
.bchooser[hidden] { display: none; }
.bchooser__overlay {
  position: fixed; inset: 0;
  background: rgba(2, 16, 36, .55);                  /* sólido, SIN blur */
  opacity: 0; transition: opacity .25s var(--ease);
}
.bchooser.is-open .bchooser__overlay { opacity: 1; }
.bchooser__panel {
  position: relative; z-index: 1;
  width: 100%;
  background: var(--surface);                        /* fondo SÓLIDO */
  border: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(2, 16, 36, .35);
  padding: 6px 20px calc(20px + env(safe-area-inset-bottom));   /* safe-area abajo */
  max-height: 85vh; overflow-y: auto;
  transform: translateY(100%);                       /* entra deslizando */
  transition: transform .25s var(--ease);
}
.bchooser.is-open .bchooser__panel { transform: translateY(0); }
.bchooser__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end;   /* solo el botón cerrar, arriba-derecha */
  gap: 12px; padding: 8px 0 0;
  background: var(--surface);                         /* tapa el contenido al scrollear */
}
/* Encabezado invertido del paso "modo": la PREGUNTA es el título principal (grande
   serif) y "Agenda tu hora" queda como línea secundaria GRIS debajo. */
/* .bchooser para ganarle a refinamiento.css (`[class*="__title"]{hyphens:auto}`
   ≤768px, carga después): la pregunta rompe en el ESPACIO, no con guión a media palabra. */
.bchooser .bchooser__title { font-family: var(--font-serif); font-size: clamp(1.375rem, 5vw, 1.5rem); line-height: 1.15; color: var(--light); margin: 2px 0 0; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
.bchooser__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--soft); margin: 6px 0 18px; }
.bchooser__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  color: var(--soft); background: transparent;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.bchooser__close:hover { background: var(--bg-mid); color: var(--light); }
.bchooser__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bchooser__step { padding-top: 16px; }
.bchooser__step[hidden] { display: none; }
.bchooser__q { font-size: 15px; font-weight: 600; color: var(--soft); margin: 0 0 14px; }
.bchooser__lead { font-size: 15px; color: var(--soft); line-height: 1.55; margin: 0 0 16px; }

/* paso 1 · modalidad */
.bchooser__modes { display: grid; gap: 12px; }
.bchooser__mode {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center; text-align: left;
  width: 100%; min-height: 64px; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-mid); color: var(--light); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.bchooser__mode:hover, .bchooser__mode:focus-visible {
  border-color: var(--accent-ink); background: var(--surface); transform: translateY(-1px);
}
.bchooser__mode:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bchooser__mode svg { grid-row: 1 / 3; color: var(--accent-ink); }
.bchooser__mode-t { font-weight: 700; font-size: 16px; }
.bchooser__mode-s { font-size: 13px; color: var(--soft); }

/* "Volver" */
.bchooser__back {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--accent-ink); font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  padding: 4px 0; margin-bottom: 6px;
}
.bchooser__back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* paso 2 · opciones (especialidades) */
.bchooser__list { display: flex; flex-direction: column; }
.bchooser__option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 12px 6px;
  color: var(--light); font-size: 15px; font-weight: 500;
  border-bottom: 1px solid var(--line);
  transition: background .15s var(--ease), transform .15s var(--ease), padding-left .15s var(--ease), color .15s var(--ease);
}
.bchooser__option:last-child { border-bottom: 0; }
.bchooser__option:hover, .bchooser__option:focus-visible {
  background: var(--bg-mid); color: var(--accent-ink);
  transform: translateX(2px); padding-left: 12px;
}
.bchooser__option:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.bchooser__option svg { color: var(--soft); flex-shrink: 0; }

/* paso 2b · telemed — aviso de las 5 especialidades (chips teal + nota). iOS-safe. */
.bchooser__tele-avail { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-mid); }
.bchooser__tele-avail-t { font-size: 13px; font-weight: 600; color: var(--light); margin: 0 0 8px; line-height: 1.4; }
.bchooser__tele-avail-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.bchooser__tele-avail-list li { font-size: 13px; font-weight: 600; color: var(--accent-ink); background: rgba(0,193,188,.10); border-radius: var(--r-pill); padding: 4px 10px; }
.bchooser__tele-avail-note { font-size: 13px; color: var(--soft); margin: 8px 0 0; }

/* paso 2b · telemed (botones) */
.bchooser__tele-actions { display: grid; gap: 10px; }
.bchooser__option--ghost, .bchooser__option--accent {
  justify-content: center; min-height: 52px; border-radius: var(--r-md);
  border-bottom: 0; font-weight: 700;
}
.bchooser__option--ghost { border: 1px solid var(--line-strong); color: var(--light); }
.bchooser__option--accent {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 4px 14px rgba(0, 193, 188, .35);
}
.bchooser__option--ghost:hover, .bchooser__option--ghost:focus-visible {
  transform: none; padding-left: 0; border-color: var(--accent-ink); background: var(--bg-mid); color: var(--light);
}
.bchooser__option--accent:hover, .bchooser__option--accent:focus-visible {
  transform: none; padding-left: 0; color: var(--on-accent);
}

/* desktop: modal centrado (la barra inferior es solo móvil; acá entra por FAB/nav) */
@media (min-width: 768px) {
  .bchooser { align-items: center; }
  .bchooser__panel { max-width: 480px; margin: 0 20px; border-radius: 22px; padding-bottom: 24px; }
}

/* sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .bchooser__overlay, .bchooser__panel,
  .bchooser__mode, .bchooser__option, .bchooser__close { transition: none; }
}