/* ═══════════════════════════════════════════════════════════════════════════
   O BOTÃO DE CONTATO FLUTUANTE — um só, no canto

   O porquê está em templates/includes/_whatsapp_float.html. Aqui ficam três
   decisões de tela que não são óbvias.

   1. A COLUNA CRESCE PARA CIMA, E O BOTÃO NÃO SE MEXE
      O container está ancorado por `bottom`, e a ordem no HTML é
      [opções, botão]. Com `flex-direction: column` o botão fica embaixo, com a
      borda de baixo presa, e as opções crescem por cima dele — o alvo que o
      dedo acabou de tocar continua exatamente onde estava.

      A primeira versão usou `column-reverse`, achando que "reverse" era o que
      fazia crescer para cima. Faz o contrário: joga o primeiro filho do HTML
      para baixo, ou seja o BOTÃO para o topo da pilha. No screenshot ele subia
      e o menu descia — o defeito que o parágrafo acima diz para evitar,
      escrito logo abaixo do parágrafo.

   2. O RÓTULO VEM ANTES DO BOTÃO
      Cada opção é [texto][bolinha]. As bolinhas ficam alinhadas na mesma
      coluna do botão principal, e o texto sai para a esquerda — que é o lado
      onde há tela sobrando. Rótulo depois empurraria tudo para fora da borda
      direita.

      A bolinha se chama `cf-btn`, e não `cf-icone`, porque é isso que ela é:
      o alvo que o dedo acerta. O nome antigo fazia o teste de "cor no
      contorno" acusá-la de balão colorido — com razão, pelo nome. Balão
      leva cor só na borda; botão leva cor cheia, e essa é a exceção que o
      próprio dono abriu quando pediu a regra.

   3. NADA DE ANIMAR POR JAVASCRIPT
      Abrir e fechar é uma classe e uma transição de CSS. Esta mesma página já
      custou 94 mutações de DOM por segundo ao navegador do visitante; um menu
      de dois itens não vai reabrir essa conta.
   ═══════════════════════════════════════════════════════════════════════════ */

.contato-flutuante {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}

/* ── O botão ───────────────────────────────────────────────────────────── */
.cf-botao {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #22c55e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.38);
    transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s;
}
.cf-botao:hover,
.contato-flutuante.aberto .cf-botao {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(34, 197, 94, 0.45);
}

/* Com chat na página o botão deixa de ser link direto e vira o abridor do
   menu. A classe é posta pelo JS — sem ele, o que fica é um link de WhatsApp
   que funciona. */
.contato-flutuante.tem-menu .cf-botao { cursor: pointer; }

/* ── As opções ─────────────────────────────────────────────────────────── */
.cf-opcoes {
    /* Dentro do menu a ordem do HTML vale como está: o chat em cima e o
       WhatsApp logo acima do botão, que é o caminho mais usado e por isso o
       mais perto do dedo. */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.contato-flutuante.aberto .cf-opcoes {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* `hidden` mora na folha do NAVEGADOR e perde para o `display` de autor acima.
   Sem esta linha o menu nasce visível na primeira pintura, antes de o JS
   rodar — foi assim que a grade da home ficou sem esconder cartão nenhum. */
.cf-opcoes[hidden],
.cf-opcao[hidden] { display: none; }

.cf-opcao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}
.cf-rotulo {
    background: #ffffff;
    color: #3f3f42;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.34rem 0.7rem;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}
.cf-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    /* Os 6px alinham a bolinha de 44px com o centro da de 56px. */
    margin-right: 6px;
    transition: transform .2s;
}
.cf-opcao:hover .cf-btn { transform: scale(1.08); }
.cf-opcao--zap  .cf-btn { background: #22c55e; box-shadow: 0 4px 14px rgba(34,197,94,.35); }
.cf-opcao--chat .cf-btn { background: #095d77; box-shadow: 0 4px 14px rgba(9,93,119,.35); }

@media (max-width: 480px) {
    .contato-flutuante { bottom: 1.25rem; right: 1.25rem; }
}

/* Quem pediu menos movimento recebe menos movimento — o menu continua
   abrindo, só não desliza. */
@media (prefers-reduced-motion: reduce) {
    .cf-opcoes, .cf-btn, .cf-botao { transition: none; }
    .cf-opcoes { transform: none; }
}