/* DIAGNÓSTICO C.L.A.R.E.Z.A. · telas públicas · extraído do mockup v4 aprovado em 16/09/2026 (P-529).
   Zero margem negativa (P-527), zero fonte de fora. As fontes são as mesmas do painel, da pasta assets/fontes. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/bricolage-grotesque-700.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fontes/bricolage-grotesque-800.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/source-sans-3-400.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/source-sans-3-600.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/source-sans-3-700.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url(fontes/source-sans-3-400-italico.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/ibm-plex-mono-600.woff2) format('woff2')}
:root{
  --paper:#FCFBF8; --ink:#1A1812; --ink2:#3E3A31; --grey:#6E6A5E;
  --amber:#A8720B; --amber-d:#8A5D06; --amber-l:#F5EDDC;
  --line:#DCD7CA; --soft:#F4F1E9;
  --crit:#9A3B28; --alerta:#B4732A; --neutro:#7A7568; --bom:#5F7F4A; --otimo:#3E6B44;
  --foco:#1F5FBF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.publico{margin:0;background:#EAE7DE;color:var(--ink);
  font-family:'Source Sans 3',-apple-system,Segoe UI,sans-serif;font-size:17px;line-height:1.6}
.app{max-width:820px;margin:0 auto;background:var(--paper);min-height:100vh;box-shadow:0 0 60px rgba(0,0,0,.10)}
.pad{padding:0 64px}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:4px}
a{color:var(--amber-d)}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.oculto{display:none!important}

/* ---------- barra de progresso ---------- */
.barra{position:sticky;top:0;z-index:9;background:var(--paper);border-bottom:1px solid var(--line);padding:16px 64px}
.barra .top{display:flex;justify-content:space-between;align-items:center;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:0 0 9px}
.barra .top b{color:var(--amber-d);font-weight:600}
.trilho{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.trilho i{display:block;height:100%;background:var(--amber);width:0;transition:width .3s ease;border-radius:3px}

/* ---------- telas ---------- */
/* só vertical: "padding:52px 0 64px" aqui zerava o recuo lateral de .pad e colava o texto na borda (defeito herdado do rascunho) */
.tela{display:none;padding-top:52px;padding-bottom:64px}
.tela.on{display:block}
h1,.titulo-tela{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:38px;line-height:1.08;letter-spacing:-.026em;margin:0 0 16px}
h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;line-height:1.18;letter-spacing:-.02em;margin:0 0 12px}
h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;margin:0 0 8px}
p{margin:0 0 14px;color:var(--ink2)}
.lede{font-size:19px;line-height:1.5;color:var(--ink)}
.selo{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-d);font-weight:600;margin:0 0 14px}

.itens{list-style:none;padding:0;margin:22px 0}
.itens li{display:flex;gap:13px;align-items:flex-start;margin:0 0 12px;color:var(--ink2)}
.itens li b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--amber-l);color:var(--amber-d);display:flex;
  align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600}

/* ---------- abertura ---------- */
.capa{background:var(--ink);color:#F7F4EC;padding:64px 64px 56px;position:relative;overflow:hidden}
.capa:after{content:'';position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,169,59,.22),rgba(224,169,59,0) 70%)}
.capa .selo{color:#E0A93B;position:relative}
.capa h1{color:#FDFBF5;font-size:46px;line-height:1.04;max-width:13em;margin:0 0 20px;position:relative}
.capa h1 em{font-style:normal;color:#E0A93B}
.capa .lede{color:#D9D2C3;font-size:19.5px;max-width:31em;margin:0 0 32px;position:relative}
.capa .btn{position:relative;padding:18px 40px;font-size:19px}
.capa .garantia{color:#A9A294;font-size:14.5px;margin:18px 0 0;position:relative}
.numeros{list-style:none;padding:0;margin:0 0 56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  transform:translateY(-28px)}
.numeros li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:0 10px 30px rgba(26,24,18,.08)}
.numeros b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:40px;line-height:1;color:var(--amber-d);letter-spacing:-.03em}
.numeros span{display:block;font-size:15px;color:var(--ink2);margin:6px 0 0}
.bloco{margin:0 0 56px}
.bloco h2{margin:0 0 10px}
.bloco > p{margin:0 0 24px;font-size:17.5px}
.letras{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.letras li{display:flex;gap:16px;align-items:center;background:#FEFDFB;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.letras .lt{flex:0 0 46px;height:46px;border-radius:10px;background:var(--ink);color:#E0A93B;display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:24px}
.letras .tx b{display:block;color:var(--ink);font-size:16.5px;line-height:1.25}
.letras .tx span{display:block;color:var(--grey);font-size:14.5px;line-height:1.35;margin:3px 0 0}
.antes{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.antes li{display:flex;gap:16px;align-items:flex-start;background:var(--soft);border-radius:10px;padding:18px 20px;color:var(--ink2)}
.antes li b{flex:0 0 30px;height:30px;border-radius:50%;background:var(--amber-l);color:var(--amber-d);display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600}
.fecho{text-align:center;background:var(--amber-l);border-radius:12px;padding:36px 28px;margin:0 0 8px}
.fecho h2{margin:0 0 8px}
.fecho p{margin:0 0 22px}

/* ---------- campos ---------- */
.campo{margin:0 0 20px}
.campo label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);font-weight:600;margin:0 0 5px}
.campo input,.campo select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:5px;font-family:inherit;
  font-size:16.5px;color:var(--ink);background:#fff;min-height:48px}
.campo input:focus,.campo select:focus{border-color:var(--amber)}
.campo input,.campo select,.aceite input,h1,.titulo-tela,.qtexto{scroll-margin-top:120px}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--crit);background:#FDF6F4}
.msgerro{color:var(--crit);font-size:13.5px;margin:5px 0 0}
.msgerro:empty{display:none}
.dois{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.isca{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.aceite{display:flex;gap:10px;align-items:center;margin:6px 0 4px;font-size:15px;color:var(--ink2);cursor:pointer}
.aceite input{width:20px;height:20px;margin:0;flex:0 0 20px;accent-color:var(--amber-d)}
.aviso-coleta{font-size:13.5px;color:var(--grey);margin:0 0 4px 30px;line-height:1.45}

/* ---------- pergunta ---------- */
.qletra{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);font-weight:600;margin:0 0 10px}
.qtexto{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:29px;line-height:1.2;letter-spacing:-.02em;margin:0 0 30px}
.ops{display:flex;flex-direction:column;gap:12px;border:0;padding:0;margin:0}
.op{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:#FEFDFB;border:1.5px solid var(--line);
  border-radius:8px;padding:17px 20px;font-size:16.5px;color:var(--ink2);transition:border-color .12s,background .12s;line-height:1.45;min-height:48px}
.op:hover{border-color:var(--amber);background:var(--amber-l)}
.op .k{flex:0 0 25px;height:25px;border-radius:5px;background:var(--soft);color:var(--grey);display:flex;align-items:center;
  justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600}
.op:has(input:checked),.op.marcada{border-color:var(--amber);background:var(--amber-l);color:var(--ink);font-weight:600}
.op:has(input:checked) .k,.op.marcada .k,.op:hover .k{background:var(--amber-d);color:#fff}
.dica-teclado{font-size:13px;color:var(--grey);margin:14px 0 0}

/* ---------- navegação ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:36px 0 0}
.btn{background:var(--amber);color:#1A1812;border:0;border-radius:5px;padding:15px 32px;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:17.5px;letter-spacing:-.01em;transition:background .15s;text-decoration:none;display:inline-block;text-align:center;min-height:48px}
.btn:hover{background:var(--amber-d);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--grey);padding:15px 0;font-size:15px;font-family:'Source Sans 3',sans-serif;font-weight:600}
.btn.ghost:hover{color:var(--ink);background:transparent}
.btn.grande{width:100%}
.btn.linha{background:transparent;border:1.5px solid #4A463C;color:#D9D2C3;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:16px}
.btn.linha:hover{background:#2A2720;color:#fff}

/* ---------- estados ---------- */
.estado{text-align:center;padding:70px 0}
.giro{width:42px;height:42px;border:4px solid var(--line);border-top-color:var(--amber);border-radius:50%;margin:0 auto 20px;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.estado.erro h2{color:var(--crit)}

/* ---------- resultado ---------- */
.tela.sem-topo{padding-top:0}
.hero{background:var(--ink);color:#F7F4EC;margin:0 0 44px;padding:48px 64px}
.hero .selo{color:#D8A33A}
.hero .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:78px;line-height:.9;color:#E0A93B;letter-spacing:-.04em}
.hero .num span{font-size:26px;color:#A49D8E}
.hero .fx{display:inline-block;margin:14px 0 0;padding:6px 15px;border-radius:20px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.hero p{color:#CFC8B8;margin:14px 0 0;max-width:36em}
.fx.crit{background:#3A211C;color:#EBA893}.fx.alerta{background:#3A2B18;color:#EBC48E}.fx.neutro{background:#302E28;color:#CFCABD}
.fx.bom{background:#25301F;color:#B7CEA5}.fx.otimo{background:#1E2E22;color:#A7CDB3}

.chart{margin:8px 0 0;padding:0;list-style:none}
.linha{display:grid;grid-template-columns:150px minmax(0,1fr) 46px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.linha:last-child{border-bottom:0}
.linha .nm{font-size:15px;color:var(--ink2)}
.linha .nm b{color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;margin-right:6px}
.linha .tk{-webkit-appearance:none;appearance:none;display:block;width:100%;height:15px;border:0;background:var(--soft);border-radius:4px;overflow:hidden;color:var(--amber)}
.linha .tk::-webkit-progress-bar{background:var(--soft);border-radius:4px}
.linha .tk::-webkit-progress-value{background:var(--amber);border-radius:4px}
.linha .tk::-moz-progress-bar{background:var(--amber);border-radius:4px}
.linha .vl{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--ink);text-align:right;font-weight:600}
.linha.pior .tk{color:var(--crit)}
.linha.pior .tk::-webkit-progress-value{background:var(--crit)}
.linha.pior .tk::-moz-progress-bar{background:var(--crit)}
.linha.pior .vl{color:var(--crit)}
.tag-pior{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--crit);
  background:#F8ECE8;padding:2px 7px;border-radius:3px;margin-left:6px;white-space:nowrap}

.box{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:28px 30px;margin:36px 0}
.box.trava{background:#F8ECE8;border-color:#E4C7BF}
.box.trava h3{color:var(--crit)}
.box p:last-child{margin-bottom:0}
.voz{list-style:none;padding:0;margin:14px 0 4px}
.voz li{background:#fff;border-left:3px solid var(--crit);border-radius:0 5px 5px 0;padding:10px 14px;margin:0 0 9px;font-size:15.5px;color:var(--ink)}
.voz li small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:0 0 3px}
.voz li q{font-weight:600}

/* ---------- a virada (ADR-0092) ---------- */
.virada{border-top:3px solid var(--ink);padding:40px 0 4px;margin:48px 0 0}
.virada h2{font-size:30px}
.virada .forte{font-size:19px;color:var(--ink);line-height:1.5}
.destrava{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:22px 0}
.destrava div{border:1px solid var(--line);border-radius:6px;padding:16px 18px;background:#FEFDFB}
.destrava small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin:0 0 6px}
.destrava .t{color:var(--crit);font-weight:700}
.destrava .d{color:var(--otimo);font-weight:700}

.oferta{background:var(--ink);color:#F2EEE3;border-radius:12px;padding:40px 44px;margin:32px 0 0}
.oferta .selo{color:#D8A33A}
.oferta h2{color:#FDFBF5}
.oferta p{color:#CFC8B8}
.oferta .lista{list-style:none;padding:0;margin:18px 0}
.oferta .lista li{display:flex;gap:11px;margin:0 0 10px;color:#E4DED0;font-size:16px}
.oferta .lista li:before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:#E0A93B;margin-top:9px}
.oferta .btn{width:100%;margin:10px 0 0;display:block;padding:16px}
.preco{text-align:center;margin:18px 0 4px}
.preco .de{font-family:'IBM Plex Mono',monospace;font-size:14px;color:#A49D8E}
.preco .de s{color:#A49D8E}
.preco .por{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:40px;color:#FDFBF5;line-height:1.1}
.preco .quem{font-size:14px;color:#CFC8B8}
.saida{font-size:15px;color:#B8B1A2;text-align:center;margin:16px 0 0}
.guardar{display:flex;gap:10px;align-items:center;margin:26px 0 0;flex-wrap:wrap}
.guardar code{flex:1 1 260px;min-width:0;overflow-wrap:anywhere;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:10px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink2)}
.guardar button{background:#fff;border:1.5px solid var(--line);border-radius:5px;padding:10px 14px;font-weight:600;min-height:44px}

/* ---------- política ---------- */
.politica h3{margin:20px 0 6px}
.politica table{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 10px}
.politica th,.politica td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}

.rodape{text-align:center;color:var(--grey);font-size:12.5px;padding:30px 0 0;font-family:'IBM Plex Mono',monospace;line-height:1.8;
  border-top:1px solid var(--line);margin:34px 0 0}
.rodape a{color:var(--grey)}

@media (max-width:700px){
  .pad{padding:0 22px}
  .barra{padding:12px 22px}
  .tela{padding-top:36px;padding-bottom:48px}
  .capa{padding:44px 22px 52px}
  .capa h1{font-size:33px}
  .capa .lede{font-size:17.5px}
  .capa .btn{width:100%;padding:17px 20px}
  .numeros{gap:8px;margin:0 0 40px}
  .numeros li{padding:14px 10px;text-align:center}
  .numeros b{font-size:30px}
  .numeros span{font-size:13px}
  .letras{grid-template-columns:minmax(0,1fr)}
  .bloco{margin:0 0 44px}
  h1,.titulo-tela{font-size:29px}
  .qtexto{font-size:22px}
  .hero{margin:0 0 32px;padding:36px 22px}
  .hero .num{font-size:60px}
  .dois,.destrava{grid-template-columns:minmax(0,1fr)}
  .linha{grid-template-columns:104px minmax(0,1fr) 42px;gap:10px}
  .linha .nm{font-size:13.5px}
  .btn{padding:15px 22px;font-size:16.5px}
  .nav{flex-direction:column-reverse;align-items:stretch}
  .nav .btn{width:100%}
  .oferta{padding:30px 20px}
  .box{padding:22px 18px}
  .virada h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ================= só no sistema (não existiam no mockup) ================= */
/* sem JavaScript o formulário é uma página longa; com JavaScript, uma tela por vez */
html:not(.js) .js-so{display:none!important}
.js .js-nao{display:none}
html:not(.js) .tela{display:block}
html:not(.js) .pergunta{border-bottom:1px solid var(--line)}
fieldset{border:0;margin:0;min-width:0}
.qlegenda{display:block;float:none;width:100%;padding:0;margin:0 0 30px}
.qlegenda .qletra{display:block}
.qlegenda .qtexto{display:block;margin:0;color:var(--ink)}
.op{position:relative;cursor:pointer}
.op input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.op:has(input:focus-visible){outline:3px solid var(--foco);outline-offset:2px}
.op .tx{flex:1 1 auto;min-width:0}
.aviso-erro{background:#FDF6F4;border-left:3px solid var(--crit);color:var(--crit);border-radius:0 5px 5px 0;padding:12px 16px;margin:0 0 20px;font-size:15.5px}
.tarja-publica{background:var(--crit);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:center;padding:7px 12px;line-height:1.4}
.politica h2{font-size:22px;margin:30px 0 8px}
.politica code{font-family:'IBM Plex Mono',monospace;font-size:.9em;background:var(--soft);padding:1px 5px;border-radius:3px}
.tabela-rola{overflow-x:auto;margin:6px 0 10px}
.tabela-rola table{margin:0}
.politica td,.politica th{overflow-wrap:anywhere}
.lista-politica{padding-left:20px;margin:0 0 14px;color:var(--ink2)}
.lista-politica li{margin:0 0 6px}
.guardar button{color:var(--ink)}