:root{
  --canvas:#DEE1F0; --ink:#0D0D0D; --ink-2:#8A8D98; --ink-3:#B4B7C2;
  --paper:#FFFFFF; --wash:#F3F4F7; --linha:#E7E8EE;
  --coral:#F2685A; --verde:#12A87A; --azul:#2F7FF0;
  --rosa:#FDE7EC; --verde-pale:#E4F6EE;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;background:var(--canvas);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.45;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;padding:28px 18px
}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:8px}

.caixa{width:100%;max-width:400px}
.marca{font-size:44px;font-weight:300;letter-spacing:-.045em;line-height:1;margin-bottom:6px}
.marca-sub{font-size:14px;color:#5D6070;font-weight:500;margin-bottom:22px}

.cartao{background:var(--paper);border-radius:26px;padding:28px 24px}
.cartao h1{font-size:23px;font-weight:700;letter-spacing:-.035em;margin-bottom:6px}
.cartao .intro{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-bottom:22px}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.campo input{
  width:100%;background:var(--wash);border:1.5px solid transparent;border-radius:14px;
  padding:14px 15px;font-size:16px;font-weight:500;transition:border-color .16s var(--ease),background .16s var(--ease)
}
.campo input::placeholder{color:var(--ink-3);font-weight:400}
.campo input:focus{outline:none;background:var(--paper);border-color:var(--azul)}
.campo .dica{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.45}

.lembrar{display:flex;align-items:center;gap:10px;padding:6px 0 2px;cursor:pointer;
  font-size:14.5px;color:var(--ink-2);font-weight:500}
.lembrar input{width:19px;height:19px;accent-color:var(--coral);cursor:pointer;flex:none}

.botao{
  width:100%;background:var(--coral);color:#fff;border:0;border-radius:16px;
  padding:15px;font-size:16px;font-weight:700;letter-spacing:-.02em;cursor:pointer;
  margin-top:18px;transition:transform .16s var(--ease),filter .16s var(--ease)
}
.botao:hover{filter:brightness(1.06)}
.botao:active{transform:scale(.985)}
.botao[disabled]{background:var(--ink-3);cursor:not-allowed}
.botao.secundario{background:var(--wash);color:var(--ink);font-weight:600;margin-top:9px}

.aviso{
  display:flex;gap:11px;align-items:flex-start;border-radius:16px;padding:13px 14px;
  margin-bottom:18px;font-size:14px;line-height:1.45;font-weight:500
}
.aviso .ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;color:#fff;flex:none}
.aviso.erro{background:var(--rosa)}
.aviso.erro .ic{background:var(--coral)}
.aviso.ok{background:var(--verde-pale)}
.aviso.ok .ic{background:var(--verde)}

.rodape{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-2)}
.rodape a{font-weight:600}

.forca{height:5px;border-radius:3px;background:var(--wash);margin-top:9px;overflow:hidden}
.forca i{display:block;height:100%;width:0;border-radius:3px;background:var(--coral);
  transition:width .3s var(--ease),background .3s var(--ease)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}