@font-face{font-family:"Archivo Painel";src:url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"DM Sans Painel";src:url(/fonts/dm-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 1000;font-display:swap}
:root{--fundo:#f3f4f1;--superficie:#e6e8e3;--tinta:#0f1b33;--texto-sec:#46506a;--azul:#2f55b0;--azul-ativo:#24458f;--amarelo:#e6ef1a;--erro:#b3261e;--branco:#fff;--margem:clamp(16px,4vw,32px);--display:"Archivo Painel","Arial Black",sans-serif;--texto:"DM Sans Painel",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);color-scheme:light;font-family:var(--texto);color:var(--tinta);background:var(--fundo);accent-color:var(--azul);caret-color:var(--azul)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-size:1rem;line-height:1.5}
::selection{background:var(--amarelo);color:var(--tinta)}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
[hidden]{display:none!important}
.pular{position:absolute;left:var(--margem);top:-60px;background:var(--amarelo);color:var(--tinta);padding:12px 16px;font-weight:700;z-index:2}
.pular:focus{top:8px}
.topo{background:var(--tinta);color:var(--branco)}
.topo-inner{max-width:1200px;margin:auto;min-height:68px;padding:0 var(--margem);display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font:800 1.65rem/1 var(--display);font-stretch:125%;letter-spacing:-.04em}
.marca span{color:var(--amarelo)}
.topo-label{font-size:.95rem}
.principal{width:100%;max-width:1200px;margin:auto;flex:1;padding:clamp(40px,8vw,88px) var(--margem)}
h1,h2{font-family:var(--display);font-stretch:112%;text-wrap:balance}
/* Acesso */
.acesso{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,9vw,130px);align-items:start}
.introducao h1{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.04em;max-width:11em;margin:0 0 24px}
.introducao p{font-size:1.15rem;max-width:30em;margin:0}
.form-area{background:var(--branco);padding:clamp(24px,4vw,40px)}
.form-area h2{font-size:1.6rem;letter-spacing:-.02em;margin:0 0 10px}
.form-area>p{color:var(--texto-sec);margin:0 0 28px}
form{display:flex;flex-direction:column}
label{font-weight:700;margin-bottom:9px}
input{width:100%;min-height:52px;border:1px solid #7b8290;border-radius:0;background:var(--branco);padding:12px;margin-bottom:22px;color:var(--tinta)}
input:focus-visible{border-color:var(--azul)}
button{border:0;border-radius:0;background:var(--azul);color:var(--branco);min-height:52px;padding:0 20px;font-weight:700;text-align:left;transition:background-color .15s ease,transform .16s var(--ease-out)}
button:active:not(:disabled){transform:scale(.97)}
@media (hover:hover) and (pointer:fine){button:hover:not(:disabled){background:var(--azul-ativo)}}
button:disabled{opacity:.7;cursor:wait}
form button{display:flex;align-items:center;justify-content:space-between}
button span{font-size:1.3em}
.mensagem:empty{display:none}
.mensagem{min-height:1.5em;margin:14px 0 0;color:var(--erro)}
/* Painel */
.painel-cabecalho{display:flex;justify-content:space-between;align-items:start;gap:24px}
.painel h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:-.04em;margin:0}
.conta{color:var(--texto-sec);margin:10px 0 0;overflow-wrap:anywhere}
.painel-cabecalho .secundario{flex:none}
.secundario{background:var(--superficie);color:var(--tinta);margin-top:0}
@media (hover:hover) and (pointer:fine){.secundario:hover:not(:disabled){background:#d7dad3}}
.periodos{display:flex;gap:8px;margin:28px 0}
.periodos button{background:var(--superficie);color:var(--tinta);text-align:center}
.periodos button[aria-pressed=true]{background:var(--azul);color:var(--branco)}
#estado-metricas{margin:0 0 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#estado-metricas:empty{display:none}
.resumo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.resumo>div{padding:clamp(20px,3vw,32px);background:var(--azul);color:var(--branco)}
.resumo>div+div{background:var(--amarelo);color:var(--tinta)}
.resumo p{margin:0}
.resumo strong{display:block;margin:10px 0;font:800 clamp(2.6rem,6vw,4.2rem)/1 var(--display);font-stretch:112%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nota{color:var(--texto-sec);max-width:62ch}
.listas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);margin-top:40px}
.listas h2{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 4px}
.listas section>p{color:var(--texto-sec);margin:0 0 8px}
.lista-dados{list-style:none;padding:0;margin:0}
.lista-dados li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #cdd1ca;overflow-wrap:anywhere;min-width:0}
.lista-dados strong{font-variant-numeric:tabular-nums}
footer{background:var(--superficie);padding:24px max(var(--margem),calc((100% - 1200px)/2 + var(--margem)));display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer span{font:800 1rem var(--display);font-stretch:125%}
footer p{margin:0;font-size:.95rem}
@media (max-width:700px){
  .acesso,.resumo,.listas{grid-template-columns:1fr}
  .painel-cabecalho{display:block}
  .painel-cabecalho .secundario{margin-top:16px;width:100%}
  .periodos{gap:4px}.periodos button{flex:1;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){button{transition:background-color .15s ease}button:active:not(:disabled){transform:none}}
