/* EFOR® STUDIO — galeria de inspiração da seção 01 · Site (o carro-chefe) e o diálogo que mostra a referência inteira.
   O esqueleto (grade 3/2/1 e janela 4:5) está em estilo.css. Aqui entram a cara de janela, o mural do desktop, o
   carrossel do celular e os estados que motion/galeria.js liga na grade:
   .gal-mural (formas e ordem do mural) · .gal-viva (a página rola dentro do cartão) · .gal-entra (entrada em gota). */
.gal{--gal-barra:40px;--gal-raio:24px}
.gal-grade{gap:34px 20px}
.gal-item{display:flex;min-width:0}
.gal-cartao{position:relative;display:flex;flex-direction:column;width:100%;border-radius:var(--gal-raio);-webkit-tap-highlight-color:transparent}
.gal-cartao:focus-visible{outline-offset:6px;border-radius:calc(var(--gal-raio) + 5px)}

/* A janela: barra de navegador com os três pontos (no desenho da janela do palco) e a página logo abaixo. */
.gal-janela{position:relative;flex:1 1 auto;padding-top:var(--gal-barra);border-radius:var(--gal-raio);background:var(--grafite);box-shadow:0 0 0 1px rgba(243,243,239,.1),0 28px 64px rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.28);transition:transform .6s var(--suave),box-shadow .6s var(--suave)}
.gal-janela::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:var(--gal-barra);background:radial-gradient(circle at 20px 50%,#4b4f47 0 4.5px,transparent 5.2px),radial-gradient(circle at 35px 50%,#4b4f47 0 4.5px,transparent 5.2px),radial-gradient(circle at 50px 50%,#4b4f47 0 4.5px,transparent 5.2px),var(--grafite);box-shadow:0 1px 0 rgba(243,243,239,.07)}
/* O nome da referência no lugar do endereço. */
.gal-cartao::after{content:attr(data-nome);position:absolute;z-index:3;left:50%;top:calc((var(--gal-barra) - 24px)/2);max-width:calc(100% - 150px);height:24px;padding:0 14px;border-radius:99px;background:#30342d;color:var(--cinza-claro);font-size:12px;font-weight:500;line-height:24px;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-50%);pointer-events:none}
.gal-legenda{flex:none;flex-direction:column;align-items:flex-start;gap:3px;margin-top:14px;padding-inline:4px;font-size:16px}
.gal-legenda strong{line-height:1.25}
.gal-legenda small{font-size:13px}
@media(hover:hover){
  .gal-cartao:hover .gal-janela{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(243,243,239,.16),0 40px 80px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.3)}
}

/* Com JS: a imagem deixa de ser um recorte parado e vira a página, que o script posiciona e move só com transform. */
.gal-viva .gal-janela img{position:absolute;left:0;top:var(--gal-barra);width:100%;max-width:none;height:auto;object-fit:fill;transform:translate3d(0,0,0);backface-visibility:hidden}

/* Mural (desktop): seis colunas. Grande = dois terços; alta = um terço, com a altura da vizinha; faixa = três janelas baixas. */
@media(min-width:1100px){
  .gal-mural{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense}
  .gal-mural .gal-item{grid-column:span 2}
  .gal-mural .gal-item[data-forma="grande"]{grid-column:span 4}
  .gal-mural [data-forma="grande"] .gal-janela{flex:none;aspect-ratio:14/9}
  .gal-mural [data-forma="faixa"] .gal-janela{flex:none;aspect-ratio:4/3}
  .gal-mural [data-forma="alta"] .gal-janela{aspect-ratio:auto;min-height:320px}
}
/* Tablet: a primeira ocupa a largura toda; as outras, duas a duas, todas em 4:3. */
@media(min-width:700px) and (max-width:1099px){
  .gal-mural .gal-janela{flex:none;aspect-ratio:4/3}
  .gal-mural .gal-item:first-child{grid-column:1/-1}
  .gal-mural .gal-item:first-child .gal-janela{aspect-ratio:16/9}
}
/* Celular: carrossel com encaixe, a próxima janela espiando. Rola dentro do próprio contêiner (a página não vaza). */
@media(max-width:699px){
  .gal{--gal-barra:34px;--gal-raio:22px}
  .gal-grade{display:flex;gap:14px;margin-inline:calc(var(--pad)*-1);padding:8px var(--pad) 22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .gal-grade::-webkit-scrollbar{display:none}
  .gal-grade::after{content:"";flex:0 0 1px}
  .gal-item{flex:0 0 84vw;max-width:440px;scroll-snap-align:start}
  .gal-janela{flex:none;aspect-ratio:10/11;box-shadow:0 0 0 1px rgba(243,243,239,.1),0 12px 26px rgba(0,0,0,.4)}
  .gal-janela::before{background:radial-gradient(circle at 17px 50%,#4b4f47 0 4px,transparent 4.7px),radial-gradient(circle at 30px 50%,#4b4f47 0 4px,transparent 4.7px),radial-gradient(circle at 43px 50%,#4b4f47 0 4px,transparent 4.7px),var(--grafite)}
  .gal-cartao::after{top:calc((var(--gal-barra) - 22px)/2);height:22px;line-height:22px;font-size:11.5px}
  .gal .palco-legenda{margin-top:16px}
}
/* Trilho do carrossel (só no celular; o script o cria e move). */
.gal-trilho{display:none}
@media(max-width:699px){
  .gal-trilho{display:block;position:relative;height:3px;border-radius:9px;background:rgba(243,243,239,.14);overflow:hidden}
  .gal-trilho i{position:absolute;left:0;top:0;bottom:0;width:16%;border-radius:9px;background:var(--verde)}
}

/* Entrada: cada janela cresce como gota, do borrão ao foco, uma vez só. Só com JS e depois de o script ligar a grade. */
.js .gal-entra .gal-item{opacity:0;transform:translateY(34px) scale(.9);transform-origin:50% 72%;filter:blur(12px)}
.js .gal-entra .gal-item.gal-entrou{opacity:1;transform:none;filter:none;transition:opacity .7s var(--suave),transform 1s cubic-bezier(.3,1.32,.4,1),filter .8s var(--suave);transition-delay:calc(var(--i,0)*95ms)}
.js .gal-entra .gal-item.gal-ja{transition:none}

/* Pílula "Ver o site inteiro": segue o ponteiro sobre a janela (mouse) e marca o cartão focado pelo teclado. */
.gal-pilula{position:absolute;z-index:4;left:0;top:0;display:flex;opacity:0;pointer-events:none;transition:opacity .25s}
.gal-pilula b{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 7px 0 16px;border-radius:99px;background:var(--verde);color:var(--tinta);font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.36);transform:scale(.5);transform-origin:0 0;transition:transform .5s var(--mola)}
.gal-pilula i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tinta);color:var(--verde)}
.gal-pilula svg{width:13px;height:13px;max-width:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gal-sobre .gal-pilula{opacity:1}
.gal-sobre .gal-pilula b{transform:none}
/* Em toque não há ponteiro para seguir: fica um botão discreto no canto da janela. */
@media(hover:none),(pointer:coarse){
  .gal-pilula{left:auto;top:auto;right:12px;bottom:12px;opacity:1;transform:none!important}
  .gal-pilula b{gap:0;height:36px;padding:0 5px;background:var(--papel);font-size:0;transform:none}
  .gal-pilula i{color:var(--papel)}
}

/* Diálogo da referência: a página inteira numa área rolável, com o caminho para o WhatsApp sempre à vista. */
.dialogo-ref{--ref-largura:1100px;width:min(var(--ref-largura),calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;overflow:hidden}
.dialogo-ref[open]{display:flex;flex-direction:column}
.dialogo-ref .dialogo-topo{flex:none;margin:0;padding:20px 20px 16px 28px}
.dialogo-ref .dialogo-topo .olho{margin:0;font-size:13px;color:var(--cinza-escuro)}
.dialogo-ref h2{margin-top:5px;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.04em;line-height:1.05}
.ref-rolagem{flex:1 1 auto;min-height:0;margin-inline:12px;overflow-y:auto;overscroll-behavior:contain;border-radius:18px;background:var(--grafite);scrollbar-width:thin;scrollbar-color:var(--cinza) transparent}
.dialogo-ref :focus-visible{outline-color:var(--tinta)}
.ref-rolagem:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:18px}
.ref-rolagem img{width:100%;height:auto}
.ref-base{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px 28px;padding:16px 20px 18px 28px}
.dialogo-ref .ref-base p{max-width:46ch;margin:0;font-size:13.5px;line-height:1.45}
.ref-base .btn{flex:none}
@media(prefers-reduced-motion:no-preference){
  .js .dialogo-ref[open]{animation:gal-abre .5s var(--suave)}
  .js .dialogo-ref[open]::backdrop{animation:gal-fundo .4s ease-out}
}
@keyframes gal-abre{from{opacity:0;transform:translateY(22px) scale(.96)}}
@keyframes gal-fundo{from{opacity:0}}
@media(max-width:699px){
  .dialogo-ref{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:22px}
  .dialogo-ref .dialogo-topo{padding:16px 14px 12px 20px}
  .ref-rolagem{margin-inline:8px;border-radius:14px}
  .ref-base{flex-direction:column;align-items:stretch;gap:12px;padding:12px 14px 14px}
  .dialogo-ref .ref-base p{padding-inline:6px;font-size:12.5px}
  .ref-base .btn{justify-content:space-between}
}