/* =====================================================================
   ObesityCare — Landing
   Design system basado en el Manual de Identidad de Marca 2026.
   Púrpura #855BAB + gris carbón #383A3B · Cormorant Garamond + Lato.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Marca */
  --purple: #855BAB;
  --purple-deep: #6C4A8C;
  --lavender: #C9B8DC;
  --lavender-soft: #EDE7F3;
  --carbon: #383A3B;
  --gray-mid: #8A8C8D;
  --pearl: #F4F2F6;
  --gold: #D4A017;
  --white: #ffffff;
  --wa-green: #25d366;

  /* Texto */
  --text: #383A3B;
  --text-soft: #5c5e60;
  --text-muted: #8A8C8D;

  /* Superficies / bordes */
  --bg: #ffffff;
  --bg-soft: #F4F2F6;
  --border: #e7e2ee;

  /* Gradientes de marca */
  --grad-purple: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%);
  --grad-hero: linear-gradient(180deg, #ffffff 0%, var(--pearl) 55%, var(--lavender-soft) 100%);

  /* Tipografía */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala de espaciado */
  --space-section: clamp(3.5rem, 8vw, 7rem);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(56, 58, 59, 0.06);
  --shadow: 0 10px 30px rgba(108, 74, 140, 0.10);
  --shadow-lg: 0 20px 48px rgba(108, 74, 140, 0.16);

  /* El mockup del cliente está capturado a 1448px y su contenido ocupa 1286px
     (88.8%). Con 1180px todo quedaba encajonado y se leía "con zoom". */
  --maxw: 1300px;
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js .reveal:not(.is-visible) { opacity: 1 !important; transform: none !important; }
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[inert] { pointer-events: none; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--carbon); letter-spacing: 0.01em; }
/* Reparte parejo cuando un título sí necesita dos líneas, en vez de dejar una huérfana. */
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
p { color: var(--text-soft); }
strong { color: var(--carbon); font-weight: 700; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: var(--space-section); }
/* El nav es sticky: sin esto, al saltar por un ancla el header tapa el título. */
section[id] { scroll-margin-top: 96px; }
.section--soft { background: var(--bg-soft); }
/* 900px para que los títulos entren en un renglón como en los mockups; la bajada
   se mantiene en 720px, que es el ancho cómodo de lectura. */
.section__head { max-width: 900px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head p { margin-top: 1rem; font-size: 1.15rem; color: var(--text-soft); max-width: 720px; margin-inline: auto; }
/* Títulos largos que igual necesitan más aire (p. ej. el de la sección Equipo). */
.section__head--wide { max-width: 1240px; }
.section__head--wide h2 { font-size: clamp(1.85rem, 3.1vw, 2.45rem); }
/* Saltos que replican el corte de línea del mockup; en mobile estorban. */
.br-desktop { display: none; }
@media (min-width: 861px) { .br-desktop { display: inline; } }
/* Acento de marca en títulos: la frase de cierre en cursiva violeta.
   Patrón presente en todos los mockups que el cliente aprobó el 16-08. */
h1 .accent, h2 .accent, h3 .accent, .hero__lead .accent { color: var(--purple); font-style: italic; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.9rem;
}
/* Eyebrow suelto como encabezado de sub-bloque (fuera de .section__head). */
.eyebrow--block { display: block; text-align: center; margin-bottom: 1.75rem; }
/* Eyebrow flanqueado por dos reglas cortas: — TEXTO — (mockups del 16-08). */
.eyebrow--rules { display: inline-flex; align-items: center; gap: 0.9rem; }
.eyebrow--rules::before, .eyebrow--rules::after { content: ''; width: clamp(24px, 4vw, 44px); height: 1px; background: currentColor; opacity: 0.55; }

/* Decoración de fondo: curvas de marca en esquinas opuestas de la sección.
   Se aplica a las secciones que el cliente aprobó con ese fondo el 16-08. */
.section--deco { position: relative; overflow: hidden; isolation: isolate; }
.section--deco::before, .section--deco::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  background: var(--lavender-soft); opacity: 0.75; pointer-events: none;
}
/* Radios asimétricos para que lean como curvas orgánicas y no como círculos. */
.section--deco::before { width: clamp(220px, 26vw, 420px); aspect-ratio: 1; top: -14%; left: -9%; border-radius: 52% 48% 42% 58% / 55% 42% 58% 45%; }
.section--deco::after { width: clamp(260px, 30vw, 480px); aspect-ratio: 1; bottom: -18%; right: -10%; border-radius: 45% 55% 58% 42% / 48% 55% 45% 52%; }
.section--soft.section--deco::before, .section--soft.section--deco::after { background: var(--lavender); opacity: 0.28; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 0.9rem 1.7rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn svg { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.btn--primary { background: var(--grad-purple); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--ghost { background: transparent; color: var(--purple-deep); border-color: var(--lavender); }
.btn--ghost:hover { background: var(--lavender-soft); border-color: var(--purple); transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--purple-deep); box-shadow: var(--shadow); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--outline-white:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.nav.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 76px; }
.nav__logo img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__links a { font-weight: 700; font-size: 0.96rem; color: var(--text); position: relative; padding: 0.25rem 0; transition: color var(--transition); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--purple); transition: width var(--transition);
}
.nav__links a:hover { color: var(--purple-deep); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--carbon); }
.nav__burger svg { width: 28px; height: 28px; }

/* ---------- Hero a 2 columnas (mockup del cliente, 16-08) ----------
   Fondo claro con texto oscuro a la izquierda y foto recortada a la derecha,
   cerrado por una onda violeta que empalma con la sección siguiente. */
.hero { position: relative; overflow: hidden; background: #fff; isolation: isolate; min-height: min(86vh, 880px); display: flex; align-items: center; }
/* El <picture> no debe generar caja propia: la que posiciona es la <img>. */
.hero picture { display: contents; }
/* La foto sangra por el borde derecho; el degradado la funde hacia el texto. */
/* El mask difumina el canto izquierdo de la foto: sin él se ve un corte recto. */
.hero__bg { position: absolute; top: 0; right: 0; z-index: -3; height: 100%; width: clamp(360px, 51%, 780px); object-fit: cover; object-position: 62% top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.hero__scrim { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, #fff 0%, #fff 48%, rgba(255,255,255,0.97) 58%, rgba(255,255,255,0.72) 66%, rgba(255,255,255,0) 80%); }
/* Curvas de marca: uno abajo a la izquierda y otro arriba a la derecha. */
.hero__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__deco::before, .hero__deco::after { content: ''; position: absolute; border-radius: 50%; background: var(--lavender-soft); }
.hero__deco::before { width: clamp(260px, 30vw, 460px); aspect-ratio: 1; left: -16%; bottom: -22%; }
.hero__deco::after { width: clamp(200px, 22vw, 340px); aspect-ratio: 1; right: -6%; top: -26%; background: var(--lavender); opacity: 0.55; }
.hero__grid { display: grid; align-items: center; padding-block: clamp(3rem, 7vh, 5.5rem) clamp(5.5rem, 12vh, 9rem); }
/* El texto se apoya sobre la zona velada de la foto, como en el mockup: por eso
   puede ser más ancho que la mitad libre del hero. */
.hero__inner { position: relative; z-index: 1; text-align: left; max-width: 840px; }
/* Escala propia: el h1 global (hasta 4.25rem) parte cada línea en dos dentro de
   la columna de texto. Este tamaño mantiene las 2 líneas del mockup. */
.hero h1 { color: var(--carbon); margin-bottom: 1.35rem; font-size: clamp(2.3rem, 4.4vw, 3.3rem); }
.hero__lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.32; color: var(--carbon); margin: 0 0 1.15rem; }
.hero__sub { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--text-soft); max-width: 660px; margin: 0 0 2.2rem; line-height: 1.6; }
.hero .badge { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); margin-bottom: 1.6rem; }
.badge--soft { background: var(--lavender-soft); border: 1px solid var(--border); color: var(--purple-deep); }
.badge--soft .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px rgba(133,91,171,0.20); }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Chips de confianza: ícono en círculo lavanda + separador vertical */
.hero__trust { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; margin-top: 2.4rem; color: var(--text); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; }
.hero__trust li { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__trust li + li { border-left: 1px solid var(--border); padding-left: 1.5rem; }
.hero__trust-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lavender-soft); color: var(--purple-deep); flex-shrink: 0; }
.hero__trust-ico svg { width: 17px; height: 17px; }

/* Banda violeta sólida que cierra la portada, como en el mockup. */
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; pointer-events: none; }
.hero__wave svg { display: block; width: 100%; height: clamp(54px, 8vw, 110px); }
.hero__wave-band { fill: var(--purple); }

/* Botones sobre foto — verde WhatsApp accesible (AA con texto blanco) */
.btn--wa { background: #157a47; color: #fff; box-shadow: 0 12px 30px rgba(21,122,71,0.40); }
.btn--wa:hover { background: #10643a; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(21,122,71,0.52); }
.btn--glass { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,0.22); border-color: #fff; transform: translateY(-2px); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Pilares ---------- */
/* Mockup del 16-08: contenido alineado a la izquierda, no centrado. */
.pillar { text-align: left; padding: 2rem 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar__icon { width: 60px; height: 60px; margin: 0 0 1.2rem; border-radius: 18px; display: grid; place-items: center; background: var(--lavender-soft); color: var(--purple-deep); }
.pillar__icon svg { width: 30px; height: 30px; }
.pillar h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.pillar p { font-size: 0.98rem; }

/* ---------- Proceso (cards con barra superior + numeral serif) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.stepc {
  position: relative; padding: 1.7rem 1.4rem 1.6rem; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); border-top: 3px solid var(--purple);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stepc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stepc__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--purple-deep); margin-bottom: 0.55rem; }
.stepc h3 { font-size: 1.18rem; margin-bottom: 0.35rem; }
.stepc p { font-size: 0.92rem; }
/* Mockup 16-08: tarjetas solo con número + h3, sin párrafo. Centrado vertical para que
   la altura pareja de la fila (grid stretch) no deje el contenido pegado arriba. */
/* "Tu recorrido": tarjetas encadenadas por flechas, con el numeral como marca
   de agua y sin la barra superior de color. Según el mockup del 16-08. */
/* Los cuatro pasos llevan lista, así que vuelven a estirarse a la misma altura
   (stretch por defecto): mosaico parejo. Lo que sí queda del 17-08 es el offset
   fijo de las flechas — atarlas al 50% del alto las dejaba a alturas distintas
   apenas un paso creciera. */
.steps--flow .stepc { display: flex; flex-direction: column; justify-content: flex-start; padding-block: 2.4rem; border-top: 1px solid var(--border); }
.stepc__list { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.5rem; }
.stepc__list li { position: relative; padding-left: 1rem; font-size: 0.9rem; color: var(--text-soft); line-height: 1.45; }
.stepc__list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); }
.steps--flow .stepc h3 { margin-bottom: 0; }
.steps--flow .stepc__n { font-size: 3.4rem; color: var(--lavender); margin-bottom: 0.35rem; }
/* La flecha se ancla a una distancia fija del borde superior, no al 50%: desde
   que el paso 04 tiene lista las tarjetas no miden lo mismo y con top:50% cada
   flecha caía a una altura distinta. Este offset la deja a la altura del número. */
.steps--flow .stepc + .stepc::before {
  content: '→'; position: absolute; left: -0.625rem; top: 4.4rem; transform: translate(-50%, -50%);
  font-size: 1.35rem; line-height: 1; color: var(--purple); pointer-events: none;
}
.process__note { text-align: center; margin-top: 2.75rem; color: var(--purple-deep); font-style: italic; font-family: var(--font-display); font-size: 1.35rem; }

/* ---------- Tratamientos ---------- */
.treat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.treat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--lavender); }
.treat__badge { align-self: flex-start; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-deep); background: var(--lavender-soft); padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); margin-bottom: 1.25rem; }
/* Esquemas del diseñador (assets/esquemas/*.svg): el color de marca viene horneado en el archivo. */
.treat__icon { display: block; width: 110px; height: 110px; margin: -0.5rem 0 0.75rem -0.35rem; }
.treat h3 { margin-bottom: 0.65rem; }
.treat p { font-size: 0.98rem; margin-bottom: 1.25rem; }
.treat__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
/* Lavanda y no gris: en el mockup del 15-08 las píldoras comparten el tinte del badge.
   Es el único cambio de estilo real del mockup — el resto de las diferencias de color
   eran un corrimiento de gama de la captura, no un cambio de paleta. */
.treat__tags span { font-size: 0.78rem; font-weight: 600; color: var(--purple-deep); background: var(--lavender-soft); border: 1px solid transparent; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); }

/* Nombre del programa, entre el título y la descripción de la tarjeta farmacológica. */
.treat__program { margin: -0.35rem 0 0.7rem; }
.treat__program-name { display: block; font-weight: 800; font-size: 1.02rem; color: var(--purple); line-height: 1.25; }
.treat__program-sub { display: block; font-weight: 700; font-size: 0.86rem; color: var(--purple-deep); }

/* Aclaración médica al pie de los tratamientos. */
.treat-note { display: flex; align-items: flex-start; gap: 0.85rem; justify-content: center; max-width: 640px; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; }
.treat-note svg { flex-shrink: 0; width: 34px; height: 34px; padding: 6px; border-radius: 50%; color: var(--purple); background: var(--lavender-soft); }
.treat__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--purple-deep); transition: gap var(--transition); }
.treat__link:hover { gap: 0.7rem; }
.treat__link svg { width: 1.05em; height: 1.05em; }

/* ---------- Por qué elegirnos ---------- */
.why { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* InBody invierte el peso: la tarjeta del gráfico va primero y necesita menos
   ancho que el texto, cuyo título tiene que entrar en un renglón. */
.why--inbody { grid-template-columns: 0.85fr 1.15fr; }
/* El h2 de "Un equipo completo" vive en media columna y lleva saltos fijos.
   InBody queda excluido: su columna es más ancha y entra a tamaño completo. */
.why:not(.why--inbody) h2 { font-size: clamp(1.9rem, 3.8vw, 2.95rem); }
.why__list { display: grid; gap: 1.5rem; }
.why__item { display: flex; gap: 1rem; align-items: flex-start; }
.why__check { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--grad-purple); color: #fff; display: grid; place-items: center; }
.why__check svg { width: 20px; height: 20px; }
/* Numeración 01-04 (mockup 16-08): mismas dimensiones y alineación que .why__check para no romper la grilla. */
.why__n { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--lavender-soft); color: var(--purple); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; }
.why__item h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.why__item p { font-size: 0.97rem; }
.why__media { position: relative; }
.why__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.why__media .tag { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; background: rgba(255,255,255,0.94); backdrop-filter: blur(6px); border-radius: 12px; padding: 0.85rem 1.1rem; font-size: 0.88rem; font-weight: 600; color: var(--carbon); box-shadow: var(--shadow); }

/* ---------- Equipo ---------- */
/* Flex y no grid: la cantidad de tarjetas depende de qué fotos mandó el cliente y va a
   seguir cambiando. Con grid de N columnas, una fila incompleta queda pegada a la
   izquierda dejando un hueco; con flex-wrap las filas huérfanas se centran solas. */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
/* El flex-basis tiene que valer lo mismo que el max-width: con un basis menor
   (era 280px) entra una ficha de más por fila apenas el contenedor se ensancha. */
.team-grid > .doc { flex: 1 1 calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); }
.team-grid--sm { margin-top: 1.5rem; }
/* 6 fichas: 3 columnas × 2 filas en desktop, como el mockup. */
.team-grid--sm > .doc { flex: 1 1 calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); }
.doc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.doc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.doc__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: top center; background: var(--pearl); }
.doc__body { padding: 1.35rem 1.4rem 1.6rem; }
/* Eyebrow chico de categoría (Médico / Nutrición / Psicología), arriba del nombre. */
.doc__badge { display: block; font-family: var(--font-body); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin-bottom: 0.4rem; }
.doc__name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--carbon); line-height: 1.15; }
.doc__role { color: var(--purple-deep); font-weight: 700; font-size: 0.9rem; margin-top: 0.25rem; }
/* Especialidad: jerarquía intermedia entre .doc__role y .doc__info. */
.doc__spec { color: var(--text-soft); font-weight: 600; font-size: 0.88rem; margin-top: 0.3rem; }
.doc__info { color: var(--text-muted); font-size: 0.86rem; margin-top: 0.6rem; line-height: 1.5; }
.doc--sm .doc__photo { aspect-ratio: 4/3; }
.doc--sm .doc__name { font-size: 1.15rem; }
.doc--sm .doc__badge { font-size: 0.68rem; }

.accred { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.accred__label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem; }
.accred__logos { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.accred__logos img { height: 54px; width: auto; opacity: 0.9; transition: opacity var(--transition); }
.accred__logos img:hover { opacity: 1; }

/* ---------- Financiación ---------- */
.fin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fin { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.25rem 1.75rem; position: relative; transition: transform var(--transition), box-shadow var(--transition); }
.fin:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fin--featured { border-color: var(--purple); box-shadow: var(--shadow); }
.fin--featured::before { content: 'Más elegido'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-purple); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); }
.fin__name { font-weight: 700; color: var(--carbon); font-size: 1.05rem; }
.fin__big { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; color: var(--purple-deep); line-height: 1; margin: 0.75rem 0 0.5rem; }
.fin__desc { font-size: 0.92rem; color: var(--text-soft); }
.fin__foot { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-soft); }

/* ---------- Sedes ---------- */
.sedes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.sede { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.sede:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sede__photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sede__body { padding: 1.6rem 1.75rem 1.9rem; }
.sede__name { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--carbon); }
.sede__addr { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--text-soft); margin: 0.75rem 0 1.25rem; font-size: 0.98rem; }
.sede__addr svg { width: 1.15em; height: 1.15em; color: var(--purple); flex-shrink: 0; margin-top: 0.2rem; }

/* ---------- CTA final ---------- */
.cta-final { background: var(--grad-purple); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-final::after { content: '( )'; position: absolute; font-family: var(--font-display); font-size: 34rem; line-height: 1; color: rgba(255,255,255,0.06); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; }
.cta-final__inner { position: relative; max-width: 900px; margin-inline: auto; }
.cta-final h2 { color: #fff; margin-bottom: 1.1rem; }
.cta-final p { color: rgba(255,255,255,0.9); font-size: 1.15rem; margin-bottom: 2rem; }
.cta-final .hero__actions { justify-content: center; }

/* ---------- Footer ---------- */
.footer { background: #2f2b3a; color: rgba(255,255,255,0.78); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
/* 3 columnas de contenido: con la cuarta (heredada de cuando existía la columna
   "Contacto") la de sedes quedaba angosta y partía las direcciones en dos. */
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1.7fr; gap: 2.5rem; }
.footer__brand img { height: 46px; width: auto; margin-bottom: 1rem; }
.footer__brand p { color: rgba(255,255,255,0.62); font-size: 0.95rem; max-width: 260px; }
.footer h3 { font-family: var(--font-body); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
/* h4 (antes h3) para los nombres de sede dentro de la columna: mismo peso visual que los h3 del footer. */
.footer__sede { font-family: var(--font-body); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.footer ul li { margin-bottom: 0.6rem; }
.footer ul a, .footer address a { color: rgba(255,255,255,0.72); font-size: 0.95rem; font-style: normal; transition: color var(--transition); }
.footer ul a:hover, .footer address a:hover { color: var(--lavender); }
.footer address { line-height: 1.9; font-size: 0.95rem; color: rgba(255,255,255,0.72); font-style: normal; }
.footer__socials { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.footer__socials a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); display: grid; place-items: center; transition: background var(--transition); }
.footer__socials a:hover { background: var(--purple); }
.footer__socials svg { width: 18px; height: 18px; color: #fff; }
/* Dato de sede con ícono al costado (pin / teléfono), como en el mockup del 16-08. */
.footer__line { display: flex; align-items: flex-start; gap: 0.55rem; }
.footer__line + .footer__line { margin-top: 0.35rem; }
.footer__line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.28em; color: var(--lavender); }
/* El botón flotante de WhatsApp se apoya abajo a la derecha: reservamos su ancho
   para que no tape la línea de acreditación. */
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2.5rem; padding-top: 1.75rem; padding-right: clamp(0px, 12vw, 190px); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.footer__accred { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__accred svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--lavender); }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #157a47; color: #fff; font-weight: 700;
  padding: 0.85rem 1.25rem; border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(21, 122, 71, 0.45);
  transition: transform var(--transition), box-shadow var(--transition);
}
.wa-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55); }
.wa-float svg { width: 26px; height: 26px; }

/* ---------- Animación fade-in (degradación progresiva) ----------
   El contenido es visible por defecto; sólo se oculta para animar
   cuando hay JS (.js) y aún no entró en viewport. Sin JS / crawlers
   / reduced-motion => siempre visible. */
.reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }

/* ---------- Mobile drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(47, 43, 58, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 200; }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(84vw, 340px);
  background: #fff; z-index: 201; padding: 1.5rem; transform: translateX(100%);
  transition: transform var(--transition); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
/* width:auto es obligatorio junto con los atributos width/height del <img>: el
   atributo height lo pisa esta regla, pero el width quedaria como valor definido
   y estiraria el logo. Con auto se recupera la relacion de aspecto intrinseca. */
.drawer__head img { height: 34px; width: auto; }
.drawer__close { background: none; border: none; cursor: pointer; color: var(--carbon); padding: 0.4rem; }
.drawer__close svg { width: 26px; height: 26px; }
.drawer nav { display: flex; flex-direction: column; gap: 0.35rem; }
.drawer nav a { font-weight: 700; font-size: 1.1rem; padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--carbon); }
.drawer nav a:hover { color: var(--purple-deep); }
.drawer .btn { margin-top: 1.5rem; }

/* ---------- Métricas ---------- */
.stats { background: var(--grad-purple); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
/* Evita que una palabra larga (p. ej. "Miles") fuerce el track del grid más allá de 1fr. */
.stat { min-width: 0; position: relative; }
/* Separador vertical fino entre métricas, como en el mockup del banner. */
.stat + .stat::before {
  content: ''; position: absolute; left: -0.75rem; top: 12%; bottom: 12%;
  width: 1px; background: rgba(255,255,255,0.32);
}
.stat__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.7rem); line-height: 1; }
.stat__label { display: block; margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }

/* ---------- Sede: acciones + mapa ---------- */
.sede__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sede__actions .btn { flex: 1 1 auto; }
.sede__map { width: 100%; height: 220px; border: 0; border-radius: var(--radius); margin-top: 1.25rem; display: block; }

/* ---------- Canales (omnicanal) ---------- */
/* 3 canales de contacto directo; las redes van aparte en .channels--social.
   Las tarjetas son horizontales, así que necesitan ancho: no bajar de 3 columnas
   sin pasar directamente a 1. */
/* minmax(0,1fr): sin esto, el min-content del email (que rompe por palabra)
   deja su columna más angosta que las otras dos y parte la dirección en pedazos. */
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
/* Grupo de 2 canales (Instagram/Facebook): la grilla base está pensada para 5, acá se centran sin estirarse. */
/* Cuatro redes desde el 17-08 (se sumaron YouTube y TikTok): antes eran dos y
   por eso estaba clavado a 2 columnas con un ancho chico. */
.channels--social { grid-template-columns: repeat(4, 1fr); max-width: none; margin-inline: auto; }
/* Tarjeta horizontal: ícono a la izquierda, texto al medio y flecha al borde
   derecho, según el mockup del 16-08 (antes era vertical y centrada). */
.channel { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 1rem; padding: 1.25rem 1.35rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.channel:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.channel__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.channel__arrow { margin-left: auto; flex-shrink: 0; color: var(--purple); display: grid; place-items: center; transition: transform var(--transition); }
.channel__arrow svg { width: 20px; height: 20px; }
.channel:hover .channel__arrow { transform: translateX(4px); }
.channel__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; transition: transform var(--transition); }
.channel__icon svg { width: 28px; height: 28px; }
.channel:hover .channel__icon { transform: scale(1.08); }
.channel__name { font-weight: 800; color: var(--carbon); font-size: 1.02rem; }
/* overflow-wrap en vez de word-break: solo corta si de verdad no entra, así
   "@cirugiaobesidad" no se parte al medio teniendo lugar de sobra. */
.channel__meta { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: break-word; }
.channel--wa .channel__icon { background: #e7f9ee; color: #1ebe57; }
.channel--wa:hover { border-color: var(--wa-green); }
.channel--ig .channel__icon { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf); color: #fff; }
.channel--ig:hover { border-color: #d62976; }
.channel--fb .channel__icon { background: #e7f0ff; color: #1877f2; }
.channel--fb:hover { border-color: #1877f2; }
.channel--mail .channel__icon { background: var(--lavender-soft); color: var(--purple-deep); }
.channel--mail:hover { border-color: var(--purple); }
.channel--yt .channel__icon { background: #ffeaea; color: #ff0000; }
.channel--yt:hover { border-color: #ff0000; }
.channel--tt .channel__icon { background: #eefcfb; color: #010101; }
.channel--tt:hover { border-color: #25f4ee; }

/* Separador entre contacto directo y redes: línea fina interrumpida por el monograma "OC". */
.channels__sep { display: flex; align-items: center; gap: 1.5rem; max-width: 480px; margin: clamp(2.5rem, 5vw, 3.5rem) auto; }
.channels__sep::before, .channels__sep::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }
.channels__sep span { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.05em; color: var(--purple); }

/* ---------- Container angosto ---------- */
.container--narrow { max-width: 820px; }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300; background: var(--grad-purple); box-shadow: 0 0 10px rgba(133, 91, 171, 0.5);
  /* Se anima transform y no width: width recalcula layout en cada scroll y el
     navegador no puede componer la animación en la GPU. scaleX desde el borde
     izquierdo da el mismo efecto visual sin tocar el layout. */
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform; transition: transform 90ms linear; }

/* ---------- Cirugía reparadora (franja aparte de las 3 tarjetas) ----------
   Deliberadamente más liviana que .treat: fondo lavanda plano en vez de tarjeta
   blanca con sombra, y en horizontal. Es una etapa posterior del recorrido, no
   una cuarta alternativa de tratamiento. */
.treat-extra { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; padding: 1.6rem 1.9rem; background: var(--lavender-soft); border: 1px solid transparent; border-radius: var(--radius-lg); }
.treat-extra__ico { flex-shrink: 0; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: var(--purple-deep); }
.treat-extra__ico svg { width: 28px; height: 28px; }
.treat-extra__body { flex: 1 1 auto; min-width: 0; }
.treat-extra__badge { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-deep); margin-bottom: 0.4rem; }
.treat-extra h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.treat-extra p { font-size: 0.94rem; color: var(--text-soft); margin: 0; }
.treat-extra__link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--purple-deep); transition: gap var(--transition); }
.treat-extra__link:hover { gap: 0.7rem; }
.treat-extra__link svg { width: 18px; height: 18px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.85rem; }
.faq__item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); }
.faq__item[open] { box-shadow: var(--shadow); border-color: var(--lavender); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; font-weight: 700; font-size: 1.08rem; color: var(--carbon); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ico { position: relative; flex-shrink: 0; width: 22px; height: 22px; }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; background: var(--purple); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.faq__ico::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.faq__ico::after { left: 10px; top: 2px; width: 2px; height: 18px; }
.faq__item[open] .faq__ico::after { transform: rotate(90deg); opacity: 0; }
.faq__a { padding: 0 1.4rem 1.35rem; }
.faq__item[open] .faq__a { animation: faqOpen 0.28s ease; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- InBody / composición corporal ---------- */
.inbody-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.85rem; box-shadow: var(--shadow); }
.inbody-card__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.6rem; }
.inbody-card__scale { width: 52px; height: 52px; border-radius: 14px; background: var(--lavender-soft); color: var(--purple-deep); display: grid; place-items: center; flex-shrink: 0; }
.inbody-card__scale svg { width: 28px; height: 28px; }
.inbody-card__t { font-weight: 800; color: var(--carbon); }
.inbody-card__s { font-size: 0.9rem; color: var(--text-muted); }
.compo__bar { display: flex; height: 28px; border-radius: var(--radius-pill); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.compo__seg { height: 100%; }
.compo__seg--musculo { background: var(--purple); }
.compo__seg--agua { background: var(--lavender); }
.compo__seg--grasa { background: var(--gold); }
.compo__legend { display: flex; gap: 1.35rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.88rem; font-weight: 600; color: var(--text-soft); }
.compo__legend li { display: flex; align-items: center; gap: 0.45rem; }
.compo__legend .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot--musculo { background: var(--purple); }
.dot--agua { background: var(--lavender); }
.dot--grasa { background: var(--gold); }
.inbody__list { display: grid; gap: 0.75rem; }
.inbody__list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--text-soft); font-weight: 600; }
.inbody__list .tick { color: #fff; background: var(--grad-purple); width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; flex-shrink: 0; }

/* ---------- Hero: flotado sutil de las curvas ---------- */
.hero__deco .c1 { animation: floatY 9s ease-in-out infinite; }
.hero__deco .c2 { animation: floatY 11s ease-in-out infinite reverse; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* =====================================================================
   V3 — Hero gráfico a 2 columnas + "3 pasos para tu turno"
   ===================================================================== */

.btn--lg { padding: 1.05rem 2.2rem; font-size: 1.1rem; }

/* ---------- 3 pasos para tu turno (cards con numeral fantasma) ---------- */
.pasos-band { padding-block: clamp(3rem, 6vw, 5rem); }
.pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.paso {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.1rem 1.6rem 1.8rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.paso:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--lavender); }
.paso__n {
  position: absolute; top: 0.1rem; right: 1.1rem; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 4.6rem; line-height: 1; color: var(--lavender-soft);
}
.paso__ico {
  position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 16px;
  background: var(--grad-purple); color: #fff; display: grid; place-items: center;
  margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
.paso__ico svg { width: 28px; height: 28px; }
.paso h3 { position: relative; z-index: 1; font-size: 1.3rem; margin-bottom: 0.45rem; }
.paso p { position: relative; z-index: 1; font-size: 0.96rem; }
.pasos__cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Foto grupal del equipo ---------- */
.team-hero { margin-bottom: 2rem; }
.team-hero__img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.team-hero__ph {
  width: 100%; aspect-ratio: 16 / 7; border-radius: var(--radius-lg);
  background: var(--grad-purple); color: rgba(255,255,255,0.92);
  display: grid; place-items: center; align-content: center; gap: 0.6rem;
  box-shadow: var(--shadow); border: 1px dashed rgba(255,255,255,0.35);
}
.team-hero__ph svg { width: 44px; height: 44px; opacity: 0.9; }
.team-hero__t { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: 0.01em; }
.team-hero figcaption { text-align: center; margin-top: 0.9rem; font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .channels--social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__burger { display: inline-flex; }
  .why { grid-template-columns: 1fr; }
  .why__media { order: -1; }
  /* Las flechas conectoras solo tienen sentido con las 4 tarjetas en una fila. */
  .steps--flow .stepc + .stepc::before { display: none; }
  .team-grid > .doc, .team-grid--sm > .doc { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  /* Hero en mobile: la foto va arriba como banda y se desvanece hacia el texto,
     que queda sobre blanco. Superponerlos hacía ilegible el título. */
  .hero { min-height: 0; display: block; padding-top: clamp(310px, 84vw, 420px); }
  .hero__bg { width: 100%; height: clamp(360px, 96vw, 480px); object-position: 62% 10%;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
  .hero__scrim { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0.86) 60%, #fff 74%); }
  .hero__inner { max-width: none; }
  .hero__deco::after { display: none; }
  /* En columna, el separador vertical queda como una raya suelta. */
  .hero__trust li + li { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   Mobile (17-08)
   El problema no era la cantidad de secciones sino que acá abajo TODO colapsaba
   a una sola columna: 4 pilares + 3 tratamientos + 8 tarjetas de equipo + 7
   canales, uno debajo del otro. La página medía 20.000 px — 24 pantallas.
   Las tarjetas que son puro gráfico (pilares, recorrido, equipo chico, redes)
   van a 2 columnas; las que llevan texto largo (tratamientos, pasos, canales de
   contacto, sedes) se quedan en una, porque a mitad de ancho no se leen.
   --------------------------------------------------------------------------- */
@media (max-width: 680px) {
  body { font-size: 1rem; }
  /* El aire entre secciones se acumula 13 veces: es el ítem individual más caro. */
  :root { --space-section: 2.5rem; }

  .grid--3, .grid--2, .sedes-grid { grid-template-columns: 1fr; }
  /* Pilares y recorrido: icono + título + una bajada corta. Entran de a dos. */
  .grid--4, .steps { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .pillar { padding: 1.35rem 1.1rem; }
  .pillar__icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 0.85rem; }
  .pillar__icon svg { width: 24px; height: 24px; }
  .pillar h3 { font-size: 1.1rem; }
  .pillar p { font-size: 0.9rem; }
  .steps--flow .stepc { padding-block: 1.5rem; }
  .steps--flow .stepc__n { font-size: 2.4rem; }
  .steps--flow .stepc h3 { font-size: 1.05rem; }

  /* Los directores llevan bio larga y se quedan a lo ancho; las seis tarjetas
     chicas son foto + nombre y de a una desperdiciaban media pantalla cada una. */
  .team-grid > .doc { flex-basis: 100%; max-width: 100%; }
  /* Las fotos de dirección son 1:1 y a ancho completo se comían 350 px cada una.
     Mismo encuadre 4:3 que las tarjetas chicas; el object-position top center ya
     existente mantiene la cara dentro del recorte. */
  .team-grid > .doc .doc__photo { aspect-ratio: 4/3; }
  .team-grid--sm { gap: 0.9rem; }
  .team-grid--sm > .doc { flex-basis: calc((100% - 0.9rem) / 2); max-width: calc((100% - 0.9rem) / 2); }
  .doc--sm .doc__body { padding: 0.9rem 0.85rem; }
  .doc--sm .doc__name { font-size: 1.08rem; }

  .pasos { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .stat__num:not([data-count]) { font-size: clamp(1.9rem, 8vw, 2.6rem); }

  /* Contacto directo va a una columna: secretaria@cirugiaobesitycare.com no
     entra en media pantalla. Las redes son arrobas cortas y sí entran. */
  .channels { grid-template-columns: 1fr; }
  /* En columna la tarjeta horizontal deja ~100 px para el texto y "@cirugiaobesidad"
     se parte al medio. Apiladas y centradas, el arroba entra entero. */
  .channels--social { grid-template-columns: repeat(2, 1fr); max-width: 100%; gap: 0.9rem; }
  .channels--social .channel { flex-direction: column; text-align: center; padding: 1.1rem 0.6rem; gap: 0.6rem; }
  .channels--social .channel__body { align-items: center; }
  .channels--social .channel__icon { width: 44px; height: 44px; border-radius: 14px; }
  .channels--social .channel__icon svg { width: 24px; height: 24px; }
  .channels--social .channel__arrow { display: none; }
  .channels--social .channel__meta { font-size: 0.78rem; }

  /* El botón "Cómo llegar" ya abre Google Maps con la dirección cargada, así que
     el iframe duplicaba la función: 440 px y dos embeds de terceros de más. */
  .sede__map { display: none; }

  /* Los encabezados de sección y el padding de las tarjetas están calibrados
     para desktop; en 390 px ese mismo aire vale media pantalla por sección. */
  .section__head { margin-bottom: 1.75rem; }
  .section__head p { font-size: 1rem; margin-top: 0.75rem; }
  .treat { padding: 1.4rem 1.25rem; }
  .treat__icon { width: 76px; height: 76px; margin-bottom: 0.5rem; }
  .treat p { font-size: 0.94rem; margin-bottom: 1rem; }
  .treat__tags { margin-bottom: 1.1rem; }
  .treat-extra { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.15rem; }
  .treat-extra h3 { font-size: 1.15rem; }
  .sede__body { padding: 1.2rem 1.25rem 1.4rem; }
  .channel { padding: 1rem 1.1rem; }
  .team-hero { margin-bottom: 1.25rem; }
  .accred { margin-top: 2rem; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .wa-float span { display: none; }
  .wa-float { padding: 0.9rem; }
  .cta-final::after { font-size: 20rem; }
}