* {
  padding: 0px;
  margin: 0px;
}
div.logo-header {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  height: 100%;
}
nav {
  background: #ff6100;
  width: 100%;
  height: 6vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
nav a {
  text-decoration: none;
  color: #c3c3c3;
  transition: 0.2s ease;
  font-size: clamp(10px, 5vw, 20px);
}
nav a:hover,
nav a.actiu {
  color: #fff;
  transform: scale(1.2);
}
main {
  padding-left: 5%;
  padding-right: 5%;
}
.baners h3 {
  font-size: 3.5vh;
  padding-left: 20px;
  padding-right: 20px;
}
.baners p {
  font-size: 2vh;
  padding-left: 20px;
  padding-right: 20px;
}
.illa-iogurt {
  background: url(https://i.postimg.cc/Kc6xtp5Q/Screenshot-2025-12-23-17-09-18.png);
  min-height: 150px;
  aspect-ratio: 16/9;
  width: 100%;
  background-size: cover;
  background-position: center;
  transition: 0.2s ease;
  margin-bottom: 20px;
  display: flex;
  align-items: end;
  color: #ffffff;
}
.illa-iogurt:hover {
  transform: scale(1.015);
}

.baner-illa-iogurt {
  padding-bottom: 20px;
  background-color: rgb(97, 166, 255);
}
.taula-formatjosa {
  background: url(https://i.postimg.cc/hjFvy4NN/IMG-5623.jpg);
  min-height: 150px;
  aspect-ratio: 16/9;
  width: 100%;
  background-size: cover;
  background-position: center;
  transition: 0.2s ease;
  margin-bottom: 20px;
  display: flex;
  align-items: end;
  color: #ffffff;
}
.taula-formatjosa:hover {
  transform: scale(1.015);
}

.baner-taula-formatjosa {
  padding-bottom: 20px;
  background-color: rgb(187, 109, 25);
  margin-bottom: 20px;
}

.carta {
  transition: 0.2s ease;
}
.carta:hover {
  transform: scale(1.05);
}
.form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto; /* Centra el form */
  overflow: hidden;
}
.form iframe {
  width: 100%;
  height: 100vh; /* Ajusta la altura a la pantalla, o usa una altura en px */
  min-height: 800px; /* Asegura que el formulario no sea demasiado pequeño */
  border: none;
}
.intro h3 {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 2vh;
}
.personal h2 {
  display: flex;
  justify-content: center;
  font-size: 4vh;
}

.descrip-marti {
  background-color: #7ec5ff;
}

.descrip-lluis {
  background-color: #ffcaa8;
}

.descrip-pers h3 {
  margin: 2.5vh;
}

.descrip-marti img {
  transition: 0.2s ease;
}

.descrip-marti img:hover {
  transform: scale(1.05);
}
.descrip-lluis img {
  transition: 0.2s ease;
}

.descrip-lluis img:hover {
  transform: scale(1.05);
}

/* 1. El marc que retalla el que sobra */
.imatges-espais {
  width: 100%; /* Ocupa l'ample del pare */
  max-width: 100%; /* Tria l'ample màxim que vulguis */
  overflow: hidden; /* IMPRESCINDIBLE: amaga les altres fotos */
  margin: auto;
  margin-bottom: 35px;
  min-height: 100px;
  aspect-ratio: 16/9;
  transition: 0.2s ease;
}
.imatges-espais:hover {
  transform: scale(1.05);
}

/* 2. La tira de fotos que es mou */
.carrusel-espais {
  display: flex;
  width: 700%; /* Total de 7 fotos */
  margin: 0;
  padding: 0;
  border: none;
  gap: 0; /* ASEGÚRATE DE QUE NO HAYA GAP */
  animation: scroll-automatic 12s infinite ease-in-out;
}

.carrusel-espais img {
  width: calc(100% / 7); /* Cada foto es exactamente 1/7 del total */
  height: 100%;
  flex-shrink: 0; /* PROHIBE que la imagen se encoja */
  flex-grow: 0; /* PROHIBE que la imagen crezca */
  object-fit: contain;
  display: block; /* Elimina el espacio de línea de texto inferior */
}

@keyframes scroll-automatic {
  0%,
  14% {
    transform: translateX(0);
  }
  16%,
  30% {
    transform: translateX(calc(-100% / 7 * 1));
  }
  32%,
  46% {
    transform: translateX(calc(-100% / 7 * 2));
  }
  48%,
  62% {
    transform: translateX(calc(-100% / 7 * 3));
  }
  64%,
  78% {
    transform: translateX(calc(-100% / 7 * 4));
  }
  80%,
  94% {
    transform: translateX(calc(-100% / 7 * 5));
  }
  96%,
  100% {
    transform: translateX(calc(-100% / 7 * 6));
  }
}
.sobre-noltros {
  font-size: clamp(10px, 3vw, 20px);
}
.descrip-pers {
  margin-top: 20px;
  margin-bottom: 30px;
}
.descrip-lluis {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.descrip-lluis img {
  width: 33%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.descrip-marti {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.descrip-marti img {
  width: 33%;
  object-fit: cover;
  aspect-ratio: 1/1;
}