/* ds-secao */
.ds-secao {
  padding-block: var(--ds-secao-y-mobile);
  background-color: var(--ds-cor-fundo);
  color: var(--ds-cor-texto);
}
@media (min-width: 768px) {
  .ds-secao { padding-block: var(--ds-secao-y-desktop); }
}
.ds-secao--compacta { padding-block: var(--ds-espaco-8); }
@media (min-width: 768px) {
  .ds-secao--compacta { padding-block: var(--ds-espaco-12); }
}
.ds-secao--superficie { background-color: var(--ds-cor-superficie); border-block: var(--ds-borda-largura) solid var(--ds-cor-borda); }
.ds-secao--centro { text-align: center; }
.ds-secao--centro p { margin-inline: auto; }

/* Fundo forte da marca: troca as cores de texto e de ação para as versões "sobre a marca".
   Tudo continua vindo do DS do projeto; a borda é a cor de texto sobre a marca com transparência. */
.ds-secao--marca {
  --ds-cor-fundo: var(--ds-cor-fundo-marca);
  --ds-cor-superficie: var(--ds-cor-fundo-marca);
  --ds-cor-texto: var(--ds-cor-sobre-marca);
  --ds-cor-titulo: var(--ds-cor-sobre-marca);
  --ds-cor-texto-suave: var(--ds-cor-sobre-marca);
  --ds-cor-texto-destaque: var(--ds-cor-sobre-marca-destaque);
  --ds-cor-destaque: var(--ds-cor-destaque-2);
  --ds-cor-sobre-destaque: var(--ds-cor-sobre-destaque-2);
  --ds-cor-borda: color-mix(in srgb, var(--ds-cor-sobre-marca) 25%, transparent);
  --ds-cor-foco: var(--ds-cor-sobre-marca);
  background-color: var(--ds-cor-fundo);
  color: var(--ds-cor-texto);
}

.ds-container--estreito { max-width: calc(var(--ds-largura-texto) + 2 * var(--ds-pagina-x-desktop)); }
.ds-secao p { max-width: var(--ds-largura-texto); }