/* Floating WhatsApp button */

.zw-whatsapp-btn {
    position: fixed;
    bottom: 110px;
    right: 40px;
    width: 55px;
    height: 55px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    opacity: 0;
    transform: translateY(15px);
    animation: zw-wa-entrance 0.4s ease 1.5s forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes zw-wa-entrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zw-whatsapp-btn svg {
    width: 30px;
    height: 30px;
    fill: #f0f0f0;
}

.zw-whatsapp-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.55);
}

/* Tooltip */
.zw-whatsapp-btn::before {
    content: '¡Escríbenos!';
    position: absolute;
    right: calc(100% + 12px);
    background: #1D1D1B;
    color: #fff;
    font-family: var(--font-primary, 'Nunito', sans-serif);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.zw-whatsapp-btn::after {
    content: '';
    position: absolute;
    right: calc(100% + 6px);
    border: 6px solid transparent;
    border-left-color: #1D1D1B;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.zw-whatsapp-btn:hover::before,
.zw-whatsapp-btn:hover::after {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .zw-whatsapp-btn {
        bottom: 90px;
        right: 25px;
        width: 50px;
        height: 50px;
    }

    .zw-whatsapp-btn svg {
        width: 26px;
        height: 26px;
    }

    .zw-whatsapp-btn::before,
    .zw-whatsapp-btn::after {
        display: none;
    }
}