/* ==========================================================================
   components/galeria.css — Galería
   Componente marcado: galeria (index, nosotros).
   Cuadrícula de 2 × 2 fotos iguales (4:3), cada una con su leyenda sobre un
   degradado. Cada foto lleva su crédito corto en la esquina superior derecha
   (.credito-foto, components/credito-foto.css), con enlace a la fuente.
   ========================================================================== */
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.galeria__item { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--c-abismo); }
/* Encuadre un poco por encima del centro: en estas fotos lo importante está arriba o al centro */
.galeria__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.galeria__leyenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-ajustado);
  color: var(--c-blanco);
  background: linear-gradient(transparent, var(--overlay-abismo-medio));
}

@media (max-width: 640px) {
  .galeria__leyenda { padding: var(--space-4) var(--space-3) var(--space-2); font-size: var(--text-xs); }
}