:root{--laranja:#FF6A00;--laranja-escuro:#E85D00;--laranja-claro:#FFF3EA;--preto:#101014;
--cinza-texto:#54545F;--cinza-borda:#E6E6EC;--cinza-fundo:#F7F7F9;--branco:#fff;--raio:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--branco);color:var(--preto);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--cinza-borda);background:var(--branco);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.nav img{height:46px;width:auto}
.nav-dir{display:flex;align-items:center;gap:20px;font-size:.93rem;font-weight:700}
.nav-dir a:not(.btn){text-decoration:none;color:var(--cinza-texto)}
.nav-dir a:not(.btn):hover{color:var(--laranja)}
/* O botao precisa ficar de fora das regras acima: ".nav-dir a" tem
   especificidade maior que ".btn" e pintava o texto de cinza, e no hover
   deixava laranja sobre fundo laranja, sumindo. */
.nav-dir .btn,.nav-dir .btn:hover{color:#fff;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--raio);
font-weight:700;font-size:.93rem;text-decoration:none;background:var(--laranja);color:#fff;
box-shadow:0 5px 14px rgba(255,106,0,.26);transition:transform .16s,background .16s}
.btn:hover{background:var(--laranja-escuro);transform:translateY(-2px)}
@media(max-width:640px){.nav-dir a:not(.btn){display:none}.nav{height:68px}.nav img{height:38px}}
.capa{background:linear-gradient(180deg,#fff,var(--cinza-fundo));border-bottom:1px solid var(--cinza-borda);padding:56px 0 48px}
.capa h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.capa p{color:var(--cinza-texto);font-size:1.1rem;margin:0;max-width:56ch}
.busca{margin-top:26px;position:relative;max-width:520px}
.busca input{width:100%;padding:15px 18px 15px 46px;border:2px solid var(--cinza-borda);border-radius:var(--raio);
font-size:1rem;font-family:inherit;background:#fff;outline:none;transition:border-color .2s}
.busca input:focus{border-color:var(--laranja)}
.busca svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--cinza-texto)}
main{padding:52px 0 72px}
.categoria{margin-bottom:44px}
.categoria h2{font-size:1.3rem;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:center;gap:11px}
.categoria h2 em{width:30px;height:30px;border-radius:9px;background:var(--laranja-claro);color:var(--laranja);
font-style:normal;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.categoria .sub{color:var(--cinza-texto);font-size:.95rem;margin:0 0 18px;padding-left:41px}
.artigos{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.artigo{display:block;text-decoration:none;background:#fff;border:1px solid var(--cinza-borda);
border-radius:var(--raio);padding:20px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s}
.artigo:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(16,16,20,.1);border-color:rgba(255,106,0,.45)}
.artigo b{display:block;font-size:1rem;margin-bottom:6px}
.artigo span{display:block;font-size:.9rem;color:var(--cinza-texto);line-height:1.55}
.vazio{display:none;color:var(--cinza-texto);padding:26px;text-align:center;border:1px dashed var(--cinza-borda);border-radius:var(--raio)}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start}
article{min-width:0}   /* sem isso, imagem larga estica a coluna e estoura a pagina */
@media(max-width:900px){.layout{grid-template-columns:1fr;gap:26px}}
.lateral{position:sticky;top:100px;font-size:.92rem}
@media(max-width:900px){.lateral{position:static;border-bottom:1px solid var(--cinza-borda);padding-bottom:20px}}
.lateral h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza-texto);margin:20px 0 8px}
.lateral h3:first-child{margin-top:0}
.lateral a{display:block;text-decoration:none;color:var(--cinza-texto);padding:6px 10px;border-radius:8px;margin-bottom:2px}
.lateral a:hover{background:var(--cinza-fundo);color:var(--preto)}
.lateral a.atual{background:var(--laranja-claro);color:var(--laranja-escuro);font-weight:700}
.migalha{font-size:.88rem;color:var(--cinza-texto);margin-bottom:12px}
.migalha a{color:var(--laranja-escuro);text-decoration:none}
.migalha a:hover{text-decoration:underline}
article h1{font-size:clamp(1.7rem,3.4vw,2.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 10px;text-wrap:balance}
article .resumo{color:var(--cinza-texto);font-size:1.06rem;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--cinza-borda)}
article h2{font-size:1.24rem;font-weight:800;margin:34px 0 12px;letter-spacing:-.01em}
article p{margin:0 0 16px;color:var(--cinza-texto)}
article ul,article ol{margin:0 0 18px;padding-left:22px;color:var(--cinza-texto)}
article li{margin-bottom:8px}
article strong{color:var(--preto)}
article code{background:var(--cinza-fundo);border:1px solid var(--cinza-borda);border-radius:6px;
padding:1px 6px;font-size:.9em;font-family:ui-monospace,Menlo,Consolas,monospace}
.dica{background:var(--laranja-claro);border-left:3px solid var(--laranja);border-radius:0 var(--raio) var(--raio) 0;
padding:14px 18px;margin:0 0 18px;font-size:.96rem;color:var(--cinza-texto)}
.figura{margin:0 0 24px}
/* max-width em vez de width: imagem pequena (um cartao de login, por
   exemplo) fica no tamanho natural em vez de esticar e borrar. */
.figura img{max-width:100%;height:auto;border:1px solid var(--cinza-borda);
border-radius:var(--raio);display:block;margin-inline:auto;background:var(--branco)}
/* Print de tela cheia nao cabe legivel na coluna: em vez de estourar o
   layout (item de grid cresce e arrebenta a pagina), ele cabe normalmente e
   abre em tamanho real ao clicar. */
.figura.larga a{display:block;position:relative;cursor:zoom-in}
.figura.larga a::after{content:"Clique para ampliar";position:absolute;right:10px;bottom:10px;
background:rgba(16,16,20,.82);color:#fff;font-size:.72rem;font-weight:700;
padding:5px 11px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}
.figura.larga a:hover::after{opacity:1}
@media(hover:none){.figura.larga a::after{opacity:1}}

/* Visualizador: fundo escuro, imagem no tamanho real, X para fechar. */
#lupa{position:fixed;inset:0;z-index:100;background:rgba(10,10,12,.92);
display:none;align-items:center;justify-content:center;padding:32px;
opacity:0;transition:opacity .2s ease}
#lupa.aberta{display:flex}
#lupa.mostrando{opacity:1}
#lupa img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;
box-shadow:0 24px 70px rgba(0,0,0,.6);background:#fff}
#lupa .fechar{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;
border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
#lupa .fechar:hover{background:rgba(255,255,255,.24)}
#lupa .fechar:focus-visible{outline:3px solid var(--laranja);outline-offset:2px}
#lupa .legenda{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#C9C9D2;
font-size:.88rem;padding:0 32px}
body.travado{overflow:hidden}
@media(prefers-reduced-motion:reduce){#lupa{transition:none}}
.figura figcaption{margin-top:9px;font-size:.86rem;color:var(--cinza-texto);text-align:center;font-style:italic}
.figura.video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--raio)}
.figura.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--raio)}
.marcador{margin:0 0 20px;padding:26px 20px;border:2px dashed var(--cinza-borda);border-radius:var(--raio);
background:var(--cinza-fundo);display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.marcador .rotulo{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--laranja);background:var(--laranja-claro);padding:4px 12px;border-radius:999px}
.marcador .desc{font-size:.9rem;color:var(--cinza-texto)}
.marcador-video{background:#101014;border-color:#2C2C36}
.marcador-video .desc{color:#9A9AA8}
.navega{display:flex;justify-content:space-between;gap:14px;margin-top:44px;padding-top:26px;border-top:1px solid var(--cinza-borda)}
.navega a{text-decoration:none;font-weight:700;font-size:.93rem;color:var(--laranja-escuro);max-width:46%}
.navega a:hover{text-decoration:underline}
.navega span{display:block;font-size:.75rem;color:var(--cinza-texto);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.ajuda-fim{margin-top:40px;background:var(--cinza-fundo);border-radius:var(--raio);padding:26px;text-align:center}
.ajuda-fim b{display:block;margin-bottom:6px}
.ajuda-fim p{margin:0 0 16px;font-size:.95rem}
footer{background:var(--preto);color:#9A9AA8;padding:60px 0 34px;font-size:.93rem;margin-top:20px}
footer img{height:56px;margin-bottom:20px;filter:brightness(0) invert(1)}
footer h4{color:#fff;font-size:.95rem;margin:0 0 14px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer a{color:#9A9AA8;text-decoration:none;transition:color .25s}
footer a:hover{color:var(--laranja)}
footer p{color:#9A9AA8;max-width:38ch;margin:0}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
@media(max-width:760px){.rodape-grade{grid-template-columns:1fr;gap:30px}}
.rodape-fim{margin-top:44px;padding-top:24px;border-top:1px solid #26262F;
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}