/*
 * Balão flutuante do WhatsApp.
 *
 * O verde é a cor da marca do WhatsApp e é intencional: o reconhecimento
 * imediato é justamente o que faz o botão funcionar. Fica como token para não
 * furar a regra do projeto de cor literal fora do arquivo de variáveis.
 */
.whatsapp-float {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
}
.whatsapp-float[hidden] { display: none; }

/* O balão se apoia na altura real do aviso de cookies, publicada pelo JS. Assim
   ele continua visível na primeira visita, que é quando mais importa, em vez de
   ficar escondido atrás do aviso ou por cima dos botões dele. */
:root.com-aviso-cookies .whatsapp-float {
  bottom: calc(1.15rem + var(--altura-aviso, 0px) + .75rem);
}

.whatsapp-float__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem .7rem .8rem;
  border-radius: var(--radius-pill);
  background: var(--whatsapp-color);
  color: var(--on-dark);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  box-shadow: var(--shadow-whatsapp);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.whatsapp-float__link:hover {
  background: var(--whatsapp-hover);
  color: var(--on-dark);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-whatsapp-forte);
}
.whatsapp-float__icone { width: 1.55rem; height: 1.55rem; flex-shrink: 0; }

/*
 * Pulso discreto. Ele é feito com box-shadow no próprio botão, e não com um
 * círculo sobreposto: assim o halo acompanha a FORMA do elemento -- pílula no
 * computador, círculo no celular. A primeira versão usava um círculo fixo à
 * esquerda, que pulsava fora do balão retangular e ficava descasado.
 */
.whatsapp-float__link { position: relative; animation: whatsapp-pulso 2.8s ease-out infinite; }
.whatsapp-float__link:hover { animation: none; }

@keyframes whatsapp-pulso {
  0%   { box-shadow: var(--shadow-whatsapp), 0 0 0 0 var(--whatsapp-halo); }
  65%  { box-shadow: var(--shadow-whatsapp), 0 0 0 .85rem transparent; }
  100% { box-shadow: var(--shadow-whatsapp), 0 0 0 0 transparent; }
}

/* X sem moldura, acima do balão e à direita. Fica sempre visível: escondê-lo
   atrás do hover não funciona em tela sensível ao toque, onde não existe hover. */
.whatsapp-float__fechar {
  /* O X desenhado é pequeno, mas a área que responde ao toque tem 2,5rem (40px):
     abaixo disso o dedo erra. O padding cresce a área sem engordar o ícone. */
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  margin-right: -.35rem;
  /* Nada de margem negativa embaixo: a área de toque de 40px invadiria o topo do
     balão e um toque no canto acionaria "fechar" em vez de "conversar". */
  margin-bottom: -.15rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--x-fechar);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
  /* Visualmente acima do balão, mas DEPOIS dele no HTML: assim quem navega por
     teclado ou leitor de tela encontra primeiro a ação principal, que é falar
     com a empresa, e só depois a de dispensar. */
  order: -1;
}
.whatsapp-float__fechar:hover { color: var(--x-fechar-hover); transform: scale(1.15); }
.whatsapp-float__fechar svg { width: .9rem; height: .9rem; }

/* No celular o rótulo sai e fica só o ícone, para não tapar o conteúdo */
@media (max-width: 575.98px) {
  .whatsapp-float { right: .85rem; bottom: .85rem; }
  .whatsapp-float__texto { display: none; }
  .whatsapp-float__link { padding: .8rem; border-radius: 50%; }
  .whatsapp-float__link::before { left: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float__link { animation: none; }
}