/* ---------- contato ----------
   Último cartão da home e das páginas de serviço, na cor de destaque: uma frase, o link para o
   agente de atendimento e, embaixo, o rodapé (footer.css). Na home ele é a seção de contato, com
   rótulo e uma linha de texto. O link usa a pílula grande (.more__link, em base.css). */
.scene.contact { min-height: var(--contato-altura); }
.contact__inner {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-6);
  min-height: var(--contato-altura);
  padding: calc(var(--header-altura) + var(--space-5)) calc(var(--margem-conteudo) - var(--card-inset)) var(--space-8);
}
.contact__title {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-titulo-g);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}
/* a frase é o título do cartão; o link fica um degrau abaixo dela */
.contact .more__link { font-size: var(--fs-titulo-p); }
.contact .more__link { width: 100%; }
.contact__text {
  max-width: 36ch;
  font-size: var(--fs-case-texto);
  line-height: 1.4;
  text-wrap: pretty;
}