/* ============================================================
   BIM Forum Chile v13.6 — "Fit to screen"
   Objetivo: que cada sección tienda a caber en un viewport,
   compactando el ritmo vertical SIN reestructurar ni cortar
   contenido. Solo densidad: paddings, márgenes de encabezado,
   alturas de mosaico y gaps. Se carga al final = máxima prioridad.
   Escala progresiva: en pantallas altas (>=880px) se aprieta más.
   ============================================================ */

/* ── 1. Ritmo vertical general de secciones ─────────────────── */
.section            { padding: clamp(2.75rem, 4.5vw, 4.75rem) 0; }
.mosaic-section     { padding: clamp(2.25rem, 3.8vw, 4rem) 0; }
.manifesto          { padding: clamp(3rem, 5vw, 5rem) 0; }
.stats-bar          { padding: clamp(2.25rem, 3.8vw, 3.5rem) 0; }
.lineas             { padding: clamp(2.75rem, 4.5vw, 4.75rem) 0; }
.purpose__inner     { padding: clamp(2.75rem, 5vw, 5rem) 0; gap: clamp(2rem, 4vw, 3.5rem); }

/* Encabezados de sección: menos aire debajo del título */
.s-head             { margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }

/* ── 2. Bloques con altura propia: bajar su mínimo ──────────── */
.slice-stage        { min-height: min(88vh, 760px); }

/* Mosaico bento: celdas algo más bajas para no estirar la sección */
.mosaic             { gap: clamp(.65rem, 1.1vw, 1rem); }

/* Tríptico y bandas: recortar padding interior generoso */
.bs-feat,
.news-cta           { padding: clamp(2rem, 4vw, 3.25rem); }

/* ── 3. Page hero (cabeceras de páginas internas) ───────────── */
.pgh                { padding: clamp(3.75rem, 7vw, 6.5rem) 0 clamp(2rem, 4vw, 3rem); }
.pghero,
.pgbanner           { min-height: auto; }

/* ── 4. En pantallas ALTAS de escritorio, apretar un poco más ─ */
@media (min-width: 1024px) and (min-height: 900px) {
  .section          { padding: clamp(3rem, 4vw, 4.25rem) 0; }
  .manifesto        { padding: 4.25rem 0; }
  .purpose__inner   { padding: 4.25rem 0; }
}

/* ── 5. En móvil el objetivo es lo contrario: aire suficiente ─
   No comprimimos de más para no amontonar; solo un leve ajuste. */
@media (max-width: 640px) {
  .section          { padding: clamp(2.5rem, 9vw, 3.5rem) 0; }
  .s-head           { margin-bottom: 1.5rem; }
  .slice-stage      { min-height: min(80vh, 560px); }
}

/* ── 6. TABLET (portrait y landscape) ───────────────────────── */
@media (min-width: 641px) and (max-width: 1023px) {
  .section          { padding: clamp(2.5rem, 5vw, 4rem) 0; }
  .mosaic-section   { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
  .manifesto        { padding: clamp(2.75rem, 5.5vw, 4.25rem) 0; }
  .lineas           { padding: clamp(2.5rem, 5vw, 4rem) 0; }
  .stats-bar        { padding: clamp(2rem, 4vw, 3rem) 0; }
  .purpose__inner   { padding: clamp(2.5rem, 5vw, 4rem) 0; }
  .s-head           { margin-bottom: clamp(1.35rem, 3vw, 2rem); }
  .pgh              { padding: clamp(3.25rem, 6vw, 5rem) 0 clamp(1.75rem, 3.5vw, 2.5rem); }
}

/* ── 7. Pantallas de POCA ALTURA (móvil landscape, laptops bajas)
   El scroll vertical duele más aquí: apretamos por altura. ──── */
@media (max-height: 720px) and (min-width: 641px) {
  .section          { padding: clamp(2rem, 3.5vh, 3.25rem) 0; }
  .mosaic-section   { padding: clamp(1.75rem, 3vh, 2.75rem) 0; }
  .manifesto        { padding: clamp(2.25rem, 4vh, 3.5rem) 0; }
  .stats-bar        { padding: clamp(1.5rem, 2.5vh, 2.5rem) 0; }
  .lineas           { padding: clamp(2rem, 3.5vh, 3.25rem) 0; }
  .purpose__inner   { padding: clamp(2rem, 3.5vh, 3.25rem) 0; }
  .s-head           { margin-bottom: clamp(1.1rem, 2vh, 1.75rem); }
  .slice-stage      { min-height: min(94dvh, 640px); }
  .pgh              { padding: clamp(2.5rem, 5vh, 4rem) 0 clamp(1.5rem, 2.5vh, 2.25rem); }
}

/* Móvil landscape puro: el hero no debe empujar todo fuera */
@media (max-height: 500px) and (orientation: landscape) {
  .slice-stage      { min-height: min(96dvh, 420px); }
  .section          { padding: 1.75rem 0; }
  .s-head           { margin-bottom: 1rem; }
}

/* ── 8. Alturas reales en móvil (evita saltos por barra URL) ── */
@media (max-width: 640px) {
  .slice-stage      { min-height: min(80dvh, 560px); }
}