*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    background-color: rgba(0, 0, 0, 0.801);
    font-family: 'Lato', sans-serif;
}


.contenedor
{
    /* background-color: lawngreen; */
    width: 90%;
    /* 1000px porque si se habre una ventana mas grande no queremos que se expanda mucho el contenedor */
    max-width: 1000px;
    padding: 40px 20px;
    margin: auto;
    display: flex;
    flex-direction: column;/*para que cuando agregemos el formulario y el boton de cerrar se coloquen uno debajo de otro*/
    align-items: center;
}
@media screen and (max-width:376px){
    .contenedor{
       width: 100%;
    }
}

/* ------------ESTILOS GENERALES DE LAS TARJETAS------------------------- */

.contenedor .tarjeta
{
    /* background-color: #000; */
    width: 100%;
    max-width: 550px;/*para que no avarque todo el espacio disponible del contendor porque lo queremos mas chico*/
    position: relative;
    color: #fff;
    transition: .3s ease all;
    transform: rotateY(0deg);
    transform-style: preserve-3d;/*para el efecto dela tarjeta que gira*/

    /* en crome no anda si lo comentamos anda perfecto */
    /* backface-visibility: hidden;esto nos permite que si la tarjeta la giramos la parte de atras estè oculta */
    cursor: pointer;
    z-index: 2;
}

.tarjeta.active /*esto hace que gire la targeta al hacer clic le agregamos con js*/
{
    transform: rotateY(180deg);
}

/* accede la clase principal a los dos div que tiene como hijo que tienen la clase delantera y tresera */
.contenedor .tarjeta > div
{
    padding: 30px;
    border-radius: 15px;
    min-height: 315px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 10px 10px 0px rgba(90, 116, 148, 0.3);
}

/* PARTE DELANTERA DE LA TARJETA */
.contenedor .tarjeta .delantera
{
    background-image: url("../img/bg-tarjeta/bg-tarjeta-02.jpg");
    background-size: cover;/*para que la imgen se ajuste al contennedor*/
}
.contenedor .tarjeta .delantera .logo-marca
{
    text-align: right;
    min-height: 50px;/*altura minima porque cuando no haya ningun logo la altura minima tiene que seguir estando par q lo otro no se rompar*/
}
.contenedor .tarjeta .delantera .logo-marca img
{   
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 80px;
}
.contenedor .tarjeta .delantera .chip
{
    width: 100%;
    max-width: 50px;
    margin-bottom: 20px;
}
.contenedor .tarjeta .delantera .grupo .label
{
    font-size: 16px;
    color: #7d8994;
}
.contenedor .tarjeta .delantera .grupo .numero,
.contenedor .tarjeta .delantera .grupo .nombre,
.contenedor .tarjeta .delantera .grupo .expiracion
{
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
}

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


/*------------- PARTE TRASERA DE LA TARJETA --------------------*/

.contenedor .tarjeta .trasera
{
    
    background-image: url("../img/bg-tarjeta/bg-tarjeta-02.jpg");
    background-size: cover;
    position: absolute;
    top: 0;
    /* para que desaparezca si ponemos backface-visibility: hidden; no se ooculta por lo que tendremos que rotarlo 180 grados 
    para que se ve anosotro a la tarjeta le pusimos un active que gire otros 180deg y con eso se vera */
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

/* barra magenteica */
.contenedor .tarjeta .trasera .barra-magnetica
{
    height: 40px;
    background-color: black;
    width: 100%;
    position: absolute;
    top: 30px;
    left: 0;
}

.contenedor .tarjeta .trasera .datos
{
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}
.contenedor .tarjeta .trasera .datos p
{
    margin-bottom: 5px;
}
.contenedor .tarjeta .trasera .datos #firma
{
    width: 70%;
}

.contenedor .tarjeta .trasera .datos #firma .firma
{
    height: 40px;
    background: repeating-linear-gradient(skyblue 0 ,skyblue 5px,orange 5px,orange 10px);
}
.contenedor .tarjeta .trasera .datos #firma .firma p
{
    line-height: 40px;
    font-family: "Liu Jian Mao Cao",cursive;
    color: #000;
    font-size: 30px;
    margin: 0 10px;
    text-transform: capitalize;
}

.contenedor .tarjeta .trasera .datos #ccv
{
    width: 20%;
}
.contenedor .tarjeta .trasera .datos #ccv .ccv{
    background-color: #fff;
    height: 40px;
    color: #000;
    padding: 10px;
    text-align: center;
}

.contenedor .tarjeta .trasera .leyenda
{
    font-size: 14px;
    line-height: 24px;
}
@media screen and (max-width:376px){
    .contenedor .tarjeta .trasera .leyenda{
       font-size: 10px;
    }
}


.contenedor .contnendor-btn .bt-abrir-formulario 
{
    width: 50px;
    height: 50px;
    border: none;
    line-height: 50px;
    background-color: #2364d2;
    color: #fff;
    cursor: pointer;
    font-size: 25px;
    border-radius: 50%;
    position: relative;
    top: -25px;
    z-index: 3;
    box-shadow: 5px 4px 8px rgba(24, 56, 182, 0.4);
    border: none;
    transition: all .2s ease;
}

.contenedor .contnendor-btn .bt-abrir-formulario:hover
{
    background-color: #1850b1;
}
/* clase active se la damo con js para que rote el boton y se haga de un mas a una cruz */
.contenedor .contnendor-btn .bt-abrir-formulario.active
{
    transform: rotate(45deg);
}




/* ----------------------ESTILOS FORMULARIO--------------------------- */
.formulario-tarjeta
{
    background-color: #fff;
    width: 100%;    
    padding: 150px 30px 30px 30px;
    max-width: 700px;
    border-radius: 10px;
    position: relative;
    top: -150px;
    z-index: 1;    
    /* el rectangulo del form va de la esquinasuperior izquierda a la esquina sup derecha esten en 0%,
    el siguinte puto vaya de la ezuina superior derecha 100% para abajo la ezquina inferior derecha 0% 
    despues la ezquina de abajo le decimos que vaya con un 100%  pero no se desplace hacia abajo 0% y solo se hace una
    una linea por lo que se oculta el fomulario, osea al darle 0% a todo no se desplaza hacia abajo*/
    clip-path: polygon(0 0,100% 0%,100% 0%, 0 0);
    transition: clip-path .3s ease-out;
} 
.formulario-tarjeta.active /*le agregamos la clase active con JS para que se vea el fomulario*/
{
    clip-path: polygon(0 0,100% 0%,100% 100%, 0 100%);
}

.formulario-tarjeta label
{
    display: block;
    color: #7d8994;
    margin-bottom: 5px;
    font-size: 16px;
}
.formulario-tarjeta input,
.formulario-tarjeta select,
.btn-enviar
{
    border: 2px solid #cED6E0;
    font-size: 18px;
    height: 50px;
    width: 100%;
    padding: 5px 12px;
    transition: all .3s ease;
    border-radius: 5px;
}
@media screen and (max-width:376px){
    .formulario-tarjeta input,
    .formulario-tarjeta select,
    .btn-enviar{
       font-size: 13px;
    }
}
.formulario-tarjeta input:hover,
.formulario-tarjeta select:hover
{
    border: 2px solid #93BDED;
}
.formulario-tarjeta input:focus,
.formulario-tarjeta select:focus
{
    outline: rgb(4,4,4);
    box-shadow: 1px 7px 10px -5px rgba(90, 116, 148, 0.8);
}

.formulario-tarjeta input
{
    margin-bottom:20px ;
    text-transform: uppercase;
}

.formulario-tarjeta .flexbox
{
    display: flex;
    justify-content: space-between;
}
.formulario-tarjeta .expira
{
    width: 100%;
}
.formulario-tarjeta .cvv
{
    min-width: 100px;
}
.formulario-tarjeta .grupo-select
{
    width: 100%;
    margin-right: 10px;
    position: relative;
}

/* acomodamos el icono */
.formulario-tarjeta select
{
    /* para sacar la apariencia de los select osea el icono del selct que nos da por defecto */
    -webkit-appearance: none;
}
.formulario-tarjeta .grupo-select i
{
    position: absolute;
    color: #CED6E0;
    top: 18px;
    right: 15px;
    transition: .3s ease all;
}
.formulario-tarjeta .grupo-select:hover i
{
    color: #000;
}
.formulario-tarjeta .btn-enviar
{
    border: none;
    padding: 18px;
    font-size: 22px;
    color: #fff;
    background-color: #2364d2;
    box-shadow: 2px 2px 10px 0px rgba(0, 85, 212, 0.4);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}