/* ---------- Estilos Generales de las Tarjetas ----------*/

.contenedor {
    display: flex;
    justify-content: center;
}

.tarjeta {
    width: 100%;
    max-width: 550px;
    position: relative;
    color: #fff;
    transition: .3s ease all;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    z-index: 2;
}

.tarjeta.active {
    transform: rotateY(180deg);
}

.tarjeta > div {
    padding: 30px;
    border-radius: 15px;
    /*min-height: 315px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 10px 0 rgba(90,116,148,0.3);
}

/* ---------- Tarjeta Delantera ----------*/

.tarjeta .delantera {
    width: 100%;
    background: linear-gradient(45deg, #7d8994, #28a745);
   /*background-color: #7d8994;*/
    /*background-color: #F68521;*/
    /* background: url(../img/bg-tarjeta/bg-tarjeta-02.jpg);*/
    background-size: cover;
}

.delantera .logo-marca {
    text-align: right;
    min-height: 50px;
    max-height: 40px;
}

.delantera .logo-marca img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 80px;
}

.delantera .chip {
    width: 100%;
    max-width: 30px;
    max-height: 30px;
    margin-bottom: 10px;
}

.delantera .grupo .label {
    font-size: 12px;
    color: #fafafa;
    margin-bottom: 5px;
}

.delantera .grupo .numero,
.delantera .grupo .nombre,
.delantera .grupo .expiracion {
    padding-top: 0px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}

.delantera .flexbox {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}