/* --- Reset para evitar bordes blancos --- */
/* body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
} */

/* --- Galería Full Width --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
  gap: 0; /* Sin espacio entre fotos */
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* 3 Columnas en Desktop */
@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Celda de Miniatura --- */
.img-c {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: #111;
  cursor: pointer;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease-in-out;
}

.img-w img {
  display: none;
}

.img-c:hover .img-w {
  transform: scale(1.05);
}

/* --- Estado de Zoom (Imagen Completa) --- */

/* Clase única para evitar conflicto con TABS u otros plugins */
.img-zoom-open {
  position: fixed;
  z-index: 9999; /* Por encima de todo */
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.9);
  transition: all 450ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-zoom-open .img-w {
  background-size: cover; /* Imagen completa sin recortes */
  width: 60% !important;
  height: 60% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: all 450ms ease;
}

/* Posicionamiento final de la animación */
.img-zoom-open.positioned {
  left: 0 !important;
  top: 0 !important;
}

/* Animación de salida */
.img-zoom-open.postactive {
  opacity: 0;
  transform: scale(0.9);
}