.whatsapp-chat{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

/* BOTÓN */
.chat-toggle{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #1ebe5d);

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    position: relative;

    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    animation: chatPulse 2.5s infinite ease-in-out;
}

.chat-toggle img{
    width:34px;
}

/* 🔴 BADGE */
.chat-badge{
    position: absolute;
    top: -5px;
    right: -5px;

    min-width: 20px;
    height: 20px;
    background: #ff3b30;
    color:#fff;

    font-size:12px;
    font-weight:600;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    animation: badgePulse 1.5s infinite;
}

/* CHAT */
.chat-box{
    width: 320px;
    background:#fff;
    border-radius:20px;

    position:absolute;
    bottom:85px;
    right:0;

    box-shadow: 0 20px 50px rgba(0,0,0,0.25);

    overflow:hidden;

    transition: all 0.3s ease;
}

/* HEADER */
.chat-header{
    background: linear-gradient(135deg, #25D366, #1ebe5d);
    color:#fff;
    padding:15px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* BODY */
.chat-body{
    padding:18px;
}

/* MENSAJE */
.chat-message{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

/* AVATAR */
.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
}

/* BURBUJA */
.message{
    background:#f1f1f1;
    padding:10px 14px;
    border-radius:12px;
    font-size:14px;
}

/* FOOTER */
.chat-footer{
    padding:15px;
}

.chat-footer a{
    display:block;
    text-align:center;
    background:#111;
    color:#fff;
    padding:12px;
    border-radius:25px;
    text-decoration:none;
}

.chat-footer a:hover{
    background:#ff6600;
}

/* ANIMACIONES */
@keyframes chatPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes badgePulse {
    0% { transform: scale(1); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}