/* ==========================================================================
   bb2026 — PORTADA: frase lírica (2), manifiesto (3) y presentación (4).
   El hero (1) tiene hoja propia: home-hero.css.
   Los bloques 5-8 están en home-blocks.css y el 7 en home-reviews.css.
   Namespace: .bb-h*  (h = home). No se toca nada de header/footer/nav.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. FRASE LÍRICA
   -------------------------------------------------------------------------- */
.bb-hlyric__mark {
  margin: 0 0 calc(var(--bb-s2) * -1);
  font-family: var(--bb-font-lyric);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--bb-ink);
  opacity: 0.18;
}
.bb-hlyric__text {
  /* Ancho corto a propósito: tiene que cortar como verso, no como párrafo. */
  max-width: 22ch;
  margin-inline-start: 0;
}
@media (min-width: 980px) {
  .bb-hlyric__mark { margin-inline-start: 8%; }
  .bb-hlyric__text { margin-inline-start: 8%; }
}

/* --------------------------------------------------------------------------
   3. MANIFIESTO — composición asimétrica
   -------------------------------------------------------------------------- */
.bb-hman__grid { align-items: start; }
.bb-hman__aside { grid-column: 1 / -1; }

/* La caja-etiqueta firma vive en la COLUMNA DEL RÓTULO, no en la caja de
   texto. Antes iba anclada a la esquina superior izquierda de
   .bb-hman__box con desborde, y ahí caía justo encima de las primeras
   líneas del párrafo: el manifiesto es el texto más importante de la
   página y no puede quedar tapado por un adorno.

   Aquí se saca del posicionamiento absoluto y se pone en el FLUJO
   normal, debajo del rótulo. Así no hay ninguna aritmética de solape que
   pueda fallar a un ancho concreto: la etiqueta ocupa su propio sitio y
   empuja lo que venga detrás.
     - En escritorio el rótulo es su propia columna (3 de 12), así que la
       etiqueta queda a la izquierda del texto, sin tocarlo.
     - En móvil el rótulo va apilado encima, así que la etiqueta queda
       entre el rótulo y el párrafo, también sin tocarlo.
   Al ser estática no desborda por ningún lado: cero riesgo de scroll
   horizontal, y no hace falta el modificador .bb-tag--out. */
.bb-hman__aside .bb-tag {
  position: static;
  transform: none;
  margin-top: var(--bb-s3);
}

/* La etiqueta va sobre papel: NUNCA con --bb-label (2.19:1). */
.bb-hman__kicker,
.bb-habout__kicker {
  margin: 0 0 var(--bb-s3);
  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-hman__box {
  position: relative;
  grid-column: 1 / -1;
  padding-top: var(--bb-s4);
}
.bb-hman__text {
  /* Ancho de lectura cómodo: ~64 caracteres. */
  max-width: 64ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
}

@media (min-width: 768px) {
  .bb-hman__aside { grid-column: 1 / span 3; }
  .bb-hman__box {
    grid-column: 4 / span 9;
    padding-top: 0;
    padding-inline-start: var(--bb-s4);
  }
}
@media (min-width: 1200px) {
  .bb-hman__box {
    grid-column: 5 / span 7;
    padding-inline-start: var(--bb-s5);
  }
}

/* --------------------------------------------------------------------------
   4. PRESENTACIÓN PERSONAL — split asimétrico
   -------------------------------------------------------------------------- */
.bb-habout {
  background: var(--bb-paper);
  overflow: hidden;
}
.bb-habout__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.bb-habout__col--text {
  padding: var(--bb-s5) var(--bb-gutter);
}
.bb-habout__textin {
  max-width: 56ch;
  margin-inline: auto;
}
.bb-habout__text { max-width: 60ch; }
.bb-habout__actions { margin-top: var(--bb-s4); }

.bb-habout__panel { position: relative; }
.bb-habout__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bb-frame-bg);
}
/* El truco del split: la imagen es más ancha y más alta que su columna y
   va desplazada, de modo que nunca coincide con el borde de la retícula. */
.bb-habout__img {
  position: absolute;
  top: -6%;
  left: -3%;
  width: 106%;
  height: 112%;
  object-fit: cover;
}

@media (min-width: 980px) {
  .bb-habout__grid { grid-template-columns: 1fr 1fr; }
  .bb-habout__col--text {
    padding: var(--bb-s7) var(--bb-s5) var(--bb-s7) var(--bb-gutter);
  }
  .bb-habout__textin { margin-inline: 0 auto; }
  .bb-habout__frame { aspect-ratio: 3 / 4; }
  /* La foto rebasa el borde derecho del viewport: va a sangre. */
  .bb-habout__col--media { margin-right: calc(var(--bb-s4) * -1); }
  /* A dos columnas el borde izquierdo de la foto ya está metido hacia
     dentro (mitad de la pantalla): aquí el desborde de la etiqueta sí
     cabe. Por debajo de 980 la columna llega al borde y NO se activa. */
  .bb-habout__col--media .bb-tag--bl { --bb-tag-out-x: 25%; }
}
@media (min-width: 1512px) {
  .bb-habout__col--text { padding-inline-start: max(var(--bb-gutter), calc((100vw - var(--bb-max)) / 2 + var(--bb-gutter))); }
}