/* ==========================================================================
   BAAN PHO — ficha.css  ·  plantilla de masaje individual
   Valores de "Baan Pho - Masaje.dc.html" (style=, móvil) y su bloque
   @media (min-width:900px) del <helmet> (líneas 89–99, desktop).
   Incluye el selector de categorías (componente 12).
   ========================================================================== */

/* ---- Hero de ficha (foto estática, sin bpZoom) ---- */
.bp-fhero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  max-height: 680px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bp-fhero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-fhero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--velo-hero), 0.92) 0%, rgba(var(--velo-hero), 0.35) 50%, rgba(var(--velo-hero), 0.25) 100%);
}

.bp-fhero-inner {
  position: relative;
  z-index: 2;
  padding: 0 28px 44px;
}

.bp-fhero-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-cta);
  color: var(--oro-300);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  margin-bottom: 14px;
}
.bp-fhero-volver:hover { color: var(--oro-300); }

.bp-fhero-inner h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-h1-ficha);
  line-height: 1.05;
  margin: 0;
  color: var(--blanco-foto);
  text-shadow: var(--sombra-h1-ficha);
}

/* ---- Bloques estrechos ---- */
.bp-narrow--intro { padding: 60px 30px 40px; background: var(--crema); }
.bp-narrow--quees { padding: 20px 30px 56px; background: var(--crema); }
.bp-narrow--beneficios { padding: 60px 30px 56px; background: var(--salvia); }
.bp-narrow--sesion { padding: 60px 30px 56px; background: var(--crema); }

/* fila de precios — número VARIABLE de columnas (40/60/90, 60/90, 60/90/120) */
.bp-fprecios {
  display: flex;
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  padding: 20px 0;
}

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

/* columnas interiores separadas por línea a ambos lados (como el prototipo) */
.bp-fprecio + .bp-fprecio { border-left: 1px solid var(--linea-suave); }

.bp-fprecio-tiempo {
  font-size: var(--fs-md);
  color: var(--texto-2);
  font-weight: var(--fw-fuerte);
  margin-bottom: 3px;
}

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

.bp-fichacta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-bosque);
  color: var(--beige);
  padding: 18px;
  margin-top: 24px;
  font-size: var(--fs-cuerpo-card);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-fichacta:hover { color: var(--beige); }

.bp-fh2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-3xl);
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--tinta);
}

.bp-fparrafo {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto-2);
  margin: 0 0 16px;
}
.bp-fparrafo--ultimo { margin-bottom: 0; }

.bp-feyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow-pie);
  color: var(--oro-700);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  margin-bottom: 12px;
}
.bp-feyebrow--oliva { color: var(--oliva); }

/* ---- Imagen respiro ---- */
.bp-fresp {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.bp-fresp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Beneficios (lista ✻ sobre salvia) ---- */
.bp-fbeneficios { display: flex; flex-direction: column; }

.bp-fbeneficio {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--linea-salvia);
  align-items: baseline;
}
.bp-fbeneficio--ultimo { border-bottom: 1px solid var(--linea-salvia); }

.bp-fbeneficio > span {
  color: var(--oliva);
  font-family: var(--font-serif);
  font-size: var(--fs-base-desktop);   /* 18px literal del prototipo */
  flex: none;
}

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

/* ---- La sesión (pasos numerados) ---- */
.bp-fpasos { display: flex; flex-direction: column; }

.bp-fpaso {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--linea-suave);
}
.bp-fpaso--ultimo { border-bottom: 1px solid var(--linea-suave); }

.bp-fpaso-num {
  font-family: var(--font-serif);
  font-size: var(--fs-mega-cat);
  color: var(--oro-700);
  flex: none;
  width: 26px;
}

.bp-fpaso h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-logo);   /* 21px literal del prototipo */
  margin: 0 0 5px;
  color: var(--tinta);
  font-weight: var(--fw-serif-fuerte);
}

.bp-fpaso p {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--texto-2);
  margin: 0;
}

/* ---- FAQ de ficha (misma pieza que Home, sobre crema y H2 de 32px) ---- */
.bp-faq-seccion--ficha {
  background: var(--crema);
  padding: 66px 30px 60px;
}

.bp-faq-seccion--ficha .bp-faq-head > span { letter-spacing: var(--ls-eyebrow-pie); }
.bp-faq-seccion--ficha .bp-faq-head h2 { font-size: var(--fs-h2-faq-ficha); }

/* ---- CTA final sobre foto ---- */
.bp-catcta {
  position: relative;
  overflow: hidden;
}

.bp-catcta > img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.bp-encuadre-55 { object-position: center 55%; }

.bp-catcta-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--velo-hero), 0.9), rgba(var(--velo-hero), 0.15) 60%);
}

.bp-catcta-texto {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 40px;
  text-align: center;
}

.bp-catcta h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-faq-ficha);
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--blanco-foto);
  text-shadow: var(--sombra-h2-foto);
}

.bp-catcta-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--oro-500);
  color: var(--sobre-oro);
  padding: 16px 36px;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-catcta-boton:hover { color: var(--sobre-oro); }

/* ---- Selector de categorías (componente 12) ---- */
.bp-explora {
  padding: 60px 0 24px;
  background: var(--crema);
}

.bp-explora-head {
  padding: 0 30px;
  margin-bottom: 22px;
}

.bp-explora-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-card-titulo);
  line-height: 1.1;
  margin: 10px 0 0;
  color: var(--tinta);
}

.bp-explora-fila {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 30px 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(to right, transparent 0, var(--opaco) 26px, var(--opaco) calc(100% - 34px), transparent 100%);
  mask: linear-gradient(to right, transparent 0, var(--opaco) 26px, var(--opaco) calc(100% - 34px), transparent 100%);
}

.bp-explora-fila::-webkit-scrollbar { display: none; }

.bp-explora-pill {
  white-space: nowrap;
  border: 1px solid var(--linea);
  color: var(--tinta);
  font-size: var(--fs-sm);
  font-weight: var(--fw-fuerte);
  padding: 11px 18px;
  border-radius: var(--r-pastilla);
}
.bp-explora-pill:hover { color: var(--tinta); }

/* ==========================================================================
   Desktop (helmet, líneas 89–99)
   ========================================================================== */
@media (min-width: 900px) {
  .bp-fhero {
    height: 62vh;
    max-height: 660px;
  }

  .bp-fhero-inner {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw 60px;
  }

  .bp-fhero-inner h1 { font-size: var(--fs-h1-ficha-desktop); }

  .bp-narrow--intro,
  .bp-narrow--quees,
  .bp-narrow--beneficios,
  .bp-narrow--sesion,
  .bp-faq-seccion--ficha {
    padding-left: max(6vw, calc((100% - 800px) / 2));
    padding-right: max(6vw, calc((100% - 800px) / 2));
  }

  .bp-fresp { height: 480px; }

  .bp-fichacta {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 18px 60px;
  }

  .bp-catcta > img { height: 460px; }
  .bp-catcta h2 { font-size: var(--fs-h2-cards); }

  .bp-explora { padding: 64px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 24px; }
  .bp-explora-head { padding-left: 0; }

  /* el footer de esta plantilla es más compacto que el de Home */
  .bp-shell--ficha .bp-foot { padding: 72px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 48px; }
}

/* Frase de entrada de los beneficios (jul 2026). Viene de la web en producción,
   donde presenta la lista numerada: "Cada sesión actúa en múltiples niveles…". */
.bp-fben-intro {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto-2);
  margin: 0 0 30px;
}

/* El titular de estas dos secciones lleva una palabra en cursiva dorada
   ("Ideal para *personas que:*"), como en producción. */
.bp-fh2 em {
  font-style: italic;
  color: var(--oro-700);
}