/* =========================================================
   GEONAUTA — Landing page imersiva (4 estações)
   Paleta da marca: sol âmbar + marrom terra
   ========================================================= */

:root{
  --gold:#FFA001;
  --gold-lt:#FED600;
  --gold-dp:#3F1700;
  --earth:#3B2006;
  --earth-dp:#3B2006;
  --ink:#3B2006;
  --paper:#FFF9EE;
  --paper-2:#F6EEDD;
  --white:#fff;

  --font-display:"Montserrat","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-ui:"Montserrat","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;

  --wrap:1160px;
  --r:18px;
  --shadow:0 18px 44px rgba(45,32,10,.16);
  --shadow-sm:0 8px 22px rgba(45,32,10,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:#cfe7f5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* =========================================================
   1. CENÁRIO FIXO
   ========================================================= */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}

.scene{position:absolute;inset:0;opacity:0;transition:opacity .45s linear;will-change:opacity}
.scene[data-scene="0"]{opacity:1}

/* ---- CÉU (abertura) ---- */

.c1{width:260px;height:56px;top:16%;left:6%;animation:drift 90s linear infinite}

.c3{width:340px;height:70px;top:52%;left:22%;opacity:.8;animation:drift 120s linear infinite}

@keyframes drift{from{transform:translateX(-12vw)}to{transform:translateX(112vw)}}

/* ---- INVERNO ---- */

#particles{position:absolute;inset:0;width:100%;height:100%}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(40,28,10,.22) 100%)}

/* =========================================================
   2. TOPO
   ========================================================= */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:22px;
  padding:14px clamp(16px,3vw,32px);
  transition:background .35s,box-shadow .35s,padding .35s;
}
.topbar.is-stuck{
  background:rgba(255,249,238,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 20px rgba(60,42,14,.14);
  padding-top:12px;padding-bottom:12px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}

/* os dois atalhos que moram ao lado da logo */
.atalhos{display:flex;gap:8px;flex:none}
.atalho{
  text-decoration:none;font-size:15px;font-weight:700;color:var(--earth);
  padding:7px 14px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(63,23,0,.26);
  background:rgba(255,249,238,.62);
  transition:background .2s,border-color .2s,color .2s;
}
.atalho:hover{background:var(--gold);border-color:var(--gold);color:#3B2006}

/* cresce pra ocupar o espaço livre entre a busca e o botão dos
   mapas, e centraliza o próprio conteúdo dentro desse espaço —
   em vez de "margin:0 auto" competindo por espaço livre com o
   "margin-left:auto" do botão dos mapas (topo.css), o que fazia
   o menu ficar espremido/atropelado toda vez que um dos dois lados
   crescia. Ver também a seção 39 (removida) que travava o menu
   com position:absolute no meio da tela, ignorando os vizinhos. */
.nav{display:flex;gap:6px;margin:0;flex:1 1 auto;justify-content:center;flex-wrap:wrap;min-width:0}
.nav a{
  text-decoration:none;font-size:16px;font-weight:600;color:var(--earth);
  padding:8px 12px;border-radius:999px;transition:.2s;white-space:nowrap;
}
.nav a:hover{background:rgba(255,160,1,.16)}
.nav a.is-active{background:var(--gold);color:#3B2006}

/* HUD de pontos */

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;gap:5px;flex-direction:column}
.burger i{display:block;width:24px;height:2px;background:var(--earth);border-radius:2px}

/* busca — palavra-chave ou código da BNCC */
.busca{position:relative;display:flex;align-items:center;gap:8px;flex:none;margin-left:26px}
@media (min-width:1240px){ .busca{ margin-left:56px } }
.busca__info{
  position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(63,23,0,.4);background:rgba(255,249,238,.7);
  color:var(--earth);font-family:var(--font-display);font-style:italic;font-weight:800;
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background .2s,border-color .2s,color .2s;
}
.busca__info:hover,.busca__info.is-on{background:var(--gold);border-color:var(--gold);color:#3B2006}
.busca__dica{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);
  width:240px;padding:10px 13px;border-radius:12px;
  background:#3B2006;color:#FFF6E6;font-family:var(--font-ui);font-size:14.5px;font-weight:500;
  line-height:1.5;text-align:left;box-shadow:0 12px 28px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s;z-index:5;
}
.busca__dica::before{
  content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#3B2006;
}
.busca__info:hover .busca__dica,
.busca__info.is-on .busca__dica{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.busca__campo{
  position:relative;display:flex;align-items:center;
  background:rgba(255,249,238,.85);border:1px solid rgba(63,23,0,.22);
  border-radius:999px;padding:0 12px;height:34px;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.busca__campo:focus-within{background:#FFFBF1;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,160,1,.16)}
.busca__lupa{width:14px;height:14px;flex:none;fill:none;stroke:var(--earth);stroke-width:2;opacity:.65;margin-right:7px}
.busca__input{
  border:0;background:none;outline:0;width:150px;max-width:150px;
  font-family:var(--font-ui);font-size:15px;color:var(--earth-dp);
}
.busca__input::placeholder{color:rgba(90,62,16,.55)}
.busca__resultados{
  position:absolute;top:calc(100% + 10px);left:0;min-width:280px;max-width:360px;
  max-height:360px;overflow:auto;background:#FFFBF1;border:1px solid rgba(63,23,0,.16);
  border-radius:14px;box-shadow:0 18px 40px rgba(45,32,10,.22);padding:6px;z-index:5;
}
.busca__item{
  display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:9px;
  text-decoration:none;transition:background .15s;
}
.busca__item:hover{background:rgba(255,160,1,.12)}
.busca__item small{font-family:var(--font-ui);font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#A8906B}
.busca__item span{font-family:var(--font-display);font-size:16.5px;font-weight:700;color:#3B2006;line-height:1.3}
.busca__item .busca__bncc{font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--gold-dp,#3F1700);align-self:flex-start}
.busca__vazio{margin:0;padding:14px 12px;text-align:center;font-family:var(--font-ui);font-size:15px;color:#8A7455}

.topbar:not(.is-stuck) .busca__info{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#FFF6E6}
.topbar:not(.is-stuck) .busca__campo{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.topbar:not(.is-stuck) .busca__input{color:#FFF6E6}
.topbar:not(.is-stuck) .busca__input::placeholder{color:rgba(255,246,230,.6)}
.topbar:not(.is-stuck) .busca__lupa{stroke:#FFF6E6}

@media (max-width:1180px){ .busca__input{width:110px;max-width:110px} }
@media (max-width:980px){ .busca{display:none} }

.scrollbar-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold));
}

/* =========================================================
   3. ESTRUTURA DE PAINÉIS
   ========================================================= */
main{position:relative;z-index:10}
.panel{position:relative;padding:18vh 0;min-height:100vh;display:flex;align-items:center}
.wrap{width:min(var(--wrap),92vw);margin:0 auto}

/* HERO */

.eyebrow{
  font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#3B2006;
  margin:0 0 18px;font-weight:700;text-shadow:0 1px 10px rgba(255,255,255,.7);
}
h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(42px,calc(7.2vw + 2px),88px);line-height:1.02;margin:0;
  color:#3B2006;text-shadow:0 3px 26px rgba(255,255,255,.55);
}
h1 em{font-style:italic;color:var(--gold-dp)}

@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* Tipografia de seção */

h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(34px,calc(5vw + 2px),60px);
  line-height:1.06;margin:0 0 18px;color:#3B2006;text-shadow:0 2px 18px rgba(255,255,255,.45);
}

/* Botões */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:17px;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .2s;font-family:var(--font-ui);
}
.btn--gold{background:var(--gold);color:#3B2006;box-shadow:0 10px 26px rgba(63,23,0,.34)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(63,23,0,.44)}

/* =========================================================
   4. CARDS / TILES / MÍDIA
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  background:var(--paper);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(45,32,10,.24)}

.chip{
  display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:rgba(255,160,1,.18);color:var(--earth);padding:5px 10px;border-radius:999px;margin-bottom:12px;
}
.card h3{font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1.2;margin:0 0 10px;color:#3B2006}
.card p{font-size:16.5px;line-height:1.6;color:#3B2006;margin:0 0 18px}
.card footer{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(63,23,0,.12);padding-top:14px}
.pts{font-size:14px;font-weight:700;color:var(--gold-dp)}
.card footer a{font-size:15.5px;font-weight:700;text-decoration:none;color:var(--earth)}
.card footer a:hover{color:var(--gold-dp)}

/* Mapas */

.s3{left:26%;top:86px;transform:rotate(7deg)}

/* =========================================================
   5. JORNADA (gamificação)
   ========================================================= */

@keyframes snap{0%{transform:scale(.72) rotate(-8deg)}60%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1)}}
/* =========================================================
   6. RODAPÉ
   ========================================================= */
.foot{position:relative;z-index:10;background:#3B2006;color:#CDB98F;padding:56px 0 34px}

.foot strong{font-family:var(--font-display);letter-spacing:.14em;color:var(--gold-lt);font-size:22px;font-weight:400}
.foot p{margin:8px 0 0;font-size:15.5px;line-height:1.6;max-width:40ch}
.foot nav{display:grid;gap:8px}
.foot nav a{font-size:15.5px;text-decoration:none;opacity:.85}
.foot nav a:hover{opacity:1;color:var(--gold-lt)}
.foot small{font-size:14px;opacity:.65}

/* =========================================================
   7. ANIMAÇÕES DE ENTRADA
   ========================================================= */
.fade,.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.fade.in,.reveal.in{opacity:1;transform:none}
.fade:nth-child(1){transition-delay:.05s}
.fade:nth-child(2){transition-delay:.15s}
.fade:nth-child(3){transition-delay:.25s}
.fade:nth-child(4){transition-delay:.35s}
.fade:nth-child(5){transition-delay:.45s}
.cards .reveal:nth-child(2){transition-delay:.12s}
.cards .reveal:nth-child(3){transition-delay:.24s}

/* =========================================================
   8. RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .cards{grid-template-columns:1fr 1fr}
  
  
  
}
@media (max-width:860px){
  .nav{
    position:fixed;inset:64px 12px auto 12px;background:rgba(255,249,238,.98);
    border-radius:var(--r);box-shadow:var(--shadow);padding:12px;display:none;flex-direction:column;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 14px;font-size:17px}
  .burger{display:flex}
  
  
  
  
  .cards{grid-template-columns:1fr}
  .panel{padding:14vh 0;min-height:auto}
  
  
  
  
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .fade,.reveal{opacity:1;transform:none}
}

/* =========================================================
   9. LEGIBILIDADE SOBRE O CENÁRIO
   ========================================================= */
.panel{scroll-margin-top:92px}
.wrap{position:relative;z-index:1}
.panel:not(.panel--hero):not(.panel--solid):not(.panel--dark) .wrap::before{
  content:"";position:absolute;inset:-8vh -6vw;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 75% at 34% 46%,rgba(255,249,238,.80),rgba(255,249,238,.35) 55%,rgba(255,249,238,0) 78%);
  filter:blur(6px);
}

/* --- logo --- */
.brand__logo{height:56px;width:auto;filter:drop-shadow(0 2px 10px rgba(255,255,255,.55));transition:height .35s}
.topbar.is-stuck .brand__logo{height:40px;filter:none}

/* --- cards com foto --- */
.cards{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

/* --- rodapé --- */
.foot__brand img{margin-bottom:12px}

@media (max-width:860px){
  .brand__logo{height:32px}
  
  
}

/* =========================================================
   13. JORNADA — imagem em 12 peças (4 × 3)
   ========================================================= */

@keyframes snap12{0%{transform:scale(.74) rotate(-7deg)}60%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1)}}

/* =========================================================
   14. RESPONSIVO DAS NOVAS PEÇAS
   ========================================================= */
@media (max-width:1180px){
  .roleta__track{grid-auto-columns:calc((100% - 1 * 20px) / 2)}
  .roleta__nav--prev{left:-10px}
  .roleta__nav--next{right:-10px}
}
@media (max-width:1080px){
  .obras{grid-template-columns:1fr}
}
@media (max-width:980px){
  .roleta__track{grid-auto-columns:calc((100% - 1 * 20px) / 2)}
}
@media (max-width:860px){
  .roleta__track{grid-auto-columns:76%}
  
  .obra{grid-template-columns:1fr}
  
  
  .panel--sec{padding:11vh 0}
}

/* =========================================================
   18. VOLUME — sombras em camadas e luz fotográfica
   ========================================================= */
:root{
  --luz:
    0 1px 1px rgba(45,32,10,.05),
    0 4px 6px rgba(45,32,10,.07),
    0 10px 18px rgba(45,32,10,.09),
    0 24px 44px rgba(45,32,10,.14);
  --luz-alta:
    0 2px 2px rgba(45,32,10,.06),
    0 8px 12px rgba(45,32,10,.09),
    0 20px 34px rgba(45,32,10,.13),
    0 42px 76px rgba(45,32,10,.22);
}

/* superfície com brilho de luz vindo de cima-esquerda */
.obra{
  position:relative;
}
.obra::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,0) 38%);
  mix-blend-mode:overlay;
}

.scard{perspective:1100px}

.scard__thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%),
    linear-gradient(0deg,rgba(40,26,4,.20),rgba(40,26,4,0) 46%);
}

.obra{box-shadow:var(--luz);border:1px solid rgba(255,255,255,.7)}
.obra:hover{transform:translateY(-8px) scale(1.01);box-shadow:var(--luz-alta)}

.btn--gold{box-shadow:0 2px 3px rgba(63,23,0,.25),0 10px 24px rgba(63,23,0,.36)}
.btn--gold:hover{box-shadow:0 3px 5px rgba(63,23,0,.28),0 16px 34px rgba(63,23,0,.46)}

@media (max-width:860px){
  .panel--entrada{padding-top:19vh}
  
}

/* =========================================================
   19. ENTRADA — os livros abrem o site
   ========================================================= */
.panel--entrada{
  padding:15vh 0 12vh;
  background:linear-gradient(180deg,rgba(255,249,238,0) 0%,rgba(255,249,238,.62) 30%,#FFF9EE 52%,#F8F0DF 100%);
}
.panel--entrada .eyebrow{
  text-align:center;margin:0 0 6px;font-size:14.5px;letter-spacing:.26em;
}

/* ---- a prateleira das cinco coleções ---- */
.prateleira{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,2.2vw,30px);
  max-width:1120px;margin:0 auto 92px;
  /* pelo topo: alinhar pelo pe empurrava para baixo o livro cujo nome
     cabe numa linha so ("GEO"), e a capa dele descia em relacao as outras */
  align-items:start;
}
.livro{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;gap:10px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.livro:hover{transform:translateY(-8px)}
.livro__capa{
  display:block;width:100%;aspect-ratio:3/4;border-radius:5px 11px 11px 5px;overflow:hidden;
  background:linear-gradient(135deg,#3F1700,#3F1700);
  box-shadow:0 2px 4px rgba(45,32,10,.14),0 12px 22px rgba(45,32,10,.18),
             0 26px 48px rgba(45,32,10,.2);
  transition:box-shadow .3s;
}
.livro:hover .livro__capa{
  box-shadow:0 3px 6px rgba(45,32,10,.18),0 18px 32px rgba(45,32,10,.24),
             0 40px 70px rgba(45,32,10,.24);
}
/* A capa ocupa a moldura inteira. O "transform:scale" vem do banco,
   por livro: ha capa que vem pequena dentro do proprio arquivo (as da
   loja virtual sao quadradas, com margem), e sem esse empurrao ela
   aparece menor que as vizinhas na prateleira. */
.livro__capa img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:center center;
}

/* ---------- o rodizio: sobe, troca de livro, desce ---------- */
.livro{ --sobe:16px; }
.livro.is-saindo{ opacity:0; transform:translateY(calc(var(--sobe) * -1)); }
.livro.is-saindo,
.livro.is-entrando{ transition:opacity .3s ease, transform .3s ease; }
.livro.is-entrando{ animation:livroEntra .42s cubic-bezier(.2,.8,.2,1); }
@keyframes livroEntra{
  from{ opacity:0; transform:translateY(var(--sobe)); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .livro.is-saindo, .livro.is-entrando{ animation:none; transition:none; opacity:1; transform:none; }
}

/* a coleção que ainda não tem foto de capa ganha uma lombada desenhada */
.livro__lombada{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  width:100%;height:100%;padding:14% 12%;
  background:linear-gradient(150deg,#3B2006 0%,#3F1700 46%,#3F1700 100%);
  border-left:6px solid rgba(0,0,0,.22);
}
.livro__lombada b{
  font-family:var(--font-display);font-weight:400;font-size:clamp(22px,calc(2.4vw + 2px),32px);
  line-height:1.05;color:#FFF9EE;letter-spacing:.06em;
}
.livro__lombada i{
  font-style:normal;font-size:clamp(12px,calc(1vw + 2px),14.5px);line-height:1.35;
  color:rgba(255,249,238,.82);
}
.livro__ano{
  font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#3F1700;background:rgba(255,160,1,.18);
  padding:3px 10px;border-radius:999px;
}
.livro__nome{
  font-family:var(--font-display);font-weight:400;font-size:16.5px;line-height:1.25;
  color:#3B2006;text-shadow:0 1px 10px rgba(255,255,255,.5);
  min-height:calc(14.5px * 1.25 * 2);   /* duas linhas, mesmo com nome curto */
}

/* ---- os mapas em destaque, na entrada, no lugar dos 3 quadrados ---- */
.mapasv{margin-bottom:64px}
.mapasv__cabeca{text-align:center;margin:0 0 46px}
.mapasv__titulo{
  margin:0 0 8px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,calc(3.6vw + 2px),42px);letter-spacing:.02em;text-transform:uppercase;
  color:#FFF6E6;text-shadow:0 2px 24px rgba(0,0,0,.55)
}
.mapasv__subtitulo{
  margin:0;font-size:18px;font-weight:400;color:rgba(243,234,206,.85);
  text-shadow:0 2px 12px rgba(8,18,14,.7)
}
.mapasv__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* o convite pra ver todos os mapas — grande, sozinho, logo abaixo
   da grade, pra ninguém precisar caçar o link dentro do texto */
.mapasv__vertodos{
  display:block;margin:28px auto 6px;text-align:center;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(24px,calc(3vw + 2px),34px);letter-spacing:.01em;
  color:#FED600;text-decoration:none;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
  transition:color .2s,transform .2s;
}
.mapasv__vertodos:hover{color:#fff;transform:translateY(-2px)}
.mapasv__aviso{
  margin:14px auto 0;max-width:640px;text-align:center;
  font-size:16.5px;line-height:1.6;color:#F3E6CE;
  text-shadow:0 2px 8px rgba(8,18,14,.75);
}
.mapasv__aviso a{color:#FED600;font-weight:800;text-decoration:none}
.mapasv__aviso a:hover{text-decoration:underline}

.mapac{
  position:relative;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);border-radius:20px;
  backdrop-filter:blur(8px);
  box-shadow:0 1px 1px rgba(45,32,10,.05),0 6px 12px rgba(45,32,10,.07),0 18px 34px rgba(45,32,10,.10);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s;
}
.mapac:hover{transform:translateY(-6px);background:#fff;
  box-shadow:0 2px 3px rgba(45,32,10,.07),0 14px 26px rgba(45,32,10,.12),0 34px 58px rgba(45,32,10,.16)}
.mapac__capa{
  position:relative;
  display:block;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,#3F1700,#3F1700);
}
.mapac__capa img{width:100%;height:100%;object-fit:cover;display:block}
/* a notinha do quanto a leitura vale, igual a dos cards do carrossel */

.mapac__corpo{padding:16px 18px 4px}
.mapac__corpo small{
  display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dp,#3F1700);margin-bottom:6px;
}
.mapac__corpo b{
  display:block;font-family:var(--font-display);font-weight:400;font-size:21px;line-height:1.22;
  color:#3B2006;
}
.mapac__baixar{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  margin:14px 18px 20px;font-size:15px;font-weight:800;letter-spacing:.02em;
  color:var(--ac-tt,#3B2006);background:var(--ac,#FFA001);
  padding:8px 15px;border-radius:999px;
  box-shadow:0 2px 10px rgba(255,160,1,.3);
  transition:background .18s,box-shadow .18s;
}
.mapac:hover .mapac__baixar{background:#FFA001;box-shadow:0 4px 16px rgba(255,160,1,.4)}

/* ---------- o rodizio da vitrine de mapas: sobe, troca, desce ---------- */
.mapasv__grade{ --sobe:14px; }
.mapasv__grade.is-saindo{ opacity:0; transform:translateY(calc(var(--sobe) * -1)); }
.mapasv__grade.is-saindo,
.mapasv__grade.is-entrando{ transition:opacity .3s ease, transform .3s ease; }
.mapasv__grade.is-entrando{ animation:mapasvEntra .42s cubic-bezier(.2,.8,.2,1); }
@keyframes mapasvEntra{
  from{ opacity:0; transform:translateY(var(--sobe)); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .mapasv__grade.is-saindo, .mapasv__grade.is-entrando{ animation:none; transition:none; opacity:1; transform:none; }
}

/* =========================================================
   20. SEÇÕES — cabeçalho, palco e vitrine editorial
   ========================================================= */
.panel--sec{padding:13vh 0}

.sec-top{
  position:relative;padding-left:26px;margin-bottom:38px;
  border-left:3px solid var(--gold);
}
/* o nome da seção é o título: era o menorzinho dos dois (12px, todo
   maiúsculo) e a explicação é que ficava grandona — invertido do que
   devia. Agora o nome manda, a explicação só ajuda. */
.sec-kicker{
  display:inline-block;font-family:var(--font-display);letter-spacing:-.01em;text-transform:none;
  font-size:clamp(26px,calc(3vw + 2px),38px);line-height:1.15;
  color:#3B2006;text-decoration:none;margin-bottom:10px;
  text-shadow:0 2px 16px rgba(255,255,255,.5);transition:color .16s;
}
.sec-kicker:hover{ color:var(--gold-dp); text-decoration:underline; }
.sec-linha{
  margin:0;font-family:var(--font-ui);font-weight:400;font-size:17px;line-height:1.6;
  color:#6E5A3C;max-width:44ch;text-shadow:none;
}

/* ---- palco: a notícia em destaque ---- */
.palco{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center;
  margin-bottom:46px;transition:opacity .18s;
}
/* a troca do destaque não apaga mais o quadro — ver script.js */

.palco__tag{
  display:inline-block;font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:#3B2006;padding:7px 14px;border-radius:999px;margin-bottom:16px;
}
.palco__txt h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(30px,calc(3.6vw + 2px),48px);
  line-height:1.08;margin:0 0 16px;color:#3B2006;text-shadow:0 2px 18px rgba(255,255,255,.5);
}
.palco__txt p{font-size:18.5px;line-height:1.65;color:#3B2006;margin:0 0 14px;max-width:46ch}
.palco__meta{font-size:14.5px;color:#8A7554;margin-bottom:24px;letter-spacing:.03em}

.palco__foto{position:relative;margin:0}
.palco__foto a{display:block;border-radius:20px;overflow:hidden;
  box-shadow:0 2px 3px rgba(45,32,10,.08),0 12px 22px rgba(45,32,10,.13),
             0 30px 54px rgba(45,32,10,.18),0 60px 100px rgba(45,32,10,.14)}
.palco__foto img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.palco__foto a:hover img{transform:scale(1.04)}
.palco__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:52px;height:52px;border:0;border-radius:14px;cursor:pointer;
  background:var(--gold);color:#3B2006;font-size:21px;font-weight:700;
  box-shadow:0 8px 22px rgba(63,23,0,.4);transition:.2s;
}
.palco__nav:hover{background:var(--gold-lt);transform:translateY(-50%) scale(1.06)}

.palco__nav--next{right:20px}

/* ---- vitrine: cards sem caixa ---- */
.roleta{position:relative}
.roleta__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 22px) / 3);
  gap:22px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:14px 2px 22px;scrollbar-width:none;
}
.roleta__track::-webkit-scrollbar{display:none}
.roleta__nav{
  position:absolute;top:34%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(63,23,0,.16);
  background:rgba(255,249,238,.96);cursor:pointer;font-size:22px;color:var(--earth);
  box-shadow:var(--luz);display:grid;place-items:center;transition:.2s;
}
.roleta__nav:hover{background:var(--gold);color:#3B2006;border-color:var(--gold)}
.roleta__nav[disabled]{opacity:0;pointer-events:none}
.roleta__nav--prev{left:-22px}
.roleta__nav--next{right:-22px}

.scard{scroll-snap-align:start}
.scard__btn{
  display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--font-ui);text-decoration:none;color:inherit;
}
.scard__thumb{
  display:block;position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 1px 2px rgba(45,32,10,.08),0 6px 12px rgba(45,32,10,.10),0 16px 30px rgba(45,32,10,.13);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s;
}
.scard__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .32s}
.scard__btn:hover .scard__thumb{transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(45,32,10,.1),0 14px 26px rgba(45,32,10,.16),0 34px 56px rgba(45,32,10,.18)}
.scard__btn:hover .scard__thumb img{transform:scale(1.07)}

/* o tick verde: este o professor ja leu e respondeu */

.scard__txt{display:block;margin-top:14px;padding-left:14px;border-left:2px solid rgba(63,23,0,.22);
  transition:border-color .25s}
.scard__txt b{
  display:block;font-family:var(--font-display);font-weight:400;font-size:19px;line-height:1.24;
  color:#3B2006;transition:color .25s;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.scard__btn:hover .scard__txt{border-left-color:var(--gold)}
.scard__btn:hover .scard__txt b{color:var(--gold-dp)}
.scard.is-active .scard__txt{border-left-color:var(--gold)}
.scard.is-active .scard__txt b{color:var(--gold-dp);font-style:italic}
.scard.is-active .scard__thumb{box-shadow:0 0 0 3px var(--gold),0 14px 28px rgba(63,23,0,.28)}
.scard.is-active .scard__thumb img{filter:saturate(1.08)}

.scard-vazio{
  padding:52px;text-align:center;color:#8A7554;font-size:17px;
  background:rgba(255,249,238,.9);border:2px dashed rgba(63,23,0,.2);border-radius:var(--r);
}
.scard-vazio a{color:var(--gold-dp);font-weight:700}

@media (max-width:1180px){
  .roleta__track{grid-auto-columns:calc((100% - 3 * 22px) / 4)}
  .roleta__nav--prev{left:-10px}
  .roleta__nav--next{right:-10px}
}
@media (max-width:980px){
  .mapasv__grade{grid-template-columns:1fr}
  .palco{grid-template-columns:1fr}
  
  .palco__nav--next{right:12px}
  .roleta__track{grid-auto-columns:calc((100% - 2 * 22px) / 3)}
}
@media (max-width:720px){
  .panel--entrada{padding-top:17vh}
  .roleta__track{grid-auto-columns:70%}
  
}

/* =========================================================
   TIPOGRAFIA — Montserrat (arquivos locais em fontes/)
   Licença SIL OFL · fontes/MONTSERRAT-LICENSE.txt
   ========================================================= */
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-700-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-800-italic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/montserrat-900-italic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap}

:root{
  --font-display:"Montserrat","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-ui:"Montserrat","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

/* a Montserrat é geométrica: títulos pedem mais peso e menos espaço entre letras */
h1,.pg-hero h1,.pg-erro h1{font-weight:800;letter-spacing:-.03em}
h2,.palco__txt h2,.sec-linha,.pg-sub{
  font-weight:700;letter-spacing:-.022em;
}
h3,.scard__txt b,.card h3,.pg-obra h3,.pg-links h3,.foot strong,.pg-marca span{
  font-weight:700;letter-spacing:-.015em;
}

.palco__tag,.sec-kicker,.pg-chip{font-weight:800}
body{font-weight:400;letter-spacing:-.004em}

/* =========================================================
   21 — CANTOS QUADRADOS
   Tom do site: aventureiro, mas de régua na mão.
   Nada de canto arredondado — só o céu continua redondo.
   ========================================================= */
:root{--r:0}
*,*::before,*::after{border-radius:0 !important}

/* bloco dos sorteios na Minha Jornada */
.sorteio{
  margin:20px 0;padding:16px 18px;
  background:rgba(255,160,1,.12);
  border-left:4px solid var(--gold-dp);
}
.sorteio b{display:block;font-size:16px;margin-bottom:6px;color:var(--earth)}
.sorteio p{margin:0;font-size:15.5px;line-height:1.6;color:#3B2006}

/* =========================================================
   22 — CENÁRIO REAL
   Fora o desenho infantil: cada seção é uma fotografia de
   verdade sob um véu de cor fixo. A cor não muda dentro da
   seção; ela troca quando a seção troca.
   ========================================================= */
#particles{display:none !important}

.scene{transition:opacity .6s ease}

.scene__veil{position:absolute;inset:0}

/* a cor de cada seção — estática enquanto a seção está no ar */
.scene--sky        .scene__veil{background:linear-gradient(180deg,rgba(24,58,86,.30) 0%,rgba(78,140,180,.18) 45%,rgba(255,249,238,.86) 100%)}
.scene--mundo      .scene__veil{background:linear-gradient(175deg,rgba(9,44,28,.82) 0%,rgba(16,64,40,.70) 45%,rgba(6,30,20,.88) 100%)}
.scene--cinerama   .scene__veil{background:linear-gradient(175deg,rgba(48,14,6,.80) 0%,rgba(96,34,12,.62) 45%,rgba(28,10,4,.90) 100%)}
.scene--geodigital .scene__veil{background:linear-gradient(175deg,rgba(6,26,48,.84) 0%,rgba(12,52,88,.68) 45%,rgba(4,16,32,.90) 100%)}
.scene--aula       .scene__veil{background:linear-gradient(175deg,rgba(58,34,4,.80) 0%,rgba(63,23,0,.62) 45%,rgba(34,20,4,.90) 100%)}
.scene--mapas      .scene__veil{background:linear-gradient(175deg,rgba(6,42,44,.82) 0%,rgba(12,74,74,.64) 45%,rgba(4,26,28,.90) 100%)}

.vignette{background:radial-gradient(130% 100% at 50% 38%,transparent 48%,rgba(0,0,0,.42) 100%)}

/* ---------------------------------------------------------
   Texto claro sobre a fotografia
   --------------------------------------------------------- */
.panel--sec{color:#F3EADA;background:transparent !important;box-shadow:none !important}
.panel:not(.panel--hero):not(.panel--entrada) .wrap::before{display:none !important}

.panel--sec h2,.palco__txt h2{color:#FFF6E6}
.palco__txt p{color:rgba(243,234,218,.82)}

/* cartões editoriais sobre a foto */
.scard__txt b,.scard__txt strong{color:#FFF6E6}
.scard__txt,.scard__txt p{color:rgba(243,234,218,.7)}
.scard__btn{border-top:1px solid rgba(254,214,0,.26)}
.scard__btn:hover{border-top-color:#FED600}

.palco__tag{background:#FED600;color:#3B2006}
.palco__meta{color:rgba(243,234,218,.6)}
.palco__foto a{box-shadow:0 30px 60px rgba(0,0,0,.45)}
.roleta__nav,.palco__nav button{
  background:rgba(255,249,238,.10);border:1px solid rgba(254,214,0,.3);color:#FED600;
}
.roleta__nav:hover,.palco__nav button:hover{background:#FED600;color:#3B2006}

/* painéis internos da jornada */

.sorteio{background:rgba(255,160,1,.16)}
.sorteio b{color:#FED600}
.sorteio p{color:rgba(243,234,218,.82)}

/* a entrada continua clara: é céu de verdade */
.panel--entrada{color:#3B2006}

/* a barra do topo flutua por cima do céu (de propósito -- é
   translúcida sobre o cenário) e normalmente tem folga de sobra
   antes do primeiro texto. Mas quando ela precisa crescer em
   altura (o menu desceu pra própria linha porque não coube do
   lado -- ver topo.css seção 10 e topo.js) essa folga podia
   encolher a ponto do texto nascer embaixo da barra, escondido.
   O topo.js escreve a altura de verdade dela nesta variável, a
   cada vez que mede a tela; a folga mínima nunca fica menor que
   a barra + um respiro, não importa a altura da janela. */
.panel--entrada{ padding-top:max(18vh, calc(var(--geo-altura-topo, 84px) + 40px)); }

/* texto claro: cabeçalhos das seções sobre a fotografia */
.panel--sec .sec-kicker{color:#FED600}
.panel--sec .sec-linha{color:#FFF6E6;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.panel--sec .sec-top{border-left-color:#FED600}
.panel--sec .palco__txt h2,.panel--sec .palco__txt p{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.panel--sec .palco__txt h2{color:#FFF6E6}
.panel--sec .palco__txt p{color:rgba(243,234,218,.85)}

.scard-vazio{background:rgba(10,8,4,.5) !important;border:1px dashed rgba(254,214,0,.3) !important;color:rgba(243,234,218,.8)}
.scard-vazio a{color:#FED600 !important}

/* =========================================================
   23 — RODAPÉ
   ========================================================= */
.foot{
  position:relative;z-index:1;
  background:linear-gradient(180deg,#1B1206 0%,#120C04 100%);
  color:#F3EADA;padding:9vh 0 34px;border-top:3px solid var(--gold-dp);
}
.foot__topo{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,64px);align-items:start;
}
.foot__brand img{display:block;height:auto;margin-bottom:18px;opacity:.95}
.foot__brand p{
  margin:0 0 24px;font-size:16px;line-height:1.7;
  color:rgba(243,234,218,.72);max-width:44ch;
}

.foot__soc{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.foot__soc a[href=""]{display:none}          /* some até você preencher o endereço */
.foot__soc a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;text-decoration:none;
  background:rgba(255,249,238,.07);border:1px solid rgba(254,214,0,.24);
  color:#F3EADA;font-size:14.5px;font-weight:700;letter-spacing:.02em;
  transition:.2s;
}
.foot__soc a:hover{background:#FED600;border-color:#FED600;color:#3B2006}
.foot__soc svg{width:17px;height:17px;fill:currentColor;flex:none}

.foot__col h3{
  font-size:13.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#FED600;margin:0 0 16px;
}
.foot__col a{
  display:block;padding:6px 0;text-decoration:none;font-size:16px;
  color:rgba(243,234,218,.76);transition:.18s;
}
.foot__col a:hover{color:#FED600;transform:translateX(3px)}

.foot__base{
  margin-top:7vh;padding-top:22px;border-top:1px solid rgba(254,214,0,.18);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.foot__base small{font-size:14.5px;color:rgba(243,234,218,.5)}

@media (max-width:900px){
  .foot__topo{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:span 2}
}
@media (max-width:560px){
  .foot__topo{grid-template-columns:1fr}
  .foot__brand{grid-column:span 1}
}

/* =========================================================
   24 — A ROLETA NÃO CORTA MAIS A PRIMEIRA
   O track rola com overflow, então a borda do primeiro card
   ficava raspando na parede da div. Agora ele tem folga dos
   dois lados, compensada por margem negativa: o alinhamento
   com o texto acima continua igual.
   ========================================================= */
.roleta{padding-inline:0}
.roleta__track{
  padding:16px 10px 24px;
  margin-inline:-10px;
  scroll-padding-inline:10px;
  overflow-y:visible;
}
.scard{scroll-snap-align:start;padding:2px}
.scard__btn{outline-offset:2px}

/* barra do topo: tudo em uma linha só, agora que tem o botão Entrar */
.topbar{gap:16px}
.nav{flex-wrap:nowrap}
.nav a{font-size:15.5px;padding:8px 9px}

@media (max-width:1240px){
  .nav a{font-size:15px;padding:8px 7px}
}

/* as setas da roleta saem de cima dos cards */
.roleta__nav--prev{left:-30px}
.roleta__nav--next{right:-30px}
@media (max-width:1320px){
  .roleta__nav--prev{left:-14px}
  .roleta__nav--next{right:-14px}
}

/* =========================================================
   25 — A BARRA DO TOPO SOLTA
   Sem a barra travada, nada de retângulo branco: o HUD fica
   transparente e a letra clara, que embaixo é céu.
   ========================================================= */
.topbar:not(.is-stuck) .nav a{
  color:#FFF6E6;
  text-shadow:0 1px 3px rgba(20,40,60,.55),0 2px 14px rgba(20,40,60,.35);
}
.topbar:not(.is-stuck) .nav a:hover{background:rgba(0,0,0,.05)}
.topbar:not(.is-stuck) .nav a.is-active{
  background:var(--gold);color:#3B2006;text-shadow:none;
}

.topbar:not(.is-stuck) .burger i{background:#FFF6E6;box-shadow:0 1px 3px rgba(20,40,60,.5)}

/* =========================================================
   26 — REDES: todas aparecem, com link ou sem
   ========================================================= */
.foot__soc a[href=""]{display:inline-flex}
.foot__soc a[href=""]{
  opacity:.4;cursor:default;pointer-events:none;
  border-style:dashed;
}

/* a linha dos autores sobre o céu: clara, não marrom */
.panel--entrada .eyebrow{
  color:#FFF6E6;
  text-shadow:0 1px 4px rgba(20,45,70,.55),0 2px 18px rgba(20,45,70,.4);
}

/* =========================================================
   27 — RODAPÉ: redes em uma linha, logo centralizada
   ========================================================= */
.foot__brand{text-align:center}
.foot__brand img{margin:0 auto 18px}
.foot__brand p{margin-left:auto;margin-right:auto;max-width:48ch}

.foot__soc{
  display:flex;flex-wrap:nowrap;justify-content:center;gap:8px;
}
.foot__soc li{flex:1 1 0;min-width:0}
.foot__soc a{
  width:100%;justify-content:center;padding:10px 6px;gap:7px;
  font-size:13.5px;letter-spacing:0;
}
.foot__soc a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot__soc svg{width:16px;height:16px}

/* com as redes em linha, a marca ocupa a faixa inteira */
.foot__topo{grid-template-columns:1fr 1fr 1fr}
.foot__brand{grid-column:1 / -1;margin-bottom:6vh;padding-bottom:5vh;
  border-bottom:1px solid rgba(254,214,0,.16)}

@media (max-width:760px){
  .foot__soc{flex-wrap:wrap}
  .foot__soc li{flex:1 1 30%}
}
@media (max-width:900px){
  .foot__topo{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot__topo{grid-template-columns:1fr}
  .foot__brand{grid-column:1}
  .foot__soc a span{display:none}
  .foot__soc a{padding:12px 0}
}

/* =========================================================
   28 — O PALCO NÃO PULA MAIS
   Altura reservada e texto aparado: trocar o destaque não
   empurra mais o site inteiro para baixo.
   ========================================================= */
.palco{
  align-items:stretch;
  min-height:clamp(360px,44vh,500px);
}
.palco__txt{
  display:flex;flex-direction:column;justify-content:center;
  min-height:0;
}
.palco__txt h2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.16em;
}
.palco__txt p{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;min-height:6.6em;margin-bottom:10px;
}
.palco__saiba{
  display:none;font-size:15.5px;font-weight:700;color:#FED600;
  text-decoration:none;margin:0 0 12px;
}
.palco__saiba:hover{text-decoration:underline}
.palco__txt.is-cortado .palco__saiba{display:inline-block}
.palco__meta{margin-bottom:20px}
.palco__txt .btn{align-self:flex-start}

/* a foto tem sempre a mesma caixa */
.palco__foto{display:flex;align-items:center}
.palco__foto a{
  width:100%;aspect-ratio:4/3;display:block;overflow:hidden;
}
.palco__foto img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
  .palco{min-height:0}
  .palco__txt p{min-height:0;-webkit-line-clamp:5}
  .palco__txt h2{min-height:0}
}

/* a marca não encolhe quando o menu cresce */
.brand{flex:none}
.brand__logo{width:auto}
.nav{min-width:0}

/* rodapé: menos ar entre a marca e as colunas */
.foot__brand{margin-bottom:3.5vh;padding-bottom:3.5vh}
.foot__topo{align-items:start}
.foot{padding:7vh 0 30px}
.foot__base{margin-top:5vh}

/* com 7 itens no menu, o HUD vira só o anel de progresso nas telas médias */

@media (max-width:1180px){
  .nav a{font-size:14.5px;padding:8px 6px}
}

/* =========================================================
   30 — DEIXA O VÍDEO APARECER
   A névoa que fazia a passagem para a próxima seção estava
   cobrindo a mata inteira. Agora ela é só um fio no topo,
   para o menu continuar legível, e a emenda em creme só
   acontece no finalzinho da tela.
   ========================================================= */
.scene--sky .scene__veil{
  background:
    linear-gradient(180deg,
      rgba(16,30,42,.42) 0%,
      rgba(16,30,42,.12) 14%,
      rgba(16,30,42,0)   30%,
      rgba(255,249,238,0)   78%,
      rgba(255,249,238,.55) 92%,
      rgba(255,249,238,.95) 100%) !important;
}
.scene--sky ~ .vignette,
.scene[data-scene="0"] + .scene__veil{opacity:.5}

/* =========================================================
   33 · quadros que param quietos
   O palco trocava de altura a cada clique e o site dava um
   pulo. Aqui a altura fica travada: o texto é cortado no
   limite e a foto tem proporção fixa.
   ========================================================= */
.palco{
  align-items:center;
  contain:layout paint;
}
.palco__txt{ align-self:center; }

/* o título vive em no máximo três linhas */
.palco__txt h2{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(3 * 1.08em);
}
/* e o resumo, em quatro */
.palco__txt p{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(4 * 1.65em);
}
.palco__foto{ align-self:center; }
.palco__foto a{ display:block; }

/* a fita de cards: largura travada, sem pulo ao clicar */
.roleta__track{
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  contain:layout paint;
}
.scard{
  scroll-snap-align:start;
  min-width:0;          /* o grid não deixa o card esticar sozinho */
}
.scard__txt b{ min-height:calc(3 * 1.24em); }

/* o hover levanta a miniatura, nunca o card inteiro:
   assim nada empurra o vizinho */
.scard__btn{ will-change:auto; }
.scard__thumb{ will-change:transform; }

/* ---- respiro entre a prateleira e o conteúdo ---- */
.panel--entrada .mapasv{ margin-top:12px; }

@media (max-width:900px){
  .prateleira{ grid-template-columns:repeat(3,1fr); margin-bottom:64px; }
  .prateleira .livro:nth-child(4),
  .prateleira .livro:nth-child(5){ grid-column:span 1; }
}
@media (max-width:620px){
  /* um teto de largura pra prateleira não esticar os livros até
     ficarem enormes em telas mais largas (tablet em pé, celular
     grande deitado) — dois por linha, do tamanho de sempre */
  .prateleira{ grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:52px; max-width:340px; }
  .atalhos{ display:none; }

  /* com 5 livros e 2 colunas, o último sempre sobra sozinho na
     última linha — em vez de ficar grudado na coluna da esquerda,
     centraliza, do mesmo tamanho dos outros */
  .prateleira .livro:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center; width:calc(50% - 8px);
  }
}

/* ---- o topo com os atalhos ---- */
@media (max-width:1180px){
  .atalho{ padding:7px 12px; font-size:14.5px; }
  .nav a{ padding:8px 10px; font-size:15px; }
}
@media (max-width:980px){
  .atalhos{ order:3; }
}

/* =========================================================
   35 · O VÍDEO DA ABERTURA VOLTA A APARECER
   A faixa creme do painel de entrada começava quase no alto
   da página e cobria a mata inteira — só passava uma fumaça.
   Agora o creme só entra depois da prateleira de livros: a
   abertura é o vídeo, e a leitura começa quando ele acaba.
   ========================================================= */
.panel--entrada{
  background:linear-gradient(180deg,
    rgba(255,249,238,0)   0%,
    rgba(255,249,238,0)   39%,   /* a prateleira vai até 38%: até aqui é vídeo puro */
    rgba(255,249,238,.5)  43%,
    #FFF9EE               50%,   /* os três cartões começam em 45% e pedem fundo */
    #F8F0DF              100%);
}

/* Sobre a mata, a letra escura sumia. Nesta faixa ela é clara,
   com sombra — e volta a ser escura quando o creme chega. */
.panel--entrada .eyebrow{
  color:#FFF6E6;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 3px 18px rgba(0,0,0,.45);
}
.livro__nome{
  color:#FFF6E6;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 3px 16px rgba(0,0,0,.5);
}
.livro__ano{
  color:#3B2006;
  background:rgba(254,214,0,.94);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.livro:hover .livro__ano{ background:#FED600; }

/* a sombra dos livros ganha corpo contra a mata */
.livro__capa{
  box-shadow:0 3px 6px rgba(0,0,0,.34),0 16px 30px rgba(0,0,0,.38),
             0 34px 60px rgba(0,0,0,.34);
}
.livro:hover .livro__capa{
  box-shadow:0 4px 9px rgba(0,0,0,.4),0 24px 44px rgba(0,0,0,.45),
             0 50px 88px rgba(0,0,0,.4);
}

/* A foto de reserva fica embaixo enquanto o vídeo não carrega.
   Assim que ele roda, ela some — senão lava a imagem toda. */

.scene--sky .vignette{
  background:radial-gradient(130% 100% at 50% 34%,transparent 58%,rgba(0,0,0,.34) 100%);
}

/* e um véu escuro e leve por baixo dos livros, só para a floresta
   ganhar profundidade — sem cobrir o movimento */
.scene--sky .scene__veil{
  background:
    linear-gradient(180deg,
      rgba(10,24,18,.5)  0%,
      rgba(10,24,18,.3) 16%,
      rgba(10,24,18,.2) 34%,
      rgba(10,24,18,.12) 52%,
      rgba(255,249,238,0)   74%,
      rgba(255,249,238,.5) 92%,
      rgba(255,249,238,.92) 100%) !important;
}

/* =========================================================
   36 · O TOPO SAI DA FRENTE DO VÍDEO
   A faixa creme cortava a abertura ao meio. Agora o topo
   flutua sobre o vídeo, sem fundo, e só ganha um véu bem
   leve depois que a pessoa rola — para o menu continuar
   legível sobre o conteúdo claro.
   ========================================================= */
.topbar{ background:transparent; box-shadow:none; }
.topbar.is-stuck{
  background:rgba(255,253,248,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 rgba(63,23,0,.1);
}

/* sobre o vídeo, a letra do menu é clara e tem sombra */
.topbar:not(.is-stuck) .nav a,
.topbar:not(.is-stuck) .atalho{
  color:#FFF6E6;
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 12px rgba(0,0,0,.4);
}
.topbar:not(.is-stuck) .atalho{
  border-color:rgba(255,246,230,.45);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
}
.topbar:not(.is-stuck) .atalho:hover{
  background:#FFA001; border-color:#FFA001; color:#3B2006; text-shadow:none;
}
.topbar:not(.is-stuck) .nav a:hover{ background:rgba(0,0,0,.05); }
.topbar:not(.is-stuck) .nav a.is-active{
  background:var(--gold); color:#3B2006; text-shadow:none;
}

/* =========================================================
   37 · O rodapé da página inicial no tema claro
   ========================================================= */
.foot{
  background:var(--pp-2) !important;
  color:var(--tt-3) !important;
  border-top:1px solid var(--ln);
}
.foot strong{ color:var(--ac-dp) !important; }
.foot p{ color:var(--tt-3) !important; }
.foot nav a{ color:var(--tt-2) !important; opacity:1; }
.foot nav a:hover{ color:var(--ac-dp) !important; }
.foot small{ color:var(--tt-4) !important; opacity:1; }

.foot .redes a{ border-color:var(--ln) !important; color:var(--tt-2) !important; }
.foot .redes a:hover{ background:var(--ac) !important; color:var(--ac-tt) !important; border-color:var(--ac) !important; }

/* a classe de verdade no HTML é .foot__soc, não .foot .redes — sem isto os
   botões de rede social ficavam com a cor do tema escuro (fundo quase
   transparente, letra clara) em cima do rodapé agora claro: texto sumindo */
.foot__soc a{
  background:var(--pp-2) !important;
  border-color:var(--ln) !important;
  color:var(--tt-2) !important;
}
.foot__soc a:hover{
  background:var(--ac) !important;
  border-color:var(--ac) !important;
  color:var(--ac-tt) !important;
}
.foot__soc a[href=""]{ color:var(--tt-4) !important; }

/* =========================================================
   37 · A ABERTURA É SÓ O VÍDEO. PONTO.
   Duas coisas pintavam de bege por cima da mata e tinham
   que sair:
     1) o halo em forma de folha A4 — era o .wrap::before,
        um gradiente creme desfocado que servia para dar
        legibilidade e virou uma mancha no meio da tela;
     2) a faixa creme do próprio painel de entrada, que
        terminava numa barra salmão no pé da página.
   Agora o painel de entrada não pinta nada. O fundo é o
   vídeo, do topo ao fim da seção, e quem precisa de contraste
   resolve na própria letra.
   ========================================================= */
.panel--entrada{ background:none !important; }
.panel--entrada .wrap::before{ display:none !important; content:none !important; }

/* respiro entre a linha dos autores e a prateleira de livros */
.panel--entrada .eyebrow{ margin:0 0 clamp(52px,9vh,116px) !important; }

/* respiro entre a prateleira de livros e o título dos mapas */
.panel--entrada .mapasv{ margin-top:clamp(72px,12vh,160px) !important; }

/* O véu da cena do céu não põe creme nenhum: ele existe só para o
   menu continuar legível sobre a mata. */
.scene--sky .scene__veil{
  background:linear-gradient(180deg,
    rgba(10,24,18,.46)  0%,
    rgba(10,24,18,.24) 14%,
    rgba(10,24,18,.10) 34%,
    rgba(10,24,18,.04) 62%,
    rgba(10,24,18,0)  100%) !important;
}

/* A mata chega lavada do drone: um pouco de cor e contraste
   devolvem o verde, sem afundar a imagem no preto. */

.scene--sky .vignette{
  background:radial-gradient(125% 96% at 50% 36%,
    rgba(0,0,0,0) 42%, rgba(8,18,14,.22) 76%, rgba(8,18,14,.4) 100%) !important;
}

/* =========================================================
   38 · O CELULAR
   O topo estava com a logo, o anel e o hambúrguer amontoados
   à esquerda e metade da barra vazia, sem fundo, por cima do
   vídeo. Aqui a barra vira uma linha só, bem distribuída, com
   um fundo que se lê em qualquer cena — e a gaveta do menu
   ganha desenho de gaveta.
   ========================================================= */
@media (max-width:900px){

  /* ---- a barra ---- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding:8px 14px; min-height:60px; height:auto;
    background:rgba(14,26,20,.46);
    -webkit-backdrop-filter:saturate(1.2) blur(12px);
    backdrop-filter:saturate(1.2) blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .topbar.is-stuck{
    background:rgba(255,253,248,.97);
    border-bottom-color:rgba(63,23,0,.14);
    box-shadow:0 6px 20px rgba(45,32,10,.14);
  }

  .brand{ flex:none; margin:0; }
  .brand__logo{ width:auto; height:32px; }
  .topbar .atalhos{ display:none; }

  /* o hambúrguer vira um alvo de dedo de verdade */
  .burger{
    display:flex !important; flex:none;
    width:42px; height:42px; padding:0;
    align-items:center; justify-content:center; gap:5px;
    border-radius:12px; border:1px solid rgba(255,249,238,.34);
    background:rgba(255,249,238,.12);
  }
  .topbar.is-stuck .burger{
    border-color:rgba(63,23,0,.2); background:var(--paper-2);
  }
  .burger i{ width:19px; }

  /* ---- a gaveta ---- */
  .nav{
    position:fixed; left:10px; right:10px; top:68px; bottom:auto;
    max-height:min(76vh, 620px); overflow:auto; -webkit-overflow-scrolling:touch;
    background:#FFFDF8; border:1px solid rgba(63,23,0,.14);
    border-radius:20px; box-shadow:0 26px 60px rgba(40,26,8,.36);
    padding:10px; display:none; flex-direction:column; gap:2px;
  }
  .nav.is-open{ display:flex; }
  .nav > a,
  .nav .mn > a{
    display:block; padding:15px 16px; border-radius:13px;
    font-size:17.5px; font-weight:700; color:#3B2006 !important;
    text-shadow:none !important; background:none;
  }
  .nav > a:active,
  .nav .mn > a:active{ background:var(--paper-2); }
  .nav .mn{ display:block; }
  .nav .mn__seta{
    float:right; font-size:16px; opacity:.5;
    padding:0 4px; margin:0;
  }
}

/* ---- a abertura no celular ---- */
@media (max-width:760px){
  .panel--entrada{ padding:104px 0 64px; }
  .panel--entrada .eyebrow{
    margin:0 0 26px !important;
    font-size:12.5px; letter-spacing:.16em; line-height:1.7;
  }
  .prateleira{ gap:14px; margin-bottom:0; }
  .panel--entrada .mapasv{ margin-top:52px !important; }
  .mapasv__cabeca{ margin-bottom:18px; }
  .mapasv__grade{ gap:14px; grid-template-columns:1fr; }
  .mapasv{ margin-bottom:44px; }
  
  
}

/* ---- as seções de conteúdo no celular ---- */
@media (max-width:760px){
  .panel{ padding:64px 0; }
  .wrap{ padding-left:16px; padding-right:16px; }
  .palco{ grid-template-columns:1fr !important; gap:18px; }
  .palco__foto{ order:-1; }
  .palco__txt h2{ font-size:clamp(25px,calc(6.4vw + 2px),32px); }
  .roleta__nav{ display:none; }
  .roleta__track{
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .roleta__track::-webkit-scrollbar{ display:none; }
  .scard{ scroll-snap-align:start; min-width:62vw; }
  
  
  
  
}

/* nada de rolar para o lado sem querer */
@media (max-width:900px){
  html, body{ max-width:100%; overflow-x:hidden; }
  img, video{ max-width:100%; }
}

/* um traço dourado só do lado de fora da foto — não a moldura
   inteira em volta (isso ficava pesado e, na foto menor do
   Cinerama, feio). É a mesma ideia de destaque em dourado, só
   que como uma lombada de livro, não uma moldura de quadro */
.panel--sec .palco__foto{ position:relative; }
.panel--sec .palco__foto::before{
  content:'';position:absolute;top:6px;bottom:6px;width:6px;z-index:2;pointer-events:none;
  background:var(--gold,#FFA001);border-radius:4px;
}
.panel--sec:not([data-season="2"]):not([data-season="4"]) .palco__foto::before{ right:-14px; }
.panel--sec[data-season="2"] .palco__foto::before,
.panel--sec[data-season="4"] .palco__foto::before{ left:-14px; }

/* alterna o lado da foto a cada seção: Mundo (foto à direita,
   padrão) · Cinerama (foto à esquerda) · GeoDigital (foto à
   direita) · Aconteceu?Virou aula (foto à esquerda) · Mapas
   (foto à direita, como sempre foi). Quando a foto vai pra
   esquerda, a coluna dela também vira a maior — senão ela some
   pequena na coluna que sobrou do texto */
.panel--sec[data-season="2"] .palco__foto,
.panel--sec[data-season="4"] .palco__foto{ order:-1; }
.panel--sec[data-season="2"] .palco,
.panel--sec[data-season="4"] .palco{ grid-template-columns:1.08fr .92fr; }

/* a foto de fundo da seção de mapas agora é o mapa-múndi antigo
   que veio pronto — trocando a cena, não o mecanismo */

.scene--mapas .scene__veil{
  background:linear-gradient(175deg,rgba(52,34,8,.58) 0%,rgba(90,62,20,.34) 45%,rgba(24,14,2,.82) 100%) !important;
}

/* =========================================================
   40 · REVISAO SET/2026 — fundo preto, secoes em blocos de cor
   A partir daqui a pagina deixa de usar fotos de fundo por
   secao (exceto Mapas, que mantem o mapa-mundi antigo, e o
   video de abertura, que continua igual). Mundo Geografico
   fica branco cheio, Cinerama fica metade preto/metade
   amarelo (amarelo a esquerda), e Geodigital/Aconteceu-virou-
   aula/Minha Jornada ficam pretas — o preto e o padrao do site
   agora.
   ========================================================= */

body{ background:#000; }

.scene--aula .scene__veil{ background:#000 !important; }

/* o branco do Mundo Geografico e' do proprio bloco da secao (rola
   junto com a pagina), nao do fundo fixo: assim aparece a divisa
   entre o preto e o branco ao rolar, sem fade nessa passagem */
.scene--mundo .scene__veil{ background:#000 !important; }
.panel--sec[data-season="1"], .panel--sec[data-season="4"]{ background:#fff !important; }
.panel--sec[data-season="1"], .panel--sec[data-season="4"]{ color:#3B2006 !important; }
.panel--sec[data-season="1"] h2, .panel--sec[data-season="4"] h2,
.panel--sec[data-season="1"] .palco__txt h2, .panel--sec[data-season="4"] .palco__txt h2{ color:#3B2006 !important; }

.panel--sec[data-season="1"] .palco__txt p, .panel--sec[data-season="4"] .palco__txt p{ color:#3B2006 !important; }

.panel--sec[data-season="1"] .scard__txt b, .panel--sec[data-season="4"] .scard__txt b,
.panel--sec[data-season="1"] .scard__txt strong, .panel--sec[data-season="4"] .scard__txt strong{ color:#3B2006 !important; }
.panel--sec[data-season="1"] .scard__txt, .panel--sec[data-season="4"] .scard__txt,
.panel--sec[data-season="1"] .scard__txt p, .panel--sec[data-season="4"] .scard__txt p{ color:#5C4A30 !important; }
.panel--sec[data-season="1"] .palco__meta, .panel--sec[data-season="4"] .palco__meta{ color:#8A7554 !important; }
.panel--sec[data-season="1"] .palco__tag, .panel--sec[data-season="4"] .palco__tag{ background:#FFA001 !important; color:#fff !important; }

/* Cinerama: metade amarela (esquerda) metade preta (direita) —
   o amarelo fica a esquerda pra nao se confundir com os botoes
   e textos amarelos, que ficam mais a direita/centro */
.scene--cinerama .scene__veil{
  background:linear-gradient(90deg,#FFA001 0%,#FFA001 50%,#000 50%,#000 100%) !important;
}

/* =========================================================
   41 · Barra do topo: letra branca, fundo preto assim que rola
   O botao amarelo "MAPAS PARA COLORIR" fica de fora — a letra
   dele ja e branca por conta propria.
   ========================================================= */
.topbar.is-stuck{
  background:#E6E6E6 !important;
  backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) !important;
}
.topbar .nav a,
.topbar .atalho{
  color:#fff !important;
  text-shadow:none !important;
}
.topbar .atalho{
  border-color:rgba(255,255,255,.4) !important;
  background:rgba(255,255,255,.08) !important;
}
.topbar .atalho:hover{ background:#FFA001 !important; border-color:#FFA001 !important; color:#3B2006 !important; }
.topbar .nav a:hover{ background:rgba(0,0,0,.05) !important; }
.topbar .nav a.is-active{ background:#FFA001 !important; color:#3B2006 !important; }

.topbar .burger i{ background:#fff !important; }
.topbar .busca__info{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.4) !important; color:#fff !important; }
.topbar .busca__campo{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.3) !important; }
.topbar .busca__input{ color:#fff !important; }
.topbar .busca__input::placeholder{ color:rgba(255,255,255,.6) !important; }

/* =========================================================
   42 · Rodape amarelo, letra marrom, titulos das colunas branco
   ========================================================= */
.foot{
  background:#FFA001 !important;
  color:#3B2006 !important;
  border-top:none !important;
}
.foot strong{ color:#3B2006 !important; }
.foot p{ color:#3B2006 !important; }
.foot h3{ color:#fff !important; }
.foot nav a{ color:#3B2006 !important; opacity:1 !important; }
.foot nav a:hover{ color:#3B2006 !important; text-decoration:underline; }
.foot small{ color:#3B2006 !important; opacity:.85 !important; }
.foot__soc a{ background:#fff !important; border:1px solid #fff !important; color:#3B2006 !important; box-shadow:0 2px 8px rgba(74,46,6,.12); }
.foot__soc a:hover{ background:#3B2006 !important; border-color:#3B2006 !important; color:#FFA001 !important; }
/* sem endereco cadastrado no painel: aparece, mas apagado e sem clique */
.foot__soc a.is-vazio{
  opacity:.55; cursor:default; pointer-events:none; box-shadow:none;
  background:rgba(255,255,255,.55) !important; border-style:dashed !important; border-color:rgba(74,46,6,.3) !important;
}
.foot__base{ border-top:1px solid rgba(74,46,6,.25) !important; }

/* texto marcado/selecionado com o mouse: letra preta, em
   qualquer secao do site (inclusive as escuras) */
::selection{ background:#FFA001; color:#111; }

/* =========================================================
   44 · Sem video de abertura, sem transicao entre secoes
   A capa perdeu o video sobrevoando a mata (tirado do HTML) —
   fica so o preto de fundo. E a troca de uma secao pra outra
   deixa de ter fade: e so a pagina estatica mesmo, sem
   transicao nenhuma.
   ========================================================= */
.scene--sky .scene__veil{ background:#000 !important; }
/* =========================================================
   45 · Mundo Geografico (fundo branco): faltava a linha do
   cabecalho da secao (".sec-linha") e sobrou uma sombra escura
   atras do titulo/resumo em destaque, que ficava feia e dificil
   de ler em cima do branco — a sombra era pensada pra foto de
   fundo escura, que essa secao nao tem mais.
   ========================================================= */
.panel--sec[data-season="1"] .sec-linha, .panel--sec[data-season="4"] .sec-linha{
  color:#3B2006 !important;
  text-shadow:none !important;
}
.panel--sec[data-season="1"] .palco__txt h2, .panel--sec[data-season="4"] .palco__txt h2,
.panel--sec[data-season="1"] .palco__txt p, .panel--sec[data-season="4"] .palco__txt p{
  text-shadow:none !important;
}

/* =========================================================
   46 · Mapas para Colorir mantem o fade da foto de fundo
   As outras secoes trocam na hora (sem transicao, regra 44);
   so os Mapas continuam com o fade suave de entrada/saida,
   que ficou bom.
   ========================================================= */
.scene--mapas{ transition:opacity .6s ease !important; }

/* =========================================================
   48 · GeoDigital com foto de fundo (o globo digital azul)
   Um veu escuro por cima, leve, so pra letra clara continuar
   legivel sobre as partes mais brilhantes do globo.
   ========================================================= */

.scene--geodigital .scene__veil{
  background:linear-gradient(175deg,rgba(2,8,20,.55) 0%,rgba(2,10,26,.35) 45%,rgba(0,4,12,.7) 100%) !important;
}

/* =========================================================
   52 · Aconteceu? Virou aula tambem com fundo branco
   Mesmo esquema do Mundo Geografico: o branco e' do proprio
   bloco da secao (as regras dele acima valem para as duas,
   data-season 1 e 4). O fundo fixo por tras fica preto.
   O aviso de "nenhuma postagem ainda" vira um quadro claro.
   ========================================================= */
.panel--sec[data-season="4"] .scard-vazio{
  background:#FBF6EC !important; border:1px dashed rgba(63,23,0,.45) !important;
  color:#5C4A30 !important;
}
.panel--sec[data-season="4"] .scard-vazio a{ color:#3F1700 !important; }
/* o nome da secao (link dourado claro) some no branco: dourado escuro */
.panel--sec[data-season="1"] .sec-kicker,
.panel--sec[data-season="4"] .sec-kicker{ color:#3F1700 !important; text-shadow:none !important; }
.panel--sec[data-season="1"] .sec-top,
.panel--sec[data-season="4"] .sec-top{ border-left-color:#FFA001 !important; }

/* =========================================================
   53 · Cinerama (meio amarelo, meio preto): o que fica na
   metade amarela e era dourado-claro sumia. Nome da secao, a
   faixinha ao lado dele, e o card selecionado la embaixo (titulo
   + faixinha) ficam em preto.
   ========================================================= */
.panel--sec[data-season="2"] .sec-kicker{ color:#111 !important; text-shadow:none !important; }
.panel--sec[data-season="2"] .sec-top{ border-left-color:#111 !important; }
.panel--sec[data-season="2"] .scard.is-active .scard__txt{ border-left-color:#111 !important; }
.panel--sec[data-season="2"] .scard.is-active .scard__txt b{ color:#111 !important; text-shadow:none !important; }

/* o "saiba mais" do destaque saiu: o botao "Ler e responder" ja leva
   pra materia. (regra de seguranca pra versao antiga em cache) */
.palco__saiba{ display:none !important; }

/* =========================================================
   54 · Cinerama e GeoDigital: divisa estatica, sem fade
   Igual ao Mundo Geografico: o fundo passa a ser do proprio
   bloco da secao (rola junto com a pagina), entao entre
   Mundo -> Cinerama -> GeoDigital -> Aconteceu? a troca e' uma
   linha seca subindo pela tela, sem transicao. O fundo fixo
   por tras dessas secoes fica preto.
   - Cinerama: metade amarela (esquerda), metade preta.
   - GeoDigital: a foto do globo parada (fixed) enquanto a secao
     passa, com o mesmo veu escuro de antes.
   ========================================================= */
.scene--cinerama .scene__veil,
.scene--geodigital .scene__veil{ background:#000 !important; }

.panel--sec[data-season="2"]{ background:#FFA001 !important; }
.panel--sec[data-season="3"]{
  background:
    linear-gradient(175deg,rgba(2,8,20,.55) 0%,rgba(2,10,26,.35) 45%,rgba(0,4,12,.7) 100%),
    url('imagens/bg-geodigital.png') center / cover no-repeat fixed !important;
}
/* celular/tablet: "fixed" nao funciona direito (iOS ignora ou pula) */
@media (hover:none), (max-width:980px){
  .panel--sec[data-season="3"]{ background-attachment:scroll, scroll !important; }
}

/* =========================================================
   56 · Cinerama todo amarelo
   Sem a metade preta, toda letra clara da secao sumiria no
   amarelo: aqui tudo vira escuro. A barrinha "Em destaque" fica
   preta com letra amarela, e o botao "Ler e responder" tambem
   (dourado em cima de amarelo nao aparece).
   ========================================================= */
.panel--sec[data-season="2"]{ color:#1E1405 !important; }
.panel--sec[data-season="2"] .sec-linha,
.panel--sec[data-season="2"] h2,
.panel--sec[data-season="2"] .palco__txt h2{ color:#1E1405 !important; text-shadow:none !important; }
.panel--sec[data-season="2"] .palco__txt p{ color:#3B2006 !important; text-shadow:none !important; }
.panel--sec[data-season="2"] .palco__meta{ color:#3B2006 !important; }
.panel--sec[data-season="2"] .palco__tag{
  background:#111 !important; color:#FFA001 !important; background-image:none !important;
}
.panel--sec[data-season="2"] .palco__txt .btn,
.panel--sec[data-season="2"] .btn--gold{
  background:#111 !important; color:#FFA001 !important; box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}
.panel--sec[data-season="2"] .scard__txt b,
.panel--sec[data-season="2"] .scard__txt strong{ color:#3B2006 !important; text-shadow:none !important; }
.panel--sec[data-season="2"] .scard__txt,
.panel--sec[data-season="2"] .scard__txt p{ color:#3B2006 !important; border-left-color:rgba(17,17,17,.3) !important; }
.panel--sec[data-season="2"] .scard__btn{ border-top-color:rgba(17,17,17,.25) !important; }
.panel--sec[data-season="2"] .roleta__nav{
  background:#111 !important; color:#FFA001 !important; border-color:#111 !important;
}

/* =========================================================
   57 · Banner da colecao entre o Cinerama e o GeoDigital
   O mesmo quadro do fim de cada materia (capas + selo + titulo
   + texto + "Conhecer a colecao"), numa faixa propria. A cada
   visita aparece uma colecao (montado pelo script.js, com as
   capas do banco).
   ========================================================= */
.banner-obra{ position:relative; z-index:2; background:#111; padding:9vh 0; }
.banner-obra[hidden]{ display:none; }
.banner-obra .wrap{ max-width:980px; }
.banner-obra__quadro{
  display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
  background:#fff; border-radius:22px; padding:28px clamp(20px,3vw,36px);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.banner-obra__capas{ display:flex; }
.banner-obra__capas img{
  width:96px; aspect-ratio:3/4; object-fit:cover; border-radius:6px; background:#eee;
  box-shadow:0 2px 4px rgba(45,32,10,.18),0 14px 28px rgba(45,32,10,.3);
}
.banner-obra__capas img + img{ margin-left:-36px; }
.banner-obra small{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#3F1700; }
.banner-obra h3{ margin:6px 0 8px; font-size:26px; color:#3B2006; }
.banner-obra p{ margin:0 0 16px; font-size:16.5px; line-height:1.6; color:#6C5A3D; }
.banner-obra p strong{ color:#3B2006; }
@media (max-width:640px){
  .banner-obra__quadro{ grid-template-columns:1fr; }
  .banner-obra__capas img{ width:80px; }
}

/* =========================================================
   58 · Fade dos Mapas para Colorir: branco em cima, preto embaixo
   O mapa de fundo entra/sai com fade trocando o fundo fixo. A
   secao de cima (Aconteceu? Virou aula) e' branca, mas o fundo
   fixo dela era preto -- o mapa nascia de um preto. Agora o fundo
   fixo por tras do Aconteceu e' branco (nao muda nada enquanto a
   secao branca esta na tela), entao o fade de cima e' branco -> mapa.
   Embaixo (Minha Jornada) continua preto -> mapa.
   ========================================================= */
.scene--aula .scene__veil{ background:#fff !important; }
/* a sombra das bordas (vinheta) escurecia os cantos desse branco --
   com os fundos agora lisos, ela nao faz mais falta */
.vignette{ display:none !important; }

/* =========================================================
   59 · Titulos nunca cortados, e o do destaque maior e mais solto
   ========================================================= */
.palco__txt h2,
.scard__txt b{
  display:block !important; -webkit-line-clamp:unset !important;
  overflow:visible !important; min-height:0 !important;
}
.palco__txt h2{ font-size:clamp(34px,calc(4.4vw + 2px),60px) !important; line-height:1.06 !important; margin:0 0 28px !important; }
@media (max-width:760px){
  .palco__txt h2{ font-size:clamp(28px,calc(7.2vw + 2px),38px) !important; margin-bottom:20px !important; }
}

/* =========================================================
   60 · Sem a "mascara" nas fotos dos cards
   Um brilho branco no canto e uma sombra embaixo cobriam toda
   miniatura — nos mapas (que sao claros) parecia um veu por cima.
   ========================================================= */
.scard__thumb::after{ display:none !important; }

/* =========================================================
   61 · Video do destaque (vem do painel: Drive ou YouTube)
   ========================================================= */
.palco__video{ margin-top:22px; width:100%; max-width:520px; }
.palco__video[hidden]{ display:none !important; }
.palco__video iframe{
  display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:10px;
  background:#000; box-shadow:0 14px 30px rgba(0,0,0,.28);
}

/* =========================================================
   62 · Secao com fundo proprio (a foto da materia em destaque)
   O texto do destaque vai num quadro branco, pra ser lido em
   cima de qualquer foto; o nome da secao e os cards ficam claros.
   ========================================================= */
.panel--sec.tem-fundo[data-secao]{ transition:background .3s; }
.panel--sec.tem-fundo[data-secao] .palco__txt{
  background:#fff; border-radius:18px; padding:clamp(22px,2.6vw,34px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.panel--sec.tem-fundo[data-secao] .palco__txt h2{ color:#3B2006 !important; text-shadow:none !important; }
.panel--sec.tem-fundo[data-secao] .palco__txt p{ color:#3B2006 !important; text-shadow:none !important; }
.panel--sec.tem-fundo[data-secao] .palco__meta{ color:#8A7554 !important; }
.panel--sec.tem-fundo[data-secao] .sec-kicker{ color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.6) !important; }
.panel--sec.tem-fundo[data-secao] .sec-linha{ color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.6) !important; }
.panel--sec.tem-fundo[data-secao] .sec-top{ border-left-color:#FFA001 !important; }
.panel--sec.tem-fundo[data-secao] .scard .scard__txt b{ color:#fff !important; text-shadow:0 1px 8px rgba(0,0,0,.75) !important; }
.panel--sec.tem-fundo[data-secao] .scard.is-active .scard__txt b{ color:#FFA001 !important; }
.panel--sec.tem-fundo[data-secao] .scard .scard__txt{ border-left-color:rgba(255,255,255,.5) !important; }

/* =========================================================
   63 · A VITRINE (Mundo Geografico) — o layout do print
   fundo de foto | quadro claro com titulo, resumo, "Ler mais" e o
   video/foto embaixo | capa grande com setas amarelas nas bordas e
   tres miniaturas embaixo.
   ========================================================= */
.panel--sec.sec-vitrine{ color:#1E1E1E; }
.panel--sec.sec-vitrine .sec-kicker{ color:#fff !important; text-shadow:0 2px 14px rgba(0,0,0,.65) !important; }
.panel--sec.sec-vitrine .sec-linha{ color:#fff !important; text-shadow:0 2px 14px rgba(0,0,0,.65) !important; }
.panel--sec.sec-vitrine .sec-top{ border-left-color:#FED600 !important; }

.vit__grade{
  display:grid; grid-template-columns:minmax(260px,.78fr) 1.5fr;
  gap:clamp(26px,3.4vw,52px); align-items:start;
}
.vit__card{
  background:#F4F2EE; padding:clamp(22px,2.4vw,34px);
  box-shadow:0 22px 50px rgba(0,0,0,.32);
}
.panel--sec.sec-vitrine .vit__titulo{
  margin:0 0 22px; font-family:var(--font-ui,'Montserrat',system-ui,sans-serif);
  font-weight:800; font-size:clamp(26px,calc(2.4vw + 2px),36px); line-height:1.15; letter-spacing:-.01em;
  color:#1E1E1E !important; text-shadow:none !important;
}
.vit__resumo{ margin:0 0 20px; font-size:17px; line-height:1.6; color:#3A3A3A; }
.vit__ler{
  display:inline-block; background:#FED600; color:#111; text-decoration:none;
  font-family:var(--font-ui,'Montserrat',system-ui,sans-serif);
  font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 26px; transition:background .15s;
}
.vit__ler:hover{ background:#FED600; }
.vit__midia{ margin-top:26px; }
.vit__midia img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.vit__midia iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; background:#000; }

.vit__foto{ position:relative; box-shadow:0 22px 50px rgba(0,0,0,.35); }
.vit__foto a{ display:block; }
.vit__foto img, .vit__foto .card__ph{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.vit__seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:58px; height:58px; border:0; background:#FED600; color:#111;
  font-size:26px; font-weight:800; cursor:pointer; transition:background .15s;
}
.vit__seta:hover{ background:#FED600; }
.vit__seta--prev{ left:-29px; }
.vit__seta--next{ right:-29px; }

.vit__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
.vit__thumb{
  padding:0; border:0; background:#eee; cursor:pointer; overflow:hidden;
  aspect-ratio:4/3; box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.vit__thumb img, .vit__thumb .card__ph{
  display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s;
}
.vit__thumb:hover img{ transform:scale(1.06); }

@media (max-width:900px){
  .vit__grade{ grid-template-columns:1fr; }
  .vit__lado{ order:-1; }
  .vit__seta{ width:46px; height:46px; font-size:22px; }
  .vit__seta--prev{ left:8px; }
  .vit__seta--next{ right:8px; }
  .vit__thumbs{ gap:10px; }
}

/* =========================================================
   64 · A apresentação antes do download (ads.js) também na
   página inicial — cópia do post.css, que a inicial não carrega
   ========================================================= */
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)}

/* =========================================================
   65 · Mapas para Colorir na pagina inicial: 2 colunas
   esquerda: o que e' + link | direita: 6 mapas (2 x 3) com Baixar
   ========================================================= */
.mpv__grade{
  display:grid; grid-template-columns:minmax(260px,.8fr) 1.4fr;
  gap:clamp(28px,4vw,64px); align-items:center;
}
.mpv__sobre{ margin:18px 0 26px; font-size:18px; line-height:1.7; color:rgba(255,249,238,.9); max-width:44ch;
  text-shadow:0 1px 8px rgba(0,0,0,.45); }
.mpv__mapas{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.mpc{ background:#fff; box-shadow:0 14px 30px rgba(0,0,0,.3); display:flex; flex-direction:column; }
.mpc__capa{ display:block; background:#fff; }
.mpc__capa img, .mpc__capa .card__ph{
  display:block; width:100%; aspect-ratio:4/3; object-fit:contain; padding:8px; box-sizing:border-box;
}
.mpc__pe{ display:flex; align-items:center; gap:10px; padding:10px 12px 12px; border-top:1px solid #EFE7D8; margin-top:auto; }
.mpc__nome{ flex:1; min-width:0; font-size:15px; font-weight:700; line-height:1.3; color:#3B2006; text-decoration:none; }
.mpc__nome:hover{ text-decoration:underline; }
.mpc__baixar{
  flex:none; border:0; cursor:pointer; background:#FED600; color:#111;
  font-family:var(--font-ui,'Montserrat',system-ui,sans-serif);
  font-size:14px; font-weight:800; padding:8px 14px; border-radius:999px; transition:background .15s;
}
.mpc__baixar:hover{ background:#FED600; }
.mpc__baixar:disabled{ opacity:.6; cursor:default; }
@media (max-width:900px){
  .mpv__grade{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .mpv__mapas{ gap:10px; }
  .mpc__pe{ flex-direction:column; align-items:stretch; }
  .mpc__baixar{ width:100%; }
}

/* vitrine: embaixo de cada miniatura, o titulo inteiro com o tracinho amarelo */
.vit__thumb{ aspect-ratio:auto !important; background:none !important; box-shadow:none !important;
  overflow:visible !important; text-align:left; display:flex; flex-direction:column; gap:12px; }
.vit__thumb-img{ display:block; aspect-ratio:4/3; overflow:hidden; background:#eee; box-shadow:0 10px 24px rgba(0,0,0,.28); }
.vit__thumb-img img, .vit__thumb-img .card__ph{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.vit__thumb:hover .vit__thumb-img img{ transform:scale(1.06); }
.vit__thumb-nome{
  display:block; padding-left:12px; border-left:3px solid #FED600;
  font-family:var(--font-ui,'Montserrat',system-ui,sans-serif);
  font-size:17px; font-weight:800; line-height:1.3; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.75);
}
.vit__thumb:hover .vit__thumb-nome{ color:#FED600; }

/* =========================================================
   66 · Vitrine: fundo embacado, trocando com fade pelo branco
   ========================================================= */
.panel--sec.sec-vitrine{ position:relative; overflow:hidden; background:#fff !important; }
.vit__fundo{ position:absolute; inset:0; z-index:0; background:#fff; overflow:hidden; pointer-events:none; }
.vit__fundo i{
  position:absolute; inset:-40px; background-size:cover; background-position:center;
  filter:blur(10px); transform:scale(1.04);
  opacity:0; transition:opacity .45s ease;
}
.vit__fundo i::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.16); }
.vit__conteudo{ position:relative; z-index:1; width:100%; }

/* =========================================================
   69 · Cinerama (fundo amarelo): em branco o subtitulo da secao,
   o titulo do destaque e os titulos dos cards NAO selecionados.
   O card selecionado continua em preto (regra 53, mais forte).
   ========================================================= */
.panel--sec[data-season="2"] .sec-linha,
.panel--sec[data-season="2"] .palco__txt h2{
  color:#fff !important; text-shadow:0 1px 3px rgba(80,50,0,.35) !important;
}
.panel--sec[data-season="2"] .scard__txt b,
.panel--sec[data-season="2"] .scard__txt strong{
  color:#fff !important; text-shadow:0 1px 3px rgba(80,50,0,.35) !important;
}
.panel--sec[data-season="2"] .scard.is-active .scard__txt b{ color:#111 !important; text-shadow:none !important; }

/* ===== 24/09 — título "Nossas Obras" e a inclinação dos livros ===== */
.obras-titulo{ text-align:center; margin:14px 0 34px; }
.prateleira{ perspective:900px; }
.livro__capa{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:box-shadow .3s, transform .25s ease-out;
  will-change:transform;
}

/* =========================================================
   73 · 24/09 — tipografia das seções, setas amarelas e o
   título das seções da página inicial
   - nome da seção: TUDO MAIÚSCULO
   - slogan: como foi escrito (maiúscula só no começo e nos nomes)
   - EM DESTAQUE: maiúsculo
   - título da matéria: TUDO MAIÚSCULO
   - descrição: como foi escrita, começando com maiúscula
   ========================================================= */
.obras-sub{ text-align:center; margin:-22px 0 38px !important; }

.panel--sec .sec-kicker, .scpg__hero h1{
  text-transform:uppercase !important; letter-spacing:.03em !important;
}
.panel--sec .sec-linha, .scpg__sobre{ text-transform:none !important; }
.panel--sec .sec-linha::first-letter, .scpg__sobre::first-letter,
.panel--sec .palco__txt > p::first-letter{ text-transform:uppercase; }
.panel--sec .palco__tag{ text-transform:uppercase !important; }
.panel--sec .palco__txt h2{
  text-transform:uppercase !important; letter-spacing:.01em;
  line-height:1.1 !important;
}
.panel--sec .scard__txt b, .scpg .mapac__corpo b, .vit__titulo{
  text-transform:uppercase !important; letter-spacing:.02em;
}
.scpg .mapac__corpo b{ font-size:17.5px; }
.panel--sec .scard__txt b{ font-size:16px; }
.panel--sec .palco__txt > p{ text-transform:none !important; }

/* o slogan é frase curta de chamada, não parágrafo: sem recuo */
.sec-linha, .mapasv__subtitulo, .panel--entrada .eyebrow{ text-indent:0 !important; }

/* Cinerama: nome e slogan em cima do destaque, na coluna do texto */
.sec-top--destaque{ margin-bottom:22px !important; }
.sec-top--destaque .sec-linha{ max-width:none; }

/* Cinerama é amarelo: título, textos e cards em escuro (estavam brancos) */
.panel--sec[data-season="2"] .palco__txt h2,
.panel--sec[data-season="2"] .scard__txt b,
.panel--sec[data-season="2"] .sec-linha{ color:#1E1405 !important; text-shadow:none !important; }
.panel--sec[data-season="2"] .palco__txt > p{ color:#3B2006 !important; text-shadow:none !important; }

/* ---- as setas que rolam para o lado: grandes, degradê laranja → amarelo
        correndo para o lado em que a fita anda ---- */
.roleta__nav, .scpg-prat__seta{
  width:58px !important; height:58px !important; border-radius:50% !important;
  border:0 !important; color:#3B2006 !important;
  font-size:32px !important; font-weight:800 !important; line-height:1 !important;
  display:flex !important; align-items:center; justify-content:center; padding:0 0 4px !important;
  box-shadow:0 8px 22px rgba(255,160,1,.38), inset 0 1px 0 rgba(255,255,255,.45) !important;
  transition:transform .18s, box-shadow .18s, filter .18s !important; cursor:pointer; z-index:5;
}
.roleta__nav--next, .scpg-prat__seta--prox{
  background:linear-gradient(90deg,#FFA001 0%,#FFA001 45%,#FED600 100%) !important;
}
.roleta__nav--prev, .scpg-prat__seta--ant{
  background:linear-gradient(270deg,#FFA001 0%,#FFA001 45%,#FED600 100%) !important;
}
.roleta__nav:hover, .scpg-prat__seta:hover:not(:disabled){
  filter:brightness(1.06); transform:translateY(-50%) scale(1.08) !important;
  box-shadow:0 12px 28px rgba(255,160,1,.5), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.roleta__nav{ top:38% !important; transform:translateY(-50%) !important; }
.roleta__nav--prev{ left:-34px !important; }
.roleta__nav--next{ right:-34px !important; }
@media (max-width:1320px){
  .roleta__nav--prev{ left:-12px !important; }
  .roleta__nav--next{ right:-12px !important; }
}
.scpg-prat__seta--ant{ left:-26px !important; }
.scpg-prat__seta--prox{ right:-26px !important; }
@media (max-width:760px){ .roleta__nav{ display:none !important; } }
@media (max-width:600px){ .scpg-prat__seta{ display:none !important; } }
.sec-top--destaque .sec-linha{ min-height:0 !important; overflow:visible !important; -webkit-line-clamp:unset !important; display:block !important; }

/* 24/09 (2) — setas quadradas, maiores, no meio da foto dos cards */
.roleta__nav, .scpg-prat__seta{
  width:68px !important; height:68px !important; border-radius:12px !important;
  font-size:40px !important; padding:0 0 5px !important;
  transform:translateY(-50%) !important;
}
.roleta__nav:hover, .scpg-prat__seta:hover:not(:disabled){ transform:translateY(-50%) scale(1.06) !important; }
.roleta__nav--prev{ left:-24px !important; }
.roleta__nav--next{ right:-24px !important; }
.scpg-prat__seta--ant{ left:-24px !important; }
.scpg-prat__seta--prox{ right:-24px !important; }
@media (max-width:1320px){
  .roleta__nav--prev, .scpg-prat__seta--ant{ left:-8px !important; }
  .roleta__nav--next, .scpg-prat__seta--prox{ right:-8px !important; }
}

/* Minha Jornada: título em maiúsculas, como as seções */

.prateleira{ transition:opacity .35s ease; }
.prateleira.esperando-banco{ opacity:0; }
/* páginas internas: escondidas até o banco responder na 1ª visita (evita o "recarrega") */
main.esperando-banco, #conteudo.esperando-banco{ opacity:0; transition:opacity .3s; }

/* a inclinação de verdade: perspectiva na prateleira, o livro gira
   em torno do próprio centro e a sombra acompanha */
.prateleira{ perspective:1100px; }
.livro__capa{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-origin:50% 50%;
  transition:box-shadow .3s, transform .18s ease-out;
}
.livro__capa.is-inclinando{ transition:box-shadow .3s, transform .06s linear; }
.livro:hover .livro__capa{
  box-shadow:0 6px 12px rgba(0,0,0,.4), 0 30px 54px rgba(0,0,0,.42), 0 60px 100px rgba(0,0,0,.36);
}
/* =========================================================
   75 · 24/09 — o botão amarelo dos cards sempre no rodapé, na
   mesma altura em todos: o corpo do card estica e o botão fica
   grudado embaixo, o título com altura mínima de 3 linhas
   ========================================================= */
.mapac{ height:100%; }
.mapac__corpo{ flex:1 1 auto; display:flex; flex-direction:column; }
.mapac__corpo b{ min-height:calc(3 * 1.22em); }
.mapac__link{ flex:1 1 auto; }
.mapac__baixar{ margin-top:auto !important; }
.mapac .mapac__baixar{ margin:14px 18px 20px !important; }
/* nas prateleiras da página de seção e na grade, os cards da mesma
   fileira têm a mesma altura (stretch) — é o que iguala os botões */
.scpg-prat__fita, .scpg__grade, .pg-down__grade, .mapasv__grade{ align-items:stretch; }
.scpg-prat__fita > *{ height:100%; }

/* 24/09 — textos das seções da página inicial justificados */
.panel--sec .palco__txt > p, .panel--sec .sec-linha, .mpv__sobre{
  text-align:justify; text-justify:inter-word;
}