*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'SF Pro',sans-serif;
}

body{

min-height:100vh;

display:flex;
flex-direction:column;

/* IMAGEN + GRADIENTE OSCURO */

background:
linear-gradient(
rgba(2,10,26,0.85),
rgba(2,10,26,0.9)
),
url('/assets/img/Fondo.jpg');

background-size:cover;
background-position:center;
background-repeat:no-repeat;

/* Animación ligera */

animation:zoomBg 20s ease-in-out infinite alternate;

color:white;

overflow-x:hidden;

}

@keyframes gradientMove{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

/* NAVBAR */

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 60px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(255,255,255,0.2);

}

.logo-nav{

font-size:22px;
font-weight:bold;

}

.nav-links{

list-style:none;

display:flex;
gap:30px;

}

.nav-links li{

cursor:pointer;

transition:.3s;

}

.nav-links li:hover{

color:#2DCCFF;

}

/* CIRCULOS */
.circle{

position:absolute;
border-radius:50%;

opacity:0.5;

filter:blur(60px);

}

.circle1{

width:300px;
height:300px;

background:#2DCCFF;

top:15%;
left:10%;

}

.circle2{

width:260px;
height:260px;

background:#1464A5;

bottom:10%;
right:8%;

}
/* CONTENEDOR */

.container{

flex:1;

display:flex;

justify-content:center;
align-items:center;

gap:80px;

position:relative;

z-index:2;

}

/* TARJETA */

.card-container{

perspective:1000px;

}

.card{

width:390px;
height:230px;

position:relative;

transform-style:preserve-3d;

transition:transform .8s;

}

.card.flip{

transform:rotateY(180deg);

}

.card-front,
.card-back{

position:absolute;

width:100%;
height:100%;

border-radius:18px;

padding:25px;

backdrop-filter:blur(25px);

background:rgba(255,255,255,0.12);

border:1px solid rgba(255,255,255,0.25);

box-shadow:

0 15px 40px rgba(0,0,0,0.4),
inset 0 0 40px rgba(255,255,255,0.15);

backface-visibility:hidden;

}

.chip{

width:45px;
height:32px;

background:gold;

border-radius:6px;

margin-bottom:25px;

}

.card-number{

font-size:22px;

letter-spacing:3px;

margin-bottom:30px;

}

.card-info{

display:flex;

justify-content:space-between;

}

.label{

font-size:10px;
opacity:.7;

}

.value{

font-size:14px;
margin-top:4px;

}

.logo{

position:absolute;

bottom:20px;
right:20px;

font-size:26px;
font-weight:bold;

color:#2DCCFF;

}

/* BACK */

.card-back{

transform:rotateY(180deg);

}

.magnetic-strip{

background:black;

height:45px;

margin-top:15px;

border-radius:4px;

}

.cvv-box{

margin-top:40px;

display:flex;

justify-content:flex-end;

}

.cvv{

background:white;

color:black;

padding:6px 10px;

border-radius:4px;

width:60px;

text-align:center;

}

/* FORM */

.form-container{

width:350px;

backdrop-filter:blur(30px);

background:rgba(255,255,255,0.15);

border:1px solid rgba(255,255,255,0.25);

padding:30px;

border-radius:15px;

box-shadow:0 20px 40px rgba(0,0,0,0.4);

}

.form-container h2{

margin-bottom:20px;

}

input{

width:100%;

padding:12px;

margin-bottom:15px;

border:none;

border-radius:8px;

background:rgb(0, 110, 255);

color:white;


}

.row{

display:flex;

gap:10px;

}

button{

width:100%;

padding:12px;

border:none;

border-radius:8px;

background:linear-gradient(90deg,#2DCCFF,#1464A5);

color:white;

cursor:pointer;

transition:.3s;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(0,0,0,.3);

}

/* FOOTER */

footer{

text-align:center;

padding:25px;

background:rgba(0,0,0,0.3);

backdrop-filter:blur(10px);

font-size:14px;

}

#errorMsg{

margin-top:10px;
color:#ff6b6b;
font-size:14px;

}

input::placeholder{

color:#ddd;

}