/* ==========================================================================
   bb2026 — PORTADA / 7. RESEÑAS (rediseño).

   Antes: nota grande centrada sobre verde, sin fotografia y pegada a la
   CTA final — que tambien va en verde —, con lo que las dos secciones se
   leian como un solo bloque. Ahora la seccion va sobre PAPEL y en dos
   columnas (foto | contenido), y la CTA se queda como el unico bloque en
   acento: la separacion es de fondo, de retícula y de aire.

   Namespace .bb-hrev. No toca header, footer ni nav.
   ========================================================================== */

.bb-hrev { overflow: hidden; }

.bb-hrev__grid {
  display: grid;
  /* minmax(0, 1fr) y NO 1fr: 1fr equivale a minmax(auto, 1fr), es decir
     la columna se mide tambien por el contenido. Y el contenido de la
     columna de foto es un marco con aspect-ratio cuya imagen pide
     height: 100%: al medirlo, el ancho depende del alto y el alto del
     ancho, la referencia es circular y el navegador devuelve su tamaño
     maximo de layout (33.554.432 px = 2^25). Con minmax(0, 1fr) la pista
     tiene ancho definido (el de la reticula) y el aspect-ratio resuelve
     el ALTO a partir del ancho, que es el sentido correcto. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bb-s5);
  align-items: center;
}

/* --- Columna de fotografia --- */
/* Ancho definido explicito: el marco nunca se mide por su contenido. */
.bb-hrev__media {
  position: relative;
  width: 100%;
  min-width: 0;
}
.bb-hrev__frame {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bb-frame-bg);
}
/* En posicion absoluta la imagen no participa en el calculo del ancho
   del marco: se elimina de raiz la dependencia circular anterior. */
.bb-hrev__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Columna de contenido ---

   JERARQUIA (cambio pedido por la clienta). Antes el "63" era un Display
   XL de hasta 120px y mandaba en la seccion. Ahora:
     1. el TITULAR ocupa ese sitio protagonista, a tamaño MEDIO y
        combinando bold con thin;
     2. la PUNTUACION (en la caja-etiqueta de la foto, ver components.css)
        es el dato mas grande y el unico en negrita aislada;
     3. el RECUENTO baja a micro-etiqueta.
   Y el micro-rotulo que habia encima desaparece: su texto ES el titular.
   Asi no hay dos elementos peleandose por el protagonismo. */

.bb-hrev__title {
  margin: 0;
  font-family: var(--bb-font-display);
  /* MEDIO a proposito: por debajo de Display L (que llega a 52px) para no
     competir con la puntuacion de la caja.
     MEDIDO con las Jost autoalojadas: la frase completa a 36px mide
     612,8px y la columna de contenido a 1512px de viewport es de 774,7px
     -> entra en UNA linea con 161,9px de holgura. En movil (342px utiles)
     parte en dos lineas, que es lo que debe hacer. */
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--bb-ink);
}
/* El peso reparte el SIGNIFICADO, no decora: en negrita va quien opina y
   de que; el resto de la frase, en thin. Los tres pesos de Jost
   autoalojados son 300, 500 y 700, asi que 300 y 700 son reales y no
   sinteticos. */
.bb-hrev__title-bold { font-weight: 700; }
.bb-hrev__title-thin { font-weight: 300; }

/* Recuento: micro-etiqueta. MEDIDO con Jost 500 a 11px / 0.18em,
   "63 RESEÑAS EN GOOGLE" mide 167,95px: cabe de sobra en la columna. */
.bb-hrev__count {
  margin: var(--bb-s3) 0 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;
  /* Sobre papel: --bb-body (6.94:1), nunca --bb-label. */
  color: var(--bb-body);
}
/* La cifra, un poco mas presente que su rotulo, sin cambiar de tamaño. */
.bb-hrev__count-num {
  font-weight: 700;
  color: var(--bb-ink);
}

/* --- Carrusel de citas --- */
.bb-hrev__quotes {
  margin-top: var(--bb-s4);
  padding-top: var(--bb-s4);
  border-top: 1px solid var(--bb-ink-soft);
}
.bb-hrev__quote { height: auto; }
.bb-hrev__qtext {
  margin: 0;
  max-width: 44ch;
}
.bb-hrev__qtext p {
  margin: 0;
  font-family: var(--bb-font-lyric);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.4;
  color: var(--bb-ink);
}
/* Las comillas las pone el CSS: asi el array de textos queda limpio. */
.bb-hrev__qtext p::before { content: "\201C"; }
.bb-hrev__qtext p::after { content: "\201D"; }

.bb-hrev__qmeta {
  margin: var(--bb-s3) 0 0;
  display: flex;
  align-items: center;
  gap: 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);
  color: var(--bb-body);
}
/* Firma de la cita: autor · Google · antiguedad · nota. Los separadores
   los pone el CSS, asi que el array de textos queda limpio. La linea
   puede partir: hay nombres largos y el movil es estrecho. */
.bb-hrev__qmeta { flex-wrap: wrap; row-gap: var(--bb-s1); }
.bb-hrev__qsrc,
.bb-hrev__qage { opacity: 0.7; }
.bb-hrev__qsrc::before,
.bb-hrev__qage::before,
.bb-hrev__qnote::before {
  content: "·";
  padding-inline-end: var(--bb-s2);
}
/* La nota de la reseña, en acento: es el unico dato de valoracion de la
   cita y conviene que se distinga de la firma. */
.bb-hrev__qnote { color: var(--bb-accent); }

/* Puntos de paginacion: rayitas finas, no bolitas de plugin.

   OJO CON LA ESPECIFICIDAD: al inicializar, Swiper añade la clase
   .swiper-pagination a este elemento, y su hoja lo posiciona en absoluto
   con .swiper-horizontal>.swiper-pagination-bullets (dos clases). Si aqui
   se usara solo .bb-hrev__dots (una clase) perderia y los puntos se
   montarian encima de la cita. Con el selector hijo empatamos en
   especificidad y ganamos por orden: esta hoja carga despues de Swiper
   (ver la cadena de dependencias en inc/enqueue.php). */
.bb-hrev__quotes > .bb-hrev__dots {
  position: static;
  display: flex;
  width: auto;
  gap: var(--bb-s1);
  margin-top: var(--bb-s4);
  text-align: left;
  transform: none;
}
.bb-hrev__dots .swiper-pagination-bullet {
  width: 28px;
  height: 2px;
  border-radius: 0;
  background: var(--bb-ink);
  opacity: 0.22;
  transition: opacity 0.4s var(--bb-ease);
}
.bb-hrev__dots .swiper-pagination-bullet-active { opacity: 1; }
.bb-hrev__dots .swiper-pagination-bullet:focus-visible { outline: 2px solid var(--bb-accent); }

.bb-hrev__actions { margin-top: var(--bb-s5); }

/* MIENTRAS NO HAY CARRUSEL: lista apilada, no carrusel roto.
   El .swiper de Swiper lleva overflow:hidden, asi que si el JS no llega a
   inicializarlo (script bloqueado, error, navegador antiguo) solo se
   veria la primera cita y las demas quedarian recortadas e inalcanzables.
   Por eso el estado por defecto es la lista completa apilada, y solo
   cuando home.js consigue instanciar Swiper añade .is-ready y entra el
   comportamiento de carrusel. No se usa .no-js: este tema no marca esa
   clase en el <html>, luego seria codigo muerto. */
.bb-hrev__quotes:not(.is-ready) { overflow: visible; }
.bb-hrev__quotes:not(.is-ready) .swiper-wrapper { display: block; }
.bb-hrev__quotes:not(.is-ready) .bb-hrev__quote + .bb-hrev__quote { margin-top: var(--bb-s4); }
.bb-hrev__quotes:not(.is-ready) .bb-hrev__dots { display: none; }

@media (min-width: 980px) {
  .bb-hrev__grid {
    /* La foto ocupa menos que el contenido: la seccion es de texto. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--bb-s6);
  }
  .bb-hrev__frame { aspect-ratio: 3 / 4; }
}