/* ===== LIGHTBOX =====
   Visor de capturas dentro del sitio: la página queda detrás, atenuada. Se cierra con
   la X, tocando fuera, deslizando hacia abajo, con Escape o con el botón atrás del móvil.
   Pellizco y doble toque para acercar (lightbox.js). */

.lightbox{
  position:fixed; inset:0; z-index:40; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:transparent; color:var(--ground);
  display:none; overflow:hidden;
}
.lightbox[open]{ display:block; }
.lightbox::backdrop{ background:rgba(20,20,19,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lightbox-stage{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:calc(56px + env(safe-area-inset-top)) 12px calc(56px + env(safe-area-inset-bottom));
  touch-action:none; -webkit-user-select:none; user-select:none; cursor:zoom-in;
}
.lightbox img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:8px; background:var(--white); box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  transform-origin:0 0; will-change:transform; -webkit-user-drag:none;
  transition:transform .25s var(--ease);
}
.lightbox.is-dragging img{ transition:none; }
.lightbox.is-zoomed .lightbox-stage{ cursor:grab; }
.lightbox-close{
  position:absolute; top:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right));
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(20,20,19,.55); color:var(--ground); display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lightbox-close svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; fill:none; }
.lightbox-hint{
  position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  margin:0; padding:7px 12px; border-radius:var(--pill); background:rgba(20,20,19,.55);
  font-size:.74rem; color:rgba(250,249,245,.85); white-space:nowrap; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-zoomed .lightbox-hint{ opacity:0; }
@media (hover:hover) and (pointer:fine){
  .lightbox-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lightbox img{ transition:none; }
}