﻿/* ========================= Sezione 1 ============================= */

/* ===== CTA testuale larga ===== */
.vr-cta-wide{
  background:#fff;
  padding: clamp(36px, 8vw, 88px) 16px;
  text-align:center;
}
.vr-cta-wide__inner{
  max-width: 1180px;
  margin-inline:auto;
}
.vr-cta-wide__title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.45;
  color:#000;
  margin: 0 0 clamp(16px, 3vw, 28px);
  font-size: 36px;
}
.vr-cta-wide__lead{
  font-size: clamp(16px, 1.6vw, 22px);
  color:#111;
  margin: 0 0 clamp(22px, 3.4vw, 36px);
}
.vr-cta-wide__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 52px;
  padding: 0 26px;
  border: 1px solid #000;
  border-radius: 9999px;
  background:#f59e0b;              /* giallo bottone */
  color:#111;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  transition: .2s ease;
}
.vr-cta-wide__btn:hover{
  background:#eab307;              /* hover leggermente più scuro */
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
  color: #fff;
}

  
  

  /* ========================= Sezione 2 ============================= */

  /* ===== Base tipografica specifica per la sezione ===== */
.deal-stop { 
  background:#f5eecb;                 /* beige della sezione */
  padding: clamp(40px, 7vw, 88px) 16px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color:#111;
}
.deal-stop__inner{
  max-width: 1180px;
  margin-inline: auto;
}

/* Titolo in Montserrat */
.deal-stop__title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.45;
  font-size: clamp(28px, 4.2vw, 48px);
  text-align: center;
  margin: 0 0 clamp(24px, 4vw, 36px);
  color:#000;
  font-size: 36px;
}

/* Griglia 2 colonne */
.deal-stop__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;   /* testo + immagine */
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

/* Testo */
.deal-stop__intro{
  margin: 0 0 14px;
  font-size: clamp(16px, 1.5vw, 18px);
}

/* Lista con X rosse */
.deal-stop__list{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 14px;
  font-size: clamp(16px, 1.55vw, 18px);
}
.deal-stop__list--bad li{
  padding-left: 28px;
  background: url('/brands/shared/img/x-icon.png')
              no-repeat left center;
  background-size: 16px 16px;          /* <- come richiesto */
}

/* Claim finali */
.deal-stop__claim{
  margin: 10px 0 0;
  font-size: clamp(18px, 1.7vw, 22px);
  color: #000;
}

/* Immagine a destra */
.deal-stop__figure{
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  background: url('/brands/shared/img/buyer-confuso.jpg')
              center/cover no-repeat;
  aspect-ratio: 16 / 10;               /* proporzione simile allo screenshot */
}

/* Responsive */
@media (max-width: 899px){
  .deal-stop__grid{ grid-template-columns: 1fr; }
  .deal-stop__title{ text-align:left; }
}

  



/* ========================= Sezione 3 ============================= */

/* ===== Soluzione – layout generale ===== */
.soluz{ padding: 88px 0; }
.soluz *{ box-sizing: border-box; }
.soluz__container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; /* testo */
}

/* Titolo */
.soluz__title{
  font-family: "Montserrat", sans-serif;     /* titolo */
  font-weight: 800;
  font-size: 36px;
  line-height: 1.2;
  margin: 0 0 18px;
  text-align: center;
}

/* Griglia 2 colonne */
.soluz__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items: center;
}

/* Immagine sinistra (background cover) */
.soluz__media{
  margin: 0;
  width: 100%;
  aspect-ratio: 4/3;                          /* puoi variare se serve */
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
  background:
    url('/brands/shared/img/vr-people.jpg')
    center/cover no-repeat;
}

/* Copia a destra */
.soluz__copy p{ margin: 0 0 12px; }

/* Lista con “V” verdi */
.soluz__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.soluz__list li{
  padding-left: 28px;
  background:
    url('/brands/shared/img/v-icon.png')
    no-repeat left center;
  background-size: 16px 16px;
  line-height: 1.45;
}

/* Blocchi finali centrati */
.soluz__bottom{
  text-align: center;
  margin-top: 28px;
}
.soluz__lead{
  margin: 0 0 6px;
  font-weight: 600;
}
.soluz__lead2{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
}
.soluz__claim{
  margin: 0;
  font-weight: 800;
  letter-spacing: .02em;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  color: #000;
}

/* Responsive */
@media (max-width: 899px){
  .soluz__grid{ grid-template-columns: 1fr; }
  .soluz__media{ order: -1; } /* immagine sopra il testo su mobile */
}




/* ========================= Sezione 4 ============================= */

  /* ===== Sezione risparmi tempo/stress/soldi ===== */
.vr-savings{
    background:#fff6cc;
    padding: clamp(28px, 6vw, 64px) 16px 64px;
    color:#111;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  .vrsav__container{
    max-width: 1120px;
    margin: 0 auto;
    text-align: center;
  }
  
  .vrsav__title{
    margin: 0 0 clamp(18px, 3vw, 26px);
    font-weight: 800;
    font-size: clamp(22px, 2.8vw, 30px);
    line-height: 1.25;
  }
  
  /* Cards */
  .vrsav__cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 3vw, 28px);
    margin: 0 0 18px;
  }
  
  .vrsav__card{
    text-align: left;
    background: rgba(255,255,255,.75);         /* opacity .75 SOLO sullo sfondo */
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,.15);
    padding: clamp(16px, 2.6vw, 22px);
  }
  
  .vrsav__cardtitle{
    margin: 0 0 10px;
    font-weight: 800;
    font-size: clamp(16px, 2vw, 18px);
  }
  
  /* Liste con icone */
  .vrsav__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.55;
  }
  
  .vrsav__list li{
    padding-left: 26px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
  }
  
  .vrsav__list--bad li{
    background-image: url('/brands/shared/img/x-icon.png');
  }
  
  .vrsav__list--good li{
    background-image: url('/brands/shared/img/v-icon.png');
  }
  
  /* Claim e bottone */
  .vrsav__claim{
    margin: 32px 0;
    font-size: clamp(20px, 1.8vw, 28px);
  }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none;
  }
  
  .btn.btn-primary.vrsav__btn{
    background:#f59e0b;
    color:#000;
    padding: 14px 26px;
    border-radius: 9999px;
    font-weight: 800;
    letter-spacing:.02em;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  }
  .btn.btn-primary.vrsav__btn:hover{
    background:#d97706;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0,0,0,.18);
    color: #fff;
  }
  
  /* Responsive */
  @media (max-width: 899px){
    .vrsav__cards{ grid-template-columns: 1fr; }
  }



/* ========================= Sezione 5 ============================= */

/* ===== Sezione “Cosa succede dopo la tua richiesta” ===== */
.vr-steps{
    background:#fff;
    padding: clamp(28px, 6vw, 72px) 16px;
    color:#111;
    font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  .vrsteps__container{ max-width: 1200px; margin: 0 auto; }
  
  .vrsteps__title{
    margin: 0 0 clamp(18px,3vw,28px);
    text-align:center;
    font-weight: 800;
    font-size: clamp(24px, 3.2vw, 40px);
    line-height: 1.2;
  }
  
  /* layout */
  .vrsteps__grid{
    display:grid;
    grid-template-columns: 1.15fr 1fr;       /* lista / immagine */
    gap: clamp(20px, 4vw, 48px);
    align-items:center;
  }
  
  /* lista numerata */
  .vrsteps__list{
    margin: 0;
    padding-left: 1.2em;                     /* spazio per numeri */
    list-style: decimal;
    font-size: clamp(16px, 1.9vw, 20px);
    line-height: 1.65;
  }
  .vrsteps__list li{ margin: 12px 0; }
  .vrsteps__list li::marker{ font-weight: 800; }
  
  /* immagine */
  .vrsteps__figure{ margin: 0; }
  .vrsteps__figure img{
    display:block;
    width:100%;
    height:auto;
    border-radius:10px;
    box-shadow: 0 10px 26px rgba(0,0,0,.15);
  }
  
  /* responsive */
  @media (max-width: 899px){
    .vrsteps__grid{ grid-template-columns: 1fr; }
    .vrsteps__figure{ order: 2; }            /* immagine sotto la lista su tablet/mobile */
  }
  