/* ============================================================================
   FISIOCARE — Hoja de estilos principal
   Dirección: "Vidrio Líquido" — navy profundo + rojo/teal vívidos + vidrio
   esmerilado (blur real, brillo especular, bordes de luz). Nada de beige
   ni naranja: los colores son los del logo (navy+rojo) y el teal del ERP,
   llevados a máxima saturación porque ahora viven sobre fondo oscuro.
   Sin build step. Vanilla CSS. Editable directamente.
   ============================================================================
   ÍNDICE
   01 · Tokens
   02 · Reset y base
   03 · Tipografía
   04 · Layout y utilidades
   05 · Movimiento (curvas, reveal, stagger, páginas)
   06 · Header y navegación
   07 · Botones
   08 · Hero
   09 · Barra de confianza
   10 · Mapa corporal (la firma)
   11 · Servicios y precios
   12 · Razones / Proceso
   13 · Nosotros
   14 · Local, videos, galería
   15 · Testimonios
   16 · FAQ
   17 · Agendar (formulario)
   18 · Pagos
   19 · CTA final y footer
   20 · Barra móvil fija y WhatsApp
   21 · Vidrio líquido (utilidades globales)
   ========================================================================== */

/* ── 01 · TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* PALETA CÁLIDA (2026-09-10) — el cliente pidió: "algo más cálido",
     "ese verde no me gusta", "más glass, moderna, llamativa sin exagerar".
     Se eliminó el teal/verde POR COMPLETO del sitio y se reemplazó por un
     ÁMBAR/TERRACOTA. La familia ahora es: rojo del logo (coral) + ámbar +
     ciruela profunda como ancla oscura. Nada frío salvo el azul de las venas
     del mapa anatómico, que es convención médica.
     Nota de mantenimiento: el token sigue llamándose "--cuidado" por historia
     (era el teal del ERP) pero su VALOR ahora es ámbar cálido — se conservó
     el nombre para no tener que renombrarlo en ~50 lugares. */
  --fondo:        #FDF8F3;   /* crema muy claro, cálido pero no beige apagado */
  --fondo-2:      #FFFFFF;

  --tinta:            #2B1B22;   /* tinta oscura cálida (ciruela/marrón, no navy frío) */
  --tinta-invertida:  #FFF8F3;   /* texto claro, SOLO dentro de bandas oscuras */
  --tinta-profunda:   #3D1526;   /* ciruela profunda: ya no se usa como fondo de banda (ver --banda), queda por si se necesita un acento puntual muy oscuro */
  --tinta-media:      #6B4E58;   /* texto secundario */
  --tinta-suave:      #9C8189;   /* texto terciario / ayuda */
  --tinta-linea:      rgba(43,27,34,.12);   /* bordes sobre vidrio claro */

  /* Banda clara: reemplaza el plum oscuro que tenían el footer, el CTA final,
     la barra de confianza y las secciones "oscura" — pedido del cliente de
     uniformidad, todo el sitio se queda en la familia de colores clara. */
  --banda:       #FAEEE3;   /* terracota muy pálido — claro y premium, no oscuro */
  --banda-linea: rgba(43,27,34,.08);

  --pulso:       #E8425A;   /* rojo del logo, coral cálido */
  --pulso-vivo:  #FF6B7D;
  --pulso-btn:   #D62E48;
  --pulso-hover: #B01F36;
  --pulso-wash:  rgba(232,66,90,.12);

  /* ÁMBAR (antes era teal — el verde que el cliente rechazó). Bajado de
     intensidad: el naranja anterior (#C2691E / #F59E42) "era muy intenso". */
  --cuidado:       #A8724A;   /* terracota apagado, contraste AA sobre claro */
  --cuidado-vivo:  #D9A277;
  --cuidado-wash:  rgba(168,114,74,.10);
  --cuidado-borde: rgba(168,114,74,.30);

  /* Ciruela: el tercer acento cálido (antes índigo). Da profundidad al mesh
     sin enfriar la paleta. */
  --indigo:      #8C4A63;
  --indigo-vivo: #B5798D;
  --indigo-wash: rgba(140,74,99,.10);

  /* Azul de vena — solo para la ilustración anatómica del mapa corporal
     (arterias=rojo, venas=este azul, nervios=índigo), como en las láminas
     médicas de referencia. */
  --vena: #2563EB;
  --vena-vivo: #60A5FA;

  /* Tono de piel para la silueta anatómica — antes era un navy translúcido
     (apenas un contorno); ahora un color de piel real y bastante opaco,
     como en las láminas de referencia. */
  --piel: #EACDB6;
  --piel-sombra: #D3AC8C;

  /* VIDRIO CLARO: blanco translúcido + blur real (ver sección 21). */
  /* Subido un poco (2026-09-12, pedido del cliente): con las superficies muy
     transparentes, el mesh de fondo —sobre todo su mancha roja— se colaba
     con distinta fuerza según qué tarjeta tenía encima, y el sitio se veía
     con el rojo muy intenso en unas partes y no en otras. Con más opacidad
     el vidrio se lee uniforme en toda la página sin perder el efecto. */
  --papel:        rgba(255,255,255,.58);
  --papel-2:      rgba(255,255,255,.40);
  --blanco:       rgba(255,255,255,.68);
  --arcilla:      rgba(43,27,34,.10);

  --error:   #DC2626;
  --exito:   #059669;
  --aviso:   #D97706;

  /* Sombras suaves, frías (no cálidas, no negro puro) — propias de un panel
     de vidrio sobre fondo claro. */
  --sombra-1: 0 1px 2px rgba(74,42,52,.05);
  --sombra-2: 0 3px 8px rgba(74,42,52,.06), 0 12px 28px -10px rgba(74,42,52,.14);
  --sombra-3: 0 18px 46px -16px rgba(74,42,52,.20);
  --sombra-4: 0 30px 76px -20px rgba(74,42,52,.24);

  /* Sombras DE COLOR (glow): sobre fondo claro se usan más comedidas, solo
     en botones/hover — el brillo grande vive en el mesh de fondo, no aquí. */
  --glow-pulso:   0 10px 26px -8px rgba(232,66,90,.5);
  --glow-cuidado: 0 10px 26px -8px rgba(168,114,74,.45);
  --glow-wa:      0 10px 26px -8px rgba(37,211,102,.45);

  /* Brillo especular de vidrio CLARO: el filo superior más luminoso que el
     resto — en vidrio sobre fondo claro se ve como un reflejo, no un neón. */
  --brillo-vidrio: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.4);

  /* Tipografía */
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --texto:   'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala de espacio */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;

  /* Curvas. Las nativas de CSS son demasiado débiles. */
  --sal:     cubic-bezier(0.23, 1, 0.32, 1);      /* entradas: arranca rápido */
  --entrasal:cubic-bezier(0.77, 0, 0.175, 1);     /* movimiento en pantalla   */
  --suave:   cubic-bezier(0.32, 0.72, 0, 1);      /* curva tipo iOS           */

  --radio-s: 8px;
  --radio-m: 14px;
  --radio-l: 22px;
  --radio-full: 999px;

  --ancho: 1200px;
  --ancho-texto: 66ch;

  --header-h: 76px;
}

/* ── 02 · RESET Y BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* El fondo real de la página: navy sólido + un mesh de color (rojo/teal) que
   NO se mueve con el scroll (fixed) — así el vidrio de encima siempre tiene
   algo vivo detrás para traslucir, sea cual sea la sección. Nada de beige. */
html {
  background: var(--fondo);
}
body {
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* Mesh de fondo fijo, con deriva lenta. Todo lo demás (vidrio) vive encima. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  will-change: transform;
  /* Mesh de acentos sobre base casi blanca — vívido y moderno sin ser oscuro.
     Cada radial es grande y difuso (poco detalle que recalcular) y JS pausa
     todo cuando la pestaña está en segundo plano.
     2026-09-12 (pedido del cliente): antes había DOS manchas de rojo puro
     (arriba-izq. y abajo-der.), muy saturado, y quedaba muy intenso justo
     donde coincidía con una tarjeta de vidrio encima (ej. la del hero). Ahora
     solo queda UNA mancha roja, tenue, como acento de marca; el resto del
     mesh es terracota/ciruela para que el sitio se lea uniforme. */
  background:
    radial-gradient(1000px 800px at 8% 4%,    rgba(232,66,90,.09), transparent 58%),
    radial-gradient(900px 800px at 96% 14%,   rgba(140,74,99,.12), transparent 60%),
    radial-gradient(950px 850px at 4% 46%,    rgba(168,114,74,.11), transparent 58%),
    radial-gradient(950px 850px at 98% 68%,   rgba(168,114,74,.10), transparent 58%),
    radial-gradient(1000px 900px at 40% 100%, rgba(168,114,74,.13), transparent 58%),
    linear-gradient(180deg, var(--fondo-2) 0%, var(--fondo) 55%, var(--fondo-2) 100%);
  animation: mesh-deriva 26s ease-in-out infinite alternate;
}
@keyframes mesh-deriva {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-2%, 2%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
@media (min-width: 768px) { body { font-size: 18px; } }

img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Foco visible siempre. Nunca outline:none sin reemplazo. */
:focus-visible {
  outline: 3px solid var(--cuidado);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--pulso-wash); color: var(--tinta); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinta); color: var(--tinta-invertida);
  padding: var(--e3) var(--e5); border-radius: 0 0 var(--radio-s) 0;
}
.saltar:focus { left: 0; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── 03 · TIPOGRAFÍA ─────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 8.2vw, 5rem); }
h2 { font-size: clamp(1.95rem, 4.6vw, 3.1rem); line-height: 1.06; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; }
h4 { font-size: 1.05rem; letter-spacing: -0.012em; }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--texto);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--cuidado);
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e4);
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px;
  background: var(--pulso); flex: none;
}

.bajada {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--tinta-suave);
  max-width: 60ch;
  line-height: 1.6;
}

.destacar { color: var(--pulso); }

/* Precio: el S/ pequeño y alzado es lo que hace que una lista de precios
   se vea diseñada y no copiada de un Excel. */
.precio { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.precio .sol {
  font-size: .58em; font-weight: 600; color: var(--tinta-suave);
  vertical-align: .42em; margin-right: .12em;
}

/* ── 04 · LAYOUT ─────────────────────────────────────────────────────────── */
.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
@media (min-width: 768px) { .contenedor { width: min(100% - 80px, var(--ancho)); } }

section { position: relative; }
.seccion { padding-block: clamp(64px, 10vw, 112px); }
.seccion--densa { padding-block: clamp(48px, 7vw, 80px); }
.seccion--papel2 { background: var(--papel-2); }

/* ── PRELOADER ───────────────────────────────────────────────────────────── */
/* La "carga con animación bonita" que pidió el cliente (como en Essencia):
   se muestra mientras el contenido real (JSON de servicios/testimonios/etc.)
   está cargando, y se retira cuando ya está listo — no es un adorno de
   relleno, mide una espera real. */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  background:
    radial-gradient(600px 500px at 50% 40%, rgba(232,66,90,.12), transparent 65%),
    var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  transition: opacity .5s var(--sal), visibility .5s;
}
/* El logo es apaisado (188×115), así que se dimensiona por ANCHO y se le deja
   respirar. Antes iba a 92px de ancho: quedaba diminuto y con el recuadro
   blanco del PNG viejo. */
.preloader__logo {
  width: min(220px, 52vw); height: auto;
  animation: preloader-pulso 1.6s ease-in-out infinite;
}
@keyframes preloader-pulso {
  0%, 100% { transform: scale(1);    opacity: .88; }
  50%      { transform: scale(1.04); opacity: 1; }
}
/* Barra de carga fina debajo del logo: da sensación de progreso real. */
.preloader::after {
  content: ''; width: min(180px, 44vw); height: 3px; border-radius: 999px;
  background: var(--tinta-linea); position: relative; overflow: hidden;
}
.preloader::before {
  content: ''; position: absolute; z-index: 1;
  bottom: calc(50% - 62px); left: 50%; transform: translateX(-50%);
  width: min(180px, 44vw); height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--pulso), var(--cuidado-vivo), transparent);
  background-size: 55% 100%; background-repeat: no-repeat;
  animation: preloader-barra 1.3s ease-in-out infinite;
}
@keyframes preloader-barra {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
.preloader.oculto { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .preloader__logo { animation: none; }
  .preloader::before { animation: none; background-position: 50% 0; }
  .preloader { transition: opacity .2s linear, visibility .2s; }
}
/* Antes era un color sólido plano — se sentía corporativo/aburrido. Ahora
   lleva su propio mesh de acentos (más marcado que el de fondo general,
   porque aquí SÍ es el protagonista) para que tenga la misma textura viva
   que el resto del sitio en vez de ser un bloque de color muerto. */
.seccion--oscura {
  background:
    radial-gradient(700px 500px at 15% 0%, rgba(140,74,99,.14), transparent 60%),
    radial-gradient(650px 550px at 90% 100%, rgba(168,114,74,.16), transparent 60%),
    var(--banda);
  position: relative; overflow: hidden;
}
.seccion--oscura .bajada { color: var(--tinta-media); }

.cabecera-seccion { margin-bottom: clamp(32px, 5vw, 56px); max-width: 780px; }
.cabecera-seccion h2 { margin-bottom: var(--e4); }

.grid { display: grid; gap: var(--e5); }
@media (min-width: 720px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Regla fina de marca: el trazo rojo del logo convertido en sistema */
.regla { height: 2px; background: var(--pulso); width: 42px; border-radius: 2px; }

/* ── 05 · MOVIMIENTO ─────────────────────────────────────────────────────── */

/* Barra de progreso de lectura: fina franja arriba de todo que crece con el
   scroll, degradado pulso→cuidado (la traducción funcional del "recorrido"
   dolor→cuidado, sin el efecto de plantilla que insinuaba lo mismo). */
.progreso {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 200;
  width: 0%; transform-origin: left;
  background: linear-gradient(90deg, var(--pulso-vivo), var(--cuidado-vivo));
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .progreso { display: none; } }

/* Reveal al entrar en viewport. Solo transform + opacity (GPU) para los 70+
   elementos de la página — barato, sin blur, para no cargarle compositing
   a un celular de gama media. Antes: 18px sin escala, casi no se percibía;
   ahora hay más recorrido + un leve escalado. */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(.98);
  transition: opacity .6s var(--sal), transform .6s var(--sal);
  transition-delay: var(--delay, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .reveal { transform: translateY(18px) scale(.99); }
}

/* Énfasis: SOLO para 2-3 piezas del hero (el H1), donde el blur de entrada
   sí paga su costo de compositing porque es una única vez, un único elemento
   grande, no 70 tarjetas a la vez. */
.reveal--enfasis {
  filter: blur(8px);
  transition: opacity .7s var(--sal), transform .7s var(--sal), filter .55s var(--sal);
}
.reveal--enfasis.visible { filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .reveal--enfasis { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 06 · HEADER ─────────────────────────────────────────────────────────── */
.barra-util {
  display: none;
  background: var(--tinta-profunda); color: rgba(245,248,255,.86);
  font-size: 13px; letter-spacing: .01em;
}
@media (min-width: 900px) {
  .barra-util { display: block; }
  .barra-util .contenedor { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: var(--e5); }
}
.barra-util a { color: inherit; transition: color .18s ease; }
.barra-util a:hover { color: var(--cuidado-vivo); }
.barra-util .util-grupo { display: flex; gap: var(--e5); align-items: center; }

.header {
  position: sticky; top: 0; z-index: 90;
  background: var(--papel);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.header.pegado { border-bottom-color: var(--arcilla); box-shadow: var(--sombra-1); }
.header .contenedor { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--e5); }

.marca { display: flex; align-items: center; gap: 10px; flex: none; }
/* El logo lleva texto dentro ("Centro de fisioterapia y rehabilitación"), así que
   por debajo de ~52px deja de leerse. Mejor darle aire que apretarlo. */
.marca img { height: 52px; width: auto; }
@media (max-width: 400px) { .marca img { height: 44px; } }
.marca .tagline {
  display: none; font-size: 12px; font-weight: 600; color: var(--tinta-suave);
  border-left: 1px solid var(--arcilla); padding-left: 10px; letter-spacing: .01em;
}
@media (min-width: 1100px) { .marca .tagline { display: block; } }

.nav { display: none; }
@media (min-width: 980px) {
  .nav { display: flex; gap: var(--e5); align-items: center; }
}
.nav a {
  font-size: 15px; font-weight: 500; color: var(--tinta-media);
  padding: 6px 0; position: relative; transition: color .18s ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--pulso); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--sal);
}
.nav a:hover { color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); }
}
.nav a[aria-current="true"] { color: var(--tinta); }
.nav a[aria-current="true"]::after { transform: scaleX(1); }

.header-acciones { display: flex; align-items: center; gap: var(--e3); flex: none; }

/* En móvil la cabecera solo lleva logo + hamburguesa + un WhatsApp compacto.
   Los CTA completos viven en la barra fija de abajo; repetirlos arriba satura
   una pantalla de 375px y le roba espacio al titular. */
@media (max-width: 979px) {
  .header-acciones .btn--pulso { display: none; }
  .header-acciones .btn--wa { padding: 0; width: 44px; min-height: 44px; }
  .header-acciones .btn--wa { font-size: 0; gap: 0; }
  .header-acciones .btn--wa svg { width: 20px; height: 20px; }
}

.hamburguesa {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radio-s); color: var(--tinta);
  transition: background .18s ease, transform .16s var(--sal);
}
.hamburguesa:active { transform: scale(.94); }
@media (min-width: 980px) { .hamburguesa { display: none; } }

/* Panel móvil a pantalla completa: vidrio claro esmerilado (blur real) que
   tapa el contenido de atrás — consistente con el resto del sitio, ahora
   que la base es clara otra vez. */
/* Revelado circular (firma de Essencia): el panel se "abre" como un círculo
   que crece desde el botón hamburguesa, en vez de un simple fade. JS calcula
   el origen (--ox/--oy) según dónde está el botón antes de abrir. */
.panel-movil {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  display: flex; flex-direction: column;
  padding: var(--e5) 20px calc(var(--e5) + env(safe-area-inset-bottom));
  visibility: hidden;
  clip-path: circle(0% at var(--ox, 90%) var(--oy, 5%));
  transition: clip-path .55s var(--suave), visibility .55s;
}
.panel-movil.abierto {
  visibility: visible;
  clip-path: circle(150% at var(--ox, 90%) var(--oy, 5%));
}
@media (prefers-reduced-motion: reduce) {
  .panel-movil { transition: visibility .2s; clip-path: none; opacity: 0; }
  .panel-movil.abierto { opacity: 1; }
}
.panel-movil__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e6); }

/* Menú móvil en cápsulas de vidrio (2026-09-12, pedido del cliente: la lista
   plana con solo una línea abajo "se veía fea"). Cada enlace es su propia
   tarjeta de vidrio, con la flechita metida en una burbuja en vez de suelta,
   y entran con un stagger al abrirse el panel en vez de aparecer de golpe. */
.panel-movil nav { display: flex; flex-direction: column; gap: 10px; }
.panel-movil nav a {
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: -.015em; padding: 15px 18px;
  border-radius: var(--radio-l);
  background: var(--blanco); border: 1px solid var(--arcilla);
  box-shadow: var(--brillo-vidrio), var(--sombra-1);
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: transform .2s var(--sal), background .2s ease;
}
.panel-movil.abierto nav a {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .5s var(--sal), transform .5s var(--sal);
}
.panel-movil nav a:nth-child(1) { transition-delay: .06s; }
.panel-movil nav a:nth-child(2) { transition-delay: .11s; }
.panel-movil nav a:nth-child(3) { transition-delay: .16s; }
.panel-movil nav a:nth-child(4) { transition-delay: .21s; }
.panel-movil nav a:nth-child(5) { transition-delay: .26s; }
.panel-movil nav a:nth-child(6) { transition-delay: .31s; }
.panel-movil nav a:nth-child(7) { transition-delay: .36s; }
.panel-movil nav a:active { transform: scale(.97); }
.panel-movil nav a::after {
  content: '→'; color: var(--pulso); font-size: .95rem; opacity: .7;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--papel-2); display: grid; place-items: center;
  transition: transform .2s var(--sal);
}
.panel-movil nav a:active::after { transform: translateX(2px); }
/* El último enlace del menú (Agendar cita) es la acción principal: cápsula
   sólida en vez de vidrio, para que destaque sobre los enlaces de página. */
.panel-movil nav a:last-child {
  background: linear-gradient(155deg, var(--pulso-vivo), var(--pulso-btn));
  color: #fff; border-color: transparent; justify-content: center;
  box-shadow: var(--glow-pulso);
}
.panel-movil nav a:last-child::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  .panel-movil nav a { transition: none; opacity: 1; transform: none; }
}
.panel-movil__pie { margin-top: auto; padding-top: var(--e5); display: grid; gap: var(--e3); }
.panel-movil__pie p { font-size: 14px; color: var(--tinta-suave); }

/* ── 07 · BOTONES ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--texto); font-size: 15.5px; font-weight: 600;
  letter-spacing: .004em;
  padding: 14px 24px; min-height: 48px;
  border-radius: var(--radio-full);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .16s var(--sal), background-color .2s ease,
              box-shadow .28s var(--sal), color .2s ease, border-color .2s ease;
  touch-action: manipulation;
  text-align: center;
}
.btn:active { transform: scale(.96); }

/* Ripple de Material Design: un círculo de luz que nace donde tocaste y se
   expande. JS solo agrega/quita el span en cada click (ver ripple.js);
   la animación es puro CSS, barata (transform+opacity). */
.btn__ripple {
  position: absolute; z-index: 0; border-radius: 50%;
  background: rgba(255,255,255,.55); pointer-events: none;
  transform: scale(0); opacity: .7;
  animation: ripple-expandir .6s var(--entrasal) forwards;
}
@keyframes ripple-expandir {
  to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn__ripple { display: none; } }
.btn svg { flex: none; position: relative; z-index: 1; }
.btn > *:not(svg) { position: relative; z-index: 1; }

/* Brillo diagonal que atraviesa el botón al pasar el mouse. Sutil (200ms,
   solo los sólidos de acción), no un efecto de plantilla genérico: refuerza
   "esto responde" sin distraer. */
.btn--wa::before, .btn--pulso::before, .btn--tinta::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.32) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover::before, .btn--pulso:hover::before, .btn--tinta:hover::before { transform: translateX(120%); }
}

/* WhatsApp es el CTA primario: es el canal que de verdad usa la gente en Perú
   y el único que hoy genera un lead real (la agenda todavía es demostración). */
.btn--wa { background: linear-gradient(155deg, #2CE072, #1FAE55); color: #06331A; box-shadow: var(--sombra-2); }
@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover { box-shadow: var(--glow-wa), var(--sombra-3); transform: translateY(-2px); }
  .btn--wa:hover:active { transform: translateY(-2px) scale(.96); }
}

.btn--pulso { background: linear-gradient(155deg, var(--pulso-vivo), var(--pulso-btn)); color: #fff; box-shadow: var(--sombra-2); }
@media (hover: hover) and (pointer: fine) {
  .btn--pulso:hover { box-shadow: var(--glow-pulso), var(--sombra-3); transform: translateY(-2px); }
  .btn--pulso:hover:active { transform: translateY(-2px) scale(.96); }
}

.btn--tinta { background: linear-gradient(155deg, var(--tinta-media), var(--tinta)); color: var(--tinta-invertida); }
@media (hover: hover) and (pointer: fine) {
  .btn--tinta:hover { box-shadow: var(--sombra-3); transform: translateY(-2px); }
}

.btn--linea {
  border: 1.5px solid var(--tinta-linea); color: var(--tinta); background: var(--blanco);
}
@media (hover: hover) and (pointer: fine) {
  .btn--linea:hover { border-color: var(--tinta); background: var(--papel-2); }
}

.btn--fantasma { color: var(--tinta); border: 1.5px solid transparent; }
@media (hover: hover) and (pointer: fine) { .btn--fantasma:hover { background: var(--papel-2); } }

.btn--claro { background: var(--tinta); color: var(--fondo); }
/* Botón de contorno para usar sobre la banda clara (cta-final, footer). */
.btn--linea-clara { border: 1.5px solid var(--banda-linea); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .btn--linea-clara:hover { border-color: var(--tinta); background: rgba(43,27,34,.05); }
}

.btn--sm { padding: 10px 18px; min-height: 42px; font-size: 14.5px; }
.btn--lg { padding: 17px 30px; min-height: 56px; font-size: 16.5px; }
.btn--bloque { width: 100%; }

.btn[disabled] { opacity: .55; pointer-events: none; }

/* ── 08 · HERO ───────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 7vw, 84px) clamp(40px, 6vw, 64px); position: relative; overflow: hidden; }

/* Atmósfera: luz cálida difusa, ahora con más presencia de color y con
   deriva lenta (parallax vía JS en scroll + una deriva propia siempre activa)
   para que la sección se sienta viva incluso sin que el usuario haga nada. */
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 950px; height: 950px; top: -420px; right: -260px;
  /* Bajado de .38/.1 a .16/.05 (2026-09-12, pedido del cliente): quedaba
     detrás de la tarjeta del hero y era el punto más rojo/intenso de todo
     el sitio, rompiendo la uniformidad del resto de la paleta clara. */
  background: radial-gradient(circle, rgba(232,66,90,.16) 0%, rgba(232,66,90,.05) 42%, transparent 68%);
  animation: deriva-1 16s ease-in-out infinite;
}
.hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 660px; height: 660px; bottom: -340px; left: -220px;
  background: radial-gradient(circle, rgba(168,114,74,.22) 0%, transparent 66%);
  animation: deriva-2 19s ease-in-out infinite;
}
/* --py lo actualiza JS atado al scroll (parallax): la mancha se corre hacia
   abajo más lento que el contenido, dando sensación de profundidad. */
@keyframes deriva-1 {
  0%, 100% { transform: translate(0, var(--py, 0px)) scale(1); }
  50%      { transform: translate(-34px, calc(26px + var(--py, 0px))) scale(1.06); }
}
@keyframes deriva-2 {
  0%, 100% { transform: translate(0, calc(var(--py, 0px) * -1)) scale(1); }
  50%      { transform: translate(28px, calc(-22px - var(--py, 0px))) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }

/* Las animaciones infinitas (manchas + línea de pulso) se pausan por completo
   cuando el hero sale de pantalla — JS agrega/quita ".en-vista". Sin esto,
   quedan repintando indefinidamente aunque el usuario ya esté en el footer:
   gasta batería/CPU sin ningún beneficio visual. */
.hero:not(.en-vista)::before,
.hero:not(.en-vista)::after,
.hero:not(.en-vista) .pulso-svg path,
.hero:not(.en-vista) .punto-pulso {
  animation-play-state: paused;
}

.hero .contenedor { position: relative; z-index: 1; }

/* Foco que sigue al cursor: decorativo (no comunica estado), por eso es
   aceptable pese a no existir en móvil. Actualizado por JS con lerp. */
.hero__foco {
  position: absolute; z-index: 0; pointer-events: none; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%),
    rgba(255,255,255,.5), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
  mix-blend-mode: soft-light;
}
.hero:hover .hero__foco { opacity: 1; }
@media (hover: none), (pointer: coarse) { .hero__foco { display: none; } }

.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.06fr .94fr; } }

.hero h1 { margin-bottom: var(--e5); }
/* Línea de apoyo del H1: tiene que sostener al titular, no competir con él.
   Por eso va en la fuente de texto, no en la display, y bastante más chica. */
.hero h1 .linea2 {
  display: block; font-family: var(--texto); color: var(--tinta-suave);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 500;
  letter-spacing: 0; margin-top: .9em; line-height: 1.5; max-width: 40ch;
}

.hero__sub { font-size: clamp(1.03rem, 1.7vw, 1.16rem); color: var(--tinta-suave); max-width: 54ch; margin-bottom: var(--e6); }

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e4); }
.hero__micro { font-size: 14px; color: var(--tinta-suave); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero__micro strong { color: var(--tinta); font-weight: 700; }
.hero__micro .punto { width: 4px; height: 4px; border-radius: 50%; background: var(--arcilla); }

/* Marco del visual del hero. Geometría precisa, no formas orgánicas:
   papel cálido + estructura nítida es una combinación que no es la plantilla
   de wellness ni la plantilla de clínica. */
.hero__visual { position: relative; }
.marco {
  position: relative; border-radius: var(--radio-l);
  background: var(--blanco); border: 1px solid var(--arcilla);
  box-shadow: var(--sombra-3); overflow: hidden;
  aspect-ratio: 4 / 5;
}
@media (min-width: 980px) { .marco { aspect-ratio: 5 / 6; } }

/* Mientras no hay foto real del centro: en vez de una caja gris vacía (que
   lee como "falta contenido"), una pieza animada de marca — la línea de
   pulso/latido del logo, dibujándose sola. Vivo y a propósito, no un hueco. */
.marco--pendiente {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--e6); gap: var(--e5);
  /* Sin rojo propio (2026-09-12): ya lleva el acento de marca en la línea de
     pulso animada de abajo; sumarle un wash rojo aquí duplicaba el rojo del
     mesh de fondo justo en esta tarjeta y se veía más intensa que el resto. */
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(168,114,74,.12), transparent 55%),
    radial-gradient(120% 100% at 85% 100%, rgba(168,114,74,.14), transparent 55%),
    linear-gradient(135deg, var(--papel-2), var(--blanco));
}
.marco--pendiente .pulso-svg { width: 84%; max-width: 320px; overflow: visible; }
.marco--pendiente .pulso-svg path {
  fill: none; stroke: url(#gradPulso); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: dibujar-pulso 3.2s var(--sal) infinite;
}
@keyframes dibujar-pulso {
  0%   { stroke-dashoffset: 340; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -340; }
}
.marco--pendiente .punto-pulso {
  fill: var(--pulso-vivo); r: 5;
  animation: latido-punto 3.2s var(--sal) infinite;
}
@keyframes latido-punto {
  0%, 100% { r: 4; opacity: .85; }
  50%      { r: 6.5; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .marco--pendiente .pulso-svg path { animation: none; stroke-dashoffset: 0; }
  .marco--pendiente .punto-pulso { animation: none; }
}
.marco--pendiente .texto strong { display: block; font-family: var(--display); font-size: 1.08rem; color: var(--tinta); margin-bottom: 6px; letter-spacing: -.015em; }
.marco--pendiente .texto p { font-size: 13.5px; color: var(--tinta-suave); max-width: 32ch; margin-inline: auto; }

/* Tarjeta que invade la foto: hay gente atrás, y lo dice ocupando espacio. */
.tarjeta-flotante {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(255,253,250,.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--arcilla); border-radius: var(--radio-m);
  padding: 14px 16px; box-shadow: var(--sombra-2);
  display: flex; align-items: center; gap: 12px;
}
.tarjeta-flotante .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--cuidado), var(--cuidado-vivo));
  display: grid; place-items: center; color: #fff;
}
.tarjeta-flotante .txt { min-width: 0; }
.tarjeta-flotante .txt b { display: block; font-size: 14.5px; letter-spacing: -.01em; }
.tarjeta-flotante .txt span { font-size: 12.5px; color: var(--tinta-suave); }

/* ── 09 · BARRA DE CONFIANZA ─────────────────────────────────────────────── */
.confianza { background: var(--banda); color: var(--tinta); }
.confianza .contenedor { padding-block: clamp(28px, 4vw, 40px); }
.confianza__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5) var(--e4);
}
@media (min-width: 860px) { .confianza__grid { grid-template-columns: repeat(4, 1fr); } }
.dato { position: relative; padding-left: 14px; }
.dato::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: var(--pulso); border-radius: 2px;
}
.dato b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--tinta); margin-bottom: 4px;
}
.dato span { font-size: 13.5px; color: var(--tinta-media); line-height: 1.35; display: block; }
.confianza__pie {
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--banda-linea);
  font-size: 14px; color: var(--tinta-media); max-width: 78ch;
}

/* ── 10 · MAPA CORPORAL — la firma del sitio ─────────────────────────────── */
.mapa { background: var(--papel-2); }
.mapa__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .mapa__grid { grid-template-columns: minmax(280px, 400px) 1fr; } }

.cuerpo-caja {
  background: var(--blanco); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: var(--e5) var(--e4) var(--e4);
  box-shadow: var(--sombra-2); position: relative;
  transition: box-shadow .3s var(--sal);
}
/* Invitación a tocar: un par de anillos que salen del recuadro al llegar a la
   sección. Es la pieza central del sitio, merece decir "tócame" una vez. */
.cuerpo-caja--invita { animation: invitar-toque 1.9s var(--sal) 2; }
@keyframes invitar-toque {
  0%   { box-shadow: var(--sombra-2), 0 0 0 0 rgba(168,114,74,.28); }
  70%  { box-shadow: var(--sombra-2), 0 0 0 22px rgba(168,114,74,0); }
  100% { box-shadow: var(--sombra-2), 0 0 0 0 rgba(168,114,74,0); }
}
@media (prefers-reduced-motion: reduce) { .cuerpo-caja--invita { animation: none; } }
.cuerpo-caja__ayuda {
  text-align: center; font-size: 13.5px; color: var(--tinta-suave); margin-bottom: var(--e3);
}
.cuerpo-svg { width: 100%; max-width: 252px; margin-inline: auto; height: auto; display: block; }

/* Silueta con volumen real (gradiente definido en el SVG vía <defs>, no un
   silueta plana): el "por dentro" empieza aquí, con las costillas sugeridas
   ya dibujadas como atributos SVG directos (no se tocan por CSS). */
.silueta { filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }

/* Sistema nervioso: líneas finas con una "señal" viajando (stroke-dasharray
   animado) — más parecido a un impulso eléctrico que a un simple parpadeo.
   SIN filtro drop-shadow: animar 12+ trazos con drop-shadow a la vez es
   exactamente el error de rendimiento de antes (filtro recalculado por
   cuadro, por elemento). El brillo se sugiere con el color vivo del stroke,
   no con blur. Además, solo se anima con la sección a la vista (.en-vista,
   togglea JS con IntersectionObserver, igual que el hero). */
.sistema-nervios { opacity: .8; }
.nervio {
  stroke-dasharray: 6 10;
  animation: senal-nerviosa var(--dur, 2.4s) linear infinite;
  animation-delay: var(--dl, 0s);
  animation-play-state: paused;
}
#dolor.en-vista .nervio { animation-play-state: running; }
@keyframes senal-nerviosa { to { stroke-dashoffset: -160; } }

/* Sistema circulatorio: pulso vía OPACIDAD, no stroke-width — cambiar el
   ancho de un trazo fuerza recalcular geometría en cada cuadro; la opacidad
   es solo composición, mucho más barata multiplicada por varios trazos. */
.sistema-sangre { opacity: .9; }
.arteria, .vena {
  animation: latido-sangre 1.15s ease-in-out infinite;
  animation-delay: var(--dl, 0s);
  animation-play-state: paused;
}
#dolor.en-vista .arteria, #dolor.en-vista .vena { animation-play-state: running; }
@keyframes latido-sangre {
  0%, 100% { opacity: .5; }
  35%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nervio { animation: none; }
  .arteria, .vena { animation: none; opacity: .8; }
}

/* Zonas tocables del cuerpo. Áreas generosas: 44px mínimo real.
   Marcador estilo Material: nodo con brillo (gradiente radial, ver <defs>
   #gradNodo) + anillo de estado alrededor, en vez de un punto plano. */
.zona { cursor: pointer; outline: none; }
.zona__hit { fill: transparent; }

.zona__anillo {
  fill: none; stroke: var(--cuidado); stroke-width: 1.4; stroke-opacity: .35;
  transition: stroke-opacity .2s var(--sal), transform .3s var(--sal);
  transform-box: fill-box; transform-origin: center;
}
.zona__marca {
  fill: url(#gradNodo); opacity: .85;
  filter: drop-shadow(0 0 5px rgba(168,114,74,.65));
  transition: opacity .2s var(--sal), transform .24s var(--sal), filter .2s ease;
  transform-box: fill-box; transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  .zona:hover .zona__marca { opacity: 1; transform: scale(1.16); }
  .zona:hover .zona__anillo { stroke-opacity: .65; transform: scale(1.1); }
}
.zona:focus-visible .zona__marca { opacity: 1; }
.zona[aria-pressed="true"] .zona__marca {
  fill: var(--pulso); opacity: 1; transform: scale(1.22);
  filter: drop-shadow(0 0 8px rgba(232,66,90,.75));
}
.zona[aria-pressed="true"] .zona__anillo { stroke: var(--pulso); stroke-opacity: .8; }
.zona__pulso {
  fill: none; stroke: var(--pulso); stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.zona[aria-pressed="true"] .zona__pulso { animation: latido 1.9s var(--sal) infinite; }
@keyframes latido {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(2.4); }
  100% { opacity: 0;   transform: scale(2.4); }
}
/* Los nodos "en reposo" (sin seleccionar) también respiran un poco, muy
   suave, para que el cuerpo se sienta vivo antes de que el usuario toque
   nada — parte del pedido de "que siempre se anime". */
.zona:not([aria-pressed="true"]) .zona__anillo {
  animation: respirar-anillo 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .35s);
  animation-play-state: paused;
}
#dolor.en-vista .zona:not([aria-pressed="true"]) .zona__anillo { animation-play-state: running; }
@keyframes respirar-anillo {
  0%, 100% { stroke-opacity: .28; transform: scale(1); }
  50%      { stroke-opacity: .5;  transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .zona[aria-pressed="true"] .zona__pulso { animation: none; opacity: .5; }
  .zona__anillo { animation: none !important; }
}
.silueta-linea { fill: none; stroke: var(--tinta); stroke-opacity: .22; stroke-width: 1.2; }

/* Lista alternativa: accesible por teclado y para quien no quiere el dibujo */
.zonas-lista { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--arcilla); }
.zona-chip {
  font-size: 13px; font-weight: 600; padding: 8px 13px; min-height: 38px;
  border-radius: var(--radio-full); border: 1.5px solid var(--tinta-linea);
  color: var(--tinta-media); background: var(--papel);
  transition: all .18s var(--sal); touch-action: manipulation;
}
.zona-chip:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .zona-chip:hover { border-color: var(--cuidado); color: var(--cuidado); }
}
.zona-chip[aria-pressed="true"] {
  background: var(--pulso-btn); border-color: var(--pulso-btn); color: #fff;
}

/* Panel de resultado */
.resultado {
  background: var(--blanco); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--sombra-2); min-height: 300px;
  display: flex; flex-direction: column;
}
.resultado__vacio { margin: auto 0; text-align: left; }
.resultado__vacio .icono { color: var(--cuidado); opacity: .45; margin-bottom: var(--e4); }
.resultado__vacio h3 { margin-bottom: 10px; }
.resultado__vacio p { color: var(--tinta-suave); max-width: 44ch; font-size: 15.5px; }

.resultado__cuerpo { animation: aparecer .42s var(--sal) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .resultado__cuerpo { animation: none; } }

.resultado__zona {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pulso-wash); color: var(--pulso-hover);
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--radio-full); margin-bottom: var(--e4);
}
.resultado h3 { margin-bottom: 10px; }
.resultado__desc { color: var(--tinta-suave); font-size: 15.5px; margin-bottom: var(--e5); }

.resultado__condiciones { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--e5); }
.resultado__condiciones span {
  font-size: 13px; padding: 5px 12px; border-radius: var(--radio-full);
  background: var(--papel-2); color: var(--tinta-media); border: 1px solid var(--arcilla);
}

.recomendacion {
  border: 1px solid var(--cuidado-borde); background: var(--cuidado-wash);
  border-radius: var(--radio-m); padding: var(--e4) var(--e5); margin-bottom: var(--e5);
}
.recomendacion__label { font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--cuidado); margin-bottom: 6px; }
.recomendacion__nombre { font-family: var(--display); font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.recomendacion__precio { font-size: 15px; color: var(--tinta-media); }
.recomendacion__precio .precio { font-size: 1.15rem; }
.resultado__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: auto; }

/* ── 11 · SERVICIOS Y PRECIOS ────────────────────────────────────────────── */
/* ── Página de precios (precios.html) ────────────────────────────────────── */
/* Tarjetas más compactas que las de terapias: acá el protagonista es la
   tabla de tarifas, no la descripción. */
.precios__grid { display: grid; gap: var(--e5); }
@media (min-width: 720px)  { .precios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .precios__grid { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-precio {
  background: var(--blanco);
  background-image: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
  border: 1px solid var(--arcilla);
  border-radius: var(--radio-l);
  padding: var(--e5);
  display: flex; flex-direction: column;
  box-shadow: var(--sombra-2), var(--brillo-vidrio);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform .3s var(--sal), box-shadow .3s var(--sal), border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-precio:hover { transform: translateY(-4px); box-shadow: var(--sombra-3), var(--brillo-vidrio); border-color: var(--cuidado-borde); }
}
.tarjeta-precio--destacada { border-color: var(--pulso); border-width: 1.5px; }
.tarjeta-precio__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3);
  padding-bottom: var(--e4); margin-bottom: var(--e4);
  border-bottom: 1px solid var(--arcilla);
}
.tarjeta-precio__top h3 { font-size: 1.18rem; }
.tarjeta-precio__desde { font-size: 12.5px; color: var(--tinta-suave); white-space: nowrap; }
.tarjeta-precio__desde .precio { font-size: 1.05rem; color: var(--pulso); }
.tarjeta-precio .planes { flex: 1; }
.tarjeta-precio .btn { margin-top: var(--e4); }

.servicios__grid { display: grid; gap: var(--e5); }
@media (min-width: 760px)  { .servicios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .servicios__grid { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-servicio {
  background: var(--blanco); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: var(--e5);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform .3s var(--sal), box-shadow .3s var(--sal), border-color .3s ease;
}
/* Barra de acento arriba: aparece al hover en vez de estar siempre encendida,
   así la grilla completa no compite visualmente y el gesto se siente ganado. */
.tarjeta-servicio::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pulso-vivo), var(--cuidado-vivo));
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-servicio:hover {
    transform: translateY(-6px);
    box-shadow: var(--brillo-vidrio), var(--glow-cuidado), var(--sombra-3);
    border-color: var(--cuidado-borde);
  }
  .tarjeta-servicio:hover::after { transform: scaleX(1); }
}
.tarjeta-servicio--destacada { border-color: var(--cuidado); border-width: 1.5px; box-shadow: var(--sombra-2); }
.tarjeta-servicio--destacada::before {
  content: attr(data-etiqueta);
  position: absolute; top: -11px; left: var(--e5);
  background: var(--cuidado); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--radio-full); white-space: nowrap;
}

.tarjeta-servicio__icono {
  width: 46px; height: 46px; border-radius: var(--radio-m);
  background: var(--cuidado-wash); color: var(--cuidado);
  display: grid; place-items: center; margin-bottom: var(--e4);
  transition: transform .3s var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-servicio:hover .tarjeta-servicio__icono { transform: scale(1.07) rotate(-4deg); }
}
.tarjeta-servicio h3 { margin-bottom: 8px; }
.tarjeta-servicio__gancho { font-size: 14.5px; color: var(--pulso); font-weight: 600; margin-bottom: var(--e3); }
.tarjeta-servicio__desc { font-size: 15px; color: var(--tinta-suave); margin-bottom: var(--e4); }

.tarjeta-servicio__sirve {
  font-size: 13.5px; color: var(--tinta-suave); background: var(--papel-2);
  border-radius: var(--radio-s); padding: 11px 14px; margin-bottom: var(--e5);
  border-left: 2px solid var(--cuidado);
}
.tarjeta-servicio__sirve b { color: var(--tinta); font-weight: 700; display: block; margin-bottom: 3px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }

/* Tabla de precios legible y escaneable: es el mayor activo de conversión
   que tiene el negocio, porque casi ninguna clínica peruana publica tarifas. */
.planes { list-style: none; padding: 0; margin: 0 0 var(--e5); }
.planes li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4);
  padding: 9px 0; border-bottom: 1px dashed var(--arcilla); font-size: 14.5px;
}
.planes li:last-child { border-bottom: 0; }
.planes .etiqueta { color: var(--tinta-media); }
.planes .ahorro { display: block; font-size: 12px; color: var(--exito); font-weight: 600; margin-top: 1px; }
.planes .precio { font-size: 1.08rem; }

.tarjeta-servicio .btn { margin-top: auto; }

.banda-cta {
  margin-top: clamp(40px, 6vw, 64px);
  background: var(--tinta); color: var(--tinta-invertida);
  border-radius: var(--radio-l); padding: clamp(28px, 4.5vw, 48px);
  display: grid; gap: var(--e5); align-items: center;
}
@media (min-width: 820px) { .banda-cta { grid-template-columns: 1fr auto; } }
.banda-cta h3 { color: var(--tinta-invertida); margin-bottom: 8px; }
.banda-cta p { color: rgba(245,248,255,.74); font-size: 15.5px; max-width: 56ch; }

.nota-precios {
  margin-top: var(--e5); font-size: 14px; color: var(--tinta-suave);
  display: flex; gap: 10px; align-items: flex-start; max-width: 76ch;
}
.nota-precios svg { flex: none; color: var(--cuidado); margin-top: 2px; }

/* ── 12 · RAZONES / PROCESO ──────────────────────────────────────────────── */
/* Antes era texto plano (num + título + párrafo) sin tarjeta ni movimiento —
   se leía plano al lado del resto del sitio, que es todo vidrio + hover.
   Ahora es una tarjeta de vidrio más, con la misma receta que .tarjeta-servicio
   (gradiente interno + brillo especular + reflejo diagonal al pasar el mouse). */
.razon {
  display: flex; gap: var(--e4); align-items: flex-start;
  background: var(--blanco); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: var(--e5);
  background-image: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
  box-shadow: var(--brillo-vidrio), var(--sombra-2);
  transition: transform .35s var(--sal), border-color .3s ease, box-shadow .35s var(--sal);
  position: relative; overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .razon:hover { transform: translateY(-5px); border-color: var(--tinta-linea); box-shadow: var(--brillo-vidrio), var(--sombra-3); }
  .razon:hover .razon__num { opacity: .55; transform: scale(1.1); }
  .razon::after {
    content: ''; position: absolute; inset: -40% -60%; pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
    transform: translateX(-120%); transition: transform .75s var(--sal);
  }
  .razon:hover::after { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) { .razon::after { display: none; } }
.razon__num {
  font-family: var(--display); font-size: 2.1rem; font-weight: 700;
  color: var(--pulso); opacity: .28; line-height: 1; flex: none;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  transition: transform .35s var(--sal), opacity .35s ease;
}
.razon h4 { margin-bottom: 6px; }
.razon p { font-size: 15px; color: var(--tinta-suave); }

/* Proceso: pasos conectados por una línea. Estática, no dibujada por scroll. */
.pasos { display: grid; gap: 0; position: relative; }
.paso { display: grid; grid-template-columns: 46px 1fr; gap: var(--e4); padding-bottom: var(--e6); position: relative; }
.paso:last-child { padding-bottom: 0; }
.paso::before {
  content: ''; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--arcilla), var(--arcilla) 60%, transparent);
}
.paso:last-child::before { display: none; }
.paso__num {
  width: 46px; height: 46px; border-radius: 50%; flex: none; position: relative; z-index: 1;
  background: var(--blanco); border: 1.5px solid var(--cuidado-borde); color: var(--cuidado);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.paso h4 { margin-bottom: 6px; padding-top: 11px; }
.paso p { font-size: 15px; color: var(--tinta-suave); }

@media (min-width: 900px) {
  .pasos--dos { grid-template-columns: repeat(2, 1fr); column-gap: var(--e7); }
}

/* ── 13 · NOSOTROS ───────────────────────────────────────────────────────── */
.mv { display: grid; gap: var(--e5); }
@media (min-width: 800px) { .mv { grid-template-columns: repeat(2, 1fr); gap: var(--e6); } }
.mv__bloque {
  background: var(--blanco);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: clamp(24px, 3.4vw, 36px);
  box-shadow: var(--brillo-vidrio), var(--sombra-2);
  transition: transform .35s var(--sal), border-color .3s ease;
  position: relative; z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .mv__bloque:hover { transform: translateY(-4px); border-color: var(--tinta-linea); }
}
.mv__bloque .regla { margin-bottom: var(--e4); }
.mv__bloque h3 { margin-bottom: var(--e3); }
.mv__bloque p { color: var(--tinta-media); font-size: 15.5px; }

.valores { display: grid; gap: var(--e4); margin-top: var(--e7); }
@media (min-width: 700px)  { .valores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .valores { grid-template-columns: repeat(4, 1fr); } }
.valor { padding-top: var(--e4); border-top: 2px solid var(--pulso); }
.valor h4 { margin-bottom: 7px; }
.valor p { font-size: 14.5px; color: var(--tinta-media); }

/* ── 14 · LOCAL, VIDEOS, GALERÍA ─────────────────────────────────────────── */
.local__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 920px) { .local__grid { grid-template-columns: .9fr 1.1fr; } }

.datos-local { list-style: none; padding: 0; margin: 0 0 var(--e6); display: grid; gap: var(--e4); }
.datos-local li { display: flex; gap: var(--e4); align-items: flex-start; }
.datos-local .ico {
  width: 40px; height: 40px; border-radius: var(--radio-m); flex: none;
  background: var(--cuidado-wash); color: var(--cuidado); display: grid; place-items: center;
}
.datos-local b { display: block; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; margin-bottom: 2px; }
.datos-local span, .datos-local a { font-size: 16px; color: var(--tinta); font-weight: 500; }
.datos-local a { border-bottom: 1px solid var(--cuidado-borde); }

.mapa-estatico {
  border-radius: var(--radio-l); overflow: hidden; border: 1px solid var(--arcilla);
  box-shadow: var(--sombra-2); background: var(--papel-2);
  aspect-ratio: 16 / 11; display: grid; place-items: center; text-align: center; padding: var(--e5);
  position: relative;
}
.mapa-estatico .trama {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(var(--arcilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--arcilla) 1px, transparent 1px);
  background-size: 34px 34px;
}
.mapa-estatico .pin { position: relative; z-index: 1; }
.mapa-estatico .pin .punto {
  width: 20px; height: 20px; border-radius: 50%; background: var(--pulso);
  margin: 0 auto var(--e3); box-shadow: 0 0 0 8px rgba(232,66,90,.16);
}
.mapa-estatico p { font-size: 14.5px; color: var(--tinta-suave); }
.mapa-estatico strong { display: block; font-family: var(--display); color: var(--tinta); font-size: 1.05rem; margin-bottom: 4px; }

/* Videos con fachada: nunca un iframe de YouTube en el HTML inicial.
   Cada iframe precargado pesa ~1MB y bloquea el hilo principal. */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--e5); }
.filtro {
  font-size: 13.5px; font-weight: 600; padding: 9px 16px; min-height: 40px;
  border-radius: var(--radio-full); border: 1.5px solid var(--tinta-linea);
  color: var(--tinta-media); background: var(--blanco);
  transition: all .18s var(--sal); touch-action: manipulation;
}
.filtro:active { transform: scale(.96); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }

.videos__grid, .galeria__grid { display: grid; gap: var(--e4); }
@media (min-width: 700px)  { .videos__grid { grid-template-columns: repeat(2, 1fr); } .galeria__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .videos__grid { grid-template-columns: repeat(3, 1fr); } .galeria__grid { grid-template-columns: repeat(4, 1fr); } }

.video-card {
  position: relative; border-radius: var(--radio-m); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--tinta); cursor: pointer;
  border: 1px solid rgba(245,248,255,.12); width: 100%; text-align: left;
  transition: transform .3s var(--sal), box-shadow .3s var(--sal);
}
.video-card:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .video-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-4); }
}
.video-card__fondo {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(168,114,74,.35), rgba(43,27,34,.9));
}
.video-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.video-card__play span {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(245,248,255,.94); color: var(--pulso);
  box-shadow: var(--sombra-3); transition: transform .26s var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  .video-card:hover .video-card__play span { transform: scale(1.11); }
}
.video-card__pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 13px;
  background: linear-gradient(transparent, rgba(14,27,46,.92));
  color: var(--tinta);
}
.video-card__pie b { display: block; font-size: 14.5px; letter-spacing: -.01em; }
.video-card__pie span { font-size: 12.5px; color: rgba(245,248,255,.66); }

.galeria-item {
  aspect-ratio: 1; border-radius: var(--radio-m); overflow: hidden;
  background: var(--papel-2); border: 1px solid var(--arcilla);
  display: grid; place-items: center; color: var(--tinta-suave);
  transition: transform .3s var(--sal);
}
@media (hover: hover) and (pointer: fine) { .galeria-item:hover { transform: scale(1.025); } }
.galeria-item span { font-size: 12.5px; text-align: center; padding: 10px; }

.estado-vacio {
  border: 1.5px dashed var(--arcilla); border-radius: var(--radio-l);
  padding: clamp(32px, 5vw, 56px); text-align: center; background: var(--blanco);
}
.estado-vacio .icono { color: var(--cuidado); opacity: .5; margin-bottom: var(--e4); }
.estado-vacio h4 { margin-bottom: 8px; }
.estado-vacio p { font-size: 14.5px; color: var(--tinta-suave); max-width: 48ch; margin-inline: auto; }

/* ── 15 · TESTIMONIOS ────────────────────────────────────────────────────── */
.testimonios__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 380px);
  gap: var(--e4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--e4); margin-inline: -20px; padding-inline: 20px;
  scrollbar-width: thin;
}
@media (min-width: 1000px) {
  .testimonios__pista {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
}
.testimonio {
  scroll-snap-align: start;
  background: var(--blanco); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: var(--e5);
  display: flex; flex-direction: column;
  transition: transform .3s var(--sal), box-shadow .3s var(--sal), border-color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .testimonio:hover {
    transform: translateY(-5px);
    box-shadow: var(--brillo-vidrio), var(--glow-pulso), var(--sombra-3);
    border-color: var(--pulso-wash);
  }
  .testimonio:hover .testimonio__comillas { opacity: .5; transform: scale(1.08); }
}
.testimonio__comillas { transition: opacity .3s ease, transform .3s var(--sal); }
.testimonio__comillas { font-family: var(--display); font-size: 3rem; line-height: .7; color: var(--pulso); opacity: .26; margin-bottom: var(--e3); }
.testimonio__texto { font-size: 15.5px; color: var(--tinta-media); margin-bottom: var(--e5); flex: 1; }
.testimonio__pie { display: flex; gap: 12px; align-items: center; padding-top: var(--e4); border-top: 1px solid var(--arcilla); }
.testimonio__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--cuidado-wash); color: var(--cuidado);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.testimonio__pie b { display: block; font-size: 14.5px; letter-spacing: -.01em; }
.testimonio__pie span { font-size: 12.5px; color: var(--tinta-suave); }
.testimonio__caso {
  display: inline-block; font-size: 12px; font-weight: 600;
  background: var(--cuidado-wash); color: var(--cuidado);
  padding: 4px 10px; border-radius: var(--radio-full); margin-bottom: var(--e3);
}
.marca-ejemplo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #FEF3C7; color: var(--aviso); padding: 3px 9px;
  border-radius: var(--radio-full); margin-left: 8px;
}

/* ── 16 · FAQ ────────────────────────────────────────────────────────────── */
.faq { max-width: 860px; }
.faq details {
  border-bottom: 1px solid var(--arcilla); background: transparent;
}
.faq summary {
  list-style: none; cursor: pointer; padding: var(--e5) 44px var(--e5) 0;
  position: relative; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem); letter-spacing: -.015em;
  transition: color .18s ease; touch-action: manipulation;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--cuidado); } }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  border-right: 2px solid var(--pulso); border-bottom: 2px solid var(--pulso);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .26s var(--sal);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__respuesta { padding-bottom: var(--e5); color: var(--tinta-suave); font-size: 15.5px; max-width: 68ch; }
.faq details[open] .faq__respuesta { animation: desplegar .3s var(--sal) both; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── 17 · AGENDAR ────────────────────────────────────────────────────────── */
.agendar__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 940px) { .agendar__grid { grid-template-columns: 1.25fr .75fr; } }

.form-caja {
  background: var(--blanco); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: clamp(24px, 3.6vw, 40px);
  box-shadow: var(--sombra-2);
}
.aviso {
  display: flex; gap: 11px; align-items: flex-start;
  background: #FEF3C7; border: 1px solid #FDE68A; color: #78500A;
  border-radius: var(--radio-m); padding: 13px 16px; font-size: 14px;
  margin-bottom: var(--e5); line-height: 1.5;
}
.aviso svg { flex: none; margin-top: 2px; }
.aviso b { font-weight: 700; }

.campos { display: grid; gap: var(--e4); }
@media (min-width: 620px) { .campos--2 { grid-template-columns: repeat(2, 1fr); } }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; color: var(--tinta); }
.campo label .opcional { font-weight: 400; color: var(--tinta-suave); }
.campo .ayuda { font-size: 12.5px; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px; min-height: 50px;
  border: 1.5px solid var(--tinta-linea); border-radius: var(--radio-m);
  background: var(--papel); color: var(--tinta); font-size: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--cuidado); background: var(--blanco);
  box-shadow: 0 0 0 3px rgba(168,114,74,.13);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--error); box-shadow: 0 0 0 3px rgba(180,83,9,.11);
}
.campo__error { font-size: 13px; color: var(--error); font-weight: 600; display: none; }
.campo__error.visible { display: flex; gap: 5px; align-items: center; }

.radios { display: grid; gap: 10px; }
@media (min-width: 520px) { .radios { grid-template-columns: repeat(2, 1fr); } }
.radio-tarjeta {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--tinta-linea); border-radius: var(--radio-m);
  padding: 14px 16px; background: var(--papel);
  transition: border-color .18s ease, background .18s ease;
}
.radio-tarjeta:has(input:checked) { border-color: var(--cuidado); background: var(--cuidado-wash); }
.radio-tarjeta input { width: 19px; height: 19px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--cuidado); padding: 0; }
.radio-tarjeta b { display: block; font-size: 14.5px; }
.radio-tarjeta span { font-size: 12.5px; color: var(--tinta-suave); }

.check-linea { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--tinta-suave); cursor: pointer; }
.check-linea input { width: 19px; height: 19px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--cuidado); padding: 0; }
.check-linea a { color: var(--cuidado); border-bottom: 1px solid var(--cuidado-borde); }

/* Resumen: termina en WhatsApp, nunca en un check verde falso.
   Un paciente que ve una confirmación bonita cree que tiene cita. No la tiene. */
.exito { text-align: left; animation: aparecer .45s var(--sal) both; }
.exito__ico {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--cuidado-wash); color: var(--cuidado);
  display: grid; place-items: center; margin-bottom: var(--e5);
}
.exito h3 { margin-bottom: 10px; }
.exito > p { color: var(--tinta-suave); font-size: 15.5px; margin-bottom: var(--e5); }
.resumen {
  background: var(--papel-2); border: 1px solid var(--arcilla);
  border-radius: var(--radio-m); padding: var(--e4) var(--e5); margin-bottom: var(--e5);
}
.resumen dl { display: grid; gap: 9px; margin: 0; }
.resumen .fila { display: flex; justify-content: space-between; gap: var(--e4); font-size: 14.5px; }
.resumen dt { color: var(--tinta-suave); }
.resumen dd { margin: 0; font-weight: 600; text-align: right; }

.lateral-agendar { display: grid; gap: var(--e4); }
.bloque-lateral {
  background: var(--papel-2); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: var(--e5);
}
.bloque-lateral h4 { margin-bottom: var(--e3); }
.bloque-lateral p { font-size: 14.5px; color: var(--tinta-suave); }
.bloque-lateral--wa { background: #E7F9EE; border-color: #B7E9C9; }
.bloque-lateral ul { list-style: none; padding: 0; margin: var(--e3) 0 0; display: grid; gap: 9px; }
.bloque-lateral li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--tinta-media); }
.bloque-lateral li svg { flex: none; color: var(--cuidado); margin-top: 3px; }

/* ── 18 · PAGOS ──────────────────────────────────────────────────────────── */
.pagos__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .pagos__grid { grid-template-columns: 1fr 1fr; } }

.checkout {
  background: var(--blanco); border: 1px solid var(--arcilla);
  border-radius: var(--radio-l); padding: clamp(24px, 3.4vw, 36px); box-shadow: var(--sombra-2);
  position: relative;
}
.cinta-demo {
  position: absolute; top: 14px; right: 14px;
  background: var(--aviso); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px;
  border-radius: var(--radio-full);
}
.checkout h4 { margin-bottom: var(--e4); }
.checkout__lineas { display: grid; gap: 11px; margin-bottom: var(--e4); }
.checkout__linea { display: flex; justify-content: space-between; gap: var(--e4); font-size: 14.5px; }
.checkout__linea span:first-child { color: var(--tinta-suave); }
.checkout__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--e4); border-top: 2px solid var(--tinta); margin-bottom: var(--e5);
}
.checkout__total b { font-size: 15px; }
.checkout__total .precio { font-size: 1.85rem; font-family: var(--display); letter-spacing: -.03em; }

.metodos { display: grid; gap: 9px; margin-bottom: var(--e5); }
.metodo {
  display: flex; gap: 11px; align-items: center; cursor: pointer;
  border: 1.5px solid var(--tinta-linea); border-radius: var(--radio-m);
  padding: 13px 15px; background: var(--papel); transition: all .18s ease;
}
.metodo:has(input:checked) { border-color: var(--cuidado); background: var(--cuidado-wash); }
.metodo input { width: 19px; height: 19px; flex: none; accent-color: var(--cuidado); }
.metodo b { font-size: 14.5px; }
.metodo .tag {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--radio-full);
  background: var(--cuidado-wash); color: var(--cuidado);
}
.metodo .tag--off { background: var(--papel-2); color: var(--tinta-suave); }

.nota-seguridad { font-size: 13px; color: var(--tinta-suave); display: flex; gap: 8px; align-items: flex-start; margin-top: var(--e4); }
.nota-seguridad svg { flex: none; color: var(--cuidado); margin-top: 2px; }

/* Tarjeta de pago demo: se ve y se comporta como una tarjeta real (chip,
   número que se formatea solo, vencimiento) pero es 100% decorativa —
   ver aviso dentro. Aparece solo si el usuario elige "Tarjeta". */
.tarjeta-demo {
  margin: 18px 0 20px; padding-top: 4px;
  animation: aparecer .35s var(--sal) both;
}
.tarjeta-demo__visual {
  aspect-ratio: 1.586 / 1; max-width: 360px; margin: 0 auto 20px;
  border-radius: 16px; padding: 20px 22px;
  background: linear-gradient(135deg, var(--tinta-media) 0%, var(--fondo-2) 55%, var(--cuidado) 130%);
  box-shadow: var(--sombra-3), var(--brillo-vidrio);
  border: 1px solid var(--arcilla);
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; font-family: 'Figtree', monospace;
  position: relative; overflow: hidden;
}
.tarjeta-demo__visual::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.22), transparent 55%);
}
.tarjeta-demo__chip { position: relative; z-index: 1; }
.tarjeta-demo__numero {
  position: relative; z-index: 1; font-size: 19px; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; margin: 14px 0 4px;
}
.tarjeta-demo__fila { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
.tarjeta-demo__fila span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.tarjeta-demo__fila b { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.tarjeta-demo__aviso {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 14px;
  font-size: 12.5px; color: var(--tinta-suave); background: var(--papel-2);
  border-radius: var(--radio-m); padding: 11px 14px;
}
.tarjeta-demo__aviso svg { flex: none; color: var(--aviso); margin-top: 2px; }

/* ── 19 · CTA FINAL Y FOOTER ─────────────────────────────────────────────── */
.cta-final { background: var(--banda); text-align: center; position: relative; overflow: hidden; }
.cta-final::before {
  content: ''; position: absolute; width: 760px; height: 760px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,66,90,.12) 0%, transparent 62%);
  pointer-events: none;
}
.cta-final .contenedor { position: relative; z-index: 1; }
.cta-final h2 { margin-bottom: var(--e4); max-width: 18ch; margin-inline: auto; }
.cta-final p { color: var(--tinta-media); max-width: 58ch; margin: 0 auto var(--e6); font-size: 16.5px; }
.cta-final .acciones { display: flex; gap: var(--e3); justify-content: center; flex-wrap: wrap; }

.footer { background: var(--banda); color: var(--tinta-media); border-top: 1px solid var(--banda-linea); }
.footer .contenedor { padding-block: clamp(48px, 6vw, 72px) var(--e5); }
.footer__grid { display: grid; gap: var(--e6); }
@media (min-width: 700px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.footer h5 {
  font-family: var(--texto); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cuidado);
  margin-bottom: var(--e4);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { font-size: 14.5px; transition: color .18s ease; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--pulso); } }
/* Logo del footer sobre la banda clara: ya no necesita placa blanca propia
   para destacar (antes era oscura), pero se conserva para darle un borde
   limpio al logo contra el terracota de la banda. */
.footer__marca img {
  height: 54px; width: auto; margin-bottom: var(--e4);
  background: rgba(255,255,255,.94);
  padding: 12px 18px;
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-1);
}
.footer__marca .lema { font-family: var(--display); font-size: 1.15rem; color: var(--tinta); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--e3); }
.footer__marca p { font-size: 14.5px; max-width: 40ch; }
.footer__contacto p { font-size: 14.5px; margin-bottom: var(--e4); }
.footer__contacto b { display: block; color: var(--tinta); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; }
.redes { display: flex; gap: 10px; margin-top: var(--e3); }
.redes a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--arcilla); color: var(--tinta-media);
  transition: background .2s ease, color .2s ease, transform .18s var(--sal);
}
.redes a:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .redes a:hover { background: var(--cuidado); color: #fff; } }

.footer__legal {
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid var(--banda-linea);
  display: grid; gap: var(--e3); font-size: 13px;
}
@media (min-width: 800px) { .footer__legal { grid-template-columns: 1fr auto; align-items: center; } }
.footer__legal .enlaces { display: flex; gap: var(--e4); flex-wrap: wrap; }
.descargo {
  margin-top: var(--e4); font-size: 12.5px; color: var(--tinta-suave);
  max-width: 90ch; line-height: 1.55;
}

/* ── 20 · BARRA MÓVIL FIJA ───────────────────────────────────────────────── */
/* En móvil no hay burbuja flotante de WhatsApp: dos elementos flotantes en
   375px es basura visual y tapa contenido. Va integrado en la barra. */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: rgba(245,248,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--arcilla);
  transform: translateY(105%);
  transition: transform .34s var(--suave);
}
.barra-movil.visible { transform: none; }
@media (min-width: 980px) { .barra-movil { display: none; } }
body.tiene-barra-movil { padding-bottom: 76px; }
@media (min-width: 980px) { body.tiene-barra-movil { padding-bottom: 0; } }

/* Burbuja flotante solo en escritorio */
.wa-flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: none; align-items: center; gap: 10px;
  background: #25D366; color: #06331A; font-weight: 600; font-size: 14.5px;
  padding: 13px 20px; border-radius: var(--radio-full);
  box-shadow: 0 8px 30px rgba(37,211,102,.36);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .3s var(--sal), transform .3s var(--sal), box-shadow .22s ease;
}
@media (min-width: 980px) { .wa-flotante { display: inline-flex; } }
.wa-flotante.visible { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .wa-flotante:hover { box-shadow: 0 12px 38px rgba(37,211,102,.48); transform: translateY(-2px); }
}
.wa-flotante:active { transform: scale(.97); }

/* Un par de pulsos suaves la primera vez que aparece, para que se note que
   es interactivo sin quedar animando todo el rato (se quita sola por JS). */
.wa-flotante--pulso { animation: pulso-anillo-wa 1.5s var(--sal) 2; }
@keyframes pulso-anillo-wa {
  0%   { box-shadow: 0 8px 30px rgba(37,211,102,.36), 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 8px 30px rgba(37,211,102,.36), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 30px rgba(37,211,102,.36), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .wa-flotante--pulso { animation: none; } }

/* Botón subir */
.subir {
  position: fixed; right: 24px; bottom: 92px; z-index: 79;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blanco); border: 1px solid var(--arcilla); color: var(--tinta);
  display: none; place-items: center; box-shadow: var(--sombra-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--sal), transform .3s var(--sal);
}
@media (min-width: 980px) { .subir { display: grid; } }
.subir.visible { opacity: 1; transform: none; }
.subir:active { transform: scale(.93); }

/* ── 21 · VIDRIO LÍQUIDO (utilidades globales) ──────────────────────────── */
/* `backdrop-filter` con blur es CARO de componer, y su costo crece con la
   cantidad de capas simultáneas en pantalla, no solo con el radio. Probado
   en vivo: 7 tarjetas con blur(22px) a la vez hacían que la pestaña tardara
   +5s en pintar — inaceptable para el celular de gama media que es el
   público real. Por eso el vidrio se reparte en DOS niveles:

   Nivel A — vidrio real (blur) SOLO en superficies "de una", pocas a la vez
   en pantalla (header, paneles, el mapa corporal, formularios).
   Nivel B — vidrio liviano (translúcido, SIN blur) en piezas que se repiten
   muchas veces juntas (7 tarjetas de servicio, testimonios, gale­ría, chips):
   ahí el blur no paga su costo y translúcido simple ya se ve como vidrio
   tintado sobre el mesh de color de fondo. */
.header,
.panel-movil,
.cuerpo-caja,
.resultado,
.form-caja,
.checkout,
.bloque-lateral,
.marco,
.mv__bloque,
.tarjeta-flotante,
.mapa-estatico,
.banda-cta {
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
}

/* Más "glass" sin pagar más costo de compositing: las tarjetas que se repiten
   muchas veces (nivel B, sin blur) igual se leen como vidrio si se les da
   BORDE DE LUZ + reflejo superior + un degradado interno muy sutil. Eso es
   lo que hace que un panel translúcido parezca vidrio de verdad y no una
   caja semitransparente. */
.tarjeta-servicio,
.testimonio,
.bloque-lateral,
.galeria-item,
.faq details,
.metodo,
.radio-tarjeta {
  background-image: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
  box-shadow: var(--sombra-2), var(--brillo-vidrio);
}

/* Reflejo diagonal que recorre la tarjeta al pasar el cursor — el detalle
   que más "vende" la sensación de vidrio, y cuesta solo un transform. */
@media (hover: hover) and (pointer: fine) {
  .tarjeta-servicio, .testimonio { position: relative; overflow: hidden; }
  .tarjeta-servicio::after, .testimonio::after {
    content: ''; position: absolute; inset: -40% -60%; pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
    transform: translateX(-120%);
    transition: transform .75s var(--sal);
  }
  .tarjeta-servicio:hover::after, .testimonio:hover::after { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta-servicio::after, .testimonio::after { display: none; }
}

/* Brillo especular: el filo superior que "atrapa la luz" — sin esto, un panel
   translúcido con blur es solo "borroso", no "vidrio". Con esto, sí. Se aplica
   a las superficies con jerarquía propia (tarjetas/paneles), no a inputs ni
   chips (ahí se vería como una línea rara). */
.header,
.tarjeta-servicio,
.testimonio,
.cuerpo-caja,
.resultado,
.form-caja,
.checkout,
.bloque-lateral,
.marco,
.video-card,
.faq details,
.mv__bloque,
.tarjeta-flotante,
.banda-cta {
  box-shadow: var(--brillo-vidrio), var(--sombra-2);
}
/* Los que ya definían su propio box-shadow (hover con glow de color, etc.)
   necesitan el brillo especular SUMADO, no reemplazado — se agrega mediante
   una capa ::before delgada en vez de pisar el box-shadow existente. */
.tarjeta-servicio, .testimonio, .cuerpo-caja, .resultado, .form-caja,
.checkout, .bloque-lateral, .marco, .video-card, .mv__bloque, .banda-cta {
  position: relative;
}
/* Nota: NO se usa un ::after para el brillo especular de estas dos tarjetas
   — `.tarjeta-servicio::after` ya es la barra de acento del hover y
   `.tarjeta-servicio--destacada::before` ya es la etiqueta "Lo más avanzado".
   El brillo especular de esas dos se suma directo en su propio box-shadow
   (ver reglas de la tarjeta-servicio y testimonio, secciones 11 y 15). */

/* ── Sistema de "páginas": cada sección de <main> es su propia pantalla ──── */
/* ── TRANSICIÓN ENTRE PÁGINAS ────────────────────────────────────────────── */
/* El sitio son 4 archivos HTML separados, así que navegar implica una recarga
   real. Sin esto se ve un corte seco a blanco entre página y página. Con
   esto: la actual se desvanece y sube un poco antes de irse, y la nueva
   entra desde abajo. JS pone/quita .saliendo y .entrando. */
main, .header, .barra-util, .footer {
  transition: opacity .26s var(--sal), transform .26s var(--sal);
}
body.saliendo main, body.saliendo .footer {
  opacity: 0; transform: translateY(-10px);
}
body.saliendo .header, body.saliendo .barra-util { opacity: 0; }
body.entrando main { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  main, .header, .barra-util, .footer { transition: none; }
  body.saliendo main, body.saliendo .footer,
  body.entrando main { opacity: 1; transform: none; }
}

/* ELIMINADO (2026-09-10): antes cada sección que no estuviera centrada en
   pantalla bajaba a opacity .78 y el <html> tenía scroll-snap, para simular
   "pasar de pantalla en pantalla" dentro de una sola página larga.
   Dos problemas reales que causaba, reportados por el cliente como
   "las transiciones fallan" y "los colores no convencen":
     1. Casi TODA la página se veía permanentemente al 78% — los colores
        salían lavados y el sitio parecía apagado, sin que fuera culpa de
        la paleta.
     2. El scroll-snap hacía que el scroll se sintiera pegajoso y a saltos.
   Ya no hace falta ninguna de las dos cosas: ahora el sitio SON páginas
   separadas de verdad (index / terapias / nosotros / agendar), así que la
   separación la da la navegación, no un efecto que degrada el contenido. */

/* ── Logo como marca de agua translúcida ─────────────────────────────────── */
/* El logo real (PNG) se funde de fondo en un par de secciones, gigante y
   tenue, con una deriva propia — "se incorpora a la página" sin competir
   con el contenido real que va encima. */
/* Marca de agua. Los filtros de antes (brightness(3) + mix-blend-mode:overlay)
   estaban calibrados para el tema OSCURO: sobre el fondo crema actual dejaban
   una mancha lavada. Ahora se usa el logo tal cual, muy tenue, para que se
   reconozca la marca sin competir con el texto. */
.logo-marca-agua {
  position: absolute; z-index: 0; pointer-events: none;
  opacity: .06;
  animation: flotar-logo 14s ease-in-out infinite;
}
/* Cualquier sección que contenga una marca de agua tiene que recortarla y
   servir de referencia de posicionamiento; si no, el logo se sale del bloque
   y estira la página a lo ancho (scroll horizontal). */
.seccion:has(> .logo-marca-agua),
.hero:has(> .logo-marca-agua) { position: relative; overflow: hidden; }
@keyframes flotar-logo {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50%      { transform: translateY(-22px) rotate(2deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .logo-marca-agua { animation: none; } }

/* Cuando la pestaña está en segundo plano, se pausan TODAS las animaciones
   infinitas (mesh, marcas de agua, pulso) — "siempre se mueve" mientras se
   mira, cero costo mientras no. */
body.pestana-oculta::before,
body.pestana-oculta .logo-marca-agua,
body.pestana-oculta .marco--pendiente .pulso-svg path,
body.pestana-oculta .marco--pendiente .punto-pulso,
body.pestana-oculta .marca img,
body.pestana-oculta .nervio,
body.pestana-oculta .arteria,
body.pestana-oculta .zona__anillo {
  animation-play-state: paused !important;
}

/* "Respiración" del logo — mismo patrón que Essencia (@keyframes breathe):
   una escala sutil, continua, que hace que la marca se sienta viva sin
   llamar la atención. Nunca en el logo del footer (ahí va sobre placa
   blanca sólida, se ve raro respirando). */
.marca img {
  animation: respirar-logo 5.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes respirar-logo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) { .marca img { animation: none; } }