/* Compte! l'ordre importa, sobretot per a mòbils*/
/* 1. Elements HTML bàsics */

body {
  margin: 20px auto;
  /*Centra el contingut i afegeix espai superior/inferior.*/
  max-width: 900px;
  /*Limita l'amplada del contenidor principal. Alternativa, amb % o vw.*/
  padding: 0 10px;
  /*Espai als costats.*/
  background-color: #f4f4f4;
  /*Color de fons suau.*/
  color: #FF2400;
  /*Color del text principal.  ROIG PER DETECTAR ERRADES AMB CSS*/
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  /*Tipus de lletra Verdana.*/
  background-image: url("fons_p6.webp");
  /*Imatge de fons.*/
  background-repeat: repeat;
  /*Repeteix la imatge de fons. Alternativa: no-repeat, repeat-x, repeat-y*/
}

a {
  text-decoration: none; /* Treu el subratllat */

}

body a:hover {
  color: #1e90ff;
  text-decoration: underline;
}

p {
  font-size: 1.1em;
  /*Mida lleugerament més gran per al text. Alternativa: ajustar valor, px, rem, %, etc.*/
  color: #000;
  /*Color del text principal.*/
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  /*Tipus de lletra Verdana.*/
}

figure {
  width: 100%;
  /* Fa que el <figure> ocupi tota l’amplada disponible del contenidor pare */
  margin: 0;
  /* Elimina qualsevol marge extern per defecte (pot evitar espais innecessaris als costats)

*/
  padding: 0;
  /* Elimina qualsevol espai intern per defecte (fa que el contingut arribi fins a la vora

del <figure>) */
  margin-top: 2em;
  /* Afegeix espai per damunt de imatge i peu*/
  margin-bottom: 2em;
  /* Afegeix espai sota la imatge i peu de foto */
}

img {
  max-width: 800px;
  width: 100%;
  height: auto;
  display: block;
  /* block ocupa tota l'amplada. Alternativa: inline (en línia amb el text), inline-block
(barreja inline i block), none (amaga l'element), flex (flexible), grid (de graella)*/
  margin: 0 auto;
  /* Opcional: centra la imatge */
}

figcaption {
  text-align: center;
  /* per centrar els peus de foto*/
  font-style: italic;
  /* Opcional, per donar-li estil de peu de foto */
  font-size: 1.2rem;
  /* Mida base per a mòbils */
  margin-top: 0.7em;
  /* Espai entre imatge i peu de foto */
  color: #555;
  /* Opcional, per fer-lo més discret */
}

hr {
  margin-top: 0em;
  /*Espai superior: zero.*/
  margin-bottom: 0;
  /*Espai inferior: zero.*/
}

/*2. Tipografia i seccions generals */

.h1-css { /*abanas capcal i spec*/
  text-align: center;
  /*Centra el text. Alternativa: left, right o justify.*/
  margin-bottom: 20px;
  /*Espai sota la capçalera.*/
}

.h1-nom { /*abans tit-h1*/
  text-align: center;
  /*Centra el títol. Alternativa: left, right, justify.*/
  font-size: 3rem;
  /*Mida gran del títol. Alternativa: em, px, %, etc.*/
  font-family: Verdana, Arial, sans-serif;
  /*Font sans-serif.*/
  font-weight: normal;
  /*Text normal. Alternativa: bold (en negreta); 300 (per definir el pes que negreta).*/
  font-style: normal;
  /* Text no en cursiva */
  color: #006600;
  /*Color fosc del text*/
  margin: 0.2em 0;
  /*Espai superior i inferior*/
}

.h1-spec { /*abans subtit-h1*/
  text-align: center;
  font-weight: 300;
  /* Lletra fina. Alternativa: normal, bold, 400, 700, etc. */
  font-size: 2.5rem;
  /* Mida gran. Alternativa: ajustar valor segons necessitat, em, px, %, etc. */
  font-family: Verdana, Arial, sans-serif;
  /* Tipus de Verdana. */
  font-style: italic;
  /* Text en cursiva */
  color: #668066;
  /* Color fosc del text. Alternativa: qualsevol color CSS. */
  margin-top: 0;
  /*Elimina espai a dalt del subtítol*/
  margin-bottom: 0em;
  /*Espai a sota, si vols separar del contingut següent*/
}

.h2-css { /*abans capcal-spec i spec-cita*/
  text-align: center;
  /*Centra el text. Alternativa: left, right o justify.*/
  margin-top: 30px;
  margin-bottom: 0px;
  /*Espai sota la capçalera.*/
}

.h2-crono { /*abans tit-h2*/
  text-align: center;
  /* Centra el títol. Alternativa: left, right, justify. */
  font-size: 2.5rem;
  /* Mida molt gran. Alternativa: ajustar valor, em, px, %, etc. */
  font-family: "Times New Roman", Times, serif;
  /* Font sans-serif. Alternativa: qualsevol font. */
  font-weight: normal;
  /* Text en negreta. Alternativa: normal, bold, bolder, etc. */
  color: #000060 ;
  /* Color fosc del text. Alternativa: qualsevol color CSS. */
  margin: 0.3em 0;
  /* Espai superior i inferior. Alternativa: ajustar segons necessitat. */
}

.h2-lloc { /*abans subtit-h2*/
  text-align: center;
  /* Centra el títol. Alternativa: left, right, justify. */
  font-size: 1.8rem;
  /* Mida molt gran. Alternativa: ajustar valor, em, px, %, etc. */
  font-family: "Times New Roman", Times, serif;
  /* Font sans-serif. Alternativa: qualsevol font. */
  font-weight: normal;
  /* Text en negreta. Alternativa: normal, bold, bolder, etc. */
  color: #333333;
  /* Color fosc del text. Alternativa: qualsevol color CSS. */
  margin: 0.3em 0;
  /* Espai superior i inferior. Alternativa: ajustar segons necessitat. */
}

/* 3. Seccions o blocs de contingut: biodiv i recopi */

/* 4. Peu de pàgina */

.peu1,
.peu2 {
  color: #668066 ;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.peu1 a,
.peu2 a {
  text-decoration: none;
  /*Centra el text. Alternativa: left, right, justify.*/
  margin: 0 0.5em;
  /*Espai horitzontal entre enllaços.*/
  transition: color 0.2s;
  /*Suavitza el canvi de color.*/
}

.peu1 a:hover,
.peu2 a:hover {
  color: #1e90ff;
  text-decoration: underline;
}

.peu1 {
  font-size: 2.5em;
  /*Mida molt gran.*/
  font-weight: bold;
  /*Text en negreta. Alternativa: normal, bolder, etc.*/
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  /*Espai inferior petit.*/
}

.peu2 {
  font-size: 1.5em;
  /*Mida gran.*/
  font-weight: normal;
  margin-bottom: 1.5em;
  /*Espai inferior més gran.*/
}

/* 5. Icones i interaccions visuals*/

.icones-fila {
  display: flex;
  /*Activa el model Flexbox per distribuir les icones. Alternativa: grid, block, inline-

block.*/
  flex-direction: row;
  /*Col·loca els elements en fila horitzontal. Alternativa: column per a vertical.*/
  flex-wrap: wrap;
  /*Permet que baixin a una nova línia si no hi caben. Alternativa: nowrap.*/
  justify-content: center;
  /*Centra les icones horitzontalment. Alternativa: flex-start, flex-end, space-between,

etc.*/
  align-items: center;
  /*Centra verticalment dins la fila. Alternativa: flex-start, flex-end, baseline.*/
  gap: 26px;
  /*Espai uniforme entre icones.*/
  padding: 16px 0;
  /*Espai superior i inferior al contenidor.*/
  width: 100%;
  /*Assegura que el contenidor ocupa tota l'amplada. Alternativa: auto, max-width, etc.*/
  box-sizing: border-box;
  /*Inclou padding i border dins l'amplada. Alternativa: content-box (per defecte).*/
}

.icones-fila a img {
  width: 48px;
  /*Amplada de cada icona. Alternativa: ajustar segons disseny, % o em.*/
  height: 48px;
  /*Alçada de cada icona. Alternativa: auto per mantenir proporció.*/
  display: block;
  /*Elimina espai per defecte al voltant de la imatge. Alternativa: inline-block.*/
  transition: width 0.2s, height 0.2s;
  /*Suavitza el canvi de mida en hover.*/
}

.icona-constru {
  display: block;
  /*Fa que la icona ocupi tota la línia disponible.*/
  margin: 1.5em auto 1em auto;
  /*Espai superior de 1.5em, centrat horitzontalment, espai inferior de 1em.*/
  max-width: 80px;
  /*Limita l'amplada màxima de la icona.*/
  height: auto;
  /*Manté la proporció original de la icona.*/
}





/* Afegeix això al final del fitxer. Això farà que les regles especials per a mòbils s’apliquin quan la pantalla sigui petita, sense afectar la resta d’estils del web. */
@media (max-width: 768px) {

  /*Aplica els estils següents només si la pantalla fa 600px o menys d’ample (mòbils i pantalles petites).*/
  body {
    padding: 0 5px;
    font-size: 0.95em;
  }

  p {
    font-size: 1em;
  }

  /* Responsive: redueix la mida de les icones en pantalles petites */
  .icones-fila a img {
    width: 32px;
    /*Amplada i alçada reduïdes de les icones per a mòbil.*/
    height: 32px;
    /*Amplada i alçada reduïdes de les icones per a mòbil.*/
  }

  .icones-fila {
    gap: 10.5px;
    /*Espai més petit entre icones.*/
  }

  .h1-nom {
    font-size: 1.5rem;
    /*Mida del títol principal més petita i lleuger desplaçament cap a la dreta.*/
  }

  .h1-spec {
    font-size: 1.3rem;
    /*Mida del subtítol més petita i lleuger desplaçament cap a la dreta.*/
    margin-left: 0.2em;
    margin-bottom: 0.1em;
    /*Mida del subtítol més petita i lleuger desplaçament cap a la dreta.*/
  }

  .h2-crono {
    font-size: 1.5rem;
    /*Mida del títol secundari més petita i prioritària. Alternatives: ajustar valor o treure !important.*/
    margin-bottom: 0.1em;
  }

  .h2-lloc {
    font-size: 1.3rem;
    /*Mida del subtítol més petita i lleuger desplaçament cap a la dreta.*/
  }

  p {
    font-size: 1.2em;
    /* Lletres una mica més petites en mòbil si cal */
  }

  hr {
    margin-top: 0.3em;
    /*Espai superior i inferior petit.*/
    margin-bottom: 0.3em;
    /*Espai superior i inferior petit.*/
  }

  figure {
    width: 100%;
    /* Ocupa tota l’amplada del contenidor pare */
    padding: 0;
    margin: 2em 0;
    /* 2em a dalt i a baix, 0 als costats */
  }

  img {
    width: 100%;
    /* La imatge ocupa tota l’amplada del <figure>, però no la sobrepassa */
    max-width: 100%;
    height: auto;
  }

  figcaption {
    font-size: 0.9rem;
    margin-bottom: 1em;
    /* Afegeix espai sota el peu de foto */
  }

  a:hover {
    color: inherit;
    /*Elimina el canvi de color en hover per a mòbils. Alternativa: mantenir un color específic.*/
  }

  .nota {
    font-size: 0.9em;
    /* Lletres una mica més petites per a mòbil */
    padding: 8px;
    /* Menys espai interior */
    margin-top: 1.2em;
    /* Espai una mica més petit a dalt */
  }

  .peu1 {
    font-size: 0.9em;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
  }

  .peu2 {
    font-size: 0.8em;
    margin-bottom: 1em;
  }

  .peu1 a,
  .peu2 a {
    margin: 0 0.3em;
    display: inline-block;
  }

  .icona-constru {
    max-width: 50px;
    /*Limita l’amplada de la icona a 50px.*/
    margin-top: 1em;
    /*Espai superior moderat.*/
    margin-bottom: 0.8em;
    /*Espai inferior una mica més petit.*/
  }
}