/* Estilos básicos para la galería */
.gallery-container {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    width:100%;
  }
  
  .gallery-item {
    position: relative;
    margin: 0;
  }
  
  .gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
    
    border-radius: 0 !important;
  }
  .gallery-item:hover img {
    filter: brightness(30%);
  }
  .lupa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: white;
    display: flex;
     align-items: center;
    justify-content: center;
    width: 40px; /* o el tamaño que prefieras */
    height: 40px; /* o el tamaño que prefieras */
    border-radius: 50%; /* Hace el fondo completamente redondo */
   
    opacity: 0; /* Inicialmente oculto */
    transition: opacity 0.5s ease;
  }
  
  .gallery-item:hover .lupa {
    opacity: 1; /* Hace visible la lupa */
  }
  
  #imagenGrandeContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    z-index: 999;
    cursor: pointer;
  }
  
  #imagenGrandeContainer img {
    max-width: 100%;
    max-height: 100%;
    z-index: 1; /* Asegura que la imagen esté detrás del título */
  border-radius: 0; /* Si prefieres bordes cuadrados */
  }
  .imagen-con-titulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 80%; /* O el ancho máximo que prefieras */
    max-height: 80%; /* O la altura máxima que prefieras */
  }
  /* Estilos para el título de la imagen ampliada */
  .titulo-imagen {
    color: white;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 5%; /* O el espacio que prefieras desde el borde superior */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2; /* Asegura que el título esté sobre la imagen */
  }
  
  /* Estilos responsivos */
  @media (min-width: 768px) {
    .gallery-item {
      width: calc(25% - 0px); /* 4 imágenes por fila */
    }
  }
  
  @media (max-width: 767px) {
    .gallery-item {
      width: calc(100% - 10px); /* 1 imagen por fila */
    }
  }