.whatsapp-widget{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:99999;
}


/* BOTON */

.whatsapp-button{
    width:65px;
    height:65px;
    border:none;
    border-radius:50%;
    background:#25D366;
    color:white;
    font-size:35px;
    cursor:pointer;
    box-shadow:0 5px 20px rgba(0,0,0,.25);
    position:relative;
    animation: whatsappPulse 2s infinite;

}


.whatsapp-button span{
    position:absolute;
    width:12px;
    height:12px;
    background:red;
    border-radius:50%;
    right:3px;
    top:3px;
}



/* CAJA CHAT */
.whatsapp-box{
    width:360px;
    height:430px;
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.25);
    margin-bottom:20px;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px) scale(.95);
    transition:all .35s ease;
}
.whatsapp-box.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}


/* HEADER */

.whatsapp-header{

    height:95px;

    background:#008f7a;

    color:white;

    display:flex;

    align-items:center;

    padding:20px;

    gap:15px;

}


.whatsapp-header h4{

    margin:0;

    font-size:18px;

}


.whatsapp-header p{

    margin:5px 0;

    font-size:14px;

}



.whatsapp-header button{

    margin-left:auto;

    background:none;

    border:0;

    color:white;

    font-size:25px;

    cursor:pointer;

}



/* FOTO */

.avatar{

    position:relative;

}


.avatar img{

    width:55px;
    height:55px;

    border-radius:50%;

    object-fit:cover;

}


.avatar span{

    position:absolute;

    right:2px;

    bottom:5px;

    width:12px;
    height:12px;

    background:#25D366;

    border-radius:50%;

}



/* CUERPO */

.whatsapp-body{
    height:250px;
    padding:30px;
    background:#efeae2;

}


.mensaje{

    background:white;
    padding:18px;
    border-radius:0 15px 15px 15px;
    width:220px;
    font-size:15px;

}



/* BOTON CHAT */

.whatsapp-footer{
    padding:20px;
    text-align:center;

}


.whatsapp-footer a{
    display:block;
    background:#25D366;
    color:white;
    padding:15px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;

}



/* Animación */

@keyframes aparecer{

from{
    transform:translateY(30px);
    opacity:0;
}

to{
    transform:translateY(0);
    opacity:1;
}

}

@keyframes whatsappPulse{

    0%{
        transform:scale(1);
        box-shadow:0 5px 20px rgba(0,0,0,.25);
    }

    50%{
        transform:scale(1.10);
        box-shadow:0 8px 30px rgba(37,211,102,.55);
    }

    100%{
        transform:scale(1);
        box-shadow:0 5px 20px rgba(0,0,0,.25);
    }

}