/* Correção da faixa de etapas da seção Contato.
   As etapas usam texto dourado (#e8bb72) e claro (#f7f3e8), pensados para fundo
   escuro, mas o bloco não tem fundo próprio: no desktop ele fica em cima da
   divisa da onda (metade no creme #f3eee3, metade no verde) e o título some.
   Abaixo de 1100px a onda é escondida e o bloco fica inteiro sobre o creme.

   A correção dá ao bloco o mesmo cartão verde que o banner já usa (#12352a),
   unindo os dois num único painel arredondado. */

.contato__steps {
  position: relative;
  z-index: 1;
  background: #12352a;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 34px 26px 18px;
  margin-bottom: 0;
}

.contato__banner {
  position: relative;
  z-index: 1;
  background: #12352a;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-top: none;
  border-radius: 0 0 22px 22px;
  padding: 12px 26px 26px;
}

/* Os círculos usavam preto translúcido, que sobre o creme virava bege.
   Sobre o verde sólido, um leve clareado dá o contraste certo. */
.contato__steps .contato__step-circle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 175, 55, 0.55);
}

/* Um pouco mais de brilho no texto de apoio, agora sempre sobre verde. */
.contato__steps .contato__step-description {
  color: rgba(247, 243, 232, 0.86);
}

/* A linha pontilhada entre os círculos acompanha o novo padding. */
.contato__steps .contato__step-connector {
  top: 43px;
}

@media (max-width: 1100px) {
  .contato__steps {
    padding: 32px 22px 12px;
  }
  .contato__banner {
    padding: 10px 24px 26px;
  }
}

@media (max-width: 640px) {
  .contato__steps {
    padding: 26px 18px 10px;
  }
  .contato__steps .contato__step-description {
    max-width: none;
  }
}