/* ===== RESET ===== */

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

/* ===== FUNDO ===== */

body{
background:linear-gradient(135deg,#3b79b1,#6fa9dc);
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

/* ===== CARD ===== */

.login-container{
width:100%;
padding:20px;
display:flex;
justify-content:center;
}

.login-card{

width:100%;
max-width:420px;
background:white;
padding:35px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
animation:fade .5s;
}

/* ===== ANIMAÇÃO ===== */

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

/* ===== LOGO ===== */

.logo{
width:180px;
display:block;
margin:auto;
margin-bottom:15px;
}

/* ===== TITULO ===== */

h2{
text-align:center;
margin-bottom:25px;
color:#333;
}

/* ===== CAMPOS ===== */

.campo{
margin-bottom:18px;
}

.campo label{
font-size:14px;
color:#666;
display:block;
margin-bottom:6px;
}

input,
select{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid #ddd;
font-size:15px;
transition:.2s;
}

input:focus,
select:focus{
border-color:#3498db;
outline:none;
box-shadow:0 0 0 2px rgba(52,152,219,.15);
}

/* ===== LINKS ===== */

.links{
display:flex;
justify-content:space-between;
margin-bottom:20px;
}

.links a{
font-size:13px;
color:#3498db;
text-decoration:none;
}

.links a:hover{
text-decoration:underline;
}

/* ===== BOTÃO ===== */

.btn-login{

width:100%;
padding:14px;
border:none;
border-radius:8px;
background:#3498db;
color:white;
font-size:16px;
font-weight:bold;
cursor:pointer;
transition:.2s;
}

.btn-login:hover{
background:#2d83c5;
}

/* ===== MOBILE ===== */

@media(max-width:500px){

.login-card{
padding:25px;
}

.logo{
width:150px;
}

}