/* Tooltip "Hablemos" siempre visible, encima del botón flotante de WhatsApp (.whatsapp-btn). */

.whatsapp-float__tooltip {
    position: fixed;
    right: 22px;
    bottom: 114px; /* separado ~5px del botón (antes 105px, se superponía) */
    z-index: 1000;
    padding: 6px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    background: #373739;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    animation: whatsapp-tooltip-bob 2.2s ease-in-out infinite; /* acompaña el efecto del botón */
}

/* Flecha apuntando al botón. */
.whatsapp-float__tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 28px;
    border: 6px solid transparent;
    border-top-color: #373739;
}

/* Ondas sutiles en el botón flotante para llamar la atención. */
.whatsapp-btn {
    animation: whatsapp-pulse 2.2s ease-out infinite;
}

@keyframes whatsapp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Leve flotación del tooltip, en el mismo ritmo que la onda. */
@keyframes whatsapp-tooltip-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* Respeta a quienes reducen el movimiento (accesibilidad). */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-btn,
    .whatsapp-float__tooltip {
        animation: none;
    }
}