@keyframes vibrar-suave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-1deg); }
}

.btn-animado {
    background-color: #000;
    color: #aaa;
    border: none;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 8px 12px;
    border-radius: 6px;
}

.btn-animado i {
    animation: vibrar-suave 1.5s infinite ease-in-out;
    transition: color 0.3s ease, transform 0.3s ease;
    color: #aaa;
}

.btn-animado:hover {
    background-color: #000; /* permanece negro */
    color: #fff;
}

.btn-animado:hover i {
    color: #000; /* icono se pone negro en hover */
    transform: scale(1.2) rotate(10deg);
}