/* ============================================================
   refinamiento.css · CAPA DE OVERRIDES DE REFINAMIENTO VISUAL
   ------------------------------------------------------------
   Se carga AL FINAL, después de styles.css y cinematic.css, en
   TODAS las páginas (link incondicional en base.njk, también en
   las que definen su propio pageCss como entrenamiento.html).

   Reglas de la capa:
   - Solo pulido visual/UX: Nada de contenido ni lógica.
   - Reutiliza los tokens existentes (--fs-*, --sp-*, --r-*,
     --shadow-*, --ease/--ease-out). SIN hex hardcodeado ni
     colores nuevos (respeta el guard de paleta de marca).
   - Reversible: borrar este archivo + su <link> en base.njk +
     su entrada en perf-budget.mjs deja el sitio como estaba.

   Bloques (uno por commit):
     1) TIPOGRAFÍA  ← este commit
     2) Cuadre / contenedor
     3) Ritmo de espaciado
     4) Animaciones
     5) Microinteracciones / sombras
   ============================================================ */

/* ============================================================
   BLOQUE 1 · TIPOGRAFÍA
   Escala coherente con los tokens --fs-*; eyebrows unificados;
   bajadas a un solo tamaño. Home↔subpáginas alineadas.
   ============================================================ */

/* 1.1 · TÍTULOS DE SECCIÓN — una sola escala home↔subpáginas.
   El home ya usa --fs-h2 para sus títulos de sección (vía --st-h2,
   que es alias de --fs-h2). Los títulos de subpágina/institucionales
   estaban en un clamp ad-hoc (~34px): los subimos a --fs-h2 (52px) para
   cerrar la brecha de jerarquía sin volverlos estridentes. Los heros de
   página (svc-head__title / cine-hero__title) NO se tocan: son el H1. */
.svc-index__title,
.trust__title {
  /* --fs-h2 (52px tope) pero con el FLOOR bajado a 30px (1.875rem): medido a
     390px, títulos largos como "Un equipo multidisciplinario real" caían a 3
     líneas apretadas con 32px. El tope desktop (3.25rem = tope de --fs-h2) se
     mantiene, así no se achican en escritorio. */
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
}

/* 1.2 · EYEBROWS — un solo tratamiento.
   Antes: 4-5 variantes (12px, pill de 13px, distinto tracking). Unificamos
   las MÉTRICAS (familia/tamaño/tracking/caja) en todas. El COLOR se deja a
   cada contexto: cada sección ya tiene un color AA sobre su fondo (p. ej.
   cine-stats va sobre fondo oscuro), así que no se fuerza para no romper
   contraste. La institucional usa la nueva clase .eyebrow (reemplaza al
   pill svc-head__note, que se conserva en servicios como "nota"). */
.trust__pre,
.cine-stats__pre,
.cine-cta__pre,
.section-head__label,
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Clase reutilizable para cualquier eyebrow sobre fondo claro/soft. */
.eyebrow {
  display: block;
  margin: 0 0 var(--sp-2);
  color: var(--accent-ink); /* mismo color AA que trust__pre (claro y oscuro) */
}

/* 1.3 · LEADS / BAJADAS — un solo tamaño.
   Bajadas de sección a --fs-lead en home y subpáginas. Solo tamaño y
   line-height; el color se conserva por contexto (--soft / --light, AA). */
.svc-group__sub,
.svc-head__lead,
.cine-sec__lead,
.cine-synergy__lead,
.cine-telemed__lead,
.cine-cta__sub {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* ============================================================
   BLOQUE 2 · CUADRE / CONTENEDOR
   Eje único --container (1320) para los bloques que quedaban fuera.
   Las columnas de lectura angostas A PROPÓSITO (cine-quotes 920px,
   bajadas a 60ch) se conservan: solo se centran en el eje, no se
   estiran. (Las secciones del home ya estaban unificadas a
   --container en la sección "CUADRE" de cinematic.css.)
   ============================================================ */

/* 2.1 · Secciones que estaban en un ancho propio (1180px) → al eje. */
.svc-filters__inner {
  width: min(var(--container), 92vw);
  max-width: var(--container);
}

/* 2.2 · Hero de subpágina al MISMO eje que las secciones.
   Antes: svc-head__inner 900px centrado → ~210px de desfase con el
   contenido (medido a 1440px). Ahora comparte gutter con .cine-sec y
   se extiende al eje; la bajada conserva su ancho de lectura (60ch),
   así que la legibilidad no se ve afectada. */
.svc-head {
  padding-inline: clamp(24px, 5vw, 80px);
}
.svc-head__inner {
  width: 100%;
  max-width: var(--container);
}

/* ============================================================
   BLOQUE 3 · RITMO DE ESPACIADO VERTICAL
   Una sola escala (--sp-*) para el padding-block. Las secciones de
   contenido comparten clamp(--sp-6, 9vw, --sp-7) (64→96px) — ya
   aplicado a la mayoría en la sección CUADRE de cinematic.css; aquí
   sumamos las que faltaban. Los heros tienen su propio tier (más aire).
   El espaciado simétrico equilibra las transiciones dark↔soft.
   ============================================================ */

/* 3.1 · Secciones de contenido que estaban fuera del ritmo:
   - cine-quotes: estaba en 100-160px (tier hero) = salto respecto a sus
     vecinas; baja al ritmo de sección. Conserva su gutter horizontal y su
     columna de 920px (no se toca el ancho). */
.cine-quotes {
  padding-block: clamp(var(--sp-6), 9vw, var(--sp-7));
}

/* 3.2 · svc-head (franja de título de subpágina): TIER HERO — respiro
   generoso arriba (por encima de una sección interna y con holgura para el
   nav fijo) y cierre rítmico abajo que conecta con el primer bloque.
   Reemplaza el clamp asimétrico y arbitrario (12vh/150px arriba, 4vw/44px
   abajo). Los heros full-viewport (cine-hero / cine-hero--sub, min-height
   100vh/80vh con contenido centrado) NO entran en este molde: su aire ya es
   generoso por diseño y se conserva. */
.svc-head {
  padding-block: clamp(var(--sp-7), 13vh, calc(var(--sp-7) + var(--sp-5))) var(--sp-6);
}

/* ============================================================
   BLOQUE 4 · ANIMACIONES
   DOS duraciones canónicas (cierran el sistema junto a --ease):
   --dur-reveal (entradas) y --dur-hover (hover/focus, más ágil).
   Reveal y hover unificados a esos tokens + las 2 curvas existentes.
   Reveal sobrio de encabezados solo en páginas institucionales.
   ============================================================ */
:root {
  --dur-reveal: 0.6s; /* entradas / reveals */
  --dur-hover: 0.28s; /* hover / focus (ágil) */
}

/* 4.1 · Reveal del home unificado a UNA duración (antes opacidad 0.6s /
   transform 0.9s). Conserva la curva --ease-out. */
[data-cine-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

/* 4.2 · Hover/focus de botones más ágil (antes .35s → --dur-hover). */
.btn {
  transition: all var(--dur-hover) var(--ease);
}

/* 4.3 · Reveal SOBRIO de encabezados de sección — SOLO páginas cinematográficas
   (body:is([data-area="wellness-group"], [data-area="empresas"]) = landing +
   nosotros del grupo + página B2B). Fade-up
   corto (18px), únicamente eyebrow/título/bajada (el contenido ya está visible).
   Stagger de 0.08s entre los tres. PE-safe: visibles sin JS (solo se ocultan/
   animan con html.cine-js, que pone reveal.js); reduced-motion → visibles sin
   animar. Los heros NO se animan (su H1 es el elemento LCP). */
html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .trust__pre,
html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .svc-index__title,
html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .svc-group__sub {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .svc-index__title {
  transition-delay: 0.08s;
}
html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .svc-group__sub {
  transition-delay: 0.16s;
}
html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .trust__pre,
  html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .svc-index__title,
  html.cine-js body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .svc-group__sub {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   BLOQUE 5 · MICROINTERACCIONES / SOMBRAS
   Elevación de hover de las tarjetas interactivas, unificada a UNA
   escala: misma duración (--dur-hover), misma curva (--ease) y la
   misma sombra (--shadow-2 en hover). Lift de -4px → es transform, no
   dispara CLS; el gap de grilla (≥18px) es mucho mayor que 4px, así que
   no tapa las tarjetas vecinas. El focus-visible de las clickeables
   iguala el realce del hover y le suma un anillo claro (foco evidente,
   no solo hover).

   Alcance: solo tarjetas NO-reveal (su grilla hace el reveal, no la
   tarjeta): .plan (entrenamiento). Las que
   son target de reveal INDIVIDUAL (cine-pillar, area-card,
   entr-pillar) comparten el conflicto reveal↔transform sobre la misma
   propiedad `transition`; unificar su hover sin romper el reveal exige
   desacoplar el transform de entrada (follow-up, igual que las
   transiciones decorativas de cinematic.css). No se tocan aquí.
   ============================================================ */
.plan {
  transition:
    transform var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}
.plan:hover,
.plan:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent-ink);
}
/* Foco de teclado tan claro como el hover: mismo realce + anillo AA. */
.plan:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   FRENTE CONVERSIÓN · HERO DEL HOME · H1 de FRASE
   "Tratamos la causa, no solo el síntoma" es una frase con contenido, no un
   claim display de 2-3 palabras. Se baja del display gigante (clamp hasta
   13.75rem, que la parte en 5 líneas) a una escala EDITORIAL media: 2 líneas
   limpias en desktop, limpio en móvil. Peso 600 → su .woff2 está PRECARGADO
   (base.njk) ⇒ sin font-swap ⇒ sin reflujo ⇒ CLS 0. El acento <em> en "causa"
   conserva el gradiente turquesa del hero. Solo afecta al H1 con .--phrase.
   ============================================================ */
.cine-hero__title--phrase .cine-hero__title-row--small {
  font-size: clamp(1.875rem, 4.5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* ============================================================
   WELLNESS-GROUP · VARIACIÓN DE RITMO (romper el "muro de cajas")
   3 patrones reutilizables, sin caja nueva, con tokens, AA claro+oscuro,
   estáticos (CLS 0):
   - .svc-card--flat : tarjeta liviana (sin sombra ni barra turquesa de 3px).
   - .stat-hero      : dato suelto tipográfico (sin caja).
   - .flow / .flow__step / .flow__num : proceso de N pasos conectados.
   ============================================================ */

/* Tarjeta liviana: conserva la superficie (presencia/clicabilidad) pero quita
   la elevación y la barra turquesa repetida → borde hairline uniforme. */
.svc-card--flat {
  box-shadow: none;
  border-left: 1px solid var(--line);
}

/* Dato suelto: número grande tipográfico, SIN caja. --accent-ink pasa AA en
   claro (#0a6f6a) y oscuro (turquesa brillante) — NO el turquesa claro #00c1bc. */
.stat-hero {
  margin: clamp(4px, 1vw, 12px) 0 clamp(28px, 3.5vw, 40px);
}
.stat-hero__num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}
.stat-hero__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sub);
  color: var(--soft);
  max-width: 24ch;
}

/* Flujo de proceso: N pasos conectados en secuencia (no tarjetas sueltas).
   Móvil = espina vertical (número | contenido); desktop = fila horizontal.
   El conector es un pseudo-elemento (decorativo, el lector de pantalla NO lo
   lee); el orden lo da el <ol> en el DOM. */
.flow {
  --flow-gap: clamp(32px, 5vw, 52px);
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: var(--flow-gap);
}
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  align-items: start;
}
.flow__num {
  grid-row: 1 / span 2;
  align-self: start;
  width: 2.6em;
  height: 2.6em;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1;
  color: var(--accent-ink);
  border: 2px solid color-mix(in srgb, var(--accent-ink) 38%, transparent);
  border-radius: 50%;
}
.flow__title {
  align-self: center;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--light);
}
.flow__text {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--soft);
}
/* Conector decorativo · móvil: espina vertical en la columna del número. */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.3em;
  top: 2.9em;
  bottom: calc(-1 * var(--flow-gap));
  width: 2px;
  background: color-mix(in srgb, var(--accent-ink) 30%, transparent);
}
@media (min-width: 820px) {
  .flow {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .flow__step {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .flow__num {
    grid-row: auto;
  }
  .flow__title {
    align-self: start;
  }
  /* desktop: conector horizontal en el gap, a la altura del centro del número */
  .flow__step:not(:last-child)::after {
    left: 2.9em;
    top: 1.3em;
    bottom: auto;
    right: calc(-1 * var(--flow-gap));
    width: auto;
    height: 2px;
  }
}

/* ============================================================
   WELLNESS-GROUP · SECCIÓN B2B ("Para empresas")
   El contenido B2B es extenso → flujo + acordeones nativos <details>/<summary>
   (sin JS) para que en reposo se vea limpio (regla #1: no saturar de cajas).

   FONDO (cambio de coherencia): la sección YA NO es una banda navy aparte. Se
   integra al mismo tratamiento del resto de la página (aurora global +
   texto en tokens de tema), y se distingue por su RÓTULO "Para empresas" + el
   tick "línea diagnóstica" (que aplica solo, porque el rótulo es .trust__pre
   dentro de .cine-sec__inner) + el contenido — no por color de fondo. El texto
   vuelve a navy/accent-ink en claro y claro en oscuro, como las demás secciones
   (AA verificado en el peor punto, ambos temas). Sin remap de tokens.

   CLS 0: los <details> arrancan CERRADOS → su cuerpo no entra al flujo en
   carga → no hay shift. La animación de apertura es opacity+translate (no
   afecta la métrica de layout) y respeta prefers-reduced-motion.
   ============================================================ */

/* Subtítulos internos (niveles / catálogo): un escalón bajo el h2. */
.b2b-sub {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  color: var(--light);
  margin: clamp(36px, 5vw, 56px) 0 var(--sp-2);
}

/* Grupo de acordeones: LISTA DIVIDIDA (barras finas con hairline, SIN cajas) →
   máximo respiro, mismo criterio liviano que .svc-card--flat del resto. La línea
   superior del grupo + el borde inferior por ítem dan los divisores. */
.b2b-acc-group {
  max-width: 820px;
  margin-top: var(--sp-3);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

/* Acordeón nativo (sin JS): solo divisor inferior (barra fina), sin relleno. */
.b2b-acc {
  border-bottom: 1px solid var(--line);
}
.b2b-acc__sum {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 15px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  transition: background var(--dur-hover) var(--ease);
}
.b2b-acc__sum::-webkit-details-marker {
  display: none;
}
/* AFFORDANCE (sin caja, pero que se NOTE que despliega): el marcador +→× es el
   indicador permanente; hover/abierto resaltan la fila y el nombre en accent. */
.b2b-acc__sum:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.b2b-acc__sum:hover .b2b-acc__name,
.b2b-acc[open] .b2b-acc__name {
  color: var(--accent-ink);
}
.b2b-acc__label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
}
.b2b-acc__name {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--light);
  transition: color var(--dur-hover) var(--ease);
}
.b2b-acc__kick {
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--soft);
}
.b2b-acc__sum::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform 0.25s var(--ease);
}
.b2b-acc[open] .b2b-acc__sum::after {
  transform: rotate(45deg);
}
.b2b-acc__sum:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -2px;
}
.b2b-acc__panel {
  padding: 0 12px 18px;
}
.b2b-acc__intro {
  margin: 0 0 12px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--soft);
}
/* Chip acumulativo "Incluye el nivel anterior +" (niveles 2→4). */
.b2b-chip {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent-ink) 42%, transparent);
  border-radius: var(--r-pill);
}
/* Lista de ítems (reusa el patrón de viñeta de .spec-pro__list). */
.b2b-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.b2b-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--soft);
}
.b2b-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-ink);
}

/* Nota transversal (fuera del acordeón) + disclaimer al pie de los niveles. */
.b2b-aside {
  max-width: 820px;
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--soft);
}
.b2b-note {
  max-width: 820px;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--soft);
  opacity: 0.82;
}

/* Cierre del catálogo: declaración de cobertura (red de +60 especialistas). */
.b2b-closing {
  max-width: 820px;
  margin: clamp(32px, 4.5vw, 48px) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--light);
}

/* Nota legal VISIBLE (callout con borde izquierdo turquesa) · niveles /empresas:
   más presente que el disclaimer, sin ser una caja pesada. AA en ambos temas. */
.b2b-legal {
  max-width: 820px;
  margin: var(--sp-3) 0 0;
  padding: 12px 0 12px 16px;
  border-left: 2px solid color-mix(in srgb, var(--accent-ink) 45%, transparent);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--soft);
}

/* ── ENTREGA DE STATUS · diagrama individual → agregado ──────────────────
   El SVG es decorativo (aria-hidden); los rótulos y los dos paneles cargan el
   significado. color → currentColor del SVG = --accent-ink (AA-neutral, es
   decorativo). El viewBox reserva el alto → CLS 0. */
.status-viz-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 22px);
  margin: clamp(28px, 4vw, 44px) 0;
}
.status-viz {
  width: min(320px, 62vw);
  height: auto;
  color: var(--accent-ink);
}
.status-viz__label {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* Grillas balanceadas para 2 tarjetas (auto-fit → sin hueco a la derecha):
   .status-grid (status: individual/agregado) y .cred-grid (credibilidad: 2 pilares). */
.status-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 880px;
}
.cred-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 760px;
}

/* ── CREDIBILIDAD · grilla de disciplinas (chips livianos, hairline) ──── */
.disc-tags__label {
  margin: clamp(24px, 3.5vw, 36px) 0 0;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.disc-tags {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 820px;
}
.disc-tags li {
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}

/* ── FORMULARIO B2B (/empresas) ──────────────────────────────────────────
   Dimensiones reservadas (CLS 0). Inputs sobre --surface; foco AA. Los botones
   arrancan disabled (gated por consentimiento vía empresas-form.js); :disabled
   queda exento de contraste AA (excepción WCAG) → se puede atenuar. */
.emp-form {
  max-width: 640px;
  margin: clamp(28px, 4vw, 44px) 0 0;
}
.emp-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
.emp-form__field {
  display: grid;
  gap: 6px;
}
.emp-form__field--full {
  grid-column: 1 / -1;
}
.emp-form__label {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--light);
}
.emp-form__input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--light);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.emp-form__textarea {
  min-height: 112px;
  resize: vertical;
}
.emp-form__input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--accent-ink);
}
.emp-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: clamp(16px, 2.5vw, 22px);
  max-width: 640px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--soft);
}
.emp-form__consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-ink);
}
.emp-form__consent input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.emp-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(18px, 2.5vw, 24px);
}
.emp-form__actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.emp-form__actions .btn:disabled::before {
  display: none;
}
.emp-form__hint,
.emp-form__note {
  max-width: 640px;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--soft);
}
.emp-form__note a {
  color: var(--accent-ink);
  text-decoration: underline;
}
@media (max-width: 560px) {
  .emp-form__grid {
    grid-template-columns: 1fr;
  }
}

/* CTA del carril: gap claro respecto al cierre (anula el margin-top:auto base). */
.b2b-cta {
  margin-top: clamp(28px, 3.5vw, 40px);
}

/* Apertura suave del panel: opacity + 4px (no afecta la métrica de layout). */
@media (prefers-reduced-motion: no-preference) {
  .b2b-acc[open] .b2b-acc__panel {
    animation: b2bAccReveal 0.3s var(--ease-out);
  }
}
@keyframes b2bAccReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   WELLNESS-GROUP + EMPRESAS · FASE 1 · ELEVACIÓN CINEMATOGRÁFICA (CSS puro)
   ------------------------------------------------------------
   Sube /wellness-group y /empresas al lenguaje del home SIN romper CWV ni AA.
   Todo va SCOPEADO a body:is([data-area="wellness-group"], [data-area="empresas"])
   (no afecta otras páginas) y se construye con tokens + color-mix (cero hex nuevo).

   INNEGOCIABLES (verificados):
   - CLS 0: solo se anima transform/opacity (y las props `translate`/`scale`,
     también de compositor); las capas decorativas van fuera de flujo; las
     tarjetas conservan su espacio final. Además se ARREGLA el CLS 0.074
     pre-existente (swap cold-cache del H1 en peso 700 → se usa el 600 ya
     precargado).
   - LCP: el H1 de texto sigue siendo el LCP; sin opacity:0/clip sobre él;
     las capas son CSS (sin red/JS) y van detrás.
   - AA claro+oscuro: el texto se queda en tokens de tema (navy/accent-ink);
     el glow turquesa se concentra LEJOS del texto (esquina sup-der; el H1 se
     capa en ancho a la izquierda) + scrim sobre la columna de texto.
   - reduced-motion: estado final estático; reveals/aurora desactivados.
   ============================================================ */

/* ---- A · HERO: aurora destapada + glow turquesa + scrim AA -------------- */
/* Deja de TAPAR la aurora global (background.css se inyecta en runtime →
   especificidad alta + !important para ganarle, igual que la banda B2B). */
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-head.section--soft {
  background: transparent !important;
}
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-head {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* Scrim theme-aware SIN hex nuevo: 82% del fondo del tema (#f5f7fa claro /
     #071529 oscuro) → aclara bajo texto oscuro (claro) y oscurece bajo texto
     claro (oscuro). Garantiza AA en el peor punto del gradiente. */
  --wg-scrim: color-mix(in srgb, var(--bg-deep) 82%, transparent);
}
/* Capa decorativa: scrim (capa superior) sobre glow turquesa (sup-der) +
   profundidad navy (inf-izq). pointer-events:none, detrás del contenido. */
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--wg-scrim) 0%, var(--wg-scrim) 28%, transparent 66%),
    radial-gradient(
      62% 78% at 84% 14%,
      color-mix(in srgb, var(--accent) 32%, transparent),
      transparent 60%
    ),
    radial-gradient(
      52% 68% at 4% 98%,
      color-mix(in srgb, var(--primary) 24%, transparent),
      transparent 64%
    );
}

/* ---- B · H1 DISPLAY + arreglo de CLS ----------------------------------- */
/* Peso 600 = el ÚNICO peso serif precargado (base.njk) → sin swap cold-cache
   → arregla el CLS 0.074. Mismo "peso casa" del hero del home. Ancho capado a
   la izquierda: el texto NO alcanza el glow turquesa de la esquina sup-der. */
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-head__title {
  position: relative;
  font-weight: 600;
  font-size: clamp(2.375rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
/* Sello "línea diagnóstica": subrayado turquesa bajo el H1.
   transform-origin:left → listo para trazarse (scaleX) en Fase 2. */
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-head__title::after {
  content: '';
  display: block;
  width: clamp(72px, 9vw, 104px);
  height: 3px;
  margin-top: clamp(16px, 2vw, 24px);
  border-radius: 2px;
  transform-origin: left;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 15%, transparent)
  );
}

/* ---- C · Motivo "línea diagnóstica" entre secciones -------------------- */
/* Tick vertical turquesa sobre el eyebrow de cada sección → hilo recurrente.
   Estático (reserva su espacio desde el inicio) → sin CLS. */
body:is([data-area='wellness-group'], [data-area='empresas']) .cine-sec__inner > .trust__pre::before {
  content: '';
  display: block;
  width: 2px;
  height: 22px;
  margin-bottom: var(--sp-2);
  border-radius: 2px;
  background: linear-gradient(var(--accent), transparent);
}

/* ---- D · Reveals de tarjetas (scroll-driven, CERO JS) ------------------- */
/* Por defecto visibles (accesible si no hay soporte / reduced-motion).
   Reveal usa la prop `translate` (compositor) + opacity → NO choca con el
   hover que usa `transform` (props distintas, COMPONEN). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body:is([data-area='wellness-group'], [data-area='empresas']) .svc-grid > .svc-card {
      animation: wgCardReveal linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 30%;
    }
    /* Stagger por columna (3 col): la 2ª y 3ª entran un pelo después. */
    body:is([data-area='wellness-group'], [data-area='empresas']) .svc-grid > .svc-card:nth-child(3n + 2) {
      animation-range: entry 2% cover 38%;
    }
    body:is([data-area='wellness-group'], [data-area='empresas']) .svc-grid > .svc-card:nth-child(3n + 3) {
      animation-range: entry 2% cover 46%;
    }
  }
}
@keyframes wgCardReveal {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---- E · Microinteracciones premium ------------------------------------ */
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card {
  transition:
    transform var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease),
    opacity var(--dur-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-2);
    border-color: var(--accent-ink);
  }
  /* De-énfasis de hermanas (solo opacity → CLS-safe). */
  body:is([data-area='wellness-group'], [data-area='empresas']) .svc-grid:has(.svc-card:hover) .svc-card:not(:hover) {
    opacity: 0.62;
  }
}
/* Foco de teclado tan claro como el hover (el contenido es clickeable). */
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card:focus-within {
  border-color: var(--accent-ink);
  box-shadow: var(--shadow-2);
}

/* ============================================================
   WELLNESS-GROUP · FASE 2 · SCROLLYTELLING DEL MÉTODO (momento insignia)
   ------------------------------------------------------------
   La línea conectora del .flow se TRAZA al scrollear y los números 01/02/03
   entran con stagger. CSS scroll-driven puro (cero JS para el trazo), SIN pin
   → sin riesgo de CLS por pin-spacer. El contador del dato vive en reveal.js.

   TÉCNICA (validada): un view-timeline NOMBRADO (--wg-method) sobre el .flow
   sincroniza todas las animaciones. El trazo es `transform: scaleX/scaleY`
   SOLO sobre el conector (.flow__step::after) — NUNCA sobre el contenedor ni
   los números. Mismo gesto que el subrayado del H1 (transform-origin:left +
   gradiente turquesa) → refuerza el hilo "línea diagnóstica".

   INNEGOCIABLES:
   - CLS 0: solo transform/opacity/translate (compositor); sin pin; sin layout.
   - LCP: el método es sección 3 (bajo el fold); animaciones CSS sin red.
   - AA: línea y números son decorativos (aria-hidden); título/texto de cada
     paso SIEMPRE presentes y legibles, sin animar.
   - reduced-motion / sin soporte (Firefox): estado FINAL estático → línea
     trazada (scale 1) y números visibles. Toda la animación va gated por
     @supports (animation-timeline: view()) + @media no-preference.
   ============================================================ */

/* Reloj compartido: el progreso de scroll del .flow conduce trazo + números. */
body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method {
  view-timeline-name: --wg-method;
  view-timeline-axis: block;
}

/* El conector del método toma el MISMO gradiente turquesa del subrayado del H1
   (mismo motivo). Móvil = línea vertical (fade hacia abajo); desktop = override
   a horizontal más abajo. Estado por defecto: TRAZADO (sin animación). */
body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:not(:last-child)::after {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 18%, transparent));
}
@media (min-width: 820px) {
  body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:not(:last-child)::after {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 18%, transparent));
  }
}

@keyframes wgTraceV {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes wgTraceH {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes wgMethodNum {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* TRAZO · móvil = vertical (origin top). SOLO el ::after (el conector). */
    body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:not(:last-child)::after {
      transform: scaleY(0);
      transform-origin: top;
      animation: wgTraceV linear both;
      animation-timeline: --wg-method;
    }
    body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:nth-child(1)::after {
      animation-range: entry 62% entry 92%;
    }
    body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:nth-child(2)::after {
      animation-range: entry 88% cover 22%;
    }

    /* NÚMEROS · opacity + translate (NUNCA scale), mismo reloj, escalonados. */
    body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__num {
      opacity: 0;
      translate: 0 8px;
      animation: wgMethodNum linear both;
      animation-timeline: --wg-method;
    }
    body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:nth-child(1) .flow__num {
      animation-range: entry 48% entry 72%;
    }
    body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:nth-child(2) .flow__num {
      animation-range: entry 82% cover 8%;
    }
    body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:nth-child(3) .flow__num {
      animation-range: cover 6% cover 30%;
    }

    /* TRAZO · desktop = horizontal (origin left). Override del eje/keyframe. */
    @media (min-width: 820px) {
      body:is([data-area='wellness-group'], [data-area='empresas']) .flow--method .flow__step:not(:last-child)::after {
        transform: scaleX(0);
        transform-origin: left;
        animation-name: wgTraceH;
      }
    }
  }
}

/* ============================================================
   FASE 1 · FUNDACIONES "SIN CAJAS" · UTILIDADES DEL HOME (.cine-*)
   ------------------------------------------------------------
   Tres utilidades reutilizables para reemplazar tarjetas por agrupación
   editorial (jerarquía + hairline + espacio negativo + diagrama vivo):

     .cine-row       Fila editorial (índice / roster): hairline + hover-reveal.
                     Para Especialidades, Equipo y "¿Qué te trae a CEF?".
     .cine-figures   Fila de CIFRAS gigantes (number infographic), sin caja,
                     divididas por hairline vertical. REUSA el nombre .cine-stat
                     del sistema: el look nuevo aplica SOLO dentro de .cine-figures,
                     así la sección de stats actual del home (.cine-stats__grid
                     .cine-stat) NO cambia hasta envolverla en Fase 2.4. El contador
                     reutiliza el sistema [data-count] de cinematic.js (cero JS nuevo).
     .cine-draw-line <path> SVG que se "dibuja" en scroll con la técnica NATIVA
                     (stroke-dasharray/offset + pathLength="1"); self-draw vía
                     animation-timeline:view() (mismo patrón que el método de
                     wellness-group). Sin plugins de pago.

   REGLAS (verificadas):
   - Tokens existentes; cero hex nuevo. --hairline aliasa --line (theme-aware).
   - Reusa [data-cine-reveal] (lo observa cinematic.js) para la ENTRADA; el
     hover-reveal es CSS puro. No se introduce ningún sistema de reveal nuevo.
   - Motion solo transform/opacity. EXCEPCIÓN consciente: .cine-draw-line anima
     stroke-dashoffset porque el brief pide esa técnica para el trazo (el conector
     recto del método podría, alternativamente, usar el transform:scaleX ya
     empleado en wgTrace*). La línea es decorativa (aria-hidden).
   - CLS 0: la cifra es display:block (ancho independiente de dígitos) y el contador
     bloquea minWidth; el SVG reserva su alto vía viewBox; el retrato de la fila
     reserva su hueco (oculto por opacity, no por display).
   - prefers-reduced-motion: estado final estático (fila quieta, cifra en su valor
     final, línea totalmente trazada). Foco visible; targets táctiles ≥44px.

   IMPORTANTE: estas utilidades NO se usan todavía en ningún markup → no cambian
   nada renderizado. Se cablean sección por sección en la Fase 2.
   ============================================================ */
:root {
  /* Hairline semántico: 1px al ~10% (dentro del rango 8-15% del brief),
     theme-aware (claro rgba(26,31,46,.10) / oscuro rgba(234,243,255,.12)). */
  --hairline: var(--line);
  /* Escala display para CIFRAS gigantes. Base 18px; tope ~7rem fluido — se queda
     corta de los 8-12rem del research a propósito: en una fila de 3-4 cifras esos
     tamaños desbordan en laptop. Ajustable por sección si una cifra va sola. */
  --fs-figure: clamp(3rem, 7vw, 7rem);
}

/* ───────────────────────── .cine-row ─────────────────────────
   Markup objetivo (Fase 2): un <a> con data-cine-reveal que contiene
   número-ancla, bloque de texto, retrato/ícono (hover-reveal) y flecha. */
/* Lista contenedora (opcional pero recomendada): resetea el <ul>/<ol> y CIERRA el
   grupo por abajo. El divisor entre filas lo da el border-top de cada .cine-row,
   así que esto es robusto tanto si las filas son hermanas directas como si van
   envueltas en <li> (no usa :last-child → no se mal-dispara con el wrap). */
.cine-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
}

/* Fila editorial. Flex (no grid) → tolera elementos opcionales (índice, retrato)
   sin descolocar columnas: __main toma el espacio y empuja media/flecha a la
   derecha. El divisor superior va en cada fila → robusto al wrap en <li>. */
.cine-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(20px, 3vw, 32px) 4px; /* alto holgado ≥44px (tap target) */
  border-top: 1px solid var(--hairline);
  color: inherit;
  transition: transform var(--dur-hover) var(--ease); /* solo transform → compositor */
  will-change: transform;
}

/* Número-ancla 01–10: tipografía grande de baja presencia (no caja). */
.cine-row__index {
  flex: none;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.375rem);
  line-height: 1;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.cine-row__main {
  flex: 1 1 auto; /* toma el espacio → empuja retrato/flecha a la derecha */
  min-width: 0; /* permite envolver/truncar sin desbordar */
}
.cine-row__title {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--light);
  transition: color var(--dur-hover) var(--ease);
}
/* David r2: en la LISTA de especialidades del home (la versión móvil del grafo,
   01–10) los títulos van ~+20% — equivalente al aumento de las etiquetas del grafo
   desktop. Scopeado a .cine-constellation__list para NO tocar el roster de equipo
   ni los paths, que reusan .cine-row. En teléfonos el tamaño se fijaba al mínimo del
   clamp (1.375→1.65rem ≈ 22→26px). La fila sigue centrada (índice · título · flecha)
   y el título envuelve dentro de __main (min-width:0) sin desbordar. */
.cine-constellation__list .cine-row__title {
  font-size: clamp(1.65rem, 3.8vw, 2.7rem);
}
.cine-row__sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--soft);
}

/* Retrato/ícono que aparece a la derecha en hover (técnica team-page). El hueco
   queda RESERVADO siempre (ancho fijo + aspect) → opacity:0 en reposo, sin CLS.
   En reposo va en B/N (grayscale); a color en hover. */
.cine-row__media {
  flex: none;
  width: clamp(48px, 7vw, 72px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  filter: grayscale(1);
  transition:
    opacity var(--dur-hover) var(--ease),
    transform var(--dur-hover) var(--ease),
    filter var(--dur-hover) var(--ease);
}
.cine-row__media > img,
.cine-row__media > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Flecha = affordance PERMANENTE de "esto es clickeable" (no se diluye). */
.cine-row__arrow {
  flex: none;
  display: inline-flex;
  color: var(--accent-ink);
  transition: transform var(--dur-hover) var(--ease);
}

/* Hover/focus: el desplazamiento solo en dispositivos con puntero. */
@media (hover: hover) and (pointer: fine) {
  .cine-row:hover,
  .cine-row:focus-within {
    transform: translateX(8px);
  }
  .cine-row:hover .cine-row__title,
  .cine-row:focus-within .cine-row__title {
    color: var(--accent-ink);
  }
  .cine-row:hover .cine-row__media,
  .cine-row:focus-within .cine-row__media {
    opacity: 1;
    transform: translateX(0);
    filter: grayscale(0);
  }
  .cine-row:hover .cine-row__arrow,
  .cine-row:focus-within .cine-row__arrow {
    transform: translateX(4px);
  }
}

/* Foco de teclado evidente (la fila es un enlace). */
.cine-row:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
  border-radius: var(--r-xs);
}

/* Táctil / sin hover: el retrato es un realce de hover → en táctil no aporta
   (sin foto aún es solo un placeholder), así que se oculta y la fila queda
   limpia (texto + flecha/CTA). */
@media (hover: none) {
  .cine-row__media {
    display: none;
  }
}

/* Angosto: filas compactas (sin retrato). */
@media (max-width: 560px) {
  .cine-row__media {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cine-row,
  .cine-row__media,
  .cine-row__title,
  .cine-row__arrow {
    transition: none !important;
  }
  .cine-row:hover,
  .cine-row:focus-within {
    transform: none;
  }
}

/* ──────────────────────── .cine-figures ──────────────────────
   Fila de CIFRAS gigantes (number infographic), divididas por hairline vertical,
   SIN tarjeta. El look nuevo aplica SOLO dentro de .cine-figures → la sección de
   stats actual del home (.cine-stats__grid .cine-stat) queda intacta hasta Fase 2.4.
   Markup objetivo: cada .cine-stat con data-cine-reveal; .cine-stat__num lleva
   data-count="450" data-suffix="+" (lo anima el contador de cinematic.js). */
.cine-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 56px);
}
.cine-figures .cine-stat {
  flex: 1 1 140px; /* basis chico → 4 cifras caben en fila hasta ~760px sin wrap desparejo */
  /* divisor = hairline vertical (no la barra turquesa de 2px del look viejo) */
  border-left: 1px solid var(--hairline);
  padding-left: clamp(16px, 2.5vw, 32px);
}
.cine-figures .cine-stat:first-child {
  border-left: 0;
  padding-left: 0;
}
.cine-figures .cine-stat__num {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--fs-figure);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--light);
  font-variant-numeric: tabular-nums; /* + [data-count] bloquea minWidth → CLS 0 */
  margin-bottom: var(--sp-1);
}
.cine-figures .cine-stat__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}
/* Matiz honesto (YMYL): p. ej. "autoinforme interno; los resultados varían". */
.cine-stat__note {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-style: italic;
  line-height: 1.4;
  color: var(--soft);
  opacity: 0.82;
}
/* Apilado: el divisor pasa de hairline vertical a hairline superior. Umbral 760px:
   4 cifras gigantes dejan de caber holgadas en una fila antes de eso, así que
   apilan en columna (mejor que un wrap 3+1 desparejo). */
@media (max-width: 760px) {
  .cine-figures {
    flex-direction: column;
    gap: 0;
  }
  .cine-figures .cine-stat {
    flex-basis: auto;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: clamp(16px, 4vw, 24px);
    margin-top: clamp(16px, 4vw, 24px);
  }
  .cine-figures .cine-stat:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
}

/* ─────────────────────── .cine-draw-line ─────────────────────
   Markup objetivo:
     <svg class="cine-draw-line" viewBox="0 0 4 600" preserveAspectRatio="none" aria-hidden="true">
       <path class="cine-draw-line__path" d="M2 0 V600" pathLength="1"/>
     </svg>
   pathLength="1" NORMALIZA la longitud → dasharray/offset funcionan sin medir el
   path en JS (robusto a resize). El SVG reserva su alto vía viewBox → CLS 0.
   (GSAP+ScrollTrigger están cargados: si el método pide trazo ligado al scrub en
   vez de self-draw, se puede animar este mismo dashoffset desde JS en Fase 2.2.) */
.cine-draw-line {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cine-draw-line__path {
  fill: none;
  stroke: var(--accent); /* turquesa = trazo que se dibuja (acento de interacción) */
  stroke-width: var(--cine-draw-w, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1; /* trabaja con pathLength="1" */
  stroke-dashoffset: 0; /* FALLBACK: totalmente trazado (sin soporte / reduced-motion) */
}
@keyframes cineDrawLine {
  from {
    stroke-dashoffset: 1; /* sin dibujar */
  }
  to {
    stroke-dashoffset: 0; /* trazado */
  }
}
/* Self-draw ligado a scroll, CERO JS (mismo patrón que el método de wellness-
   group). Gated por soporte + no-preference → si falta, queda el fallback trazado. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cine-draw-line {
      view-timeline-name: --cine-draw;
      view-timeline-axis: block;
    }
    .cine-draw-line__path {
      stroke-dashoffset: 1;
      animation: cineDrawLine linear both;
      animation-timeline: --cine-draw;
      animation-range: entry 12% cover 55%;
    }
  }
}

/* ============================================================
   FASE 2.1 · ESPECIALIDADES COMO CONSTELACIÓN (.cine-synergy)
   ------------------------------------------------------------
   Base accesible = índice editorial .cine-row (DOM real, SEO, móvil, sin JS).
   Capa desktop = red SVG (hub "CEF" + 10 nodos) que construye cinematic.js
   desde esa misma lista. El swap lo decide el CSS: la red solo aparece en
   desktop con puntero fino y cuando el JS marcó .is-ready; si no, queda la
   lista. Cero contenido solo-en-SVG.

   - Tokens + color-mix; cero hex nuevo (modo oscuro intacto).
   - Reusa [data-cine-reveal] para la entrada del bloque.
   - Motion solo transform/opacity (flotación) + cambios de color (resaltado),
     todo gated por reduced-motion. El resaltado por hover/focus SIGUE en
     reduced-motion (es información, no decoración).
   - CLS 0: el viewBox del SVG reserva el alto; la lista no reflota.
   - Foco visible (anillo SVG propio); área de clic del nodo ≥44px (hit r=40
     en unidades de viewBox; la red solo se muestra ≥1100px → escala suficiente).
   ============================================================ */
.cine-constellation {
  max-width: 1180px;
  margin: 0 auto;
}

/* --- BASE · índice editorial (.cine-row) --- */
/* Cierre del grupo por abajo (el divisor entre filas lo da el border-top de cada
   .cine-row). Tras el refactor de la utilidad a flex + .cine-rows, ya no hace
   falta anular ningún :last-child ni fijar columnas: la fila (índice · texto ·
   flecha, sin retrato) se ordena sola por flex. */
.cine-constellation__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
}

/* --- CAPA desktop · red SVG + detalle (oculta por defecto = fallback lista) --- */
.cine-constellation__viz {
  display: none;
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .cine-constellation.is-ready .cine-constellation__list {
    display: none;
  }
  .cine-constellation.is-ready .cine-constellation__viz {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
  }
}

/* Home más corta en móvil/tablet: el <ol> de 16 es lo visible bajo 1100px (el SVG
   solo aparece ≥1100px+puntero-fino). Mostramos solo las 6 primeras destacadas; el
   CTA "Ver las 16 especialidades →" lleva al catálogo completo en /servicios. Las 16
   <li> SIGUEN en el DOM (SEO + grafo desktop intactos: cinematic.js las lee igual).
   Tope en 1099px = complemento exacto del min-width:1100px del viz → no se pisan. */
@media (max-width: 1099px) {
  .cine-constellation__list li:nth-child(n+7) { display: none; }
}

.cine-constellation__stage {
  position: relative;
  padding-inline: clamp(20px, 4vw, 56px); /* aire para que los labels no se corten */
}
.cine-constellation__svg {
  display: block;
  width: 100%;
  height: auto; /* el viewBox reserva la proporción → CLS 0 */
  overflow: visible;
}

/* Aristas: spokes hub→nodo + anillo nodo→vecino. Hairline en reposo; al activar
   un nodo, sus aristas se iluminan en turquesa (refuerza "todo integrado"). */
.cine-edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.6; /* spokes con más cuerpo (presencia del tejido) */
  opacity: 0.7;
  transition:
    stroke var(--dur-hover) var(--ease),
    stroke-width var(--dur-hover) var(--ease),
    opacity var(--dur-hover) var(--ease);
}
/* Anillo entre vecinos: más fino que los spokes y un punto más visible en reposo
   (0.45 → 0.6), sin competir con el hub+spokes (0.7). */
.cine-edge--ring {
  stroke-width: 1;
  opacity: 0.6;
}
.cine-edge.is-active {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 1;
}

/* Hub central "CEF" (decorativo: el centro del que todo cuelga). */
.cine-hub__disc {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.cine-hub__label {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 26px; /* unidades de viewBox */
  letter-spacing: 0.02em;
  fill: var(--accent-ink);
  text-anchor: middle;
  dominant-baseline: central;
}

/* Nodo = enlace SVG focuseable (Tab + Enter navega a la especialidad). */
.cine-node {
  cursor: pointer;
}
.cine-node__hit {
  /* Área de clic/foco. r=48 (unidades de viewBox) garantiza ≥44px renderizado
     incluso en el ancho mínimo donde aparece la red (~1100px). No solapa con
     vecinos (distancia mínima entre centros ≈124 > 96). */
  r: 48px;
  fill: transparent;
}
.cine-node__dot {
  r: 12px; /* dot tangible (antes 9) */
  fill: var(--surface);
  stroke: var(--accent-ink);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--dur-hover) var(--ease),
    fill var(--dur-hover) var(--ease),
    stroke var(--dur-hover) var(--ease);
}
.cine-node__focus {
  r: 22px; /* anillo holgado alrededor del dot más grande */
  fill: none;
  stroke: var(--focus-ring);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}
.cine-node__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px; /* unidades de viewBox · +20% (David r2: etiquetas más grandes).
     Sigue sin encimarse ni cortarse: el spill lateral (~16 u) lo absorbe el
     padding-inline del stage; al ser unidades de viewBox, el proporcional es igual
     en todo ancho desktop (≥1100px, único rango donde se muestra la red). */
  fill: var(--soft);
  transition: fill var(--dur-hover) var(--ease);
}

/* Activo (por mouse, por teclado, o el marcado por defecto del JS) */
.cine-node.is-active .cine-node__dot,
.cine-node:hover .cine-node__dot {
  fill: var(--accent);
  stroke: var(--accent);
  transform: scale(1.55);
}
.cine-node.is-active .cine-node__label,
.cine-node:hover .cine-node__label {
  fill: var(--light);
}
/* Foco de teclado evidente (anillo SVG, no outline del navegador). */
.cine-node:focus {
  outline: none;
}
.cine-node:focus-visible .cine-node__focus {
  opacity: 1;
}
.cine-node:focus-visible .cine-node__dot {
  fill: var(--accent);
  stroke: var(--accent);
  transform: scale(1.55);
}
.cine-node:focus-visible .cine-node__label {
  fill: var(--light);
}

/* Detalle editorial: sin caja, solo tipografía + hairline a la izquierda. */
.cine-constellation__detail {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(20px, 2vw, 32px);
}
.cine-constellation__detail-pre {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.cine-constellation__detail-name {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--light);
}
.cine-constellation__detail-desc {
  margin: 0 0 var(--sp-3);
  max-width: 42ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--soft);
}
.cine-constellation__detail-cta {
  align-self: start;
}

/* CTA de sección (catálogo completo). */
.cine-synergy__foot {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
}

/* Flotación sutil en reposo (solo transform; JS escalona el delay). */
@media (prefers-reduced-motion: no-preference) {
  .cine-node {
    animation: cineNodeFloat 6s ease-in-out infinite;
  }
  .cine-node:hover,
  .cine-node:focus-within,
  .cine-node.is-active {
    animation-play-state: paused; /* al interactuar, el nodo se queda quieto */
  }
}
@keyframes cineNodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ============================================================
   FASE 2.2 · MÉTODO COMO TIMELINE CON LÍNEA SVG DIBUJADA EN SCROLL
   ------------------------------------------------------------
   4 pasos A/B/C/D anclados a UNA línea vertical que se "dibuja" al scrollear con
   la utilidad .cine-draw-line (pathLength="1" + animation-timeline:view(), técnica
   nativa, sin plugins). VERTICAL en todos los anchos → degrada a móvil sin cambiar
   de layout. Pasos tipográficos (marcador serif + título + texto), SIN caja.

   - Fallback sin scroll-timeline: la línea queda TRAZADA (dashoffset:0) — lo da la
     propia utilidad. Pasos: [data-cine-reveal] (IO los revela; en reduced-motion el
     media query de cinematic.css los deja visibles vía CSS) → nunca invisibles.
   - reduced-motion: línea trazada completa + 4 pasos estáticos.
   - CLS 0: la línea va absolute (fuera de flujo); los pasos reservan su alto y solo
     animan opacity/transform.
   ============================================================ */
.cine-timeline {
  --marker: clamp(54px, 7vw, 68px);
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(44px, 7vw, 84px);
}

/* Línea conectora (decorativa): del centro del 1er marcador al del último. */
.cine-draw-line.cine-timeline__line {
  --cine-draw-w: 3; /* trazo con cuerpo (la utilidad lo lee) */
  position: absolute;
  left: calc(var(--marker) / 2);
  top: calc(var(--marker) / 2);
  bottom: calc(var(--marker) / 2);
  width: 4px;
  height: auto; /* top/bottom mandan (override del height:100% de la utilidad) */
  transform: translateX(-50%);
  z-index: 0;
}

.cine-timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--marker) 1fr;
  column-gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

/* Marcador = nodo serif anclado a la línea. Fondo = el de la sección (--s-light-bg)
   para enmascarar la línea detrás → se ve "ensartado" en ella, sin caja. */
.cine-timeline__marker {
  position: relative;
  z-index: 1; /* sobre la línea */
  width: var(--marker);
  height: var(--marker);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--s-light-bg);
  border: 1.5px solid color-mix(in srgb, var(--accent-ink) 40%, transparent);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  color: var(--accent-ink);
}

.cine-timeline__body {
  min-width: 0;
  padding-top: clamp(8px, 1.6vw, 16px); /* alinea el título con el centro del marcador */
}
.cine-timeline__title {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--light);
}
.cine-timeline__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--soft);
}

/* ============================================================
   FASE 2.3 · EQUIPO COMO ROSTER EDITORIAL (.cine-row--team)
   ------------------------------------------------------------
   4 grupos de disciplina como filas .cine-row (sin tarjeta): nombre serif + rol
   sans + retrato hover-reveal (slot reservado, listo para <img>) + CTA a WhatsApp
   del área (href conservado). Toda la fila es el enlace (≥44px). Tokens; WhatsApp
   verde #25d366 = color de marca de terceros (ya hardcodeado en el resto del
   sitio, no es de la paleta CEF). reduced-motion: sin desplazamiento, el retrato
   aparece sin animar. CLS 0: el slot reserva su hueco; solo opacity/transform.
   ============================================================ */
.cine-team__roster {
  max-width: 880px;
  margin: clamp(32px, 4vw, 56px) 0 clamp(32px, 4vw, 48px);
}
.cine-row--team {
  --cat: var(--accent);
}

/* Retrato: placeholder de marca ahora; <img class="cine-row__img"> cuando lleguen
   las fotos (el hueco ya está reservado → sin CLS). */
.cine-row--team .cine-row__media {
  width: clamp(58px, 8vw, 86px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.cine-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cine-row__ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(120% 110% at 28% 18%, color-mix(in srgb, var(--cat) 70%, #fff 14%), transparent 58%),
    linear-gradient(155deg, color-mix(in srgb, var(--cat) 92%, #fff 0%), color-mix(in srgb, var(--cat) 55%, #04111f 42%));
}
.cine-row__ph svg {
  width: 42%;
  height: auto;
  opacity: 0.95;
}

/* CTA = affordance de la fila: WhatsApp + "Agendar" + flecha, a la derecha. */
.cine-row__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--soft);
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease);
}
.cine-row__wa {
  display: inline-flex;
  color: #25d366; /* verde WhatsApp (marca de terceros, consistente con el sitio) */
}

/* Hover/focus de la fila: el CTA pasa a accent (la flecha ya se desplaza por la
   regla base de .cine-row). Solo en dispositivos con puntero. */
@media (hover: hover) and (pointer: fine) {
  .cine-row--team:hover .cine-row__cta,
  .cine-row--team:focus-within .cine-row__cta {
    color: var(--accent-ink);
  }
}

/* ============================================================
   FASE 2.4 · STATS COMO CIFRAS GIGANTES (.cine-stats → .cine-figures)
   ------------------------------------------------------------
   La sección envuelve las 4 cifras en .cine-figures + .cine-stat (utilidades de
   Fase 1): número gigante serif + label, divididas por hairline vertical (→
   horizontal/superior al apilar en móvil), SIN caja. El render viejo (.cine-stat
   de cinematic.css) se retiró; el nuevo vive en el bloque FASE 2.1 (scoped a
   .cine-figures). Contador [data-count] (cinematic.js) disparado por
   IntersectionObserver; tabular-nums + minWidth bloqueado → CLS 0. reduced-motion:
   el JS deja el valor final del HTML (no cuenta). Cifras/labels intactos
   (YMYL: no se infla ni redondea; hoy no hay notas → no se inventan).
   ============================================================ */
/* Layout: de [head | grid 1fr 2fr] (cinematic.css) a apilado — encabezado arriba
   + fila de cifras a todo el ancho (4 cifras gigantes piden el ancho completo). */
.cine-stats__inner {
  display: block;
  max-width: 1180px;
}
.cine-stats__head {
  max-width: 30ch;
  margin-bottom: clamp(40px, 6vw, 72px);
}
/* Escala un punto menor que el --fs-figure global (hasta 7rem): "1.000+" a 7rem es
   demasiado ancho para 4 cifras en una fila. A ~4.75rem caben holgadas y siguen
   siendo gigantes. */
.cine-stats {
  --fs-figure: clamp(2.5rem, 5.5vw, 4.75rem);
}
/* El sufijo (+/%) va junto al número, nunca a otra línea: el span del contador es
   inline-block con minWidth bloqueado, así que sin nowrap el sufijo se desbordaba. */
.cine-stats .cine-stat__num {
  white-space: nowrap;
}

/* ============================================================
   FASE 3.1 · MANIFIESTO — 3 pilares en ZIG-ZAG tipográfico (sin tarjeta)
   ------------------------------------------------------------
   Reemplaza las tarjetas .cine-pillar por bloques editoriales: ícono lineal
   (stroke 1.5 = mismo grosor que nodos/aristas de la constelación) + título serif
   + texto sans, en zig-zag asimétrico (el bloque par se desplaza a la derecha),
   separados por espacio negativo. Conserva .cine-pillar (hook de stagger en
   cinematic.js + [data-cine-reveal]). El look-tarjeta viejo (cinematic.css) queda
   ANULADO aquí; su CSS cae en el barrido huérfano de cierre de Fase 3. Tokens;
   reduced-motion vía el sistema existente; CLS 0 (solo transform/opacity en reveal).
   ============================================================ */
.cine-manifesto__pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 7vw, 88px);
  margin-top: clamp(48px, 7vw, 96px);
}
/* Reset de la tarjeta → bloque editorial [ícono | cuerpo] */
.cine-manifesto__pillars .cine-pillar {
  max-width: 56ch;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
.cine-manifesto__pillars .cine-pillar::before {
  content: none; /* anula la barra de acento de la card vieja */
}
.cine-manifesto__pillars .cine-pillar:hover {
  transform: none; /* no es card → sin lift en hover */
  box-shadow: none;
  border-color: transparent;
}
/* Zig-zag: el 2º bloque se desplaza a la derecha (asimetría con propósito). */
@media (min-width: 760px) {
  .cine-manifesto__pillars .cine-pillar:nth-child(even) {
    align-self: flex-end;
  }
}
/* Ícono lineal coherente con la red (stroke 1.5, acento). */
.cine-manifesto__pillars .cine-pillar__icon {
  width: clamp(34px, 4vw, 42px);
  height: auto;
  margin: 0;
  color: var(--accent-ink);
}
.cine-manifesto__pillars .cine-pillar__icon svg {
  width: 100%;
  height: auto;
  display: block;
  stroke-width: 1.5;
}
.cine-manifesto__pillars .cine-pillar__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--light);
}
.cine-manifesto__pillars .cine-pillar__text {
  margin: 0;
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--soft);
}

/* ============================================================
   FASE 3.3 · TESTIMONIOS → CITA EDITORIAL DISPLAY (sin carrusel)
   ------------------------------------------------------------
   Política vigente: NO se publican testimonios (ética sanitaria). Se reconvierte
   a UNA cita de la filosofía CEF (frase existente, no inventada) a escala display,
   sin carrusel ni tarjetas. Conserva .cine-quotes / __inner / __mark; el CSS del
   carrusel viejo (__track / .cine-quote / __dots) queda huérfano → barrido de
   cierre de Fase 3. Tokens; [data-cine-reveal]; reduced-motion vía sistema; CLS 0.
   ============================================================ */
.cine-quotes__cita {
  margin: 0;
}
.cine-quotes__cita p {
  margin: 0 auto clamp(20px, 3vw, 32px);
  max-width: 28ch;
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.625rem, 3.6vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--light);
  text-wrap: balance; /* reparte las líneas → sin viuda colgando */
}
.cine-quotes__cita cite {
  font-style: normal;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ============================================================
   FASE 3.4 · TELEMEDICINA — dos columnas ASIMÉTRICAS (sin caja)
   ------------------------------------------------------------
   La sección ya era 2-col sin tarjetas (features con hairline + mock de teléfono).
   Aquí: (1) intro anclada a la IZQUIERDA (editorial, no banda centrada); (2) layout
   ASIMÉTRICO texto-features > mock. Los items 01–05 son CAPACIDADES paralelas, NO
   pasos → se quedan como lista numerada (NO se les pone la línea SVG del Método:
   no es proceso y sería un 3er timeline en la home). CTAs intactos (cambio CSS-only).
   Tokens; [data-cine-reveal] ya presente; reduced-motion vía sistema; CLS 0.
   ============================================================ */
.cine-telemed__intro {
  max-width: 760px;
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}
.cine-telemed__intro .section-head {
  justify-content: flex-start;
}
.cine-telemed__lead {
  margin-left: 0;
  margin-right: 0;
}
/* Asimetría: el texto/features toma más ancho que el mock (que es naturalmente
   estrecho por ser un teléfono). Separadas por espacio, sin caja. Solo ≥1025px:
   ≤1024 la telemed apila a 1 columna (regla de cinematic.css) y se respeta. */
@media (min-width: 1025px) {
  .cine-telemed__layout {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }
}

/* ============================================================
   FASE 3.6 (rev3) · CTA FINAL — cierre EDITORIAL claro (sin caja, sin grid, sin velo)
   ------------------------------------------------------------
   El velo navy se DESCARTÓ (decisión del usuario): el navy volvió como color de
   BOTÓN, no como fondo. La sección es transparente (background.css) → vive sobre el
   ambiente claro/oscuro como las demás. Contención por tipografía + hairlines + aire.
   Tokens theme-aware: título --navy / acento --teal (SectionTitle); canales --light +
   hairline --line + ícono --accent-ink. Botón navy del sistema (alto contraste sobre
   claro). CLS 0; hrefs intactos; ≥44px/foco del .btn.
   ============================================================ */
/* Sin caja en la tarjeta CTA: contención por aire + tipografía, no por surface/borde. */
.cine-cta__card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* Botón contenido (no full-block) + un punto más grande → "botón tangible" con aire
   para el magnetismo. Sigue siendo turquesa real (.btn--primary), ≥44px, foco visible. */
.cine-cta__card .btn--block {
  width: auto;
  padding: 18px 40px;
}
/* Canales (WhatsApp/Email/Sede): filas editoriales con hairline (--line, theme-aware:
   navy ~10% en claro / claro ~12% en oscuro), sin surface/borde/sombra. El ícono
   turquesa lo da la regla global .cine-cta__channel svg:first-child. */
.cine-cta__channel {
  padding: 14px 4px;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.cine-cta__channel:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-color: var(--line);
  transform: translateX(4px);
}

/* ============================================================
   SISTEMA DE BOTONES NAVY GLOBAL (theme-aware) · UNA sola variante
   ------------------------------------------------------------
   Decisión del usuario: TODOS los botones navy sólido + texto blanco, SIN
   jerarquía de color. El énfasis del de conversión (Agendar) lo dan tamaño/
   posición/aislamiento + el magnético, no el color. El turquesa deja de ser
   relleno de botón.

   FIX MODO OSCURO (el bug): el relleno usa --navy-deep, theme-aware (#001050
   claro / #1a2d6b oscuro → blanco AAA en ambos). En claro el navy ya separa del
   fondo; en OSCURO #1a2d6b sobre #071529 da ~1.4:1 (la FORMA se perdía) → un
   borde claro (--btn-border, blanco ~16%) lo despega. Tokens + color-mix, cero
   hex literal. Carga al final ⇒ gana por ORDEN a styles.css (sin !important);
   para las reglas de disciplina theme-scoped se iguala la especificidad abajo.
   Estados :active y reduced-motion ya gateados en styles.css (brightness/scale).
   ============================================================ */
:root {
  --btn-bg: var(--navy-deep);
  --btn-fg: var(--white);
  --btn-border: transparent;
  --btn-shadow: 0 8px 24px -10px color-mix(in srgb, var(--navy-deep) 55%, transparent);
}
:root[data-theme="dark"] {
  /* despega el navy del fondo oscuro plano (#071529) */
  --btn-border: color-mix(in srgb, var(--white) 16%, transparent);
}

.btn--primary, .btn--secondary, .btn--ghost, .btn--ghost.light,
.btn--whatsapp, .btn--whatsapp.light, .btn--team, .btn--salud, .btn--mov,
.nav__cta,
.plan__cta, .plan--featured .plan__cta,
:root[data-theme="light"] .btn--team, :root[data-theme="light"] .btn--salud,
:root[data-theme="light"] .btn--mov, :root[data-theme="dark"] .btn--salud,
:root[data-theme="light"] .btn--team:hover, :root[data-theme="light"] .btn--team:focus-visible,
:root[data-theme="light"] .btn--team:active {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Matar el relleno ::before (gradiente turquesa del primario / disciplina). */
.btn--primary::before, .btn--team::before,
.btn--salud::before, .btn--mov::before { display: none; }

/* Hover/focus unificado: sube + sombra (la flecha se desplaza donde exista). */
.btn--primary:hover, .btn--secondary:hover, .btn--ghost:hover, .btn--whatsapp:hover,
.nav__cta:hover, .booking__fab:hover:not(.booking__fab--wa), .plan__cta:hover,
.btn--primary:focus-visible, .btn--secondary:focus-visible, .btn--ghost:focus-visible,
.btn--whatsapp:focus-visible, .nav__cta:focus-visible, .plan__cta:focus-visible {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-border);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--navy-deep) 60%, transparent);
}

/* ============================================================
   FASE 0 · FUNDACIONES — utilidades reutilizables del rediseño interno
   ------------------------------------------------------------
   Solo lo que NO existía. El filtro tipográfico reusa .svc-chips; el hover-reveal
   del retrato reusa .cine-row. Acá: .cine-prose (lectura) + .cine-subnav (índice
   pegajoso). Tokens theme-aware, cero hex; motion solo transform/opacity; ≥44px +
   foco visible; sin reflow (CLS 0).
   ============================================================ */

/* .cine-prose · columna de LECTURA (medida ~60–66 caracteres). Para artículos y
   fichas largas (blog-articulo). NO es caja: limita el ancho + da ritmo vertical.
   Cuerpo Source Sans 3, títulos IBM Plex Serif. AA en claro y oscuro por tokens. */
.cine-prose {
  max-width: 68ch;
  margin-inline: auto;
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem); /* ~17–20px */
  line-height: 1.7;
  color: var(--soft);
}
.cine-prose > * + * { margin-top: 1.15em; } /* la proximidad agrupa, sin bordes */
.cine-prose h2,
.cine-prose h3 {
  font-family: var(--font-serif);
  color: var(--light);
  line-height: 1.2;
  margin-top: 1.9em;
}
.cine-prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cine-prose h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.cine-prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.cine-prose blockquote {
  margin: 1.8em 0;
  padding-left: clamp(16px, 3vw, 28px);
  border-left: 2px solid var(--accent-ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.18em;
  line-height: 1.45;
  color: var(--light);
}
.cine-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* .cine-subnav · índice PEGAJOSO de secciones (páginas largas). Hairline + links
   tipográficos, NO caja. Subrayado activo = transform:scaleX (GPU). Click-to-scroll
   lo cubre el smooth-scroll global (main.js §6); el realce .is-current lo pone el
   scroll-spy (main.js §6.1). Fondo translúcido + blur solo para legibilidad al
   pegarse sobre el contenido. reduced-motion: realce instantáneo (sin transición). */
.cine-subnav {
  position: sticky;
  top: var(--subnav-top, 64px);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 32px);
  padding: 12px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.cine-subnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 2px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-hover) var(--ease);
}
.cine-subnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease);
}
.cine-subnav a:hover,
.cine-subnav a:focus-visible,
.cine-subnav a.is-current { color: var(--light); }
.cine-subnav a:hover::after,
.cine-subnav a:focus-visible::after,
.cine-subnav a.is-current::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .cine-subnav a,
  .cine-subnav a::after { transition: none; }
}

/* ============================================================
   ESPECIALIDAD · fichas clínicas editoriales (sin cajas)
   ------------------------------------------------------------
   Convierte las cajas que quedaban a editorial, conservando el contenido byte a
   byte y los <details> nativos. Marca unificada: el template ya no aplica
   cine-hero--mov / cine-sec--mov → clínica y movimiento renderizan idénticas.
   Tokens theme-aware, cero hex. ============================================ */

/* "Qué incluye" → lista editorial con hairlines (antes check-list suelto). */
.spec-includes {
  gap: 0;
  border-bottom: 1px solid var(--hairline);
}
.spec-includes li {
  padding: 15px 4px;
  border-top: 1px solid var(--hairline);
}

/* "Áreas de atención" → tags editoriales (sin pill/caja): acento + espacio los
   hacen escaneables; sin separadores → robusto al envolver en móvil. */
.spec-areas { gap: clamp(10px, 1.5vw, 18px) clamp(16px, 2.6vw, 30px); flex-wrap: wrap; }
.spec-areas__chip {
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  color: var(--accent-ink);
}

/* Especialistas → ROSTER editorial: filas con hairline (no tarjetas), cada una un
   <details> nativo. El summary es el control accesible (foco visible, ≥44px); el
   cuerpo expande sin caja. Alto colapsado estable; el expand es interacción del
   usuario (excluido de CLS). */
.spec-team-grid {
  gap: 0;
  border-bottom: 1px solid var(--hairline);
}
.spec-pro {
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.spec-pro__head { padding: clamp(16px, 2.4vw, 24px) 4px; }
.spec-pro__head:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}
.spec-pro__body { padding: 0 4px 22px; }

/* Registro Superintendencia REALZADO (trust signal E-E-A-T, sin tocar el texto):
   barra de acento + algo más de cuerpo → más presencia. */
.spec-pro__registro {
  font-size: 13.5px;
  padding: 11px 14px;
  border-left: 3px solid var(--accent-ink);
}
.spec-pro__registro .icon { width: 17px; height: 17px; }

/* CTA de especialidad · cierre EDITORIAL claro (versión elegida). NO banda navy:
   la sección queda transparente (section--dark → ambiente) con texto theme-aware
   y botón navy sólido del sistema (alto contraste sobre claro). Sin override CSS:
   styles.css (.cine-cta-band__*) + el sistema de botones ya lo resuelven en ambos
   temas. El navy quedó como color de BOTÓN, no de fondo (coherente con el home). */

/* ============================================================
   AGENDAR · contexto editorial (sin caja) — el widget y la banda navy FIJO se
   conservan (zona de conversión / decisión a11y). Solo la columna de trust signals
   pasa de tarjeta a lista con hairlines theme-aware. ===========================*/
.agendar__context {
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
  padding: 0;
}
.agendar__ctx { border-bottom-color: var(--hairline); }

/* ============================================================
   SERVICIOS · índice editorial (filas con hairline, NO tarjetas)
   ------------------------------------------------------------
   Una sola lista integrada de especialidades, filtrable por NECESIDAD (svc-chips +
   data-needs; el filtro JS esconde con [hidden], que sigue ganando por el !important
   global). Sin clusters por área Salud/Movimiento. Enlaza a ficha (Ver detalle) +
   Agendar. Tokens theme-aware. ===============================================*/
/* SCOPEADO a #svcGrid: esta fila editorial es del ÍNDICE de servicios. .svc-card es
   clase compartida (wellness-group/empresas/nosotros la usan como celda de contenido)
   → fuera de #svcGrid conserva su layout; el de-card de esas páginas va más abajo. */
#svcGrid {
  display: block;
  border-bottom: 1px solid var(--hairline);
}
#svcGrid .svc-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(20px, 2.6vw, 30px) 4px;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
}
#svcGrid .svc-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#svcGrid .svc-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
#svcGrid .svc-card__lead { font-size: var(--fs-small); line-height: 1.5; }
#svcGrid .svc-card__actions { flex: none; margin-top: 0; padding-top: 0; }
@media (max-width: 640px) {
  #svcGrid .svc-card { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   EQUIPO · roster editorial (de-card): entradas SIN tarjeta, separadas por hairline
   (catálogo multi-columna). Conserva agrupación por disciplina (team-group), filtro
   svc-chips y el monograma monos[] (tokens navy/turquesa, sin marca vieja). El
   monograma/retrato queda visible (identidad); con photoLocal se muestra la foto sin
   cambiar layout. Credenciales/registro/<details> trayectoria intactos. =========*/
.team-grid {
  gap: 0 clamp(28px, 4vw, 56px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  border-top: 1px solid var(--hairline);
}
.pro-card {
  padding: clamp(22px, 2.2vw, 28px) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}
.pro-card:hover,
.pro-card:focus-within {
  transform: none;
  box-shadow: none;
}
.pro-card__name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
}

/* ============================================================
   TELEMED · "sin cajas" SCOPEADO por id (NO toca el .cine-pillar del home).
   - #como: 4 pasos → stepper editorial numerado (de-card).
   - #online: especialidades → entradas editoriales (de-card); svc-open (modal) intacto.
   - contacto: tarjeta → bloque editorial con hairline.
   El feature-list (.cine-telemed__features) ya es editorial; el mockup .device es
   ILUSTRATIVO (CSS, sin datos reales) con dims reservadas (aspect-ratio 9/16 → CLS 0).
   reduced-motion: se frenan las animaciones decorativas del mockup (faltaban). ====*/
#como .cine-cards,
#online .cine-cards {
  gap: 0 clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--hairline);
}
#como .cine-pillar,
#online .cine-pillar {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(22px, 2.4vw, 30px) 4px;
}
#como .cine-pillar:hover,
#online .cine-pillar:hover { transform: none; box-shadow: none; }
/* #online es clickeable (svc-open) → hover/foco sutil de afordancia. */
#online .cine-pillar:hover,
#online .cine-pillar:focus-visible { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Contacto: de tarjeta a bloque editorial con hairline (conserva la grilla interna). */
.cine-contact__card {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(28px, 4vw, 48px) 0 0;
}

/* reduced-motion: frena las animaciones decorativas del mockup de telemedicina
   (float del device, orbs, pings, typing) que no estaban gateadas. */
@media (prefers-reduced-motion: reduce) {
  .device,
  .cine-telemed__orb,
  .cine-telemed__pings .ping,
  .device__chat .typing span { animation: none !important; }
}

/* ============================================================
   NOSOTROS · valores/filosofía sin grid de tarjetas + áreas UNIFICADAS.
   Scopeado: el .cine-pillar del home/telemed no se toca (scope por id). NO hay
   historia con fechas/hitos → sin timeline (no se inventa, regla de contenido). ==*/
#proposito .cine-cards,
#filosofia .cine-cards {
  gap: 0 clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--hairline);
}
#proposito .cine-pillar,
#filosofia .cine-pillar {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(22px, 2.4vw, 30px) 4px;
}
#proposito .cine-pillar:hover,
#filosofia .cine-pillar:hover { transform: none; box-shadow: none; }

/* "Las dos áreas" (Salud + Movimiento): de-card a fila editorial. MARCA UNIFICADA →
   se neutraliza el split de color por área (salud navy / movimiento turquesa):
   ambas idénticas. Nombres y descripciones (contenido) intactos. */
.area-card {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  padding: clamp(24px, 3vw, 32px) 4px;
}
.area-card:hover { transform: none; }
.area-card--salud .area-card__tag,
.area-card--salud .area-card__icon,
.area-card--salud .area-card__link,
.area-card--movimiento .area-card__tag,
.area-card--movimiento .area-card__icon,
.area-card--movimiento .area-card__link { color: var(--accent-ink); }
.area-card--salud h3,
.area-card--movimiento h3 { color: var(--light); }
.area-card--salud:hover,
.area-card--movimiento:hover { border-color: var(--hairline); }

/* ============================================================
   BLOG · índice editorial tipográfico (sin tarjetas con thumbnail) + artículo a
   medida de lectura. El thumbnail de categoría se OCULTA (son placeholders de
   gradiente, sin imagen real) → la categoría queda como rótulo de TEXTO, sin color
   por área. Los gradientes por categoría quedan en tokens (sin color cálido/hex, ver
   cinematic.css). Filtro por categoría (.blog-filter) intacto. ==================*/
/* Destacado → entrada editorial prominente (sin media, sin caja). */
.blog-featured {
  display: block;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.blog-featured:hover { transform: none; box-shadow: none; }
.blog-featured__media { display: none; }
.blog-featured__body { padding: clamp(8px, 2vw, 20px) 4px clamp(24px, 3vw, 36px); }

/* Listado → filas editoriales con hairline (no tarjetas con thumbnail). */
.blog-grid {
  display: block;
  border-bottom: 1px solid var(--hairline);
}
.blog-card {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}
.blog-card:hover { transform: none; box-shadow: none; }
.blog-card__link { flex-direction: column; gap: 8px; padding: clamp(22px, 2.6vw, 30px) 4px; }
.blog-card__media { display: none; }
.blog-card__body { padding: 0; gap: 8px; }
.blog-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  transition: color var(--dur-hover) var(--ease);
}
.blog-card:hover .blog-card__title,
.blog-card__link:focus-visible .blog-card__title { color: var(--accent-ink); }

/* Artículo → medida de lectura (~66 caracteres). Autor/fecha/tiempo de lectura
   existentes se muestran; sin inventar revisor/fuentes (no hay esos campos). */
.blog-article__body { max-width: 64ch; }

/* ============================================================
   WELLNESS-GROUP + EMPRESAS (+ nosotros del grupo) · svc-cards de CONTENIDO →
   bloques editoriales apilados (eyebrow __area + título + texto) con hairlines, como
   el roster de equipo. Marca CORPORATIVA unificada: sin jerarquía consumo/B2B, sin
   split salud/movimiento. El #svcGrid de servicios queda fuera (su fila vive scopeada
   arriba). Solo forma — niveles/cadencia/cifras/nota legal intactos. ============*/
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-grid {
  gap: 0 clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--hairline);
}
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(22px, 2.4vw, 30px) 4px;
}
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card:hover,
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card:focus-within {
  transform: none;
  box-shadow: none;
  border-color: var(--hairline);
}
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card__area {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-ink);
}
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}
body:is([data-area='wellness-group'], [data-area='empresas']) .svc-card__lead {
  color: var(--soft);
  line-height: 1.55;
}

/* ============================================================
   GRUPO · "una sola entidad" — las descripciones de las células como LISTA
   editorial integrada (NO tarjetas, NO columnas). La plantilla reusa el .text
   de group.cells / celulas.items VERBATIM; los nombres/roles NO se renderizan
   (eso recrearía la división de marca). Apilado vertical a ancho de lectura,
   separado por hairlines + punto de acento — mismo idioma que .spec-includes.
   Se lee como "aspectos de un mismo grupo", no como tres bloques. Tokens, cero
   hex; sin async → CLS 0. ============================================ */
.group-aspects {
  list-style: none;
  margin: clamp(26px, 3.5vw, 40px) 0 0;
  padding: 0;
  max-width: 60ch;
  border-top: 1px solid var(--hairline);
}
.group-aspects li {
  position: relative;
  padding: clamp(15px, 1.9vw, 20px) 0 clamp(15px, 1.9vw, 20px) clamp(22px, 2.4vw, 28px);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 0.35vw + 0.99rem, 1.1875rem);
  line-height: 1.6;
  color: var(--soft);
}
.group-aspects li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(15px, 1.9vw, 20px) + 0.62em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-ink);
}

/* Preloader del grupo · "CEF WELLNESS GROUP" es más largo que "CEF CHILE": va en
   UNA sola línea (nowrap) y la tipografía escala con el viewport para que entre sin
   desbordar de 360px a desktop (en vez de quebrarse). Las letras revelan a la vez
   (parejo, sin que una quede rezagada o "caída"). Scopeado a .preloader__text del
   grupo: ningún otro texto del sitio cambia. Solo visible en desktop. */
body[data-area='wellness-group'] .preloader__text {
  white-space: nowrap;
  font-size: clamp(0.9rem, 3.6vw, 2rem);
  letter-spacing: clamp(0.04em, 0.5vw, 0.16em);
}
body[data-area='wellness-group'] .preloader__text span { animation-delay: 0s; }

/* EQUIPO · control "Ver perfil" (<details> inline que reemplazó el link externo al
   WordPress viejo). Tap-target ≥44px y foco visible por teclado. El panel es nativo
   (sin animación) → reduced-motion y CLS 0 sin trabajo extra. Solo .pro-card (equipo). */
.pro-card__more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pro-card__more > summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* TELEMEDICINA · el roster usa la MISMA interfaz que el de equipo (reusa .team-grid +
   .pro-card vía pro-card.njk). Aquí solo el espaciado entre grupos de especialidad
   dentro de la sección; las tarjetas no llevan estilo propio (eliminado lo .tele-*). */
.team-disc-group + .team-disc-group { margin-top: clamp(34px, 5vw, 52px); }

/* HOME · sección equipo EXPLORABLE (acordeón de áreas). Cada área es un <details>:
   summary = ícono + título + subtítulo + chevron (rota con transform, sin reflow). Al
   abrir, roster de la disciplina con pro-card en modo EDITORIAL (sin caja). Hairlines +
   tipografía, coherente con la home. Tap ≥44px, foco visible, reduced-motion. CLS 0
   (la expansión es interacción del usuario). */
.cine-team__areas {
  margin: 8px 0 clamp(30px, 5vw, 52px);
  border-top: 1px solid var(--hairline);
}
.team-area { border-bottom: 1px solid var(--hairline); }
.team-area__summary {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 22px);
  min-height: 44px;
  padding: clamp(18px, 2.6vw, 28px) 4px;
  cursor: pointer;
  list-style: none;
}
.team-area__summary::-webkit-details-marker { display: none; }
.team-area__icon {
  flex: none;
  width: clamp(42px, 5vw, 52px);
  aspect-ratio: 1;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
}
.team-area__icon svg { width: 56%; height: 56%; }
.team-area__id { flex: 1; min-width: 0; }
.team-area__title {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--light);
  transition: color var(--dur-hover) var(--ease);
}
.team-area__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--soft);
}
.team-area__chev {
  flex: none;
  color: var(--accent-ink);
  transition: transform var(--dur-hover) var(--ease);
}
.team-area[open] .team-area__chev { transform: rotate(180deg); }
.team-area__summary:hover .team-area__title,
.team-area__summary:focus-visible .team-area__title { color: var(--accent-ink); }
.team-area__summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.team-area__body {
  padding: 0 4px clamp(20px, 3vw, 32px) clamp(56px, 7.5vw, 74px);
}
/* pro-card EDITORIAL (sin caja) dentro del acordeón de la home */
.cine-team .pro-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(12px, 1.6vw, 16px) 0;
}
.cine-team .pro-card:hover,
.cine-team .pro-card:focus-within {
  transform: none;
  box-shadow: none;
  border: 0;
}
.cine-team .team-grid { gap: clamp(6px, 1.5vw, 16px) clamp(24px, 4vw, 44px); }
@media (prefers-reduced-motion: reduce) {
  .team-area__chev { transition: none; }
}

/* ============================================================
   MÓVIL · TIPOGRAFÍA FLUIDA (P1 #4) — anti-desborde + zoom-safe
   ------------------------------------------------------------
   · Titulares no se desbordan con palabras largas en español (overflow-wrap +
     hyphens, html lang="es") y rompen líneas con elegancia (text-wrap:balance).
     Selección amplia → cubre las 9 páginas (home, especialidad, telemed, equipo,
     servicios, entrenamiento, nosotros, wellness-group, blog, agendar).
   · Cuerpo fluido ≥16px; inputs ≥16px → evita el zoom involuntario de iOS al enfocar.
   · Las conversiones de titulares a clamp(rem+vw) por página viven en sus bloques
     ≤720 (cinematic.css / entrenamiento.css). Solo ≤768px; desktop intacto. CLS 0
     (reglas estáticas, sin JS). ============================================================ */
@media (max-width: 768px) {
  h1, h2, h3, h4,
  [class*="__title"], [class*="__name"], [class*="__line"], [class*="__heading"],
  .cine-area__quote, .cine-quotes__q, .blog-featured__title {
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
  }
  /* Cuerpo legible y zoom-safe (≥16px) */
  body { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); }
  /* Campos de formulario ≥16px: iOS NO hace zoom al enfocar si la fuente es ≥16px */
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ============================================================
   .cine-fade — UTILIDAD del sistema cine-* (rediseño global).
   Funde el borde INFERIOR de una sección hacia el fondo de la sección
   siguiente, con un gradiente vertical transparente → var(--fade-to).
   Direccional + theme-aware: cada sección setea --fade-to al TOKEN de
   fondo de la sección de abajo (ej. --fade-to: var(--s-light-bg)).

   CONTRATO DE APILAMIENTO (el rediseño lo cumple, la clase cae sola):
   1. La sección crea stacking + positioning context → lo garantiza esta
      utilidad (position:relative; isolation:isolate; idempotente en
      .cine-sec y .tmh-hero, que ya los tienen).
   2. El fundido (::after) va a z-index:1 → SOBRE el fondo (bg CSS, step-1)
      y las capas decorativas (foto/scrim/orbs a z-index:0/1).
   3. El CONTENIDO de la sección va en un wrapper a z-index:2 → queda POR
      ENCIMA del fundido y clickeable. (Contrato ÚNICO del rediseño.)

   Default seguro: --fade-to:transparent → aditiva y no-op si nadie setea
   el color; no altera ninguna página hasta aplicarse con un --fade-to.
   iOS-safe: SOLO gradiente CSS. Sin backdrop-filter/blur/WebGL/will-change.
   ============================================================ */
.cine-fade {
  position: relative;
  isolation: isolate;
}
.cine-fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Altura del fundido como perilla por sección (--fade-h). Default MODESTO:
     cada borde del rediseño ajusta su altura. (El tope viejo de 160px lavaba
     las meta-pills del hero de telemed en desktop ancho → ahora overridable.) */
  height: var(--fade-h, clamp(40px, 6vw, 96px));
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, var(--fade-to, transparent) 100%);
}