/* =========================================================
   AURIFEX STUDIO :: página Galeria (04/11/2026, chave GALERIA em gerador/montar.py)
   O lanche que se abre na rolagem, a mesa de peças com filtro e a janela que mostra a peça em tamanho maior.
   Em Recursos fica só o atalho (.atalho-galeria).
   ========================================================= */

/* ---------- a abertura: o lanche anda com a rolagem, em quadro preso ---------- */
.gal-capa{padding:0;border-bottom:0;height:calc(100svh + 85svh)}
.gal-capa-fixa{position:sticky;top:var(--topo-a);height:calc(100svh - var(--topo-a));display:grid;align-items:center;overflow:hidden}
.gal-capa .miolo{width:100%;height:100%;padding-block:clamp(14px,2.4vh,28px);align-items:center;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);box-sizing:border-box}
.gal-capa .gal-ir{margin-top:6px}
html:not(.mov) .gal-capa{height:auto}
html:not(.mov) .gal-capa-fixa{position:static;height:auto}
html:not(.mov) .gal-capa .miolo{height:min(calc(100svh - var(--topo-a)),760px)}

.lanche{position:relative;margin:0;height:100%;max-height:640px;aspect-ratio:4/5;justify-self:center;align-self:center;min-height:0}
.lanche-pilha{position:absolute;inset:0;transform-origin:50% 85%;will-change:transform}
.lanche-camada{position:absolute;display:block;max-width:none;will-change:transform;backface-visibility:hidden}
.lanche-chao{position:absolute;left:0;right:0;bottom:0;height:14.9%;pointer-events:none}
.lanche-chao img{display:block;width:100%;height:100%}
.lanche-rot{position:absolute;left:75%;top:var(--y);display:flex;align-items:center;gap:0;transform:translateY(-50%);white-space:nowrap;opacity:0;transition:opacity .45s var(--curva);pointer-events:none}
.lanche-rot i{display:block;width:34px;height:1px;background:var(--ouro);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--curva);position:relative}
.lanche-rot i::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 3px rgb(var(--fundo-rgb)/.7)}
.lanche-rot b{padding-left:9px;font-size:14.5px;font-weight:500;color:var(--texto);transform:translateX(-6px);transition:transform .55s var(--curva)}
.lanche-rot.on{opacity:1}
.lanche-rot.on i{transform:none}
.lanche-rot.on b{transform:none}
.lanche-dica{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:4px;background:rgb(var(--fundo-rgb)/.78);font-size:13.5px;color:var(--texto);white-space:nowrap;transition:opacity .35s}
.lanche-dica svg{width:16px;height:16px;fill:none;stroke:var(--ouro);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:lanche-seta 1.6s var(--curva) infinite}
@keyframes lanche-seta{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.lanche.aberto .lanche-dica{opacity:0}
.lanche figcaption{position:absolute;right:-6px;bottom:6px;font-size:12px;color:var(--texto-3);opacity:0;transition:opacity .5s}
.lanche.aberto figcaption{opacity:1}
html:not(.mov) .lanche-dica{display:none}
html:not(.mov) .lanche figcaption{opacity:1}

/* ---------- a mesa de peças ---------- */
.gal-lista{padding-block:clamp(44px,5.6vw,84px) clamp(48px,6vw,92px);border-top:1px solid var(--linha);background:rgb(var(--fundo-rgb)/.86);position:relative}
.gal-filtro{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,32px);position:sticky;top:var(--topo-a);z-index:30;padding-block:10px;background:var(--fundo)}
.gal-filtro .chip{min-height:38px}
.gal-filtro .chip .num{opacity:.72;font-size:12.5px;margin-left:5px}
.gal-grade{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;align-items:start}
.gal-grade.disposta{display:block}
.gal-grade.disposta .quadro{position:absolute;left:0;top:0;width:var(--larg,33%)}
.gal-grade.anima .quadro{transition:transform .8s var(--curva),opacity .38s var(--curva),visibility 0s linear 0s}
.quadro{position:relative;min-width:0}
.quadro.fora{opacity:0;visibility:hidden;pointer-events:none}
.gal-grade.anima .quadro.fora{transition:opacity .28s var(--curva),visibility 0s linear .28s}
.quadro-midia{position:relative;overflow:hidden;border-radius:var(--raio);aspect-ratio:var(--ar);background:var(--cartao);border:1px solid var(--linha);box-shadow:0 14px 26px -16px rgba(0,0,0,.72);transition:transform .5s var(--curva),border-color .3s}
.quadro-midia img,.quadro-midia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--curva)}
.quadro-midia video{opacity:0;transition:opacity .5s var(--curva),transform .9s var(--curva)}
.quadro-midia video.tocando{opacity:1}
.quadro-selo{position:absolute;left:10px;top:10px;padding:5px 9px;font-size:12.5px;font-weight:600;color:var(--sobre-ouro);background:var(--ouro);border-radius:3px;pointer-events:none}
.quadro-texto{display:grid;gap:5px;padding-top:12px}
.quadro-texto small{font-size:13px;color:var(--texto-3)}
.quadro-texto h3{font-size:clamp(17.5px,1.45vw,20px);font-weight:500;letter-spacing:-.015em;line-height:1.2;margin:0}
.quadro-texto p{font-size:15px;line-height:1.5;color:var(--texto-2);max-width:48ch}
.quadro-abrir{all:unset;cursor:pointer;background:linear-gradient(var(--ouro),var(--ouro)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--curva)}
.quadro-abrir::after{content:"";position:absolute;inset:0;z-index:2}
.quadro-abrir:focus-visible::after{outline:2px solid var(--ouro);outline-offset:3px;border-radius:var(--raio)}
@media (hover:hover){
  .quadro:hover .quadro-midia{transform:translateY(-5px);border-color:var(--linha-forte)}
  .quadro:hover .quadro-midia img,.quadro:hover .quadro-midia video{transform:scale(1.03)}
  .quadro:hover .quadro-abrir{background-size:100% 1px}
}
.quadro:active .quadro-midia{transform:scale(.985)}

/* ---------- a janela ---------- */
html.gj-aberta{overflow:hidden;scrollbar-gutter:stable}
.gal-janela{border:0;padding:0;margin:auto;background:transparent;color:var(--texto);max-width:none;max-height:none;width:min(1240px,calc(100vw - 48px));height:min(720px,calc(100svh - 40px));overflow:visible}
.gal-janela::backdrop{background:rgb(5 8 14/.82);backdrop-filter:blur(3px)}
.gal-janela[open]{animation:gj-abre .42s var(--curva)}
.gal-janela.fechando{animation:gj-fecha .22s ease-in forwards}
@keyframes gj-abre{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes gj-fecha{to{opacity:0;transform:translateY(8px) scale(.99)}}
.gj-caixa{position:relative;display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);height:100%;background:var(--cartao);border:1px solid var(--linha-forte);border-radius:8px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.gj-midia{position:relative;min-width:0;min-height:0;background:#070a11;display:grid;place-items:center;overflow:hidden;touch-action:pan-y}
.gj-midia > video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;animation:gj-entra .7s var(--curva)}
@keyframes gj-entra{from{opacity:0;transform:scale(1.025)}}
.gj-pausa{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid rgb(255 255 255/.28);border-radius:4px;background:rgb(7 10 17/.72);color:#fff;font:500 13.5px/1 var(--texto-f);cursor:pointer}
.gj-pausa:hover{border-color:#fff}
.gj-lado{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:clamp(20px,2.2vw,30px);min-height:0;min-width:0}
.gj-info{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;scrollbar-width:thin}
.gj-info small{order:1;font-size:13.5px;color:var(--texto-3)}
.gj-info h2{order:2;font-size:clamp(23px,2.2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.12;padding-right:40px;margin:0}
.gj-info > p{order:3;font-size:15.5px;line-height:1.5;color:var(--texto-2);margin:0}
.gj-info .gj-nota{order:4;font-size:13px;color:var(--texto-3)}
.gj-viva{order:5;margin-top:4px}
.gj-viva:empty{display:none}
.gj-viva{display:grid;gap:10px}
.gj-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--linha)}
.gj-passar{display:flex;align-items:center;gap:6px}
.gj-passar .num{font-size:13.5px;color:var(--texto-2);min-width:46px;text-align:center;white-space:nowrap}
.gj-seta,.gj-fechar{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:transparent;color:var(--texto);cursor:pointer;transition:border-color .25s,transform .25s var(--curva)}
.gj-seta:hover,.gj-fechar:hover{border-color:var(--ouro)}
.gj-seta:active{transform:scale(.94)}
.gj-seta svg,.gj-fechar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gj-fechar{position:absolute;top:12px;right:12px;z-index:5;background:var(--cartao)}

/* a peça do copo dentro da janela: o desenho no lugar da imagem, as bebidas ao lado */
.gj-midia > .mostra-palco{height:100%;width:auto;max-width:100%;max-height:100%;aspect-ratio:1;border-radius:0;box-shadow:none;animation:gj-entra .7s var(--curva)}
.gj-viva .mostra-chips{display:flex;flex-wrap:wrap;gap:6px}
.gj-viva .mostra-chips .chip{min-height:34px;padding:7px 11px;font-size:13.5px}
.gj-viva .copo-cartao{padding:14px 16px}
.gj-viva .copo-nome{font-size:19px}

/* os simuladores: duas imagens empilhadas que se dissolvem, com o reflexo só durante a troca */
.troca-palco{position:absolute;inset:0;overflow:hidden}
.troca-palco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .95s var(--curva),transform 1.6s var(--curva);transform:scale(1.025)}
.troca-palco img.on{opacity:1;transform:none;z-index:1}
.troca-palco::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;z-index:2;background:linear-gradient(100deg,transparent,rgb(255 255 255/.16),transparent);opacity:0;pointer-events:none}
.troca-palco.trocando::after{animation:troca-reflexo 1s var(--curva)}
@keyframes troca-reflexo{0%{left:-40%;opacity:1}100%{left:110%;opacity:0}}
.troca-legenda{position:absolute;left:12px;bottom:12px;z-index:3;padding:7px 11px;font-size:13.5px;font-weight:500;border-radius:4px;background:rgb(7 10 17/.72);color:#fff}
.troca-grupo{display:grid;gap:7px}
.troca-grupo > span{font-size:13px;color:var(--texto-3)}
.troca-botoes{display:flex;flex-wrap:wrap;gap:6px}
.troca-botoes .chip{min-height:34px;padding:7px 11px;font-size:13.5px}
.troca-opcao{display:inline-flex;align-items:center;gap:7px}
.troca-opcao i{display:block;width:15px;height:15px;border-radius:3px;background:var(--c) center/cover;box-shadow:inset 0 0 0 1px rgb(255 255 255/.28)}

/* a mesa com muitas peças (chave GALERIA_TELAS): a fila dos ramos rola com a página, só a dos tipos fica presa (livro 9.1) */
.gal-filtro.gal-ramos{position:static;z-index:auto;padding-block:0;margin-top:calc(clamp(20px,2.4vw,32px) * -.55);background:none}
.gal-ramos .chip{min-height:34px;padding:6px 12px;font-size:13.5px}
.gal-mais{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(30px,3.4vw,46px)}
.gal-mais[hidden]{display:none}
.gal-mais .num{font-size:13.5px;color:var(--texto-3)}

/* gravação de tela (chave GALERIA_TELAS): a tela do site é o assunto, então ela fica com a maior parte da janela */
.gj-caixa.gj-gravacao{grid-template-columns:minmax(0,2.5fr) minmax(320px,1fr)}
.gj-gravacao .gj-lado{grid-template-columns:minmax(0,1fr)}
.gj-gravacao .gj-rodape{flex-wrap:wrap}
@media (max-width:760px){
  /* no celular a gravação em pé vai inteira, sem cortar; o texto fica no que sobra */
  .gj-caixa.gj-gravacao,.gj-caixa.gj-gravacao.em-pe{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .gj-caixa.gj-gravacao.em-pe .gj-midia > video{object-fit:contain}
  .gj-gravacao .gj-lado{padding-top:10px}
  .gj-gravacao .gj-info small,.gj-gravacao .gj-info > p:not(.gj-nota){display:none}
  /* em cima, à esquerda: embaixo cobriria a barra de atalhos que aparece na própria gravação */
  .gj-gravacao .gj-pausa{left:8px;top:12px;bottom:auto;min-height:44px;padding:0 11px;font-size:12.5px}
  /* 06/11/2026 (revisão geral): o "Pausar" ficava em cima do logo do site gravado e o "×" ao lado do menu dele, parecendo
     dois botões brigando. Um véu escuro no alto do vídeo apaga o cabeçalho gravado só ali, e os dois controles leem como
     controles da janela. O vídeo continua do mesmo tamanho */
  .gj-gravacao .gj-midia::before{content:"";position:absolute;left:0;right:0;top:0;height:80px;z-index:2;pointer-events:none;
    background:linear-gradient(#070a11,#070a11 60%,rgb(7 10 17/0))}
  .gj-gravacao .gj-pausa{z-index:3}
}

/* tela média: a coluna é estreita para a altura; a figura encolhe e deixa à direita o lugar das legendas */
@media (min-width:901px) and (max-width:1240px){
  .lanche{height:auto;width:min(calc(100% - 132px),calc((100svh - var(--topo-a) - 40px) * .8));justify-self:start}
}

/* ---------- celular ---------- */
@media (max-width:900px){
  .gal-capa .miolo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;align-content:start}
  .gal-capa .texto{gap:8px}
  .gal-capa h1{font-size:clamp(27px,7.4vw,44px)}
  .gal-capa .lead{font-size:15px;line-height:1.45}
  .gal-capa .gal-ir{display:none}
  /* a altura que sobra depois do texto e da barra de atalhos manda no tamanho; à direita fica o lugar das legendas */
  .lanche{height:auto;max-height:none;width:min(calc(100% - 104px),calc((100svh - 352px) * .8));align-self:center;justify-self:start;margin-left:clamp(0px,calc(50vw - 186px),260px)}
  .lanche-rot{left:73%}
  .lanche-rot i{width:16px}
  .lanche-rot b{padding-left:6px;font-size:12.5px}
  .gal-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  /* a barra de atalhos do celular fica por cima do fim do quadro */
  .gal-capa-fixa{height:calc(100svh - var(--topo-a) - 62px)}
  .gal-capa{height:calc(100svh + 70svh)}
  .gal-filtro{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(clamp(18px,4.2vw,56px) * -1);padding-inline:clamp(18px,4.2vw,56px)}
  .gal-filtro::-webkit-scrollbar{display:none}
  .gal-filtro .chip{flex:none}
  .gal-grade{grid-template-columns:minmax(0,1fr);gap:26px}
  .gal-janela{width:100vw;height:100svh;max-height:100svh}
  .gj-caixa{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,44svh) minmax(0,1fr);border:0;border-radius:0}
  /* o vídeo em pé enche a moldura; o guia, que tem texto para ler, sai inteiro (ver gerador/gravar_galeria.py) */
  .gj-caixa.em-pe{grid-template-rows:minmax(0,60svh) minmax(0,1fr)}
  .gj-caixa.em-pe .gj-midia > video{object-fit:cover}
  .gj-lado{padding:12px 16px calc(10px + env(safe-area-inset-bottom));gap:9px}
  .gj-info{gap:7px}
  .gj-info h2{font-size:21px;padding-right:0}
  .gj-info > p{font-size:14.5px;line-height:1.42}
  /* nos simuladores, os botões vêm logo abaixo da imagem, para ver a troca enquanto toca */
  .gj-viva{order:0;margin:0 -16px 4px;padding:0 16px;min-width:0}
  .troca-botoes,.gj-viva .mostra-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .troca-botoes::-webkit-scrollbar,.gj-viva .mostra-chips::-webkit-scrollbar{display:none}
  .troca-botoes .chip,.gj-viva .mostra-chips .chip{flex:none}
  .gj-rodape{padding-top:9px;gap:8px}
  .gj-quero{flex:1;justify-content:center;padding-inline:10px;white-space:nowrap}
  .gj-passar .num{min-width:40px;font-size:12.5px}
  .gj-fechar{background:rgb(7 10 17/.72);color:#fff;border-color:rgb(255 255 255/.28)}
  .quadro-texto p{display:none}
}

/* ---------- Recursos: o atalho para a Galeria ---------- */
.atalho-galeria{padding-block:clamp(44px,5.6vw,84px)}
.atalho-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:clamp(20px,2.4vw,30px)}
.atalho-item{display:grid;gap:10px;color:var(--texto);text-decoration:none;font-size:16px}
.atalho-item b{font-weight:500}
.atalho-foto{display:block;overflow:hidden;aspect-ratio:16/10;border-radius:var(--raio);border:1px solid var(--linha);background:var(--cartao)}
.atalho-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--curva)}
@media (hover:hover){.atalho-item:hover .atalho-foto img{transform:scale(1.03)}}
@media (max-width:760px){
  .atalho-trio{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(clamp(18px,4.2vw,56px) * -1);padding-inline:clamp(18px,4.2vw,56px)}
  .atalho-trio::-webkit-scrollbar{display:none}
  .atalho-item{scroll-snap-align:center}
}