/* layout.css — contenedores y rejilla. */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}
.contenedor--lectura { max-width: calc(var(--medida) + var(--margen-lateral) * 2); }

/* El aire entre secciones es parte de la propuesta: 96 en teléfono, 128 en escritorio */
.seccion { padding-block: var(--esp-9); }
.seccion--bruma { background: var(--kv-bruma); }

@media (min-width: 900px) {
  .contenedor { padding-inline: var(--esp-6); }
  .seccion { padding-block: var(--esp-10); }
}