/* Botão flutuante de WhatsApp + bloco CTA reutilizável nas páginas institucionais.

   Correção de auditoria UX/UI (achado do Retalhador, 2026-07):
   1) O botão fixo sobrepunha conteúdo real no mobile (390px) em pelo menos
      4 páginas (Home, Sobre, Terapias, Produto) — cobria a última linha de
      parágrafo, um item de lista e o copyright do rodapé. Correção: no
      mobile o botão diminui e a página ganha uma reserva de espaço em
      branco no final (ver regra `body{ padding-bottom }` abaixo), grande
      o bastante para o botão nunca ficar em cima do último elemento real
      da página, em nenhuma posição de rolagem.
   2) O texto curvo ao redor do círculo (técnica visual datada, vinda da
      imagem assets/img/whatsapp-flutuante.svg usada como background)
      destoava da tipografia serifada elegante do resto do site. Correção:
      o botão virou um círculo limpo na cor da marca (--cor-mata), com o
      ícone de WhatsApp inline (eqms_icon('whatsapp'), já usado em outros
      pontos do footer.php), sem nenhum texto ao redor. */

.whatsapp-flutuante{
    position: fixed;
    right: var(--espaco-md);
    bottom: var(--espaco-md);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-mata);
    border-radius: var(--raio-pill);
    box-shadow: var(--sombra-md);
    z-index: 90;
    animation: whatsapp-pulso 2s infinite;
}
.whatsapp-flutuante svg{
    width: 32px;
    height: 32px;
    fill: var(--cor-branco);
}
@keyframes whatsapp-pulso{
    50%{ transform: scale(1.08); }
}

/* Tablet e mobile (<=900px — cobre tanto o 768px quanto o 390px testados na
   auditoria): botão menor, mais próximo da borda, e reserva de espaço em
   branco no fim da página.

   Correção 2ª rodada (achado do validador visual): a 1ª correção só reduzia
   o botão abaixo de 600px. Em 768px ele continuava do tamanho de desktop
   (64px) e sobrepunha texto/setas de accordion em várias posições de
   rolagem normais (não só no fim da página) em Sobre, Terapias, Loja e
   Produto. A largura do breakpoint subiu pra 900px e o botão ficou ainda
   menor (48px), reduzindo bastante a área que ele ocupa. Isso não elimina
   100% qualquer sobreposição pontual com texto corrido em toda posição de
   rolagem possível (nenhum botão fixo consegue isso só com CSS, sem lógica
   de colisão em JS) — o que ficou garantido é que ele nunca mais cobre
   nenhum elemento CLICÁVEL (ver reserva de espaço na seta do accordion em
   institutional.css) e nunca mais sobrepõe o rodapé.

   A reserva usa `body` (não `#site-footer`) de propósito: `#site-footer`
   já recebe seu próprio padding-bottom em header-footer.css, que carrega
   DEPOIS deste arquivo (ver ordem de dependência em functions.php) e por
   isso venceria a cascata se eu tentasse sobrescrever a mesma propriedade
   ali. `body` não é tocado em nenhum outro arquivo do tema, então a regra
   abaixo é segura e não depende da ordem de carregamento.

   Matemática da reserva: botão 48px + 12px de respiro da borda = 60px
   ocupados pelo botão a partir do fim da tela; somando 40px de folga
   extra o total fica 100px — suficiente para sempre sobrar uma faixa
   livre e visível acima do botão, mesmo na rolagem máxima da página. */
@media (max-width: 900px){
    .whatsapp-flutuante{
        width: 48px;
        height: 48px;
        right: var(--espaco-sm);
        bottom: var(--espaco-sm);
    }
    .whatsapp-flutuante svg{
        width: 24px;
        height: 24px;
    }
    body{
        padding-bottom: 100px;
    }
}

.cta-whatsapp{
    background: var(--cor-mata);
    color: var(--cor-branco);
    border-radius: var(--raio-lg);
    padding: var(--espaco-xl);
    text-align: center;
}
.cta-whatsapp h3{
    color: var(--cor-branco);
    margin-bottom: var(--espaco-sm);
}
.cta-whatsapp p{
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--espaco-lg);
}