/* ─── Visor de imagen a pantalla completa (lightbox) ───
   Un único mecanismo de ampliación para móvil y desktop.
   Módulo: js/modules/image-zoom.js                                        */

.me-lightbox {
  position: fixed;
  inset: 0;
  /* Por debajo del cursor personalizado (9999), por encima de nav (800)
     y del newsletter (900). */
  z-index: 9500;
  background: rgba(10, 10, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  /* Los gestos los controla el módulo con Pointer Events. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.me-lightbox[hidden] { display: none; }
.me-lightbox.is-open { opacity: 1; }

/* ─── Escenario ─── */
.me-lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}
.me-lightbox.is-zoomed .me-lightbox__stage { cursor: grab; }
.me-lightbox.is-zoomed .me-lightbox__stage:active { cursor: grabbing; }

.me-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* La prenda se ve COMPLETA: nunca se recorta dentro del visor. */
  object-fit: contain;
  transform-origin: center center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  -webkit-user-drag: none;
}
.me-lightbox__img.is-ready { opacity: 1; }
/* Sólo se anima la transformación en el clic/doble-tap, nunca al arrastrar
   ni al hacer pinch (ahí debe seguir al dedo sin retardo). */
.me-lightbox__img.is-animating { transition: transform 240ms var(--ease-out), opacity var(--dur-base) var(--ease); }

/* ─── Controles ─── */
.me-lightbox__btn {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 245, 240, 0.10);
  border: 1px solid rgba(245, 245, 240, 0.22);
  color: var(--color-bone);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.me-lightbox__btn:hover,
.me-lightbox__btn:focus-visible {
  background: rgba(245, 245, 240, 0.22);
  border-color: rgba(245, 245, 240, 0.55);
}
.me-lightbox__btn:focus-visible { outline: 2px solid var(--color-bone); outline-offset: 2px; }
.me-lightbox__btn[hidden] { display: none; }

.me-lightbox__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}

.me-lightbox__close { top: 1.25rem; right: 1.25rem; }

.me-lightbox__nav { top: 50%; transform: translateY(-50%); }
.me-lightbox__nav--prev { left: 1.25rem; }
.me-lightbox__nav--next { right: 1.25rem; }

/* ─── Contador y ayuda ─── */
.me-lightbox__counter,
.me-lightbox__hint {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.75);
  pointer-events: none;
  margin: 0;
}
.me-lightbox__counter { top: 1.6rem; }
.me-lightbox__counter[hidden] { display: none; }
.me-lightbox__hint { bottom: 1.5rem; color: rgba(245, 245, 240, 0.5); }
/* Una vez ampliada, la ayuda sobra. */
.me-lightbox.is-zoomed .me-lightbox__hint { opacity: 0; }

/* Mientras el visor está abierto, el fondo no se desplaza. */
body.me-lightbox-open { overflow: hidden; }

/* ─── Móvil ─── */
@media (max-width: 768px) {
  .me-lightbox__btn { width: 44px; height: 44px; }
  .me-lightbox__close { top: 0.9rem; right: 0.9rem; }
  .me-lightbox__nav--prev { left: 0.6rem; }
  .me-lightbox__nav--next { right: 0.6rem; }
  .me-lightbox__hint { bottom: 1.1rem; font-size: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .me-lightbox,
  .me-lightbox__img,
  .me-lightbox__img.is-animating { transition: none; }
}