/* Estilos para a rotação do crachá */
.perspectiva-3d {
    perspective: 1000px;
}

.transicao-cracha {
    transition: transform 0.6s ease-in-out;
    backface-visibility: hidden;
}

.verso-oculto {
    transform: rotateY(0deg);
}

.verso-visivel {
    transform: rotateY(180deg);
}

.virado .verso-oculto {
    transform: rotateY(-180deg);
}

.virado .verso-visivel {
    transform: rotateY(0deg);
}

/* Animação para a dica visual "Clique para virar" */
@keyframes piscar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animacao-piscar {
    animation: piscar 1.5s infinite;
}