.cartas{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    perspective: 900px;
}
.parte{
    width: 100%;
    height: 100%;
}
.atras{
    backface-visibility: hidden;
    background:#ffd600;
    position: absolute;
    top: 0;
    left: 0;
}

.isSeleccionado{
    transform: rotateY(180deg)

}
.activo{
    transform: rotateY(180deg)

}
.adelante{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a237e;
}
.carta{
  transform-style: preserve-3d;
  transition: transform 500ms ease-in-out;
    margin-top: 1rem;
    width: 23%;
    height: 100px;
   
}
.carta:hover{
    cursor: pointer;
}
.noClick{
    opacity: .5;
    pointer-events: none;
}