/* CONTENEDOR */

.whatsapp-box{
position:fixed;
bottom:20px;
right:20px;
z-index:9999;
display:flex;
align-items:flex-end;
flex-direction:column;
}

/* BURBUJA MENSAJE */

.whatsapp-message{
background:white;
padding:10px 14px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.25);
font-family:Arial;
font-size:13px;
margin-bottom:10px;
max-width:180px;
animation:fadeIn 1s ease;
}

/* BOTON */

.whatsapp-btn img{
width:60px;
transition:0.3s;
}

.whatsapp-btn img:hover{
transform:scale(1.1);
}

/* ANIMACION */

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes aparecer{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}

/* CONTENEDOR */

.wa-asistente{
position:fixed;
bottom:10px;
right:10px;
z-index:9999;
display:flex;
flex-direction:column;
align-items:flex-end;
}

/* BURBUJA */

.wa-burbuja{
background:#0f3a5a;
color:white;
padding:12px 16px;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.25);
font-family:Arial;
font-size:14px;
margin-bottom:10px;
max-width:220px;
}

/* IMAGEN */

.wa-img{
width:260px;
cursor:pointer;
animation:waFloat 3s infinite ease-in-out;
}

/* MANO */

.wa-link{
position:relative;
}

.wa-mano{
position:absolute;
bottom:40px;
left:10px;
font-size:30px;
animation:manoMover 1s infinite;
}

/* ANIMACION FLOTAR */

@keyframes waFloat{

0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}

}

/* ANIMACION MANO */

@keyframes manoMover{

0%{transform:translateX(0);}
50%{transform:translateX(10px);}
100%{transform:translateX(0);}

}