/* Configuração comum */
.btn-float {
    position: fixed;
    right: 30px;
    width: 45px;
    height: 45px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0,0,0,.3);
}

/* WhatsApp */
.btn-whatsapp{
    bottom:20px;
    background:#25D366;
}

/* Instagram */
.btn-instagram{
    bottom:100px; /* fica acima do WhatsApp */
    background: radial-gradient(
        circle at 30% 110%,
        #fdf497 0%,
        #fdf497 8%,
        #fd5949 35%,
        #d6249f 55%,
        #285AEB 90%
    );
}

/* Animação */
.btn-float::before,
.btn-float::after{
    content:"";
    position:absolute;
    inset:-20px;
    border:1px solid var(--cor-pulso);
    border-radius:50%;
    animation:pulsa 1.5s linear infinite;
    opacity:0;
}

.btn-whatsapp{
    --cor-pulso:#25D366;
}

.btn-instagram{
    --cor-pulso:#E1306C;
}

.btn-float::after{
    animation-delay:.5s;
}

@keyframes pulsa{
    0%{transform:scale(.5);opacity:0;}
    50%{opacity:1;}
    100%{transform:scale(1.2);opacity:0;}
}

/* Celular */
@media (max-width:600px){
    .btn-float{
        width:45px;
        height:45px;
        font-size:1.2em;
        right:15px;
    }

    .btn-whatsapp{bottom:15px;}
    .btn-instagram{bottom:70px;}
}