/* ===============================
            XARXES SOCIALS
   =============================== */

/* Zona de xarxes socials al peu de pàgina */
.xarxes-socials {
  background-color: #002244;    /* Fons blau fosc */
  color: white;                 /* Text en blanc */
  text-align: center;           /* Centra el text horitzontalment */
  padding: 40px 20px;           /* Espai interior: 40px a dalt i baix, 20px als costats */
}

/* Títol "Segueix-nos a les xarxes socials" */
.xarxes-socials h2 {
  font-family: 'Teko', sans-serif;  /* Tipografia Teko */
  font-size: 2rem;                  /* Mida del text (2 rem = 2x mida base) */
  margin-bottom: 20px;             /* Espai sota el títol */
}

/* Contenidor de les icones de xarxes */
.icones-xarxes {
  display: flex;            /* Mostra els fills (icones) en fila */
  justify-content: center; /* Centra les icones horitzontalment */
  gap: 30px;                /* Espai horitzontal entre icones */
  flex-wrap: wrap;          /* Si no hi caben, passen a la línia següent */
}

/* Estil de cada icona (imatge dins de l'enllaç) */
.icones-xarxes a img {
  width: 40px;                         /* Amplada de la icona */
  height: 40px;                        /* Alçada de la icona */
  transition: transform 0.3s ease,     /* Animació suau al fer hover */
              filter 0.3s ease;
  filter: grayscale(100%);   /* Mostra els logos en blanc i negre */
}

/* Efecte hover: quan el cursor està sobre la icona */
.icones-xarxes a img:hover {
  transform: scale(1.2);  /* L'icona s’amplia lleugerament */
  filter: none;           /* Es treu el filtre (torna al color original) */
}

/* Ajuste para móviles */
.xarxes-socials h2 {
  font-family: 'Teko', sans-serif;  /* Tipografia Teko */
  font-size: 1.5rem;                  /* Mida del text (2 rem = 2x mida base) */
  margin-bottom: 20px;             /* Espai sota el títol */
}