/* 1. ESTILOS BASE (para Desktops e Telas Maiores) */
.whatsapp-float {
    /* Posição Fixa na tela */
    position: fixed;
    bottom: 20px;       /* Distância do fundo da tela */
    right: 20px;        /* Distância da borda direita da tela */
    z-index: 1000;      /* Garante que o botão fique acima de outros elementos */
    
    /* Estilo do Botão */
    width: 60px;
    height: 60px;
    background-color: #25d366; 
    color: white;              
    border-radius: 50%;        
    text-align: center;
    line-height: 60px;         
    font-size: 30px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); 
    text-decoration: none;
    transition: all 0.3s ease; /* Adiciona transição para o hover */
}

/* Efeito de Hover (passar o mouse - geralmente só em desktop) */
.whatsapp-float:hover {
    background-color: #128c7e; 
    transform: scale(1.05);    
}

/* Efeito para o ícone (animação de "pulsar") */
.whatsapp-float i {
    animation: whatsapp-pop 1s ease-out infinite;
}

@keyframes whatsapp-pop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


/* 2. MEDIA QUERY PARA TELAS MENORES (Dispositivos Móveis) */
/* Aplicar estilos quando a largura da tela for no máximo 768px (tamanho comum de tablets/smartphones) */
@media screen and (max-width: 768px) {
    .whatsapp-float {
        /* Reduz o tamanho do botão para não ocupar muito espaço */
        width: 50px;
        height: 50px;
        font-size: 25px; /* Reduz o tamanho do ícone */
        line-height: 50px; /* Ajusta a centralização do ícone */
        
        /* Ajusta a posição para ficar mais discreto na tela */
        bottom: 15px;      
        right: 15px; 
    }
}