@import "~@fortawesome/fontawesome-free/css/all.min.css";

/**  SCROLLBAR **/
/* Estil per a la barra de desplaçament */
::-webkit-scrollbar {
  width: 10px; /* Amplada de la barra de desplaçament vertical */
  height: 12px; /* Altura de la barra de desplaçament horitzontal */
}

/* Estil per al fons de la barra de desplaçament */
::-webkit-scrollbar-track {
  background: #a3a3a3; /* Color de fons de la pista */
  border-radius: 10px;
}

/* Estil per al "thumb" o la part mòbil de la barra de desplaçament */
::-webkit-scrollbar-thumb {
  background: #2e5536; /* Color del thumb */
  border-radius: 10px;
}

/* Estil per quan l'usuari passa el ratolí sobre la barra */
::-webkit-scrollbar-thumb:hover {
  background: #2e5536; /* Color quan passa el ratolí sobre la barra */
}


.nav-link {
  color: #003854;
  transition: 0.5s ease;
}
.nav-link:hover {
  background-color: #f8f9fa;
  border: 1px solid #003854;
}
.navbar-brand {
  padding: 7px 25px 7px 25px;
  transition: 0.5s ease;
  color: #003854;
}
.navbar-brand:hover {
  background-color: #003854;
  color: #fff;
}

/* Estil inicial per a la navbar amb fons transparent */
.navbar.bg-transparent {
  background-color: transparent;
  transition: background-color 0.5s ease; 
}

/* Estil per a la navbar amb fons blanc */
.navbar.scrolled {
  background-color: #f8f9fa !important; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  transition: background-color 0.5s ease, box-shadow 0.3s ease;
}

/* Estil per quan el menú desplegable està obert */
.navbar.menu-open {
  background-color: #f8f9fa; /* Ex: color diferent per al menú desplegable */
}


/* Contenidor de la imatge principal */
.image-container {
  position: relative;
  background: url('imatges_inici/camp.jpg') no-repeat center center/cover;
  height: 100vh; 
}

.title-overlay {
  position: absolute;
  top: 65%; 
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}

.title-overlay h1 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 400;
  margin: 0;
}

/* Estil del logo del nav inicialment invisible */
#logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-left: 30%;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.5s ease; 
}
#logo.visible {
  opacity: 1;
  cursor: pointer;
}

/* Logo gran */
.logo{
  object-fit: contain;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 2%;
  left: 43.4%;
  display: block;
}

/* Enllaços a les imatges */
.position-relative {
  position: relative;
}

.enllaç-imatge {
  position: absolute;
  bottom: 35%; /* Línia just sota el text */
  left: 50%;
  font-size: 1.5rem;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 5px;
  border-bottom: 3px solid white; /* Línia decorativa */
  width: 21%; /* Amplada de la línia adaptada al text */
  max-width: 60%; /* La línia no serà més gran que aquest percentatge */
  transition: width 0.5s ease, opacity 0.4s ease;
}

.enllaç-imatge:hover {
  width: 32%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
}



/***  TITOL + LOGO + TITOL  ***/
.title-gradient {
  font-size: 2.5rem; 
  font-weight: bold;
  background: rgb(15,91,20);
  background: linear-gradient(90deg, rgba(15,91,20,1) 0%, rgba(11,107,11,1) 13%, rgba(22,139,20,1) 28%, rgba(23,163,21,1) 39%, rgba(27,184,25,1) 50%, rgba(92,208,45,1) 59%, rgba(94,228,40,1) 67%, rgba(90,238,43,1) 78%, rgba(104,242,53,1) 83%, rgba(167,245,62,1) 91%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 10px;
  margin-left: 50px;
  margin-top: 60px!important;
  margin-bottom: -30px;
}
.logo-title {
  height: 85px; 
  width: 85px;
  object-fit: contain;
  position: relative;
  bottom: 18px;
  margin: 0 10px; 
}

/* MAIN 1 */
.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
}
.custom-bg-green {
  background-color: #4a6242; 
  color: white;
}
.custom-highlight {
  color: #d4af37; 
  border-bottom: 2px solid #d4af37;
}
.custom-button {
  font-size: 16px;
  padding: 10px 20px;
  margin-top: 35px;
  background: rgb(247,199,51);
  background: linear-gradient(90deg, rgba(247,199,51,1) 0%, rgba(209,173,61,1) 37%, rgba(174,146,61,1) 73%, rgba(140,120,59,1) 100%);
  color: white;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;  /* Centrar text i icona */
  -webkit-transition: ease-out 0.2s;
  -moz-transition: ease-out 0.2s;
  transition: ease-out 0.2s;
}

.custom-button i {
  margin-left: 8px; /* Espai entre el text i la fletxa */
  font-size: 18px;  /* Ajusta la mida de la fletxa */
}

.custom-button:hover {
  background: linear-gradient(90deg, rgba(140,120,59,1) 0%, rgba(174,146,61,1) 37%, rgba(209,173,61,1) 73%, rgba(247,199,51,1) 100%);
  transform: scale(1.03); /* Efecte suau de creixement */
}



/*   MAIN 2  */

/* Secció 1  D Range*/
.section-1 {
  display: flex;
  align-items: stretch; /* Assegura que tots els elements ocupin la mateixa alçada */
  background-color: #113518;
  color: white;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
  width: 100%;
  min-height: 500px; /* Ajusta segons sigui necessari */
}

.section-1 .col-lg-6 {
  padding: 0; /* Elimina qualsevol espai intern de les columnes */
  width: 40%;
  margin-left: 10%;
}

.section-1 img {
  width: 100%; /* Ocupa tota l'amplada */
  height: 100%; /* Ocupa tota l'alçada del contenidor */
  object-fit: cover; /* Manté la proporció i ajusta la imatge per omplir el contenidor */
}

.section-1 h2 {
  font-family: Poppins; /* Canviar la font */
  font-size: 44px;
  font-weight: bold; /* Per a donar més força al títol */
  margin-bottom: 20px;
  margin-top: 0.5rem;
}

.section-1 p {
  font-size: 15px; /* Augment de mida del text */
  line-height: 1.6;
  font-family: Poppins; /* Canviar la font */
}

/* Secció 2 */
.section-2 {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  flex-wrap: wrap; /* Assegura que les columnes es puguin apilar en pantalles petites */
  min-height: 500px; /* Ajust d'altura mínima */
}

.section-2 > div {
  flex: 1; /* Assegura que les columnes tinguin la mateixa amplada */
  min-width: 300px; /* Evita que les columnes siguin massa estretes en pantalles petites */
}

.section-2 img {
  width: 100%; /* La imatge ocupa l'amplada total del seu contenidor */
  height: auto; /* Manté la relació d'aspecte de la imatge */
  object-fit: cover;
}

.section-2 h2 {
  font-size: 2.5rem;
  font-weight: bold;
}

.section-2 p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Botó per a l'escola */
.button-escola {
  background-color: #28a745; /* Canviar el color de fons */
  color: white; /* Canviar el color del text */
  border-radius: 20px; /* Arrodonir els angles */
  padding: 5px 15px; /* Augmentar l'espai intern */
  font-size: 1.2rem; /* Canviar la mida de la font */
  transition: background-color 0.3s ease; /* Afegir una transició suau */
  margin-top: 1rem;
}

/* Tarifes */
.tarifes {
  background: linear-gradient(90deg, #005a00, #b4d900);
  color: white;
  padding: 50px;
  margin-top: 50px;
  margin-bottom: 150px;
  position: relative;
  clip-path: polygon(0 0, 100% 15%, 100% 90%, 0 100%);
  min-height: 500px; /* Altura mínima per centrar */
  display: flex; /* Afegim flexbox */
  align-items: center; /* Centrat vertical */
}

.tarifes h3 {
  font-size: 2rem;
}

.tarifes p {
  font-size: 1.2rem;
  line-height: 1.6;
}

.tarifes .btn {
  border-radius: 20px;
  font-size: 1rem;
  padding: 10px 20px;
}

.text-start {
  text-align: left;
}

.d-flex.flex-column .btn {
  margin-top: 15px; /* Separació entre botons */
  margin-right: 55px;
}


.vine-provar {
  max-width: 600px; /* Amplada màxima */
  margin: 0 auto; /* Centrat horitzontal */
  padding: 20px;
  text-align: center; /* Centrar el contingut */
  margin-bottom: 7rem;
}

/* Títol amb una classe personalitzada */
.custom-title {
  font-size: 2rem;
  font-weight: bold;
  color: rgb(22, 21, 21);
   margin-bottom: 40px;
}

/* Línia suau entre el títol i el botó amb una classe personalitzada */
.custom-divider {
  border: none;
  border-top: 2px solid #ceb008;
  margin: 20px auto; /* Margen entre la línia i els altres elements */
  width: 35%; /* Amplada de la línia */
}


/* Conatcte */

.bg-green {
  background-color: #003300; /* Verd fosc */
}

.text-white {
  color: #ffffff;
}

.divider {
  height: 2px;
  background-color: #ffffff;
  width: 50px;
  margin-bottom: 20px;
}

/* Formulari d'estil */
.form-control, .form-select {
  border-radius: 0;
}

/* Botó d'enviament */
.btn-primary {
  background-color: #003300;
  border: none;
  padding: 10px 20px;
}
.btn-primary:hover {
  background-color: #005500;
}

/* Boto top */
/* Estilitzem el botó per a que estigui fixat a la part inferior dreta */
.top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0.6;
  font-size: 24px;
  background-color: rgba(000,000,000,0.3);
  color: white;
  padding: 5px 15px;
  text-decoration: none;
  display: block;  /* Assegura't que es mostri */
  z-index: 99;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Canviem el color quan l'usuari passa el ratolí per sobre */
.top-btn:hover {
  background-color: #555;
}


/* FOOTER */
footer {
  background-color: #013601; /* Verd fosc */
  color: white;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  margin-top: 20vh;
  height: min-content;
  overflow: auto; /* Assegura que el contingut no es retalli */
  box-sizing: border-box; /* Inclou el padding en el càlcul de l'altura total */
}

footer .left-section {
  text-align: left;
}

footer .right-section {
  text-align: center;
}

footer .newsletter {
  margin-top: 20px;
}

footer input[type="email"] {
  border-radius: 4px;
  border: none;
  padding: 10px;
  width: 200px;
  margin-right: 10px;
}

footer button {
  background-color: #ffffff;
  color: #013601;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

footer button:hover {
  background-color: #d9d9d9;
}

footer .social-icons a {
  color: white;
  margin: 0 10px;
  font-size: 18px;
  text-decoration: none;
}

footer .social-icons a:hover {
  color: #d9d9d9;
}

footer .checkbox-container {
  margin-top: 10px;
}

footer .checkbox-container label {
  font-size: 14px;
}

footer .copyright {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
}


/** RESPONSIVE **/
/* Dispositius mòbils petits (≤ 576px) */
@media screen and (max-width: 576px) {
  .image-container {
    height: 80vh;
  }

  .title-overlay h1 {
    font-size: 0.2rem;
    margin-top: 10vh;
  }

  .navbar-brand {
    padding: 5px 15px;
  }

  #logo{
    display: none;
  }

  .logo {
    display: block;
    top: 70px;
    left: 50%; /* Centrat horitzontalment */
    transform: translateX(-50%); /* Centrat absolut */
    position: absolute;
    width: 120px;
    height: 120px;
  }

  .title-gradient {
    font-size: 1.5rem;
  }

  .row img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
  }
  .section-2 img {
    width: 100%; /* La imatge ocupa l'amplada total del seu contenidor */
    height: auto; /* Manté la relació d'aspecte de la imatge */
    object-fit: contain; /* La imatge es redimensiona sense retallades per a mostrar-la completa */
  }

  .enllaç-imatge {
    width: 25%; /* Amplada de la línia adaptada al text */
    max-width: 60%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1.2rem;
  }
  
  .enllaç-imatge:hover {
    width: 32%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
 
}

/* Dispositius mòbils mitjans (≤ 768px) */
@media screen and (max-width: 768px) {
  .image-container {
    height: 90vh;
  }

  .title-overlay h1 {
    font-size: 3vw;
    margin-top: 10vh;
  }

  .navbar-brand {
    padding: 7px 20px;
  }

  #logo.visible {
    opacity: 0;
  }

  .logo {
    display: block;
    top: 150px;
    left: 50%; /* Centrat horitzontalment */
    transform: translateX(-50%);
    position: absolute;
    width: 150px;
    height: 150px;
  }

  .title-gradient {
    font-size: 2rem;
  }

  .row img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
  }
  .section-2 img {
    width: 100%; /* La imatge ocupa l'amplada total del seu contenidor */
    height: auto; /* Manté la relació d'aspecte de la imatge */
    object-fit: contain; /* La imatge es redimensiona sense retallades per a mostrar-la completa */
  }

  .section-1 {
    flex-direction: column; /* Col·loca la imatge i el text en columna */
    align-items: center; /* Centra els elements */
  }

  .section-1 .col-lg-6 {
    width: 100%; /* Ocupa tota l'amplada en mòbils */
    margin-left: 0; /* Elimina el marge esquerre */
    padding: 0;
  }

  .section-1 img {
    width: auto; /* Ajusta l'amplada al contingut original */
    height: auto; /* Manté l'alçada original de la imatge */
    object-fit: contain; /* Manté la proporció de la imatge sense retallar-la */
    margin-bottom: 20px; /* Afegim espai entre la imatge i el text */
  }

  .section-1 h2, .section-1 p {
    padding: 0 15px; /* Afegim espai als costats per al text */
    text-align: center; /* Opcional: centra el text */
  }

  .d-flex.flex-column .btn {
    margin-top: 10px; /* Separació entre botons */
    margin-right: 10px;
  }
}

/* Tauletes i dispositius grans (≤ 992px) */
@media screen and (max-width: 992px) {
  .image-container {
    height: 80vh;
  }

  .title-overlay h1 {
    font-size: 2rem;
    margin-top: 8vh;
  }

  .navbar-brand {
    padding: 10px 25px;
  }

  #logo.visible {
    opacity: 1;
  }

  .logo {
    display: block;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }

  .title-gradient {
    font-size: 2.5rem;
  }

  .row img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
  }
  .section-2 img {
    width: 100%; /* La imatge ocupa l'amplada total del seu contenidor */
    height: auto; /* Manté la relació d'aspecte de la imatge */
    object-fit: contain; /* La imatge es redimensiona sense retallades per a mostrar-la completa */
  }

}

/* Pantalles grans i escriptoris (≤ 1200px) */
@media screen and (max-width: 1200px) {
  .image-container {
    height: 90vh;
  }

  .title-overlay h1 {
    font-size: 2.5rem;
    margin-top: 9vh;
  }

  .navbar-brand {
    padding: 15px 30px;
  }

  .logo {
    display: block;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }

  .title-gradient {
    font-size: 3rem;
  }

  .row img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
  }
  .section-2 img {
    width: 100%; /* La imatge ocupa l'amplada total del seu contenidor */
    height: auto; /* Manté la relació d'aspecte de la imatge */
    object-fit: contain; /* La imatge es redimensiona sense retallades per a mostrar-la completa */
  }
}

/* Pantalles molt grans (> 1200px) */
@media screen and (min-width: 1201px) {
  .image-container {
    height: 100vh;
  }

  .title-overlay h1 {
    font-size: 3vw;
    margin-top: 20vh;
  }

  .navbar-brand {
    padding: 20px 40px;
  }

  .logo {
    display: block;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }

  .title-gradient {
    font-size: 3.5rem;
  }

  .row img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
  }

  .section-1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section-2 img {
    width: 100%; /* La imatge ocupa l'amplada total del seu contenidor */
    height: auto; /* Manté la relació d'aspecte de la imatge */
    object-fit: contain; /* La imatge es redimensiona sense retallades per a mostrar-la completa */
  }
}

/* FOOTER RESPONSIVE  */

/* Footer Responsive */
@media screen and (max-width: 576px) {
  footer {
    height: 80vh;
  }
  .title-overlay h1{
    font-size: 1.4rem;
  }

  .title-gradient{
    font-size: 1.9rem;
    margin-right: 60px!important;
  }
  .tarifes {
    padding: 3rem 1rem; /* Menys padding per dispositius petits */
  }

  .text-start h3, .text-start p {
    font-size: 1rem; /* Reduir la mida del text per dispositius petits */
  }

  .me-5 {
    margin-right: 0; /* Elimina el marge dret per dispositius petits */
  }

  .d-flex {
    flex-direction: column; /* Alinea tot verticalment */
    align-items: center; /* Centra els elements horitzontalment */
  }

  .text-start {
    text-align: center; /* Centra el text a dispositius petits */
    margin-bottom: 1rem; /* Menys espai entre els elements del text */
  }

  .btn {
    width: 100%; /* Els botons ocupen tot l'amplada disponible */
    margin-bottom: 1rem; /* Marge inferior per separar els botons */
  }
}

@media screen and (min-width: 280px) and (max-width: 430px) {
  footer {
    min-height: 80vh;
  }
  
  .title-overlay h1{
    margin-top: 20vh;
    font-size: 1.4rem;
  }
  .logo {
    height: 100px;
    width: 100px;
  }

  .logo-title{
    margin-top: 15px;

  }
  .title-gradient{
    font-size: 1.8rem;
    margin-right: 55px!important;
  }
  .somiar{
    padding: 0;
  }

  .enllaç-imatge {
    width: 30%; /* Amplada de la línia adaptada al text */
    max-width: 60%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1rem;
  }
  
  .enllaç-imatge:hover {
    width: 35%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
  footer {
    height: 90vh;
  }
  .title-overlay h1{
    margin-top: 20vh;
    font-size: 1.8rem;
  }
  .title-gradient{
    font-size: 2.3rem;
    margin-right: 60px!important;
  }
  /* Estil del logo del nav inicialment invisible */
  #logo {
  width: 50px; 
  }

  .enllaç-imatge {
    width: 25%; /* Amplada de la línia adaptada al text */
    max-width: 60%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1.5rem;
  }
  
  .enllaç-imatge:hover {
    width: 30%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  footer {
    height: 60vh;
  }

  .title-overlay h1{
    margin-top: 20vh;
    font-size: 1.8rem;
  }
  .logo {
    height: 170px;
    width: 170px;
  }

  .title-gradient{
    font-size: 2.5rem;
    margin-right: 50px!important;
  }
  .enllaç-imatge {
    width: 40%; /* Amplada de la línia adaptada al text */
    max-width: 70%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1.1rem;
  }
  
  .enllaç-imatge:hover {
    width: 50%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  footer {
    height: 60vh;
  }
  .title-overlay h1{
    margin-top: 20vh;
    font-size: 2rem;
  }
  .logo {
    height: 190px;
    width: 190px;
  }
  .title-gradient{
    font-size: 2.6rem;
    margin-right: 60px!important;
  }
  .enllaç-imatge {
    width: 35%; /* Amplada de la línia adaptada al text */
    max-width: 60%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1.2rem;
  }
  
  .enllaç-imatge:hover {
    width: 45%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}

@media screen and (min-width: 1201px) {
  footer {
    height: 60vh;
  }
  .title-overlay h1{
    margin-top: 18vh;
    font-size: 2.7rem;
  }
  .enllaç-imatge {
    width: 40%; /* Amplada de la línia adaptada al text */
    max-width: 70%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1.3rem;
  }
  
  .enllaç-imatge:hover {
    width: 48%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}


@media screen and (min-width: 768px) and (max-width: 1999px) {
  .newsletter input{
    margin-bottom: 15px;
  }
}

/* Ajust específic per a 768px */
@media screen and (width: 768px) {
  footer {
    height: 70vh !important;
  }
}

@media (max-height: 700px) {
  footer {
    margin-top: 50px; /* Redueix el marge superior per a pantalles petites */
    overflow: auto; /* Assegura que el contingut no es retalli */
    box-sizing: border-box; /* Inclou el padding en el càlcul de l'altura total */
  }
}
@media (max-height: 450px) {
  .logo {
    margin-bottom: 200px;
    display: flex;
    margin-top: -3.5rem;
  }
  .title-overlay h1{
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 577px) and (max-width: 768px) {
  
  /* Estil del logo del nav inicialment invisible */
  #logo {
  width: 50px; 
  }
}

@media screen and (max-width: 480px) {
  
  /* Estil del logo del nav inicialment invisible */
  #logo {
  display: none; 
  }
}

@media (width: 768px){
  .enllaç-imatge {
    width: 40%; /* Amplada de la línia adaptada al text */
    max-width: 70%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1rem;
  }
  
  .enllaç-imatge:hover {
    width: 48%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}

@media (min-width: 1300px){
  .enllaç-imatge {
    width: 35%; /* Amplada de la línia adaptada al text */
    max-width: 70%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1.5rem;
  }
  
  .enllaç-imatge:hover {
    width: 42%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}

@media (min-width: 2000px){
  .enllaç-imatge {
    width: 21%; /* Amplada de la línia adaptada al text */
    max-width: 70%; /* La línia no serà més gran que aquest percentatge */
    font-weight: 500;
    font-size: 1.5rem;
  }
  
  .enllaç-imatge:hover {
    width: 29%; /* Quan es fa hover, la línia s'estira fins al 100% de l'amplada */
  }
}