/* "A câmera anda para frente" (Projetos e Acervo): camada que fica no palco depois que a câmera passa pelo Aluísio */
.cam-espaco{pointer-events:none}
.cam-ativa #conteudo{pointer-events:none}
.cam-camada{position:absolute;inset:0;z-index:4;visibility:hidden;opacity:0;transform-origin:50% 45%;will-change:transform,opacity}
/* área livre entre o notch (em cima) e a barra de baixo */
.cam-area{position:absolute;left:0;right:0;top:12%;bottom:calc(var(--barra) + 84px)}

/* Faixa que desliza na horizontal: só desliza quando enche (classe "cheio", posta pelo js/app/rolo.js) */
.rolo{position:relative;height:100%}
.rolo-trilho{height:100%;margin:0 max(60px,6vw);overflow-x:hidden;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.rolo-trilho::-webkit-scrollbar{display:none}
.rolo.cheio .rolo-trilho{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rolo-seta{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;display:none;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:#FFFFFF;color:#4A4740;cursor:pointer;box-shadow:0 4px 14px rgba(28,36,48,.16);z-index:3;transition:opacity 200ms ease}
.rolo.cheio .rolo-seta{display:flex}
.rolo-seta.esq{left:12px}.rolo-seta.esq svg{transform:rotate(90deg)}
.rolo-seta.dir{right:12px}.rolo-seta.dir svg{transform:rotate(-90deg)}
.rolo-seta:hover{color:var(--azul-escuro)}
.rolo-seta:disabled{opacity:.35;cursor:default}
.rolo-seta:focus-visible{outline:2px solid var(--azul);outline-offset:3px}

/* Janela de tela inteira (página do projeto e livro aberto) */
.janela{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#FFFFFF;color:var(--tinta);overscroll-behavior:contain;animation:janela-abre 320ms cubic-bezier(.2,.8,.3,1)}
.janela::backdrop{background:#FFFFFF}
@keyframes janela-abre{from{opacity:0;transform:scale(.96)}}
.janela-interior{max-width:780px;margin:0 auto;padding:96px 24px 80px;display:flex;flex-direction:column;gap:16px}
.janela-fechar{position:fixed;right:22px;top:20px;z-index:2;min-height:44px;padding:10px 20px;border:0;border-radius:999px;background:#FFFFFF;color:var(--azul-escuro);font-size:15px;cursor:pointer;box-shadow:6px 6px 14px var(--sombra),-6px -6px 14px var(--luz)}
.janela-fechar:active{box-shadow:inset 4px 4px 10px rgba(var(--sombra-rgb),.6),inset -4px -4px 10px var(--luz)}
.janela h2{margin:0;font-size:32px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.janela p{margin:0;font-size:17px;line-height:1.65;color:#2A3240}
@media (max-width:760px){
  .cam-area{top:11%;bottom:calc(var(--barra) + 70px)}
  .rolo-trilho{margin:0 46px}
  .rolo-seta.esq{left:8px}.rolo-seta.dir{right:8px}
  .janela-interior{padding:84px 18px 60px}
  .janela h2{font-size:25px}
  .janela p{font-size:16px}
}
@media not all{.janela{animation:none}}