/* --- ANIMAÇÃO PULSE DISCRETA --- */
@keyframes pulse-simetrico {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* --- ESTILO DOS BOTÕES (IDÊNTICOS) --- */
.whatsapp-button, 
.chat-atendimento {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    /* Remove sombras internas ou bordas estranhas */
    border: none;
    outline: none;
}

/* Força as imagens a ocuparem o mesmo espaço exato */
.whatsapp-button img, 
.chat-atendimento img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.3));
}

/* --- VIEWPORTS: MESMA ALTURA E MESMO AFASTAMENTO LATERAL --- */

/* MOBILE PEQUENO (320x568 até 480px) */
@media screen and (max-width: 480px) {
    .whatsapp-button, .chat-atendimento { 
        bottom: 50px; /* Afastamento do fundo */
        width: 90px;  /* Tamanho igual para ambos */
    }
    .whatsapp-button { left: 20px; }  /* Afastamento lateral igual ao fundo */
    .chat-atendimento { right: 20px; }
}

/* TABLETS E TELAS MÉDIAS (até 1024x768) */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    .whatsapp-button, .chat-atendimento { 
        bottom: 77px; 
        width: 80px; 
    }
    .whatsapp-button { left: 30px; }
    .chat-atendimento { right: 30px; }
}

/* DESKTOP (1440x900 até 1920x1080) */
@media screen and (min-width: 1025px) and (max-width: 1920px) {
    .whatsapp-button, .chat-atendimento { 
        bottom: 85px; 
        width: 85px; 
    }
    .whatsapp-button { left: 40px; }
    .chat-atendimento { right: 40px; }
}

/* QUAD HD / TELAS GRANDES (2560x1440) */
@media screen and (min-width: 1921px) {
    .whatsapp-button, .chat-atendimento { 
        bottom: 60px; 
        width: 110px; 
    }
    .whatsapp-button { left: 60px; }
    .chat-atendimento { right: 60px; }
}

/* --- INTERAÇÃO --- */
.whatsapp-button:hover, 
.chat-atendimento:hover {
    animation-play-state: paused;
    transform: scale(1.1) translateY(-5px); /* Sobe levemente no hover */
}