/* ─────────────────────────────────────────────────────────────
   Visualizador de foto ampliada.

   Arquivo próprio porque é usado em dois lugares que não compartilham
   folha de estilo: a galeria pública (site.css) e a biblioteca de
   mídia do painel (admin.css, que é autônomo e redefine os tokens).
   Copiar as regras para os dois seria criar dois visualizadores para
   divergir na primeira correção feita só de um lado.

   Carregado por página, não no layout inteiro: são ~50 linhas que só
   duas telas usam, e a home é vista em 4G pelo webview do Instagram.

   O comportamento está em js/lightbox.js.
   ───────────────────────────────────────────────────────────── */
body.sem-rolagem{overflow:hidden}
.lightbox{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--s-4);
  /* Escurecimento forte o bastante para isolar a foto do fundo. */
  background:rgba(39,59,58,.92);
}
.lightbox[hidden]{display:none}
.lightbox__palco{
  max-width:min(96vw,1100px);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);margin:0;
}
.lightbox__palco img{
  max-width:100%;max-height:80vh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--radius);
  background:rgba(245,238,228,.06);
}
.lightbox__palco figcaption{
  color:var(--c-alabaster);font-size:.9375rem;opacity:.85;text-align:center;
}
.lightbox__fechar,.lightbox__nav{
  background:none;border:0;color:var(--c-alabaster);cursor:pointer;
  min-width:48px;min-height:48px;   /* alvo de toque confortável */
  font-size:2rem;line-height:1;
  opacity:.75;transition:opacity var(--dur) var(--ease);
}
.lightbox__fechar:hover,.lightbox__nav:hover{opacity:1}
.lightbox__fechar:focus-visible,.lightbox__nav:focus-visible{
  outline:2px solid var(--c-alabaster);outline-offset:2px;opacity:1;
}
.lightbox__fechar{position:absolute;top:var(--s-3);right:var(--s-4);font-size:2.5rem}
.lightbox__nav[hidden]{display:none}
.lightbox__contador{
  position:absolute;bottom:var(--s-4);left:0;right:0;text-align:center;
  color:var(--c-alabaster);opacity:.6;font-size:.8125rem;
  font-family:var(--font-descriptor);letter-spacing:.12em;text-transform:uppercase;
}

@media (max-width:640px){
  .lightbox__nav{position:absolute;bottom:var(--s-8);font-size:2.25rem}
  .lightbox__nav--anterior{left:var(--s-4)}
  .lightbox__nav--proxima{right:var(--s-4)}
}

/* ── Perguntar sobre esta foto ──────────────────────────────────────
   Fica no rodapé do visualizador, ao lado do contador. Discreto: o que
   a pessoa veio fazer é olhar a foto — o pedido é a saída, não a
   interrupção. */
.lightbox__contato{
  position:absolute;left:0;right:0;bottom:var(--s-10);
  margin:0 auto;width:max-content;max-width:90vw;
  padding:.55rem 1.1rem;border-radius:999px;
  font-family:var(--font-descriptor);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--c-alabaster);border:1px solid rgba(245,238,228,.5);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.lightbox__contato:hover,
.lightbox__contato:focus-visible{
  background:var(--c-alabaster);color:var(--c-deep-green);border-color:var(--c-alabaster);
}
.lightbox__contato[hidden]{display:none}
@media (max-width:640px){
  /* Acima das setas, que no celular ficam na base. */
  .lightbox__contato{bottom:var(--s-16)}
}