/* ==========================================================================
   INTRO EDITORIAL
   ========================================================================== */
.bp-intro {
  padding: 88px 32px 80px;
  background: var(--crema);
}

.bp-intro-inner { text-align: center; }

.bp-intro img {
  width: 46px;
  height: 41px;
  margin-bottom: 26px;
}

.bp-intro p {
  font-family: var(--font-serif);
  font-size: var(--fs-intro);
  line-height: 1.4;
  color: var(--tinta);
  margin: 0;
  font-weight: var(--fw-serif);
}

/* ==========================================================================
   MOMENTO CINE (full-bleed, componente 5)
   ========================================================================== */
.bp-momento {
  position: relative;
  height: 82vh;
  min-height: 520px;
  max-height: 760px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.bp-momento > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  animation: bpZoom var(--zoom-dur-momento) ease-in-out infinite alternate;
}

.bp-momento-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--velo-noche), 0.86) 0%, rgba(var(--velo-noche), 0.15) 44%, rgba(var(--velo-noche), 0) 72%);
}

.bp-momentoinner {
  position: relative;
  z-index: 2;
  padding: 0 30px 52px;
}

.bp-momento-raya {
  width: 34px;
  height: 1px;
  background: var(--oro-500);
  margin-bottom: 20px;
}

.bp-momentoinner p {
  font-family: var(--font-serif);
  font-size: var(--fs-cita);
  line-height: var(--lh-titular-alt);
  color: var(--blanco-foto);
  margin: 0;
  text-shadow: var(--sombra-cita-foto);
  max-width: 340px;
}

/* ==========================================================================
   INTERTÍTULO
   ========================================================================== */
.bp-intertitulo {
  padding: 72px 32px 8px;
  background: var(--crema);
  text-align: center;
}

.bp-intertitulo-raya {
  width: 34px;
  height: 1px;
  background: var(--oro-500);
  margin: 0 auto 24px;
}

.bp-intertitulo p {
  font-family: var(--font-serif);
  font-size: var(--fs-intertitulo);
  line-height: 1.5;
  color: var(--texto-oscuro);
  margin: 0 auto;
  max-width: 400px;
}

/* ==========================================================================
   VENTANA ARCO THAI (Respiro, componente 6)
   ========================================================================== */
.bp-respiro {
  position: relative;
  background: var(--crema);
  padding: 44px 26px 68px;
  text-align: center;
}

.bp-arco {
  position: relative;
  height: 460px;
  max-width: 340px;
  margin: 0 auto;
  overflow: hidden;
}

.bp-arco > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: bpZoom var(--zoom-dur-arco) ease-in-out infinite alternate;
}

.bp-arco-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--velo-noche), 0.9) 0%, rgba(var(--velo-noche), 0.5) 32%, rgba(var(--velo-noche), 0.12) 58%, rgba(var(--velo-noche), 0) 78%);
}

.bp-arco-marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Pie del arco — jerarquía en tres tiempos aprobada por el cliente (jul 2026),
   desviación deliberada del prototipo. Este decía el saludo y su traducción en
   una sola línea ("Sawasdee · te damos la bienvenida"), que se partía dejando
   "BIENVENIDA" huérfana. Ahora cada función tiene su nivel: el glifo tailandés,
   su pronunciación y su significado. Mismas palabras, sin añadir texto. */
.bp-arco-pie {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 34px;
  z-index: 2;
}

/* El prototipo lo pedía en Cormorant, que no tiene ni un glifo tailandés: el
   saludo caía en la fuente del sistema y se veía distinto en cada dispositivo.
   Con --font-thai (Noto Serif Thai) el render es el mismo en todas partes. */
.bp-arco-thai {
  font-family: var(--font-thai);
  font-size: var(--fs-saludo);
  color: var(--oro-300);   /* #f0dfab del prototipo, variante de ruido absorbida */
  line-height: 1.15;       /* el tailandés apila marcas sobre y bajo la línea */
  margin-bottom: 10px;
  text-shadow: var(--sombra-thai);
}

.bp-arco-translit {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-saludo);
  color: var(--oro-500);   /* un punto por debajo del glifo: es la pronunciación */
  text-transform: uppercase;
  text-shadow: var(--sombra-thai-sub);
}

/* mismo filete dorado que abre el hero, el intertítulo y la tarjeta */
.bp-arco-raya {
  width: 44px;
  height: 1px;
  margin: 14px auto;
  background: linear-gradient(90deg, transparent, var(--oro-500), transparent);
}

.bp-arco-sig {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--titular-inv-2);
  text-shadow: var(--sombra-thai-sub);
}

/* ==========================================================================
   ¿POR QUÉ BAAN PHO?  ·  el argumento, delante de la carta de masajes
   --------------------------------------------------------------------------
   Antes vivía dentro de "El espacio", pero eran dos cosas distintas bajo un
   mismo título: por qué venir aquí y cómo es el local. El argumento sube
   delante de los masajes, que es donde el visitante decide; "El espacio"
   se queda donde estaba con sus fotos y su galería.
   Reutiliza la retícula de "El espacio" —texto a la izquierda, fotografía a
   la derecha— y el velo verde sobre foto de Deportiva y Tarjeta regalo, para
   que se lea como una sección hermana y no como un recurso nuevo.
   ========================================================================== */
.bp-porque {
  background: var(--salvia);
  padding: 80px 26px 72px;
}

.bp-porque-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-4xl);
  line-height: var(--lh-titular);
  margin: 0 0 18px;
  color: var(--tinta);
}

.bp-porque-entrada {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto);
  margin: 0;
}

/* La prueba: la fotografía de las medallas con el sello encima */
.bp-porque-figura {
  position: relative;
  margin: 30px 0 0;
  border-radius: var(--r-collage);
  overflow: hidden;
  box-shadow: var(--sombra-collage);
}

.bp-porque-figura img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.bp-porque-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--velo-verde), 0.94) 0%, rgba(var(--velo-verde), 0.72) 38%, rgba(var(--velo-verde), 0.18) 100%);
}

.bp-porque-sello {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 24px 26px;
}

/* El sello va sin marca ni filete: solo titular y pie. Aquí hubo dos estrellas
   —se leían como una nota de 2 sobre 5 teniendo las de Google en la misma
   sección— y luego un laurel, descartado por el cliente (jul 2026). */
.bp-porque-sello-titulo {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-titular-alt);
  color: var(--titular-inv);
}

/* En crema, no en oro: el oro de esta tarjeta se reserva para el enlace, que
   es lo único que se puede clicar. Misma jerarquía que Deportiva y Regalo. */
.bp-porque-sello-donde {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--texto-inv-2);
}

.bp-porque-sello-link {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--oro-200);
}

.bp-porque-sello-link:hover { color: var(--oro-100); }

/* Los tres motivos */
.bp-porque-lista {
  display: flex;
  flex-direction: column;
  margin-top: 34px;
}

.bp-porque-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--linea-salvia);
  align-items: baseline;
}

.bp-porque-item > span {
  font-family: var(--font-serif);
  font-size: var(--fs-mega-cat);
  color: var(--oliva);
  flex: none;
}

.bp-porque-item p {
  font-size: var(--fs-cuerpo-card);
  line-height: 1.6;
  color: var(--texto-oscuro);
  margin: 0;
}

.bp-porque-item strong { color: var(--tinta); }

/* La nota de Google: cierra el argumento con la voz de los clientes, sin
   adelantar la sección de reseñas (que sigue más abajo con las citas). */
.bp-porque-google {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  margin-top: 24px;
  color: var(--texto-2);
  border-top: 1px solid var(--linea-salvia);
  padding-top: 22px;
}

.bp-porque-google:hover { color: var(--tinta); }

.bp-porque-google-estrellas {
  color: var(--oro-700);
  letter-spacing: var(--ls-estrellas);
  flex: none;
}

.bp-porque-google strong {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-2xl);
  color: var(--tinta);
}

/* Siempre en su propia línea: la nota manda, el recuento la explica */
.bp-porque-google-total {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: var(--fs-sm);
}

/* ==========================================================================
   CARTA DE RITUALES (cards de masaje, componente 7)
   ========================================================================== */
.bp-rituales {
  background: var(--beige-2);
  padding: 80px 26px 72px;
  background-image: linear-gradient(rgba(var(--beige-2-rgb), 0.94), rgba(var(--beige-2-rgb), 0.94)), var(--trama-hojas);
  background-size: auto, 520px;
}

.bp-rituales-head { margin-bottom: 44px; }

.bp-rituales-head > span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--oro-700);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

.bp-rituales-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-cards);
  line-height: 1.06;
  margin: 14px 0 16px;
  color: var(--tinta);
}

/* El tope de ancho no es capricho: sin él este párrafo se estira con el
   contenedor y llega a 149 caracteres por línea, casi el doble de lo que se
   lee cómodo (60–90). Ya pasaba en el prototipo (136 a 1120px de ancho); al
   ensanchar el sitio solo se hizo más evidente. --contenedor-estrecho es el
   token que ya existía para esto, y que hasta ahora no usaba nadie. */
.bp-rituales-head p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--texto-2);
  margin: 0;
  max-width: var(--contenedor-estrecho);
}

/* card de masaje grande */
.bp-card {
  display: block;
  background: var(--blanco);
  border-radius: var(--r-card-masaje);
  overflow: hidden;
  color: var(--texto-oscuro);
  box-shadow: var(--sombra-card);
  margin-bottom: 24px;
}

.bp-card:hover { color: var(--texto-oscuro); }

.bp-card--ultima { margin-bottom: 40px; }

.bp-card-foto {
  height: 210px;
  overflow: hidden;
}

.bp-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bp-card-cuerpo { padding: 26px 26px 28px; }

.bp-card-cuerpo h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-card-titulo);
  margin: 0 0 8px;
  line-height: 1.1;
  color: var(--tinta);
}

.bp-card-cuerpo > p {
  font-size: var(--fs-cuerpo-card);
  line-height: 1.6;
  color: var(--texto-2);
  margin: 0 0 20px;
}

.bp-card-precios {
  display: flex;
  border-top: 1px solid var(--linea-card);
  padding-top: 16px;
}

.bp-card-precio {
  flex: 1;
  text-align: center;
}

.bp-card-precio--centro {
  border-left: 1px solid var(--linea-card);
  border-right: 1px solid var(--linea-card);
}

.bp-card-precio-tiempo {
  font-size: var(--fs-cuerpo-card);
  color: var(--texto-2);
  font-weight: var(--fw-fuerte);
  margin-bottom: 2px;
}

.bp-card-precio-valor {
  font-family: var(--font-serif);
  font-size: var(--fs-serif-27);
  color: var(--oro-700);
  font-weight: var(--fw-serif-fuerte);
}

/* bloque bienestar / signature */
.bp-bienestar-bloque {
  margin-top: 66px;
  padding-top: 44px;
  border-top: 1px solid var(--linea-beige);
}

.bp-bienestar-bloque > span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow-pie);
  color: var(--oro-700);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

.bp-bienestar {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 18px;
}

.bp-bienestar-texto { flex: 1; }

.bp-bienestar-texto h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-3xl);
  line-height: var(--lh-titular);
  margin: 0 0 12px;
  color: var(--tinta);
}

.bp-bienestar-texto p {
  font-size: var(--fs-cuerpo-panel);
  line-height: 1.65;
  color: var(--texto-2);
  margin: 0 0 16px;
  max-width: var(--contenedor-estrecho);   /* mismo motivo que el de arriba */
}

.bp-bienestar-desde {
  font-family: var(--font-serif);
  font-size: var(--fs-base-desktop);   /* 18px literal del prototipo */
  color: var(--tinta);
}

.bp-bienestar-desde span {
  color: var(--oro-700);
  font-weight: var(--fw-serif-fuerte);
}

.bp-bienestar-photo {
  width: 118px;
  flex: none;
  height: 200px;
  border-radius: var(--r-arco-mini);
  overflow: hidden;
  border: 1px solid var(--linea);
}

.bp-bienestar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* botón primario (componente 1) */
.bp-rituales-cta {
  text-align: center;
  margin-top: 56px;
}

/* ==========================================================================
   RECUPERACIÓN DEPORTIVA (foto de fondo velada + chips, componentes 8–9)
   ========================================================================== */
.bp-dep {
  background: var(--verde-bosque);
  padding: 80px 28px 76px;
  position: relative;
  overflow: hidden;
}

.bp-dep-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.bp-dep-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--velo-verde), 0.93) 0%, rgba(var(--velo-verde), 0.78) 100%);
}

.bp-dep-head {
  position: relative;
  z-index: 2;
}

.bp-dep-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-4xl);
  line-height: var(--lh-titular);
  margin: 0 0 20px;
  color: var(--titular-inv-2);
}

.bp-dep-head p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto-inv-2);
  margin: 0 0 36px;
  max-width: 340px;
}

.bp-dep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  position: relative;
  z-index: 2;
}

.bp-chip {
  border: 1px solid rgba(var(--oro-rgb), 0.45);
  color: var(--oro-200);
  font-size: var(--fs-sm);
  font-weight: var(--fw-fuerte);
  letter-spacing: var(--ls-nav);
  padding: 10px 18px;
  border-radius: var(--r-pastilla);
}

/* botón secundario sobre oscuro (componente 1) */
.bp-dep-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--oro-500);
  color: var(--oro-200);
  padding: 16px;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
  position: relative;
  z-index: 2;
}

.bp-dep-cta:hover { color: var(--oro-200); }

/* ==========================================================================
   EL ESPACIO (salvia + collage)
   ========================================================================== */
.bp-esp {
  background: var(--salvia);
  padding: 80px 26px 72px;
}

.bp-esp-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-4xl);
  line-height: var(--lh-titular);
  margin: 0 0 18px;
  color: var(--tinta);
}

/* Párrafo de cierre: va DESPUÉS del collage, no en la cabecera (orden pedido
   por el cliente: título → los tres puntos → fotos → este texto → botón). */
.bp-esp-cierre {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto);
  margin: 36px 0 0;
}

.bp-esp-collage { position: relative; }

.bp-esp-foto1 {
  border-radius: var(--r-card-masaje);
  overflow: hidden;
  box-shadow: var(--sombra-collage);
}

.bp-esp-foto1 img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.bp-esp-fila {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.bp-esp-foto2 {
  flex: 1.1;
  border-radius: var(--r-arco-collage);
  overflow: hidden;
  box-shadow: var(--sombra-collage);
  margin-top: -44px;
  border: 5px solid var(--salvia);
}

.bp-esp-foto2 img {
  width: 100%;
  height: 235px;
  object-fit: cover;
  display: block;
}

.bp-esp-foto3 {
  flex: 1;
  border-radius: var(--r-collage);
  overflow: hidden;
  box-shadow: var(--sombra-collage);
}

/* La foto va a 191px en el prototipo, pero su caja es un flex-item que se
   estira hasta los 201px de la foto de al lado (que sube con margin-top:-44px).
   Resultado en el diseño original: 10px de fondo salvia asomando por debajo,
   dentro de una caja con esquinas redondeadas. Corrección de un fallo del
   prototipo, aprobada por el cliente (jul 2026).

   Los 201px no son un número inventado: son los que hacen que los pies de las
   dos fotos coincidan, 235 de la imagen + 10 del borde − 44 que sube su caja.

   Aquí hubo antes un height:100%, que tapaba la franja pero traía un problema
   peor: sin altura definida en el padre, el 100% se resuelve como auto y la
   imagen pasaba a medir según su propia proporción, o sea a crecer con el
   ancho de la pantalla. A partir de ~1450px superaba a foto2, estiraba la fila
   y entonces era foto2 —clavada en 235px— la que dejaba asomar salvia: 55px en
   una pantalla de 1920. Con las dos alturas fijas, como en el prototipo, la
   fila mide lo mismo a cualquier ancho. */
.bp-esp-foto3 img {
  width: 100%;
  height: 201px;
  object-fit: cover;
  display: block;
}

.bp-esp-cta {
  text-align: center;
  margin-top: 36px;
}

/* ==========================================================================
   TARJETA REGALO
   ========================================================================== */
.bp-gift { background: var(--verde-noche); }

.bp-gift-img { position: relative; }

/* height:auto es obligatorio, no decorativo: la foto lleva width/height en el
   HTML (los pone el pase de optimización, para que el navegador reserve el
   hueco y no salte el layout). Sin height:auto, el atributo height="900" se
   aplica como altura de caja y la foto sale estirada en móvil. En desktop no
   pasaba porque allí se fija height:100% con object-fit:cover. */
.bp-gift-img img {
  width: 100%;
  height: auto;
  display: block;
}

.bp-gift-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--velo-regalo), 0.2), rgba(var(--velo-regalo), 0) 30%, rgba(var(--velo-regalo), 0) 72%, var(--verde-noche) 100%);
}

.bp-gift-text { padding: 34px 26px 64px; }

.bp-gift-caja {
  border: 1px solid rgba(var(--oro-rgb), 0.45);
  border-radius: var(--r-card);
  padding: 34px 28px;
}

.bp-gift-rule {
  width: 28px;
  height: 1px;
  background: var(--oro-500);
  display: none;
}

.bp-gift-eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--oro-300);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

.bp-gift-caja h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-gift);
  line-height: var(--lh-titular);
  margin: 14px 0 14px;
  color: var(--blanco-foto);
}

.bp-gift-caja p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--texto-regalo);
  margin: 0 0 26px;
}

/* botón dorado (variante del primario sobre verde noche) */
.bp-boton-oro {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--oro-500);
  color: var(--sobre-oro);
  padding: 17px;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}

.bp-boton-oro:hover { color: var(--sobre-oro); }

/* ==========================================================================
   RESEÑAS (carrusel, componente 10)
   ========================================================================== */
.bp-resenas {
  background: var(--crema);
  padding: 82px 30px 78px;
  text-align: center;
}

/* Abre la sección, como todas las demás de la home (jul 2026). Antes aquí iba
   la comilla decorativa, que ha bajado a introducir la cita: encima de las
   estrellas estaba decorando la valoración, no el testimonio. */
.bp-resenas-eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  color: var(--oro-700);
  margin-bottom: 22px;
}


.bp-resenas-estrellas {
  letter-spacing: var(--ls-estrellas);
  color: var(--oro-700);
  font-size: var(--fs-lg);
  margin-bottom: 10px;
}

.bp-resenas-nota {
  font-family: var(--font-serif);
  font-size: var(--fs-nota);
  line-height: 1;
  color: var(--oro-700);
  font-weight: var(--fw-serif-fuerte);
  margin: 6px 0 8px;
}

.bp-resenas-total {
  font-size: var(--fs-cta-compacta);
  letter-spacing: var(--ls-boton);
  color: var(--texto-meta);
  text-transform: uppercase;
  margin-bottom: 26px;
}

.bp-resenas-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 26px 0 30px;
}

.bp-resenas-flecha {
  width: 46px;
  height: 46px;
  border-radius: var(--r-circulo);
  border: 1.5px solid var(--linea-beige);   /* #dccfb0 del prototipo, absorbido */
  background: var(--blanco);
  color: var(--oro-700);
  font-size: var(--fs-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bp-resenas-puntos {
  display: flex;
  gap: 7px;
}

/* botón terciario: link uppercase subrayado (componente 1) */
.bp-link-cta {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  color: var(--tinta);
  border-bottom: 2px solid var(--oro-700);
  padding-bottom: 4px;
}

.bp-link-cta:hover { color: var(--tinta); }

/* ==========================================================================
   BLOG (3 cards)
   ========================================================================== */
.bp-blog {
  background: var(--crema);
  padding: 82px 26px 82px;
}

.bp-blog-head {
  text-align: center;
  margin-bottom: 38px;
}

.bp-blog-head > span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--oliva);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

.bp-blog-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-blog);
  line-height: 1.05;
  margin: 12px 0 0;
  color: var(--tinta);
}

.bp-blog-destacado {
  display: block;
  position: relative;
  border-radius: var(--r-card-masaje);
  overflow: hidden;
  margin-bottom: 30px;
  color: var(--blanco-foto);
  box-shadow: var(--sombra-card-foto);
}

.bp-blog-destacado:hover { color: var(--blanco-foto); }

.bp-blog-destacado img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.bp-blog-destacado-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--velo-noche), 0.82), rgba(var(--velo-noche), 0.05) 62%);
}

.bp-blog-destacado-texto {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
}

.bp-blog-cat {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-cta);
  color: var(--oro-200);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  margin-bottom: 8px;
}

.bp-blog-destacado h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-intro);
  margin: 0 0 6px;
  line-height: 1.12;
}

.bp-blog-leer {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  color: var(--oro-200);
}

.bp-blog-item {
  display: block;
  color: var(--texto-oscuro);
  padding: 22px 0;
  border-top: 1px solid var(--linea-suave);
}

.bp-blog-item:hover { color: var(--texto-oscuro); }

.bp-blog-item--ultimo {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linea-suave);
}

.bp-blog-meta {
  font-size: var(--fs-xs);
  color: var(--texto-meta);
  margin-bottom: 6px;
}

.bp-blog-item h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-mega-cat-desktop);   /* 23px literal del prototipo */
  margin: 0 0 8px;
  line-height: 1.15;
  color: var(--tinta);
}

.bp-blog-item .bp-blog-leer { color: var(--oro-700); }

.bp-blog-cta {
  text-align: center;
  margin-top: 34px;
}

/* ==========================================================================
   CONTACTO (salvia con mordida)
   ========================================================================== */
.bp-contacto {
  background: var(--salvia);
  border-radius: var(--r-mordida);
  padding: 72px 26px 60px;
  margin-top: var(--mordida-y);
  position: relative;
}

.bp-contacto h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-4xl);
  margin: 0 0 28px;
  color: var(--tinta);
  line-height: 1.05;
}

/* contenedor del mapa: mismas medidas/borde que el bloque del diseño;
   la trama rayada queda de fondo mientras carga el iframe de Google Maps */
.bp-contacto-mapa {
  height: 190px;
  border-radius: var(--r-card);
  background-image: repeating-linear-gradient(135deg, var(--salvia-raya-1) 0 14px, var(--salvia-raya-2) 14px 28px);
  border: 1px solid var(--salvia-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  overflow: hidden;
}

.bp-contacto-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.bp-contacto-filas {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.bp-contacto-fila {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--linea-salvia);
  padding-bottom: 14px;
}

.bp-contacto-fila > span:first-child {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-cta);
  color: var(--oliva);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  flex: none;
}

.bp-contacto-valor {
  font-size: var(--fs-cuerpo-card);
  color: var(--texto-oscuro);
  text-align: right;
}

a.bp-contacto-valor { font-weight: var(--fw-fuerte); }

a.bp-contacto-valor:hover { color: var(--texto-oscuro); }

.bp-contacto-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
   Desktop (helmet, líneas 97–146)
   ========================================================================== */
@media (min-width: 900px) {
.bp-intro,
  .bp-porque,
  .bp-rituales,
  .bp-esp,
  .bp-faq-seccion,
  .bp-resenas,
  .bp-blog,
  .bp-contacto {
    padding-left: max(6vw, calc((100% - var(--contenedor-texto)) / 2));
    padding-right: max(6vw, calc((100% - var(--contenedor-texto)) / 2));
  }
.bp-intro-inner {
    max-width: 820px;
    margin: 0 auto;
  }
.bp-intertitulo { padding: 104px 6vw 12px; }
.bp-intertitulo p {
    font-size: var(--fs-intertitulo-desktop);
    max-width: 660px;
  }
.bp-arco {
    max-width: 500px;
    height: 620px;
  }
/* el arco crece de 460 a 620px: el saludo sube con él para no perder
     presencia dentro del marco */
  .bp-arco-pie { bottom: 46px; }
.bp-arco-thai {
    font-size: var(--fs-saludo-desktop);
    margin-bottom: 14px;
  }
.bp-arco-raya { margin: 18px auto; }
.bp-arco-sig { font-size: var(--fs-lg-desktop); }
.bp-momento {
    height: 80vh;
    min-height: 520px;
  }
.bp-momento > img { object-position: center 62%; }
.bp-momento-velo {
    background: linear-gradient(to top, rgba(var(--velo-noche), 0.9) 0%, rgba(var(--velo-noche), 0.42) 34%, rgba(var(--velo-noche), 0) 64%);
  }
.bp-momentoinner {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw 72px;
  }
.bp-momentoinner p {
    font-size: var(--fs-cita-desktop);
    max-width: 620px;
  }
.bp-cards2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
  }
.bp-card,
  .bp-card--ultima { margin-bottom: 0; }
.bp-card-foto { height: 320px; }
.bp-bienestar {
    gap: 60px;
    align-items: center;
  }
.bp-bienestar-photo {
    width: 340px;
    height: 430px;
  }
.bp-dep { padding: 130px 60px 120px; }
.bp-dep-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
.bp-dep-head p { max-width: 520px; }
.bp-dep-bg { object-position: center 42%; }
.bp-dep-veil {
    background: linear-gradient(to right, rgba(var(--velo-verde), 0.96) 0%, rgba(var(--velo-verde), 0.88) 55%, rgba(var(--velo-verde), 0.72) 100%);
  }
.bp-dep-chips { max-width: 640px; }
.bp-dep-cta {
    display: inline-flex;
    width: fit-content;
    padding: 16px 42px;
    margin-left: calc(max(100% - 1200px, 0px) / 2);
  }
.bp-porque {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 76px;
    grid-template-areas: "head figura" "lista figura" "google figura";
    align-items: start;
  }
.bp-porque-head { grid-area: head; }
.bp-porque-lista { grid-area: lista; }
.bp-porque-google { grid-area: google; }
.bp-porque-figura {
    grid-area: figura;
    margin-top: 0;
  }
/* Misma altura que el collage de "El espacio" (330 + 14 − 44 + 245), para
   que las dos secciones hermanas tengan la misma mancha de fotografía. */
.bp-porque-figura img { height: 545px; }
/* La última fila se lleva 1fr: el collage es más alto que la columna de
   texto, y sin esto su altura se repartía entre las tres filas abriendo un
   hueco entre el titular y el párrafo. Así el sobrante cae bajo el botón. */
.bp-esp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 76px;
    grid-template-areas: "head collage" "cierre collage" "cta collage";
    grid-template-rows: min-content min-content 1fr;
    align-items: start;
  }
.bp-esp-head { grid-area: head; }
.bp-esp-collage { grid-area: collage; }

.bp-esp-cierre {
    grid-area: cierre;
    margin-top: 28px;
  }
.bp-esp-cta {
    grid-area: cta;
    text-align: left;
    margin-top: 28px;
  }
.bp-esp-foto1 img { height: 330px; }
.bp-gift {
    position: relative;
    display: block;
    padding: 0;
    min-height: 620px;
  }
.bp-gift-img {
    position: absolute;
    inset: 0;
    border-radius: 0;
    overflow: hidden;
  }
.bp-gift-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 28% 42%;
  }
.bp-gift-velo {
    background: linear-gradient(to right, rgba(var(--velo-regalo), 0) 0%, rgba(var(--velo-regalo), 0.18) 36%, rgba(var(--velo-regalo), 0.82) 62%, rgba(var(--velo-noche), 0.94) 100%);
  }
.bp-gift-text {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    min-height: 620px;
    align-items: center;
    padding: 0 max(6vw, calc((100% - var(--contenedor-texto)) / 2));
  }
.bp-gift-caja {
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: 440px;
  }
.bp-gift-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
  }
.bp-gift-rule { display: block; }
.bp-gift-caja h2 {
    font-size: var(--fs-cita-desktop);
    margin-top: 18px;
  }
.bp-gift-caja p { font-size: var(--fs-base-desktop); }
.bp-gift-caja .bp-boton-oro {
    width: fit-content;
    padding: 17px 40px;
  }
}