/* =============================================================
   CONTACTO — o bloco de apoio e o botão fixo de WhatsApp

   Folha própria enquanto esta peça se refaz em paralelo. Funde-se
   na estilo.css quando assentar; vem depois dela no molde, mesma
   especificidade, e por isso ganha.

   O bloco base (fundo amarelo, botões, linha pequena) está na
   estilo.css. Aqui só está o que mudou quando os contactos
   passaram a ser lidos do config.js — e o alvo grande, que é o
   que faz a diferença para quem compra de telemóvel.
   ============================================================= */

/* -------------------------------------------------------------
   O ALVO TEM DE SER GRANDE.

   Quem compra aqui pode ter sessenta anos, estar de pé na rua e
   com o telemóvel numa mão só. Dois botões lado a lado num ecrã
   de 360px ficam com 150px cada, e falha-se o toque. Empilhados e
   à largura toda não se falha.
   ------------------------------------------------------------- */
@media (max-width: 560px) {
  .apoio__botoes { flex-direction: column; align-items: stretch; }
  .apoio__botoes .botao { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------
   A LINHA PEQUENA, agora com número, email e horário — e com
   qualquer um deles a poder faltar.

   Cada pedaço só entra se existir, e a barra só aparece entre
   dois que existam, portanto a linha nunca começa nem acaba numa
   barra solta. Falta só garantir que o email não estoura a linha
   num ecrã estreito: um endereço não tem espaços por onde partir.
   ------------------------------------------------------------- */
.apoio__meta { align-items: baseline; }
.apoio__meta span { overflow-wrap: anywhere; }
.apoio__meta .mono { font-size: 14px; letter-spacing: .01em; }

/* -------------------------------------------------------------
   O BOTÃO FIXO, quando existe.

   Deixou de nascer com `hidden`: se está no HTML é porque há
   número, e aparece sem precisar de JavaScript. A regra do
   `[hidden]` fica na estilo.css e não faz mal a ninguém.

   O que se acrescenta aqui é o alvo: 56px é o mínimo do desenho,
   e num telemóvel a área de toque agradece mais uns pixéis. E a
   sombra branca por baixo, para o círculo branco não desaparecer
   quando passa por cima de uma secção clara ao rolar.
   ------------------------------------------------------------- */
.wa-flutuante {
  -webkit-tap-highlight-color: transparent;
  border-color: rgba(18, 18, 18, .18);
}

@media (max-width: 560px) {
  .wa-flutuante { width: 60px; height: 60px; }
  .wa-flutuante svg { width: 29px; height: 29px; }
}

/* -------------------------------------------------------------
   RODAPÉ — a coluna dos contactos.

   Pode ficar só com a linha da moeda quando não houver número
   nem email. Sem os dois parágrafos de cima, a linha pequena
   ficava colada ao topo da coluna com uma margem que era para
   afastá-la deles.
   ------------------------------------------------------------- */
.rodape__contacto > .rodape__legal:first-child { margin-top: 0; }
.rodape__contacto .rodape__legal + .rodape__legal { margin-top: 6px; }