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