/* Contenedor principal */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Secciones */
.section           { padding-block: var(--s16); }
.section--sm       { padding-block: var(--s10); }
.section--lg       { padding-block: var(--s24); }
.section--alt      { background-color: var(--c-surface-2); }

.section__header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--s12);
}

.section__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s3);
}

.section__title { margin-bottom: var(--s4); }

.section__desc {
  color: var(--c-text-3);
  font-size: 1.0625rem;
  max-width: 60ch;
  margin-inline: auto;
}

/* Grillas */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--s6);
}

/* Divisor visual */
.divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin-block: var(--s8);
}