/* Milha Certa — telas de acesso.
   Mesma identidade do site da Amiga Milheira: fundo claro, verde como cor de
   ação, terracota como acento. Uma coluna estreita, porque aqui só se faz
   uma coisa por tela. */
:root{
  --verde:#22503F; --verde-escuro:#1A3F31; --terracota:#B04A28; --ocre:#C8891F;
  --chao:#F3EFE6; --papel:#FFFFFF; --tinta:#404A43; --tinta-2:#6F675C; --tinta-3:#8F8578;
  --risco:#E4DED2; --erro:#A63A1E; --erro-fundo:#FBEFEA; --ok-fundo:#EEF3EF; --ok-borda:#CFE0D6;
  --serifa:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --texto:Karla,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--chao);color:var(--tinta);font:400 16px/1.6 var(--texto);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--verde)}
a:hover{color:var(--verde-escuro)}
:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}

.topo{padding:28px 20px 0;text-align:center}
.marca{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;gap:4px}
.marca .nome{font:600 30px/1 var(--serifa);color:var(--verde)}
.marca .de{font:600 10px/1 var(--texto);letter-spacing:.28em;text-transform:uppercase;color:var(--terracota)}

main{flex:1;display:flex;justify-content:center;padding:28px 16px 48px}
.cartao{width:100%;max-width:420px;background:var(--papel);border:1px solid var(--risco);border-radius:8px;
  padding:32px 30px 28px}
@media (max-width:420px){.cartao{padding:26px 20px 22px}}
h1{font:500 32px/1.15 var(--serifa);color:var(--verde);margin:0 0 8px;text-wrap:balance}
.explica{margin:0 0 22px;color:var(--tinta-2);font-size:15.5px}

.campo{margin-bottom:16px}
.campo label{display:block;font:600 12px/1 var(--texto);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:8px}
.campo input{width:100%;font:400 16px/1.4 var(--texto);color:var(--tinta);background:#FBFAF7;
  border:1px solid var(--risco);border-radius:4px;padding:12px 13px}
.campo input:focus{border-color:var(--verde);background:var(--papel)}
.ajuda{margin:7px 0 0;font-size:13px;color:var(--tinta-3)}

button{width:100%;font:600 16px/1 var(--texto);background:var(--verde);color:#F8F6F1;border:0;border-radius:4px;
  padding:15px 18px;cursor:pointer;margin-top:6px}
button:hover{background:var(--verde-escuro)}
button:disabled{opacity:.6;cursor:default}

.aviso{border-radius:4px;padding:12px 14px;font-size:15px;margin:0 0 16px}
.aviso.erro{background:var(--erro-fundo);color:var(--erro);border:1px solid #EBCFC3}
.aviso.ok{background:var(--ok-fundo);color:var(--verde);border:1px solid var(--ok-borda)}

.alternativas{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--risco);display:flex;
  flex-direction:column;gap:8px;font-size:15px}
.alternativas span{color:var(--tinta-2)}

.ola{font:500 34px/1.15 var(--serifa);color:var(--verde);margin:0 0 6px}
.dados{margin:18px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.dados li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--risco);padding-bottom:8px;font-size:15px}
.dados b{font-weight:600;color:var(--tinta)}
.selo{display:inline-block;font:600 11px/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracota);border:1px solid #EBCFC3;background:#FBF2ED;border-radius:99px;padding:6px 10px}
button.discreto{background:transparent;color:var(--verde);border:1px solid var(--risco)}
button.discreto:hover{background:#FBFAF7;border-color:var(--verde)}

.rodape{text-align:center;font-size:12.5px;color:var(--tinta-3);padding:0 16px 24px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}