/* ===============================
            BANNER SPONSORS
   =============================== */

.banner-sponsors {
  background-color: #f5f5f5; /* Color de fons suau (gris clar) */
  padding: 30px 20px;        /* Espai interior superior/inferior 30px, lateral 20px */
  text-align: center;        /* Centra el contingut horitzontalment */
}

.banner-sponsors h2 {
  margin-bottom: 20px;            /* Espai a sota del títol */
  margin-top: 20px;            /* Espai a sota del títol */
  font-family: 'Teko', sans-serif;/* Tipus de lletra decorativa */
  font-size: 2rem;                /* Mida de la lletra relativament gran */
  color: #003366;                 /* Color blau fosc */
}

.logos-sponsors {
  display: flex;             /* Mostra els logos en línia (flex) */
  justify-content: center;   /* Centra els elements horitzontalment */
  flex-wrap: wrap;           /* Permet que es facin salts de línia si cal */
  gap: 100px;                 /* Espai entre logos */
  align-items: center;       /* Alinea verticalment els logos al centre */
}

.logos-sponsors img {
  max-height: 80px;          /* Alçada màxima de cada logo */
  width: auto;               /* L'amplada s'ajusta proporcionalment */
  filter: grayscale(100%);   /* Mostra els logos en blanc i negre */
  transition: filter 0.3s ease; /* Animació suau del canvi de filtre */
  cursor: pointer;           /* Canvia el cursor per indicar que es pot clicar */
}

.logos-sponsors a {
  display: inline-block; /* Fa que l’enllaç envolti completament la imatge */
}

.logos-sponsors img:hover {
  filter: none; /* Torna la imatge a color quan el cursor hi passa per sobre */
}

/* Ajuste para móviles */
@media (max-width: 600px) {
  .logos-sponsors {
    gap: 15px;           /* Redueix l’espai entre logos */
  }

.banner-sponsors h2 {
  margin-bottom: 20px;            /* Espai a sota del títol */
  font-family: 'Teko', sans-serif;/* Tipus de lletra decorativa */
  font-size: 1.5rem;                /* Mida de la lletra relativament gran */
  color: #003366;                 /* Color blau fosc */
}


  .logos-sponsors img {
    max-height: 60px;    /* Redueix la mida dels logos per adaptar-se millor a pantalles petites */
  }
}