/*----- Efecto Imagenes Gris en Clientes ------*/
#grid {
    position: relative !important;
    display: inline-grid !important;
    grid-template-columns: 100% !important;
    width: 90% !important;
    margin-left: 5% !important;
    margin-top: 4% !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    -ms-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
  }
  #grid div {
    color: #FFFFFF !important;
    min-height: 200px !important;
    max-height: 200px !important;
    width: 90% !important;
    margin-left: 5% !important;
    margin-bottom: 5% !important;
    position: relative !important;
  }
  .imagen {
    width: 63% !important;
    height: 96% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    filter: grayscale(100%) !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    -ms-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
  }
  .imagen:hover {
    filter: grayscale(0%) !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    -ms-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
  }
  .imagen img {
    position: relative !important;
    margin-top: 4px !important;
    width: 100% !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    -ms-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
    transition: all 0.3s !important;
  }
  @media only screen and (min-width: 768px) {
    #grid {
        grid-template-columns: 33.3% 33.3% 33.3% !important;
    }
  }
  @media only screen and (min-width: 1024px) {
    #grid {
        grid-template-columns: 25% 25% 25% 25% !important;
    }
  }

/*----- Efecto Cambiar color del logo ------*/
/* Logo blanco por defecto */
.logo-img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease-in-out; /* Transición suave */
}

/* Cuando la clase "scrolled" está activa, el logo vuelve a su color original */
.scrolled .logo-img {
  filter: none;
}