/* cuvili.com — atlas didático de rios. Fontes hospedadas no próprio site (licença OFL). */
@font-face{font-family:Lexend;src:url(/assets/fonts/lexend-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(/assets/fonts/newsreader-latin-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

:root{
  --noite:#0E3347; --azul-prof:#0F4A66; --azul:#1B7FA8; --azul-claro:#8CC6DE; --azul-link:#0E6489;
  --verde:#4F7A4A; --verde-esc:#3B5F37; --areia:#E6D8B8; --areia-clara:#F1E9D3; --areia-esc:#8A7646;
  --fundo:#F3F5F0; --papel:#fff; --tinta:#13303C; --tinta2:#3F5A66; --linha:#D3DCD8;
  --ok:#2A6B2E; --erro:#A3271F; --foco:#B45309; --foco-claro:#FFD27A;
  --lat:17rem; --raio:6px;
  --titulo:Lexend,"Segoe UI",system-ui,-apple-system,sans-serif;
  --texto:Newsreader,Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--fundo);color:var(--tinta);font:400 1.125rem/1.65 var(--texto);font-optical-sizing:auto;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--azul-link);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--noite)}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:2px}
.lateral :focus-visible,.rodape :focus-visible,.heroi :focus-visible{outline-color:var(--foco-claro)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pular{position:absolute;left:.5rem;top:-4rem;z-index:100;background:var(--areia);color:var(--tinta);padding:.6rem 1rem;font:500 .95rem var(--titulo);border-radius:var(--raio)}
.pular:focus{top:.5rem}
h1,h2,h3,h4{font-family:var(--titulo);color:var(--tinta);font-weight:500;line-height:1.18;letter-spacing:-.012em;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem);font-weight:500;letter-spacing:-.022em}
h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
table{border-collapse:collapse;width:100%}

/* ---------- estrutura ---------- */
.casca{min-height:100vh;display:flex;flex-direction:column;margin-left:var(--lat)}
.conteudo{flex:1;padding:clamp(1.25rem,.5rem + 3vw,3.5rem) clamp(1.25rem,.5rem + 4vw,4rem) 4rem}
.pagina{max-width:68rem;margin:0 auto}
.topo-mobile{display:none}

/* ---------- barra lateral: o rio e as estações ---------- */
.lateral{position:fixed;inset:0 auto 0 0;width:var(--lat);background:var(--noite);color:var(--areia);padding:1.4rem 1rem 1.2rem 1.1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.4rem;z-index:20;isolation:isolate}
.lateral::before{content:"";position:absolute;inset:0;background:url(/assets/img/topo-escura.svg) center/cover;opacity:.17;z-index:-1;pointer-events:none}
.marca{display:flex;align-items:center;gap:.65rem;color:#fff;text-decoration:none;font:600 1.3rem/1 var(--titulo);letter-spacing:-.02em}
.marca svg{width:2.1rem;height:2.1rem;flex:none}
.marca:hover{color:var(--areia)}
.rio-nav{position:relative;margin:0;padding:0;list-style:none;font:400 .98rem/1.3 var(--titulo)}
.rio-nav::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:40px;background:url(/assets/img/rio-lateral.svg) repeat-y}
.rio-nav li{margin:0}
.rio-nav a{position:relative;display:block;padding:.55rem .5rem .55rem 3rem;color:var(--areia);text-decoration:none}
.rio-nav a::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--noite);border:2px solid var(--areia)}
.rio-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.rio-nav a[aria-current="page"]{color:#fff;font-weight:600}
.rio-nav a[aria-current="page"]::before{background:var(--areia)}
.rio-nav .afl a{padding-left:4.1rem;font-size:.9rem;padding-top:.42rem;padding-bottom:.42rem}
.rio-nav .afl a::before{left:40px;width:10px;height:10px;margin-top:-5px;border-width:2px;border-color:var(--azul-claro);background:var(--noite)}
.rio-nav .afl a::after{content:"";position:absolute;left:20px;top:50%;width:20px;height:2px;margin-top:-1px;background:#3E9CC4}
.rio-nav .afl a[aria-current="page"]::before{background:var(--azul-claro)}
.rio-nav .grupo{display:block;padding:.9rem .5rem .1rem 3rem;font:400 .8rem var(--titulo);color:var(--azul-claro);letter-spacing:.01em}
.rio-nav .afl{list-style:none;margin:0;padding:0}
html:not(.js) .js-jogar{display:none}
.lista-artigos li,.carimbos li,.atlas-mapas li{margin:0}
.lat-carimbos{margin-top:auto;border-top:1px solid #2C566C;padding-top:1rem;font:400 .9rem/1.4 var(--titulo)}
.lat-carimbos a{color:var(--areia)}
.lat-carimbos strong{color:#fff;font-weight:600}

/* ---------- botões ---------- */
.btn{display:inline-block;font:500 1rem/1.2 var(--titulo);padding:.8rem 1.25rem;border-radius:var(--raio);border:2px solid var(--azul-prof);background:var(--azul-prof);color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--noite);border-color:var(--noite);color:#fff}
.btn-sec{background:transparent;color:var(--azul-prof)}
.btn-sec:hover{background:var(--azul-prof);color:#fff}
.btn-areia{background:var(--areia);border-color:var(--areia);color:var(--tinta)}
.btn-areia:hover{background:#fff;border-color:#fff;color:var(--tinta)}
.btn-claro{background:transparent;border-color:var(--azul-claro);color:#fff}
.btn-claro:hover{background:#fff;border-color:#fff;color:var(--noite)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-peq{padding:.5rem .85rem;font-size:.9rem}
.btn-perigo{border-color:var(--erro);color:var(--erro);background:transparent}
.btn-perigo:hover{background:var(--erro);border-color:var(--erro);color:#fff}

/* ---------- home ---------- */
.heroi{position:relative;isolation:isolate;overflow:hidden;background:var(--azul-prof);color:#fff;border-radius:10px;padding:clamp(2rem,1rem + 5vw,5rem) clamp(1.5rem,1rem + 4vw,4.5rem);min-height:26rem;display:flex;align-items:flex-end}
.heroi::before{content:"";position:absolute;inset:0;background:url(/assets/img/topo-escura.svg) center/cover;opacity:.3;z-index:-2}
.heroi-rio{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.heroi-rio path{fill:none;stroke:var(--areia);stroke-linecap:round;stroke-linejoin:round}
.heroi-rio .r1{stroke-width:7;stroke-dasharray:1;stroke-dashoffset:1;animation:desenhar 3.4s cubic-bezier(.45,.05,.3,1) .2s forwards}
.heroi-rio .r2{stroke-width:3.5;stroke:var(--azul-claro);stroke-dasharray:1;stroke-dashoffset:1;animation:desenhar 2.2s ease-out 1.4s forwards}
.heroi-rio .r3{stroke-width:3;stroke:var(--azul-claro);stroke-dasharray:1;stroke-dashoffset:1;animation:desenhar 2s ease-out 1.9s forwards}
.heroi-rio circle{fill:var(--areia)}
@keyframes desenhar{to{stroke-dashoffset:0}}
.heroi-corpo{max-width:36rem}
.heroi h1{color:#fff;font-weight:300;font-size:clamp(2.2rem,1.2rem + 3.8vw,4rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:.5em}
.heroi p{font-size:1.2rem;color:#E4EEF2;max-width:30rem}
.heroi .acoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.secao{margin-top:clamp(2.5rem,2rem + 3vw,4.5rem)}
.secao>h2{margin-bottom:.3em}
.secao-intro{color:var(--tinta2);max-width:38rem}
.bacias{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--linha)}
.bacias li{margin:0;border-bottom:1px solid var(--linha)}
.bacias a{display:grid;grid-template-columns:3.2rem 1fr auto;gap:0 1.2rem;align-items:center;padding:1.15rem .25rem;text-decoration:none;color:var(--tinta)}
.bacias a:hover{background:var(--areia-clara)}
.bacias .selo{grid-row:span 2;width:3.2rem;height:3.2rem}
.bacias .nome{font:500 1.25rem/1.2 var(--titulo);letter-spacing:-.01em}
.bacias .desc{color:var(--tinta2);font-size:1.02rem;line-height:1.4}
.bacias .qtd{font:400 .9rem var(--titulo);color:var(--tinta2);grid-row:span 2;white-space:nowrap}
.lista-artigos{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,27rem),1fr));gap:1.6rem 2.2rem}
.linha-artigo{margin:0;display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:start}
.linha-artigo .miniatura{width:7.5rem;aspect-ratio:4/3;border-radius:var(--raio);overflow:hidden;background:var(--areia);display:block}
.linha-artigo .miniatura img{display:block;width:100%;height:100%;object-fit:cover}
.linha-artigo h3{font-size:1.1rem;margin:0 0 .25em;line-height:1.25}
.linha-artigo h3 a{color:var(--tinta);text-decoration:none}
.linha-artigo h3 a:hover{text-decoration:underline}
.linha-artigo p{margin:0;font-size:1rem;line-height:1.5;color:var(--tinta2)}
.etiqueta{display:inline-block;font:500 .8rem/1.2 var(--titulo);color:var(--tinta2);margin-bottom:.35rem}
.etiqueta b{font-weight:500;color:var(--cat,var(--azul-link))}
.previa{margin-top:1.4rem;background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:clamp(1rem,.5rem + 2vw,2rem)}
.como{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem 4rem;align-items:start}
.como ul{list-style:none;padding:0;margin:0}
.como li{padding:.7rem 0;border-bottom:1px solid var(--linha);font-size:1.05rem;line-height:1.5}
.como li:first-child{border-top:1px solid var(--linha)}
.como li strong{font:500 1rem var(--titulo);display:block}

/* ---------- artigo ---------- */
.migalhas{font:400 .85rem/1.4 var(--titulo);color:var(--tinta2);margin-bottom:1.4rem}
.migalhas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.migalhas li+li::before{content:"/";margin-right:.5rem;color:#8AA0A8}
.migalhas a{color:var(--tinta2)}
.art-cab{max-width:46rem}
.art-cab h1{margin-bottom:.45em}
.art-cab .lead{font-size:1.28rem;line-height:1.5;color:var(--tinta2);font-style:italic}
.meta{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin:1.2rem 0 0;font:400 .88rem/1.4 var(--titulo)}
.meta div{display:flex;gap:.4rem}
.meta dt{color:var(--tinta2)}
.meta dd{margin:0;font-weight:500}
.artigo-pagina{max-width:56rem;margin:0 auto}
.capa{margin:1.6rem 0 0}
.capa img{display:block;width:100%;aspect-ratio:16/6;object-fit:cover;border-radius:10px;background:var(--areia)}
.capa figcaption{font:400 .82rem var(--titulo);color:var(--tinta2);margin-top:.5rem}
.art-grade{display:grid;grid-template-columns:minmax(0,1fr);margin-top:2rem;align-items:start}
.art-corpo{font-size:1.14rem;line-height:1.7;max-width:35rem}
@media (min-width:1181px){
  .art-grade{grid-template-columns:minmax(0,35rem) 16rem;column-gap:4.5rem;row-gap:0}
  .art-intro{grid-column:1;grid-row:1}
  .gate,.ganhou{grid-column:1/-1;grid-row:2}
  .art-resto{grid-column:1;grid-row:3}
  .fontes{grid-column:1;grid-row:4}
  .art-grade>.art-lateral{grid-column:2;grid-row:3/5;align-self:start;position:sticky;top:1.5rem;margin-top:2.4rem;display:block}
}
.art-corpo h2{margin-top:2.2em;scroll-margin-top:5rem}
.art-corpo h3{margin-top:1.6em;font-size:1.12rem}
.art-corpo a{font-weight:500}
.art-corpo table{font:400 .95rem/1.4 var(--titulo);margin:1.4em 0;display:block;overflow-x:auto;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio)}
.art-corpo th,.art-corpo td{padding:.6rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linha)}
.art-corpo th{background:var(--areia-clara);font-weight:500}
.art-corpo tr:last-child td{border-bottom:0}
.art-corpo sup a{text-decoration:none;font:500 .75rem var(--titulo);padding:0 .1em}
.art-corpo blockquote{margin:1.4em 0;padding:.2em 1.2em;border-left:4px solid var(--azul);color:var(--tinta2)}
.art-corpo li{margin-bottom:.35em}
.art-lateral{font:400 .9rem/1.45 var(--titulo);display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem;margin:2rem 0 0}
.art-lateral nav ol{margin-bottom:0}
.art-lateral h2{font:500 .9rem var(--titulo);margin:0 0 .6rem;letter-spacing:0}
.art-lateral nav ol{list-style:none;padding:0;margin:0 0 1.8rem;border-left:2px solid var(--azul-claro)}
.art-lateral nav li{margin:0}
.art-lateral nav a{display:block;padding:.3rem 0 .3rem .9rem;color:var(--tinta2);text-decoration:none}
.art-lateral nav a:hover{color:var(--noite);text-decoration:underline}
.cx-carimbo{border:1px solid var(--linha);background:var(--papel);border-radius:var(--raio);padding:1rem}
.cx-carimbo .carimbo-svg{width:6.5rem;display:block;margin:0 0 .6rem}
.cx-carimbo p{margin:0 0 .7rem}
.fontes{margin-top:3rem;padding-top:1.4rem;border-top:2px solid var(--tinta);max-width:35rem}
.fontes h2{font-size:1.25rem;margin-top:0}
.fontes ol{padding-left:1.6em;font:400 .92rem/1.5 var(--titulo)}
.fontes li{margin-bottom:.9rem;padding-left:.2em;scroll-margin-top:5rem}
.fontes li:target{background:var(--areia-clara)}
.fontes .data,.fontes .uso{display:block;color:var(--tinta2)}
.relacionados{margin-top:3rem}
.relacionados h2{font-size:1.25rem}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;font:400 .95rem var(--titulo)}
.pager a{max-width:48%}
.pager .prox{text-align:right;margin-left:auto}

/* tela de escolha (porta do artigo) e artigo fechado */
.js:not(.art-aberto) .art-resto,.js:not(.art-aberto) .fontes,.js:not(.art-aberto) .art-lateral,.js:not(.art-aberto) .relacionados,.js:not(.art-aberto) .pager{display:none}
.cx-carimbo:not(.ganho) svg{opacity:.55;filter:grayscale(1)}
.gate{margin:1.8rem 0;background:var(--papel);border:1px solid var(--linha);border-left:6px solid var(--azul);border-radius:var(--raio);padding:clamp(1rem,.5rem + 2vw,1.8rem)}
.gate h2{font-size:1.3rem;margin-top:0}
.gate .opcoes{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.1rem 0 .4rem}
.gate .nota{font:400 .88rem/1.5 var(--titulo);color:var(--tinta2);margin:.8rem 0 0}
.gate-jogo .jogo-topo{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.gate-jogo h2{margin:0}
.ganhou{display:flex;gap:1rem;align-items:center;background:var(--areia-clara);border-radius:var(--raio);padding:.8rem 1rem;margin:0 0 1.8rem;font:400 .95rem/1.4 var(--titulo)}
.ganhou svg{width:4.2rem;flex:none}

/* ---------- categoria e explorador ---------- */
.cat-cab{max-width:46rem}
.cat-cab .lead{font-size:1.25rem;line-height:1.5;color:var(--tinta2)}
.cat-texto{max-width:36rem;margin-top:2rem}
.explorador{position:sticky;top:0;z-index:5;background:var(--fundo);padding:.8rem 0 1rem;border-bottom:1px solid var(--linha);margin:1.5rem 0 0}
.explorador .campo{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:end}
.explorador label{font:500 .85rem var(--titulo);display:block;margin-bottom:.25rem}
.explorador .campo>div{flex:1 1 15rem;min-width:0;max-width:24rem}
.explorador input[type=search],.explorador select{font:400 1rem var(--titulo);padding:.65rem .8rem;border:1.5px solid #8AA0A8;border-radius:var(--raio);background:#fff;color:var(--tinta);width:100%;min-width:0}
.explorador .contagem{font:400 .9rem var(--titulo);color:var(--tinta2);margin:.7rem 0 0}
.vazio{padding:2rem;border:2px dashed #9DB1B8;border-radius:var(--raio);color:var(--tinta2);font-family:var(--titulo);font-size:1rem;margin-top:1.5rem}
[hidden]{display:none!important}

/* ---------- atlas e jogo ---------- */
.aviso{background:var(--areia-clara);border-left:5px solid var(--areia-esc);padding:.9rem 1.1rem;border-radius:0 var(--raio) var(--raio) 0;font:400 .95rem/1.5 var(--titulo);max-width:46rem}
.aviso p{margin:0 0 .5rem}
.aviso p:last-child{margin:0}
.atlas-mapas{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:1.2rem}
.mapa-card{margin:0;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column}
.mapa-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--areia)}
.mapa-card .info{padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.mapa-card h3{font-size:1rem;margin:0;line-height:1.25}
.mapa-card .melhor{font:400 .82rem var(--titulo);color:var(--tinta2);margin:0}
.mapa-card .btn{margin-top:auto;align-self:flex-start}
.atlas-sub{font:500 .95rem var(--titulo);margin:2rem 0 0;color:var(--tinta2)}
#jogo{scroll-margin-top:1rem;margin-top:2.5rem;background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:clamp(1rem,.5rem + 2vw,1.8rem)}
.jogo h2,.jogo h3{margin-top:0}
.jogo-instr{font:400 .95rem/1.5 var(--titulo);color:var(--tinta2);max-width:44rem}
.jogo-barra{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0}
.jogo-barra .grupo-modo{display:inline-flex;border:1.5px solid var(--azul-prof);border-radius:var(--raio);overflow:hidden}
.jogo-barra .grupo-modo button{font:500 .9rem var(--titulo);padding:.5rem .9rem;border:0;background:#fff;color:var(--azul-prof);cursor:pointer}
.jogo-barra .grupo-modo button[aria-pressed=true]{background:var(--azul-prof);color:#fff}
.jogo-corpo{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:1.2rem;align-items:start}
.dica-mapa{display:none;font:400 .85rem/1.4 var(--titulo);color:var(--tinta2);margin:0 0 .5rem}
.jogo-corpo>*,.jogo-corpo>div>*{min-width:0;max-width:100%}
.jogo-mapa{margin:0;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:#fff;line-height:0}
.jogo-mapa svg{display:block;width:100%;height:auto;touch-action:manipulation}
.jogo-banco{display:flex;flex-direction:column;gap:.5rem}
.jogo-banco h3{font:500 .9rem var(--titulo);margin:0 0 .2rem}
.jogo-banco ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.chip{font:500 .92rem/1.2 var(--titulo);padding:.6rem .8rem;border-radius:999px;border:2px solid var(--tinta);background:#fff;color:var(--tinta);cursor:grab;text-align:left;touch-action:none;user-select:none;width:100%}
.chip:hover{background:var(--areia-clara)}
.chip[aria-pressed=true]{background:var(--azul-prof);border-color:var(--azul-prof);color:#fff}
.chip.fantasma{position:fixed;z-index:200;pointer-events:none;width:auto;box-shadow:0 6px 18px rgba(0,0,0,.25);background:var(--azul-prof);color:#fff;border-color:var(--azul-prof)}
.vazio-banco{font:400 .88rem/1.4 var(--titulo);color:var(--tinta2);padding:.4rem 0}
.marcador{cursor:pointer;outline:none}
.marcador .anel{fill:#fff;stroke:var(--tinta);stroke-width:2.4}
.marcador .num{font:700 13px Lexend,sans-serif;fill:var(--tinta);text-anchor:middle;pointer-events:none}
.marcador:hover .anel{fill:var(--areia-clara)}
.marcador:focus-visible .anel{stroke:var(--foco);stroke-width:4.5}
.marcador.alvo .anel{stroke:var(--azul);stroke-width:3.5}
.marcador .pill{fill:var(--azul-prof);stroke:#fff;stroke-width:2}
.marcador .pill-t{font:500 12.5px Lexend,sans-serif;fill:#fff;pointer-events:none}
.marcador.certo .anel{fill:#E4F2E4;stroke:var(--ok);stroke-width:3.2}
.marcador.errado .anel{fill:#FBE7E5;stroke:var(--erro);stroke-width:3.2}
.marcador.certo .pill{fill:var(--ok)}
.marcador.errado .pill{fill:var(--erro)}
.gabarito .pill{fill:#fff;stroke:var(--ok);stroke-width:2;stroke-dasharray:5 3}
.gabarito .pill-t{fill:var(--ok);font:600 12.5px Lexend,sans-serif}
.jogo-lista{margin-top:1rem}
.jogo-lista ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.7rem 1.4rem}
.jogo-lista li{display:flex;flex-direction:column;gap:.25rem;font:400 .92rem var(--titulo)}
.jogo-lista label{font-weight:500}
.jogo-lista select{font:400 .95rem var(--titulo);padding:.55rem .6rem;border:1.5px solid #8AA0A8;border-radius:var(--raio);background:#fff;color:var(--tinta)}
.jogo-acoes{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.jogo-status{font:400 .92rem var(--titulo);color:var(--tinta2);margin:.8rem 0 0}
.jogo-resultado{margin-top:1.4rem;outline:none}
.jogo-resultado h3{font-size:1.25rem;margin-bottom:.4em}
.jogo-resultado ul{list-style:none;padding:0;margin:1rem 0}
.jogo-resultado li{border-left:5px solid var(--erro);background:#FDF3F2;padding:.7rem 1rem;margin-bottom:.8rem;border-radius:0 var(--raio) var(--raio) 0;font:400 .95rem/1.5 var(--titulo)}
.jogo-resultado li.ok{border-color:var(--ok);background:#F1F8F1}
.jogo-resultado li strong{font-weight:600}
.jogo-resultado .fonte{display:block;font-size:.85rem;color:var(--tinta2);margin-top:.25rem}
.jogo-resultado details{font:400 .92rem var(--titulo);margin-top:.8rem}
.jogo-resultado summary{cursor:pointer;font-weight:500}
.retomar{background:var(--areia-clara);border-radius:var(--raio);padding:.8rem 1rem;margin:0 0 1rem;font:400 .95rem/1.5 var(--titulo)}
.retomar .acoes{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.carimbos{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:1.2rem 1rem;list-style:none;padding:0;margin:1.2rem 0 0}
.carimbo{margin:0;text-align:center;font:400 .85rem/1.35 var(--titulo)}
.carimbo svg{width:6.4rem;display:block;margin:0 auto .4rem}
.carimbo a{color:var(--tinta);text-decoration:none;font-weight:500}
.carimbo a:hover{text-decoration:underline}
.carimbo .tres{display:none;color:var(--tinta2);margin:.3rem 0 0}
.carimbo .data-c{display:none;color:var(--tinta2)}
.carimbo.ganho .tres,.carimbo.ganho .data-c{display:block}
.carimbo:not(.ganho) svg{opacity:.55;filter:grayscale(1)}
.carimbo:not(.ganho) a{color:var(--tinta2);font-weight:400}
.dados-acoes{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.contagem-c{font:500 1rem var(--titulo)}

/* ---------- páginas de texto e formulário ---------- */
.texto{max-width:38rem}
.texto h2{margin-top:2em}
.texto h3{margin-top:1.5em}
.texto table{font:400 .95rem/1.45 var(--titulo);margin:1.2em 0;background:var(--papel);border:1px solid var(--linha);display:block;overflow-x:auto}
.texto th,.texto td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--linha);vertical-align:top}
.texto th{background:var(--areia-clara);font-weight:500}
.form{max-width:34rem;font-family:var(--titulo)}
.form div{margin-bottom:1.1rem}
.form label{display:block;font-weight:500;font-size:.95rem;margin-bottom:.3rem}
.form input,.form select,.form textarea{width:100%;font:400 1rem var(--titulo);padding:.7rem .8rem;border:1.5px solid #8AA0A8;border-radius:var(--raio);background:#fff;color:var(--tinta)}
.form textarea{min-height:9rem;resize:vertical}
.form .dica{font-size:.85rem;color:var(--tinta2);margin-top:.25rem}
.form .isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{padding:1rem 1.2rem;border-radius:var(--raio);font:400 1rem/1.5 var(--titulo);margin-bottom:1.4rem;max-width:34rem}
.msg.ok{background:#E8F3E8;border-left:5px solid var(--ok)}
.msg.erro{background:#FBE9E7;border-left:5px solid var(--erro)}
.msg ul{margin:.4rem 0 0}

/* ---------- rodapé ---------- */
.rodape{position:relative;isolation:isolate;background:var(--noite);color:var(--areia);padding:2.5rem clamp(1.25rem,.5rem + 4vw,4rem) 2rem;font:400 .92rem/1.55 var(--titulo)}
.rodape::before{content:"";position:absolute;inset:0;background:url(/assets/img/topo-escura.svg) center/cover;opacity:.12;z-index:-1}
.rodape-grade{max-width:68rem;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.rodape h2{font:500 .9rem var(--titulo);color:#fff;margin:0 0 .7rem}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:.4rem}
.rodape a{color:var(--areia)}
.rodape a:hover{color:#fff}
.rodape .marca{margin-bottom:.8rem}
.rodape .fim{max-width:68rem;margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid #2C566C;color:#B9CBD3;font-size:.85rem}

/* ---------- celular e tablet ---------- */
@media (max-width:1023px){
  .casca{margin-left:0}
  .topo-mobile{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;background:var(--noite);color:#fff;padding:.55rem 1rem;height:3.5rem}
  .topo-mobile .marca{font-size:1.15rem}
  .topo-mobile .marca svg{width:1.8rem;height:1.8rem}
  .menu-btn{font:500 .95rem var(--titulo);background:transparent;color:#fff;border:2px solid var(--azul-claro);border-radius:var(--raio);padding:.4rem .8rem;cursor:pointer}
  .lateral{position:static;width:auto;inset:auto;padding:1rem 1rem 1.2rem}
  .lateral>.marca{display:none}
  .js .lateral{position:fixed;top:3.5rem;left:0;right:0;bottom:auto;max-height:calc(100dvh - 3.5rem);visibility:hidden;transform:translateY(-8px);opacity:0;transition:opacity .15s,transform .15s,visibility 0s .15s}
  .js .menu-aberto .lateral{visibility:visible;transform:none;opacity:1;transition:opacity .15s,transform .15s}
  .heroi{min-height:22rem}
  .como{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .jogo-corpo{grid-template-columns:minmax(0,1fr)}
  .jogo-banco ul{flex-direction:row;flex-wrap:wrap}
  .chip{width:auto}
  .art-lateral{grid-template-columns:1fr}
}
@media (max-width:640px){
  .jogo-mapa{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .jogo-mapa svg{width:720px;max-width:none}
  .marcador .anel{r:17px}
  .marcador .num{font-size:15px}
  .dica-mapa{display:block!important}
}
@media (max-width:520px){
  body{font-size:1.06rem}
  .rodape-grade{grid-template-columns:1fr}
  .linha-artigo{grid-template-columns:5.5rem 1fr}
  .linha-artigo .miniatura{width:5.5rem}
  .bacias a{grid-template-columns:2.6rem 1fr;gap:0 .9rem}
  .bacias .qtd{display:none}
  .bacias .selo{width:2.6rem;height:2.6rem}
  .pager{flex-direction:column}
  .pager a{max-width:none}
  .pager .prox{text-align:left;margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .heroi-rio .r1,.heroi-rio .r2,.heroi-rio .r3{stroke-dashoffset:0}
}

/* ---------- impressão (Imprimir atlas) ---------- */
@media print{
  :root{--lat:0}
  body{background:#fff;color:#000;font-size:11pt}
  .lateral,.topo-mobile,.rodape,.heroi,.pular,.jogo,#jogo,.atlas-mapas,.atlas-sub,.dados-acoes,.btn,.aviso,.sem-impressao,.vazio,.retomar,[aria-labelledby="mapas-t"],#atlas-app>.texto,.migalhas{display:none!important}
  .casca{margin:0}
  .conteudo{padding:0}
  .carimbos{grid-template-columns:repeat(4,1fr);gap:10pt}
  .carimbo:not(.ganho){display:none}
  .carimbo .tres,.carimbo .data-c{display:block!important}
  .carimbo svg{width:70pt}
  a{color:#000;text-decoration:none}
  .apenas-impressao{display:block!important}
}
.apenas-impressao{display:none}

/* ---------- refinamentos visuais (v2) ---------- */
/* textura topográfica suave no topo do conteúdo */
.conteudo{position:relative;isolation:isolate}
.conteudo::before{content:"";position:absolute;left:0;right:0;top:0;height:44rem;background:url(/assets/img/topo.svg) center top/cover no-repeat;opacity:.075;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}

/* hero: texto à esquerda, prancha de atlas à direita */
.heroi{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem 3rem;align-items:end}
@media (min-width:1100px){.heroi{grid-template-columns:minmax(0,1fr) 25rem;align-items:center}}
.prancha{margin:0;justify-self:end;width:min(100%,25rem);background:#fff;padding:.7rem .7rem .55rem;border-radius:6px;box-shadow:0 22px 44px rgba(4,22,34,.5),0 0 0 1px rgba(255,255,255,.35);transform:rotate(1.8deg)}
.prancha svg{display:block;width:100%;height:auto;outline:1px solid var(--areia-esc);outline-offset:-1px}
.prancha figcaption{font:400 .78rem/1.35 var(--titulo);color:var(--tinta2);padding:.5rem .15rem 0}
@media (max-width:1099px){.prancha{display:none}}

/* cartões de artigo e lista de categorias */
.linha-artigo{padding:.9rem;border:1px solid var(--linha);border-radius:10px;background:var(--papel);transition:border-color .2s,box-shadow .2s}
.linha-artigo:hover,.linha-artigo:focus-within{border-color:var(--cat,var(--azul));box-shadow:0 10px 26px rgba(19,48,60,.09)}
.linha-artigo .miniatura{border-radius:6px}
.lista-artigos{gap:1.1rem 1.4rem}
.bacias a{transition:box-shadow .15s,background .15s}
.bacias a:hover,.bacias a:focus-visible{box-shadow:inset 5px 0 0 var(--azul)}
.bacias .nome{font-size:1.3rem}

/* seção de carimbos na home */
.carimbos-home{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 3rem;align-items:center;background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:clamp(1.2rem,.5rem + 3vw,2.4rem)}
.carimbos-home h2{margin-top:0}
.carimbos-home p{max-width:30rem}
.amostra-carimbos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem 1.2rem;justify-content:center}
.amostra-carimbos li{margin:0;width:6.8rem;text-align:center;font:400 .76rem/1.3 var(--titulo);color:var(--tinta2)}
.amostra-carimbos svg{width:6.2rem;display:block;margin:0 auto .35rem}
@media (max-width:860px){.carimbos-home{grid-template-columns:minmax(0,1fr)}.amostra-carimbos{justify-content:flex-start}}

/* mapas do atlas como pranchas */
.mapa-card{border-radius:8px;transition:box-shadow .2s,border-color .2s}
.mapa-card:hover,.mapa-card:focus-within{box-shadow:0 12px 28px rgba(19,48,60,.1);border-color:#B8C7C9}
.mapa-card img{border-bottom:1px solid var(--linha)}
.atlas-mapas.brasil .mapa-card{border-top:4px solid var(--verde)}
.atlas-mapas.mundo .mapa-card{border-top:4px solid var(--azul-prof)}

/* categorias: faixa de cor */
.pagina[style*="--cat"] .cat-cab{border-left:6px solid var(--cat);padding-left:1.2rem}

/* artigo: capa como prancha, marcador nos subtítulos, blocos de apoio */
.capa img{border-radius:4px;border:8px solid #fff;box-shadow:0 0 0 1px var(--linha),0 16px 36px rgba(19,48,60,.15)}
.art-cab .etiqueta{font-size:.85rem}
.art-corpo h2{padding-top:.95rem;position:relative}
.art-corpo h2::before{content:"";position:absolute;left:0;top:0;width:3rem;height:3px;border-radius:2px;background:var(--cat,var(--azul))}
.bloco-erros{background:var(--areia-clara);border-left:5px solid var(--areia-esc);border-radius:0 10px 10px 0;padding:.2rem 1.4rem 1rem;margin:2.2em 0 0}
.bloco-erros h2{margin-top:.9em}
.bloco-erros h2::before,.bloco-faq h2::before{display:none}
.bloco-erros h2,.bloco-faq h2{padding-top:0}
.bloco-erros ul{padding-left:1.1em;margin-bottom:0}
.bloco-faq{margin-top:2.4em}
.bloco-faq h2{margin-top:0}
.bloco-faq h3{font-size:1.08rem;margin:1.5em 0 .35em;padding-bottom:.4rem;border-bottom:1px solid var(--linha)}

/* barra lateral e rodapé: detalhes */
.rio-nav a{transition:color .15s}
.rodape .marca svg{box-shadow:0 0 0 1px rgba(255,255,255,.12);border-radius:9px}
@media (min-width:1100px){.heroi h1{font-size:clamp(2.2rem,1rem + 3vw,3.35rem)}}