/* ─── CONTAINER ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 860px;
}

/* ─── SECCIONES ─────────────────────────────────────────────── */
.section {
  padding: 100px 0;
}

.section--sm {
  padding: 64px 0;
}

.section--light {
  background: var(--light);
}

.section--dark {
  background: var(--dark);
  color: var(--white);
}

/* ─── GRILLAS ───────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }

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

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