/* ============================================================
   WhatsApp flutuante — aparece depois do hero
   ============================================================ */
.zap{
  position:fixed;
  right:clamp(16px,3vw,30px);
  bottom:clamp(16px,3vw,30px);
  z-index:var(--z-zap);
  display:flex;
  align-items:center;
  gap:12px;
  opacity:0;
  visibility:hidden;
  transform:translateY(24px) scale(.9);
  transition:opacity .6s var(--ease),transform .6s var(--ease-pulo),visibility .6s;
}
.zap.visivel{opacity:1;visibility:visible;transform:none}
/* com o menu ou o lightbox abertos o botão sai da frente */
body.travado .zap{opacity:0;visibility:hidden;transform:translateY(24px) scale(.9)}

.zap-texto{
  padding:12px 18px;
  white-space:nowrap;
  border-radius:var(--pilula);
  font-size:.85rem;
  font-weight:700;
  color:var(--tinta);
  background:var(--cartao);
  box-shadow:var(--sombra-m);
  opacity:0;
  transform:translateX(14px) scale(.9);
  transition:.45s var(--ease-pulo);
}
.zap:hover .zap-texto{opacity:1;transform:none}

.zap-botao{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:62px;height:62px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(140deg,#3ee07a,#1fb15c);
  box-shadow:0 14px 34px rgba(31,177,92,.42);
  transition:transform .5s var(--ease-pulo),box-shadow .5s var(--ease);
}
.zap-botao svg{
  position:relative;z-index:2;
  width:30px;height:30px;
  fill:currentColor;
}
.zap-botao::after{
  content:"";
  position:absolute;inset:0;
  border:2px solid rgba(62,224,122,.85);
  border-radius:50%;
  animation:pulso 2.6s var(--ease) infinite;
}
.zap:hover .zap-botao{
  transform:scale(1.1) rotate(-8deg);
  box-shadow:0 18px 44px rgba(31,177,92,.55);
}

@keyframes pulso{
  0%{transform:scale(1);opacity:.85}
  70%,100%{transform:scale(1.6);opacity:0}
}

@media(max-width:600px){
  .zap-texto{display:none}
  .zap-botao{width:56px;height:56px}
  .zap-botao svg{width:27px;height:27px}
}