/* ============================================================
   GRID SYSTEM — contenedores, columnas y auto-layout
   (Base estructural; NO define estilos de .section aquí)
   ============================================================ */

/* ===== Contenedor global (usado en tu HTML) ===== */
.container-global {
  width: 100%;
  max-width: var(--container-width, 1200px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  display: block;
}

/* ===== Grid genérico ===== */
.grid {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}

/* ===== Auto-fit con columnas mínimas ===== */
.grid--auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--auto-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--auto-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ===== Columnas fijas ===== */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ===== Responsive breakpoints ===== */
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ===== Utilidades avanzadas ===== */
.grid--center { place-items: center; }
.grid--middle { align-items: center; }
.grid--justify-center { justify-content: center; }

.grid--no-rows { row-gap: 0; }
.grid--no-cols { column-gap: 0; }

/* ===== Layouts asimétricos ===== */
.grid--2-1 { grid-template-columns: 2fr 1fr; }
.grid--1-2 { grid-template-columns: 1fr 2fr; }

/* ===== Layout editorial ===== */
.grid--sidebar { grid-template-columns: 280px 1fr; }

@media (max-width: 880px) {
  .grid--sidebar { grid-template-columns: 1fr; }
}