/* ============================================================
   contato.css — a página de contato.
   Tribo Marketing Médico · 14/09/2026

   Página de utilidade, e por isso quase não tem CSS: o cartão, a faixa, o
   cabeçalho de seção, o botão e o ritmo vêm todos do sistema. O que está
   aqui é só o arranjo dos três canais e a lista de dados.
   ============================================================ */

/* O topo é curto de propósito: ninguém vem a esta página para ler. */
.ct-topo{padding-bottom:0}
.ct-topo .section-header{margin-bottom:0}

/* Três canais lado a lado; no celular, um abaixo do outro. */
.ct-canais{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ct-canais > li{display:flex;flex-direction:column;align-items:flex-start}
.ct-canais p{flex:1 1 auto;margin-bottom:20px}
.ct-canais .btn{align-self:stretch}

/* A lista de dados: rótulo curto em cima, valor embaixo. Em duas colunas no
   desktop, porque são três pares curtos e a leitura fica mais rápida. */
.ct-dados{margin:0 0 28px;display:grid;grid-template-columns:auto 1fr;gap:14px 28px;align-items:baseline}
.ct-dados dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-olive-text);white-space:nowrap}
.ct-dados dd{margin:0;font-size:16px;line-height:1.6;color:var(--fg)}
.ct-dados a{color:var(--sl-olive-text);text-decoration:underline;text-underline-offset:3px}
.ct-dados a:hover{color:var(--fg-heading)}

.ct-onde{max-width:760px}

@media (max-width:860px){
  .ct-canais{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ct-dados{grid-template-columns:1fr;gap:4px 0}
  .ct-dados dt{margin-top:14px}
}