/* =============================================================================
   LOCO BLOW · RETÍCULA
   Composición de cartel: una cosa grande, mucho aire, lo demás pequeño y
   abajo. La página es una columna ancha con los bloques colgando del mismo
   margen, y la asimetría sale de las proporciones de las columnas.
   ========================================================================== */

.page {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Lo que gira en 3D (las fotos de las opiniones) no ensancha la página.
     `clip` y no `hidden`: no crea un contenedor de scroll, así que lo
     pegajoso (la barra de estilos) sigue pegándose.                       */
  overflow-x: clip;
}

/* --- RITMO VERTICAL -------------------------------------------------------- */
/* Un único ritmo en toda la web, y siempre más aire encima de un titular que
   debajo: el espacio pertenece a la sección que empieza.                     */

.band { padding-block: var(--s8); }
.band--tight { padding-block: var(--s7); }
.band--wide  { padding-block: var(--s10); }

@media (min-width: 60rem) {
  .band { padding-block: var(--s10); }
  .band--tight { padding-block: var(--s8); }
  .band--wide  { padding-block: var(--s11); }
}

/* Entre dos bandas del mismo suelo, un filete de lado a lado del contenido. */
.band + .band { border-top: var(--hair) solid var(--filete); }

.stack > * + * { margin-top: var(--s4); }
.stack--tight > * + * { margin-top: var(--s2); }
.stack--loose > * + * { margin-top: var(--s6); }

/* --- SANGRE COMPLETA ------------------------------------------------------- */
/* Para que una imagen llegue al borde del viewport dentro de .page.          */
.bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- COLUMNAS ASIMÉTRICAS -------------------------------------------------- */

.cols {
  display: grid;
  gap: var(--s6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .cols--2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Proporciones rotas a propósito: nada de tres columnas iguales.           */
  .cols--73 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .cols--37 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
  .cols--58 { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); }
  .cols--85 { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
}

/* --- UTILIDADES MÍNIMAS ---------------------------------------------------- */

.measure  { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }
.nowrap   { white-space: nowrap; }

@media (min-width: 60rem) { .only-mobile { display: none !important; } }
@media (max-width: 59.999rem) { .only-desk { display: none !important; } }

/* --- RESERVA DE ALTURA ------------------------------------------------------ */
/* El texto lo inyecta el script desde content.js, así que el HTML de partida
   llega con los huecos vacíos (hasta que tools/sync-contenido.py lo vuelca).
   Si no se reserva su altura, al rellenarse empujan hacia abajo todo lo que
   tienen debajo: eso es un desplazamiento de maquetación.

   Las alturas no son números a ojo: salen de la propia escala tipográfica
   (tamaño × interlineado × líneas), así que si cambian los tokens la reserva
   se ajusta sola. `min-height` y no `height`: si el texto crece, crece la caja. */

.rsv-d1   { min-height: calc(var(--fs-d1) * var(--lh-d1) * 2); }
.rsv-d2   { min-height: calc(var(--fs-d2) * var(--lh-d2)); }
.rsv-d2-2 { min-height: calc(var(--fs-d2) * var(--lh-d2) * 2); }
.rsv-d3   { min-height: calc(var(--fs-d3) * var(--lh-d3)); }
.rsv-lead-2 { min-height: calc(var(--fs-lead) * var(--lh-lead) * 2); }
.rsv-lead-3 { min-height: calc(var(--fs-lead) * var(--lh-lead) * 3); }
.rsv-body-3 { min-height: calc(var(--fs-body) * var(--lh-body) * 3); }