/* ============================================================================
   BIOMELISA · LAYOUT.CSS · Capa de Layout (sistema de composición)
   Fuente de verdad: especificaciones/LAYOUT-SYSTEM_Biomelisa.md (DEFINITIVO).
   "No diseñamos páginas. Diseñamos una experiencia de lectura."
   Se carga tras variables.css. Solo tokens (var(--…)); nunca valores hardcodeados.
   Contiene: contenedores · sistema de bandas · ritmo vertical responsive · respiración.
   ============================================================================ */

/* ── CONTENEDORES (3, y solo 3) ──────────────────────────────────────────────
   Lectura 750 · Amplio 1200 · A sangre 100% (bandas alignfull de Gutenberg). */
.bm-inner        { max-width: var(--content-text); margin: 0 auto; padding: 0 var(--content-padding); }  /* 750 · columna de lectura */
.bm-inner--wide  { max-width: var(--content-max); }                                                       /* 1200 · rejillas/galerías */

/* Margen horizontal · escalón propio de tablet (no hereda escritorio) */
@media (min-width: 768px) and (max-width: 1024px) {
  .bm-inner { padding: 0 var(--content-padding-tablet); }   /* 32px */
}

/* ── SISTEMA DE BANDAS ───────────────────────────────────────────────────────
   Toda sección es una banda de color a todo el ancho (alignfull) con su
   contenedor centrado dentro. REGLA: nunca dos bandas del mismo color seguidas. */
.bm-band { width: 100%; padding: var(--band-pad-mob) 0; }                 /* móvil · 80  */
@media (min-width: 768px)  { .bm-band { padding: var(--band-pad-tablet) 0; } }   /* tablet · 96  */
@media (min-width: 1025px) { .bm-band { padding: var(--band-pad-desk) 0; } }     /* escritorio · 120 */

/* Paleta de bandas (crema = base) */
.bm-band--crema   { background: var(--color-blanco-roto); }   /* #F5EFE6 · base */
.bm-band--beige   { background: var(--color-fondo-beige); }   /* #FAF6F1 */
.bm-band--agua    { background: var(--color-fondo-verde); }   /* #F0F6F3 */
.bm-band--aguaMed { background: var(--color-verde-agua); }    /* #D0E4DA */
.bm-band--luz     { background: #EAF4EE; }                    /* luz / renacimiento */
.bm-band--oscuro  { background: #245C4E; color: var(--color-blanco-roto); }   /* cierre / impacto */
.bm-band--oscuro :where(h1, h2, h3, h4, p, em, strong, a) { color: var(--color-blanco-roto); }

/* ── RITMO VERTICAL · respiración intencionada (momentos ④ y ⑤) ─────────────
   La pausa vale lo mismo que el aire de banda: 80 → 96 → 120. */
.bm-pause    { height: var(--band-pad-mob); }
@media (min-width: 768px)  { .bm-pause { height: var(--band-pad-tablet); } }
@media (min-width: 1025px) { .bm-pause { height: var(--band-pad-desk); } }
.bm-silencio { text-align: center; }

/* ── MEDIA A SANGRE (momento de impacto · Escena / vídeo / imagen inmersiva) ── */
.bm-media-full { position: relative; width: 100%; overflow: hidden; }
.bm-media-full img,
.bm-media-full video,
.bm-media-full .bm-ph { width: 100%; min-height: 440px; object-fit: cover; border-radius: 0; display: block; }

/* ── IMÁGENES RESPONSIVE (base segura) ───────────────────────────────────────
   Toda imagen/vídeo nunca desborda su contenedor. */
.bm-band img, .bm-band video,
.bm-inner img, .bm-inner video { max-width: 100%; height: auto; }