.whatsapp-container{
  position: fixed;
  right: 16px;
  bottom: 16px; /* si lo prefieres cerca del header, usa top:16px; bottom:auto; */
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none; /* permite que solo los hijos reciban click */
}

.whatsapp-toggle{
  pointer-events: auto;
  border: none;
  border-radius: 9999px;
  width: 56px;
  height: 56px;
  background: #25D366;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-toggle:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.whatsapp-toggle img{ width: 28px; height: 28px; border: none; }

.whatsapp-options{
  pointer-events: auto;
  display: none;        /* toggled by JS */
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.whatsapp-container.open .whatsapp-options{ display: flex; }

.whatsapp-option{
  font: 500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  padding: 10px 14px;
  border-radius: 9999px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  opacity: .98;
}
.whatsapp-option:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.22); opacity: 1; }

.whatsapp-option.venta{ background: #128C7E; }     /* verde más oscuro */
.whatsapp-option.postventa{ background: #34B7F1; } /* azul whatsapp business */

@media (max-width: 480px){
  .whatsapp-container{ right: 12px; bottom: 12px; gap: 6px; }
  .whatsapp-toggle{ width: 52px; height: 52px; }
  .whatsapp-option{ font-size: 13px; padding: 9px 12px; }
}