/* 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.*/
  font-family: Georgia, "Times New Roman", Times, serif;
  /*Tipus de lletra serif.*/
  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.2em; /*posava 1.2 (1.1) a spec, i puc provar ara 3*/
  /*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 */

.intro {
  text-align: center;
  /*Centra el text. Alternativa: left, right o justify.*/
  margin-bottom: 24px;
  /*Espai sota la capçalera.*/
}

.biodiv {
  color: #006600;
  /*Text verd intens.*/
  font-size: 3rem;
  /*Mida gran del text. Alternativa: em, px, %, vw, etc.*/
  font-family: Verdana, Arial, sans-serif;
  /*Font sans-serif.*/
  font-weight: bold;
  /*Text en negreta.*/
  letter-spacing: 2px;
  /*Separació entre lletres.*/
  margin: 0;
  /*Elimina el marge per defecte.*/
}

.recopi {
  font-size: 3rem;
  /*Mida gran, però sense negreta.*/
  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: #668066;
  /* Color fosc del text. Alternativa: qualsevol color CSS. */
}

.h1-principal {
  text-align: center;
  /*Centra el títol. Alternativa: left, right, justify.*/
  font-size: 2rem;
  /*Mida gran del títol. Alternativa: em, px, %, etc.*/
  font-family: Times "Times New Roman", Times, serif;
  /*Font sans-serif.*/
  font-weight: bold;
  /*Text en negreta. Alternativa: normal, bolder, etc.*/
  color: #222;
  /*Color fosc del text*/
  margin: 0.5em 0;
  /*Espai superior i inferior*/
}

.h1-secundari {
  font-weight: 300;
  /* Lletra fina. Alternativa: normal, bold, 400, 700, etc. */
  font-size: 2rem;
  /* Mida gran. Alternativa: ajustar valor segons necessitat, em, px, %, etc. */
  font-family: "Times New Roman", Times, serif;
  /* Tipus de lletra serif. */
  color: #222;
  /* Color fosc del text. Alternativa: qualsevol color CSS. */
}

.h2-taxo {
  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: Verdana, Geneva, Tahoma, sans-serif;
  /* Font sans-serif. Alternativa: qualsevol font. */
  font-weight: bold;
  /* Text en negreta. Alternativa: normal, bolder, etc. */
  color: #222;
  /* Color fosc del text. Alternativa: qualsevol color CSS. */
  margin: 0.3em 0;
  /* Espai superior i inferior. Alternativa: ajustar segons necessitat. */
}

.nota {
  border: 1px solid #888;
  /*Vora grisa suau. Alternativa: canviar color, estil o amplada.*/
  padding: 12px;
  /*Espai interior uniforme.*/
  margin-top: 2em;
  /*Espai superior gran.*/
  margin-bottom: 1em;
  /*Espai inferior. Alternativa: ajustar valor.*/
  font-size: 1.1em;
  /*Lletra una mica més gran.*/
  font-family: Georgia, "Times New Roman", Times, serif;
  /* Font Georgia. Alternativa: qualsevol font. */
  font-weight: normal;
  /* Text en negreta. Alternativa: normal, bold, bolder, etc. */
  color: #000060 ;
  /* Color fosc del text. Alternativa: qualsevol color CSS. */
}

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

/* 4. Peu de pàgina */

.peu1,
.peu2 {
  text-align: center;
  font-family: "Open Sans", sans-serif;
  color: #668066 ;
}
.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-bottom: 0.3em;
  /*Espai inferior petit.*/
}

.peu2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  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: 600px) {

  /*Aplica els estils següents només si la pantalla fa 600px o menys d’ample (mòbils i pantalles petites).*/
  body {
    margin: 0;
    /*Elimina el marge exterior.*/
    max-width: 100%;
    /*Fa que el cos ocupi tota l’amplada de la pantalla.*/
    padding: 0 4vw;
    /*Espai lateral flexible segons l’amplada de la pantalla. Alternativa: ajustar valor, px, %, etc.*/
  }

  .intro .biodiv {
    font-size: 2.5rem;
    /*Redueix la mida del títol principal per mòbils.*/
  }

  .intro .recopi {
    font-size: 1.6rem;
    /*Redueix la mida del subtítol per mòbils.*/
    margin-bottom: 3.3em;
    /*Augmenta l’espai inferior del subtítol.*/
  }

  /* 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-principal {
    font-size: 1.3rem;
    /*Mida del títol principal més petita i lleuger desplaçament cap a la dreta.*/
  }

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

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

  p {
    font-size: 1.1em;
    /* 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;
    /*Més petit per a mòbils.*/
    margin-bottom: 0.5em;
    /*Espai inferior una mica més petit.*/
  }

  .peu2 {
    font-size: 0.8em;
    /* més petit per a mòbils */
    margin-bottom: 1em;
    /*Espai inferior una mica més petit.*/
  }

  .peu1 a,
  .peu2 a {
    margin: 0 0.3em;
    /*Menys espai lateral entre enllaços.*/
  }

  .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.*/
  }
}