/* ==================================================
SOMA LOTEAMENTOS
WHATSAPP FLUTUANTE
================================================== */


/* ==================================================
BOTÃO
================================================== */

.whatsapp-flutuante {

    position: fixed;

    right: 28px;

    bottom: 28px;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 76px;

    height: 76px;

    border-radius: 50%;

    background-color: #25D366;

    text-decoration: none;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* ==================================================
ÍCONE
================================================== */

.whatsapp-flutuante img {

    display: block;

    width: 60px;

    height: 60px;

    object-fit: contain;

}


/* ==================================================
HOVER
================================================== */

.whatsapp-flutuante:hover {

    transform: translateY(-4px) scale(1.05);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);

}


/* ==================================================
PULSAÇÃO
================================================== */

.whatsapp-flutuante:before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 76px;

    height: 76px;

    border-radius: 50%;

    border: 2px solid rgba(37, 211, 102, 0.45);

    transform: translate(-50%, -50%);

    animation: whatsapp-pulso 2.2s infinite;

    pointer-events: none;

}


@keyframes whatsapp-pulso {

    0% {

        width: 76px;

        height: 76px;

        opacity: 0.8;

    }


    70% {

        width: 104px;

        height: 104px;

        opacity: 0;

    }


    100% {

        width: 104px;

        height: 104px;

        opacity: 0;

    }

}


/* ==================================================
MOBILE
================================================== */

@media screen and (max-width: 600px) {

    .whatsapp-flutuante {

        right: 18px;

        bottom: 18px;

        width: 68px;

        height: 68px;

    }


    .whatsapp-flutuante img {

        width: 36px;

        height: 36px;

    }


    .whatsapp-flutuante:before {

        width: 68px;

        height: 68px;

    }


    @keyframes whatsapp-pulso {

        0% {

            width: 68px;

            height: 68px;

            opacity: 0.8;

        }


        70% {

            width: 94px;

            height: 94px;

            opacity: 0;

        }


        100% {

            width: 94px;

            height: 94px;

            opacity: 0;

        }

    }

}