/* ==========================================================================
   BAAN PHO — sobre.css  ·  página Sobre Nosotros
   Valores de "Baan Pho - Sobre Nosotros.dc.html" (style=, móvil) y su
   bloque @media (min-width:900px) del <helmet> (líneas 86–108).
   ========================================================================== */

/* ---- Hero ---- */
.bp-snhero {
  position: relative;
  height: 78vh;
  min-height: 520px;
  max-height: 720px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

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

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

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

.bp-snhero-inner .bp-eyebrow-raya { background: var(--oro-300); }
.bp-snhero-inner .bp-eyebrow span:last-child {
  color: var(--oro-300);
  letter-spacing: var(--ls-eyebrow-pie);
}

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

/* ---- Intro ---- */
.bp-sn-intro {
  padding: 80px 32px 72px;
  background: var(--crema);
  text-align: center;
}

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

.bp-sn-intro > p:first-of-type {
  font-family: var(--font-serif);
  font-size: var(--fs-intro);
  line-height: 1.4;
  color: var(--tinta);
  margin: 0 0 22px;
  font-weight: var(--fw-serif);
}

.bp-sn-intro > p:last-of-type {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto-2);
  margin: 0 auto;
  max-width: 320px;
}

/* ---- La fundadora ---- */
.bp-sn-fundadora {
  background: var(--salvia);
  padding: 70px 26px 0;
}

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

.bp-sn-fundadora .bp-eyebrow { margin-bottom: 14px; }

.bp-sn-fundadora p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto);
  margin: 0 0 10px;
}

.bp-sn-fundadora strong { color: var(--tinta); }

.bp-sn-retrato {
  position: relative;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 360px;
}

.bp-sn-peana {
  position: absolute;
  bottom: 0;
  width: 230px;
  height: 300px;
  border-radius: 999px 999px 20px 20px;
  background: linear-gradient(to bottom, var(--peana-1), var(--salvia-borde));
}

.bp-sn-retrato img {
  position: relative;
  z-index: 2;
  height: 400px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(var(--sombra-retrato));
}

/* ---- Cita de la fundadora ---- */
/* La cita era verde bosque, igual que el bloque del campeonato que va justo
   detrás desde que se retiró "Qué es un masaje tailandés". Dos secciones del
   mismo oscuro seguidas se leen como una sola mancha, sin costura visible.

   Se aclara la cita y no el campeonato: allí el verde sostiene el medallero,
   las dos fotos y el dorado, y cambiarlo sería rehacer la sección. Además el
   premio se queda como la única sección oscura de la página, que es justo
   donde interesa que caiga el acento. */
.bp-sn-quote {
  background: var(--beige);
  padding: 48px 30px 54px;
}

.bp-sn-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-hub-intro);
  line-height: 1.45;
  color: var(--tinta);
  margin: 0 0 18px;
}

.bp-sn-quote-autor {
  font-size: var(--fs-cta-compacta);
  letter-spacing: var(--ls-cta);
  color: var(--oro-700);   /* el dorado de rótulos sobre claro, no el de oscuro */
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
}

/* ---- La historia ---- */
.bp-sn-historia {
  background: var(--crema);
  padding: 80px 30px 72px;
}

.bp-sn-historia h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-cat-desktop);   /* 36px literal del prototipo */
  line-height: var(--lh-titular);
  margin: 0 0 22px;
  color: var(--tinta);
}

.bp-sn-historia .bp-eyebrow { margin-bottom: 14px; }

.bp-sn-historia p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto-2);
  margin: 0 0 18px;
}
.bp-sn-historia p:last-of-type { margin-bottom: 0; }

.bp-sn-historia-foto {
  border-radius: var(--r-card-masaje);
  overflow: hidden;
  margin-top: 36px;
  box-shadow: var(--sombra-foto-suave);
}

.bp-sn-historia-foto img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* ---- Filosofía ---- */
.bp-sn-filosofia {
  background: var(--beige-2);
  padding: 78px 30px 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-sn-filosofia-head {
  text-align: center;
  margin-bottom: 44px;
}

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

.bp-sn-filosofia-lista {
  display: flex;
  flex-direction: column;
}

.bp-sn-principio {
  padding: 26px 0;
  border-top: 1px solid var(--linea-beige);
}
.bp-sn-principio--ultimo { border-bottom: 1px solid var(--linea-beige); }

.bp-sn-principio-num {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--oro-700);
  margin-bottom: 8px;
}

.bp-sn-principio h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-intertitulo);
  margin: 0 0 8px;
  color: var(--tinta);
}

.bp-sn-principio p {
  font-size: var(--fs-cuerpo-panel);
  line-height: 1.65;
  color: var(--texto-2);
  margin: 0;
}

/* ---- Cierre (CTA sobre foto, variante de catcta) ---- */
.bp-sn-cierre {
  position: relative;
  overflow: hidden;
}

.bp-sn-cierre > img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}

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

.bp-sn-cierre-texto {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 44px;
  text-align: center;
}

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

/* ==========================================================================
   Desktop (helmet, líneas 86–108)
   ========================================================================== */
@media (min-width: 900px) {
  .bp-snhero {
    height: 72vh;
    max-height: 780px;
  }
  .bp-snhero-inner {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw 60px;
  }
  .bp-snhero-inner h1 { font-size: var(--fs-h1-sobre-desktop); }

  .bp-sn-intro { padding: 100px 6vw 90px; }
  .bp-sn-intro > p:first-of-type {
    font-size: var(--fs-hub-intro-desktop);
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
  }
  .bp-sn-intro > p:last-of-type { max-width: 520px; }

  .bp-sn-fundadora {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: 80px;
    align-items: end;
    padding: 96px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 0;
  }
  .bp-sn-fundadora-texto {
    align-self: center;
    padding-bottom: 60px;
  }
  .bp-sn-fundadora h2 { font-size: var(--fs-h1-sobre); }
  .bp-sn-retrato { min-height: 460px; }
  .bp-sn-retrato img { height: 500px; }
  .bp-sn-peana {
    width: 300px;
    height: 380px;
  }

  .bp-sn-quote {
    padding: 80px 6vw 84px;
    text-align: center;
  }
  .bp-sn-quote p {
    font-size: var(--fs-hub-intro-desktop);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  .bp-sn-historia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    align-items: center;
    padding: 110px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 100px;
  }
  .bp-sn-historia h2 { font-size: var(--fs-cita-desktop); }
  .bp-sn-historia-foto { margin-top: 0; }
  .bp-sn-historia-foto img { height: 440px; }

  .bp-sn-filosofia { padding: 100px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 96px; }
  .bp-sn-filosofia-head h2 { font-size: var(--fs-cita-desktop); }
  .bp-sn-filosofia-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 48px;
  }

  .bp-sn-cierre > img { height: 500px; }
  .bp-sn-cierre h2 { font-size: var(--fs-h1-ficha); }   /* 44px literal */
}

/* ==========================================================================
   EL CAMPEONATO  ·  sección nueva (jul 2026, a petición del cliente)
   --------------------------------------------------------------------------
   Va después de "De Chiang Mai al Barri Vell" porque cierra ese recorrido
   cronológico: templos → Chiang Mai → Girona → oro en Barcelona. En oscuro
   con acentos dorados, el registro que el sitio reserva para lo importante
   (tarjeta regalo, saludo thai): es la credencial más fuerte de la web y
   además rompe el paso crema → beige, que era muy plano.
   ========================================================================== */
.bp-sn-premio {
  background-color: var(--verde-bosque);
  background-image:
    linear-gradient(rgba(var(--verde-bosque-rgb), 0.93), rgba(var(--verde-bosque-rgb), 0.97)),
    var(--trama-hojas);
  background-size: auto, 520px;
  padding: 76px 30px 72px;
}

.bp-sn-premio-inner { margin-bottom: 40px; }

.bp-sn-premio h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-cat-desktop);
  line-height: 1.1;
  color: var(--titular-inv-2);
  margin: 0 0 20px;
}

.bp-sn-premio p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--texto-inv);
  margin: 0 0 16px;
}

.bp-sn-premio strong { color: var(--oro-200); font-weight: var(--fw-fuerte); }

.bp-sn-premio-nota {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--texto-inv-2);
}

/* medallero: las dos modalidades, una debajo de otra */
.bp-sn-premio-medallero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}

.bp-sn-premio-medalla {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(var(--oro-rgb), 0.3);
  border-radius: var(--r-md);
  background: rgba(var(--oro-rgb), 0.06);
}

.bp-sn-premio-puesto {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--oro-300);
  flex: none;
}

.bp-sn-premio-modalidad {
  font-size: var(--fs-md);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  color: var(--texto-inv);
}

/* las dos fotos: el diploma prueba el hecho, la competición prueba el oficio */
.bp-sn-premio-fotos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bp-sn-premio-foto {
  margin: 0;
  border-radius: var(--r-card-masaje);
  overflow: hidden;
  border: 1px solid rgba(var(--oro-rgb), 0.28);
}

.bp-sn-premio-foto img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

.bp-sn-premio-foto--podio img { object-position: center 22%; }

.bp-sn-premio-foto figcaption {
  padding: 12px 18px 14px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-nav);
  color: var(--texto-inv-suave);
  background: rgba(var(--oro-rgb), 0.06);
}

@media (min-width: 900px) {
  .bp-sn-premio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 76px;
    align-items: center;
    padding-left: max(6vw, calc((100% - var(--contenedor-texto)) / 2));
    padding-right: max(6vw, calc((100% - var(--contenedor-texto)) / 2));
  }

  .bp-sn-premio-inner { margin-bottom: 0; }

  .bp-sn-premio-fotos {
    flex-direction: row;
    align-items: flex-start;
  }

  .bp-sn-premio-foto { flex: 1; }

  /* la del podio, un poco más alta: es la que lleva la prueba */
  .bp-sn-premio-foto--podio img { height: 420px; }
  .bp-sn-premio-foto--accion img { height: 360px; }
}