/* ===== GALERÍA SOLO IMÁGENES (no afecta header/footer) ===== */

.galeria-solo-imagenes {
  /* Evita que el header fijo tape el inicio (usa tu var si existe, si no 0) */
  margin-top: calc(var(--header-h, 0px) + 12px);

  /* Ancho cómodo y centrado */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

  /* Respiración lateral y compatibilidad con notch iOS */
  padding: clamp(16px, 4vw, 28px);
  padding-left: max(clamp(16px, 4vw, 28px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 28px), env(safe-area-inset-right));
}

/* Grid fluido: columnas “justas” y separaciones agradables */
.gallery-grid {
  display: grid;
  gap: clamp(10px, 1.8vw, 16px);
  /* Mínimo 220px por celda para que no se vean ni enormes ni diminutas */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}

/* Cada item es un cuadrado perfecto, sin esquinas redondeadas */
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* cuadrado */
  overflow: hidden;
  /* oculta zoom del hover */
  background: #e9eef5;
  /* color de fondo por si tarda la imagen */
  text-decoration: none;
}

/* Imagen: cubre el cuadrado sin deformar */
.gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* recorta sin distorsionar */
  transform: scale(1);
  transition: transform .35s ease, filter .35s ease;
  display: block;
}

/* Hover/Focus: zoom sutil (no cambia las esquinas) */
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.04);
  filter: saturate(1.03) contrast(1.02);
}

/* Accesibilidad: foco visible en el anchor */
.gallery-item:focus-visible {
  outline: 3px solid rgba(60, 78, 121, 0.6);
  outline-offset: 2px;
}

/* ===== Breakpoints finos para “tamaño justo” ===== */

/* Tablets: celdas algo más compactas si hace falta */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Móvil: dos columnas cómodas */
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Móvil pequeño: mantiene dos columnas, con más respiro vertical */
@media (max-width: 380px) {
  .gallery-grid {
    gap: 8px;
  }
}

/* Respeto por usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .gallery-item img {
    transition: none;
  }
}