/* ==========================================================================
   bb2026 — LAYOUT
   Contenedores, reticula, secciones y paneles a sangre (full-bleed).
   ========================================================================== */

/* --- Contenedor editorial --- */
.bb-wrap {
  width: 100%;
  max-width: var(--bb-max);
  margin-inline: auto;
  padding-inline: var(--bb-gutter);
}

/* Variante estrecha para bloques de lectura */
.bb-wrap--narrow { max-width: 760px; }
.bb-wrap--mid { max-width: 1080px; }

/* --- Secciones: ritmo vertical --- */
.bb-section { padding-block: var(--bb-s5); }
.bb-section--tight { padding-block: var(--bb-s4); }
.bb-section--loose { padding-block: var(--bb-s6); }

@media (min-width: 768px) {
  .bb-section { padding-block: var(--bb-s6); }
  .bb-section--loose { padding-block: var(--bb-s7); }
}

/* --- Fondos --- */
.bb-bg-paper { background: var(--bb-paper); }
.bb-bg-white { background: var(--bb-white); }
.bb-bg-ink { background: var(--bb-ink); }
.bb-bg-accent { background: var(--bb-accent); }
.bb-bg-ink *, .bb-bg-accent * { color: var(--bb-paper); }

/* --- Panel a sangre: rompe el contenedor de lado a lado --- */
.bb-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- Panel de imagen (base de la caja-etiqueta firma) --- */
.bb-panel {
  position: relative;
  overflow: visible;
}
.bb-panel__media {
  position: relative;
  overflow: hidden;
  background: var(--bb-frame-bg);
}
.bb-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ratios de uso frecuente */
.bb-ratio-portrait .bb-panel__media { aspect-ratio: 3 / 4; }
.bb-ratio-square .bb-panel__media { aspect-ratio: 1 / 1; }
.bb-ratio-landscape .bb-panel__media { aspect-ratio: 3 / 2; }
.bb-ratio-cinema .bb-panel__media { aspect-ratio: 16 / 9; }

/* --- Reticula simple --- */
.bb-grid { display: grid; gap: var(--bb-s3); }
.bb-grid--2 { grid-template-columns: 1fr; }
.bb-grid--3 { grid-template-columns: 1fr; }
.bb-grid--12 { grid-template-columns: repeat(6, 1fr); }

@media (min-width: 768px) {
  .bb-grid { gap: var(--bb-s4); }
  .bb-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .bb-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .bb-grid--12 { grid-template-columns: repeat(12, 1fr); }
}

/* --- Utilidades de flujo --- */
.bb-stack > * + * { margin-top: var(--bb-s3); }
.bb-stack-lg > * + * { margin-top: var(--bb-s4); }
.bb-center { text-align: center; }
.bb-mx-auto { margin-inline: auto; }

/* --- Hero a pantalla completa --- */
.bb-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bb-ink);
}
.bb-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bb-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}
.bb-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(28, 27, 25, 0.72) 0%, rgba(28, 27, 25, 0.15) 55%, rgba(28, 27, 25, 0.35) 100%);
}
.bb-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--bb-s5) var(--bb-s5);
}
.bb-hero .bb-display-xl,
.bb-hero .bb-lyric { color: var(--bb-paper); }
.bb-hero .bb-label { color: var(--bb-paper); opacity: 0.7; }

@media (min-width: 768px) {
  .bb-hero__inner { padding-block: var(--bb-s6); }
}

/* --- Contenido principal: deja hueco a la barra fija --- */

/* RECORTE HORIZONTAL GLOBAL — NO CAMBIAR clip POR hidden. LEER ESTO.

   PROBLEMA. Cualquier seccion a sangre escrita con width: 100vw sobresale
   del area de contenido cuando hay barra de desplazamiento vertical:
   100vw INCLUYE el ancho de la barra, y el area de contenido no. Centrada
   con margen negativo, la seccion se sale ~la mitad de la barra por cada
   lado y la pagina entera se puede desplazar en horizontal.

   MEDIDO en /albumes-y-productos-impresos/ a 1512x900 (barra de 15px):
     documentElement.clientWidth  = 1497
     documentElement.scrollWidth  = 1505   -> 8px de exceso
     window.scrollTo(50, 0)       -> window.scrollX = 8  (se desplaza de verdad)
   El elemento que escapaba era SECTION.bb-prod-mat (left -7, right 1505,
   width 1512) y ninguno de sus ancestros (.bb-prod, .bb-main) recortaba.
   Lo mismo pasaba en /sobre-mi/: 383 frente a 375 a 390px de ancho.

   SOLUCION. Recortar en el ancestro comun de todo el contenido. Asi el
   sintoma no reaparece cada vez que se escribe una seccion a sangre nueva
   (.bb-bleed de esta misma hoja usa el mismo recurso de 100vw).

   POR QUE clip Y NO hidden — ESTO ES LO IMPORTANTE.
   overflow: hidden crea un CONTENEDOR DE DESPLAZAMIENTO, y eso anula
   cualquier position: sticky que haya dentro. Este tema tiene stickies que
   son piezas centrales del diseno y viven dentro de .bb-main:
     .bb-ct__aside     /contacto/  (contact.css)  foto fija junto al formulario
     .bb-ab-tri__quote /sobre-mi/  (about.css)    cita del triptico
     .bb-sblock--editorial .bb-sblock__title  (service-blocks.css) titular
                                              fijo de las 6 de servicio
   overflow-x: clip recorta SIN crear contenedor de desplazamiento, asi que
   los sticky siguen funcionando. Ademas no rompe el pin de GSAP de la tira
   lateral de la portada, que con hidden si estaria en riesgo.

   Si algun dia clip no sirviera aqui: NO lo sustituyas por hidden. Busca
   otra via (recortar en la propia seccion) y deja constancia.

   La tira lateral de la portada NO depende de que .bb-main no recorte: su
   desplazamiento horizontal ocurre dentro de .bb-hstrip__viewport, que es
   su propio contenedor de desplazamiento (overflow-x: auto), y en modo
   fijado el recorte tambien es suyo (overflow: hidden) con translateX
   sobre la pista. Nada horizontal sale de la seccion. */
.bb-main {
  display: block;
  overflow-x: clip;
}
.bb-main--offset { padding-top: var(--bb-bar-h); }

/* El hero recorta su contenido: la caja-etiqueta se ancla dentro del margen */
.bb-hero .bb-tag--br { transform: none; right: var(--bb-gutter); bottom: 0; }
.bb-hero .bb-tag--bl { transform: none; left: var(--bb-gutter); bottom: 0; }