/* v9 (30/10/2026): direção C aprovada pelo Bruno, inspirada no GitHub Primer, com tom mais leve. Sem fontes externas. Uma cor de ação (azul). */
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--bg:#fff;--canvas:#f6f8fa;--card:#fff;--tx:#1f2328;--tx2:#59636e;--line:#d1d9e0;--line2:#e3e8ee;--ac:#0969da;--ac-btn:#0969da;--onac:#fff;--sel:#ddf4ff;
--scrim:rgba(31,35,40,.45);--sombra:0 8px 24px rgba(31,35,40,.16);
--r:8px;--r-sm:6px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;color-scheme:light dark;
--tg-design-bg:#ffeff7;--tg-design:#a32b72;--tg-conteudo:#f6f0ff;--tg-conteudo-tx:#6e40c9;--tg-produtividade-bg:#e9f8ee;--tg-produtividade:#116329;
--tg-pesquisa-bg:#e6f6f7;--tg-pesquisa:#0b6470;--tg-reunioes-bg:#fff6e0;--tg-reunioes:#7d4e00;--dest-bg:#fff8c5;--dest:#6f4b00}
@media(prefers-color-scheme:dark){:root{--bg:#0d1117;--canvas:#151b23;--card:#0d1117;--tx:#f0f6fc;--tx2:#9ea7b3;--line:#3d444d;--line2:#2a3038;--ac:#4493f8;--ac-btn:#1f6feb;--onac:#fff;--sel:#12294a;
--scrim:rgba(1,4,9,.7);--sombra:0 8px 24px rgba(1,4,9,.6);
--tg-design-bg:#3a1830;--tg-design:#ffadd8;--tg-conteudo:#2b1d4a;--tg-conteudo-tx:#d8c2ff;--tg-produtividade-bg:#11301c;--tg-produtividade:#7ee2a0;
--tg-pesquisa-bg:#0d2f35;--tg-pesquisa:#7fd8e3;--tg-reunioes-bg:#33260a;--tg-reunioes:#f2cc6b;--dest-bg:#3a2e05;--dest:#f5d76e}}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;color:var(--tx);background:var(--bg);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.trava{overflow:hidden}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
.pular{position:absolute;left:var(--s4);top:-60px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);z-index:70}.pular:focus{top:var(--s2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1216px;margin:0 auto;padding:0 var(--s5)}
/* cabeçalho */
header.top{background:var(--canvas);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:60px}
.marca{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:600;color:var(--tx);white-space:nowrap;min-width:0}
.marca:hover{text-decoration:none}.marca span{color:var(--tx2);font-weight:400}
.marca .avatar{width:32px;height:32px;flex:none;image-rendering:pixelated;border-radius:50%;border:1px solid var(--line);background:var(--bg)}
nav.menu{display:flex;gap:2px}
nav.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);color:var(--tx);border-radius:var(--r-sm);font-size:14px}
nav.menu a:hover{background:var(--line2);text-decoration:none}
nav.menu a[aria-current=page]{font-weight:600;box-shadow:inset 0 -2px var(--ac);border-radius:0}
main{padding:var(--s6) 0 48px}
h1{font-size:32px;line-height:1.2;font-weight:600;margin:0 0 var(--s2);letter-spacing:-.01em}
h2{font-size:20px;line-height:1.3;font-weight:600;margin:0 0 var(--s3)}
h3{font-size:16px;line-height:1.35;font-weight:600;margin:0}
.lead{font-size:16px;color:var(--tx2);max-width:680px;margin:0 0 var(--s4)}
p{overflow-wrap:break-word}
/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:var(--r-sm);border:1px solid var(--line);background:var(--canvas);color:var(--tx);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;background:var(--line2)}
.btn.pri{background:var(--ac-btn);border-color:var(--ac-btn);color:var(--onac)}.btn.pri:hover{filter:brightness(.94)}
.btn svg{width:16px;height:16px;flex:none}
.acoes{display:flex;gap:var(--s2);flex-wrap:wrap}.acoes.centro{justify-content:flex-start;margin-top:var(--s4)}
button.link{background:none;border:0;padding:0;font:inherit;color:var(--ac);cursor:pointer;min-height:44px}button.link:hover{text-decoration:underline}
/* etiquetas */
.tag{display:inline-flex;align-items:center;align-self:flex-start;font-size:12px;font-weight:600;line-height:1.4;padding:2px 10px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.t-design{background:var(--tg-design-bg);color:var(--tg-design)}.t-conteudo{background:var(--tg-conteudo);color:var(--tg-conteudo-tx)}
.t-produtividade{background:var(--tg-produtividade-bg);color:var(--tg-produtividade)}.t-pesquisa{background:var(--tg-pesquisa-bg);color:var(--tg-pesquisa)}.t-reunioes{background:var(--tg-reunioes-bg);color:var(--tg-reunioes)}
.dest{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--dest-bg);color:var(--dest)}
.dest svg{width:12px;height:12px}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3)}
/* cards e grade */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}
.skill{display:flex;flex-direction:column;gap:var(--s2);color:var(--tx)}
a.skill:hover{text-decoration:none;border-color:var(--tx2)}
.skill h3{color:var(--ac)}
.skill p{margin:0;color:var(--tx2);font-size:14px}
.skill .por{font-size:13px}
.skill .ir{margin-top:auto;color:var(--ac);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:var(--s1)}.skill .ir svg{width:14px;height:14px}
.meta{font-size:12px;color:var(--tx2);display:flex;gap:var(--s1) var(--s3);flex-wrap:wrap;align-items:center}
.secao{margin-top:40px}
/* abertura */
.hero{background:var(--canvas);box-shadow:0 0 0 100vmax var(--canvas);clip-path:inset(0 -100vmax);margin-top:calc(-1 * var(--s6));padding:40px 0 var(--s6)}
.hero h1{font-size:clamp(28px,4vw,40px)}
.busca-hero{display:flex;align-items:center;gap:var(--s2);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:4px 4px 4px var(--s3);max-width:560px;margin:var(--s4) 0 0}
.busca-hero:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--sel)}
.busca-hero>svg{width:18px;height:18px;color:var(--tx2);flex:none}
.busca-hero input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--tx);min-height:44px}.busca-hero input:focus{outline:none}
.nota{font-size:14px;color:var(--tx2);max-width:680px;margin:var(--s5) 0 var(--s3)}
.fatos{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4);padding:0;list-style:none;font-size:14px;color:var(--tx2)}
.fatos li{border:1px solid var(--line);border-radius:99px;padding:2px 12px;background:var(--card)}.fatos b{color:var(--tx);font-weight:600}
.cats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);grid-auto-rows:1fr}
.cats li{display:flex;min-width:0}
.cats a{flex:1;display:flex;flex-direction:column;gap:var(--s1);color:var(--tx);min-height:44px}
.cats a:hover{text-decoration:none;border-color:var(--tx2)}
.cats a strong{overflow-wrap:anywhere}.cats a span{font-size:13px;color:var(--tx2);margin-top:auto}
.ci{display:inline-flex;width:36px;height:36px;border-radius:var(--r);align-items:center;justify-content:center;margin-bottom:var(--s1)}.ci svg{width:18px;height:18px}
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);margin:0;padding:0;list-style:none;counter-reset:p}
.passos li{counter-increment:p}.passos strong{display:block;font-size:16px;margin-bottom:var(--s1)}
.passos strong::before{content:counter(p);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);font-size:12px;margin-right:var(--s2);color:var(--tx2)}
.passos span{color:var(--tx2);font-size:14px}
/* listagem: lateral + lista */
.layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--s6);align-items:start}
.lateral{position:sticky;top:var(--s4)}
.lateral h2,.ov h2.mini{font-size:12px;color:var(--tx2);margin:0 0 var(--s2);text-transform:uppercase;letter-spacing:.04em}
.catlista{display:grid;gap:2px}
.catlista button{display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;min-height:44px;padding:0 var(--s3);border:0;background:none;border-radius:var(--r-sm);font:inherit;font-size:14px;color:var(--tx);cursor:pointer}
.catlista button:hover{background:var(--canvas)}
.catlista button[aria-pressed=true]{background:var(--sel);font-weight:600;box-shadow:inset 3px 0 var(--ac)}
.catlista .n{margin-left:auto;font-size:12px;color:var(--tx2);background:var(--canvas);border:1px solid var(--line);border-radius:99px;padding:0 8px}
.bola{width:10px;height:10px;border-radius:50%;flex:none;border:5px solid currentColor;color:var(--tx2)}
.bola[class*=t-]{color:inherit}.catlista .bola.t-design{color:var(--tg-design)}.catlista .bola.t-conteudo{color:var(--tg-conteudo-tx)}.catlista .bola.t-produtividade{color:var(--tg-produtividade)}.catlista .bola.t-pesquisa{color:var(--tg-pesquisa)}.catlista .bola.t-reunioes{color:var(--tg-reunioes)}
.ferr{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s4) 0 var(--s3)}
.ferr .q{flex:1 1 200px;position:relative;min-width:0}
.q svg{position:absolute;left:12px;top:13px;width:18px;height:18px;color:var(--tx2)}
.q input{width:100%;min-height:44px;padding:0 var(--s3) 0 40px;font:inherit;font-size:16px;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.q input:focus{border-color:var(--ac);outline:none;box-shadow:0 0 0 3px var(--sel)}
#fbtn{display:none}
.filtro-lic{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--tx2)}
.filtro-lic select{font:inherit;font-size:14px;color:var(--tx);background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-sm);min-height:44px;padding:0 var(--s3);max-width:100%}
.estado-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s3);min-height:44px}
.contador{font-size:14px;font-weight:600;color:var(--tx)}
.chip.dest{border-color:currentColor}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px 0 12px;border-radius:99px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid currentColor;position:relative}

.chip svg{width:14px;height:14px}.chip .xx{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%}
.leitura{font-size:13px;color:var(--tx2);margin:0 0 var(--s3)}
.leitura kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:4px;padding:0 4px;background:var(--canvas)}
.linhas{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.linhas .skill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s4);border:0;border-radius:0;border-bottom:1px solid var(--line);padding:14px var(--s4)}
.linhas .skill:last-child{border-bottom:0}
.linhas .skill:hover{background:var(--canvas)}
.linhas .skill .tag{grid-column:2;grid-row:1;align-self:center}
.linhas .skill h3,.linhas .skill p,.linhas .skill .meta{grid-column:1}
.linhas .skill .ir{display:none}
.linhas .skill p.d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.estado{display:grid;gap:var(--s2);justify-items:start}.estado p{margin:0;color:var(--tx2)}
/* overlays (DESIGN.md seção 9) */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.ov{position:fixed;z-index:50;background:var(--bg);color:var(--tx);box-shadow:var(--sombra);overflow:auto;overscroll-behavior:contain}
.ovh{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s3)}
.ovh h2{margin:0;font-size:20px;overflow-wrap:anywhere}
.x{width:44px;height:44px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx);flex:none;cursor:pointer}
.x:hover{background:var(--canvas)}.x svg{width:18px;height:18px}
.sheet{top:0;right:0;height:100%;width:min(480px,100%);padding:var(--s5);border-left:1px solid var(--line);transform:translateX(100%)}
.drawer{left:0;right:0;bottom:0;max-height:85vh;border-radius:16px 16px 0 0;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));transform:translateY(100%)}
.drawer::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto var(--s3)}
.ov.on{transform:none}
.sheet .por{color:var(--tx2)}.sheet p{margin:0 0 var(--s3)}
.sheet .acoes{margin:var(--s4) 0}
.sheet .completa{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font-weight:600;font-size:14px}.sheet .completa svg{width:14px;height:14px}
.drawer .filtro-lic{margin-top:var(--s3)}
@media(prefers-reduced-motion:no-preference){.ov{transition:transform .22s cubic-bezier(.2,.7,.3,1)}.toast{transition:opacity .2s,transform .2s}}
/* página de detalhe */
.crumb a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font-size:14px}.crumb svg{width:14px;height:14px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:var(--s4);align-items:start}
.pilha{display:grid;gap:var(--s3);min-width:0}
.card h2{font-size:16px}
pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--tx);background:var(--canvas);border:1px solid var(--line2);border-radius:var(--r-sm);padding:var(--s3);max-height:480px;overflow:auto}
code{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere;background:var(--canvas);border-radius:4px;padding:0 4px}
dl.ficha{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);font-size:13px}dl.ficha dt{color:var(--tx2)}dl.ficha dd{margin:0;overflow-wrap:anywhere}
.lista{margin:0;padding-left:20px}.lista li+li{margin-top:var(--s2)}
.aviso{font-size:13px;color:var(--tx2);margin:0}.card .aviso+.acoes{margin-top:var(--s3)}
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--canvas);width:max-content;max-width:100%}
.seg button{min-height:40px;border:1px solid transparent;background:none;font:inherit;font-size:13px;color:var(--tx2);border-radius:var(--r-sm);cursor:pointer;padding:0 var(--s4)}
.seg [aria-selected=true]{background:var(--bg);color:var(--tx);font-weight:600;border-color:var(--line)}
.painel{margin-top:var(--s3)}.painel p{margin:0}
.md h3{margin:24px 0 8px;font-size:16px}.md h3:first-of-type{margin-top:8px}.md pre{white-space:pre-wrap}
.doc{max-width:720px}.doc h2{margin-top:var(--s5)}.doc ul{padding-left:20px}
.data{font-size:13px;color:var(--tx2);margin:0 0 var(--s5)}
/* toast, banner, rodapé */
.toast{position:fixed;right:24px;bottom:24px;z-index:60;background:var(--tx);color:var(--bg);font-weight:600;font-size:14px;border-radius:var(--r-sm);padding:12px 18px;box-shadow:var(--sombra);opacity:0;transform:translateY(8px);pointer-events:none}
.toast.on{opacity:1;transform:none}
.cookies{position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:55;max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);box-shadow:var(--sombra);display:flex;gap:var(--s4);align-items:center}
.cookies[hidden]{display:none}.cookies p{margin:0;font-size:14px;flex:1;min-width:0}
.cookies .acoes{flex:none;margin:0;flex-wrap:nowrap}.cookies .btn{min-width:104px}
footer{border-top:1px solid var(--line);background:var(--canvas);padding:var(--s5) 0;font-size:13px;color:var(--tx2)}
footer .wrap{display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:space-between;align-items:center}
footer a{display:inline-flex;align-items:center;min-height:44px}footer .links-rod{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
@media(max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){.layout{grid-template-columns:minmax(0,1fr)}.lateral{display:none}#fbtn{display:inline-flex}
 .ferr .filtro-lic{display:none}}
@media(max-width:600px){.sheet{width:100%;border-left:0}
 .toast{right:auto;left:50%;transform:translate(-50%,8px);bottom:calc(16px + env(safe-area-inset-bottom))}.toast.on{transform:translate(-50%,0)}
 .cookies{flex-direction:column;align-items:stretch;padding:var(--s3)}.cookies .acoes{display:grid;grid-template-columns:1fr 1fr}
 .linhas .skill{grid-template-columns:minmax(0,1fr)}.linhas .skill .tag{grid-column:1;grid-row:auto}}
@media(max-width:430px){.wrap{padding:0 var(--s4)}main{padding:var(--s5) 0 40px}.hero{margin-top:calc(-1 * var(--s5));padding-top:var(--s6)}
 .card{padding:var(--s3)}nav.menu a{padding:0 10px}.marca span{display:none}.grid{grid-template-columns:minmax(0,1fr)}.acoes .btn{flex:1 1 100%}
 .busca-hero .btn{padding:0 var(--s3)}.seg{width:100%}.seg button{flex:1 1 40%;padding:0 var(--s2)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* 404 com pilha de formas */
.e404{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:end;min-height:420px}
.e404 .cod{font-size:13px;font-weight:600;color:var(--tx2);margin:0 0 var(--s2)}
.pilha404{width:100%;height:380px;display:block;border-bottom:2px solid var(--line)}
@media(max-width:760px){.e404{grid-template-columns:minmax(0,1fr);gap:var(--s4);min-height:0}.pilha404{height:240px}}

/* Sobre + redes (30/10) */
.sobre{max-width:720px}.sobre .cargo{color:var(--tx2);margin:4px 0 var(--s4)}
.redes{list-style:none;margin:0;padding:8px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.redes li+li{margin-top:2px}
.redes a{border-radius:var(--r-sm);display:flex;align-items:center;gap:12px;min-height:48px;padding:0 var(--s3);color:var(--tx)}
.redes a:hover{background:var(--line2);text-decoration:none}
.redes .rn{font-weight:600}.redes .rh{color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.redes a>svg:last-child{width:16px;height:16px;color:var(--tx2);flex:none}.redes .ri{display:inline-flex;flex:none}
footer .redes-rod{display:flex;gap:4px}footer .redes-rod a{justify-content:center;min-width:44px;color:var(--tx2)}footer .redes-rod a:hover{color:var(--tx)}