/*
  DreamEvent Design System — Layout
  ==================================
  Contenedores y secciones estándar. Ninguna landing debe definir
  anchos máximos ni paddings de sección propios.

  Bootstrap 4 sigue disponible para grids internos (.row/.col-*),
  estos contenedores sólo estandarizan el marco de página.
*/

.de-container {
  width: 100%;
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.de-container-sm {
  max-width: var(--container-sm-width);
}

.de-container-lg {
  max-width: var(--container-lg-width);
}

/* ─── Secciones ────────────────────────────────────────────────── */
.de-section {
  padding: var(--space-xl) 0;
}

.de-section-sm {
  padding: var(--space-md) 0;
}

.de-section-lg {
  padding: 6rem 0;
}

.de-section + .de-section {
  border-top: 1px solid var(--color-border);
}

.de-section-muted {
  background: var(--color-surface-2);
}

/* ─── Encabezado de sección ────────────────────────────────────── */
.de-section-head {
  max-width: 820px;
  margin-bottom: var(--space-md);
}

.de-section-head.is-centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}