/* ==========================================================================
   Botão flutuante de WhatsApp (abre/fecha um balão com chamada).
   ========================================================================== */

.zap {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* Botão redondo */
.zap__fab {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), var(--sombra-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.zap__fab:hover { transform: translateY(-2px) scale(1.04); }
.zap.is-aberto .zap__fab { background: var(--carvao); }
.zap__fechar-x { font-size: 1.9rem; line-height: 1; }

/* Balão */
.zap__balao {
  width: min(300px, 78vw);
  background: var(--branco);
  border-radius: 18px;
  box-shadow: var(--sombra-lg);
  border: 1px solid var(--linha);
  padding: 20px;
  position: relative;
  transform-origin: bottom right;
  animation: zap-entra 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes zap-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
.zap__x {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 1.5rem; line-height: 1;
  color: var(--cinza);
}
.zap__x:hover { color: var(--carvao); }

.zap__cabeca { display: flex; align-items: center; gap: 12px; }
.zap__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  flex: none;
}
.zap__cabeca strong { display: block; font-size: 0.98rem; }
.zap__cabeca small { color: #4c9a6a; font-size: 0.76rem; }

.zap__msg {
  font-size: 0.88rem;
  color: var(--carvao);
  margin: 14px 0 16px;
  line-height: 1.5;
}
.zap__cta {
  display: block;
  text-align: center;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 12px;
  border-radius: 50px;
  transition: background 0.2s ease;
}
.zap__cta:hover { background: #1eb958; }

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