:root {
  --preto: #0d1731; --marinho: #111f44; --ouro: #fecd04; --ouro-esc: #8a6f00; --texto: #1d1d1b; --apagado: #6b6b66;
  --borda: #d9d6cc; --erro: #b3261e;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fonte); color: var(--texto);
  display: grid; place-items: center; align-content: center; min-height: 100vh; padding: 24px 16px;
  /* Mesmo fundo da abertura do site: estradas tracejadas e faróis em movimento. */
  background: var(--preto) url(/img/estradas.svg) center / cover no-repeat fixed;
}
.caixa { width: min(400px, 100%); background: #fff; border-radius: 18px; padding: 32px 28px 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); border-top: 4px solid var(--ouro); }
.marca { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid #ecebe6; }
.marca img { display: block; width: 230px; max-width: 100%; height: auto; }
.marca small { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--apagado); }
h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.02em; }
.sub { color: var(--apagado); margin: 0 0 22px; font-size: 14.5px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo > span:first-child { font-size: 13.5px; font-weight: 600; }
input { font: inherit; font-size: 16px; width: 100%; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 10px; background: #fafaf7; color: var(--texto); }
input:focus { outline: none; border-color: var(--preto); background: #fff; box-shadow: 0 0 0 3px rgba(254, 205, 4, .45); }
.senha { position: relative; display: block; }
.senha input { padding-right: 84px; }
.ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--apagado); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.ver:hover { color: var(--texto); background: #f0eee8; }
.btn { width: 100%; font: inherit; font-weight: 700; font-size: 16px; padding: 13px; border: 0; border-radius: 10px; background: var(--preto); color: #fff; cursor: pointer; margin-top: 4px; }
.btn:hover { background: var(--marinho); }
.btn:disabled { opacity: .6; cursor: wait; }
.erro { color: var(--erro); font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.erro:empty { display: none; }
.regras { margin: 0 0 14px; padding-left: 18px; color: var(--apagado); font-size: 13px; }
.rodape { margin: 18px 0 0; font-size: 13px; color: var(--apagado); text-align: center; }
.voltar-site { margin-top: 18px; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; text-decoration: none; }
.voltar-site:hover { color: #fff; text-decoration: underline; }
.link { border: 0; background: none; font: inherit; color: var(--texto); text-decoration: underline; cursor: pointer; }