/* modelos */
:root{
  --ground:#FAF8FB; --surface:#FFFFFF; --surface-2:#F4F0F7; --surface-3:#EDE7F2;
  --ink:#1B1420; --ink-2:#3D3247; --muted:#6E6478; --line:#E4DCEA; --line-2:#D3C7DC;
  --roxo:#5B1180; --roxo-ink:#5B1180; --roxo-soft:#F1E6F7; --on-roxo:#FFFFFF;
  --laranja:#D9550A; --laranja-soft:#FBEBDD;
  --verde:#1C6B51; --verde-soft:#E2F1EA;
  --shadow:0 1px 2px rgba(27,20,32,.05), 0 8px 24px -16px rgba(27,20,32,.22);
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#141019; --surface:#1C1724; --surface-2:#241D2E; --surface-3:#2C2438;
    --ink:#EFE9F4; --ink-2:#D2C8DC; --muted:#A296AE; --line:#322940; --line-2:#453A56;
    --roxo:#C793E6; --roxo-ink:#C793E6; --roxo-soft:#2B1D38; --on-roxo:#191220;
    --laranja:#FF9552; --laranja-soft:#372313;
    --verde:#63C7A2; --verde-soft:#122E26;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#141019; --surface:#1C1724; --surface-2:#241D2E; --surface-3:#2C2438;
  --ink:#EFE9F4; --ink-2:#D2C8DC; --muted:#A296AE; --line:#322940; --line-2:#453A56;
  --roxo:#C793E6; --roxo-ink:#C793E6; --roxo-soft:#2B1D38; --on-roxo:#191220;
  --laranja:#FF9552; --laranja-soft:#372313;
  --verde:#63C7A2; --verde-soft:#122E26;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Archivo","Helvetica Neue",Arial,sans-serif; margin:0;
  line-height:1.15; text-wrap:balance; letter-spacing:-.015em}
p{margin:0}
a{color:var(--roxo-ink)}
:focus-visible{outline:2px solid var(--laranja); outline-offset:3px; border-radius:3px}
.mono{font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace}

/* topo */
.topo{border-bottom:1px solid var(--line); background:var(--surface)}
.topo-in{max-width:var(--maxw); margin:0 auto; padding:38px 28px 30px}
.marca{display:flex; align-items:center; gap:14px; margin-bottom:20px}
.marca img{height:40px; width:auto; display:block}
.marca .divisor{width:1px; height:26px; background:var(--line-2)}
.marca .selo{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--laranja); font-weight:500}
h1{font-size:clamp(28px,4.3vw,42px); font-weight:700; margin:13px 0 0; max-width:22ch}
.sub{max-width:64ch; margin:15px 0 0; color:var(--ink-2); font-size:17px}
.meta{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:20px}
.pill{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:5px 10px;
  border:1px solid var(--line-2); border-radius:999px; color:var(--muted); background:var(--surface-2)}

/* navegação entre materiais */
.troca{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:8px;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.troca a{text-decoration:none; border:1px solid var(--line-2); border-radius:10px;
  padding:10px 13px; background:var(--surface-2); color:var(--ink); display:block}
.troca a.atual{background:var(--roxo-soft); border-color:var(--roxo); cursor:default}
.troca a:not(.atual):hover{background:var(--surface-3)}
.troca .gr{display:block; font-family:"IBM Plex Mono",monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.troca a.atual .gr{color:var(--roxo-ink)}
.troca .tt{display:block; font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; line-height:1.2}

/* busca */
.buscabar{position:sticky; top:0; z-index:20; background:var(--ground); border-bottom:1px solid var(--line)}
.buscabar-in{max-width:var(--maxw); margin:0 auto; padding:12px 28px; display:flex; gap:14px;
  align-items:center; flex-wrap:wrap}
.buscabar input{flex:1 1 260px; min-width:0; font-family:"IBM Plex Mono",monospace; font-size:13.5px;
  padding:9px 13px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink)}
.buscabar input::placeholder{color:var(--muted)}
.contador{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}

/* layout */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px 90px; display:grid;
  grid-template-columns:212px minmax(0,1fr); gap:52px; align-items:start}
nav.rail{position:sticky; top:70px; padding:34px 0 0}
nav.rail ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
nav.rail a{display:block; padding:7px 10px; border-radius:7px; text-decoration:none; color:var(--ink-2);
  font-family:"Archivo",sans-serif; font-size:13.5px; line-height:1.3; border-left:2px solid transparent}
nav.rail a:hover{background:var(--surface-2); color:var(--ink)}
nav.rail a.on{background:var(--roxo-soft); color:var(--roxo-ink); border-left-color:var(--roxo); font-weight:600}
nav.rail .sep{margin:14px 0 6px 10px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
main{padding-top:34px; min-width:0}

/* seções */
section.sec{scroll-margin-top:78px; margin-bottom:58px}
.sec-cab{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding-bottom:15px; border-bottom:2px solid var(--roxo)}
.sec-num{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:12.5px;
  background:var(--roxo); color:var(--on-roxo); border-radius:7px; padding:6px 10px; white-space:nowrap}
.sec-cab h2{font-size:25px; font-weight:700}
.sec-cab .obj{margin:7px 0 0; color:var(--ink-2); font-size:16.5px; max-width:64ch}
h3.sub3{font-family:"Archivo",sans-serif; font-size:17.5px; font-weight:600; margin:28px 0 10px}
.txt{margin-top:14px; color:var(--ink-2); font-size:16px; max-width:68ch}
.txt + .txt{margin-top:11px}

/* listas */
ul.lista{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
ul.lista li{font-size:15.5px; line-height:1.5; color:var(--ink-2); padding-left:21px; position:relative; max-width:70ch}
ul.lista li::before{content:""; position:absolute; left:4px; top:.62em; width:6px; height:6px;
  border-radius:2px; background:var(--roxo)}
ul.lista li b{color:var(--ink); font-weight:600}
ol.num{margin:14px 0 0; padding-left:0; list-style:none; counter-reset:n; display:flex; flex-direction:column; gap:10px}
ol.num li{counter-increment:n; position:relative; padding-left:38px;
  font-size:15.5px; line-height:1.5; color:var(--ink-2); max-width:calc(72ch + 38px)}
ol.num li::before{content:counter(n,decimal-leading-zero); position:absolute; left:0; top:3px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted)}
ol.num li b{color:var(--ink); font-weight:600}

/* caixas */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; margin-top:20px}
.box{border:1px solid var(--line); border-radius:11px; background:var(--surface-2); padding:17px 19px 18px}
.box h4{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:11px}
.box.alt{background:var(--surface); border-color:var(--line-2)}
.alerta{margin-top:20px; border-left:3px solid var(--laranja); background:var(--laranja-soft);
  border-radius:0 10px 10px 0; padding:15px 19px}
.alerta h4{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--laranja); margin-bottom:7px}
.alerta p{font-size:15px; line-height:1.5; color:var(--ink-2); max-width:70ch}
.alerta p + p{margin-top:8px}

/* tabela */
.tab-wrap{overflow-x:auto; margin-top:20px; border:1px solid var(--line); border-radius:11px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:15px}
th,td{text-align:left; padding:12px 17px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:600}
tr:last-child td{border-bottom:0}
td.k{font-family:"Archivo",sans-serif; font-weight:600; color:var(--ink)}
td.v{font-family:"IBM Plex Mono",monospace; white-space:nowrap; font-size:13px; color:var(--ink)}
/* ---------- realce da busca ---------- */
mark[data-realce]{background:var(--laranja-soft); color:var(--ink); padding:0 2px; border-radius:3px;
  box-shadow:inset 0 -1px 0 var(--laranja); font-weight:inherit}
.oculto{display:none !important}
footer{border-top:1px solid var(--line); margin-top:20px; padding-top:22px; color:var(--muted);
  font-size:14px; max-width:74ch}
@media (max-width:900px){
  .wrap{grid-template-columns:1fr; gap:0}
  nav.rail{position:static; padding:26px 0 0}
  nav.rail ol{flex-direction:row; flex-wrap:wrap; gap:6px}
  nav.rail a{border-left:0; border:1px solid var(--line); padding:6px 10px}
  nav.rail .sep{display:none}
  main{padding-top:26px}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

.climas{display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:14px; margin-top:20px}
.clima{border:1px solid var(--line); border-radius:11px; background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column}
.clima figure{margin:0; position:relative; border-bottom:3px solid var(--line-2)}
.clima img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.clima .corpo{padding:15px 17px 17px}
.clima h4{font-family:"Archivo",sans-serif; font-size:16px; font-weight:700; margin-bottom:7px}
.clima p{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.clima.c1 figure{border-bottom-color:#8C2F1B} .clima.c2 figure{border-bottom-color:#B5641C}
.clima.c3 figure{border-bottom-color:#8B8194} .clima.c4 figure{border-bottom-color:#5B1180}
.clima.c5 figure{border-bottom-color:#1C6B51}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .clima img{filter:brightness(.92)}}
:root[data-theme="dark"] .clima img{filter:brightness(.92)}

.filtros{display:flex; flex-wrap:wrap; gap:7px; margin-top:22px}
.fbt{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer}
.fbt:hover{background:var(--surface-2)}
.fbt.on{background:var(--roxo); color:var(--on-roxo); border-color:var(--roxo)}

.mods{display:flex; flex-direction:column; gap:14px; margin-top:20px}
.mod{border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden}
.mod-cab{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:14px 17px; cursor:pointer; background:none; border:0; width:100%; text-align:left; font:inherit; color:inherit}
.mod-cab:hover{background:var(--surface-2)}
.mod-cab h3{font-family:"Archivo",sans-serif; font-size:16px; font-weight:600; line-height:1.25}
.canal{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-3); border-radius:5px; padding:3px 8px; white-space:nowrap}
.seta{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.mod[open] .seta{transform:rotate(90deg); display:inline-block}
.mod-corpo{padding:0 17px 17px; border-top:1px solid var(--line)}
.mod-corpo pre{font-family:"Source Serif 4",Georgia,serif; font-size:15px; line-height:1.55;
  white-space:pre-wrap; word-wrap:break-word; margin:15px 0 0; color:var(--ink-2); max-width:74ch}
.copiar{margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:6px 13px;
  border-radius:7px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); cursor:pointer}
.copiar:hover{background:var(--surface-3)}
.copiar.ok{background:var(--verde-soft); border-color:var(--verde); color:var(--verde)}
.vazio{display:none; padding:24px 0; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:13px}
