/* Quem somos (template-sobre.php). Título e prosa não têm regra aqui: a página usa a MESMA marcação de
   page.php (.pagina-corpo, .pagina-cabecalho, .prosa), igual à política de privacidade, então herda largura,
   tamanho de título e espaçamento sem copiar valor nenhum. O que é só desta página é o bloco de contato. */

.fas-sobre { display: grid; gap: var(--esp-transicao-secao); --tom-secao: var(--tom-ciano); }

/* ── Contato (#contato): e-mail, redes e a hashtag. Alvo dos links do rodapé. ── */
.fas-sobre__convite {
  /* O rodapé manda para cá pela âncora: sem esta margem o título para debaixo do cabeçalho fixo.
     Mesmo cálculo das seções da home (.fas-secao). */
  scroll-margin-top: calc(var(--altura-topbar) + var(--altura-header-real, var(--altura-header)) + var(--esp-4));
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  /* Largura do conteúdo, a mesma do painel da rádio que aparece logo abaixo: duas caixas empilhadas com
     larguras diferentes brigavam no fim da página. O texto lá dentro continua estreito, que é medida de
     leitura, não de caixa. */
  width: 100%;
  /* Recuo lateral igual ao do painel da rádio, que fecha a página logo abaixo: as duas caixas têm a mesma
     largura, então margens internas diferentes deixavam uma mais apertada que a outra sem motivo. A rádio
     troca de --esp-4 para --esp-5 em 48rem (cartoes.css); o degrau abaixo repete essa virada. */
  padding: var(--esp-8) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  text-align: center;
}
.fas-sobre__convite h2 { margin: 0; font-size: var(--texto-titulo-3); font-weight: var(--peso-forte); }
/* Medida de leitura para a frase longa: na largura da caixa ela virava uma linha só de ponta a ponta, e o
   olho perdia o começo da seguinte. 42rem quebra em duas linhas equilibradas no desktop e não trava nada
   no celular, onde a caixa já é mais estreita que isso. */
.fas-sobre__convite p { margin: 0; max-width: 42rem; color: var(--cor-texto-suave); font-size: var(--texto-mini); line-height: var(--altura-corpo); text-wrap: pretty; }
/* O botão é o .botao do tema (gradiente de ação), e não um gradiente próprio: é a ação principal do bloco,
   e os ícones vazados logo abaixo são as alternativas. Só o nowrap do padrão sai, que endereço de e-mail
   é longo e em 320px ele estouraria a caixa. */
.fas-sobre__email { white-space: normal; overflow-wrap: anywhere; text-align: center; }
/* Os canais numa fileira só a partir de 48rem: o botão do e-mail e os ícones são alternativas da mesma
   escolha, e empilhados viravam dois passos onde há um. No celular empilham, que lado a lado o botão
   espremeria os ícones contra a borda. */
.fas-sobre__canais { display: grid; justify-items: center; gap: var(--esp-3); margin-top: var(--esp-2); }
@media (min-width: 48rem) {
  .fas-sobre__canais { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-5); }
}
.fas-sobre__redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3); }
.fas-sobre__tag { margin: 0; }
.fas-sobre__tag strong { color: var(--cor-acento); font-weight: var(--peso-forte); }
.fas-sobre__rede {
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  color: var(--cor-texto-suave);
  transition: color var(--dur-media) var(--ease-padrao), border-color var(--dur-media) var(--ease-padrao);
}
.fas-sobre__rede:hover, .fas-sobre__rede:focus-visible { color: var(--cor-acento); border-color: var(--cor-acento); }

@media (min-width: 48rem) {
  .fas-sobre__convite { padding-inline: var(--esp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .fas-sobre__rede { transition: none; }
}