/* ==========================================================
   CONTATO (#contato)
   Claro, depois da faixa com a foto aérea: o texto e o botão de um lado, as sedes do outro.
   ========================================================== */
.contato-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: end; }
.contato-textos { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-3); }
.contato-textos h2 { max-width: 13.1em; }  /* os 20ch da Notch, em em */
.contato-textos p { max-width: 46ch; color: var(--texto-suave); }
.contato-textos .botao { margin-top: var(--espaco-3); }
.escritorios { display: flex; flex-direction: column; gap: var(--espaco-5); padding-left: var(--espaco-5); border-left: 1px solid var(--linha); }
.escritorios h3 { font-size: 20px; margin-bottom: var(--espaco-2); }
.escritorios address { font-style: normal; white-space: pre-line; font-size: var(--texto-apoio); color: var(--texto-suave); }
.escritorios p { margin-top: 4px; font-size: var(--texto-apoio); }
.escritorios a { display: inline-block; padding: 10px 0; text-decoration: none; }
.escritorios a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .contato-grade { grid-template-columns: minmax(0, 1fr); }
  .escritorios { padding-left: 0; border-left: 0; padding-top: var(--espaco-5); border-top: 1px solid var(--linha); }
}