/* ==========================================================================
   Layout — contêiner, seções e grades reutilizadas
   As grades usam auto-fit, portanto respondem à largura sem media queries.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--pad-secao-x);
}

/* Seção ------------------------------------------------------------- */
.secao {
  padding-block: var(--pad-secao-y);
}

.secao--estreita {
  padding-block: var(--pad-secao-y-estreita);
}

.secao--creme {
  background: var(--superficie-pagina-alt);
  border-top: var(--traco-fino) solid var(--borda-fina);
  border-bottom: var(--traco-fino) solid var(--borda-fina);
}

.secao--escura {
  background: var(--superficie-inversa);
  color: var(--texto-sobre-escuro);
}

/* Grades ------------------------------------------------------------ */
.grade-duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-colunas-curto);
  align-items: start;
}

.grade-duas-colunas--retrato,
.grade-duas-colunas--contato {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap-colunas);
}

.grade-cartoes {
  display: grid;
  gap: var(--gutter-cartao);
}

.grade-cartoes--publico {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grade-cartoes--quatro {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--espaco-11);
}

.grade-cartoes--servicos {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: var(--espaco-11);
}

.grade-cartoes--conteudos,
.grade-cartoes--depoimentos {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: var(--espaco-11);
}

.grade-etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 36px);
  margin-top: var(--espaco-11);
}

.grade-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--espaco-5);
  margin-top: var(--espaco-9);
}

.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--espaco-5);
}

/* Blocos de texto ---------------------------------------------------- */
.texto-corrido {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
  margin-top: var(--espaco-7);
  max-width: var(--medida-leitura);
}

.bloco-introducao {
  max-width: var(--medida-leitura-curta);
}

.bloco-acao {
  margin-top: var(--espaco-9);
}

.chamada-intermediaria {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-7);
  margin-top: var(--espaco-11);
}