/* ============================================================
   COMPONENTE: Boton flotante de WhatsApp
   ============================================================ */
.whatsapp-fab{
  position:fixed; bottom:18px; right:18px; z-index:300;
  display:inline-flex; align-items:center; gap:10px;
  background:#25d366; color:#fff; font-weight:700; font-size:.92rem;
  padding:14px 20px; border-radius:999px;
  border:none; appearance:none; cursor:pointer;
  box-shadow:0 10px 28px rgba(37, 211, 102, .4);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
@media (min-width:640px){ .whatsapp-fab{ bottom:22px; right:22px; } }
.whatsapp-fab:hover{ background:#1bb05f; transform:translateY(-3px); }

.fab-ring{
  position:absolute; inset:-4px; border-radius:999px;
  border:2px solid #25d366; opacity:.6;
  animation:ring 2.4s infinite; pointer-events:none;
}
@keyframes ring{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.35); opacity:0; }
}

/* En pantallas muy angostas se oculta el texto y queda solo el
   icono, para no invadir el contenido de la pagina. */
@media (max-width:480px){
  .whatsapp-fab span.fab-text{ display:none; }
  .whatsapp-fab{ padding:14px; }
}