/* FIX overflow orizzontale globale */
html, body {
    width: 100%;
    overflow-x: hidden;
  }
  
  * { box-sizing: border-box; }
  


h1, h2 {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;

}


p {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;

}




.hero {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;   /* ⬅️ QUESTA */
    
    border-radius: 0 0 60px 60px;
    overflow: hidden;
    color: #fff;
  }
  
  

  
  /* Gradient overlay sopra all’immagine */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.55)
    );
    z-index: 1;
  }


  .hero-video{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  
  /* assicura overlay sopra al video */
  .hero::before{
    z-index: 1;
  }
  
  /* assicura contenuti sopra overlay */
  .hero-content,
  .hero-logo-left,
  .hero-logo-right,
  .scroll-down{
    position: relative;
    z-index: 2;
  }
  
  
  .hero-content {
    position: relative;
    z-index: 2;
    min-height: 100vh;
  }
  
  /* Animazione fadeUp */
  @keyframes fadeUp {
    0% {
      opacity: 0;
      transform: translateY(25px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .hero h1 {
    font-family: "Cormorant", serif;
    font-size: 6rem;
    letter-spacing: 0.8rem;
    text-transform: uppercase;
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
  }
  
  .subtitle {
    font-size: 1.4rem;
    font-family: "Inter", sans-serif;
    /* max-width: 540px; */
    margin: 0 auto;
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.5s;
    opacity: 0;
  }
  
  .btn-hero {
    border-radius: 999px;
    padding: 0.75rem 2.5rem;
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
    text-transform: uppercase;
    transition: all .25s ease;
    animation: fadeUp 1s ease forwards;
    animation-delay: 0.8s;
    opacity: 0;
  }
  
  .btn-hero:hover {
    background-color: #fff;
    color: #222;
  }
  
  .hero-logo-left,
  .hero-logo-right {
    position: absolute;
    top: 20px;
    z-index: 3;
  }
  
  .hero-logo-left {
    left: 20px;
  }
  
  .hero-logo-right {
    right: 20px;
  }
  
  .scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50px;
  }
  
  .scroll-down::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background: #fff;
    border-radius: 50%;
    animation: scrollAnim 1.6s infinite;
  }
  
  @keyframes scrollAnim {
    0% { opacity: 0; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(10px); }
    100% { opacity: 0; transform: translateY(20px); }
  }



  /* =========================
   SECTION COLLAGE
========================= */

.section-collage{
    background: #f4f1ea;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
  }
  
  /* IMMAGINE COLLAGE */
  /* .collage-image{
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(0,0,0,.12);
  }
   */
  .collage-image img{
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* COPY */
  .collage-copy{
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
  }
  
  .collage-copy__inner{
    position: relative;
    padding-left: 70px; /* spazio per linea */
    max-width: 520px;
  }
  
  .mini-mark{
    font-size: 28px;
    margin-bottom: 18px;
  }
  
  .collage-copy h2{
    font-family: "Cormorant", serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 10px;
  }
  
  .collage-copy p{
    margin-top: 18px;
    max-width: 420px;
  }
  
  /* LINEA GRAFICA A DESTRA */
  .collage-line{
    position: absolute;
    top: 40px;
    right: 24px;
    width: 260px;
    height: 420px;
    border: 1px solid rgba(0,0,0,.18);
    border-left: none;
    border-bottom: none;
    transform: skewX(-8deg);
    opacity: .55;
    pointer-events: none;
  }
  
  /* =========================
     FADE-IN (STESSO DELL’HERO)
  ========================= */
  
  .reveal-on-scroll{
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .9s ease, transform .9s ease;
  }
  
  .reveal-on-scroll.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  
  




  @media (max-width: 991.98px){
    .section-collage{
      padding: 70px 0;
    }
  
    .collage-copy{
      min-height: auto;
      margin-top: 40px;
    }
  
    .collage-copy__inner{
      padding-left: 0;
    }
  
    .collage-line{
      display: none;
    }
  }

  
  @media (max-width: 768px) {
    .hero {
      border-radius: 0 0 40px 40px;
      background-attachment: scroll;
    }
  
    .hero h1 {
      font-size: 2.7rem;
    }
  
    .subtitle {
      font-size: 1rem;
      padding: 0 1.5rem;
    }
  
    .hero-logo-left img,
    .hero-logo-right img {
      /* max-width: 120px; */
    }
  }
  
  @media (max-width: 575.98px){
    .section-collage{
      padding: 56px 0;
    }
  
    .collage-image{
      border-radius: 18px;
    }
  }
  


  /* =========================
   SECTION: ESPERIENZE
========================= */
.exp-section{
  background:#f4f1ea;
  padding: 40px 0;
  overflow:hidden;
}

.exp-head{ margin-bottom: 28px; }
.exp-mark{ font-size: 34px; line-height:1; margin-bottom: 6px; opacity:.9; }
.exp-kicker{
  font-family:"Inter", sans-serif;
  letter-spacing:.2em;
  font-size:.9rem;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom: 6px;
}
.exp-title{
  font-family:"Cormorant", serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 4rem;
  margin:0;
}

/* Card */
.exp-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 420px;
}

/* Background */
.exp-bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: opacity .35s ease;
}

.exp-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.35) 100%,
    rgba(0,0,0,.18) 60%,
    rgba(0,0,0,.10) 100%);
}

/* Left menu */
.exp-menu{
  position:absolute;
  top:0; left:0;
  height:100%;
  width: 310px;
  padding: 80px 22px;
  background: rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
  z-index: 2;
}

.exp-menu__list{
  list-style:none;
  margin:0;
  padding:0;
}

.exp-menu__btn{
  width:100%;
  text-align:left;
  background: transparent;
  border:0;
  color:#fff;
  padding: 10px 6px;
  font-family:"Inter", sans-serif;
  font-size: 1rem;
  letter-spacing:.02em;
  opacity:.85;
  display:flex;
  align-items:center;
  gap:10px;
}
.exp-menu__btn::before{ content:"•"; opacity:.9; }
.exp-menu__btn:hover{ opacity:1; }
.exp-menu__btn.is-active{ opacity:1; font-weight:600; }

/* Content */
.exp-content{
  position:absolute;
  left: 360px;
  right: 90px;
  bottom: 56px;
  color:#fff;
  max-width: 560px;
  z-index: 2;
}

.exp-content__title{
  font-family:"Cormorant", serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 2.2rem;
  margin:0 0 10px 0;
}
.exp-content__text{
  margin:0;
  font-family:"Inter", sans-serif;
  line-height:1.7;
  opacity:.9;
  max-width: 520px;
}

/* base frecce */
.exp-prev,
.exp-next {
  position: absolute;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;          /* rotondo */
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15); /* effetto glass */
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover */
.exp-prev:hover,
.exp-next:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
  transform: scale(1.1);
}

/* Active/press */
.exp-prev:active,
.exp-next:active {
  transform: scale(0.95);
}

/* Posizionamento desktop */
.exp-next {
  top: 50%;
  right: 20px;
}

.exp-prev {
  top: 50%;
  right: 80px;
}

/* Mobile: freccia destra in alto */
@media (max-width: 991px) {
  .exp-next {
    bottom: auto;
    top: 15px;
    right: 15px;
  }

  .exp-next:hover,
  .exp-next:active {
    transform: none; /* hover/active scala solo su desktop, su mobile non serve */
  }

  /* la freccia sinistra mobile resta nascosta */
  .exp-prev {
    display: none;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .exp-prev {
    display: block;
  }
}

/* MOBILE */
@media (max-width: 991px) {
  .exp-next {
    bottom: auto;
    top: 40%;
    right: 15px;
    transform: translateY(-50%);
  }
}

/* Fade swap helper */
.exp-is-swapping .exp-bg{ opacity: 0; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991.98px){
  .exp-title{ font-size: 3rem; }

  .exp-menu{ width: 260px; }
  .exp-content{
    left: 300px;
    right: 70px;
    bottom: 44px;
  }
}

@media (max-width: 767.98px){
  .exp-section{ padding: 70px 0; }
  .exp-title{ font-size: 2.4rem; letter-spacing:.18em; }

  .exp-card{ min-height: 520px; }

  /* menu -> chips orizzontali */
  .exp-menu{
    top: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    height: auto;
    padding: 10px 10px;
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .exp-menu__list{
    display:flex;
    gap: 10px;
  }
  .exp-menu__btn{
    white-space: nowrap;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.10);
    font-size: .95rem;
  }
  .exp-menu__btn::before{ content:""; display:none; }
  .exp-menu__btn.is-active{
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.65);
  }

  .exp-content{
    left: 18px;
    right: 18px;
    bottom: 22px;
    max-width: none;
  }

 .exp-next{
    /* top: auto;
    bottom: 22px;
    left: 18px; */
    transform: none;
  }
      
   .exp-content__text {
    line-height: 1.4;
  
   }
      
      
}



/* =========================
   SECTION: PENSATA PER CHI
========================= */
.who-section{
  background: #f4f1ea;
  padding: 70px 0;
}

.who-card{
  background: rgba(0,0,0,0.03);
  border-radius: 26px;
  overflow: hidden;
}

/* immagine */
.who-image{
  height: 100%;
  min-height: 420px;
  overflow: hidden;
}

.who-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* contenuto */
.who-content{
  height: 100%;
  padding: 64px 64px 64px 56px;
}

.who-icon{
  font-size: 34px;
  line-height: 1;
  margin-bottom: 18px;
  opacity: .85;
}

.who-kicker{
  font-family: "Inter", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .9rem;
  opacity: .75;
  margin-bottom: 10px;
}

.who-title{
  font-family: "Cormorant", serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 3rem;
  margin: 0 0 18px 0;
}

.who-content p{
  margin-top: 0;
  margin-bottom: 14px;
  color: rgba(22,22,22,.75);
  line-height: 1.85;
  max-width: 520px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991.98px){
  .who-section{ padding: 70px 0; }
  .who-content{ padding: 44px; }
  .who-title{ font-size: 2.4rem; }
}

@media (max-width: 575.98px){
  .who-section{ padding: 56px 0; }
  .who-image{ min-height: 320px; }
  .who-content{ padding: 28px 22px; }
  .who-title{ font-size: 2rem; }
}








/* =========================
   SECTION: A REGOLA D’ARTE
========================= */
.value-section{
  position: relative;
  background: #f4f1ea;
  padding: 40px 0 70px;
  overflow: hidden;
}

.value-inner{
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

.value-icon{
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
  opacity: .9;
}

.value-kicker{
  font-family: "Inter", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .95rem;
  opacity: .75;
  margin-bottom: 10px;
}

.value-title{
  font-family: "Cormorant", serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 3.6rem;
  margin: 0 0 18px 0;
}

.value-text{
  font-family: "Inter", sans-serif;
  color: rgba(22,22,22,.78);
  line-height: 1.95;
  margin: 0 auto 38px;
  max-width: 880px;
}

.value-image{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

.value-image img{
  width: 100%;
  height: auto;
  display: block;
}

/* Background SVG */
.value-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.value-bg__svg{
  width: 100%;
  height: 100%;
}

.value-bg__path{
  stroke: rgba(0,0,0,.16);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
}

.value-bg__path--2{
  stroke: rgba(0,0,0,.12);
  opacity: .45;
}

/* Responsive */
@media (max-width: 991.98px){
  .value-section{ padding: 90px 0 80px; }
  .value-title{ font-size: 2.8rem; }
  .value-text{ max-width: 740px; }
}

@media (max-width: 575.98px){
  .value-section{ padding: 70px 0 64px; }
  .value-title{ font-size: 2.2rem; letter-spacing: .18em; }
  .value-text{ line-height: 1.85; }
  .value-bg{ opacity: .75; }
}

/* =========================
   SECTION: LEAD FORM
========================= */
.lead-section{
  background:#f4f1ea;
  padding: 70px 0;
}

.lead-card{
  border-radius: 26px;
  overflow: hidden;
  background: rgba(0,0,0,.03);
}

.lead-left{
  background: rgba(0,0,0,.03);
}

.lead-inner{
  padding: 54px 54px 48px;
}

/* Titoli */
.lead-kicker{
  font-family:"Inter", sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.9rem;
  opacity:.75;
  margin-bottom: 10px;
}

.lead-title{
  font-family:"Cormorant", serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size: 3.2rem;
  margin: 0 0 12px 0;
}

.lead-intro{
  margin: 0 0 26px 0;
  color: rgba(22,22,22,.72);
  max-width: 520px;
  line-height: 1.75;
}

/* Labels */
.lead-form label,
.lead-label{
  font-family:"Inter", sans-serif;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(22,22,22,.72);
  margin-bottom: 8px;
}

/* Spaziatura righe (BS5: usa .row.g-3 / .row.g-4 in HTML) */
.lead-form .row{
  margin-bottom: 14px;
}

/* Inputs - luxury */
.lead-input{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,.18);
  height: 42px;
  padding: 8px 12px;
  font-family: "Inter", sans-serif;
  font-size: .95rem;
  color: #161616;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.lead-input:focus{
  background: rgba(255,255,255,.30);
  border-color: rgba(0,0,0,.45);
  box-shadow: 0 0 0 .15rem rgba(0,0,0,.08);
}

/* invalid */
.was-validated .lead-input:invalid{
  border-color: rgba(138,31,31,.55);
}

.invalid-feedback{
  font-size: .85rem;
  color: #161616; /* come nel tuo */
}

/* =========================
   LUXURY SELECT (Bootstrap 5)
   - se usi <select class="form-select lead-input">
========================= */
.form-select.lead-input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-color: rgba(255,255,255,.18);
  border: 1px solid rgba(0,0,0,.22);
  border-radius: 12px;

  padding-right: 44px; /* spazio caret */
  height: 42px;
  line-height: 1.2;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='rgba(0,0,0,0.70)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}

.form-select.lead-input:hover{
  background-color: rgba(255,255,255,.24);
  border-color: rgba(0,0,0,.30);
}

.form-select.lead-input:focus{
  background-color: rgba(255,255,255,.30);
  border-color: rgba(0,0,0,.45);
  box-shadow: 0 0 0 .15rem rgba(0,0,0,.08);
}

/* placeholder option “Seleziona…” */
.form-select.lead-input:invalid{
  color: rgba(22,22,22,.55);
}

/* =========================
   DATE / MONTH input
========================= */
input[type="date"].lead-input,
input[type="month"].lead-input{
  padding-right: 12px;
}

/* =========================
   Pills
========================= */
.pill-group{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.pill{
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.12);
  color: rgba(22,22,22,.85);
  font-family:"Inter", sans-serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.pill:hover{ transform: translateY(-1px); }

.pill.is-active{
  background: rgba(0,0,0,.86);
  color: #fff;
  border-color: rgba(0,0,0,.86);
}

/* Submit */
.lead-submit{
  margin-top: 18px;
  border-radius: 12px;
  background:#000;
  color:#fff;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-family:"Inter", sans-serif;
  font-size: .82rem;
  padding: 12px 14px;
}

.lead-submit:hover{
  background:#111;
  color:#fff;
}

/* Alert */
.lead-alert{
  margin-top: 12px;
  font-family:"Inter", sans-serif;
  font-size: .95rem;
}

/* Right image */
.lead-right{
  min-height: 640px;
  background-image: url("https://cdn.ideeperviaggiare.it/media/site/california/form.jpg");
  background-size: cover;
  background-position: center;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991.98px){
  .lead-section{ padding: 70px 0; }
  .lead-inner{ padding: 40px; }
  .lead-title{ font-size: 2.6rem; }
  .lead-right{ min-height: 380px; }
}

@media (max-width: 575.98px){
  .lead-section{ padding: 56px 0; }
  .lead-inner{ padding: 26px 20px; }
  .lead-title{ font-size: 2.15rem; }

  .lead-form .row{
    margin-bottom: 10px;
  }
}
      
      
      
      
      
      
      
      
      

/* =========================
   SECTION OFFERS
========================= */

.offers-section{
  background:#f4f1ea;
  padding:70px 0;
}

/* titolo section */
.offers-kicker{
  font-family:"Inter", sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.85rem;
  opacity:.75;
  margin-bottom:8px;
}

.offers-title{
  font-family:"Cormorant", serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:3rem;
}

/* card */
.offer-card{
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  height:100%;
}

/* hover elegante */
.offer-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* immagine */
.offer-image{
  overflow:hidden;
}

.offer-image img{
  width:100%;
  height:260px;
  object-fit:cover;
  transition:transform .6s ease;
}

.offer-card:hover img{
  transform:scale(1.05);
}

/* body */
.offer-body{
  padding:30px 28px 34px;
}

.offer-card-title{
  font-family:"Cormorant", serif;
  font-size:1.7rem;
  margin-bottom:8px;
}

.offer-subtitle{
  font-family:"Inter", sans-serif;
  color:rgba(22,22,22,.72);
  line-height:1.6;
  margin-bottom:20px;
}

/* bottone minimal */
.offer-btn{
  display:inline-block;
  border:1px solid #000;
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  font-family:"Inter", sans-serif;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#000;
  transition:all .25s ease;
}

.offer-btn:hover{
  background:#000;
  color:#fff;
}
      
      

/* =========================
   ROADTRIP GALLERY SLIDER
========================= */

.roadtrip-gallery-section{
  background:#f4f1ea;
  padding:40px 0;
  overflow:hidden;
}

.roadtrip-gallery-head{
  max-width:760px;
  margin:0 auto 42px;
}

.roadtrip-gallery-kicker{
  font-family:"Inter", sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.85rem;
  opacity:.72;
  margin-bottom:10px;
}

.roadtrip-gallery-title{
  font-family:"Cormorant", serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:3rem;
  margin-bottom:12px;
}

.roadtrip-gallery-subtitle{
  font-family:"Inter", sans-serif;
  color:rgba(22,22,22,.72);
  line-height:1.7;
  max-width:620px;
  margin:0 auto;
}

/* viewport */
.roadtrip-slider{
  overflow:hidden;
  position:relative;
}

/* track */
.roadtrip-slider-track{
  display:flex;
  gap:18px;
  transition:transform .55s ease;
  will-change: transform;
}

/* slide */
.roadtrip-slide{
  flex:0 0 calc((100% - 36px) / 3); /* 3 immagini visibili con 2 gap */
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  background:#ddd;
}

.roadtrip-slide img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

.roadtrip-slide:hover img{
  transform:scale(1.03);
}

/* dots */
.roadtrip-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:24px;
}

.roadtrip-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:0;
  background:rgba(0,0,0,.20);
  transition:all .25s ease;
  padding:0;
}

.roadtrip-dot.is-active{
  background:#000;
  transform:scale(1.15);
}

/* tablet */
@media (max-width: 991.98px){
  .roadtrip-gallery-section{
    padding:80px 0;
  }

  .roadtrip-gallery-title{
    font-size:2.5rem;
  }

  .roadtrip-slide{
    flex:0 0 calc((100% - 18px) / 2); /* 2 visibili */
  }

  .roadtrip-slide img{
    height:320px;
  }
}

/* mobile */
@media (max-width: 575.98px){
  .roadtrip-gallery-section{
    padding:60px 0;
  }

  .roadtrip-gallery-title{
    font-size:2rem;
  }

  .roadtrip-slider-track{
    gap:14px;
  }

  .roadtrip-slide{
    flex:0 0 100%; /* 1 visibile */
  }

  .roadtrip-slide img{
    height:280px;
  }
}      
      
      
      
      
      
      
      .promo-banner{
  background:#f4f1ea;
  padding:40px 0 20px;
}

.promo-banner__inner{
  position: relative;
  border-radius: 22px;
  padding: 34px 36px 28px;
  text-align: center;
  overflow: hidden;

  background-image: url("https://image.email.ideeperviaggiare.it/lib/fe3711717564047e751d76/m/1/440897cc-7dac-466a-81d8-b811459ade84.jpg");
  background-size: cover;
  background-position: center;
}

/* overlay elegante */
.promo-banner__inner::before{
  content:"";
  position:absolute;
  inset:0;

  /* 👉 overlay fondamentale */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.65)
  );

  z-index:1;
}

/* contenuto sopra overlay */
.promo-banner__inner > *{
  position: relative;
  z-index: 2;
}

/* testo bianco */
.promo-banner__title{
  font-family: "Cormorant", serif;
  font-size: 2.3rem;
  line-height: 1.2;
  color:#fff;
  margin-bottom:24px;
}

.promo-banner__eyebrow{
  font-family:"Inter", sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:rgba(255,255,255,.7);
  margin-bottom:10px;
}

/* box info */
.promo-banner__details{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.promo-banner__item{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 12px 16px;
  backdrop-filter: blur(6px); /* ✨ effetto glass */
}

.promo-banner__item strong{
  display:block;
  font-family:"Inter", sans-serif;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}

.promo-banner__item span{
  font-family:"Inter", sans-serif;
  color:#fff;
}

.promo-banner__note{
  font-family:"Inter", sans-serif;
  font-size:.85rem;
  color:rgba(255,255,255,.7);
}