/* =========================================================
   Telas de acesso — entrar, esqueci, redefinir, convite.
   Mesma linguagem visual do portal: tokens, escala de espaço
   e componentes equivalentes.
   ========================================================= */
:root{
  --fundo:#F5F7FB; --papel:#FFFFFF; --papel-2:#FBFCFE;
  --traco:#E6EBF2; --traco-leve:#F0F3F8;
  --tinta:#0E1B2E; --tinta-2:#55677F; --tinta-3:#94A3B8;
  --marca:#1A66FF; --marca-forte:#0F4FC4; --marca-fundo:#EDF3FF; --marinho:#04203F;
  --verde:#0E9F6E; --verde-fundo:#E7F7F0;
  --vermelho:#DC3A2E; --vermelho-fundo:#FDEEEC;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e7:32px; --e8:40px;
  --r-s:8px; --r-m:12px; --r-g:16px; --r-p:999px;
  --sombra-1:0 1px 2px rgba(14,27,46,.06);
  --sombra-3:0 24px 48px -16px rgba(14,27,46,.22);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--fundo); color:var(--tinta);
  font-size:13.5px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit;outline:none;border:none;background:none}
a{color:var(--marca);text-decoration:none}
a:hover{color:var(--marca-forte)}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:var(--r-s)}
.oculto{display:none!important}

/* ---------- estrutura em duas colunas ---------- */
.acesso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}

.vitrine{
  background:linear-gradient(155deg,var(--marinho) 0%,#0B3E9E 100%);
  color:#fff;padding:var(--e8);display:grid;grid-template-rows:auto 1fr auto;gap:var(--e6);
  position:relative;overflow:hidden;
}
.vitrine::after{content:'';position:absolute;right:-140px;top:-120px;width:420px;height:420px;
  border-radius:50%;background:rgba(255,255,255,.05)}
.vitrine-marca{display:flex;align-items:center;gap:var(--e3);position:relative}
.vitrine-marca b{font-size:16px;font-weight:600;letter-spacing:-.2px}
.vitrine-corpo{align-self:center;position:relative;display:grid;gap:var(--e4)}
.vitrine h1{font-size:30px;font-weight:600;letter-spacing:-1px;line-height:1.2;max-width:15ch;text-wrap:balance}
.vitrine p{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.78);line-height:1.8;max-width:42ch}
.vitrine-pe{font-size:11.5px;font-weight:300;color:rgba(255,255,255,.5);position:relative}

.painel{display:grid;place-items:center;padding:var(--e7) var(--e5);position:relative}
.caixa{width:100%;max-width:368px;display:grid;gap:var(--e5)}

/* ---------- idiomas ---------- */
.idiomas{position:absolute;top:var(--e5);right:var(--e5);display:grid;grid-auto-flow:column;gap:2px;
  background:var(--traco-leve);border-radius:var(--r-p);padding:3px}
.idiomas button{padding:6px 12px;border-radius:var(--r-p);font-size:11px;font-weight:600;
  color:var(--tinta-3);letter-spacing:.4px;transition:.14s}
.idiomas button:hover{color:var(--tinta-2)}
.idiomas button.ativo{background:var(--papel);color:var(--marca-forte);box-shadow:var(--sombra-1)}

/* ---------- conteúdo do formulário ---------- */
.titulo{display:grid;gap:var(--e2)}
.titulo h2{font-size:22px;font-weight:600;letter-spacing:-.5px;line-height:1.25;text-wrap:balance}
.titulo p{font-size:13px;color:var(--tinta-2);font-weight:300;line-height:1.7}

form{display:grid;gap:var(--e4)}
.campo{display:grid;gap:var(--e2)}
.campo .rotulo{display:flex;align-items:baseline;gap:var(--e2);font-size:11.5px;font-weight:500;color:var(--tinta-2)}
.campo .rotulo button{margin-left:auto;font-size:11px;font-weight:500;color:var(--marca)}
.campo input{
  width:100%;height:44px;padding:0 var(--e4);border:1px solid var(--traco);border-radius:var(--r-s);
  background:var(--papel);font-size:16px;font-weight:400;transition:.15s;
}
.campo input::placeholder{color:var(--tinta-3);font-weight:300}
.campo input:focus{border-color:#B9D0F8;box-shadow:0 0 0 3px rgba(26,102,255,.1)}
.campo .dica{font-size:11px;color:var(--tinta-3);font-weight:300}

.bt{
  display:grid;grid-auto-flow:column;align-items:center;justify-content:center;gap:var(--e2);
  height:46px;padding:0 var(--e5);border-radius:var(--r-s);
  font-size:13.5px;font-weight:600;transition:.14s;width:100%;
}
.bt-principal{background:var(--marca);color:#fff;box-shadow:0 1px 2px rgba(26,102,255,.3)}
.bt-principal:hover{background:var(--marca-forte)}
.bt-neutro{border:1px solid var(--traco);color:var(--tinta-2);background:var(--papel)}
.bt-neutro:hover{background:var(--traco-leve);color:var(--tinta)}
.bt:disabled{opacity:.5;cursor:not-allowed}

.recado{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e3);align-items:start;
  border-radius:var(--r-m);padding:var(--e3) var(--e4);font-size:12.5px;font-weight:300;line-height:1.6}
.recado-erro{background:var(--vermelho-fundo);color:#8C2A21;border:1px solid #F6CFCB}
.recado-ok{background:var(--verde-fundo);color:#0B6B4C;border:1px solid #BFE3CE}

.rodape-caixa{display:grid;gap:var(--e3);text-align:center;font-size:12px;color:var(--tinta-2);font-weight:300}
.rodape-caixa a{font-weight:500}
.legais{display:grid;grid-auto-flow:column;gap:var(--e4);justify-content:center;
  font-size:11.5px;color:var(--tinta-3);padding-top:var(--e2)}
.legais a{color:var(--tinta-3)}
.legais a:hover{color:var(--tinta-2)}

.carregando{display:grid;justify-items:center;gap:var(--e3);padding:var(--e7) 0;
  font-size:12.5px;color:var(--tinta-3);font-weight:300}
.girando{width:20px;height:20px;border:2px solid var(--traco);border-top-color:var(--marca);
  border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- celular ---------- */
@media (max-width:860px){
  .acesso{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .vitrine{padding:var(--e5);gap:var(--e4);grid-template-rows:auto auto}
  .vitrine h1{font-size:21px;max-width:none}
  .vitrine p,.vitrine-pe{display:none}
  .painel{padding:var(--e6) var(--e4) var(--e8)}
  .idiomas{top:auto;bottom:var(--e4);right:var(--e4)}
  .caixa{max-width:none}
}
/* em tela grande o campo pode ser menor; no celular fica 16px, senão o iPhone dá zoom sozinho */
@media (min-width:861px){
  .campo input{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}