/* Estado inicial: a carta está fora de posição, mais abaixo, deslocada para o lado e levemente inclinada */
.deslizar-carta {
    opacity: 0;
    /* Move -60px para a esquerda, 50px para baixo e inclina -5 graus */
    transform: translate(-60px, 50px) rotate(-5deg);
    
    /* A curva cubic-bezier é o segredo aqui: imita a física de algo deslizando e parando */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* Estado final: a carta pousa no lugar exato */
.deslizar-carta.visivel {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

/* Atrasos essenciais para dar o efeito de distribuição de cartas uma a uma */
.atraso-1 { transition-delay: 0.15s; }
.atraso-2 { transition-delay: 0.30s; }
.atraso-3 { transition-delay: 0.45s; }

/* --- Estilo visual opcional para o "Shape" do cartão --- */
.cartao-metodo {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 2rem;
    /* ... demais estilos ... */
}

.tons-de-cinza {
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Adiciona uma transição suave */
}

.tons-de-cinza:hover {
    filter: grayscale(0%); /* Remove o efeito de cinza no hover */
}