/* Botón flotante de WhatsApp. Se apoya en las variables de base.css
   (--cobalt-hover, --shadow, --radius) y respeta el ancho del contenido. */

.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: #1FAF54;
  color: #fff;
  font: 800 .95rem Manrope, sans-serif;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(31, 175, 84, .38);
  transition: transform .2s, background .2s, box-shadow .2s;
}

.whatsapp-fab:hover {
  background: #189846;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(31, 175, 84, .46);
}

.whatsapp-fab svg { display: block; width: 26px; height: 26px; flex: none; }

/* Texto solo en pantallas amplias; en celular queda el círculo con el icono. */
.whatsapp-fab .fab-text { display: inline; }

@media (max-width: 620px) {
  .whatsapp-fab {
    right: 14px;
    bottom: 84px; /* deja libre la barra fija «Pedir demostración» del celular */
    width: 54px;
    padding: 0;
    justify-content: center;
  }
  .whatsapp-fab .fab-text { display: none; }
  .whatsapp-fab svg { width: 28px; height: 28px; }
}