/* Página do jogo Nina, Tampim e Zé Ligeiro (2026-11-14): apresentação para as redes de ensino.
   Cores do pôr do sol vêm da capa do jogo; o resto segue o site.css. */

.pg-jogo{--sol:#f6c64b;--sol-sombra:#b9801f;--barro:#4a2412;--ceu1:#d98a6e;--ceu2:#eba97c;--ceu3:#f1c08f;--areia:#f6ead6}

/* botão amarelo do jogo */
.btn-sol{--bg:var(--sol);--fg:var(--barro);font-weight:700;box-shadow:0 5px 0 var(--sol-sombra),0 14px 26px -14px rgba(60,25,10,.7)}
.btn-sol:hover{--bg:#f9d36a}
.btn-sol:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sol-sombra),0 8px 16px -12px rgba(60,25,10,.7)}
.btn-sol svg .cheio{fill:currentColor;stroke:none}
.btn-creme{--bg:#fff6e4;--fg:var(--barro);font-weight:700;box-shadow:0 5px 0 #c9b28d,0 14px 26px -16px rgba(60,25,10,.6)}
.btn-creme:hover{--bg:#fffaf0}
.btn-creme:active{transform:translateY(3px);box-shadow:0 2px 0 #c9b28d}
.btn-lg{min-height:56px;padding:.95em 1.7em;font-size:1.08rem}
.nav .btn-sol{box-shadow:0 3px 0 var(--sol-sombra)}

/* ===== abertura ===== */
.jg-hero{position:relative;overflow:hidden;min-height:min(100svh,900px);display:flex;align-items:center;padding:calc(84px + 4vh) 0 8vh;
  background:linear-gradient(180deg,var(--ceu1) 0%,var(--ceu2) 38%,var(--ceu3) 66%,#e5b585 100%)}
.jg-hero-arte{position:absolute;top:0;right:0;bottom:0;width:58%;background:url(jogo/abertura-poster.jpg) 50% 50%/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 9%);mask:linear-gradient(90deg,transparent 0,#000 9%)}
.jg-hero-arte::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,28,16,0) 62%,rgba(60,28,16,.3) 100%)}
.jg-hero-in{position:relative;z-index:1}
.jg-hero-arte-cel{display:none}
.jg-hero-txt{width:min(100%,560px);text-align:center}
.jg-kicker{font:500 .74rem/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#fff4dc;margin:0 0 1em;text-shadow:0 1px 6px rgba(80,30,15,.45)}
.jg-titulo{margin:0;line-height:0}
.jg-titulo img{width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(80,30,15,.4))}
.jg-slogan{margin:.5em 0 0;font:700 clamp(1.15rem,2vw,1.5rem)/1.2 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:#fff1d2;text-shadow:0 2px 8px rgba(80,30,15,.55)}
.jg-lede{margin:1.2em auto 0;max-width:44ch;font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.55;font-weight:500;color:var(--barro)}
.jg-hero .jg-kicker{color:#5a2a14;text-shadow:none}
.jg-acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:1.8em}
.jg-selos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:1.4em;list-style:none}
.jg-selos li{padding:6px 13px;border-radius:999px;border:1.5px solid rgba(74,36,18,.28);background:rgba(255,246,228,.42);color:var(--barro);font:600 .82rem/1.2 var(--f-text)}

/* ===== seções ===== */
.jg-sec{padding:clamp(72px,10vw,128px) 0}
.jg-areia{background:var(--areia)}
.jg-cabeca{margin-bottom:clamp(32px,5vw,56px)}
.jg-cabeca .sec-sub{max-width:62ch}

.jg-tela{margin:0;border-radius:18px;overflow:hidden;background:#e8c9a2;box-shadow:0 2px 0 rgba(74,36,18,.08),0 24px 48px -28px rgba(74,36,18,.55);border:3px solid #3a2416}
.jg-tela img{width:100%;height:auto;display:block}
.jg-tela figcaption{padding:10px 16px 12px;font:500 .8rem/1.4 var(--f-mono);letter-spacing:.02em;color:#fbecd2;background:#3a2416}

/* a ideia */
.jg-ideia{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.jg-ideia-txt p:last-child{margin-bottom:0}

/* como se joga */
.jg-como{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.jg-passos{list-style:none;counter-reset:p;display:grid;gap:12px}
.jg-passos li{counter-increment:p;position:relative;display:grid;gap:2px;padding:14px 18px 14px 64px;background:var(--canvas);border-radius:16px;border:1px solid var(--line)}
.jg-passos li::before{content:counter(p);position:absolute;left:16px;top:50%;translate:0 -50%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--sol);color:var(--barro);font:800 1rem/1 var(--f-display);box-shadow:0 3px 0 var(--sol-sombra)}
.jg-passos b{font:700 1.05rem/1.25 var(--f-text);color:var(--green)}
.jg-passos span{color:var(--text-secondary);font-size:.98rem;line-height:1.45}

/* pedagogia */
.jg-frase{font:700 clamp(1.35rem,2.6vw,2rem)/1.3 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--accent);max-width:30ch;margin:0 0 clamp(32px,5vw,52px)}
.jg-frase span{display:block;color:var(--green)}
.jg-movs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.jg-movs li{position:relative;padding:20px 20px 22px;border-radius:18px;background:var(--areia);border:1px solid var(--line)}
.jg-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fbf3e3;font:700 .85rem/1 var(--f-mono);margin-bottom:12px}
.jg-movs b{display:block;font:800 1.25rem/1.15 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--green);margin-bottom:.3em}
.jg-movs p{margin:0;color:var(--text-secondary);font-size:.98rem;line-height:1.5}
.jg-turma{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(56px,8vw,96px)}
.jg-turma .h3{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.12 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--green);margin:0 0 .55em;text-wrap:balance}
.jg-turma-txt p:last-child{margin-bottom:0}

/* ODS: cores oficiais da ONU */
.jg-ods{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.jg-ods li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px;border-radius:18px;background:var(--canvas);border:1px solid var(--line);border-top:6px solid var(--ods)}
.jg-ods-n{display:grid;place-items:center;width:58px;height:58px;border-radius:12px;background:var(--ods);color:#fff;font:800 1.7rem/1 var(--f-display);font-variation-settings:"SOFT" 0,"WONK" 0;position:relative}
.jg-ods-n::before{content:"ODS";position:absolute;top:6px;left:0;right:0;text-align:center;font:600 .5rem/1 var(--f-mono);letter-spacing:.14em;opacity:.9}
.jg-ods-n{padding-top:9px}
.jg-ods b{display:block;font:700 1.02rem/1.25 var(--f-text);color:var(--green);margin-bottom:.35em}
.jg-ods p{margin:0;font-size:.95rem;line-height:1.5;color:var(--text-secondary)}

/* capítulos */
.jg-caps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:clamp(40px,6vw,72px)}
.jg-caps li{border-radius:16px;overflow:hidden;background:#fff8ec;border:2.5px solid #3a2416;box-shadow:0 4px 0 rgba(58,36,22,.18)}
.jg-caps img{width:100%;aspect-ratio:21/10;object-fit:cover}
.jg-caps div{padding:10px 14px 14px;display:grid;gap:2px;position:relative}
.jg-caps small{font:500 .68rem/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.jg-caps b{font:800 1.08rem/1.2 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:#4a2412}
.jg-tag{justify-self:start;margin-top:6px;padding:3px 10px;border-radius:999px;font:600 .74rem/1.3 var(--f-text);background:#e3f0d6;color:#2f5a22}
.jg-caps .breve img{filter:grayscale(1) contrast(.9);opacity:.75}
.jg-caps .breve{background:#f4efe6;border-color:#8a7c6a}
.jg-caps .breve b{color:#6b5f52}
.jg-caps .breve .jg-tag{background:#ece5da;color:#6b5f52}
.jg-tela-larga{max-width:1000px;margin-inline:auto}

/* pronto para a escola */
.jg-pronto{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.jg-pronto li{display:grid;gap:6px;justify-items:center;text-align:center;padding:26px 18px;border-radius:18px;background:var(--canvas);border:1px solid var(--line)}
.jg-pronto svg{width:40px;height:40px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.jg-pronto b{font:700 1.02rem/1.25 var(--f-text);color:var(--green)}
.jg-pronto span{font-size:.95rem;line-height:1.45;color:var(--text-secondary)}

/* para as redes de ensino */
.jg-final{position:relative;overflow:visible;overflow-x:clip;padding:clamp(72px,10vw,120px) 0 0;background:linear-gradient(180deg,#9c4a33 0%,#b65f41 48%,#cf7b5c 100%)}
.jg-final::after{content:"";position:absolute;left:-6%;right:-6%;bottom:0;height:clamp(54px,7vw,92px);background:linear-gradient(180deg,#e9bd8b,#dca673);border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:inset 0 3px 0 rgba(255,240,215,.35)}
.jg-final-in{position:relative;z-index:1}
.jg-final-in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:end}
.jg-final-in > div:first-child{padding-bottom:clamp(72px,10vw,120px)}
.jg-final .h2{color:#fffaf0;text-shadow:0 2px 10px rgba(80,30,15,.35)}
.jg-final .jg-kicker{text-align:left}
.jg-final-txt{color:#fff6e8;font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:46ch;text-shadow:0 1px 6px rgba(80,30,15,.4)}
.jg-final .jg-acoes{justify-content:flex-start}
.jg-final-trio{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;height:clamp(280px,34vw,450px);padding-bottom:clamp(22px,3vw,40px)}

.jg-final-trio img{height:100%;width:auto;display:block;filter:drop-shadow(0 10px 10px rgba(60,25,10,.25));transform-origin:50% 100%}
.jg-p-ze{height:72%;margin-right:-4%;z-index:1}
.jg-p-nina{height:86%;z-index:2}
.jg-p-tampim{height:94%;margin-left:-3%}

/* ===== deitado: a arte some atrás do texto em telas médias ===== */
@media (max-width:1100px){
  .jg-hero-arte{width:64%}
  .jg-hero-txt{width:min(100%,480px)}
}
@media (max-width:900px){
  .jg-ideia,.jg-como,.jg-turma,.jg-final-in{grid-template-columns:1fr}
  .jg-movs,.jg-ods{grid-template-columns:repeat(2,1fr)}
  .jg-caps,.jg-pronto{grid-template-columns:repeat(2,1fr)}
  .jg-final-in > div:first-child{padding-bottom:0}
  .jg-final-trio{height:320px}
}

/* ===== celular em pé: título em cima, a arte do cartaz embaixo, como a capa do jogo ===== */
@media (max-width:720px){
  .jg-hero{min-height:0;display:block;padding:92px 0 40px;background:linear-gradient(180deg,var(--ceu1) 0%,var(--ceu2) 26%,var(--ceu3) 48%,#e7b886 64%,#e2b07f 100%)}
  .jg-hero-arte{display:none}
  .jg-hero-txt{width:100%}
  .jg-titulo img{width:min(100%,440px);margin-inline:auto}
  .jg-hero-arte-cel{display:block;width:100vw;margin:-14px calc(50% - 50vw) 0;position:relative;aspect-ratio:1100/1010;background:url(jogo/abertura-poster.jpg) 50% 50%/cover no-repeat;
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 20%,#000 82%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 20%,#000 82%,transparent 100%)}
  .jg-lede{margin-top:.4em}
  .jg-hero .jg-acoes{flex-direction:column;align-items:stretch;max-width:340px;margin-inline:auto;margin-top:1.4em}

  .jg-movs,.jg-ods{grid-template-columns:1fr}
  .jg-caps{grid-template-columns:1fr 1fr;gap:10px}
  .jg-caps div{padding:8px 10px 10px}
  .jg-caps b{font-size:.95rem}
  .jg-pronto{grid-template-columns:1fr}
  .jg-pronto li{grid-template-columns:44px 1fr;justify-items:start;text-align:left;gap:2px 14px;padding:18px}
  .jg-pronto svg{grid-row:span 2;margin:0;align-self:center}
  .jg-final .jg-acoes{flex-direction:column;align-items:stretch}
  .jg-final-trio{height:270px}
}

/* =====================================================================
   MOVIMENTO (2026-11-14): abertura em vídeo, ondas entre as seções,
   Zé pulando, rio correndo, mudas brotando, telas que inclinam,
   barra do Velho Chico, trio vivo no final. jogo.js cuida da rolagem.
   ===================================================================== */

/* abertura: vídeo do Higgsfield por cima do quadro parado */
.jg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.jg-v-loop{opacity:0}
.no-loop .jg-v-loop{opacity:1}
.no-loop .jg-v-intro{opacity:0}
.jg-hero-arte::after{z-index:1}
.jg-hero-arte{animation:jgSurge 1.6s var(--ease-out) both;transform:translate3d(0,calc(var(--sy,0) * .14px),0)}
.jg-hero-in{transform:translate3d(0,calc(var(--sy,0) * .3px),0);opacity:calc(1 - var(--sy,0) / 700)}
.jg-hero .jg-kicker{animation:jgSobe .8s var(--ease-out) .15s both}
.jg-titulo img{animation:jgTitulo 1.15s var(--ease-out) .25s both}
.jg-slogan{animation:jgSobe .8s var(--ease-out) .7s both}
.jg-lede{animation:jgSobe .8s var(--ease-out) .85s both}
.jg-hero .jg-acoes{animation:jgSobe .8s var(--ease-out) 1s both}
.jg-selos li{animation:jgSobe .6s var(--ease-out) both}
.jg-selos li:nth-child(1){animation-delay:1.15s}.jg-selos li:nth-child(2){animation-delay:1.25s}.jg-selos li:nth-child(3){animation-delay:1.35s}
.jg-hero .btn-sol{position:relative;overflow:hidden}
.jg-hero .btn-sol::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:skewX(-20deg);animation:jgBrilho 5s ease-in-out 2.4s infinite;pointer-events:none}
@keyframes jgSurge{from{opacity:0}to{opacity:1}}
@keyframes jgSobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes jgTitulo{0%{opacity:0;transform:translateY(30px) scale(.86) rotate(-2deg)}60%{opacity:1;transform:translateY(-6px) scale(1.03) rotate(.6deg)}100%{opacity:1;transform:none}}
@keyframes jgBrilho{0%{left:-60%}28%,100%{left:135%}}

/* ondas de terra no topo de cada seção: a de trás desliza com a rolagem, a da frente é o chão da seção */
.jg-sec,.jg-final{position:relative}
.jg-onda{--oh:clamp(40px,5.5vw,76px);position:absolute;left:0;right:0;top:calc(1px - var(--oh));height:var(--oh);pointer-events:none;z-index:3;--c:var(--canvas);--c2:#f1e4cf}
.jg-onda i{position:absolute;top:0;bottom:0}
.jg-onda .o1{left:-50%;width:200%;background:var(--c2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 80'%3E%3Cpath d='M0 38C93 14 187 14 280 38S467 62 560 38V80H0Z'/%3E%3C/svg%3E") repeat-x 0 0/auto 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 80'%3E%3Cpath d='M0 38C93 14 187 14 280 38S467 62 560 38V80H0Z'/%3E%3C/svg%3E") repeat-x 0 0/auto 100%;
  transform:translate3d(calc(var(--p,0) * -22%),0,0);will-change:transform}
.jg-onda .o2{left:0;width:100%;background:var(--c);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M0 50C66 32 133 32 200 50S333 68 400 50V80H0Z'/%3E%3C/svg%3E") repeat-x 0 0/auto 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M0 50C66 32 133 32 200 50S333 68 400 50V80H0Z'/%3E%3C/svg%3E") repeat-x 0 0/auto 100%}
#ideia .jg-onda{--c:var(--canvas);--c2:#f3d6bd}
#como .jg-onda,#ods .jg-onda,#escola .jg-onda{--c:var(--areia);--c2:#eddcbf}
#pedagogia .jg-onda,#capitulos .jg-onda{--c:var(--canvas);--c2:#f2e7d5}
.jg-final .jg-onda{--c:#9c4a33;--c2:#c06a4b}

/* o Zé atravessa de uma seção para a outra, pulando (jogo.js move) */
.jg-ze-pula{position:absolute;left:0;bottom:calc(var(--oh) * .34);height:clamp(54px,6.4vw,88px);width:auto;
  transform:translate3d(calc(var(--zx,110) * 1vw),calc(var(--zy,0) * -1px),0) rotate(calc(var(--zr,0) * 1deg));
  transform-origin:50% 100%;filter:drop-shadow(0 8px 6px rgba(74,36,18,.22));will-change:transform}

/* o rio corre no chão da pedagogia */
.jg-rio{position:absolute;left:0;width:100%;bottom:calc(var(--oh) * -.42);height:calc(var(--oh) * .5);overflow:visible}
.jg-rio path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.jg-rio .leito{stroke:#86c6d4;stroke-width:13;opacity:.9}
.jg-rio .brilho{stroke:rgba(255,255,255,.9);stroke-width:2.5;stroke-dasharray:.018 .07;animation:jgFlui 12s linear infinite}
@keyframes jgFlui{to{stroke-dashoffset:-1}}

/* mudas que brotam no alto das ondas */
.jg-brotos{position:absolute;inset:0}
.jg-broto{position:absolute;width:calc(var(--oh) * .5);height:calc(var(--oh) * .6);left:calc(var(--oh) * (var(--k) * 5 + 1.25) - var(--oh) * .25);bottom:calc(var(--oh) * .54 - 4px);
  overflow:visible;transform:scale(0);transform-origin:50% 100%;transition:transform .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--n) * .13s + .1s)}
.jg-onda.in .jg-broto{transform:scale(1)}
.jg-broto .caule{fill:none;stroke:#4f7a3a;stroke-width:3.5;stroke-linecap:round}
.jg-broto .folha{fill:#7cb342;transform-box:view-box;transform-origin:20px 30px;animation:jgFolha 3.4s ease-in-out infinite alternate}
.jg-broto .f2{fill:#5f9a35;transform-origin:20px 24px;animation-duration:2.9s;animation-direction:alternate-reverse}
@keyframes jgFolha{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}

/* telas do jogo: aparecem e inclinam com a rolagem; a imagem corre por dentro da moldura */
.jg-tela{transform:perspective(1400px) rotateX(calc(var(--d,0) * 9deg)) scale(var(--s,1));transform-origin:50% 50%;will-change:transform}
.jg-tela img{transform:scale(1.07) translate3d(0,calc(var(--d,0) * -3%),0)}
.jg-tela figcaption{position:relative;z-index:1}
.jg-js .jg-tela{opacity:0;transition:opacity 1s var(--ease-out)}
.jg-js .jg-tela.in{opacity:1}

/* como se joga: a barra do Velho Chico enche e os passos acendem */
.jg-passos-col{display:grid;gap:14px}
.jg-medidor{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#fff6e4;border:2.5px solid #3a2416;box-shadow:0 4px 0 rgba(58,36,22,.2);font:700 .95rem/1 var(--f-text);color:var(--barro)}
.jg-medidor svg{width:22px;height:22px;fill:none;stroke:var(--river);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.jg-med-barra{flex:1;height:12px;border-radius:999px;background:#ece0c9;border:2px solid #3a2416;overflow:hidden}
.jg-med-barra i{display:block;height:100%;background:linear-gradient(90deg,#2f8fa6,#7ccbd9);transform:scaleX(var(--m,0));transform-origin:0 50%;transition:transform .3s linear}
.jg-med-num{min-width:3.1em;text-align:right;font-variant-numeric:tabular-nums}
.jg-js .jg-passos li{opacity:.5;transform:translateX(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),border-color .5s,box-shadow .5s}
.jg-passos li.on{opacity:1;transform:none;border-color:rgba(185,128,31,.45);box-shadow:0 10px 24px -18px rgba(74,36,18,.65)}
.jg-js .jg-passos li::before{background:#e6d9c2;color:#8a7c6a;box-shadow:0 3px 0 #cdbd9f;transition:background-color .4s,color .4s,box-shadow .4s,transform .4s var(--ease-out)}
.jg-passos li.on::before{background:var(--sol);color:var(--barro);box-shadow:0 3px 0 var(--sol-sombra);transform:scale(1.08)}

/* pedagogia: a frase entra palavra por palavra; os cartões caem no lugar */
.jg-js .jg-frase .fw{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i) * 55ms + .15s)}
.jg-frase.in .fw{opacity:1;transform:none}
.jg-movs li.reveal{transform:translateY(34px) rotate(-2.5deg)}
.jg-movs li.reveal:nth-child(even){transform:translateY(34px) rotate(2.5deg)}
.jg-movs li.reveal.in{transform:none}
.jg-movs li.in .jg-n{animation:jgPop .6s .35s both}
@keyframes jgPop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ODS: os cartões viram para frente, o número salta */
.jg-ods li.reveal{transform:perspective(900px) rotateX(-55deg) translateY(16px);transform-origin:50% 0}
.jg-ods li.reveal.in{transform:none}
.jg-ods li.in .jg-ods-n{animation:jgPop .7s .35s both}

/* capítulos: viram como página de livro */
.jg-caps li.reveal{transform:perspective(1000px) rotateY(-70deg);transform-origin:0 50%}
.jg-caps li.reveal.in{transform:none}
.jg-caps li.reveal.in:nth-child(1){transition-delay:0s}.jg-caps li.reveal.in:nth-child(2){transition-delay:.08s}
.jg-caps li.reveal.in:nth-child(3){transition-delay:.16s}.jg-caps li.reveal.in:nth-child(4){transition-delay:.24s}
.jg-caps li.reveal.in:nth-child(5){transition-delay:.32s}.jg-caps li.reveal.in:nth-child(6){transition-delay:.4s}
.jg-caps li.reveal.in:nth-child(7){transition-delay:.48s}.jg-caps li.reveal.in:nth-child(8){transition-delay:.56s}
.jg-caps li{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),box-shadow .3s}
.jg-caps li:not(.breve):hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 0 rgba(58,36,22,.18)}

/* pronto para a escola: os ícones se desenham */
.jg-js .jg-pronto svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out) .25s}
.jg-pronto li.in svg *{stroke-dashoffset:0}

/* final: o trio chega e fica vivo, cada um com a sua sombra no chão */
.jg-p{position:relative;display:block;transition:transform 1.1s var(--ease-out),opacity .9s var(--ease-out)}
.jg-p::after{content:"";position:absolute;left:10%;right:10%;bottom:-7px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(74,36,18,.42),rgba(74,36,18,0));z-index:-1}
.jg-p-tampim::after{left:14%;right:22%}
.jg-js .jg-p-ze{transform:translateX(-70px);opacity:0}
.jg-js .jg-p-nina{transform:translateY(40px);opacity:0}
.jg-js .jg-p-tampim{transform:translateX(80px);opacity:0}
.jg-final-trio.in .jg-p{transform:none;opacity:1}
.jg-final-trio.in .jg-p-nina{transition-delay:.25s}
.jg-final-trio.in .jg-p-tampim{transition-delay:.45s}
.jg-final-trio.in .jg-p-nina img{animation:jgRespira 3.4s ease-in-out 1.5s infinite}
.jg-final-trio.in .jg-p-tampim img{animation:jgBalanca 4.8s ease-in-out 1.8s infinite}
.jg-final-trio.in .jg-p-ze img{animation:jgPulinho 5.4s ease-in-out 2.2s infinite}
@keyframes jgRespira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
@keyframes jgBalanca{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.3deg)}}
@keyframes jgPulinho{0%,68%,100%{transform:translateY(0)}74%{transform:translateY(-18px) rotate(-3deg)}80%{transform:translateY(0)}85%{transform:translateY(-6px)}90%{transform:translateY(0)}}

/* celular: sem profundidade na abertura (a arte está no meio do texto) */
@media (max-width:720px){
  .jg-hero-in,.jg-hero-arte{transform:none;opacity:1}
  .jg-tela{transform:perspective(1000px) rotateX(calc(var(--d,0) * 6deg)) scale(var(--s,1))}
}

/* quem pede menos movimento: tudo parado e completo */
@media (prefers-reduced-motion:reduce){
  .jg-hero *,.jg-hero-arte,.jg-p img,.jg-broto .folha,.jg-rio .brilho,.jg-movs .jg-n,.jg-ods .jg-ods-n{animation:none!important}
  .jg-hero .btn-sol::after,.jg-ze-pula{display:none}
  .jg-hero-in,.jg-hero-arte,.jg-onda .o1,.jg-tela,.jg-tela img,.jg-broto,.jg-p,.jg-passos li,.jg-movs li,.jg-ods li,.jg-caps li{transform:none!important}
  .jg-hero-in,.jg-hero-arte,.jg-tela,.jg-p,.jg-passos li,.jg-frase .fw{opacity:1!important}
  .jg-frase .fw{transform:none!important}
  .jg-pronto svg *{stroke-dashoffset:0!important}
}

/* =====================================================================
   FINAL com cena pintada em vídeo (2026-11-14): os três juntos no pôr do sol
   (GPT Image 2.6 + Seedance 2.0), no lugar dos recortes. Texto escuro no céu claro.
   ===================================================================== */
.jg-final{padding:0;background:#e79a74;min-height:clamp(560px,50vw,860px);display:flex;align-items:center}
.jg-final::after{display:none}
.jg-final .jg-onda{--c:#e68d85;--c2:#eeb49b}
.jg-final-cena{position:absolute;inset:0;overflow:hidden;background:url(jogo/final-poster.jpg) 70% 60%/cover no-repeat}
.jg-final-cena::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,236,214,.5) 0%,rgba(255,236,214,.28) 32%,rgba(255,236,214,0) 52%)}
.jg-v-final{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 60%;display:block}
.jg-final-in{position:relative;z-index:1;display:block;width:auto;margin:0 0 0 clamp(16px,8.3vw,160px);padding:clamp(80px,9vw,120px) 0}
.jg-final-in > div:first-child{padding-bottom:0}
.jg-final-txtbox{max-width:min(470px,34vw)}
.jg-final .jg-kicker{color:#8f3d20;text-shadow:none;font-weight:600}
.jg-final .h2{color:#3d1f10;text-shadow:0 1px 0 rgba(255,240,220,.3)}
.jg-final-txt{color:#4a2412;text-shadow:none;font-weight:500}
@media (max-width:1000px){
  .jg-final{display:flex;flex-direction:column;align-items:stretch;min-height:0;background:linear-gradient(180deg,#e68d85 0%,#e79a74 100%)}
  .jg-final-in{order:1;padding:72px 0 8px;margin-inline:auto;width:min(100% - 2*var(--gutter),720px)}
  .jg-final-txtbox{max-width:none}
  .jg-final-cena{order:2;position:relative;inset:auto;aspect-ratio:3/2;background-position:90% 60%;
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 16%);mask:linear-gradient(180deg,transparent 0,#000 16%)}
  .jg-final-cena::after{display:none}
  .jg-v-final{object-position:90% 60%}
}
/* computador: a própria cena sobe e termina em onda (sem faixa rosa reta entre a onda e o céu) */
@media (min-width:1001px){
  .jg-final .jg-onda{display:none}
  .jg-final-cena{--oh:clamp(40px,5.5vw,76px);top:calc(-1 * var(--oh) + 1px);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M0 50C66 32 133 32 200 50S333 68 400 50V80H0Z'/%3E%3C/svg%3E") 0 0/auto var(--oh) repeat-x,linear-gradient(#000,#000) 0 calc(var(--oh) - 1px)/100% 100% no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80'%3E%3Cpath d='M0 50C66 32 133 32 200 50S333 68 400 50V80H0Z'/%3E%3C/svg%3E") 0 0/auto var(--oh) repeat-x,linear-gradient(#000,#000) 0 calc(var(--oh) - 1px)/100% 100% no-repeat}
}