*{padding:0;margin:0;box-sizing:border-box}body{background:#fff;font-family:Lato,sans-serif}.contenedor{width:90%;max-width:1000px;padding:40px 20px;display:flex;flex-direction:column;align-items:center}@media (max-width:768px){.contenedor{padding:20px 0;width:100%}}.tarjeta{width:100%;max-width:550px;position:relative;color:#fff;transition:all .3s ease;transform:rotateY(0deg);transform-style:preserve-3d;cursor:pointer;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,.3)}.tarjeta .delantera{width:100%;background:#5b92e5;background:linear-gradient(180deg,#5b92e5 0,#4a82b4 50%,#3a72a4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5B92E5",endColorstr="#3A72A4",GradientType=0);box-shadow:0 0 30px rgba(0,0,0,.5);z-index:0}@keyframes slide{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.delantera .logo-marca{text-align:right!important;min-height:50px;display:block ruby}.delantera .logo-marca img{width:70%;height:100%;-o-object-fit:cover;object-fit:cover;max-width:80px}.delantera .chip{width:100%;max-width:50px;margin-bottom:20px}.delantera .grupo .label{font-size:16px;color:#bfbfbf;margin-bottom:5px}.delantera .grupo .expiracion,.delantera .grupo .nombre,.delantera .grupo .numero{color:#fff;font-size:22px;text-transform:uppercase}.delantera .flexbox{display:flex;justify-content:space-between;margin-top:20px}.trasera{background:#5b92e5;background:linear-gradient(180deg,#5b92e5 0,#4a82b4 50%,#3a72a4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5B92E5",endColorstr="#3A72A4",GradientType=0);box-shadow:0 0 30px rgba(0,0,0,.5);z-index:0;position:absolute;top:0;transform:rotateY(180deg);backface-visibility:hidden}.trasera .barra-magnetica{height:40px;background:#000;width:100%;position:absolute;top:30px;left:0}.trasera .datos{margin-top:60px;display:flex;justify-content:space-between}.trasera .datos p{margin-bottom:5px}.trasera .datos #firma{width:70%}.trasera .datos #firma .firma{height:40px;background:repeating-linear-gradient(#87ceeb,#87ceeb 5px,orange 0,orange 10px)}.trasera .datos #firma .firma p{line-height:40px;font-family:Liu Jian Mao Cao,cursive;color:#000;font-size:30px;padding:0 10px;text-transform:capitalize}.trasera .datos #ccv{width:20%}.trasera .datos #ccv .ccv{background:#fff;height:40px;color:#000;padding:10px;text-align:center;width:100%}.trasera .leyenda{font-size:14px;line-height:24px;width:100%;opacity:0}.trasera .link-banco{font-size:14px;color:#fff}.contenedor-btn .btn-abrir-formulario{width:50px;height:50px;font-size:20px;line-height:20px;background:#f9d45a;color:#fff;position:relative;top:-25px;z-index:3;border-radius:100%;box-shadow:-5px 4px 8px rgba(24,56,182,.4);padding:5px;transition:all .2s ease;border:none;cursor:pointer}.contenedor-btn .btn-abrir-formulario:hover{background:#f9d45a}.contenedor-btn .btn-abrir-formulario.active{transform:rotate(45deg)}.formulario-tarjeta{background:#fff;width:90%;max-width:550px;padding:150px 30px 30px;border-radius:10px;position:relative;top:-150px;z-index:1;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .3s ease-out}@media (max-width:768px){.formulario-tarjeta{padding:150px 10px 10px;width:95%}}.formulario-tarjeta.active{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.formulario-tarjeta label{display:block;color:#7d8994;margin-bottom:5px;font-size:16px}.btn-enviar,.formulario-tarjeta input,.formulario-tarjeta select{border:2px solid #ced6e0;font-size:18px;height:50px;width:100%;padding:5px 12px;transition:all .3s ease;border-radius:5px}.formulario-tarjeta input:hover,.formulario-tarjeta select:hover{border:2px solid #93bded}.formulario-tarjeta input:focus,.formulario-tarjeta select:focus{outline:#040404;box-shadow:1px 7px 10px -5px rgba(90,116,148,.3)}.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 .ccv{min-width:100px}.formulario-tarjeta .grupo-select{width:100%;margin-right:15px;position:relative}.formulario-tarjeta select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.formulario-tarjeta .grupo-select i{position:absolute;color:#ced6e0;top:18px;right:15px;transition:all .3s ease}.formulario-tarjeta .grupo-select:hover i{color:#93bfed}.formulario-tarjeta .btn-enviar{border:none;padding:10px;font-size:22px;color:#fff;background:#f9d45a;box-shadow:2px 2px 10px 0 rgba(0,85,212,.4);cursor:pointer}.formulario-tarjeta .btn-enviar:hover{background:#f9d45a}#alert{width:100%;padding:10px;text-align:center;border-radius:5px;background-color:#f8d7da}#alert p{color:#721c24;font-size:16px}