/* ─────────────────────────────────────────────────────
   Lightbox — pantalla completa para todas las imágenes de un
   proyecto (ver js/lightbox.js). Reutiliza tokens ya existentes
   (--gray, --gray-100, tipografía Poppins, radios/spacing del
   sitio) y los glifos de flecha .w-icon-slider-left/-right ya
   definidos globalmente en css/webflow.css — no introduce
   ningún color, fuente o ícono nuevo.
   ───────────────────────────────────────────────────── */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* --gray (#1c2f40) en alta opacidad: un custom property no puede
     llevar alpha directo sin color-mix(), así que se escribe el
     rgb equivalente. */
  background: rgba(28, 47, 64, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay { transition: none; }
}

.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--_sizes---rounded-4, 5px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.lightbox-close,
.lightbox-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease;
}
.lightbox-close:hover,
.lightbox-arrow:hover {
  background: rgba(0, 0, 0, 0.70);
}

.lightbox-close {
  top: var(--_space---gap3, 20px);
  right: var(--_space---gap3, 20px);
  font-size: 26px;
  line-height: 1;
  padding: 0;
}

.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}
.lightbox-arrow-left { left: var(--_space---gap3, 20px); }
.lightbox-arrow-right { right: var(--_space---gap3, 20px); }
.lightbox-arrow [class*="w-icon-slider-"] {
  position: static;
  margin: 0;
}

.lightbox-counter {
  position: absolute;
  bottom: var(--_space---gap3, 20px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--_type-weight---font-family, Poppins, sans-serif);
  font-size: 13px;
  color: var(--gray-100, #eef0f2);
}

/* Bloqueo de scroll mientras el lightbox está abierto */
body.lightbox-lock {
  overflow: hidden;
}