/* ==========================================================================
   BAAN PHO — comun.css  ·  primitivas compartidas
   --------------------------------------------------------------------------
   Reglas que usan TODAS las páginas, extraídas de secciones.css: botones,
   eyebrows, textos destacados, acordeón de FAQ y bloques de reseñas.

   Antes vivían dentro de secciones.css, que se cargaba entera en las 65
   páginas aunque solo la home usara el 100%: el resto descargaba 1.300
   líneas para aprovechar el 6-11%. Ahora cada página carga esta hoja, y
   secciones.css solo la home.

   Se carga ANTES que secciones.css, así que el orden de cascada que tenía
   la home no cambia.
   ========================================================================== */

/* ==========================================================================
   BAAN PHO — secciones.css  ·  secciones de la Home (componentes 5–12)
   Valores de "Baan Pho - Home v4.dc.html", líneas 245–562 (style=, móvil) y
   bloque @media (min-width:900px) del <helmet> (líneas 97–146, desktop).
   ========================================================================== */

/* ---- Eyebrow con raya (patrón repetido) ---- */
.bp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.bp-eyebrow-raya {
  width: 26px;
  height: 1px;
  background: var(--oro-500);
  flex: none;
}

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

.bp-eyebrow--oliva .bp-eyebrow-raya { background: var(--oliva); }

.bp-eyebrow--oliva span:last-child { color: var(--oliva); }

/* palabra destacada sobre fondo claro */
.bp-destacada-clara {
  font-style: italic;
  color: var(--oro-700);
}

.bp-destacada-oliva {
  font-style: italic;
  color: var(--oliva);
}

/* encuadres de foto (la prop objectPosition de MasajeCard en el prototipo) */
.bp-encuadre-30 { object-position: center 30%; }

.bp-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-bosque);
  color: var(--beige);
  padding: 17px 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-boton:hover { color: var(--beige); }

.bp-destacada { font-style: italic; color: var(--oro-300); }

/* botón contorno sobre salvia (componente 1) */
.bp-boton-salvia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--linea-oliva);
  color: var(--tinta);
  background: var(--blanco);
  padding: 15px 32px;
  font-size: var(--fs-nav-compacta);
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}

.bp-boton-salvia:hover { color: var(--tinta); }

/* La altura reserva sitio para la reseña más larga y la cita se centra dentro.
   Así las flechas y los puntos no se mueven al pasar de una reseña a otra: si
   el bloque encogiera, el botón que acabas de pulsar se te iría de debajo del
   dedo. El diseño ya traía este patrón con 150px, medida para las 3 reseñas
   cortas del prototipo; con las 6 reales hacen falta 257 (jul 2026). */
.bp-resenas-cita {
  min-height: 257px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 350px;
  margin: 0 auto;
}

.bp-resenas-cita blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-serif-27);
  line-height: 1.4;
  color: var(--tinta);
  margin: 0 0 16px;
}

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

.bp-resenas-punto {
  width: 7px;
  height: 7px;
  border-radius: var(--r-circulo);
  background: var(--punto-inactivo);
}

.bp-resenas-punto.activo { background: var(--oro-700); }

/* ==========================================================================
   FAQ (componente 11)
   ========================================================================== */
.bp-faq-seccion {
  background: var(--beige-2);
  padding: 78px 30px 80px;
}

.bp-faq-head {
  text-align: center;
  margin-bottom: 34px;
}

.bp-faq-head > 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-faq-head h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-faq);
  line-height: 1.12;
  margin: 12px 0 0;
  color: var(--tinta);
}

details.bp-faq { border-top: 1px solid var(--linea-suave); }

details.bp-faq--ultima { border-bottom: 1px solid var(--linea-suave); }

details.bp-faq summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: var(--fs-shell);
  font-weight: var(--fw-fuerte);
  color: var(--tinta);
  list-style: none;
}

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

.bp-plus {
  color: var(--oro-700);
  font-size: var(--fs-xl);
  flex: none;
  transition: transform .3s ease;
}

details.bp-faq[open] .bp-plus { transform: rotate(45deg); }

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

.bp-contacto-reservar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--verde-bosque);
  color: var(--beige);
  padding: 18px;
  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-contacto-reservar:hover { color: var(--beige); }

.bp-contacto-botones {
  display: flex;
  gap: 12px;
}

.bp-contacto-boton {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--blanco);
  border: 1.5px solid var(--linea-salvia);   /* #b8c8ad del prototipo, absorbido */
  color: var(--tinta);
  padding: 15px;
  font-size: var(--fs-md);
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}

.bp-contacto-boton:hover { color: var(--tinta); }

/* ==========================================================================
   Desktop (helmet, líneas 97–146)
   ========================================================================== */
@media (min-width: 900px) {
.bp-faq-seccion > div,
  .bp-faq-seccion > details {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 900px) {
  /* La FAQ vive en la home y en Tarjetas Regalo. En secciones.css este
     padding venía agrupado con las secciones exclusivas de la home, así que
     al dejar de cargar esa hoja las demás páginas lo perdían. */
  /* en desktop la cita es más ancha y la reseña larga cabe en menos líneas */
  .bp-resenas-cita { min-height: 219px; }

  .bp-faq-seccion {
    padding-left: max(6vw, calc((100% - var(--contenedor-texto)) / 2));
    padding-right: max(6vw, calc((100% - var(--contenedor-texto)) / 2));
  }
}