:root{--plane:#f2f0e9;--surface:#fbfaf7;--ink:#191710;--ink-2:#55524a;--ink-3:#8c887b;--accent:#8f7331;--accent-ink:#6f5820;--line:#e2ded2;--good:#0f8a2f;--crit:#c0392b}
@media (prefers-color-scheme:dark){:root{--plane:#0c0b0a;--surface:#191917;--ink:#f3f1ea;--ink-2:#bcb8ab;--ink-3:#84806f;--accent:#cbab6e;--accent-ink:#e0c48a;--line:#2c2a25;--good:#37b24d;--crit:#e05a4b}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--plane);color:var(--ink);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.palco{min-height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.lado-marca{position:relative;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:
    repeating-linear-gradient(115deg,transparent 0 22px,color-mix(in srgb,var(--accent) 7%,transparent) 22px 23px),
    repeating-linear-gradient(25deg,transparent 0 22px,color-mix(in srgb,var(--accent) 5%,transparent) 22px 23px),
    var(--surface);border-right:1px solid var(--line)}
.marca .logo{height:56px;width:auto}
.logo-escuro{display:none}
@media (prefers-color-scheme:dark){.logo-claro{display:none}.logo-escuro{display:inline}}
.texto{max-width:560px}
.sobre{margin:0 0 14px;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--accent);font-weight:600}
h1{margin:0 0 18px;font:600 clamp(28px,3.4vw,44px)/1.12 ui-serif,Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.lead{margin:0 0 30px;color:var(--ink-2);font-size:16.5px;max-width:520px}
.pontos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--ink-3);font-size:13px}
.pontos span{display:block;color:var(--ink);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.rodape{margin:0;color:var(--ink-3);font-size:12.5px}
.lado-login{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;gap:18px}
.cartao{width:100%;max-width:420px}
.cartao h2{margin:0 0 6px;font:600 26px/1.2 ui-serif,Georgia,serif}
.sub{margin:0 0 22px;color:var(--ink-2)}
.carregando{padding:28px 0;color:var(--ink-3)}
.aviso{margin:0 0 18px;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--crit) 45%,transparent);
  background:color-mix(in srgb,var(--crit) 10%,transparent);color:var(--ink);font-size:14px}
.botao{display:inline-block;margin-top:8px;padding:11px 18px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600}
.botao:hover{background:var(--accent-ink)}
.seguranca{margin:0;color:var(--ink-3);font-size:12px;text-align:center}
.cl-rootBox,.cl-cardBox{width:100%!important;max-width:420px}
@media (max-width:880px){
  .palco{grid-template-columns:1fr}
  .lado-marca{padding:28px 20px;gap:28px;border-right:0;border-bottom:1px solid var(--line)}
  .rodape{display:none}
  .lado-login{padding:28px 16px 40px}
}