.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-small);
    transition: transform var(--transition-fast);
    line-height: 0; /* Eliminar el espacio extra debajo de la imagen */
    vertical-align: middle; /* Eliminar el espacio extra debajo de la imagen */
}

.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 1;
}

.gallery-item:hover {
    transform: scale(1.03);
}

.gallery-item:hover::before {
    opacity: 1;
}

.gallery-item img {
    display: block;
    width: 100%;
    max-width: 600px; /* Ancho máximo para imágenes de galería */
    height: auto; /* Cambiado a auto para mantener la proporción */
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* --- GLightbox por encima de todo y clicable --- */
.glightbox-container {
  position: fixed; /* garantía de capa superior */
  inset: 0;
  z-index: 2147483647 !important; /* máximo práctico */
}

.glightbox-container .gclose,
.glightbox-clean .gclose {
  pointer-events: auto !important; /* asegura que la X recibe el click */
}

/* Oculta elementos flotantes mientras el lightbox está abierto */
html.glightbox-open #scrollToTopBtn,
body.glightbox-open #scrollToTopBtn {
  opacity: 0;
  pointer-events: none;
}

/* Si tienes cabeceras/menus fijos muy altos, desactiva clicks debajo del overlay */
html.glightbox-open .main-nav,
body.glightbox-open .main-nav {
  pointer-events: none;
}

/* (Opcional) Evita scroll del fondo mientras está abierto */
html.glightbox-open,
body.glightbox-open {
  overflow: hidden;
}