/* Landing de tratamiento — lenguaje visual compartido por /armonizacion-facial y /rinomodelacion.
   Toma la estructura del caso de estudio que inspiró el panel privado (encabezados con corchete,
   índice numerado en píldora, tarjetas blancas, cifras grandes en Poppins ligera, línea de
   tiempo alternada, bloques superpuestos, textura de puntos) con la paleta del sitio: marfil,
   cacao y dorado de styles.css. Todo vive bajo .lp-page; cabecera, pie, diálogo de reserva y
   formulario siguen saliendo de styles.css y rostro.css.

   Contraste: --lp-copy (stone-600) da 5.3:1 sobre marfil y --lp-gold-ink (gold-600) 5.1:1; el
   dorado claro (gold-500) se reserva para puntos, líneas y rellenos. */

@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/poppins-300.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/poppins-600.woff2) format("woff2"); }

.lp-page {
  --lp-bg: var(--ivory-50, #fbf8f2);
  --lp-band: var(--ivory-100, #f3ede3);
  --lp-band-deep: var(--ivory-200, #e7ddd0);
  --lp-card: var(--white-warm, #fffdf9);
  --lp-ink: var(--cacao-950, #241712);
  --lp-ink-2: var(--cacao-800, #4a3127);
  --lp-copy: var(--stone-600, #70665f);
  /* Cobre del logotipo (#b47c3c medido en el PNG): marca y acción. Como texto sobre claro solo
     --lp-gold-ink (5.5:1 sobre marfil); sobre cacao, --lp-gold-light (8.3:1). */
  --lp-gold: #b47c3c;
  --lp-gold-ink: #8a5a24;
  --lp-gold-light: #dcaa70;
  /* Paleta elegida el 2026-09-27: nude rosé (rubor, champán, lavanda). Sistema funcional: cada color dice algo. Urgente = convocatoria y cupos; confirmado =
     seguridad y credenciales. Los -ink son los únicos aptos para texto sobre claro (≥5:1). */
  --lp-alert: #c9566b;
  --lp-alert-ink: #9c3347;
  --lp-alert-light: #f0a2b0;
  --lp-ok: #9aa37a;
  --lp-ok-ink: #5a6340;
  /* Tonos de las manchas de fondo, en canales RGB para poder variar la opacidad. */
  --lp-aura-1: 236 178 172;
  --lp-aura-2: 230 206 166;
  --lp-aura-3: 200 190 214;
  --lp-line: rgba(36, 23, 18, .09);
  --lp-line-strong: rgba(36, 23, 18, .17);
  --lp-radius: 28px;
  --lp-radius-sm: 18px;
  --lp-shadow: 0 1px 2px rgba(36, 23, 18, .04), 0 22px 44px -26px rgba(36, 23, 18, .28);
  --lp-dots: radial-gradient(rgba(36, 23, 18, .16) 1px, transparent 1.4px);
  --lp-ease: cubic-bezier(.16, 1, .3, 1);

  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: Poppins, Arial, sans-serif;
}

.lp-page h1,
.lp-page h2,
.lp-page h3 { font-family: Poppins, Arial, sans-serif; color: var(--lp-ink); }

.lp-shell { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }

/* isolation: las manchas (z-index -1) quedan entre el fondo de la sección y su contenido.
   overflow-x: clip corta las que asoman por los lados sin crear un contenedor de scroll. */
.lp-section {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(84px, 9vw, 136px);
}

.lp-section--band { background: var(--lp-band); }

.lp-fineprint {
  max-width: 70ch;
  margin: 22px 0 0;
  color: var(--lp-copy);
  font-size: .78rem;
  line-height: 1.6;
}

/* Campos de puntos: textura de la referencia, desvanecida en los bordes. */
.lp-dotfield {
  position: absolute;
  pointer-events: none;
  background-image: var(--lp-dots);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

/* Manchas de color de fondo (la referencia "Color system"): elipses difusas en los tonos de la
   paleta, para que las zonas vacías junto a los títulos y detrás de las tarjetas tengan
   atmósfera. Se colocan con --x/--y (centro), --size y --rot en el atributo style. Son un
   degradado radial, no filter: blur(), para que no cuesten nada al hacer scroll. */
.lp-aura {
  position: absolute;
  z-index: -1;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--size, 620px);
  aspect-ratio: 1.5;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--tone) / .62), rgb(var(--tone) / .26) 55%, rgb(var(--tone) / 0));
  transform: translate(-50%, -50%) rotate(var(--rot, -26deg));
  pointer-events: none;
}

.lp-aura--1 { --tone: var(--lp-aura-1); }
.lp-aura--2 { --tone: var(--lp-aura-2); }
.lp-aura--3 { --tone: var(--lp-aura-3); }

/* Rectángulos de puntos de la referencia, desvanecidos a los lados. */
.lp-dotgrid {
  position: absolute;
  z-index: -1;
  top: var(--y, 0);
  left: var(--x, 0);
  width: var(--w, 260px);
  height: var(--h, 72px);
  background-image: var(--lp-dots);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ------------------------------------------------------------------ Encabezado de sección */

.lp-head {
  position: relative;
  max-width: 760px;
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 4px 0 4px 26px;
}

/* El corchete de la referencia: una línea vertical con dos remates cortos. */
.lp-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  border: 1px solid var(--lp-line-strong);
  border-right: 0;
}

.lp-head--center {
  margin-inline: auto;
  padding-left: 0;
  text-align: center;
}

.lp-head--center::before { display: none; }

/* Bloque con el punto en línea (no flex): cuando la etiqueta ocupa dos renglones, el punto
   sigue pegado al final del texto en vez de irse al borde derecho. */
.lp-kicker {
  display: block;
  margin: 0 0 14px;
  color: var(--lp-gold-ink);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lp-kicker::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--lp-gold);
  vertical-align: .12em;
}

.lp-head h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.3vw, 3.7rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
}

/* Índice numerado junto al título, como el "03" en píldora de la referencia. */
.lp-badge {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 32px;
  margin-left: 12px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--lp-ink);
  color: var(--lp-bg);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  vertical-align: .55em;
}

.lp-head-lead {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--lp-copy);
  font-size: .98rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.lp-head--center .lp-head-lead { margin-inline: auto; }

/* ------------------------------------------------------------------ Botones */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: Poppins, Arial, sans-serif;
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--lp-ease), color .2s var(--lp-ease), border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}

.lp-btn:active { transform: scale(.98); }

.lp-btn--primary { background: var(--lp-ink); color: var(--lp-bg); }
.lp-btn--primary:hover { background: var(--lp-ink-2); }

.lp-btn--ghost { border-color: var(--lp-line); background: var(--lp-card); color: var(--lp-ink); }
.lp-btn--ghost:hover { border-color: var(--lp-ink); background: var(--lp-card); }

.lp-btn--light { background: var(--lp-card); color: var(--lp-ink); }
.lp-btn--light:hover { background: var(--lp-band); }

/* ------------------------------------------------------------------ Tarjetas */

/* Cristal esmerilado: la mancha de color de detrás se ve difusa a través de la tarjeta, como los
   objetos de la referencia. En móvil, más opaca y sin desenfoque (ahorra GPU al hacer scroll). */
.lp-card {
  position: relative;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: rgb(255 253 249 / .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--lp-shadow);
}

@media (min-width: 901px) {
  .lp-card {
    background: rgb(255 253 249 / .7);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
  }
}

/* Encabezado de tarjeta de la referencia: etiqueta en versalitas y rayitas de estado. */
.lp-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--lp-gold-ink);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lp-dashes { display: inline-flex; gap: 4px; }
.lp-dashes i { width: 14px; height: 3px; border-radius: 2px; background: var(--lp-gold); }
.lp-dashes i.is-off { background: var(--lp-line-strong); }

/* ------------------------------------------------------------------ Hero */

.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(118px, 12vw, 158px) 0 clamp(56px, 6vw, 84px);
  background: linear-gradient(180deg, var(--lp-band) 0%, var(--lp-bg) 78%);
}

/* Anillos concéntricos de fondo, como los arcos de la referencia. */
.lp-hero::before {
  content: "";
  position: absolute;
  top: 8%;
  right: -12%;
  width: min(820px, 80vw);
  aspect-ratio: 1;
  border: 1px solid rgba(180, 124, 60, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(180, 124, 60, .035), 0 0 0 180px rgba(180, 124, 60, .025);
  pointer-events: none;
}

.lp-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

.lp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  color: var(--lp-copy);
  font-size: .74rem;
}

.lp-breadcrumb a { color: var(--lp-copy); text-decoration: none; }
.lp-breadcrumb a:hover { color: var(--lp-ink); text-decoration: underline; }
.lp-breadcrumb b { color: var(--lp-ink); font-weight: 500; }

.lp-rating {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: var(--lp-card);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 6px 18px -12px rgba(36, 23, 18, .3);
}

a.lp-rating { color: var(--lp-ink); text-decoration: none; transition: border-color .2s var(--lp-ease); }
a.lp-rating:hover { border-color: var(--lp-line-strong); }
.lp-rating-stars { color: var(--lp-gold); letter-spacing: .05em; }
.lp-rating small { color: var(--lp-copy); font-size: inherit; font-weight: 400; }

.lp-hero h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.8rem, 5.6vw, 5rem);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1;
  text-wrap: balance;
}

.lp-hero-lead {
  max-width: 46ch;
  margin: 26px 0 0;
  color: var(--lp-copy);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.lp-hero-note {
  margin: 16px 0 0;
  color: var(--lp-copy);
  font-size: .78rem;
}

.lp-offer-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  background: rgba(255, 253, 249, .7);
  color: var(--lp-ink);
  font-size: .8rem;
  line-height: 1.35;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: border-color .2s var(--lp-ease), background-color .2s var(--lp-ease);
}

.lp-offer-pill:hover { border-color: var(--lp-ink); background: var(--lp-card); }
.lp-offer-pill b { font-weight: 600; }

/* Punto "en vivo": señala que la convocatoria está abierta hoy. Color de urgencia. */
.lp-live-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-alert);
}

/* Visual del hero: el reel en un marco redondeado con tarjetas de cristal flotando alrededor. */
.lp-hero-visual {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 24px 0;
}

.lp-hero-visual .lp-dotfield { inset: 0 -10% auto auto; width: 70%; height: 80%; }

.lp-reel {
  position: relative;
  width: min(100%, 340px);
  margin: 0;
  z-index: 1;
}

.lp-reel-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: 6px solid var(--lp-card);
  border-radius: 34px;
  background: var(--lp-band-deep);
  box-shadow: 0 40px 80px -40px rgba(36, 23, 18, .55), 0 0 0 1px var(--lp-line);
}

.lp-reel video,
.lp-reel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-reel figcaption {
  margin: 14px 4px 0;
  color: var(--lp-copy);
  font-size: .72rem;
  line-height: 1.5;
  text-align: center;
}

/* El botón de pausa usa la misma lógica de script.js que el video de la portada
   (data-video-showcase / data-video-toggle); aquí solo cambia su posición y el icono. */
.has-js .lp-reel .ambient-video-toggle { right: 14px; bottom: 14px; z-index: 2; }

.lp-reel.is-playing .ambient-video-toggle span {
  position: relative;
  width: 10px;
  height: 12px;
  margin-left: 0;
  border: 0;
}

.lp-reel.is-playing .ambient-video-toggle span::before,
.lp-reel.is-playing .ambient-video-toggle span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
}

.lp-reel.is-playing .ambient-video-toggle span::before { left: 0; }
.lp-reel.is-playing .ambient-video-toggle span::after { right: 0; }

.lp-float {
  position: absolute;
  z-index: 2;
  min-width: 150px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 18px;
  background: rgba(255, 253, 249, .78);
  box-shadow: 0 18px 36px -22px rgba(36, 23, 18, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lp-float span {
  display: block;
  color: var(--lp-gold-ink);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lp-float strong {
  display: block;
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* Anclados al borde del marco (170px = medio reel) y montados solo ~20px sobre él: sobre el video
   tapaban el logo de la clínica y la cara de la paciente recostada. */
.lp-float--a { top: 12%; left: calc(50% - 300px); }
.lp-float--b { top: 64%; right: calc(50% - 300px); }
.lp-float--c { bottom: 17%; left: calc(50% - 300px); }

/* Cifras del hero en el formato de los indicadores del panel: número grande y ligero. */
.lp-kpis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(44px, 5vw, 68px) auto 0;
  padding: 0;
  border-top: 1px solid var(--lp-line-strong);
}

.lp-kpis div {
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 22px 22px 0;
  border-left: 1px solid var(--lp-line-strong);
}

.lp-kpis div:first-child { padding-left: 0; border-left: 0; }
.lp-kpis dd,
.lp-kpis dt { margin: 0; }

.lp-kpis dd {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.lp-kpis dt {
  color: var(--lp-copy);
  font-size: .72rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ Casos */

.lp-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.lp-case { padding: 20px 20px 22px; }

.lp-case-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lp-case-photos figure { margin: 0; }

.lp-case-photos img {
  width: 100%;
  /* height:auto: sin esto el atributo height del HTML gana y la proporción 3:4 se ignora. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  background: var(--lp-band);
}

/* Las etiquetas van DEBAJO de la foto: sobre la imagen tapaban la nariz del caso 2. */
.lp-case-photos figcaption {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
}

.lp-case-photos figure:last-child figcaption {
  border-color: var(--lp-ink);
  background: var(--lp-ink);
  color: var(--lp-bg);
}

.lp-case-note {
  margin: 14px 0 0;
  color: var(--lp-copy);
  font-size: .76rem;
  line-height: 1.55;
}

/* Comparador deslizable (rinomodelación). rinomodelacion.js solo mueve --compare-position sobre
   [data-rino-compare]; la imagen de "antes" se recorta con clip-path hasta esa posición. */
/* Apaisado en escritorio (como el comparador original, que era 16:9) para igualar la altura del
   par de fotos de la tarjeta vecina; en móvil vuelve a vertical, donde el rostro necesita alto. */
.lp-compare {
  --compare-position: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 18px;
  background: var(--lp-ink);
}

.lp-compare-image,
.lp-compare-before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lp-compare-image {
  max-width: none;
  object-fit: cover;
  object-position: center 43%;
  user-select: none;
  pointer-events: none;
}

.lp-compare-after { object-position: right 43%; }

.lp-compare-before {
  z-index: 1;
  overflow: hidden;
  clip-path: polygon(0 0, var(--compare-position) 0, var(--compare-position) 100%, 0 100%);
}

/* Las dos tomas no tienen el mismo zoom; este ajuste (heredado de tratamiento.css) las alinea. */
.lp-compare-before .lp-compare-image { transform: scale(1.1); transform-origin: 82% 42%; }

.lp-compare-label {
  position: absolute;
  z-index: 3;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(251, 248, 242, .92);
  color: var(--lp-ink);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.3;
}

.lp-compare-label-before { left: 14px; }
.lp-compare-label-after { right: 14px; background: var(--lp-ink); color: var(--lp-bg); }

.lp-compare-divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 2px;
  background: var(--lp-bg);
  box-shadow: 0 0 0 1px rgba(36, 23, 18, .2);
  transform: translateX(-50%);
  pointer-events: none;
}

.lp-compare-divider i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(36, 23, 18, .18);
  border-radius: 50%;
  background: var(--lp-bg);
  color: var(--lp-ink);
  box-shadow: 0 10px 30px rgba(24, 14, 10, .3);
  transform: translate(-50%, -50%);
}

.lp-compare-divider i::before {
  content: "‹ ›";
  margin-top: -2px;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
}

.lp-compare-range {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.lp-compare:focus-within .lp-compare-divider i {
  outline: 3px solid var(--lp-gold-light);
  outline-offset: 4px;
}

/* ------------------------------------------------------------------ Bento de zonas */

.lp-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.lp-bento > * { padding: 24px; }

.lp-bento-tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lp-bento-tall .lp-dotfield { right: -30%; bottom: -20%; width: 120%; height: 70%; }

.lp-stat-value {
  margin: auto 0 0;
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: .95;
}

.lp-stat-value small { font-size: .38em; letter-spacing: -.01em; color: var(--lp-copy); }

.lp-stat-text {
  position: relative;
  max-width: 24ch;
  margin: 14px 0 0;
  color: var(--lp-copy);
  font-size: .88rem;
  line-height: 1.6;
}

.lp-zone-num {
  display: block;
  margin-bottom: 26px;
  color: var(--lp-gold-ink);
  font-size: .78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lp-bento h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.lp-bento p:not(.lp-card-label):not(.lp-stat-value):not(.lp-stat-text) {
  margin: 10px 0 0;
  color: var(--lp-copy);
  font-size: .85rem;
  line-height: 1.6;
}

.lp-bento .lp-zone--quiet { background: var(--lp-band); box-shadow: none; }

/* Mapa de puntos de equilibrio: el perfil del caso 1 con los cuatro puntos numerados igual que
   las tarjetas de zona. La foto (526×701) llena la tarjeta con object-fit: cover, así que cada
   punto se coloca sobre la imagen ya escalada y recortada: --x/--y son la posición en la foto
   original (0–1) y el cálculo con cqw/cqh reproduce el escalado de cover. Si el navegador no
   tiene consultas de contenedor, queda la posición aproximada en %. */
.lp-bento > .lp-map { padding: 0; }

.lp-map-figure {
  position: relative;
  flex: 1 1 auto;
  min-height: 360px;
  margin: 0;
  container-type: size;
}

.lp-map-figure img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.lp-map-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 23, 18, 0) 55%, rgba(36, 23, 18, .35) 100%);
  pointer-events: none;
}

.lp-map-point {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  /* clamp: en tarjetas angostas el mentón queda al borde del recorte; el punto no debe salirse. */
  left: clamp(18px, 50cqw + (var(--x) - .5) * max(100cqw, 75.04cqh), 100cqw - 18px);
  top: calc(50cqh + (var(--y) - .5) * max(133.27cqw, 100cqh));
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(255 253 249 / .92);
  color: var(--lp-ink);
  font-size: .64rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px rgba(36, 23, 18, .3);
  transform: translate(-50%, -50%);
}

.lp-map-figure figcaption {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 14px;
  left: 16px;
  color: rgba(255, 253, 249, .92);
  font-size: .7rem;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(36, 23, 18, .5);
}

/* La cifra va arriba a la izquierda, sobre la pared lisa de la foto: abajo taparía el mentón y
   la mandíbula, que son dos de los cuatro puntos. */
.lp-map-stat {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  width: min(62%, 200px);
  padding: 12px 14px 13px;
  border: 1px solid rgba(255, 253, 249, .6);
  border-radius: 16px;
  background: rgb(255 253 249 / .84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.lp-map-stat .lp-card-label { margin-bottom: 2px; }
.lp-map-stat .lp-stat-value { margin: 0; font-size: 2.3rem; }
.lp-map-stat .lp-stat-text { margin-top: 4px; font-size: .72rem; line-height: 1.4; }

/* ------------------------------------------------------------------ Línea de tiempo */

.lp-timeline {
  position: relative;
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Riel central; ::after es el tramo que se llena al hacer scroll (ver al final). */
.lp-timeline::before,
.lp-timeline::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--lp-line-strong);
}

.lp-timeline::after {
  background: var(--lp-gold);
  transform-origin: top;
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.lp-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: center;
}

.lp-step-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 50%;
  background: var(--lp-bg);
  box-shadow: 0 0 0 8px var(--lp-bg);
  font-size: .8rem;
  font-weight: 500;
}

.lp-step-card {
  grid-row: 1;
  grid-column: 1;
  padding: 24px 26px;
}

.lp-step-time {
  grid-row: 1;
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-left: 8px;
  color: var(--lp-gold-ink);
  font-size: .8rem;
  font-style: italic;
}

/* Rayita que une el tiempo con el nodo, como en la referencia. */
.lp-step-time::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--lp-line-strong);
}

.lp-step:nth-child(even) .lp-step-card { grid-column: 3; }

.lp-step:nth-child(even) .lp-step-time {
  grid-column: 1;
  justify-content: flex-end;
  padding: 0 8px 0 0;
  flex-direction: row-reverse;
}

.lp-step-card h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -.02em;
}

.lp-step-card p {
  margin: 10px 0 0;
  color: var(--lp-copy);
  font-size: .88rem;
  line-height: 1.65;
}

.lp-step-card img {
  width: 100%;
  height: auto;
  margin-top: 18px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: 18px;
}

.lp-step-card figure { margin: 0; }

.lp-step-card figcaption {
  margin-top: 8px;
  color: var(--lp-copy);
  font-size: .72rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ Precios */

.lp-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Dos gamas (rinomodelación): mismas tarjetas, centradas en vez de estirarse a tres columnas. */
.lp-prices--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}

.lp-price {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
}

.lp-price-from {
  margin: 12px 0 0;
  color: var(--lp-copy);
  font-size: .78rem;
}

.lp-price-amount {
  margin: 2px 0 0;
  font-size: clamp(2.5rem, 4vw, 3.3rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: 1;
}

.lp-price-amount small {
  margin-left: 4px;
  color: var(--lp-copy);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.lp-price-desc {
  margin: 18px 0 0;
  color: var(--lp-copy);
  font-size: .88rem;
  line-height: 1.6;
}

.lp-price-list {
  margin: auto 0 0;
  padding: 22px 0 0;
  list-style: none;
}

.lp-price-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--lp-line);
  font-size: .84rem;
}

.lp-price-list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-gold);
}

/* ------------------------------------------------------------------ Lo que sí / lo que no */

/* Dos bloques superpuestos en diagonal, como problema/solución en la referencia. */
.lp-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.lp-versus-card {
  position: relative;
  min-height: 360px;
  padding: clamp(32px, 4vw, 52px);
  border-radius: 56px;
}

.lp-versus-yes {
  background: var(--lp-card);
  box-shadow: var(--lp-shadow);
  border: 1px solid var(--lp-line);
}

.lp-versus-no {
  z-index: 1;
  margin: clamp(90px, 10vw, 140px) 0 0 -12%;
  background: rgba(36, 23, 18, .93);
  color: var(--lp-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -40px rgba(36, 23, 18, .6);
}

.lp-versus-card h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.lp-versus-no h3 { color: var(--lp-bg); }
.lp-versus-no .lp-card-label { color: var(--lp-gold-light); }

.lp-versus-card ul {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.lp-versus-card li {
  position: relative;
  padding-left: 26px;
  font-size: .9rem;
  line-height: 1.55;
}

.lp-versus-yes li { color: var(--lp-ink); }
.lp-versus-no li { color: rgba(251, 248, 242, .86); }

.lp-versus-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 500;
}

.lp-versus-yes li::before { content: "+"; color: var(--lp-ok-ink); }
.lp-versus-no li::before { content: "–"; color: var(--lp-gold-light); }

/* Tres puntos en escalera unidos por un conector punteado en codo (tarjetas de la referencia
   Facility Flow). El conector sale del centro del borde derecho de cada tarjeta y baja hasta el
   borde superior de la siguiente: como cada fila solo tiene una tarjeta, la altura de la fila es
   la de su tarjeta y los porcentajes del pseudo-elemento cuadran sin medir nada. */
.lp-points {
  --gap: 28px;
  --rgap: 46px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rgap) var(--gap);
  margin-top: clamp(56px, 7vw, 96px);
  padding: 0;
  list-style: none;
}

.lp-points li { padding: 26px 26px 24px; }

.lp-points li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(50% + var(--gap));
  height: calc(50% + var(--rgap));
  border-top: 1.5px dashed rgba(36, 23, 18, .3);
  border-right: 1.5px dashed rgba(36, 23, 18, .3);
  border-top-right-radius: 22px;
  pointer-events: none;
}

/* Nodo donde el conector sale de la tarjeta, en el color de "confirmado". */
.lp-points li:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 100%;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--lp-ok);
  border-radius: 50%;
  background: var(--lp-bg);
  transform: translate(-50%, -50%);
}

.lp-points .lp-zone-num { color: var(--lp-ok-ink); }

@media (min-width: 901px) {
  .lp-points li:nth-child(1) { grid-area: 1 / 1; }
  .lp-points li:nth-child(2) { grid-area: 2 / 2; }
  .lp-points li:nth-child(3) { grid-area: 3 / 3; }
}

.lp-points h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.015em;
}

.lp-points p {
  margin: 8px 0 0;
  color: var(--lp-copy);
  font-size: .85rem;
  line-height: 1.6;
}

.lp-related {
  max-width: 1000px;
  margin: 28px auto 0;
  padding: 22px 26px;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-band);
}

.lp-related p {
  margin: 0;
  color: var(--lp-copy);
  font-size: .86rem;
  line-height: 1.7;
}

.lp-related p + p { margin-top: 10px; }
.lp-related strong { color: var(--lp-ink); font-weight: 500; }
.lp-related a,
.lp-faq a { color: var(--lp-ink); text-decoration-color: var(--lp-gold); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Especialista */

.lp-doctor {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: 14px;
}

.lp-doctor-photo {
  overflow: hidden;
  height: 100%;
  max-height: 660px;
  border-radius: 20px;
}

.lp-doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.lp-doctor-copy { padding: clamp(18px, 3vw, 40px) clamp(14px, 3vw, 36px) clamp(18px, 3vw, 40px) 0; }

.lp-doctor-copy h3 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.lp-doctor-intro {
  max-width: 52ch;
  margin: 16px 0 0;
  color: var(--lp-copy);
  font-size: .95rem;
  line-height: 1.7;
}

.lp-creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
}

.lp-creds div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--lp-band);
}

.lp-creds dt { color: var(--lp-copy); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.lp-creds dd { margin: 0; font-size: 1.05rem; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Tarjeta redondeada completa, sin barra lateral: mismo lenguaje que el resto de la página. */
.lp-quote {
  margin: 22px 0 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(243, 237, 227, .7);
}

.lp-quote blockquote {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.55;
}

.lp-quote cite {
  display: block;
  margin-top: 10px;
  color: var(--lp-copy);
  font-size: .76rem;
  font-style: normal;
}

.lp-doctor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* ------------------------------------------------------------------ Opiniones */

.lp-reviews {
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 18px;
  list-style: none;
}

/* El texto arranca debajo del número (padding superior): encima de él, el número competía con
   la primera línea de la reseña. */
.lp-review {
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 64px 26px 24px;
  overflow: hidden;
}

/* Número grande tenue en la esquina, como las tarjetas de entrevistas de la referencia. */
.lp-review-num {
  position: absolute;
  top: 10px;
  right: 18px;
  color: rgba(36, 23, 18, .07);
  font-size: 3.4rem;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
}

.lp-review blockquote {
  position: relative;
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.lp-review footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.lp-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--lp-band-deep);
  color: var(--lp-ink);
  font-size: .9rem;
  font-weight: 500;
}

.lp-review cite {
  display: grid;
  gap: 2px;
  font-size: .82rem;
  font-style: normal;
  font-weight: 500;
}

.lp-review cite span { color: var(--lp-copy); font-size: .7rem; font-weight: 400; }

/* ------------------------------------------------------------------ Preguntas */

.lp-faq {
  display: grid;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}

.lp-faq details {
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  background: var(--lp-card);
  transition: box-shadow .2s var(--lp-ease);
}

.lp-faq details[open] { box-shadow: var(--lp-shadow); }

.lp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.4;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary > span {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 50%;
}

.lp-faq summary > span::before,
.lp-faq summary > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--lp-ink);
  transform: translate(-50%, -50%);
  transition: transform .25s var(--lp-ease);
}

.lp-faq summary > span::after { transform: translate(-50%, -50%) rotate(90deg); }
.lp-faq details[open] summary > span::after { transform: translate(-50%, -50%) rotate(0); }

.lp-faq-body { padding: 0 24px 24px; }

.lp-faq-body p {
  max-width: 72ch;
  margin: 0;
  color: var(--lp-copy);
  font-size: .9rem;
  line-height: 1.75;
}

.lp-faq-body p + p,
.lp-faq-body .lp-mini-prices + p { margin-top: 14px; }

.lp-mini-prices {
  display: grid;
  gap: 1px;
  margin: 16px 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--lp-line);
  list-style: none;
}

.lp-mini-prices li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--lp-band);
  font-size: .86rem;
}

.lp-mini-prices b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lp-mini-prices small {
  display: block;
  margin-top: 2px;
  color: var(--lp-copy);
  font-size: .76rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ Franja de llamada */

/* Píldora de cristal oscuro sobre una fotografía (referencia: barra translúcida sobre foto, con
   el logotipo redondo a la izquierda y el botón blanco a la derecha). La foto va en ::before con
   un modificador por instancia; sin modificador queda cacao con el brillo cobre, que es lo que
   ve /rinomodelacion. */
.lp-cta-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: clamp(40px, 5vw, 60px);
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(255, 253, 249, .14);
  border-radius: 999px;
  background: var(--lp-ink);
  color: var(--lp-bg);
  box-shadow: 0 34px 70px -38px rgba(36, 23, 18, .7);
}

.lp-cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center 40%;
  background-size: cover;
  opacity: .8;
}

.lp-cta-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 160% at 100% 50%, rgb(var(--lp-aura-1) / .42), transparent 70%),
    radial-gradient(40% 140% at 0% 50%, rgb(var(--lp-aura-2) / .18), transparent 70%),
    linear-gradient(90deg, rgba(36, 23, 18, .9) 0%, rgba(36, 23, 18, .76) 50%, rgba(36, 23, 18, .5) 100%);
}

.lp-cta-strip--proceso::before { background-image: url("assets/images/services/proceso-armonizacion-750w.webp"); }
.lp-cta-strip--producto::before { background-image: url("assets/images/services/armonizacion-acido-hialuronico-750w.webp"); }

.lp-cta-copy {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lp-cta-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 249, .28);
  border-radius: 50%;
  background: #080808;
  box-shadow: 0 0 0 5px rgba(255, 253, 249, .06);
}

.lp-cta-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.lp-cta-strip p { margin: 0; max-width: 52ch; font-size: .94rem; line-height: 1.45; }
.lp-cta-strip > p { padding-left: 14px; }
.lp-cta-strip p span { display: block; color: rgba(251, 248, 242, .72); font-size: .84rem; }

.lp-cta-strip .lp-btn { min-height: 54px; padding-inline: 26px 22px; }
.lp-cta-strip .lp-btn svg { width: 14px; height: 14px; transition: transform .2s var(--lp-ease); }
.lp-cta-strip .lp-btn:hover svg { transform: translate(2px, -2px); }

/* ------------------------------------------------------------------ Reserva */

.lp-page .booking {
  background: var(--lp-band);
}

.lp-page .booking-shell {
  width: min(1200px, calc(100% - 40px));
  padding-block: clamp(84px, 9vw, 130px);
}

.lp-page .booking-form-slot {
  max-width: 1080px;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-card);
  box-shadow: var(--lp-shadow);
}

/* Cuando el formulario se muda al diálogo, la tarjeta vacía no debe quedar como un marco hueco. */
.lp-page .booking-form-slot:empty { display: none; }

.lp-page .booking-heading-compact { max-width: 720px; }

/* styles.css pinta todo <p> del encabezado de la reserva en gris y a .85rem; la etiqueta vuelve
   a su estilo de sección. */
.lp-page .booking-heading-compact .lp-kicker {
  margin: 0 0 14px;
  color: var(--lp-gold-ink);
  font-size: .7rem;
}

.lp-page .booking-heading-compact h2 {
  font-size: clamp(2.2rem, 4.3vw, 3.7rem);
  font-weight: 300;
  letter-spacing: -.035em;
}

.lp-booking-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.lp-booking-facts li {
  padding: 7px 14px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  background: var(--lp-card);
  color: var(--lp-ink);
  font-size: .76rem;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ Movimiento */

@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes lp-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes lp-fill { to { opacity: 1; transform: translateX(-50%) scaleY(1); } }

@media (prefers-reduced-motion: no-preference) {
  .lp-float { animation: lp-float 6s ease-in-out infinite; }
  .lp-float--b { animation-delay: -2s; }
  .lp-float--c { animation-delay: -4s; }

  /* Entrada al hacer scroll sin JavaScript: animaciones ligadas a la vista donde el navegador
     las soporta. Donde no, el contenido simplemente ya está visible. */
  @supports (animation-timeline: view()) {
    .lp-reveal {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    .lp-timeline::after {
      animation: lp-fill linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 70%;
    }
  }
}

/* ------------------------------------------------------------------ Adaptación */

@media (max-width: 1080px) {
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-bento-tall { grid-row: auto; grid-column: 1 / -1; min-height: 240px; }
  /* A todo el ancho, el retrato a 3:4 mediría más de 1000px de alto: foto a la izquierda y la
     cifra al lado, fuera de la foto. */
  .lp-bento > .lp-map { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: end; }
  .lp-map-figure { min-height: 0; aspect-ratio: 526 / 701; }
  .lp-map-stat { position: static; width: auto; margin: 0 32px 32px; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp-map-stat .lp-stat-value { font-size: clamp(3.4rem, 8vw, 4.8rem); }
  .lp-map-stat .lp-stat-text { font-size: .88rem; }
  .lp-reviews { columns: 2; }
}

@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-hero h1 { max-width: 16ch; }
  .lp-hero-visual { padding-inline: 8px; }
  .lp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .lp-kpis div:nth-child(3) { padding-left: 0; border-left: 0; }
  .lp-cases,
  .lp-prices,
  .lp-points { grid-template-columns: 1fr; }
  .lp-doctor { grid-template-columns: 1fr; }
  .lp-doctor-photo { max-height: 460px; }
  .lp-doctor-copy { padding: 8px 12px 20px; }

  /* La línea de tiempo pasa a un riel a la izquierda y el tiempo entra en la tarjeta. */
  .lp-timeline::before,
  .lp-timeline::after { left: 28px; }

  .lp-step,
  .lp-step:nth-child(even) {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .lp-step-node { grid-column: 1; }

  .lp-step-card,
  .lp-step:nth-child(even) .lp-step-card { grid-column: 2; grid-row: 2; }

  .lp-step-time,
  .lp-step:nth-child(even) .lp-step-time {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-content: flex-start;
    flex-direction: row;
    padding: 0;
    margin-bottom: 10px;
  }

  .lp-step-time::before { width: 20px; }

  .lp-versus { grid-template-columns: 1fr; }
  .lp-versus-card { min-height: 0; border-radius: 40px; }
  .lp-versus-no { margin: -28px 0 0 8%; }

  /* Puntos apilados: el conector pasa a un tramo vertical entre tarjeta y tarjeta. */
  .lp-points { --rgap: 34px; }

  .lp-points li:not(:last-child)::after {
    left: 38px;
    top: 100%;
    width: 0;
    height: var(--rgap);
    border: 0;
    border-left: 1.5px dashed rgba(36, 23, 18, .3);
    border-radius: 0;
  }

  .lp-points li:not(:last-child)::before { left: 38px; top: calc(100% + var(--rgap) / 2); }
}

@media (max-width: 640px) {
  .lp-shell,
  .lp-page .booking-shell { width: calc(100% - 32px); }
  .lp-section { padding-block: 72px; }
  .lp-hero { padding-top: 104px; }
  .lp-hero h1 { font-size: clamp(2.5rem, 11vw, 3.3rem); }
  .lp-hero-actions .lp-btn { flex: 1 1 100%; }
  .lp-offer-pill { font-size: .76rem; }
  .lp-float { min-width: 0; padding: 10px 13px; border-radius: 14px; }
  .lp-float strong { font-size: .92rem; }
  .lp-float--a { top: 8%; left: 0; }
  .lp-float--b { top: 66%; right: 0; }
  /* En móvil no hay margen a los lados del reel: la tercera tarjeta caería sobre el rostro. */
  .lp-float--c { display: none; }
  .lp-reel { width: min(100%, 290px); }
  .lp-kpis dd { font-size: 1.35rem; }
  .lp-head { padding-left: 20px; }
  .lp-head h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .lp-badge { min-width: 40px; height: 28px; margin-left: 8px; vertical-align: .35em; }
  .lp-bento { grid-template-columns: 1fr; }
  .lp-bento > .lp-map { display: block; }
  .lp-map-stat { position: absolute; width: min(62%, 200px); margin: 0; padding: 12px 14px 13px; border: 1px solid rgba(255, 253, 249, .6); background: rgb(255 253 249 / .84); }
  .lp-map-stat .lp-stat-value { font-size: 2.3rem; }
  .lp-map-stat .lp-stat-text { font-size: .72rem; }
  .lp-case { padding: 14px 14px 16px; }
  .lp-compare { aspect-ratio: 4 / 5; }
  .lp-case-photos img { border-radius: 14px; }
  /* Riel más delgado: con el nodo de 56px las tarjetas quedaban en ~230px de texto. */
  .lp-timeline::before,
  .lp-timeline::after { left: 20px; }

  .lp-step,
  .lp-step:nth-child(even) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }

  .lp-step-node { width: 40px; height: 40px; font-size: .72rem; box-shadow: 0 0 0 6px var(--lp-bg); }
  .lp-step-card { padding: 20px 18px; }

  .lp-versus-card { padding: 30px 26px; border-radius: 32px; }
  .lp-versus-no { margin: -22px 0 0 6%; }
  .lp-reviews { columns: 1; }
  .lp-cta-strip { padding: 24px; border-radius: 28px; }
  .lp-cta-strip .lp-btn { width: 100%; }
  .lp-faq summary { padding: 18px 18px; font-size: .95rem; }
  .lp-faq-body { padding: 0 18px 20px; }
  .lp-page .booking-form-slot { padding: 14px; border-radius: 20px; }
}

/* Celular: la píldora de calificación medía 28px (difícil de tocar) y las etiquetas de las
   tarjetas flotantes quedaban en 9.6px. */
@media (max-width: 640px) {
  a.lp-rating { min-height: 40px; padding-block: 10px; }
  .lp-float span { font-size: .7rem; }
  .lp-card-label { font-size: .7rem; }
}

/* Un tercer caso queda solo en la segunda fila: se centra en vez de pegarse a la izquierda. */
@media (min-width: 901px) {
  .lp-cases > .lp-case:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}