:root {
          --m-light-blue: #009ada;
          --m-dark-blue: #003268;
          --m-red: #e20a16;
        }

        body {
          padding-top: 56px;
          background-color: #9e9e9e; /* gris oscuro para todo el fondo */
          color: #eee; /* texto claro */
        }

        /* Fondo oscuro para secciones */
        .bg-dark-gray {
          background-color: #9e9e9e ;
          color: #eee;
        }

        /* Navegación fija */
        .navbar-m {
          background-color: #000;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 1030;
        }
        .nav-link {
          color: white !important;
          font-weight: 600;
        }

        /* Logo pequeño en navbar */
        .navbar-brand img {
          height: 40px;
          margin-right: 10px;
          filter: brightness(0) invert(1);
        }

        /* Secciones */
        .section-padding {
          padding: 80px 0;
        }

        /* Separador estilo bandera BMW M */
        .m-separator {
          height: 12px;
          background: linear-gradient(
            90deg,
            var(--m-light-blue) 0% 33.33%,
            var(--m-dark-blue) 33.33% 66.66%,
            var(--m-red) 66.66% 100%
          );
        }

        /* Carrusel Home */
        #homeCarousel img {
          max-height: 600px;
          object-fit: cover;
        }

        /* Tarjetas de servicios */
        .service-card img {
          height: 250px;
          object-fit: cover;
        }

        .card-body{
           background-color: #e0e0e0 ;

        }

       /* Estilos para la cuadrícula de marcas */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* contenedores más anchos */
  gap: 2rem;
  justify-items: center;
  align-items: center;
  padding: 20px 0;
}

.brands-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 180px;   /* más ancho */
  height: 160px;      /* más alto */
  padding: 10px;
  border-radius: 8px;
  margin: 0;
}

.brands-grid img {
  max-height: 140px;  /* imagen más grande */
  width: auto;
  object-fit: contain;
  display: block;

  margin: 0 auto;
}

.brands-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 130px; /* Ajustado para pantallas más pequeñas */
  height: 130px; /* Ajustado para pantallas más pequeñas */
  padding: 10px;
  border-radius: 8px;

  margin: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añadida sombra */
  transition: all 0.3s ease; /* Añadida transición */
}

.brands-grid a:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra más intensa al pasar el ratón */
  transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
}

.brands-grid img {
  max-width: 100%;
    max-height: 100px; /* Ajustado para pantallas más pequeñas */

  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}





        /* Galería: cuadrícula */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* columnas adaptables */
  gap: 10px; /* espacio entre fotos */
  padding: 10px;
}

.gallery-grid a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px; /* esquinas redondeadas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.gallery-grid a:hover {
  transform: scale(1.03); /* zoom suave al pasar el ratón */
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta sin deformar */
  display: block;
  transition: opacity 0.5s ease-in;
  opacity: 0;
}

.gallery-grid img.loaded {
  opacity: 1;
}

@media (max-width: 768px) {
  .gallery-grid img {
    height: 300px; /* Adjust the height as needed */
    object-fit: cover;
  }
}