* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    text-decoration: none;
    list-style: none;
}

body{
    background:#84B6E3;
}

img{
    max-width:100%;
    display:block;
}

/* ===== TOPO ===== */

.topo{
    width:100%;
    height:70px;
    background:#002844;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 28px;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:14px;
    color:white;
    font-size:22px;
    font-weight:bold;
}

.shield-icon{
    font-size:28px;
}

.btn-topo{
    background:#0B46C4;
    color:white;
    padding:12px 24px;
    border-radius:10px;
    font-size:16px;
    font-weight:bold;
}

/* ===== BANNER ===== */

.banner{
    width:100%;
    padding:14px 14px 0 14px;
}

.banner img{
    width:100%;
    height:80px;
    object-fit:cover;
}

/* ===== CONTAINER ===== */

.container-login-page{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:18px;
    gap:40px;
}

.login-esquerda{
    width:58%;
}

.login-direita{
    width:35%;
    display:flex;
    justify-content:center;
}

/* ===== TÍTULOS ===== */

.login-esquerda h2{
    font-size:38px;
    font-weight:bold;
    margin-bottom:6px;
}

.subtitulo{
    font-size:16px;
    color:#5D5D5D;
    font-weight:bold;
    margin-bottom:18px;
}

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

.card-login{
    width:100%;
    background:#5fa0d9;
    border-radius:14px;
    padding:24px;
}

.card-login label{
    display:block;
    font-size:20px;
    font-weight:bold;
    margin-bottom:8px;
    margin-top:16px;
}

.card-login input{
    width:100%;
    height:34px;
    border:none;
    border-radius:6px;
    padding-left:10px;
    font-size:15px;
}

/* ===== LINK SENHA ===== */

.senha-link{
    width:100%;
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
}

.senha-link a{
    color:#1f3554;
    font-size:15px;
    font-weight:bold;
}

/* ===== BOTÕES ===== */

.bottom-login{
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:18px;
}

.checkbox-login{
    background:#5c8df6;
    padding:10px 14px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:bold;
    box-shadow:0 3px 6px rgba(0,0,0,0.2);
}

.btn-entrar{
    background:#31b348;
    border:none;
    padding:12px 34px;
    border-radius:12px;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 3px 6px rgba(0,0,0,0.2);
}

.btn-voltar{
    background:#5c8df6;
    padding:12px 22px;
    border-radius:12px;
    color:black;
    font-size:16px;
    font-weight:bold;
    box-shadow:0 3px 6px rgba(0,0,0,0.2);
}

/* ===== LINK CADASTRO ===== */

.link-cadastro{
    margin-top:14px;
}

.link-cadastro a{
    color:#233655;
    font-size:15px;
    font-weight:bold;
}

/* ===== IMAGEM ===== */

.imagem-login{
    width:100%;
    max-width:340px;
    height:500px;
    object-fit:cover;
}

/* ===== ERRO ===== */

.erro{
    background:#ffb6b6;
    color:#8a0000;
    padding:12px;
    border-radius:10px;
    margin-bottom:18px;
    font-weight:bold;
}