/* Estilo do portal do design system (index.html) e do guia (guia/index.html).
   Saiu do <style> do index.html em 25/set/2026 pra que as duas páginas usem
   uma cópia só (Regra 2). Carregar DEPOIS de /estilo/00-tokens.css. */
/* Portal do design system. Cor, fonte e tracking vêm dos tokens de
   estilo/00-tokens.css, como em qualquer tela do sistema: o portal é a cara
   dele. Só versão clara, fundo branco (pedido do Alessandro, 24/set/2026). Estrutura editorial (barra fixa,
   coluna de leitura, seções numeradas, grupos em caixa suave) segue o padrão
   visual pedido pelo Alessandro em 24/set/2026. */
*{box-sizing:border-box}
/* 00-tokens.css trava html/body em 100% e sem rolagem, de propósito, pro
   protótipo. Esta página é conteúdo corrido: religa a rolagem. */
html{height:auto;scroll-behavior:smooth;scroll-padding-top:72px}
body{height:auto;min-height:100%;overflow-y:auto;margin:0;background:var(--papel);color:var(--tinta);
  font:400 15px/1.68 var(--fonte);-webkit-font-smoothing:antialiased}
a{color:var(--acao);text-decoration:none;border-bottom:1px solid var(--acao-borda)}
a:hover{border-bottom-color:var(--acao)}
a:focus-visible{outline:var(--focus-ring-width) solid var(--anel);outline-offset:2px;border-radius:2px}
.baixar{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.baixar a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:7px 12px;border-radius:var(--r-m);
  border:0;box-shadow:inset 0 0 0 1px var(--borda);color:var(--tinta);background:var(--papel)}
.baixar a:hover{box-shadow:inset 0 0 0 1px var(--borda-forte);background:var(--sup-3)}
.baixar a.pri{background:var(--acao);color:var(--marca-tinta);box-shadow:none}
.baixar a.pri:hover{background:var(--acao-2)}
code{font:500 12.5px var(--fonte-mono);background:var(--sup-2);padding:1px 5px;border-radius:var(--r-xs)}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
@media (min-width:600px){.wrap{padding:0 32px}}

.bar{position:sticky;top:0;z-index:10;background:var(--shell);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--linha)}
.bar .in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:11px}
@media (min-width:600px){.bar .in{padding:12px 32px}}
.bar img{width:19px;height:auto;display:block}
.bar b{font-size:13px;font-weight:600}
.bar nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.bar nav a{font-size:12.5px;color:var(--t2);border:0}
.bar nav a:hover{color:var(--tinta)}
@media (max-width:720px){.bar nav{display:none}}

header.top{padding:56px 0 0}
@media (min-width:600px){header.top{padding:76px 0 0}}
.kicker{font-size:11px;font-weight:600;letter-spacing:var(--tr-gutter);text-transform:uppercase;color:var(--t4);margin:0 0 22px}
h1{font-size:30px;line-height:1.12;font-weight:600;letter-spacing:var(--tr-display);margin:0 0 20px;max-width:22ch;text-wrap:balance}
@media (min-width:600px){h1{font-size:40px;line-height:1.07}}
.lede{font-size:17px;line-height:1.58;color:var(--t2);margin:0;max-width:60ch;text-wrap:pretty}
@media (min-width:600px){.lede{font-size:19px}}
.lede b{color:var(--tinta);font-weight:600}

section{padding:48px 0 0}
@media (min-width:600px){section{padding:60px 0 0}}
.cab{display:flex;gap:16px;align-items:baseline}
.cab .n{font:11px/1 var(--fonte-mono);color:var(--t4);padding-top:9px;flex:0 0 20px;display:none}
@media (min-width:600px){.cab .n{display:block}}
h2{font-size:21px;line-height:1.24;font-weight:600;letter-spacing:var(--tr-titulo);margin:0;text-wrap:balance}
@media (min-width:600px){h2{font-size:23px}}
.cap{font-size:14px;line-height:1.62;color:var(--t3);margin:10px 0 22px;max-width:64ch;text-wrap:pretty}
.cap b{color:var(--t2);font-weight:600}
@media (min-width:600px){.cap,.box{margin-left:36px}}

/* portas de entrada */
.portas{display:grid;gap:12px}
@media (min-width:680px){.portas{grid-template-columns:1fr 1fr}}
.porta{display:block;background:var(--sup-2);border:0;border-radius:var(--card-radius);padding:18px 20px 20px;color:inherit}
.porta:hover{background:var(--sup-3)}
.porta .et{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t4);margin-bottom:8px}
.porta b{display:block;font-size:16px;font-weight:600;color:var(--tinta);margin-bottom:4px}
/* --t2: sobre o fundo --sup-2 do cartão, --t3 media 4,35:1 (auditoria de
   25/set/2026, medido no site publicado). */
.porta span.d{display:block;font-size:13.5px;line-height:1.58;color:var(--t2)}
.porta.destaque{background:var(--acao-fraco);box-shadow:inset 0 0 0 1px var(--acao-borda)}
.porta.destaque .et{color:var(--acao)}
.bdg{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:1px 8px 2px;border-radius:var(--r-cheio);
  letter-spacing:0;text-transform:none;white-space:nowrap}
.bdg.int{background:var(--acao-fraco);color:var(--acao);box-shadow:inset 0 0 0 1px var(--acao-borda)}
.bdg.pub{background:var(--sup-2);color:var(--t2)}

/* linhas */
.lin{margin:0;padding:0;list-style:none}
.lin .linha{display:block;margin-top:6px}
.lin>li{display:grid;grid-template-columns:1fr;row-gap:4px;padding:15px 0 16px;border-top:1px solid var(--linha-2)}
.lin>li:first-child{border-top:0}
@media (min-width:600px){.lin>li{grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);column-gap:26px}}
.lin .t{font-size:15px;font-weight:600;line-height:1.44;color:var(--tinta)}
.lin .t a{color:var(--tinta);border-bottom-color:var(--linha-3)}
.lin .d{font-size:14px;line-height:1.62;color:var(--t3)}
.lin .d a{font-size:13px}

/* tabela */
.rolo{overflow-x:auto}
table.t{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:13px;font-weight:600;color:var(--t4);padding:0 16px 11px 0;border-bottom:1px solid var(--linha);white-space:nowrap}
table.t td{padding:13px 16px 13px 0;color:var(--t3);vertical-align:top;line-height:1.55;border-bottom:1px solid var(--linha-2)}
table.t td:first-child{color:var(--tinta);font-weight:600;white-space:nowrap}

/* grupos e destaques */
.grupo{background:var(--sup-2);border-radius:var(--card-radius);padding:18px 20px 20px;margin-top:14px}
@media (min-width:600px){.grupo{padding:20px 26px 22px}}
.grupo .gl{font-size:15px;font-weight:600;margin:0 0 6px}
.grupo p{font-size:14px;line-height:1.65;color:var(--t3);margin:0}
.aviso{border-radius:var(--card-radius);padding:18px 20px;margin-top:14px;background:var(--acao-fraco);box-shadow:inset 0 0 0 1px var(--acao-borda)}
.aviso .et{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acao);margin-bottom:8px}
.aviso p{margin:0;font-size:16px;line-height:1.55}
.aviso p+p{margin-top:10px;font-size:14px;color:var(--t2)}

/* fundamentos */
.cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cor{border-radius:var(--r);overflow:hidden;background:var(--papel);box-shadow:inset 0 0 0 1px var(--linha)}
.cor i{display:block;height:52px}
.cor span{display:block;padding:8px 10px 10px;font-size:12.5px;line-height:1.4;color:var(--t3)}
.cor code{background:none;padding:0;color:var(--tinta)}
.tipos{display:grid;gap:10px}
.tipo{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline;padding:10px 0;border-top:1px solid var(--linha-2)}
.tipo:first-child{border-top:0}
.tipo code{justify-self:start}
.esc{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.esc div{display:flex;flex-direction:column;align-items:center;gap:6px;font:11px var(--fonte-mono);color:var(--t4)}
.esc i{display:block;background:var(--acao);border-radius:2px;height:14px}

/* componentes */
.comps{display:grid;gap:0 26px}
@media (min-width:680px){.comps{grid-template-columns:1fr 1fr}}
.comp{padding:13px 0 14px;border-top:1px solid var(--linha-2)}
.comp b{display:block;font-size:14.5px;font-weight:600}
.comp span{display:block;font-size:13.5px;line-height:1.55;color:var(--t3)}
.comp nav{display:flex;gap:14px;margin-top:5px;font-size:12.5px}

.pe{font-size:13px;color:var(--t4);margin:72px 0 0;padding:26px 0 72px;border-top:1px solid var(--linha);line-height:1.65}
.pe a{color:var(--t3);border-bottom-color:var(--linha)}