/* =============================================================================
   Contato — o que existe só nesta página.
   =============================================================================
   Carrega depois de css/otimizer.css e obedece à regra do projeto: só classes
   NOVAS, prefixadas por .contato-. Nada aqui redefine seletor do padrão.

   Os cartões de canal são os `.pc-card .pc-contato` do padrão. Eram
   `.pc-card-vidro` numa das colunas de `.pc-form-grid`, ao lado do formulário —
   quando o formulário virou dobra de rodapé (blocos/apresentacao.php), a grade
   de duas colunas ficou órfã: os quatro cartões espremidos na metade esquerda e
   a metade direita vazia. E a dobra, sendo `.pc-final`, encostava escuro no
   escuro do fechamento logo abaixo.

   Agora a dobra é clara e os cartões ocupam a largura toda em 2×2, que devolve
   o ritmo padrão do site: topo escuro, conteúdo claro, fechamento escuro.
   ========================================================================== */

/* Grade de canais. <ul> e não <div>: são quatro canais de atendimento, e em
   lista o leitor de tela anuncia quantos são antes de ler o primeiro.
   Duas colunas, e não quatro: cada cartão tem um dado clicável e uma linha de
   apoio, e em quatro colunas o e-mail e o endereço quebram em três linhas. */
.contato-dados {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767.98px) {
  .contato-dados { grid-template-columns: 1fr; gap: 14px }
}

/* Layout do cartão de canal. Morava em css/otimizer.css como `.pc-contato`,
   que blocos/final.php usava nas outras rotas — quando o final.php virou a dobra
   de rodapé, esta página ficou sendo a única usuária, e a regra
   `.pc-contato a { color: var(--pc-mudo-claro) }` ainda supunha cartão de vidro
   sobre fundo escuro: no cartão branco o link sumia. Veio para cá, que é onde a
   regra do projeto manda o CSS de uma página só morar. */
.contato-canal { display: flex; align-items: flex-start; gap: 16px; padding: 22px }
/* O ícone, pelo elemento e não pela classe: `.pc-icone` não tem o prefixo desta
   página e o checar-padrao.php recusa. O cartão tem exatamente dois filhos —
   este <span> e o <div> do texto —, então o `> span` não tem como pegar outra
   coisa. */
.contato-canal > span { margin-bottom: 0 }
.contato-canal h3 { margin-bottom: 6px }
.contato-canal p { margin: 0; line-height: 1.6 }
@media (max-width: 767.98px) {
  .contato-canal { align-items: center }
}

/* Cada cartão tem um dado que se CLICA (o número, o e-mail, a conversa, o
   mapa) e uma linha que só explica. No padrão os dois saem no mesmo tom
   apagado, porque nas outras rotas este cartão é rodapé informativo — nesta
   página ele é a ação principal, e um telefone que não parece link é um
   telefone que ninguém toca no celular. Em tinta escura desde que a dobra
   deixou de ser `.pc-final`. */
.contato-valor {
  /* inline-block, não block: em bloco a borda atravessa a coluna inteira e o
     que devia ler como sublinhado de link vira um divisor no meio do cartão. */
  display: inline-block;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--pc-tinta);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 32, 39, .28);
  padding-bottom: 1px;
}
.contato-valor:hover,
.contato-valor:focus-visible { color: var(--pc-laranja); border-bottom-color: var(--pc-laranja) }

.contato-apoio { display: block; margin-top: 5px; font-size: .88rem; color: var(--pc-mudo) }