/* =========================================================
   GEONAUTA — página de postagem
   (herda as variáveis e os botões de base.css)
   ========================================================= */
body.pg{background:var(--paper)}

.pg-top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;
  padding:12px clamp(16px,3vw,32px);
  background:rgba(255,249,238,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.pg-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.pg-nav a{
  text-decoration:none;font-size:15.5px;font-weight:600;color:var(--earth);
  padding:7px 11px;border-radius:999px;transition:.2s;white-space:nowrap;
}
.pg-nav a:hover{background:rgba(255,160,1,.16)}

.pg-wrap{width:min(760px,92vw);margin:0 auto}

/* A capa mora em blocos.css (classe .gh), para a previa do editor e a
   pagina no ar desenharem a mesma coisa. Aqui fica so o que e desta
   pagina: a tarja da secao e a linha de creditos. */
.pg-chip{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:var(--earth-dp);padding:6px 13px;border-radius:999px;margin-bottom:14px;
}
.pg-meta{margin:14px 0 0;font-size:15px;opacity:.9}

/* ---------- corpo ---------- */
.pg-body{padding:46px 0 10px}
.pg-resumo{
  font-size:21px;line-height:1.65;color:#3B2006;
  border-left:4px solid var(--gold);padding-left:20px;margin:0 0 34px;
}
.pg-texto p{font-size:18.5px;line-height:1.8;color:#3B2006}

/* arquivo anexado */
.pg-arquivo{
  display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;margin:34px 0;box-shadow:var(--shadow-sm);
}
.pg-arquivo__ic{
  width:54px;height:64px;border-radius:8px;background:var(--gold);color:var(--earth-dp);
  display:grid;place-items:center;font-size:14px;font-weight:800;flex:none;
}
.pg-arquivo b{display:block;font-size:17.5px;margin-bottom:2px;word-break:break-all}
.pg-arquivo small{font-size:14.5px;color:#9B8763}
.pg-arquivo .ab{margin-left:auto;flex:none}

/* ---------- quiz ---------- */

.q{margin-bottom:24px}
.q>b{display:block;font-size:17.5px;margin-bottom:12px;color:var(--earth-dp)}
.q label{
  display:flex;gap:11px;align-items:flex-start;padding:12px 15px;margin-bottom:7px;
  background:#fff;border:1px solid var(--line);border-radius:11px;cursor:pointer;
  font-size:16px;line-height:1.5;transition:.18s;
}
.q label:hover{border-color:var(--gold)}
.q input:checked+span{font-weight:700}
.q label:has(input:checked){border-color:var(--gold);background:#FFFBF0;box-shadow:0 4px 14px rgba(63,23,0,.14)}
.q textarea{
  width:100%;font-family:var(--font-ui);font-size:16.5px;padding:13px 15px;
  border:1px solid var(--line);border-radius:11px;background:#fff;resize:vertical;
}

/* ---------- obras no rodapé do post ---------- */
.pg-obra{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:26px clamp(20px,3vw,32px);margin:44px 0;box-shadow:var(--shadow-sm);
}
.pg-obra__capas{display:flex}
.pg-obra__capas img{
  width:86px;border-radius:6px;box-shadow:0 10px 24px rgba(45,32,10,.24);
}
.pg-obra__capas img+img{margin-left:-34px}
.pg-obra small{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dp)}
.pg-obra h3{margin:6px 0 8px;font-size:25px}
.pg-obra p{margin:0 0 16px;font-size:16px;line-height:1.6;color:#6C5A3D}

/* ---------- links do rodapé ---------- */
.pg-links{border-top:1px solid var(--line);padding:30px 0 60px}
.pg-links h3{margin:0 0 14px;font-size:21px}
.pg-links ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pg-links a{
  display:inline-flex;align-items:center;gap:8px;font-size:16.5px;font-weight:600;
  color:var(--earth);text-decoration:none;border-bottom:1px solid transparent;
}
.pg-links a:hover{color:var(--gold-dp);border-bottom-color:var(--gold)}

/* ---------- rodapé ---------- */

.pg-erro{padding:18vh 0;text-align:center}
.pg-erro h1{font-family:var(--font-display);font-size:40px;margin:0 0 12px}
.pg-erro p{color:#7A6746;margin-bottom:24px}

@media (max-width:700px){
  /* .pg-nav no celular é gaveta agora (ve topo.css) -- nao esconder aqui */
  .pg-obra{grid-template-columns:1fr}
  .pg-arquivo{flex-wrap:wrap}
  .pg-arquivo .ab{margin-left:0;width:100%;text-align:center}
}

.pg-fonte{font-size:15.5px!important;color:#8A7554!important;font-style:italic;margin-top:24px}
.pg-fonte a{color:var(--gold-dp);font-weight:700}

/* ---------- volume na página de postagem ---------- */
.pg-arquivo,.pg-obra{
  border:1px solid rgba(255,255,255,.7);position:relative;
  box-shadow:0 1px 1px rgba(45,32,10,.05),0 6px 10px rgba(45,32,10,.07),
             0 16px 28px rgba(45,32,10,.1),0 34px 56px rgba(45,32,10,.12);
}
.pg-arquivo::before,.pg-obra::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,0) 38%);
  mix-blend-mode:overlay;
}
.pg-obra__capas img{
  box-shadow:0 2px 4px rgba(45,32,10,.18),0 14px 28px rgba(45,32,10,.3),0 28px 46px rgba(45,32,10,.16);
}
.q label{box-shadow:0 1px 2px rgba(45,32,10,.05),0 4px 10px rgba(45,32,10,.05)}

/* ---------- a matéria inteira, no mesmo cartão branco da obra
   no rodapé (é o mesmo desenho, só maior) ---------- */
.pg-cartao{
  background:#fff; border-radius:24px; position:relative;
  padding:clamp(26px,4vw,48px); margin:36px 0 40px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 1px rgba(45,32,10,.05),0 6px 10px rgba(45,32,10,.07),
             0 16px 28px rgba(45,32,10,.1),0 34px 56px rgba(45,32,10,.12);
}
.pg-cartao::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,0) 38%);
  mix-blend-mode:overlay;
}
@media (max-width:700px){
  .pg-cartao{ border-radius:16px; padding:20px 16px; margin-top:18px; }
}
/* celular: texto justificado em coluna estreita abria buracos entre as
   palavras -- com hifenização o justificado continua, sem os buracos */
@media (max-width:760px){
  .pg-texto, .pg-resumo, .gb-nota, .pg-notaautor{ -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
}

/* ---------- estrutura do artigo completo ---------- */
.pg-sub{
  font-family:var(--font-display);font-weight:400;font-size:29px;line-height:1.2;
  margin:42px 0 14px;color:var(--earth-dp);
}
.pg-sub:first-child{margin-top:0}
.pg-lista{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:11px}
.pg-lista li{
  position:relative;padding-left:30px;font-size:18px;line-height:1.72;color:#3B2006;
}
.pg-lista li::before{
  content:"";position:absolute;left:4px;top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 2px 5px rgba(63,23,0,.45);
}

/* ---------- vídeos e links do artigo ---------- */
.pg-video{margin:34px 0;padding:0}
.pg-video__moldura{
  position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;background:#1B1206;
  box-shadow:0 2px 4px rgba(45,32,10,.14),0 14px 30px rgba(45,32,10,.22),0 34px 60px rgba(45,32,10,.18);
}
.pg-video__moldura iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pg-video figcaption{
  margin-top:11px;font-size:15px;color:#8A7554;text-align:center;font-style:italic;
}
.pg-botao-link{
  display:flex;align-items:center;gap:14px;margin:12px 0;padding:15px 20px;
  background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;
  font-size:17px;font-weight:600;color:var(--earth-dp);transition:.22s;
  box-shadow:0 1px 2px rgba(45,32,10,.05),0 6px 14px rgba(45,32,10,.08);
}
.pg-botao-link:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(45,32,10,.07),0 12px 26px rgba(45,32,10,.14);
}
.pg-botao-link span{flex:1}
.pg-botao-link b{font-size:14.5px;color:var(--gold-dp);white-space:nowrap}

/* CANTOS QUADRADOS — mesmo tom do site */
:root{--r:0}
*,*::before,*::after{border-radius:0 !important}

/* =========================================================
   APRESENTAÇÃO ANTES DO CONTEÚDO (ads.js)
   ========================================================= */
body.ad-aberto{overflow:hidden}
.ad{
  position:fixed;inset:0;z-index:9000;
  display:grid;grid-template-rows:auto 1fr auto;
  background:#1B1206;color:#FFF9EE;
  animation:adEntra .3s ease both;
}
.ad.is-saindo{opacity:0;transition:opacity .25s ease}
@keyframes adEntra{from{opacity:0}to{opacity:1}}

.ad__topo{
  display:flex;align-items:center;gap:18px;
  padding:14px 26px;border-bottom:1px solid rgba(254,214,0,.18);
}
.ad__logo{height:26px;width:auto}
.ad__passos{display:flex;gap:6px;flex:1}
.ad__passos i{flex:1;height:3px;background:rgba(255,249,238,.2);display:block;overflow:hidden}
.ad__passos b{display:block;height:100%;width:0;background:var(--gold,#FFA001)}
.ad__conta{font-size:15px;font-weight:800;letter-spacing:.06em;color:#FED600;min-width:48px;text-align:right}

.ad__palco{
  display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;
  padding:34px 46px;max-width:1240px;width:100%;margin:0 auto;overflow:hidden;
}
.ad__foto{margin:0;height:min(58vh,520px);background:#3B2006;overflow:hidden}
.ad__foto img{width:100%;height:100%;object-fit:cover;display:block}
.ad__foto--inteira{background:#FFF9EE}
.ad__foto--inteira img{object-fit:contain;padding:18px}

.ad__olho{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#3B2006;background:#FED600;padding:5px 11px;margin-bottom:16px;
}
.ad__txt h2{font-size:clamp(28px,calc(3.4vw + 2px),46px);line-height:1.1;margin:0 0 14px;color:#FFF9EE}
.ad__txt p{font-size:18px;line-height:1.65;color:rgba(255,249,238,.8);margin:0 0 20px;max-width:46ch}
.ad__barra{height:10px;background:rgba(255,249,238,.16);margin:0 0 20px;max-width:360px}
.ad__barra i{display:block;height:100%;background:var(--gold,#FFA001)}
.ad__acao{
  display:inline-block;font-weight:800;font-size:16px;color:#3B2006;background:#FED600;
  padding:12px 20px;text-decoration:none;border:2px solid #FED600;
}
.ad__acao:hover{background:transparent;color:#FED600}

.ad__pe{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 26px;border-top:1px solid rgba(254,214,0,.18);
}
.ad__nota{margin:0;font-size:15px;color:rgba(255,249,238,.6)}
.ad__entrar{
  font:inherit;font-weight:800;font-size:17px;padding:13px 26px;cursor:pointer;
  background:var(--gold,#FFA001);color:#3B2006;border:2px solid var(--gold,#FFA001);
}
.ad__entrar:disabled{background:transparent;color:rgba(255,249,238,.45);border-color:rgba(255,249,238,.2);cursor:default}

@media (max-width:820px){
  .ad__palco{grid-template-columns:1fr;gap:20px;padding:20px;align-content:start;overflow-y:auto}
  .ad__foto{height:34vh}
  .ad__pe{flex-direction:column;align-items:stretch;text-align:center}
  .ad__entrar{width:100%}
}

/* ajustes finos da apresentação */
.ad,.ad *{font-family:'Montserrat',var(--font-ui,system-ui),sans-serif}
.ad__txt h2{font-family:var(--font-display,'Montserrat'),sans-serif;font-weight:400}
.ad__logo{filter:brightness(0) invert(1);opacity:.9}
.ad__foto{height:min(52vh,460px)}
.pg-conta{display:flex;gap:8px;align-items:center}

.pg-arquivo__aviso{
  flex-basis:100%;margin:10px 0 0;font-size:15px;line-height:1.55;
  color:rgba(62,42,11,.68);
}

/* mais respiro embaixo (a margem colapsa com a do que vem depois --
   34px dos dois lados virava só 34px de distância de verdade) */
.pg-quadro{margin:34px 0 64px}
.pg-quadro h3{
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dp,#3F1700);margin:0 0 14px;
}
.pg-quadro .pg-arquivo{margin-bottom:10px}

/* o menu das páginas internas é o mesmo da home */
.pg-nav{display:flex;flex-wrap:wrap;gap:2px;min-width:0}
.pg-nav a{font-size:15px;padding:8px 9px;white-space:nowrap}
@media (max-width:1240px){.pg-nav a{font-size:14px;padding:8px 6px}}
/* tamanho e alinhamento escolhidos no editor */
.pg-texto .tx--p{font-size:17px}
.pg-texto .tx--m{font-size:19px}
.pg-texto .tx--g{font-size:21.5px}
.pg-texto .tx--gg{font-size:25px;font-weight:600;line-height:1.55}
.pg-texto .al--esq{text-align:left}
.pg-texto .al--centro{text-align:center}
.pg-texto .al--dir{text-align:right}
.pg-texto .al--just{text-align:justify;text-justify:inter-word}

.pg-foto{margin:26px 0}
.pg-foto img{width:100%;height:auto;display:block}
.pg-foto figcaption{font-size:15px;color:rgba(62,42,11,.6);padding-top:8px}

/* --pp-1 (tema.css) é quase branco puro -- ótimo pro painel, mas na
   matéria o texto do corpo fica bem mais estreito que a tela (o
   .pg-wrap central de 760px), então essa cor sobrava nas laterais
   inteiras como uma faixa branca "crua", destoando do tom quente
   (creme) do resto do site. --paper-2 não existe aqui (só vem no
   styles.css, que a matéria não carrega) -- por isso o valor direto
   como reserva, no mesmo tom creme usado nas outras páginas. */
body.pg{ background:var(--paper-2,#F6EEDD); }
.pg-top{
  background:rgba(255,253,248,.94);
  border-bottom:1px solid var(--ln);
}
.pg-nav a{ color:var(--tt-2); }
.pg-nav a:hover{ background:var(--pp-3); color:var(--tt-1); }

/* =========================================================
   O topo das páginas internas, no mesmo desenho da inicial:
   logo e atalhos à esquerda, menu no meio, conta à direita.
   ========================================================= */
.pg-top{ gap:16px; }
.pg-top .pg-marca{ flex:none; }
.pg-top .atalhos{ flex:none; }
.pg-nav{ margin:0; justify-content:center; }

/* Antes o menu era centralizado na TELA (position:absolute, left:50%),
   sem saber quanto espaço a logo, os atalhos, o botão dos mapas e a
   conta realmente ocupavam dos dois lados — quando a soma dos dois
   lados era desigual (ou quando o botão "MAPAS PARA COLORIR", que
   nasce depois, por JS, entrou na conta), o menu acabava fora do
   centro de verdade e podia cair em cima de um botão vizinho. Agora
   ele é um item comum do flex, que cresce pra ocupar só o espaço que
   sobra entre os dois lados e centraliza o próprio conteúdo dentro
   dele — o mesmo desenho do menu da capa (.nav). Nunca mais disputa
   lugar com ninguém, e a seção 10 do topo.css sabe encolher ele (ou
   jogar pra própria linha) se um dia nem esse espaço for suficiente. */
@media (min-width:1100px){
  .pg-top{ position:sticky; }
  .pg-nav{ flex:1 1 auto; min-width:0; margin:0; }
  .pg-top > *:last-child{ margin-left:auto; }
}
.pg-top > .ab,
.pg-top > .pg-conta,
.pg-top > button{ margin-left:0; flex:none; }
.pg-conta{ display:flex; gap:8px; align-items:center; }

/* =========================================================
   O último item do topo mora na direita
   Com o menu centralizado por position:absolute ele não ocupa
   mais espaço, e o botão da ponta escorregava para a esquerda.
   Este "auto" vem depois e devolve a ponta para o seu canto.
   ========================================================= */
.pg-top > .ab:last-child,
.pg-top > button:last-child,
.pg-top > .pg-conta:last-child{ margin-left:auto; }

/* =========================================================
   O CELULAR NAS PÁGINAS INTERNAS
   Este bloco tinha a antiga fita horizontal que corria com o
   dedo (.pg-top virava grid de 2 linhas, .pg-nav virava uma
   fita rolável). Removido: o topo.css agora é o único dono da
   geometria do cabeçalho em todo o site, inclusive no celular
   -- ele já transforma .pg-top numa linha só com hambúrguer e
   gaveta (mesmo desenho da página inicial) a partir de 980px.
   Manter regras de layout do .pg-top/.pg-nav aqui duplicava e
   entrava em guerra de !important com o topo.css.
   ========================================================= */

@media (max-width:700px){
  .pg-wrap{ width:100%; padding:0 16px; }
  .pg-erro{ padding:14vh 0; }
  .pg-erro h1{ font-size:30px; }
}

/* ---------- as obras no celular ---------- */
@media (max-width:760px){
  .ob-hero{ padding-top:26px; }
  .ob-hero h1{ font-size:clamp(28px,calc(7.4vw + 2px),38px); }
  .ob-indice{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .ob-indice::-webkit-scrollbar{ display:none; }
  .ob-indice a{ flex:none; white-space:nowrap; }
  .ob-botoes{ flex-direction:column; }
  .ob-botoes .ab{ width:100%; }
}

/* a nota do autor: a mesma caixinha da prévia do editor (no ar ela
   nunca tinha ganhado estilo — saía colada no texto e nas imagens) */
.pg-notaautor{
  margin:0 0 34px; padding:16px 20px;
  background:rgba(255,160,1,.1);
  border-radius:10px;   /* sem a tarja amarela do lado (24/09) */
  line-height:1.65; color:#3B2006;
}
.pg-notaautor + *{ margin-top:0; }

/* o quadro de downloads quando o editor escolheu o lugar dele no meio do texto */
.pg-texto .gb-downloads{ margin:28px 0; }
.pg-texto .gb-downloads p, .pg-texto .gb-downloads h3{ text-indent:0 !important; }

/* =========================================================
   24/09 — a CENTRAL DE DOWNLOADS no fim da página de cada mapa
   Estava sem estilo nenhum: cada foto saía do tamanho da
   página inteira, uma embaixo da outra. Agora é uma grade de
   cards pequenos, organizada por seção.
   ========================================================= */
.pg-mapas{ padding:48px 0 64px; margin-top:40px; background:#FBF6EC; border-top:1px solid rgba(63,23,0,.12); }
.pg-mapas h2{ margin:0 0 8px; font-size:26px; color:#3B2006; }
.pg-mapas > .pg-wrap > p{ margin:0 0 26px; color:#6E5A3C; font-size:16.5px; text-indent:0; }
.pg-mapas__grupo{ margin:0 0 30px; }
.pg-mapas__grupo h3{
  margin:0 0 14px; font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#3F1700;
}
.pg-down__grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; }
.pg-down__card{
  display:flex; flex-direction:column; background:#fff; border:1px solid rgba(63,23,0,.12);
  box-shadow:0 1px 2px rgba(45,32,10,.05), 0 6px 16px rgba(45,32,10,.06); overflow:hidden;
}
.pg-down__card--atual{ border-color:#FFA001; box-shadow:0 0 0 2px rgba(255,160,1,.35); }
.pg-down__capa{ display:block; aspect-ratio:4/3; overflow:hidden; background:#F3E8D2; }
.pg-down__capa img{ display:block; width:100% !important; height:100% !important; max-width:none; object-fit:cover; margin:0 !important; }
.pg-down__card--mapa .pg-down__capa{ background:#fff; }
.pg-down__card--mapa .pg-down__capa img{ object-fit:contain; padding:6px; box-sizing:border-box; }
.pg-down__corpo{ display:flex; flex-direction:column; gap:10px; padding:10px 12px 12px; flex:1; }
.pg-down__tit{ font-size:15px; font-weight:700; line-height:1.3; color:#3B2006; text-decoration:none; }
a.pg-down__tit:hover{ color:#3F1700; text-decoration:underline; }
.pg-down__tit i{ display:inline-block; margin-left:4px; font-style:normal; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#3F1700; }
.pg-down__botoes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.pg-down__botoes .ab{ font-size:14px; padding:6px 12px; }
@media (max-width:560px){ .pg-down__grade{ grid-template-columns:repeat(2,1fr); gap:10px; } }