.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s3);
}

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

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
}

/* Flex utils */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }

/* Seccions */
.section {
  padding-block: var(--s10);
}

.section--sm {
  padding-block: var(--s6);
}

.section--dark {
  background: var(--navy-dark);
  color: #fff;
}

.section--accent {
  background: var(--navy);
  color: #fff;
}

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

.section-title {
  font-size: var(--text-3xl);
  color: var(--navy);
  margin-bottom: var(--s2);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: var(--s6);
  max-width: 60ch;
}

.section-header {
  margin-bottom: var(--s6);
}

/* Responsive */
@media (max-width: 900px) {
  .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; }

  .section { padding-block: var(--s6); }
  html { font-size: 16px; }
}