/* ═══════════════════════════════════════════════
   jabuti-2024 — CSS da apresentação
   Extraído de apresentacoes/jabuti-2024/index.html
   Ordem dos blocos preservada (cascata idêntica)
   ═══════════════════════════════════════════════ */

/* ═══ bloco extraído de index.html (era <style id="vt-chrome-perf">) ═══ */
/* Apresentações: nav com cartão branco sem backdrop-blur (desempenho no scroll
   sobre imagens grandes) e visível desde o início. */
nav.nav-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98)}

/* ═══ bloco extraído de index.html ═══ */
:root{
  --oliva:#33333d;
  --oliva-claro:#cdcf55;
  --oliva-escuro:#585a29;
  --carvao:#26262e;
  --branco:#fff;
  --papel:#f5f4f0;
  --tinta:#22222b;
  --tinta-suave:#5d6272;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',sans-serif;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:hidden;
}
::selection{background:var(--carvao);color:var(--oliva)}

/* ---------- deck ---------- */
main{height:100dvh;overflow-y:auto;scroll-snap-type:none}
section.slide{
  min-height:100dvh;scroll-snap-align:start;
  position:relative;display:flex;overflow:hidden;
}

/* ---------- revelação ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.slide.on .rv{opacity:1;transform:none}
.slide.on .rv.d1{transition-delay:.12s}
.slide.on .rv.d2{transition-delay:.24s}
.slide.on .rv.d3{transition-delay:.38s}
.slide.on .rv.d4{transition-delay:.52s}

.img-reveal{
  overflow:hidden;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s var(--ease);
}
.slide.on .img-reveal{clip-path:inset(0 0 0 0)}
.slide.on .img-reveal.d1{transition-delay:.15s}
.slide.on .img-reveal.d2{transition-delay:.3s}
.img-reveal img{display:block;transform:scale(1.05);transition:transform 1.6s var(--ease)}
.slide.on .img-reveal img{transform:scale(1)}

/* ---------- elementos gráficos oficiais (raster com alpha) ---------- */
.elemento{display:block;image-rendering:auto}
.orn-wrap{position:absolute;pointer-events:none;will-change:transform}
.orn{
  display:block;opacity:.9;
  animation:flutuar-orn 7s ease-in-out infinite;
}
.orn.o2{animation-duration:9s;animation-delay:1.2s}
.orn.o3{animation-duration:8s;animation-delay:.6s}
@keyframes flutuar-orn{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-2deg)}}

/* faixa-marquee de grafismos */
.friso{overflow:hidden;white-space:nowrap;pointer-events:none;user-select:none}
.friso .trilho{display:inline-flex;align-items:center;gap:3.4rem;animation:rolar 30s linear infinite;padding-right:3.4rem}
.friso img{height:46px;width:auto;display:block}
@keyframes rolar{to{transform:translateX(-50%)}}

/* ---------- rótulos ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:700;display:flex;align-items:center;gap:14px;color:var(--tinta);
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--carvao);flex:none}
.eyebrow.claro{color:var(--oliva)}
.eyebrow.claro::before{background:var(--oliva)}
h1.rupestre, h2.rupestre{
  font-family:'Amatic SC',cursive;font-weight:700;
  letter-spacing:.03em;line-height:.95;
}
h2.rupestre{font-size:clamp(2.6rem,5.4vw,4.4rem);margin-top:.7rem}
.cab{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  max-width:1400px;width:100%;margin:0 auto 3.5vh;
}
.cab p{max-width:30rem;font-size:.94rem;line-height:1.65;color:var(--tinta-suave)}

/* ---------- painéis ---------- */
.painel{
  border-radius:12px;overflow:hidden;
  box-shadow:0 34px 80px -28px rgba(22,22,15,.5);
  background:#fff;display:flex;justify-content:center;
  cursor:zoom-in;position:relative;
}
.painel img{width:auto;max-width:100%;max-height:62vh;display:block;object-fit:contain}
.painel::after{
  content:"⛶ ampliar";position:absolute;right:12px;bottom:10px;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  background:var(--carvao);color:var(--oliva);padding:.4rem .7rem;border-radius:100px;
  opacity:0;transition:opacity .3s;
}
.painel:hover::after{opacity:1}

/* ---------- 01 capa ---------- */
#s1{background:var(--oliva);align-items:center;justify-content:center;flex-direction:column}
.logo-capa{
  width:min(480px,60vw);display:block;margin:0 auto 2.6vh;
  filter:drop-shadow(0 14px 30px rgba(22,22,15,.25));
}
.capa{position:relative;z-index:2;text-align:center;padding:0 6vw;max-width:1100px}
.capa .eyebrow{justify-content:center}
.capa .eyebrow::after{content:"";width:34px;height:3px;background:var(--carvao)}
.capa .comp-wrap{display:block;will-change:transform}
.capa .composicao{width:min(360px,52vw);display:block;margin:2.2vh auto 0}
h1.rupestre{
  font-size:clamp(2.8rem,7.2vw,5.4rem);color:var(--branco);
  text-shadow:0 2px 0 rgba(22,22,15,.18);
  margin:1.2vh 0 1.6vh;
}
h1.rupestre .linha{display:block;overflow:hidden}
h1.rupestre .linha i{font-style:normal;display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease)}
.slide.on h1.rupestre .linha:nth-child(1) i{transform:none;transition-delay:.15s}
.slide.on h1.rupestre .linha:nth-child(2) i{transform:none;transition-delay:.3s}
.capa .sub{
  font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(.78rem,1.4vw,.95rem);color:var(--carvao);
}
.capa .meta{
  margin-top:2vh;display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);opacity:.7;
}
.scroll-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--carvao);opacity:.75;
  animation:flutua 2.6s ease-in-out infinite;z-index:2;
}
@keyframes flutua{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- 02 o projeto ---------- */
#s2{background:var(--papel);align-items:center}
#s2 .duas{
  display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;
  max-width:1360px;width:100%;margin:0 auto;padding:7vh 5vw;
}
#s2 .txt p{font-size:1rem;line-height:1.75;color:var(--tinta-suave);max-width:31rem;margin-top:1.3rem}
#s2 .fatos{margin-top:2.2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.6rem;max-width:30rem}
.fato small{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oliva-escuro);font-weight:800;margin-bottom:.3rem}
.fato span{font-size:.9rem;font-weight:500}
#s2 .painel img{max-height:78vh}

/* ---------- 03 as formas ---------- */
#s3{background:var(--carvao);color:var(--branco);flex-direction:column;justify-content:center;padding:7vh 5vw}
#s3 .cab p{color:rgba(255,255,255,.9)}
#s3 h2{color:var(--branco)}
#s3 h2 em{font-style:normal;color:var(--oliva)}
.formas{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  max-width:1300px;width:100%;margin:0 auto;
}
.formas figure{text-align:center}
.formas .quadro{
  aspect-ratio:1;background:var(--oliva);border-radius:14px;
  display:flex;align-items:center;justify-content:center;padding:13%;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.formas figure:hover .quadro{transform:translateY(-6px);box-shadow:0 30px 60px -22px rgba(184,186,39,.35)}
.formas .elemento{max-width:100%;max-height:100%;object-fit:contain}
.formas figcaption{
  margin-top:1rem;font-family:'Amatic SC',cursive;font-weight:700;
  font-size:1.8rem;letter-spacing:.06em;color:#fff;
}

/* ---------- 04 textura & paleta ---------- */
#s4{background:var(--oliva);flex-direction:column;justify-content:center;padding:7vh 5vw}
#s4 .cab p{color:var(--carvao)}
#s4 .faixa{
  position:relative;z-index:1;
  max-width:1400px;width:100%;margin:0 auto 3.5vh;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 70px -26px rgba(22,22,15,.55);cursor:zoom-in;
}
#s4 .faixa img{width:100%;display:block}
#s4 .baixo{
  display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;align-items:center;
  max-width:1400px;width:100%;margin:0 auto;
}
#s4 .baixo p{font-size:.98rem;line-height:1.7;color:var(--tinta);opacity:.85;max-width:32rem;margin-top:1.2rem}
.swatches{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.sw{
  width:96px;aspect-ratio:1/1.15;border-radius:10px;position:relative;
  transform:translateY(30px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease);
  border:1.5px solid rgba(22,22,15,.25);
}
.slide.on .sw{transform:none;opacity:1}
.sw span{
  position:absolute;left:8px;bottom:8px;font-size:.6rem;letter-spacing:.06em;font-weight:700;
  background:rgba(22,22,15,.65);color:#fff;padding:.2rem .4rem;border-radius:6px;
}
#s4 .selo{
  border-radius:12px;overflow:hidden;box-shadow:0 24px 60px -22px rgba(22,22,15,.5);
  background:#fff;cursor:zoom-in;max-width:340px;justify-self:end;
  position:relative;z-index:3;
  align-self:start;
  margin-right:clamp(80px,10vw,150px);
  margin-top:-14vh; /* sobre a imagem principal, como foto de perfil */
  border:6px solid #fff;
  box-shadow:0 30px 70px -18px rgba(22,22,15,.6);
}
#s4 .selo img{width:100%;display:block}

/* ---------- 05 o museu ---------- */
#s5{background:var(--papel);align-items:center}
#s5 .duas{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center;
  max-width:1300px;width:100%;margin:0 auto;padding:7vh 5vw;
}
#s5 .txt p{font-size:1rem;line-height:1.75;color:var(--tinta-suave);max-width:30rem;margin-top:1.3rem}
#s5 .painel img{max-height:58vh;width:100%;object-fit:cover}
.logo-muhpan{width:min(280px,60vw);display:block;margin-top:2.6rem;padding-top:2rem;border-top:1px solid rgba(29,29,18,.15)}

/* ---------- 06 encerramento ---------- */
#s6{background:var(--carvao);color:var(--branco);align-items:center;justify-content:center;text-align:center}
#s6 .friso{position:absolute;left:0;right:0;top:6vh;opacity:.55}
.fim{position:relative;z-index:2;padding:0 6vw;max-width:1080px}
.fim .eyebrow{justify-content:center}
.fim .eyebrow::after{content:"";width:34px;height:3px;background:var(--oliva)}
.fim h2{
  font-family:'Amatic SC',cursive;font-weight:700;
  font-size:clamp(2.6rem,6vw,5rem);line-height:1;margin:2.4vh 0 3.5vh;
}
.fim h2 em{font-style:normal;color:var(--oliva)}
.creditos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;
  padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.16);text-align:left;
}
.creditos small{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oliva);font-weight:800;margin-bottom:.5rem}
.creditos span{font-size:.84rem;line-height:1.5;opacity:.85}

/* ---------- lightbox ---------- */
#lightbox{
  position:fixed;inset:0;background:rgba(22,22,15,.95);z-index:100;
  display:none;align-items:center;justify-content:center;padding:3vh 3vw;cursor:zoom-out;
}
#lightbox.aberto{display:flex}
#lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px}
#lightbox .fechar{
  position:absolute;top:18px;right:22px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--oliva);background:none;border:1.5px solid var(--oliva);border-radius:100px;
  padding:.5rem 1rem;cursor:pointer;
}

/* ---------- navegação ---------- */
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:50;color:var(--carvao)}
.dots.claro{color:var(--branco)}
.dots button{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;background:currentColor;opacity:.3;transition:.3s var(--ease);padding:0}
.dots button.ativo{opacity:1;transform:scale(1.5)}
.contador{position:fixed;left:26px;bottom:22px;z-index:50;font-size:.72rem;letter-spacing:.24em;font-weight:700;color:var(--carvao);transition:color .4s}
.contador.claro{color:var(--branco)}
.barra{position:fixed;left:0;top:0;height:3px;width:0;background:var(--carvao);z-index:60;transition:width .25s linear}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  section.slide{min-height:100dvh;height:auto}
  main{scroll-snap-type:none}
  #s2 .duas,#s5 .duas{grid-template-columns:1fr;gap:2.6rem;padding:9vh 7vw}
  .formas{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  #s4 .baixo{grid-template-columns:1fr;gap:2.4rem}
  #s4 .selo{justify-self:start}
  .creditos{grid-template-columns:1fr 1fr;gap:1.4rem}
  .dots{display:none}
  .painel img{max-height:none!important;width:100%!important}
  #s1 .friso{bottom:7vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.img-reveal,.sw,h1.rupestre .linha i{opacity:1!important;transform:none!important;clip-path:none!important}
  .orn{animation:none!important}
}

/* ══ TEMA DO PROJETO ══ */

.folheador{max-width:1300px;width:100%;margin:0 auto;position:relative}
.folheador .pagina{display:none;text-align:center}
.folheador .pagina.ativa{display:block;animation:surge .6s var(--ease)}
.folheador .painel{display:inline-flex;background:transparent}
.folheador .painel img{max-height:56vh;width:auto;max-width:100%}
.folheador .setas{position:absolute;top:44%;left:-1vw;right:-1vw;display:flex;justify-content:space-between;pointer-events:none}
.folheador .setas button{pointer-events:auto;width:52px;height:52px;border-radius:50%;border:2px solid var(--acento);background:var(--papel);color:var(--acento);font-size:1.2rem;cursor:pointer;transition:.3s var(--ease)}
.folheador .setas button:hover{background:var(--acento);color:#fff}
.pg-contador{text-align:center;margin-top:1vh;font-size:.7rem;letter-spacing:.3em;color:var(--tinta-suave)}

:root{--acento:#33333d;--verm:#e13f2a;--amar:#f0a108;--verd:#828e00;--azul:#337ebf}
section.slide{flex-direction:column;justify-content:center;padding:6vh 5vw}
.cab{margin:0 auto 3vh}
.cab p{max-width:26rem}

/* CAPA: vídeo de fundo, sem nada por cima; some bolinhas/contador/whats */
#s1{background:#33333d;display:block;padding:0}
.capa-video{position:absolute;inset:0;overflow:hidden}
.capa-video video{width:100%;height:100%;object-fit:cover;display:block}
body.na-capa .dots,body.na-capa .contador,body.na-capa .barra,body.na-capa .wha-btn{opacity:0!important;pointer-events:none!important;transition:opacity .4s ease}

#s2{background:var(--papel)}
.duas{display:grid;grid-template-columns:.85fr 1.15fr;gap:4vw;align-items:center;max-width:1440px;width:100%;margin:0 auto;padding:5vh 5vw}
.duas .txt p{font-size:.98rem;line-height:1.8;color:var(--tinta-suave);max-width:30rem;margin-top:1.2rem}
.duas .painel img{max-height:64vh;width:auto;max-width:100%}

/* 02 · referências: 6 fotos em grade com parallax */
.refs{display:grid;grid-template-columns:1fr 1fr;gap:1vw}
.refs .painel{background:transparent}
.refs .painel img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;border-radius:10px}

/* 03 · eixos: 4 telas empilhadas com o eixo ao lado */
.eixos-col{display:flex;flex-direction:column;gap:1.6vh}
.eixos-col .item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px}
.eixos-col .painel{background:transparent}
.eixos-col img{width:100%;max-height:13.5vh;object-fit:contain;display:block;border-radius:8px}
.eixos-col .rot{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);writing-mode:vertical-rl;transform:rotate(180deg)}

/* 04 · seletor por eixo (padrão da parte 05 do Cícero) */
.seletor{display:flex;gap:.8rem;flex-wrap:wrap;max-width:1560px;width:100%;margin:0 auto 2.2vh;justify-content:center}
.aba{display:flex;align-items:center;gap:.8rem;cursor:pointer;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;padding:.68rem 1.25rem;border-radius:100px;border:2px solid var(--tinta);background:transparent;color:var(--tinta);transition:.3s var(--ease)}
.aba .chips{display:flex;gap:.3rem}
.chips i{width:15px;height:15px;border-radius:5px;display:block}
.aba.ativa{background:#33333d;border-color:#33333d;color:#fff}
.aba:hover:not(.ativa){border-color:#33333d}
.palco{position:relative;max-width:1560px;width:100%;margin:0 auto}
.palco .painel{display:none;background:transparent;box-shadow:none}
.palco .painel.ativa{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;animation:surge .7s var(--ease)}
@keyframes surge{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.palco .painel img{height:21vh;width:auto;max-width:32vw;object-fit:contain;border-radius:8px;display:block;border:6px solid #fff}

/* 08 · paleta (padrão da parte 04 do Cícero) */
.paleta{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;max-width:1440px;width:100%;margin:0 auto}
.cor{border-radius:12px;aspect-ratio:1/1.5;position:relative;overflow:hidden;transform:translateY(46px) scale(.94);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease);cursor:default;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.slide.on .cor{transform:none;opacity:1}
.cor:hover{transform:translateY(-8px)!important}
.cor .nome{position:absolute;left:14px;right:14px;bottom:14px;font-size:clamp(.78rem,1.2vw,1rem);font-weight:400;line-height:1.25}
.cor .nucleo{position:absolute;left:14px;top:14px;right:14px;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85;line-height:1.5}
.cor.clara{color:var(--tinta)}
.cor.escura{color:#fff}

.chegada-grade{max-width:1400px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2vw;align-items:center}
.chegada-grade .painel{background:transparent}
.chegada-grade .painel img{width:100%;max-height:56vh;object-fit:contain;display:block}
.rota-foto{max-width:1200px;width:100%;margin:0 auto}
.rota-foto img{width:100%;max-height:52vh;object-fit:contain;display:block}

#sfim{background:var(--papel)}
.fim{max-width:1100px;margin:0 auto;text-align:center}
.fim h2{font-size:clamp(1.5rem,2.9vw,2.5rem)!important;line-height:1.3;color:var(--tinta)}
.fim .eyebrow{color:var(--verm)}
.fim .creditos{justify-content:center}
@media (max-width:860px){.duas,.chegada-grade{grid-template-columns:1fr}.paleta{grid-template-columns:repeat(3,1fr)}}

/* ══ REVISÃO · legibilidade, eixos e novas seções ══ */
/* chip ampliar legível */
.painel::after{color:#fff}
.painel.solto{background:transparent;box-shadow:none;border-radius:0}
.painel.solto img{filter:drop-shadow(0 24px 44px rgba(22,22,15,.3))}

/* fundos alternando: partes impares em cinza-papel, pares em branco */
#s3{background:#fff}
#s4{background:var(--papel)!important}
#s5{background:#fff}
#s7{background:#fff}
#s8{background:var(--papel)}
#s9{background:#fff}
#s10{background:var(--papel)}
#s11{background:#fff!important}

/* 02 · referências — sem molduras */
#s3 h2{color:var(--tinta)}
#s3 h2 em{color:var(--tinta)}
#s3 .cab p,#s3 .txt p{color:var(--tinta-suave)}
#s3 .eyebrow{color:var(--tinta)}
.refs .painel{box-shadow:0 18px 40px -22px rgba(22,22,15,.35)}
.refs .painel img{aspect-ratio:16/9;height:auto}

/* 03 · eixos — carrossel de um em um */
#s4 h2{color:var(--tinta)}
#s4 .cab p,#s4 .txt p{color:var(--tinta-suave)}
#s4 .eyebrow{color:var(--tinta)}
.eixo-carrossel{position:relative;display:flex;align-items:center;gap:1vw;width:100%}
.eixo-carrossel .quadro{flex:1;position:relative;min-height:38vh}
.eixo-carrossel .qslide{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease);display:flex;flex-direction:column;justify-content:center;gap:1.4vh;pointer-events:none}
.eixo-carrossel .qslide.ativa{opacity:1;pointer-events:auto}
.eixo-carrossel .qslide img{width:100%;max-height:42vh;object-fit:contain;border-radius:10px;display:block;cursor:zoom-in;box-shadow:0 24px 54px -24px rgba(22,22,15,.4)}
.eixo-carrossel .rotulo{display:flex;align-items:center;gap:.6rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);justify-content:center}
.eixo-carrossel .rotulo i{width:14px;height:14px;border-radius:5px;display:block}
.seta-disc{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(34,34,43,.28);background:transparent;color:var(--tinta-suave);font-size:1.05rem;line-height:1;cursor:pointer;transition:.3s var(--ease);flex:none}
.seta-disc:hover{border-color:var(--tinta);color:var(--tinta)}
#s4 .eixo-legenda{margin-top:1.4rem;min-height:3.4em;font-size:.95rem;line-height:1.7;color:var(--tinta);border-left:3px solid var(--cor-eixo,#e13f2a);padding-left:1rem;transition:opacity .35s}
#s4 .eixo-legenda.trocando{opacity:0}

/* 05 · redes — o fundo assume a cor do eixo escolhido */
#s6{background:var(--papel)!important}
/* botoes com o fundo na mesma cor da secao */
#s6 .aba{background:var(--papel)}

/* Grids por eixo — usam colunas "auto" para que as peças mantenham EXATAMENTE
   o mesmo tamanho dos demais eixos (height:21vh da regra padrão .palco .painel img).
   Colunas com fr + height:100% esticavam as imagens: não usar. */

/* Não Ficção: 2 largas + 2 stories em cima · 2 largas + 2 stories embaixo */
.palco .painel.ativa[data-nucleo="verde"]{display:grid;grid-template-columns:auto auto auto auto;gap:14px;justify-content:center;align-items:center}
/* Produção Editorial: 2 largas + 1 story em cima · 2 largas + 1 story embaixo */
.palco .painel.ativa[data-nucleo="amarelo"]{display:grid;grid-template-columns:auto auto auto;gap:14px;justify-content:center;align-items:center}

/* 08 · sacolas e 09 · catálogo — peças soltas, sem cartão */
#s9 .painel{max-width:min(760px,88vw);margin:0 auto}
#s9 .painel img{max-height:56vh;width:auto;max-width:100%}
#s10 .capa-cat{max-width:420px;margin:0 auto 1.4vh}
#s10 .capa-cat img{max-height:20vh;width:auto;max-width:100%}
#s10 .folheador .painel{box-shadow:none;border-radius:0;background:transparent;filter:none}
#s10 .folheador .painel img{max-height:44vh}   /* sem sombra: só a imagem */

/* 10 · os cds */
.cds-grade{display:grid;grid-template-columns:1.15fr .85fr;gap:3vw;align-items:center;max-width:1300px;margin:0 auto;width:100%}
.cds-grade .painel{background:#fff}
.cds-grade img{width:100%;object-fit:contain;max-height:52vh;display:block;padding:2.2%}
@media (max-width:860px){.cds-grade{grid-template-columns:1fr}}


/* 07/09 em duas colunas */
.duas-folheador{align-items:center}
.duas-folheador .lado-folheador{width:100%}
.duas-folheador .folheador .painel img{max-height:56vh}
#s10 .folheador .painel img{max-height:56vh}
.duas-folheador .pg-contador{position:static;text-align:center;margin-top:1.2vh}

/* 08 · sacolas: zona presa + revelação + parallax */
#s9{height:320vh;min-height:0!important;display:block!important;overflow:visible!important;padding:0!important}
.sac-grude{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 5vw;box-sizing:border-box}
.duas-sacolas{width:100%;align-items:center}
.sac-palco{position:relative;height:78vh;width:100%}
.saco{position:absolute;left:var(--x);top:var(--y);width:clamp(150px,15vw,240px);
  opacity:0;filter:drop-shadow(0 22px 34px rgba(22,22,15,.28));
  transform:translate(var(--px,0px),calc(var(--py,0px) + 36px));
  transition:opacity .8s ease;will-change:transform,opacity}
.saco.viva{opacity:1}
@media (max-width:860px){#s9{height:auto;min-height:100dvh!important}.sac-grude{position:relative;height:auto;padding:8vh 5vw}.sac-palco{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.saco{position:static;width:100%;opacity:1;transform:none}}


/* video da parte 01 no quadro original da imagem */
#s2 .painel-video{width:100%;display:block}
.painel-video video{width:100%;height:auto;max-height:78vh;aspect-ratio:1800/1012;object-fit:cover;display:block;border-radius:inherit}


/* 10 · cds: zona presa + giro no scroll + parallax */
#s11{height:340vh;min-height:0!important;display:block!important;overflow:visible!important;padding:0!important}
.cd-grude{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 5vw;box-sizing:border-box}
.duas-cds{width:100%;align-items:center}
.cd-capas-mini{margin-top:2.4vh;max-width:420px}
.cd-capas-mini img{max-height:24vh}
.cd-palco{position:relative;height:80vh;width:100%}
.disco{position:absolute;left:var(--x);top:var(--y);width:clamp(170px,17vw,300px);
  opacity:0;filter:drop-shadow(0 20px 32px rgba(22,22,15,.28));
  transform:translate(var(--px,0px),var(--py,0px)) rotate(var(--rot,720deg));
  will-change:transform,opacity}
@media (max-width:860px){#s11{height:auto;min-height:100dvh!important}.cd-grude{position:relative;height:auto;padding:8vh 5vw}.cd-palco{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.disco{position:static;width:100%;opacity:1;transform:none}}


#s6{color:var(--tinta)}
/* ── cores de destaque por parte (eyebrow + palavra forte) ── */
#s2 .eyebrow,#s2 .titulo strong{color:var(--azul)} #s2 .eyebrow::before{background:var(--azul)}
#s3 .eyebrow,#s3 .titulo strong{color:var(--verm)!important} #s3 .eyebrow::before{background:var(--verm)}
/* Parte 03: a cor vem de --cor-eixo, trocada pelo JS a cada eixo (fallback: azul do 1º banner) */
#s4{--cor-eixo:#337ebf}
#s4 .eyebrow,#s4 .titulo strong{color:var(--cor-eixo)!important;transition:color .35s ease} #s4 .eyebrow::before{background:var(--cor-eixo);transition:background .35s ease}
#s5 .eyebrow,#s5 .titulo strong{color:var(--verd)} #s5 .eyebrow::before{background:var(--verd)}
#s7 .eyebrow,#s7 .titulo strong{color:var(--azul)} #s7 .eyebrow::before{background:var(--azul)}
#s8 .eyebrow,#s8 .titulo strong{color:var(--amar)} #s8 .eyebrow::before{background:var(--amar)}
#s9 .eyebrow,#s9 .titulo strong{color:var(--verd)} #s9 .eyebrow::before{background:var(--verd)}
#s10 .eyebrow,#s10 .titulo strong{color:var(--verm)} #s10 .eyebrow::before{background:var(--verm)}
#s11 .eyebrow,#s11 .titulo strong{color:var(--azul)} #s11 .eyebrow::before{background:var(--azul)}
#s12 .eyebrow,#s12 .titulo strong{color:var(--azul)} #s12 .eyebrow::before{background:var(--azul)}
/* parte 05: eyebrow e "quatro cores" na cor do eixo escolhido · "Inscrições em" segue preto */
#s6 .eyebrow,#s6 .titulo strong{transition:color .4s ease}
#s6[data-eixo="vermelho"] .eyebrow,#s6[data-eixo="vermelho"] .titulo strong{color:var(--verm)}
#s6[data-eixo="vermelho"] .eyebrow::before{background:var(--verm)}
#s6[data-eixo="amarelo"] .eyebrow,#s6[data-eixo="amarelo"] .titulo strong{color:var(--amar)}
#s6[data-eixo="amarelo"] .eyebrow::before{background:var(--amar)}
#s6[data-eixo="verde"] .eyebrow,#s6[data-eixo="verde"] .titulo strong{color:var(--verd)}
#s6[data-eixo="verde"] .eyebrow::before{background:var(--verd)}
#s6[data-eixo="azul"] .eyebrow,#s6[data-eixo="azul"] .titulo strong{color:var(--azul)}
#s6[data-eixo="azul"] .eyebrow::before{background:var(--azul)}
/* botao ativo: letra na cor do eixo */
.aba[data-alvo="vermelho"].ativa{color:var(--verm)}
.aba[data-alvo="amarelo"].ativa{color:var(--amar)}
.aba[data-alvo="verde"].ativa{color:var(--verd)}
.aba[data-alvo="azul"].ativa{color:var(--azul)}

/* lightbox — imagem sob o fechar, zoom e navegação */
#lightbox{padding:9vh 5vw 5vh;overflow:hidden}
#lightbox img{max-width:92vw;max-height:80vh;transform-origin:center center;transition:transform .18s ease-out;cursor:grab}
#lightbox img.arrastando{cursor:grabbing;transition:none}
#lightbox .fechar{color:#fff;border-color:rgba(255,255,255,.75);z-index:12}
#lightbox .zoomctl{position:absolute;bottom:22px;right:22px;display:flex;gap:8px;z-index:12}
#lightbox .zoomctl button{width:44px;height:44px;border-radius:100px;border:1.5px solid rgba(255,255,255,.7);background:rgba(22,22,15,.6);color:#fff;font-size:1.25rem;line-height:1;cursor:pointer}
#lightbox .zoomctl button:hover{background:rgba(255,255,255,.16)}
#lightbox .lbnav{position:absolute;top:50%;transform:translateY(-50%);z-index:12;width:54px;height:54px;border-radius:100px;border:1.5px solid rgba(255,255,255,.7);background:rgba(22,22,15,.6);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}
#lightbox.com-nav .lbnav{display:flex}
#lightbox .lbnav:hover{background:rgba(255,255,255,.16)}
#lightbox .lbnav.ant{left:20px}
#lightbox .lbnav.prox{right:20px}
/* pranchas do stand: fundo branco atrás da imagem para os desenhos lerem bem */
#lightbox.fundo-branco img{background:#fff;padding:2.4vh 2.4vw;border-radius:10px}



/* 03 · eixos — cores dinâmicas no eyebrow e no destaque, e traço do eyebrow acompanha */
#s4 .eyebrow, #s4 .titulo strong { transition: color .35s ease; }
#s4 .eyebrow::before { background: var(--cor-eixo, currentColor); transition: background .35s ease; }
#s4 .rotulo { line-height: 1.4; text-transform: none; letter-spacing: .02em; font-size: .82rem; }


/* 11 · Bienal — folheador das pranchas do stand, igual ao do catálogo */
#s12 .folheador .painel{box-shadow:none;border-radius:0;background:transparent;filter:none}
#s12 .folheador .painel img{max-height:60vh;background:#fff;border-radius:8px}