/* ══════════════════════════════════════════════════════════════════════════
   secciones.css
   Estructura común de secciones y sus encabezados
   Procede de styles.css (secciones 7) del proyecto original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 7. SECCIONES Y ENCABEZADOS ═══════════════ */
.seccion { padding-block: 3.5rem; }
@media (min-width: 768px)  { .seccion { padding-block: 5rem; } }
@media (min-width: 1024px) { .seccion { padding-block: 6rem; } }

.seccion--alterna {
  background: var(--color-fondo-alterno);
  border-block: 1px solid var(--color-borde);
}

.encabezado-seccion { max-width: 46rem; }

.titulo-seccion {
  margin-top: 1rem;
  font-size: clamp(1.5rem, 4.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-tinta);
}

.bajada-seccion {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-texto-suave);
}