/* Baluarte — protótipo v1 · Direção B "Concreto & Bronze"
   Layout: páginas comerciais com menu no topo e seções em sequência; conteúdo técnico em 3 colunas (menu · texto · sumário).
   Tema único claro, por decisão de marca (fundos e cores definidos explicitamente). */
:root{
  --grafite:#1F2124; --aco:#555B62; --concreto:#D3D0CA; --nevoa:#ECEBE8; --papel:#FAFAF8; --branco:#FFFFFF;
  --bronze:#8C5A2E; --bronze-esc:#6E4520; --bronze-claro:#C08A5A; --azul:#3F6C8C; --verde:#5F7F6E;
  --linha:#D9D6D0; --linha-esc:#3A3D41;
  --titulo:'IBM Plex Sans Condensed','Arial Narrow',sans-serif;
  --texto:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --max:1200px; --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--papel); color:var(--grafite); font-family:var(--texto); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--bronze-esc); text-underline-offset:3px}
a:hover{color:var(--bronze)}
h1,h2,h3,h4{font-family:var(--titulo); font-weight:600; line-height:1.1; margin:0; text-wrap:balance; letter-spacing:-.005em}
p{margin:0}
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
.rotulo{font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--aco)}
.rotulo.bronze{color:var(--bronze-esc)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* faixa de protótipo */
.proto{background:var(--grafite); color:var(--concreto); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em}
.proto .wrap{display:flex; gap:16px; justify-content:space-between; align-items:center; padding-block:7px; flex-wrap:wrap}
.proto a{color:var(--bronze-claro)}

/* cabeçalho */
.topo{background:var(--papel); border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:20}
.topo .wrap{display:flex; align-items:center; gap:24px; padding-block:14px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--grafite)}
.sym{display:inline-block; width:var(--s,30px); aspect-ratio:1; background:var(--bronze); -webkit-mask:url(img/simbolo.png) center/contain no-repeat; mask:url(img/simbolo.png) center/contain no-repeat; flex:none}
.marca b{font-family:var(--titulo); font-weight:700; font-size:1.15rem; letter-spacing:.1em; display:block; line-height:1}
.marca small{font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; color:var(--aco); display:block; margin-top:3px}
.menu{display:flex; gap:22px; margin-left:auto; align-items:center}
.menu a{color:var(--grafite); text-decoration:none; font-size:.93rem; font-weight:500; padding-block:6px; border-bottom:2px solid transparent}
.menu a:hover{color:var(--bronze-esc)}
.menu a[aria-current="page"]{border-bottom-color:var(--bronze)}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--texto); font-weight:600; font-size:.93rem; padding:11px 18px; text-decoration:none; border:1px solid transparent; cursor:pointer; line-height:1.2}
.btn.prim{background:var(--bronze); color:#fff}
.btn.prim:hover{background:var(--bronze-esc); color:#fff}
.btn.sec{border-color:var(--grafite); color:var(--grafite); background:transparent}
.btn.sec:hover{background:var(--grafite); color:var(--papel)}
.btn.clara{border-color:var(--concreto); color:var(--papel)}
.btn.clara:hover{background:var(--papel); color:var(--grafite)}
/* aba destacada da área de blog e cursos */
.menu a.aba-blog{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--grafite); padding:9px 14px; font-weight:600; background:var(--branco)}
.menu a.aba-blog i{width:9px; height:9px; background:var(--azul); display:inline-block}
.menu a.aba-blog:hover{background:var(--grafite); color:var(--papel)}
.menu a.aba-blog[aria-current="page"]{background:var(--grafite); color:var(--papel); border-bottom-color:var(--grafite)}
.faixa-blog{background:var(--grafite); color:var(--papel); border-bottom:3px solid var(--azul)}
.faixa-blog .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:12px; flex-wrap:wrap}
.faixa-blog .nome{display:grid; color:var(--papel); text-decoration:none; line-height:1.2}
.faixa-blog .nome b{font-family:var(--titulo); font-weight:700; letter-spacing:.12em; font-size:1.05rem}
.faixa-blog .nome span{font-size:.8rem; color:var(--concreto)}
.faixa-blog nav{display:flex; gap:18px; flex-wrap:wrap}
.faixa-blog nav a{color:var(--concreto); text-decoration:none; font-size:.9rem}
.faixa-blog nav a:hover{color:var(--papel)}
.cab-pagina.blog{background:var(--papel)}
/* botão Entrar (ícone de pessoa) */
.menu a.entrar{display:inline-flex; align-items:center; gap:8px; width:40px; height:40px; justify-content:center; border:1px solid var(--linha); background:var(--branco); padding:0; border-radius:50%}
.menu a.entrar svg{width:20px; height:20px}
.menu a.entrar span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.menu a.entrar:hover,.menu a.entrar[aria-current="page"]{border-color:var(--grafite); background:var(--grafite); color:var(--papel)}
@media (max-width:1100px){
  .menu a.entrar{width:auto; height:auto; border-radius:0; padding:9px 14px; border-color:var(--grafite)}
  .menu a.entrar span{position:static; width:auto; height:auto; clip:auto}
}
/* área restrita: login e "suas áreas" */
.restrita{display:grid; grid-template-columns:minmax(0,420px); justify-content:center; padding-block:clamp(40px,7vw,88px)}
.restrita form, .restrita .caixa-login{display:grid; gap:14px; background:var(--branco); border:1px solid var(--grafite); padding:28px; box-shadow:10px 10px 0 var(--concreto)}
.restrita h1{font-size:1.8rem}
.restrita .erro{color:#A33A2B; font-size:.9rem}
.restrita .ok{color:var(--verde); font-size:.9rem}
.areas{display:grid; gap:28px; padding-block:clamp(40px,6vw,72px)}
.areas .grupo{display:grid; gap:12px}
.areas .grupo h2{font-size:1.4rem}
.grade-areas{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.area{display:grid; gap:6px; align-content:start; padding:18px 20px; background:var(--branco); border:1px solid var(--linha); text-decoration:none; color:var(--grafite); position:relative}
.area:hover{border-color:var(--grafite)}
.area b{font-family:var(--titulo); font-size:1.25rem; font-weight:600}
.area span{font-size:.9rem; color:var(--aco)}
.area .nivel{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-esc)}
.area.breve{opacity:.55; pointer-events:none}
.area.breve::after{content:"em preparação"; position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--aco)}
/* voltar ao topo */
.voltar-topo{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:30; background:var(--grafite); color:var(--papel); text-decoration:none; font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; padding:10px 14px; border:1px solid var(--grafite); box-shadow:4px 4px 0 var(--concreto)}
.voltar-topo:hover{background:var(--bronze); border-color:var(--bronze); color:#fff}
.voltar-topo[hidden]{display:none}
.abrir-menu{display:none; margin-left:auto; background:none; border:1px solid var(--linha); padding:8px 12px; font:inherit; font-size:.85rem}
/* ícone "Entrar" fora do menu, sempre visível no celular/tablet */
.entrar-movel{display:none; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--linha); background:var(--branco); color:var(--grafite); border-radius:50%; flex:none}
.entrar-movel svg{width:20px; height:20px}
.entrar-movel:hover{border-color:var(--grafite); background:var(--grafite); color:var(--papel)}
@media (max-width:1100px){
  .entrar-movel{display:inline-flex; margin-left:auto}
  .abrir-menu{display:block; margin-left:10px}
  .menu a.entrar{display:none}
  .menu{display:none; position:absolute; left:0; right:0; top:100%; background:var(--papel); border-bottom:1px solid var(--linha); flex-direction:column; align-items:flex-start; gap:4px; padding:12px var(--gutter) 18px}
  .topo.aberto .menu{display:flex}
  .topo .wrap{position:relative}
}

/* seções */
.secao{padding-block:clamp(56px,8vw,96px)}
.secao.nevoa{background:var(--nevoa)}
.secao.escura{background:var(--grafite); color:var(--papel)}
.secao.escura .rotulo{color:var(--concreto)}
.cab-secao{display:grid; gap:10px; margin-bottom:36px; max-width:760px}
.cab-secao h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cab-secao p{color:var(--aco); font-size:1.05rem}
.secao.escura .cab-secao p{color:var(--concreto)}

/* hero */
.hero{background:var(--nevoa); border-bottom:1px solid var(--linha); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px); background-size:48px 48px; opacity:.55; pointer-events:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(40px,6vw,80px)}
.hero h1{font-size:clamp(2.3rem,5vw,4rem); font-weight:700; letter-spacing:-.015em}
.hero h1 span{color:var(--bronze)}
.hero .txt{display:grid; gap:20px; max-width:620px}
.hero .txt p{font-size:1.12rem; color:var(--aco)}
.hero .acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.prancha{background:var(--branco); border:1px solid var(--grafite); padding:8px; box-shadow:10px 10px 0 var(--concreto)}
.prancha img{width:100%; aspect-ratio:4/3; object-fit:cover}
.prancha figcaption{display:grid; grid-template-columns:1fr auto; gap:12px; border-top:1px solid var(--grafite); margin-top:8px; padding-top:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--aco)}
.prancha figcaption b{color:var(--grafite); font-weight:500}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

.numeros{background:var(--grafite); color:var(--papel)}
.numeros .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.numeros div{padding:26px 20px; border-left:1px solid var(--linha-esc); display:grid; gap:2px}
.numeros div:first-child{border-left:0; padding-left:0}
.numeros b{font-family:var(--mono); font-weight:500; font-size:clamp(1.6rem,3vw,2.2rem); font-variant-numeric:tabular-nums; color:var(--papel)}
.numeros span{font-size:.85rem; color:var(--concreto)}
@media (max-width:760px){.numeros .wrap{grid-template-columns:1fr 1fr}.numeros div:nth-child(3){border-left:0; padding-left:0}}

/* cards de serviço */
.grade-servicos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha)}
.servico{background:var(--papel); display:grid; grid-template-rows:auto 1fr; text-decoration:none; color:var(--grafite)}
.servico img{aspect-ratio:16/9; object-fit:cover; filter:grayscale(.35)}
.servico:hover img{filter:none}
.servico div{padding:20px 22px 24px; display:grid; gap:8px; align-content:start}
.servico h3{font-size:1.35rem}
.servico p{color:var(--aco); font-size:.95rem}
.servico .mais{font-weight:600; color:var(--bronze-esc); font-size:.9rem; margin-top:4px}
@media (max-width:900px){.grade-servicos{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grade-servicos{grid-template-columns:1fr}}

/* cards de case */
.grade-cases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
.grade-cases.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-card{display:grid; grid-template-rows:auto 1fr; text-decoration:none; color:var(--grafite); background:var(--branco); border:1px solid var(--linha)}
.case-card img{aspect-ratio:3/2; object-fit:cover}
.case-card .corpo{padding:18px 20px 22px; display:grid; gap:10px; align-content:start}
.case-card h3{font-size:1.4rem}
.case-card .desafio{font-size:.95rem; color:var(--aco); border-left:2px solid var(--bronze); padding-left:12px}
.case-card:hover{border-color:var(--grafite)}
.case-card[hidden]{display:none}
@media (max-width:900px){.grade-cases.tres{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grade-cases,.grade-cases.tres{grid-template-columns:1fr}}

/* processo */
.processo{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--grafite)}
.processo li{list-style:none; padding:22px 24px 0 0; display:grid; gap:10px; position:relative}
.processo li::before{content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; background:var(--bronze)}
.processo b{font-family:var(--mono); font-size:.8rem; color:var(--bronze-esc); font-weight:500}
.processo h3{font-size:1.3rem}
.processo p{color:var(--aco); font-size:.95rem}
ol.processo{margin:0; padding:0}
@media (max-width:860px){.processo{grid-template-columns:1fr 1fr; row-gap:32px}}
@media (max-width:520px){.processo{grid-template-columns:1fr}}

/* responsável */
.responsavel{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
.foto-vazia{aspect-ratio:4/5; border:1px dashed var(--aco); display:grid; place-items:center; text-align:center; padding:16px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--aco); background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(85,91,98,.06) 10px 20px)}
.responsavel .bio{display:grid; gap:14px; max-width:680px}
.responsavel h3{font-size:1.7rem}
.credenciais{display:grid; gap:6px; margin:0; padding:0; list-style:none}
.credenciais li{display:grid; grid-template-columns:110px 1fr; gap:12px; font-size:.95rem; border-top:1px solid var(--linha); padding-top:8px}
.credenciais li span{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--aco); padding-top:3px}
.responsavel.sem-foto{grid-template-columns:minmax(0,1fr)}
.foto-resp{margin:0; background:var(--branco); border:1px solid var(--grafite); padding:8px; box-shadow:10px 10px 0 var(--concreto)}
.foto-resp img{width:100%; aspect-ratio:4/5; object-fit:cover}
@media (max-width:700px){.foto-resp{max-width:260px}}
@media (max-width:700px){.responsavel{grid-template-columns:1fr}.foto-vazia{max-width:240px}}

.pendente{border:1px dashed var(--bronze); background:rgba(140,90,46,.05); padding:22px 24px; display:grid; gap:8px}
.pendente .rotulo{color:var(--bronze-esc)}

/* chamada final */
.chamada .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center}
.chamada h2{font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:720px}
@media (max-width:760px){.chamada .wrap{grid-template-columns:1fr}}

/* rodapé */
.rodape{background:var(--grafite); color:var(--concreto); font-size:.9rem; border-top:1px solid var(--linha-esc)}
.rodape .wrap{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-block:48px 28px}
.rodape h4{font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aco); margin-bottom:12px}
.rodape a{color:var(--papel); text-decoration:none}
.rodape a:hover{color:var(--bronze-claro)}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.rodape .marca{color:var(--papel)} .rodape .marca small{color:var(--concreto)}
.rodape .sym{background:var(--bronze-claro)}
.rodape .base{grid-column:1/-1; border-top:1px solid var(--linha-esc); padding-top:18px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; color:var(--aco)}
@media (max-width:860px){.rodape .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rodape .wrap{grid-template-columns:1fr}}

/* cabeçalho interno */
.cab-pagina{background:var(--nevoa); border-bottom:1px solid var(--linha)}
.cab-pagina .wrap{padding-block:clamp(40px,6vw,72px) clamp(32px,4vw,48px); display:grid; gap:14px}
.cab-pagina h1{font-size:clamp(2.2rem,4.6vw,3.4rem); font-weight:700; max-width:900px}
.cab-pagina p{font-size:1.1rem; color:var(--aco); max-width:720px}
.trilha{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--aco)}
.trilha a{color:var(--aco)}

/* serviços (página) */
.servico-bloco{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); padding-block:48px; border-top:1px solid var(--linha); scroll-margin-top:90px}
.servico-bloco:first-child{border-top:0}
.servico-bloco img{aspect-ratio:4/3; object-fit:cover; border:1px solid var(--linha)}
.servico-bloco .t{display:grid; gap:14px; align-content:start}
.servico-bloco h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.lista-tec{list-style:none; margin:0; padding:0; display:grid; gap:0}
.lista-tec li{border-top:1px solid var(--linha); padding:9px 0 9px 22px; position:relative; font-size:.97rem}
.lista-tec li::before{content:""; position:absolute; left:0; top:17px; width:10px; height:1px; background:var(--bronze)}
.relacionados{display:flex; flex-wrap:wrap; gap:8px}
.relacionados a{font-size:.85rem; border:1px solid var(--linha); padding:4px 10px; text-decoration:none; color:var(--grafite); background:var(--branco)}
.relacionados a:hover{border-color:var(--bronze)}
@media (max-width:820px){.servico-bloco{grid-template-columns:1fr}}

/* filtros */
.filtros{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.filtros button{font:inherit; font-size:.88rem; padding:7px 14px; border:1px solid var(--linha); background:var(--branco); cursor:pointer; color:var(--grafite)}
.filtros button[aria-pressed="true"]{background:var(--grafite); color:var(--papel); border-color:var(--grafite)}

/* página de case */
.case-hero img{width:100%; aspect-ratio:21/9; object-fit:cover; border-bottom:1px solid var(--linha)}
.case-corpo{display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(28px,5vw,72px); padding-block:56px}
.ficha{position:sticky; top:96px; align-self:start; border:1px solid var(--grafite); background:var(--branco)}
.ficha h2{font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; padding:10px 14px; border-bottom:1px solid var(--grafite); background:var(--nevoa)}
.ficha dl{margin:0}
.ficha div{padding:10px 14px; border-bottom:1px solid var(--linha); display:grid; gap:2px}
.ficha div:last-child{border-bottom:0}
.ficha dt{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--aco)}
.ficha dd{margin:0; font-size:.93rem}
.narrativa{display:grid; gap:36px; max-width:720px}
.narrativa section{display:grid; gap:10px}
.narrativa h2{font-size:1.6rem; display:flex; gap:12px; align-items:baseline}
.narrativa h2 .num{font-size:.8rem; color:var(--bronze-esc); font-weight:500}
.narrativa p{font-size:1.05rem}
.narrativa .resultado{background:var(--grafite); color:var(--papel); padding:22px 24px}
.narrativa .resultado h2{color:var(--papel)}
.galeria{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.galeria figure{margin:0; background:var(--branco); border:1px solid var(--linha); padding:6px}
.galeria img{aspect-ratio:4/3; object-fit:cover; width:100%}
.galeria figcaption{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--aco); padding:8px 4px 2px}
.navcase{display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--linha); padding-top:24px; flex-wrap:wrap}
@media (max-width:860px){.case-corpo{grid-template-columns:1fr}.ficha{position:static}.case-hero img{aspect-ratio:16/9}}
@media (max-width:560px){.galeria{grid-template-columns:1fr}}

/* sobre */
.duas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px)}
.duas .t{display:grid; gap:16px; align-content:start}
.valores{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha)}
.valores div{background:var(--papel); padding:20px 22px; display:grid; gap:6px}
.valores h3{font-size:1.2rem}
.valores p{color:var(--aco); font-size:.93rem}
@media (max-width:820px){.duas{grid-template-columns:1fr}.valores{grid-template-columns:1fr}}

/* contato */
.contato{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px,5vw,64px)}
form.form{display:grid; gap:14px; background:var(--branco); border:1px solid var(--linha); padding:26px}
.campo{display:grid; gap:6px; font-size:.9rem; font-weight:600}
.campo input,.campo select,.campo textarea{font:inherit; font-weight:400; border:1px solid var(--concreto); padding:10px 12px; background:var(--papel); color:var(--grafite); width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--bronze); outline:none}
.dois-campos{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.aviso{font-size:.85rem; color:var(--aco)}
.canal{border-top:1px solid var(--linha); padding-block:16px; display:grid; gap:4px}
.canal b{font-family:var(--titulo); font-size:1.2rem; font-weight:600}
@media (max-width:820px){.contato{grid-template-columns:1fr}.dois-campos{grid-template-columns:1fr}}

/* conteúdo técnico: 3 colunas */
.doc{display:grid; grid-template-columns:220px minmax(0,1fr) 220px; gap:clamp(24px,3.5vw,48px); padding-block:40px 72px; align-items:start}
.doc aside{position:sticky; top:96px; display:grid; gap:18px; font-size:.9rem}
.doc aside h2{font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aco)}
.doc aside ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.doc aside a{color:var(--grafite); text-decoration:none; display:block; padding:4px 0 4px 12px; border-left:2px solid var(--linha)}
.doc aside a:hover,.doc aside a[aria-current]{border-left-color:var(--bronze); color:var(--bronze-esc)}
.pilar{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--aco)}
.pilar i{width:9px; height:9px; display:inline-block; background:var(--pc,var(--bronze))}
.lista-artigos{display:grid; gap:0}
.artigo-item{display:grid; gap:8px; padding-block:24px; border-top:1px solid var(--linha); text-decoration:none; color:var(--grafite)}
.artigo-item h3{font-size:1.5rem}
.artigo-item:hover h3{color:var(--bronze-esc)}
.artigo-item p{color:var(--aco)}
.artigo-item .meta{font-family:var(--mono); font-size:.72rem; color:var(--aco); letter-spacing:.04em}
.caixa{border:1px solid var(--linha); background:var(--branco); padding:16px; display:grid; gap:10px}
.caixa h3{font-size:1.1rem}
.caixa p{font-size:.88rem; color:var(--aco)}
.caixa input{font:inherit; font-size:.9rem; border:1px solid var(--concreto); padding:8px 10px; width:100%}
@media (max-width:1060px){.doc{grid-template-columns:200px minmax(0,1fr)}.doc aside.direita{display:none}}
@media (max-width:760px){.doc{grid-template-columns:1fr}.doc aside{position:static}.doc aside.esquerda{display:none}}

/* artigo */
.artigo{display:grid; gap:20px; max-width:720px}
.artigo h1{font-size:clamp(2rem,4vw,2.8rem); font-weight:700}
.artigo h2{font-size:1.55rem; margin-top:18px; scroll-margin-top:90px}
.artigo p{font-size:1.06rem}
.artigo .lead{font-size:1.18rem; color:var(--aco)}
.autor{display:flex; gap:12px; align-items:center; font-size:.88rem; color:var(--aco); border-block:1px solid var(--linha); padding-block:10px}
.autor b{color:var(--grafite)}
.eq{font-family:'Cambria Math','STIX Two Math','Times New Roman',serif; font-size:1.2rem; background:var(--branco); border:1px solid var(--linha); border-left:3px solid var(--azul); padding:16px 18px; overflow-x:auto; white-space:nowrap}
.eq i{font-style:italic}
.eq .rad{border-top:1px solid currentColor; padding-left:2px}
.eq .ref{float:right; font-family:var(--mono); font-size:.72rem; color:var(--aco); margin-left:16px}
.tabela{overflow-x:auto; border:1px solid var(--linha)}
.tabela table{border-collapse:collapse; width:100%; min-width:520px; font-size:.92rem; background:var(--branco)}
.tabela th,.tabela td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--linha); vertical-align:top}
.tabela th{font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--aco); background:var(--nevoa)}
.tabela td:first-child{font-family:'Cambria Math','Times New Roman',serif; font-style:italic; white-space:nowrap}
figure.fig{margin:0; background:var(--branco); border:1px solid var(--linha); padding:12px}
figure.fig figcaption{font-family:var(--mono); font-size:.72rem; color:var(--aco); padding-top:8px}
.calc{border:1px solid var(--grafite); background:var(--branco)}
.calc h3{font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; padding:10px 14px; border-bottom:1px solid var(--grafite); background:var(--nevoa)}
.calc .corpo{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:20px; padding:16px}
.calc label{display:grid; gap:4px; font-size:.85rem; font-weight:600; margin-bottom:12px}
.calc label span{font-family:var(--mono); font-weight:500; color:var(--bronze-esc)}
.calc input[type=range]{width:100%; accent-color:var(--bronze)}
.calc .res{font-family:var(--mono); font-size:1.4rem; color:var(--grafite)}
.calc .res small{display:block; font-size:.7rem; color:var(--aco); letter-spacing:.06em}
.calc svg{width:100%; height:auto; display:block}
@media (max-width:620px){.calc .corpo{grid-template-columns:1fr}}
.nota{font-size:.88rem; color:var(--aco); border-left:2px solid var(--concreto); padding-left:12px}

/* ferramentas */
.ferramenta{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start}
.ferramenta .t{display:grid; gap:16px}
.ferramenta h2{font-size:clamp(2rem,4vw,2.8rem)}
.selo{display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; background:var(--grafite); color:var(--papel); padding:4px 10px; width:fit-content}
.tela{border:1px solid var(--grafite); background:var(--branco); box-shadow:10px 10px 0 var(--concreto)}
.tela .barra{display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid var(--linha); font-family:var(--mono); font-size:.7rem; color:var(--aco); align-items:center}
.tela .barra i{width:8px; height:8px; border-radius:50%; background:var(--concreto)}
@media (max-width:860px){.ferramenta{grid-template-columns:1fr}}

/* notas de revisão */
.notas{display:grid; gap:0; counter-reset:n; max-width:860px}
.notas li{list-style:none; counter-increment:n; display:grid; grid-template-columns:44px 1fr; gap:12px; padding-block:14px; border-top:1px solid var(--linha)}
.notas li::before{content:counter(n,decimal-leading-zero); font-family:var(--mono); color:var(--bronze-esc)}
.notas b{display:block}
.notas span{color:var(--aco); font-size:.95rem}

/* WhatsApp flutuante (páginas públicas) */
.zap-flutuante{position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:8px; background:#1F7A4D; color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; padding:11px 16px 11px 12px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.zap-flutuante svg{width:22px; height:22px}
.zap-flutuante:hover{background:#17613C}
@media (max-width:600px){ .zap-flutuante span{display:none} .zap-flutuante{padding:12px} }
.voltar-topo{bottom:82px !important}

/* ---------- blog dinâmico, artigo e cursos ---------- */
.busca-blog{display:flex; justify-content:space-between; align-items:end; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.busca-blog .campo{min-width:220px}
.busca-blog input{font:inherit; border:1px solid var(--concreto); padding:8px 10px; background:var(--branco); width:100%}
.titulo-lista{font-size:1.35rem}
.temas{margin-top:40px; display:grid; gap:10px}
.temas .artigo-item{opacity:.72}
.temas .meta{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase}
.esquerda a[aria-current="page"]{font-weight:600; color:var(--bronze-esc)}
.capa-artigo{margin:18px 0}
.capa-artigo img{width:100%; height:auto; display:block}
.md{line-height:1.7}
.md h2{font-size:1.5rem; margin:1.6em 0 .5em}
.md h3{font-size:1.2rem; margin:1.4em 0 .4em}
.md h4{font-size:1.05rem; margin:1.2em 0 .4em}
.md p,.md ul,.md ol,.md blockquote,.md pre,.md figure,.md .md-tabela{margin:0 0 1.1em}
.md img{max-width:100%; height:auto}
.md figure{margin-inline:0}
.md figcaption{font-size:.84rem; color:var(--aco); margin-top:6px}
.md blockquote{border-left:3px solid var(--bronze-claro); padding-left:14px; color:var(--aco)}
.md pre{background:var(--grafite); color:var(--papel); padding:14px; overflow-x:auto; font-size:.86rem}
.md code{font-family:var(--mono); font-size:.9em}
.md .md-tabela{overflow-x:auto}
.md table{border-collapse:collapse; font-size:.92rem}
.md th,.md td{border:1px solid var(--linha); padding:7px 11px; text-align:left}
.md th{background:var(--nevoa)}
.curso{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:36px; align-items:start}
@media (max-width:860px){ .curso{grid-template-columns:1fr} }
.curso h2{font-size:clamp(1.6rem,3vw,2.2rem); margin:10px 0 4px}
.curso .t{display:grid; gap:12px}
.sub-curso{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--aco)}
.aviso.ok{color:var(--verde); font-weight:600}
.aviso.erro{color:#A33A2B; font-weight:600}
.cat-movel{display:none}
.busca-blog select{font:inherit; border:1px solid var(--concreto); padding:8px 10px; background:var(--branco); width:100%}
@media (max-width:760px){ .cat-movel{display:grid} .busca-blog .campo{min-width:0; flex:1 1 160px} }

/* gráficos dos artigos (```grafico) */
.md .grafico{border:1px solid var(--linha); background:#fff; padding:12px 12px 8px; margin:0 0 1.2em}
.md .grafico svg{width:100%; height:auto; display:block}
.md .grafico circle,.md .grafico rect{cursor:pointer}
.md .grafico circle:focus,.md .grafico rect:focus{outline:2px solid var(--bronze)}
.md .grafico-titulo{font-weight:600; font-size:.95rem; margin-bottom:6px}
.md .grafico-info{font-family:var(--mono); font-size:.76rem; color:var(--aco); min-height:1.3em; margin-top:4px}
.md .grafico-legenda{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.md .grafico-legenda button{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--linha); background:#fff; padding:3px 8px; font:inherit; font-size:.8rem; cursor:pointer}
.md .grafico-legenda button[aria-pressed="false"]{opacity:.45; text-decoration:line-through}
.md .grafico-legenda i{width:10px; height:10px; display:inline-block}
.zap-flutuante{max-height:48px}
.zap-flutuante svg{max-width:22px; max-height:22px}
.temas .tema{position:relative}
.abrir-rascunho{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze-esc); margin-top:4px; display:inline-block}
.temas .tema:has(.abrir-rascunho){opacity:1}

/* ---------- relatos e novidades ---------- */
.abas-rel{display:flex; border-bottom:1px solid var(--linha); margin-bottom:20px; overflow-x:auto}
.abas-rel button{background:none; border:0; border-bottom:3px solid transparent; padding:10px 16px; font:inherit; font-weight:600; color:var(--aco); cursor:pointer; white-space:nowrap}
.abas-rel button[aria-selected="true"]{color:var(--grafite); border-bottom-color:var(--bronze)}
.lista-nov{display:grid; gap:14px; margin-top:14px}
.versao{border:1px solid var(--linha); background:var(--branco); padding:14px 18px}
.versao.oculta{border-style:dashed; opacity:.8}
.versao h3{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:1.15rem}
.versao h3 small{font-family:var(--mono); font-size:.74rem; color:var(--aco)}
.tag-prev,.tag-nova{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; padding:1px 6px; border:1px solid currentColor}
.tag-prev{color:var(--aco)} .tag-nova{color:var(--bronze-esc)}
.itens-nov{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px}
.itens-nov li{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline}
.itens-nov li small{grid-column:2}
.tn{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border:1px solid currentColor}
.tn-novo{color:var(--verde)} .tn-melhorado{color:var(--azul)} .tn-corrigido{color:var(--bronze-esc)}
.tipo-rel{border:0; padding:0; margin:0; display:flex; gap:18px; flex-wrap:wrap}
.tipo-rel legend{font-weight:600; font-size:.9rem; margin-bottom:6px}
.lista-rel{display:grid; gap:12px; margin-top:14px}
.relato{border:1px solid var(--linha); border-left:3px solid var(--linha-forte); background:var(--branco); padding:12px 16px; display:grid; gap:6px}
.relato.st-analise{border-left-color:var(--azul)} .relato.st-feito{border-left-color:var(--verde)} .relato.st-descartado{border-left-color:var(--aco)}
.relato-topo{display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; font-size:.85rem}
.relato-topo .num{font-family:var(--mono)} .relato-topo .tipo,.relato-topo .sit{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--aco)}
.relato h3{font-size:1.05rem}
.relato .desc{white-space:pre-wrap; font-size:.92rem}
.relato .resposta{background:var(--nevoa); padding:8px 10px; font-size:.92rem}
.responder{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; align-items:end; border-top:1px solid var(--linha); padding-top:10px}
.responder .largo{grid-column:1 / -1}
.responder select,.responder input,.responder textarea,.form select,.form textarea{font:inherit; border:1px solid var(--concreto); padding:7px 9px; background:var(--branco); width:100%}
.btn.peq{padding:6px 12px; font-size:.84rem}
.md .math-bloco{display:block; overflow-x:auto; margin:0 0 1.1em; text-align:center}
.md .math:not(.ok){font-family:var(--mono); font-size:.9em}

/* prévia de artigo não publicado */
.tarja-previa{position:sticky; top:0; z-index:80; background:#A33A2B; color:#fff; text-align:center; font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; padding:9px 12px; font-weight:500}
/* gráficos com parâmetros */
.md .grafico-params{display:grid; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--linha)}
.md .grafico-params label{display:grid; grid-template-columns:minmax(90px,auto) 1fr 64px; gap:10px; align-items:center; font-size:.86rem}
.md .grafico-params input[type=range]{width:100%; accent-color:var(--bronze)}
.md .grafico-params output{font-family:var(--mono); text-align:right}
.md .grafico-invalido{color:#A33A2B; font-weight:600; font-size:.88rem; margin-bottom:6px}
.relato-topo .app{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--bronze-esc)}