/* Landing REGEN de Luhdeline con la guía de marca de Lucía (23-oct-2026): Neue Montreal (Regular
   el texto, Medium los títulos, archivos que pasó la clienta), negro #2b2b2b, blanco, cereza #773f55
   para resaltar y botones, beige claro #eceae5 para fondos y letra sobre negro, botones rectos en
   mayúsculas. */

@font-face { font-family: "Neue Montreal"; src: url("../fuentes/neue-montreal-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../fuentes/neue-montreal-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../fuentes/neue-montreal-medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("../fuentes/neue-montreal-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --texto: #2b2b2b;
  --texto-suave: #2b2b2b;
  --fondo: #fff;
  --fondo-alt: #eceae5;
  --oscuro: #2b2b2b;
  --gris: #2b2b2b;
  --negro: #2b2b2b;
  --beige: #eceae5;
  --acento: #773f55;
  --acento-hover: #5e3143;
  --whatsapp: #773f55;
  --whatsapp-hover: #5e3143;
  --borde: #eceae5;
  --hueco: #eceae5;
  --hueco-texto: #2b2b2b;
  --radio: 0;
  --fuente-titulos: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --fuente-ui: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul { margin: 0; }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
img { display: block; max-width: 100%; height: auto; }
ul { padding: 0; list-style: none; }

.contenedor {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.seccion { padding-block: 5rem; }
.seccion--alt { background: var(--fondo-alt); }
.seccion--oscura { background: var(--oscuro); color: var(--beige); }

.titulo {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  font-weight: 500;
  line-height: 1.15;
}
.titulo--centro { text-align: center; }

.texto-suave {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.1875rem;
  color: var(--texto-suave);
}
.texto-suave strong { color: var(--texto); }

.pila { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }

.dos-columnas { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 768px) {
  .dos-columnas { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .dos-columnas > .pila { justify-content: center; }
  /* La foto mide lo que su columna vecina (texto o formulario): sale del flujo y la cubre */
  .dos-columnas > .foto { position: relative; min-height: 22rem; }
  .dos-columnas > .foto img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  /* Antes y después: entera, sin recortar sus etiquetas */
  .dos-columnas > .foto--entera { position: static; min-height: 0; align-self: center; }
  .dos-columnas > .foto--entera img { position: static; height: auto; }
}

/* Huecos grises donde irán las fotos */

.hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  background: var(--hueco);
  color: var(--hueco-texto);
  font-size: 0.875rem;
  text-align: center;
}
.hueco span { position: relative; z-index: 1; }
.r-4-5 { aspect-ratio: 4 / 5; }
.r-3-4 { aspect-ratio: 3 / 4; }
.r-2-3 { aspect-ratio: 2 / 3; }
.r-1-1 { aspect-ratio: 1 / 1; }

.foto {
  overflow: hidden;
  border-radius: var(--radio);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }

/* Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--acento);
  color: #fff;
  font-family: var(--fuente-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s;
}
.boton:hover { background: var(--acento-hover); }
.boton:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

.boton--claro { background: var(--acento); color: #fff; }
.boton--blanco { background: #fff; color: var(--texto); }
.boton--blanco:hover { background: var(--beige); }
.boton--linea { background: transparent; border-color: currentColor; color: inherit; }
.boton--linea:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton--claro:hover { background: var(--acento-hover); }

.boton--whatsapp { background: var(--whatsapp); transition: background-color 0.2s, transform 0.2s; }
.boton--whatsapp:hover { background: var(--whatsapp-hover); transform: scale(1.03); }

/* Iconos (Tabler, en el sprite del HTML) */

.icono {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero: copia de consulta.luhdeline.com (medido el 26-oct): foto a pantalla completa oscurecida,
   80 % del alto de la pantalla, logo de 64 px a 32 px del título, título de 36 a 60 px en negrita,
   subtítulo fino de 20 a 24 px, 24 px entre bloques y botón blanco redondeado de 18 px */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 80vh;
  overflow: hidden;
  background: var(--oscuro);
  color: #fff;
  text-align: center;
}
.hero__fondo { position: absolute; inset: 0; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 768px) {
  /* En horizontal la foto vertical se recorta mucho: encuadre en las manos, el dermógrafo y la clienta */
  .hero__fondo img { object-position: 50% 40%; }
}
.hero__fondo::after { content: ""; position: absolute; inset: 0; background: rgb(43 43 43 / 0.6); }
.hero__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-block: 3rem;
}
.hero__logo { width: auto; height: 64px; margin-bottom: 0.5rem; }
.hero h1 {
  max-width: 56rem;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}
/* «biotecnología regenerativa» sobre un bloque cereza, para que destaque sobre la foto */
.resalte {
  background: var(--acento);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.18em 0.04em;
}
.hero p {
  max-width: 56rem;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.35;
  color: #fff;
}
.hero .boton--blanco {
  min-height: 3rem;
  padding: 0.6rem 2rem;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.hero .boton--blanco:hover { background: var(--beige); }

/* Barra de autoridad bajo el hero: en escritorio, cuatro datos con icono; en móvil, una cinta con
   icono que se desplaza sola hacia la derecha (la lista va duplicada para que el bucle no salte) */

.autoridad { overflow: hidden; padding-block: 0.8rem; background: var(--negro); color: var(--beige); border-top: 1px solid rgb(236 234 229 / 0.12); }
.autoridad__pista { display: flex; width: max-content; animation: autoridad-derecha 22s linear infinite; }
.autoridad ul { display: flex; gap: 2.25rem; width: auto; max-width: none; margin: 0; padding-inline: 1.125rem; }
.autoridad li { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.875rem; font-weight: 500; }
.autoridad .icono { width: 1.125rem; height: 1.125rem; color: var(--beige); }
@keyframes autoridad-derecha { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .autoridad__pista { animation: none; }
  .autoridad { overflow-x: auto; }
}
@media (min-width: 768px) {
  .autoridad { padding-block: 2rem; }
  .autoridad__pista { display: block; width: auto; animation: none; }
  .autoridad__copia { display: none !important; }
  .autoridad ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1rem; }
  .autoridad li { flex-direction: column; gap: 0.6rem; white-space: normal; text-align: center; font-size: 1rem; }
  .autoridad .icono { width: 2rem; height: 2rem; }
}

/* El problema: en escritorio, el texto a la izquierda y los dos resultados apilados a la derecha
   (columna algo más estrecha para que las dos fotos midan lo mismo que el texto) */

.problema { display: grid; gap: 2.5rem; }
/* Las dos fotos: apiladas en escritorio y una al lado de la otra en móvil y tableta */
.problema__pista { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (min-width: 900px) {
  .problema { grid-template-columns: 3fr 2fr; gap: 4rem; align-items: center; }
  .problema__pista { grid-template-columns: 1fr; gap: 1rem; }
}
.problema__fotos img { width: 100%; height: auto; }
/* Móvil y tableta: título, después las fotos y por último el texto */
@media (max-width: 899px) {
  .problema { gap: 1.5rem; }
  .problema__texto { display: contents; }
  .problema__texto > .titulo { order: 1; }
  .problema__fotos { order: 2; }
  .problema__texto > :not(.titulo) { order: 3; }
  .problema__texto > .boton { justify-self: start; }
}

/* Formulario */

.formulario { gap: 3rem; }
.formulario__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.formulario__tarjeta h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
/* Junto al formulario de arriba: foto solo en escritorio (en móvil sobraba) y, debajo, lo que
   incluye la valoración, la garantía y las plazas limitadas */
.foto--solo-escritorio { display: none; }
@media (min-width: 768px) { .foto--solo-escritorio { display: block; } }
.oferta { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3.5rem; }
.oferta__lista { display: grid; gap: 1rem 3rem; font-size: 1.125rem; }
@media (min-width: 768px) { .oferta__lista { grid-template-columns: repeat(2, 1fr); } }
.oferta__lista li { position: relative; padding-left: 1.75rem; }
.oferta__lista li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6rem; height: 0.6rem; background: var(--acento); }
.garantia { padding: 1rem 1.25rem; border-left: 3px solid var(--acento); background: #fff; font-size: 1.0625rem; }
.escasez { color: var(--acento); font-size: 0.9375rem; font-weight: 500; }
.escasez--centro { margin-top: -1.25rem; text-align: center; }
.garantia--centro { max-width: 46rem; margin-inline: auto; text-align: center; border-left: 0; border-top: 3px solid var(--acento); background: var(--fondo-alt); }

.formulario-final .formulario__tarjeta { max-width: 42rem; margin-inline: auto; }
.formulario__reserva { display: block; width: 100%; height: 32rem; border: 0; }

/* Lista con iconos */

.lista { display: flex; flex-direction: column; gap: 1rem; }
.lista h3 { font-size: 1.125rem; }
.lista ul { display: flex; flex-direction: column; gap: 0.75rem; }
.lista li { display: flex; align-items: flex-start; gap: 0.75rem; }
.lista .icono { margin-top: 0.15rem; color: var(--acento); }

/* "Por qué": en móvil el texto va primero, en escritorio la foto a la izquierda */
@media (min-width: 768px) {
  .invertido > :first-child { order: 2; }
}

/* Carrusel de antes y después */

.resultados { display: flex; flex-direction: column; gap: 3rem; }
.carrusel { position: relative; width: 100%; max-width: 64rem; margin-inline: auto; }
.carrusel__pista {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: center;
  padding: 0.25rem;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__item {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--radio);
  align-self: center;
}
.carrusel__item img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .carrusel__item { flex-basis: calc((100% - 1rem) / 2); }
}
@media (min-width: 1024px) {
  .carrusel__item { flex-basis: calc((100% - 2rem) / 3); }
}
.carrusel__etiqueta {
  position: absolute;
  top: 1rem;
  z-index: 1;
  padding: 0.25rem 0.75rem;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.carrusel__etiqueta--antes { left: 1rem; }
.carrusel__etiqueta--despues { right: 1rem; }
.carrusel__boton {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: #fff;
  color: var(--texto);
  cursor: pointer;
  transform: translateY(-50%);
}
.carrusel__boton:hover { background: var(--fondo-alt); }
.carrusel__boton .icono { width: 1rem; height: 1rem; }
.carrusel__boton--prev { left: 0.5rem; }
.carrusel__boton--next { right: 0.5rem; }
@media (min-width: 72rem) {
  .carrusel__boton--prev { left: -3rem; }
  .carrusel__boton--next { right: -3rem; }
}
.centro { text-align: center; }
.nota { margin-top: -1.5rem; color: var(--texto-suave); font-size: 0.9375rem; text-align: center; }

/* El proceso en 4 pasos */

.proceso { display: flex; flex-direction: column; gap: 3rem; }
.pasos { display: grid; gap: 2rem; padding: 0; list-style: none; }
@media (min-width: 640px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.pasos li { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid var(--texto); }
.pasos__numero { color: var(--acento); font-size: 2.25rem; font-weight: 700; line-height: 1; }
.pasos h3 { font-size: 1.25rem; }
.pasos p { color: var(--texto-suave); }

/* Reseñas de Google */

.resenas { display: flex; flex-direction: column; gap: 2.5rem; }
.resenas__lista { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .resenas__lista { grid-template-columns: repeat(2, 1fr); } }
.resena { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 1.75rem; background: var(--fondo-alt); }
.resena__estrellas { color: var(--acento); letter-spacing: 0.15em; }
.resena blockquote { margin: 0; font-size: 1.0625rem; }
.resena figcaption { font-size: 0.875rem; font-weight: 500; }
.resena a, .enlace { color: var(--acento); text-underline-offset: 3px; }

/* Vídeos de clientas */

.videos { display: flex; flex-direction: column; gap: 3rem; }
.videos__lista { display: grid; gap: 2rem; }
@media (min-width: 768px) {
  .videos__lista { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.video { display: flex; flex-direction: column; gap: 1rem; max-width: 18rem; width: 100%; margin-inline: auto; }
.video__marco {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--gris);
}
.video__marco video { width: 100%; height: 100%; object-fit: cover; }
.video__pendiente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  color: rgb(255 255 255 / 0.75);
  font-family: var(--fuente-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  border: 1px dashed rgb(255 255 255 / 0.35);
  margin: 0.75rem;
}
.video__pendiente .icono { width: 3rem; height: 3rem; color: var(--beige); }
.video figcaption { text-align: center; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

/* Sobre mí */

.sobre__nombre {
  color: var(--beige);
  font-family: var(--fuente-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.sobre__cabecera { display: flex; flex-direction: column; gap: 0.5rem; }
.sobre__texto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgb(236 234 229 / 0.78);
}
.sobre__texto strong { color: var(--beige); }
.sobre__foto { border: 0; }
.sobre__foto img { object-position: 64% 35%; }
/* Premios: banda blanca a todo el ancho, pegada al final de la sección oscura */
.seccion--con-logos { padding-bottom: 0; }
.logos {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
  padding: 1.5rem 1rem;
  background: #fff;
}
.logos img { width: min(100%, 52rem); height: auto; }

/* Preguntas frecuentes */

.faq { display: flex; flex-direction: column; gap: 3rem; max-width: 56rem; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover h3 { text-decoration: underline; }
.faq summary h3 { font-size: 1.0625rem; line-height: 1.4; text-align: left; }
.faq summary .icono { width: 1rem; height: 1rem; transition: transform 0.2s; }
.faq details[open] summary .icono { transform: rotate(180deg); }
.faq__respuesta { padding-bottom: 1rem; color: var(--texto-suave); }

/* Pie */

.pie { padding-block: 5rem; background: var(--negro); color: var(--beige); }
.pie__columnas {
  display: grid;
  gap: 3rem;
  text-align: center;
}
@media (min-width: 768px) {
  .pie__columnas { grid-template-columns: repeat(2, 1fr); text-align: left; }
}
.pie__columna { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) {
  .pie__columna { align-items: flex-start; }
}
.pie__logo { width: 11rem; height: auto; }
.pie__columna p, .pie__columna ul { color: rgb(236 234 229 / 0.72); }
.pie__titulo { font-size: 1.125rem; }
.pie__contacto { display: flex; flex-direction: column; gap: 1rem; }
.pie__contacto li { display: flex; align-items: center; gap: 0.75rem; }
.pie__contacto .icono { color: var(--beige); }
.pie__contacto a { color: inherit; text-decoration: none; }
.pie__contacto a:hover { color: var(--beige); }
.pie__legal {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: rgb(236 234 229 / 0.5);
  font-size: 0.875rem;
  text-align: center;
}
.pie__legal p + p { margin-top: 1rem; max-width: 42rem; margin-inline: auto; }

/* Página de gracias */

.gracias {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  text-align: center;
}
.gracias__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 42rem;
}
.gracias__logo { width: 11rem; height: auto; margin-bottom: 1rem; padding: 1.25rem; background: var(--oscuro); }
.gracias h1 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.1;
}
.gracias__texto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  color: var(--texto-suave);
}
.gracias__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 5rem;
  color: var(--texto-suave);
  font-size: 0.875rem;
}
.gracias__pie img { width: 6rem; height: auto; padding: 0.5rem; background: var(--oscuro); }
.gracias__pie a, .pie__legal a { color: inherit; text-underline-offset: 3px; }
.gracias__aviso { max-width: 32rem; font-size: 0.75rem; }

/* Móvil: espacios más ajustados */
@media (max-width: 767px) {
  .seccion { padding-block: 3.25rem; }
  .dos-columnas { gap: 2.5rem; }
  .pila { gap: 1.5rem; }
  .formulario__tarjeta { padding: 1.5rem 1rem; gap: 1.25rem; }
  .oferta { margin-top: 2.5rem; }
  .resultados, .proceso, .resenas, .faq { gap: 2rem; }
  .garantia--centro { padding: 1rem; }
  .pie { padding-block: 3.5rem; }
  .pie__legal { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}