/* Página do No-Hi (PT em /no-hi/ e EN em /en/no-hi/): slides horizontais. Usado pelas duas versões. */
/* Página em slides HORIZONTAIS: cada slide ocupa a tela; a roda do mouse vira "próximo/anterior" (script no fim).
   O palco (.palco) é 16:9 e cabe na tela, pra trailer e imagens (todos 16:9) encaixarem sem corte. */
html,body{height:100%;overflow:hidden}
body{background:var(--bg)}
.deck{display:flex;height:100vh;height:100svh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overflow-x:hidden;scroll-padding-bottom:4.6rem;
  display:flex;padding:clamp(1rem,4vh,2.6rem) clamp(1rem,5vw,4.5rem) 4.6rem;position:relative}
/* margin:auto centraliza quando sobra espaço e, quando falta, deixa rolar sem cortar o topo (justify-content:center cortaria) */
.slide>.in{margin:auto;width:100%;display:flex;flex-direction:column;align-items:center}
.slide:focus{outline:none}
.slide.foco-tab{outline:2px solid var(--a);outline-offset:-4px}   /* só quando o Tab para no próprio slide (slide que rola sem link) */
/* palco 16:9 que cabe na altura disponível (desconta o título e a barra de baixo) */
.palco{width:min(100%,calc((100vh - 11rem) * 16 / 9));width:min(100%,calc((100svh - 11rem) * 16 / 9));min-width:min(100%,18rem)}
#inicio .palco{width:min(100%,calc((100vh - 18rem) * 16 / 9));width:min(100%,calc((100svh - 18rem) * 16 / 9))}
.r169{aspect-ratio:16/9;width:100%}
.slide h2{margin:0 0 .8rem;text-align:center}
.slide p{max-width:44rem}
/* barra de navegação (bolinhas + setas) */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem;z-index:5;background:linear-gradient(transparent,#07060acc 40%)}
.nav .dots{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.nav .dots a{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%}   /* alvo de 24px (a bolinha desenhada é menor) */
.nav .dots a::before{content:"";box-sizing:border-box;width:.8rem;height:.8rem;border-radius:50%;border:2px solid var(--a);opacity:.6}
.nav .dots a[aria-current="true"]::before{background:var(--a);opacity:1}
.nav button{background:#000a;border:1px solid var(--a);color:var(--a);border-radius:.4rem;font:inherit;padding:.25rem .7rem;cursor:pointer;min-height:1.6rem}
.nav button[aria-disabled="true"]{opacity:.3;cursor:default}
.nav .rot{font-size:.75rem;color:var(--muted);width:13.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
@media (max-width:30rem){.nav .rot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}   /* some da tela, mas o leitor de tela ainda anuncia */
/* 1. início */
.topo{text-align:center;margin-bottom:.8rem}
.topo h1{margin:0}
.tagline{color:var(--muted);margin:.2rem auto 0}
.trailer{position:relative;display:block;border:1px solid var(--line);border-radius:.6rem;overflow:hidden;background:#000}
.trailer a{display:block;height:100%}
.trailer a:focus-visible{outline:3px solid var(--a);outline-offset:-3px}
.trailer img{width:100%;height:100%;display:block;border:0;object-fit:cover}
.trailer .play{position:absolute;inset:0;display:grid;place-items:center;font-size:3.4rem;color:#fff;text-shadow:0 0 18px #000;pointer-events:none}
.acoes{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin:1rem auto 0}
/* 2. imagens pinadas (3×2 dentro do palco 16:9) */
.mural{list-style:none;padding:.6rem 0 0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2.4vw,2rem)}
@media (max-width:40rem){.mural{grid-template-columns:repeat(2,1fr)}}
.mural li{position:relative;transform:rotate(var(--r,0deg));transition:transform .2s}
.mural li:nth-child(6n+1){--r:-3deg}.mural li:nth-child(6n+2){--r:2deg}.mural li:nth-child(6n+3){--r:-1.5deg}
.mural li:nth-child(6n+4){--r:2.5deg}.mural li:nth-child(6n+5){--r:-2deg}.mural li:nth-child(6n){--r:1.5deg}
.mural li:hover,.mural li:focus-within{transform:rotate(0) scale(1.05);z-index:1}
.mural a{display:block;background:#f2efe6;padding:.4rem .4rem 1.2rem;border-radius:.15rem;box-shadow:0 6px 18px #000a}
.mural img{width:100%;height:auto;display:block}
.mural li::before{content:"";position:absolute;top:-.45rem;left:50%;width:.9rem;height:.9rem;margin-left:-.45rem;border-radius:50%;background:var(--b);box-shadow:0 2px 4px #000a,inset -2px -2px 0 #0004;z-index:1}
.mural li:nth-child(3n+2)::before{background:var(--a)}.mural li:nth-child(3n)::before{background:var(--c)}
/* slides de texto + mídia lado a lado */
.lado{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1rem,3vw,2.4rem);align-items:center;width:min(100%,64rem)}
@media (max-width:48rem){.lado{grid-template-columns:1fr}}
.lado img{width:100%;height:auto;display:block}
.trio{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.trio a:first-child{grid-column:1/-1}
.trio img{border:1px solid var(--line);border-radius:.4rem}
/* personagens: persona (a dos diálogos) com a forma animal (a do jogo) no canto; passar o mouse troca pra expressão feliz */
.elenco{list-style:none;padding:0;margin:.4rem 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem .8rem;align-items:start}
.elenco a{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none}
.elenco .persona{position:relative;display:block;width:100%}
.elenco .persona img{display:block;width:100%;height:calc((100vh - 17rem) / 2.3);height:calc((100svh - 17rem) / 2.3);max-height:15rem;min-height:5rem;object-fit:contain;object-position:bottom;filter:drop-shadow(0 6px 10px #000a)}
.elenco .persona .feliz{position:absolute;inset:0;opacity:0;transition:opacity .15s}
.elenco a:hover .feliz,.elenco a:focus-visible .feliz{opacity:1}
.elenco .animal{position:absolute;right:-6%;bottom:1.3rem;width:46%;max-width:6.5rem;pointer-events:none}
.elenco .animal img,.elenco video.animal{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px #000c)}
.elenco .nome{font-size:.85rem;margin-top:.2rem;text-align:center}
@media (max-width:48rem){.elenco{grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem .5rem}.elenco .persona img{height:7rem;min-height:0}.elenco .nome{font-size:.7rem}}
#demo{isolation:isolate}
.corre{position:absolute;left:0;right:0;bottom:3.4rem;width:100%;height:auto;max-height:22vh;object-fit:contain;pointer-events:none;opacity:.9;z-index:-1}
@media (max-width:48rem),(max-height:30rem){.corre{display:none}}
.estudio{display:flex;gap:1rem;align-items:center}
.estudio img{width:4.5rem;height:auto;flex:none}
.emails{list-style:none;padding:0;margin:0 0 .4rem}.emails li{padding:.2rem 0}.emails span{color:var(--muted);display:inline-block;min-width:8.5rem}
.press{border:1px dashed var(--line);border-radius:.6rem;padding:1rem;margin-top:1rem}
.press h3{color:var(--c);margin-bottom:.5rem}
.logos{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.logos img{height:3.2rem;width:auto}
.rodape{text-align:center;font-size:.85rem;color:var(--muted);margin-top:1.4rem}
/* janelas: imagem ampliada e trailer */
dialog.zoom{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible}
dialog::backdrop{background:#000d}
dialog.zoom img{display:block;margin:0 auto;max-width:96vw;max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem);width:auto;height:auto;border-radius:.4rem}
dialog.zoom p{color:var(--fg);font-size:.85rem;margin:.6rem auto 0;max-width:60rem;text-align:center}
dialog .ctl{display:flex;justify-content:center;gap:.8rem;margin-top:.6rem}
dialog.video{border:0;padding:0;background:transparent;width:min(96vw,calc((100vh - 6rem) * 16 / 9));width:min(96vw,calc((100dvh - 6rem) * 16 / 9));max-width:96vw;overflow:visible}
dialog.video .tela{aspect-ratio:16/9;width:100%;background:#000;border-radius:.4rem;overflow:hidden}
dialog.video iframe{width:100%;height:100%;border:0;display:block}
/* celular deitado / tela baixa: tudo mais compacto */
@media (max-height:30rem){.slide{padding-top:.6rem;padding-bottom:3.2rem;scroll-padding-bottom:3.2rem}.topo{margin-bottom:.4rem}.topo h1{font-size:1.5rem}.tagline{display:none}
  .acoes{margin-top:.5rem}.btn.big{font-size:.9rem;padding:.4rem .9rem}#inicio .palco{width:min(100%,calc((100svh - 9rem)*16/9))}
  .palco{width:min(100%,calc((100svh - 6.5rem)*16/9))}.nav{padding:.3rem}.elenco .persona img{height:22vh}
  .elenco{grid-template-columns:repeat(6,minmax(0,1fr))}.elenco .nome{font-size:.7rem;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.deck{scroll-behavior:auto}.mural li{transition:none}.corre{display:none}}