*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,system-ui;
}

body{
min-height:100vh;
background:linear-gradient(135deg,#eaf3fb,#f7f9fc);
display:flex;
justify-content:center;
align-items:center;
}

/* contenedor */
.login{
width:100%;
display:flex;
justify-content:center;
}

/* tarjeta */
.card{
width:400px;
background:white;
padding:35px 30px;
border-radius:25px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
text-align:center;
animation:entrada .6s ease;
}

@keyframes entrada{
from{opacity:0;transform:translateY(30px)}
to{opacity:1}
}

.card h1{
color:#1f4f82;
margin-bottom:6px;
}

.card p{
color:#6d8ba6;
font-size:14px;
margin-bottom:25px;
}

/* inputs */
.inputBox{
display:flex;
align-items:center;
background:#f2f6fb;
border-radius:40px;
padding:12px 18px;
margin-bottom:15px;
border:1px solid transparent;
transition:.25s;
}

.inputBox i{
color:#4f8edb;
margin-right:10px;
}

.inputBox input,
.inputBox textarea{
border:none;
outline:none;
background:transparent;
width:100%;
font-size:14px;
resize:none;
}

.inputBox:focus-within{
border:1px solid #4f8edb;
background:white;
}

/* fila */
.fila{
display:flex;
gap:10px;
}

/* botón */
button{
margin-top:15px;
width:100%;
padding:14px;
border:none;
border-radius:40px;
background:linear-gradient(135deg,#4f8edb,#2c63b8);
color:white;
font-weight:600;
letter-spacing:1px;
cursor:pointer;
transition:.3s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px #2c63b855;
}

/* móvil */
@media(max-width:420px){
.card{
width:90%;
}
.fila{
flex-direction:column;
}
}




/* animación enviar */

#btnEnviar.loading{
pointer-events:none;
background:#9bbbe8;
}

#btnEnviar.loading::after{
content:'';
width:22px;
height:22px;
border:3px solid white;
border-top:3px solid transparent;
border-radius:50%;
display:inline-block;
animation:spin 1s linear infinite;
margin-left:10px;
}

@keyframes spin{
to{transform:rotate(360deg);}
}

.msg{
margin-top:12px;
font-size:13px;
color:#2c63b8;
opacity:0;
transition:.3s;
}

.msg.show{
opacity:1;
}















@media (max-width: 768px) {

  body {
    font-size: 18px;
  }

  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 22px;
  }

  button {
    font-size: 18px;
    padding: 12px 20px;
  }

}