.portada-casaments{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.intro-casaments{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5% 20% 5% 20%;
    width: 90vw;
    margin: 0 auto;

    .alga-sectio-title-gold {
        margin-bottom:0;
    }

    p{
        text-align: center;
    }

    img{
        width: 100%;
        height: auto;
        display: block;
        margin: auto;
        padding-top: 4%;
    }
}


.route_surrounds_index  .intro-casaments,
.route_surround_detail  .intro-casaments {
        padding: 3% 20% 2% 20%;
}





.gastronomia-casaments{
    background-image:
    linear-gradient(45deg,
      rgba(209, 193, 152, 0.8),
      rgba(29, 39, 64, 0.9)),
    url("../img/algaGastroCasaments-i93x9Ge.jpg");
    background-size: cover;
    background-position: center; /* Centra la imagen para que no se corte lo importante */
    background-repeat: no-repeat;

}


  /* GALERIA */

  .galeria {
    width: 100%;
    overflow: hidden;
    padding: 0 0 150px 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .galeria .alga-sectio-title-gold {
      padding: 50px 20% 0 20%;
  }
  
  .galeria-carousel-wrapper {
    position: relative;
    width: 100vw;
    overflow: hidden;
  }
  
  .galeria-carousel {
    display: flex;
    gap: 80px; 
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .galeria-card {
    flex: 0 0 38vw; 
    aspect-ratio: 3/2;
    border-radius: 30px; 
    overflow: hidden;    
    display: block;
  }
  
  .galeria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;  
    display: block;
 
  }

  
  
  /* Fletxes de navegació */
  .carousel-btn-galeria {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
  }
  

  .carousel-btn-galeria.prev {
    left: calc((55vw + 80px) / 2 - 25px);
  }
  
  .carousel-btn-galeria.next {
    right: calc((55vw + 80px) / 2 - 25px);
  }
  
  .carousel-btn-galeria img {
    width: 24px; 
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));
  }


  .galeria-card {
      scroll-snap-align: center;
  }


  /* PROJECTE EN MENT */

  .projecte-section {
    display: flex;
    align-items: left;      
    justify-content: center;
    padding: 3% 20%; 
    background: var(--backgroundImage01) center;
    position: relative;       
    gap: 50px;
    margin-bottom: 180px;               
}

.projecte-content {
    flex: 1;                 
    z-index: 2;              
    max-width: 500px;

    .alga-sectio-title-dark{
        text-align: left;
        margin: 0;
    }
}

.projecte-content p {
    margin: 20px 0 30px 0;
    line-height: 1.6;
}

.imatge-projecte {
    flex: 1;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.imatge-projecte img {
    width: 100%;
    max-width: 550px;         
    aspect-ratio: 8 / 9;      
    object-fit: cover;
    border-radius: 40px;      
    
    /* EL TRUC DEL MARGIN */
    margin-bottom: -150px;    /* Això farà que la imatge sobresurti per sota si cal */
   
}


/********************************* RESPONSIVE *********************************/

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1400px)
  and (-webkit-min-device-pixel-ratio: 2) {
    
    .carousel-btn-galeria.prev {
      left: calc((50vw + 80px) / 2 - 25px);
    }
    
    .carousel-btn-galeria.next {
      right: calc((50vw + 80px) / 2 - 25px);
    }
    
    .projecte-section {
      padding: 3% 10%;
 
    }
  }

/* TABLET FINS A 1024px */

@media screen and (max-width: 1024px) {


  .intro-casaments{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 20% 5% 20%;
    width: 90vw;
    margin: 0 auto;
    align-items: center;

  } 
  

  .intro-casaments h2{
    text-align: center;
  }

  .intro-casaments {
    padding: 10% 8%;

    img {
        width: 95%;
      }
  }

  .card img {
    width: 25vw;
  }

  .gastronomia-content-text {
      padding: 5% 10% !important;
  }

  .galeria-carousel-wrapper {
      width: 100vw;
      overflow: hidden; 
      position: relative;
      touch-action: none; 
  }

  .galeria-carousel {
    display: flex;
    gap: 70px !important; 
    padding: 0;
    margin: 0;
    list-style: none;
    will-change: transform;
  }

  .galeria-card {

    flex: 0 0 70vw !important; 
    width: 70vw !important;
    aspect-ratio: 4/3 !important; 
    border-radius: 30px;
    overflow: hidden;
  }

  .galeria-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; 
  }


  .carousel-btn-galeria.prev {
      left: calc((20vw + 20px) / 2 - 25px);
  }
  .carousel-btn-galeria.next {
    right: calc((20vw + 40px) / 2 - 25px);
  }
  .carousel-btn-galeria img {
  width: 24px;
  }

  .projecte-section{
  flex-direction: column;
  padding: 10% 15%;
  }

} 

/* --- MÒBIL (Per defecte i fins a 600px aprox) */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .intro-casaments{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 3% 5% 10% 5%;
      width: auto;
      align-items: center;
    } 
    

    .intro-casaments h2{
      text-align: center;
    }

    .intro-casaments {
      img {
          width: 95%;
        }
    }
    .gastronomia-casaments{
      background-image: none;
    }

    .gastronomia-content-text{
      padding: 5% 0!important;
    }

    .galeria {
      padding: 3% 0 10% 0;
    }

    .galeria-carousel-wrapper {
        width: 100vw;
        overflow: hidden; 
        position: relative;
        touch-action: none; 
    }
  
  .galeria-carousel {
      display: flex;
      gap: 15px !important; 
      padding: 0;
      margin: 0;
      list-style: none;
      will-change: transform;
  }
  
  .galeria-card {
   
      flex: 0 0 65vw !important; 
      width: 65vw !important;
      aspect-ratio: 3/4 !important; 
      border-radius: 30px;
      overflow: hidden;
  }
  
  .galeria-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none; 
  }
  
  
  .carousel-btn-galeria.prev { 
      left: 40px;
      background-color: white;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 500px;
      height: 40px;
      width: 40px;
    }
  .carousel-btn-galeria.next { 
    right: 40px;
    background-color: white;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 500px;
    height: 40px;
    width: 40px;
  }
  .carousel-btn-galeria img {
    width: 12px;
  }

  .projecte-section{
    flex-direction: column;
    padding:50px 30px;
  }
  
}