/* Fondo general y espaciado superior */

body {
  background-color: #000000;
  padding-top: 30px;
  font-family: 'Segoe UI', sans-serif;
}

/* Título de la galería */
.titulo {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
  color: #0f7d44;
}

/* Miniaturas de las imágenes */
.img-thumbnail {
  width: 100%;              /* Ocupa todo el ancho del contenedor */
  height: 200px;            /* Altura fija para uniformidad */
  object-fit: cover;        /* Recorta la imagen sin deformarla */
  border: 2px solid #ddd;   /* Borde sutil */
  border-radius: 4px;       /* Bordes redondeados */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Sombra suave */
  transition: transform 0.3s ease;      /* Animación de zoom */
  margin-bottom: 20px;
}

/* Efecto al pasar el mouse por encima */
.img-thumbnail:hover {
  transform: scale(1.05);   /* Zoom suave */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Sombra más intensa */
}

@media (max-width: 768px) {
  .img-thumbnail {
    height: 140px; /* Reduce la altura para pantallas pequeñas */
  }

  .titulo {
    font-size: 22px; /* Título más chico para celulares */
    margin-bottom: 25px;
  }

  body {
    padding-top: 20px; /* Menos espacio arriba */
  }
}