.whatsapp-chat{
    position:fixed;
  bottom:40px;
    right:40px;
    z-index:9999;
}

/* ================= BOTON ================= */
.chat-toggle{
    width:68px;
    height:68px;
    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;
    z-index:9999;
}

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

/* BADGE */
.chat-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:20px;
    height:20px;
    background:#ff3b30;
    color:#fff;
    font-size:12px;
    font-weight:700;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:badgePulse 1.5s infinite;
}

/* ================= CHAT BOX ================= */
.chat-box{
    width:320px;
    background:#fff;
    border-radius:20px;
    position:fixed;
    bottom:120px;
    right:40px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
    overflow:hidden;
    z-index:10000;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(20px);
    transition:all .3s ease;
}
.chat-box.open{
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
    pointer-events:auto;
    transform:none !important;
}

/* HEADER */
.chat-header{
    background:linear-gradient(135deg,#25D366,#1ebe5d);
    color:#fff;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-close{
    background:none;
    border:none;
    color:#fff;
    font-size:21px;
    font-weight:bold;
    cursor:pointer;
    line-height:1;
}

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

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

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
}

.message{
    background:#f1f1f1;
    padding:11px 14px;
    border-radius:12px;
    font-size:14px;
    line-height:1.5;
    flex:1;
}

/* 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;
    font-weight:600;
}

/* 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.15);}
    100%{transform:scale(1);}
}