/* ==========================================================================
   BAAN PHO — categorias.css  ·  hub de masajes + páginas de categoría
   Valores de "Baan Pho - Masajes.dc.html" y "Baan Pho - Masajes
   Autentico.dc.html" (style=, móvil) y sus bloques @media (min-width:900px).
   ========================================================================== */

/* ---- Hero del hub ---- */
.bp-hubhero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

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

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

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

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

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

/* ---- Intro del hub ---- */
.bp-hubintro {
  padding: 70px 30px 20px;
  background: var(--crema);
}

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

.bp-hubintro p:last-child {
  font-size: var(--fs-cuerpo-card);
  line-height: 1.7;
  color: var(--texto-2);
  margin: 0;
}

/* ---- Cards de categoría ---- */
.bp-hubcards-seccion {
  padding: 34px 26px 20px;
  background: var(--crema);
}

.bp-hubcards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bp-hubcard {
  display: block;
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--blanco-foto);
  box-shadow: var(--sombra-card-cat);
}
.bp-hubcard:hover { color: var(--blanco-foto); }

.bp-hubcard img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

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

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

.bp-hubcard-texto {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
}

.bp-hubcard h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-card-titulo);
  margin: 0 0 4px;
  line-height: 1.1;
}

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

/* ---- CTA del hub (salvia) ---- */
.bp-hubcta {
  background: var(--salvia);
  padding: 66px 30px 68px;
  text-align: center;
  margin-top: 40px;
}

.bp-hubcta 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 16px;
  color: var(--tinta);
}

.bp-hubcta p {
  font-size: var(--fs-cuerpo-card);
  line-height: 1.7;
  color: var(--texto);
  margin: 0 0 28px;
}

.bp-hubcta .bp-boton { padding: 16px 36px; }

/* ==========================================================================
   Página de categoría
   ========================================================================== */
.bp-cathero {
  position: relative;
  height: 56vh;
  min-height: 400px;
  max-height: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

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

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

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

/* Donde había un eyebrow numerado ("01 · El ritual") va la vuelta al hub.
   Mismas medidas que .bp-fhero-volver, que es el enlace equivalente de la
   ficha hacia su categoría: el camino de vuelta se ve siempre igual. */
.bp-cathero-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: 12px;
}

.bp-cathero-volver:hover { color: var(--oro-300); }

.bp-cathero-inner h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-h2-cards);   /* 42px literal del prototipo */
  line-height: 1.05;
  margin: 0;
  color: var(--blanco-foto);
  text-shadow: var(--sombra-h1-ficha);
}

/* ---- Pestañas sticky (selector de categorías, variante sticky) ---- */
.bp-tabs {
  position: sticky;
  top: var(--alto-header);
  z-index: 30;
  display: flex;
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  padding: 14px 20px;
  background: var(--crema);
  border-bottom: 1px solid var(--linea-suave);
  transition: top .4s ease;
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-shadow: inset 26px 0 20px -14px var(--crema), inset -30px 0 20px -14px var(--crema);
}

/* Con el header apartado, la cinta sube a ocupar su sitio en vez de dejar un
   hueco vacío. Va con la misma duración y curva que el header para que las
   dos cosas se muevan como una sola. */
.bajando .bp-tabs { top: 0; }

.bp-tabs::-webkit-scrollbar { display: none; }

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

.bp-tab--activa,
.bp-tab--activa:hover {
  background: var(--verde-bosque);
  color: var(--beige);
  border-color: var(--verde-bosque);
}

/* ---- Intro de categoría ---- */
.bp-catintro {
  padding: 48px 30px 8px;
  background: var(--crema);
}

.bp-catintro-thai {
  font-family: var(--font-serif);
  font-size: var(--fs-thai-cat);
  color: var(--oro-700);
  margin-bottom: 4px;
  line-height: 1;
}

.bp-catintro-trad {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-cta);
  color: var(--texto-meta);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* El párrafo de "¿Antes o después de competir?" usa la misma tipografía que
   este claim, por petición del cliente: se agrupan para que no puedan
   descuadrarse si algún día se cambia uno de los dos. */
.bp-catintro-claim,
.bp-momento-cal-head p {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: 1.42;
  color: var(--tinta);
  margin: 0;
  font-weight: var(--fw-serif);
}

/* ---- Cards de tratamientos (MasajeCard pequeña) ---- */
.bp-catcards-seccion {
  padding: 30px 26px 20px;
  background: var(--crema);
}

.bp-catcards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bp-mcard {
  display: block;
  background: var(--blanco);
  border-radius: var(--r-card-chica);
  overflow: hidden;
  color: var(--texto-oscuro);
  box-shadow: var(--sombra-card-chica);
}
.bp-mcard:hover { color: var(--texto-oscuro); }

.bp-mcard-foto {
  height: 158px;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, var(--carga-1) 0 12px, var(--carga-2) 12px 24px);
}

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

.bp-mcard-cuerpo { padding: 18px 20px 20px; }

/* h2, no h3: las tarjetas son el contenido principal de la categoría y van
   justo detrás del H1, sin ningún h2 en medio. Saltar de h1 a h3 deja el
   esquema roto para Google y para quien navega con lector de pantalla.
   El aspecto no cambia: la regla es la misma, solo cambia la etiqueta. */
.bp-mcard-cuerpo h2 {
  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.12;
  color: var(--tinta);
}

/* Frase de venta bajo el título (jul 2026): misma voz que la tarjeta de la
   home (.bp-card-cuerpo > p) y comparten fuente de texto en masajes.json.
   El h3 cede sus 16px de margen: 8 aquí arriba y 16 del párrafo al filete. */
.bp-mcard-cuerpo > p {
  font-size: var(--fs-cuerpo-card);
  line-height: 1.6;
  color: var(--texto-2);
  margin: 0 0 16px;
}

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

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

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

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

.bp-mcard-precio-valor {
  font-family: var(--font-serif);
  font-size: var(--fs-intertitulo);   /* 24px literal del prototipo */
  color: var(--oro-700);
  font-weight: var(--fw-serif-fuerte);
}

/* variantes de la categoría para explora y catcta (medidas propias) */
.bp-explora--cat { padding: 56px 0 20px; }
.bp-explora--cat .bp-explora-head { margin-bottom: 20px; }
.bp-catcta--cat { margin-top: 20px; }
.bp-catcta--cat > img { height: 360px; }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 900px) {
  .bp-hubhero {
    height: 64vh;
    max-height: 680px;
  }
  .bp-hubhero-inner {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw 64px;
  }
  .bp-hubhero-inner h1 { font-size: var(--fs-h1-hub-desktop); }

  .bp-hubintro {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 96px 6vw 24px;
  }
  .bp-hubintro p:first-child { font-size: var(--fs-hub-intro-desktop); }

  /* mismo ancho que el resto de la página, por el mismo motivo */
  .bp-hubcards-seccion {
    padding: 40px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 40px;
  }
  .bp-hubcards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .bp-hubcard img { height: 300px; }
  .bp-hubcard h2 { font-size: var(--fs-h2-cat-desktop); }

  .bp-hubcta { padding: 92px 6vw 94px; }
  .bp-hubcta h2 { font-size: var(--fs-h2-cards); }
  .bp-hubcta p {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .bp-cathero {
    height: 58vh;
    max-height: 620px;
  }
  .bp-cathero-inner {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw 56px;
  }
  .bp-cathero-inner h1 { font-size: var(--fs-h1-cat-desktop); }

  .bp-tabs {
    top: var(--alto-header-desktop);
    align-items: center;
    padding: 16px max(6vw, calc((100% - var(--contenedor-texto)) / 2));
  }

  /* El header no se aparta en escritorio, así que la cinta se queda debajo. */
  .bajando .bp-tabs { top: var(--alto-header-desktop); }

  .bp-catintro { padding: 70px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 8px; }
  .bp-catintro-claim {
    max-width: 720px;
    font-size: var(--fs-3xl);   /* 30px literal del prototipo */
  }

  /* Las tarjetas se alinean con el claim y con las pestañas. Antes tenían su
     propio ancho (1180px a mano) mientras el resto de la página usaba el
     contenedor: en pantalla ancha el claim empezaba 190px a la izquierda de
     las tarjetas y se veía descuadrado. */
  .bp-catcards-seccion {
    padding: 40px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 30px;
  }
  /* Rejilla que se adapta al ancho en vez de tres columnas fijas. Las cuatro
     categorías tienen 4, 4, 3 y 2 masajes: con tres columnas fijas, las de
     cuatro dejaban la última sola en una segunda fila con un vacío enorme al
     lado.

     Las columnas se reparten la fila (1fr) y es la tarjeta la que lleva tope
     de ancho: así en Signature, que solo tiene dos, no se estiran hasta 767px
     ni se amontonan a la izquierda dejando media fila muerta, sino que quedan
     repartidas y con un tamaño razonable. */
  .bp-catcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    align-items: stretch;
  }

  .bp-catcards .bp-mcard {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* Este modificador vive fuera de la media query y categorias.css se carga
     después de ficha.css, así que con la misma especificidad ganaba y borraba
     el relleno de escritorio: "Sigue explorando" se pegaba al borde izquierdo
     de la pantalla. En móvil ese padding 0 es correcto —la fila de pastillas
     va a sangre y hace scroll— y por eso se repone solo aquí. */
  .bp-explora--cat {
    padding: 56px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 20px;
  }
  .bp-explora--cat .bp-explora-fila { padding-left: 0; }

  .bp-catcta--cat > img { height: 440px; }
}


/* ==========================================================================
   ¿ANTES O DESPUÉS DE COMPETIR?  ·  solo Recuperación Deportiva
   --------------------------------------------------------------------------
   Sección "Momento" del prototipo (Baan Pho - Masajes Deportiva.dc.html), que
   se había quedado sin implementar. Valores del style= del diseño y de su
   bloque @media. Única desviación: va ANTES de las cards, no después
   (decisión del cliente: primero el cuándo, luego el qué).
   ========================================================================== */
.bp-momento-cal {
  padding: 64px 26px 70px;
  background: var(--crema);
}

.bp-momento-cal-eyebrow {
  display: block;
  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: 14px;
}

.bp-momento-cal h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-momento);
  line-height: 1.14;
  margin: 0 0 16px;
  color: var(--verde-bosque);
}

.bp-momento-cal h2 em {
  font-style: italic;
  color: var(--oliva);
}

/* solo lo propio: el resto lo hereda de la regla compartida de arriba */
.bp-momento-cal-head p {
  margin: 0 0 34px;
  max-width: 520px;
}

.bp-momcols {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* el filete de arriba distingue las tres fases por color */
.bp-momcol { padding-top: 22px; }
.bp-momcol--antes { border-top: 2px solid var(--oro-700); }
.bp-momcol--mantenimiento { border-top: 2px solid var(--oliva); }
.bp-momcol--despues { border-top: 2px solid var(--verde-bosque); }

.bp-momcol-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.bp-momcol-titulo {
  font-family: var(--font-serif);
  font-size: var(--fs-momento-col);
  color: var(--verde-bosque);
}

.bp-momcol-marca {
  font-size: var(--fs-sm);
  color: var(--oliva);
  font-weight: var(--fw-fuerte);
}

.bp-momcol p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--texto);
  margin: 0 0 18px;
}

.bp-momcol-puntos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bp-momcol-puntos li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-cuerpo-panel);
  line-height: 1.65;
  color: var(--texto-2);
}

.bp-momcol-puntos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-circulo);
  background: var(--oro-700);
}

.bp-momcol--mantenimiento .bp-momcol-puntos li::before { background: var(--oliva); }
.bp-momcol--despues .bp-momcol-puntos li::before { background: var(--verde-bosque); }

@media (min-width: 900px) {
  .bp-momento-cal {
    padding: 96px max(6vw, calc((100% - var(--contenedor-texto)) / 2)) 100px;
  }

  .bp-momento-cal h2 { font-size: var(--fs-h2-momento-desktop); }

  /* tres fases: antes · mantenimiento · después */
  .bp-momcols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}