*{
  margin: 0;
  padding:0;
}

body{
  background: white;
  color: #000;
  font-family: Plex_Light;
}

.Contenidor_Principal{
  width: 94%;
  max-width: 1000px;
  margin: 20px auto;
  border: 0px solid blue;
  background: #fff;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(4,auto);

  grid-template-areas: "Logo Logo Menu Menu"
                       "i1 i2 i3 i4"
                       "i5 i6 i7 i8"
                       "Peu Peu Peu Peu";
}

.Contenidor_Principal .Logotip{
  border: 0px solid red;
  margin-top: 60px;
  grid-area: Logo;
}

.Contenidor_Principal .Menu{
  border: 0px solid green;
  margin-top:75px;
  text-align: right;
  grid-area: Menu;
}

.Contenidor_Principal .Menu a{
  text-decoration: none;
  padding-left: 10px;
}

a:link{
  color: #000;
}

a:visited{
  color: #000;
}

a:hover{
  color: #999999;
}

a:active{
  color: red;
}

.telefon {
  color: black;
  text-decoration: none;
}

.correu {
  color: black;
  text-decoration: none;
}

.Contenidor_Principal .Imatge_1{
  background: #fff;
  color: black;
  width: 100%;
  grid-area: i1;
}

.Contenidor_Principal .Imatge_2{
  background: #fff;
  color: black;
  width: 100%;
  grid-area: i2;
}

.Contenidor_Principal .Imatge_3{
  background: #fff;
  color: black;
  width: 100%;
  grid-area: i3;
}

.Contenidor_Principal .Imatge_4{
  background: #fff;
  color: black;
  width: 100%;
  grid-area: i4;
}

.Contenidor_Principal .Imatge_5{
  background: #fff;
  color: black;
  grid-area: i5;
}

.Contenidor_Principal .Imatge_6{
  background: #fff;
  color: black;
  grid-area: i6;
}

.Contenidor_Principal .Imatge_7{
  background: #fff;
  color: black;
  grid-area: i7;
}

.Contenidor_Principal .Imatge_8{
  background: #fff;
  color: black;
  grid-area: i8;
}

.Contenidor_Principal .Peu{
  text-align: center;
  grid-area: Peu;
  margin-top: 20px;
}

.img{
  width: 100%;
  border: 0px;
}

.img-portada{
  width: 100%;
  border: 0px;
  margin-bottom: 1.5em;
}

.img-persona{
  margin-bottom: 0.5em;
}


.Contenidor_Principal .equip{
  grid-column-start: 1;
  grid-column-end: 5;
  background: white;
}

.Contenidor_Principal .ai{
  grid-column-start: 1;
  grid-column-end: 3;
  background: white;
}

.Contenidor_Principal .fric{
  grid-column-start: 3;
  grid-column-end: 5;
  background: white;
}
.fitxa{
  display:flex;
  border: 0px solid black;
  gap: 25px;
}

.columna_caracteristiques{
  width: 30%;
  background: white;
  border: 0px solid red;
}

.columna_caracteristiques_EC{
  width: 30%;
  background: white;
  border: 0px solid red;
}

.columna_explicacio{
  width: 70%;
  background: white;
  border: 0px solid blue;
}

.persones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  border: 0px solid magenta;
}

.persona {
  border: 0px solid red;
}

.linia {
  width: 40px;
  height: 1px;
  background: #ccc;
  margin: 15px 0;
}

.paragraf{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.5em;
  margin-top: 1.5em;

  font-family: Plex_Light;
  text-align: justify;
}

.paragraf_explicacio{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.5em;
  margin-top: 0em;

  font-family: Plex_Light;
  text-align: left;
}

.paragraf_persona_equip{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.5em;
  margin-top: 1.5em;

  font-family: Plex_Light;
  text-align: left;
}

.prev_next{
  font-family:Plex_Regular;
  font-size: 12px;
  font-weight: 400;

  line-height: 0.8;
  margin-top: 1em;
}

.Contenidor_Principal .contacte{
  grid-column-start: 1;
  grid-column-end: 5;
  background: white;
}

.Contenidor_Principal .projecte{
  grid-column: 1 / -1; /* ocupa totes les columnes */
  grid-row: 2 / 4;    /* de i1 fins a i8 */
}

.slider {
  position: relative;
  width: 1000px;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 1.5em;
  border: 0px solid blue;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  touch-action: pan-y;
}

.slides img {
  width: 100%;
  display: block;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: rgb(205, 205, 205);
    background-color: rgba(0,0,0,0);
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 5px;
    display: none; /* ocultes per defecte */
  }

.arrow:hover {
  color: rgba(0,0,0,0.6);
}

.slider:hover .arrow {
  display: block; /* apareixen quan passes el cursor */
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.negreta {
  font-family:Plex_Regular;
  font-size: 12px;
  font-weight: 400;
}

/* A partir d'aqui, Versió de Mobil*/

@media screen and (max-width: 480px){
  .Contenidor_Principal{
    grid-template-areas: "Logo Logo Logo Logo"
                         "Menu Menu Menu Menu"
                         "i1 i1 i1 i1"
                         "i2 i2 i2 i2"
                         "i3 i3 i3 i3"
                         "i4 i4 i4 i4"
                         "i5 i5 i5 i5"
                         "i6 i6 i6 i6"
                         "i7 i7 i7 i7"
                         "i8 i8 i8 i8"
                         "Peu Peu Peu Peu";
  }
  .Contenidor_Principal .Logotip{
    margin-top: 0px;
  }
  .Contenidor_Principal .Menu{
    margin-top: 1px;
    text-align: left;
  }
  .Contenidor_Principal .Menu a{
    padding-left: 0px;
  }
  .Contenidor_Principal .ai{
    grid-column-start: 1;
    grid-column-end: 5;
    background: white;
  }
  .Contenidor_Principal .fric{
    grid-column-start: 1;
    grid-column-end: 5;
    background: white;
  }
  .fitxa {
    flex-direction: column;
    gap: 20px;
  }
  .columna_caracteristiques,
  .columna_explicacio {
    width: 100%;
  }
  .columna_caracteristiques_EC {
    width: 100%;
    margin-bottom:0.5em;
  }
  .Contenidor_Principal .projecte{
  grid-column: 1 / -1; /* ocupa totes les columnes */
  grid-row: 3 / 11;    /* de i1 fins a i8 */
  }
  .persones {
  grid-template-columns: 1fr;
  }
  .info_projecte {
  display: none;
  }
  .fitxa{
  gap: 0px;
  }
  .img-portada{
  margin-bottom: 0.8em;
  }
  .slider {
  margin-bottom: 0.8em;
  }
}


/* A partir d'aqui, no toquem res de moment*/

h1 {
  font-family:Plex_Regular;
  font-size: 30px;
  font-weight: 400;
}

h2{
  font-family:Plex_Regular;
  font-size: 22px;
  font-weight: 400;
}

h3{
  font-family:Plex_Regular;
  font-size: 17px;
  font-weight: 400;
}

h4{
  font-family:Plex_Regular;
  font-size: 14px;
  font-weight: 400;
}

h5{
  font-family:Plex_Regular;
  font-size: 12px;
  font-weight: 400;

  line-height: 0.8;
  margin-top: 1.5em;
}

h6{
  font-family:Plex_Light;
  font-size: 10px;
  text-align: center;
  font-weight: 400;
}