/* ==========================================================================
   bb2026 — PORTADA (2/2): servicios, tira lateral, reseñas y CTA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   5. LOS 6 SERVICIOS
   -------------------------------------------------------------------------- */
.bb-hsvcs { background: var(--bb-paper); }
.bb-hsvcs__head { padding-block: var(--bb-s5) var(--bb-s4); }
.bb-hsvcs__kicker {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
  line-height: 1.4;
  color: var(--bb-body);
}

/* Fila de dos: ya no existe. La seccion es una rejilla uniforme. */

/* --- Entradilla de la seccion --- */
.bb-hsvcs__lead {
  max-width: 62ch;
  margin: var(--bb-s3) 0 0;
  color: var(--bb-body);
}

/* --- La rejilla ---
   Ocho tarjetas iguales. El numero de columnas sube con el ancho; a 1200 y
   mas son CUATRO, que con ocho servicios deja dos filas exactas y permite
   verlas de un vistazo, que es justo lo que se pedia. */
.bb-hsvcs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bb-s2);
  margin: 0 0 var(--bb-s6);
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .bb-hsvcs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .bb-hsvcs__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .bb-hsvcs__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bb-s3);
  }
}

.bb-hsvcs__cell { min-width: 0; }

/* --- La tarjeta: TODO el bloque es el enlace --- */
.bb-hsvc {
  position: relative;
  display: block;
  color: var(--bb-paper);
  background: var(--bb-ink);
  /* 4/5 y no 3/4: con las fotos verticales del estudio (2:3) recorta menos,
     y dos filas caben en una pantalla normal sin tener que bajar. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.bb-hsvc:hover,
.bb-hsvc:focus-visible { color: var(--bb-paper); }

.bb-hsvc__frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.bb-hsvc__media { position: absolute; inset: 0; display: block; }

.bb-hsvc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 1.4s var(--bb-ease);
}

/* Hover muy sutil y largo: es fotografia, no una landing agresiva. */
.bb-hsvc:hover .bb-hsvc__img,
.bb-hsvc:focus-visible .bb-hsvc__img { transform: scale(1.05); }

/* Velo: plano 0.28 + degradado fuerte abajo. Sobre la banda del texto da
   ~0.86 de tinta efectiva, que es lo que sostiene el >=4.5:1 con texto
   papel pase lo que pase con la fotografia. */
.bb-hsvc__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(28, 27, 25, 0.86) 0%, rgba(28, 27, 25, 0.5) 42%, rgba(28, 27, 25, 0.08) 82%),
    rgba(28, 27, 25, 0.28);
  transition: opacity 0.6s var(--bb-ease);
}

.bb-hsvc:hover .bb-hsvc__veil { opacity: 0.88; }

/* --- El texto, abajo y centrado --- */
.bb-hsvc__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--bb-s3) var(--bb-s2) var(--bb-s3);
}

.bb-hsvc__num {
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  letter-spacing: var(--bb-track-label);
  /* Papel al 55%: se lee como numeracion editorial, no compite con el
     nombre del servicio. Sobre el velo sigue por encima de 4.5:1. */
  color: rgba(247, 245, 242, 0.55);
  margin-bottom: var(--bb-s1);
}

.bb-hsvc__title {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bb-paper);
  transition: transform 0.6s var(--bb-ease);
}

.bb-hsvc:hover .bb-hsvc__title { transform: translateY(-3px); }

.bb-hsvc__note {
  margin-top: 0.4em;
  font-family: var(--bb-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(247, 245, 242, 0.82);
}

/* El "boton": no es un boton de verdad (toda la tarjeta es el enlace), asi
   que va como rotulo con contorno. Recoge el gesto de la web de referencia
   sin salirse de la tipografia de la casa. */
.bb-hsvc__cue {
  margin-top: var(--bb-s2);
  padding: 0.55em 1.2em;
  border: 1px solid rgba(247, 245, 242, 0.45);
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
  color: var(--bb-paper);
  transition:
    background-color 0.4s var(--bb-ease),
    border-color 0.4s var(--bb-ease),
    color 0.4s var(--bb-ease);
}

.bb-hsvc:hover .bb-hsvc__cue,
.bb-hsvc:focus-visible .bb-hsvc__cue {
  background: var(--bb-paper);
  border-color: var(--bb-paper);
  color: var(--bb-ink);
}

@media (max-width: 559px) {
  .bb-hsvc {
    /* A una columna la tarjeta seria larguisima en vertical: se ensancha. */
    aspect-ratio: 3 / 2;
  }
  .bb-hsvc__title { font-size: 1.375rem; }
}


/* --------------------------------------------------------------------------
   6. TIRA LATERAL
   Por defecto (móvil, sin JS y reduced-motion): scroll horizontal NATIVO
   con scroll-snap. El pin lo activa home.js añadiendo .is-pinned.
   -------------------------------------------------------------------------- */
.bb-hstrip {
  position: relative;
  background: var(--bb-paper);
  padding-block: var(--bb-s5) var(--bb-s6);
}
.bb-hstrip__head { padding-bottom: var(--bb-s4); }
.bb-hstrip__kicker {
  margin: 0 0 var(--bb-s2);
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
  line-height: 1.4;
  color: var(--bb-body);
}
.bb-hstrip__hint {
  margin: 0;
  font-family: var(--bb-font-body);
  font-size: 0.9375rem;
  color: var(--bb-body);
}

.bb-hstrip__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--bb-gutter);
}
.bb-hstrip__viewport::-webkit-scrollbar { display: none; }

.bb-hstrip__track {
  display: flex;
  align-items: center;
  gap: var(--bb-s3);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
}
.bb-hstrip__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 74vw;
}
.bb-hstrip__fig {
  margin: 0;
  overflow: hidden;
  background: var(--bb-frame-bg);
  height: 58vh;
}
.bb-hstrip__img { width: 100%; height: 100%; object-fit: cover; }

/* Alturas alternas: la tira necesita ritmo, no ser una cinta plana. */
.bb-hstrip__item:nth-child(3n + 2) .bb-hstrip__fig { height: 44vh; }
.bb-hstrip__item:nth-child(4n + 3) .bb-hstrip__fig { height: 66vh; }
.bb-hstrip__item:nth-child(even) { align-self: flex-end; }
.bb-hstrip__item:nth-child(3n) { align-self: flex-start; }

@media (min-width: 768px) {
  .bb-hstrip__track { gap: var(--bb-s4); }
  .bb-hstrip__item { width: 34vw; }
  .bb-hstrip__fig { height: 62vh; }
  .bb-hstrip__item:nth-child(3n + 2) .bb-hstrip__fig { height: 46vh; }
  .bb-hstrip__item:nth-child(4n + 3) .bb-hstrip__fig { height: 72vh; }
}

/* --- Modo fijado (solo lo activa JS en pantalla ancha y con motion) --- */
/* Al fijarse, el borde superior de la sección coincide con el del
   viewport, y la barra fija se le queda encima: reservamos su alto más
   un respiro para que el rótulo nunca quede por debajo. Solo en modo
   fijado, así el scroll nativo de móvil y reduced-motion no cambia. */
.bb-hstrip.is-pinned {
  padding-top: calc(var(--bb-bar-h) + var(--bb-s4));
  padding-bottom: var(--bb-s5);
}
.bb-hstrip.is-pinned .bb-hstrip__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: auto;
}
.bb-hstrip.is-pinned .bb-hstrip__track { will-change: transform; }

/* --------------------------------------------------------------------------
   7. RESEÑAS — se rehizo por completo y vive en su propia hoja:
      assets/css/home-reviews.css (foto + carrusel de citas). Aquí queda
      solo esta nota para que nadie la busque en este fichero.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. CTA FINAL — se rehizo como BANNER (foto de fondo + velo negro +
      entrada en persiana y cascada) y vive en su propia hoja:
      assets/css/home-cta.css. Aquí queda solo esta nota para que nadie la
      busque en este fichero.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   KEN BURNS de la tira: es un recurso compartido con el hero y está en
   assets/css/home-kenburns.css (con su aritmética de escala y paneo).
   La tira NO lleva revelado en persiana: es la excepción pedida.
   -------------------------------------------------------------------------- */