/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{
  position:fixed;inset:0;
  z-index:var(--z-lightbox);
  display:grid;
  place-items:center;
  /* reserva as faixas do botão de fechar e do contador */
  padding:88px 16px 78px;
  background:rgba(253,247,241,.92);
  backdrop-filter:blur(18px) saturate(1.3);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
.lightbox.aberto{opacity:1;visibility:visible}

.lightbox figure{
  max-width:min(1180px,92vw);
  max-height:100%;
  text-align:center;
  opacity:0;
  transform:scale(.94) translateY(20px);
  transition:.6s var(--ease-pulo);
}
.lightbox.aberto figure{opacity:1;transform:none}

.lightbox img{
  max-width:100%;
  max-height:66vh;
  margin:0 auto;
  object-fit:contain;
  border-radius:var(--raio-m);
  box-shadow:var(--sombra-g);
  transition:opacity .4s ease;
}

.lightbox figcaption{margin-top:20px}
.lightbox figcaption small{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 14px;
  border-radius:var(--pilula);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--uva);
  background:var(--uva-leve);
}
.lightbox figcaption h4{
  font-family:var(--display);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:-.03em;
  color:var(--tinta);
}

/* --- controles --- */
.lb-btn{
  position:absolute;top:50%;
  transform:translateY(-50%);
  display:grid;place-items:center;
  width:56px;height:56px;
  border-radius:50%;
  color:var(--tinta);
  background:var(--cartao);
  box-shadow:var(--sombra-m);
  font-size:1.5rem;
  line-height:1;
  transition:transform .4s var(--ease-pulo),background .4s var(--ease),color .4s var(--ease);
}
.lb-btn:hover{
  color:#fff;
  background:var(--grad-quente);
  transform:translateY(-50%) scale(1.1);
}
.lb-ant{left:clamp(12px,3vw,44px)}
.lb-prox{right:clamp(12px,3vw,44px)}

.lb-fechar{
  position:absolute;top:24px;right:clamp(16px,4vw,44px);
  display:grid;place-items:center;
  width:50px;height:50px;
  border-radius:50%;
  color:var(--tinta);
  background:var(--cartao);
  box-shadow:var(--sombra-m);
  font-size:1rem;
  transition:transform .4s var(--ease-pulo),background .4s var(--ease),color .4s var(--ease);
}
.lb-fechar:hover{
  color:#fff;
  background:var(--coral);
  transform:rotate(90deg) scale(1.08);
}

.lb-contador{
  position:absolute;bottom:24px;left:50%;
  transform:translateX(-50%);
  padding:8px 18px;
  border-radius:var(--pilula);
  background:var(--cartao);
  box-shadow:var(--sombra-p);
  font-size:.8rem;
  font-weight:700;
  color:var(--tinta-tenue);
}
