* { box-sizing: border-box; }

body { margin: 0; font-family: Arial, sans-serif; }

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background: radial-gradient(circle at 15% 10%, #dbeafe 0, transparent 34%), #f4f7fb;
    color: #1f2937;
}

.auth-shell {
    position: relative;
    width: min(100%, 980px);
    min-height: 590px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9e3ee;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 51, 102, .16);
}

.auth-apresentacao {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px 48px;
    background: linear-gradient(145deg, #002d5b, #00529c);
    color: #fff;
}

.auth-logo { display: flex; width: 100%; align-items: center; justify-content: center; gap: 18px; color: #fff; text-align: center; text-decoration: none; }
.auth-logo img { position: static; flex: 0 0 auto; width: 96px; height: 96px; object-fit: contain; background: transparent; }
.auth-logo-texto { display: flex; width: 100%; flex-direction: column; align-items: center; color: #fff; font-size: 46px; line-height: .98; font-weight: 700; letter-spacing: .035em; text-align: center; }
.auth-selo { display: inline-block; margin-bottom: 18px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.auth-apresentacao h2 { max-width: 420px; margin: 0 0 16px; font-size: 42px; line-height: 1.08; }
.auth-apresentacao p { max-width: 430px; margin: 0; color: #dbeafe; font-size: 17px; line-height: 1.6; }
.auth-apresentacao ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.auth-apresentacao li { padding: 8px 11px; border-radius: 8px; background: rgba(255,255,255,.12); font-size: 13px; }

.auth-card { align-self: center; padding: 48px; background: #fff; }
.auth-marca { color: #3979bd; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.auth-card h1 { margin: 11px 0 7px; color: #172b45; font-size: 34px; }
.auth-subtitulo { margin: 0 0 27px; color: #66758a; line-height: 1.5; }
.auth-card form { display: grid; gap: 10px; }
.auth-card label { margin-top: 5px; color: #34465b; font-size: 14px; font-weight: 700; }
.auth-card input { width: 100%; padding: 14px; border: 1px solid #cbd6e2; border-radius: 10px; background: #fbfdff; font-size: 16px; outline: 0; }
.auth-card input:focus { border-color: #3979bd; background: #fff; box-shadow: 0 0 0 4px rgba(57,121,189,.13); }
.auth-card button { margin-top: 13px; padding: 14px; border: 0; border-radius: 10px; background: #004a91; color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(0,74,145,.2); }
.auth-card button:hover { background: #0062b8; transform: translateY(-1px); }
.auth-alerta { margin-bottom: 18px; padding: 12px; background: #fff0f0; border: 1px solid #efb5b5; border-radius: 8px; color: #8d2020; }
.auth-rodape { margin: 24px 0 0; text-align: center; color: #66758a; }
.auth-rodape a { color: #0055aa; font-weight: 800; text-decoration: none; }
.auth-rodape a:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .auth-body { padding: 16px; }
    .auth-shell { display: block; min-height: 0; }
    .auth-apresentacao { padding: 25px; }
    .auth-logo { gap: 12px; }
    .auth-logo img { width: 68px; height: 68px; }
    .auth-logo-texto { width: auto; align-items: flex-start; font-size: clamp(28px, 9vw, 38px); text-align: left; }
    .auth-apresentacao > div { display: none; }
    .auth-card { padding: 30px 25px; }
}