html, body {
    height: 100%; /* serve per ancorare il 100% */
    margin: 0;
    overflow: hidden; /* disabilita lo scroll del body */
}

/*PAGE*/
.page {
    height: 100vh; /* occupa tutto il viewport */
    overflow-y: auto; /* abilita lo scroll verticale */
    scroll-snap-type: y proximity; /* oppure: y mandatory */
    scroll-behavior: smooth; /* scorrimento fluido (opzionale) */
    scroll-padding-top: var(--header-height);
    overflow-x:hidden;
}
.snap-section {
    height: 100vh; /* ogni sezione una “pagina” */
    scroll-snap-align: start; /* snap all'inizio della sezione */
    /* opzionale, utile per forzare lo stop: */
    /* scroll-snap-stop: always; */
}

/*HERO========================*/
/*.page{scroll-snap-type:none !important}*/
.snap-section{height:max-content;}
.hero-container{width:1720px;margin:auto;height:600px}
body {background-color: #FBFBFB;}
#hero{background-color:#FBFBFB;height:max-content;position:relative;padding-top:var(--header-height);overflow:hidden}
.hero-row{display:flex;padding:80px 0px 0px 20px;}
.left-hero {width: 10%;position: relative;z-index: 0;}
.left-hero-header{
    margin-bottom:20px;
    display:flex;
    width:100%; 
    justify-content:space-between;
}
.left-hero-header > :nth-child(1) {
    width: 20%;
}

.left-hero-header > :nth-child(3){
    width: 40%;
}
.right-hero {
    position: relative;
    width: 75%;
    display: flex;
    padding-left:270px;
}
.hero-text {
    font-size: clamp(1rem, 2vw, 1rem);
    color: #004F70;
    width:80%;
    padding:60px 0px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.hero-text p{font-size:1.125rem;margin-bottom:35px;line-height:1.4375rem}
.hero-eyebrow {
    display: block;
    color: var(--ink);
    font-weight: 700;
    font-size: 4.25rem;
    letter-spacing: -.01em;
}
.hero-title {
    font-size: 4.25rem;
    color: var(--nav-color);
    font-weight: 400;
    line-height: 0.35;
    margin-bottom: 5px;
}
.piano-slider{width:352px;padding:5px; display:flex;border:1px solid var(--ink);position:relative;height:63px;border-radius:10px;}
.piano-shape{width:calc(100% / 2 - 5px);position:absolute;height:calc(100% - 10px);background-color:var(--rosaScuro);transform:translateX(0);transition:transform 300ms ease-in-out;border-radius:10px;}
.piano{width:calc(100% / 2);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:white;transition:color 400ms ease-in-out;cursor:pointer;}
.personalizza {width: calc(100% / 2);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#professional{border:5px solid #017FB6;position:relative;overflow:hidden;}
#popolare{position:absolute;top:-23px;right:-23px;}
.piano-slider.personalizzaAttivo .piano-shape{transform:translateX(100%);transition:transform 300ms ease-in-out;}
.piano-slider.personalizzaAttivo .piano{color:var(--ink);transition:color 400ms ease-in-out;}
.piano-slider.personalizzaAttivo .personalizza{color:white; transition:color 400ms ease-in-out;}
/*=============PIANI=================*/
#piani{padding:10px 0px 100px 0px;}
.opzione-piano-container{width:1250px;height:850px;margin:auto;display:none;}
.opzione-piano-container.show{display:flex;justify-content:space-between;}
.piano-option {
    width: calc(100% / 4 - 10px);
    height: 100%;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius:30px;
    border-bottom-right-radius:100px;
    padding:20px 15px;
    border:5px solid transparent;
}
.opzione-personalizza-container {
    width: 1066px;
    height: 249px;
    margin: auto;
    background: linear-gradient(90deg, #E2EEF3 50%, #FBFBFB 100%);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius:30px;
    display:none;
}
.opzione-personalizza-container.show {display: block}
.piano-option h3{font-size:2.625rem;margin-bottom:15px;}
.piano-description{height: 140px;display:flex;flex-direction:column;margin-bottom:20px;}
.piano-description p {font-size: 0.875rem;flex-grow:1;}
.piano-description .cta-row .btn-primary{width:100%;display:block;text-align:center;padding:5px 10px;}
.piano-specs small{margin-bottom:10px;display:inline-block;font-size:1rem;}
.specs-row{display:flex;margin-bottom:5px;}
.specs-included{width:calc(100% / 2 - 15px)}
.specs-included img{height:50%;}
.specs-description{width:calc(100% / 2 + 45px)}
.specs-included p {font-size: 0.95rem;line-height: 1.1rem;}
.specs-description p{font-size:0.95rem;}
#personalizza{padding:35px 70px;}
#personalizza h3{font-size:2.625rem;margin-bottom:-10px;}
#personalizza p{margin-bottom:45px;}
#personalizza .cta-row .btn-primary{width:202px;display:block;text-align:center;padding:5px 10px;}

/*=====MODALE========================*/
/* Overlay */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      display: none;          /* nascosto di default */
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 9999;
    }
    .modal-overlay.is-open { display: flex;overflow-y:scroll; }

    /* Box */
    .modal {
      width: min(1726px, 100%);
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      overflow-x: hidden;
      padding:0px 200px 50px 200px;
      position:relative;
    }
    .modal__header {width:100%;height:30px;display:flex;align-items:center;margin-bottom:30px;}
    .modal-progress{width:100%;display:flex;justify-content:space-between;}
    .page-progress{width:calc(100%/3 - 10px);height:6px;background-color:#D9ECF4;border-radius:4px}
    
    .first-page #first-page-progress{
        background-color:var(--ink)
    }
    .second-page #second-page-progress {
        background-color: var(--ink)
    }
    .third-page #third-page-progress {
        background-color: var(--ink)
    }

    .fourth-page #first-page-progress {
        background-color: transparent;
    }

    .fourth-page #second-page-progress {
        background-color: transparent;
    }

    .fourth-page #third-page-progress {
        background-color: transparent;
    }

    .modal__body {
        height: 550px;
        width:100%;
        position:relative;
    }
    .modal-page {
        width: 100%;
        height: 100%;
        position:absolute;
        right:0;
        left:0;
        transition:transform 500ms ease-in-out;
        display:flex;
        flex-direction:column;
    }
    .page-form-field{flex-grow:1}
    .page-nav-btn{text-align:end;margin-top: 10px;}
    
    #modal-page-1, #modal-page-2, #modal-page-3{
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateX(100%);
      transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
      z-index: 0;
    }
    .first-page  #modal-page-1{ opacity:1; transform: translateX(0%); z-index: 1000; }
    .first-page  #modal-page-2{ opacity:0; transform: translateX(150%); z-index: 0; }
    .first-page  #modal-page-3{ opacity:0; transform: translateX(150%); z-index: 0; }
    .first-page  #modal-page-4{ opacity:0; transform: translateX(150%);  z-index: 0; }

    .second-page #modal-page-1{ opacity:0; transform: translateX(-150%); z-index: 0; }
    .second-page #modal-page-2{ opacity:1; transform: translateX(0%);  z-index: 1000; }
    .second-page #modal-page-3{ opacity:0; transform: translateX(150%); z-index: 0; }
    .second-page #modal-page-4{ opacity:0; transform: translateX(150%);  z-index: 0; }


    .third-page  #modal-page-1{ opacity:0; transform: translateX(-150%); z-index: 0; }
    .third-page  #modal-page-2{ opacity:0; transform: translateX(-150%); z-index: 0; }
    .third-page  #modal-page-3{ opacity:1; transform: translateX(0%);  z-index: 1000; }
    .third-page  #modal-page-4{ opacity:0; transform: translateX(150%);  z-index: 0; }

    .fourth-page  #modal-page-1{ opacity:0; transform: translateX(-150%); z-index: 0; }
    .fourth-page  #modal-page-2{ opacity:0; transform: translateX(-150%); z-index: 0; }
    .fourth-page  #modal-page-3{ opacity:0; transform: translateX(-150%);  z-index: 0; }
    .fourth-page  #modal-page-4{ opacity:1; transform: translateX(0%);  z-index: 1000; }

    .modal__title { margin: 0; font-size: 18px;color:var(--rosaScuro)}
    .modal__close {
      border: 0;
      background: transparent;
      font-size: 22px;
      cursor: pointer;
      line-height: 1;
      padding: 6px 10px;
      border-radius: 10px;
      position:absolute;
      right:20px;
    }
    .modal__close:hover { background: #f2f2f2; }
    .modal__footer {
      padding: 16px 18px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    .page-form-field h3{
        font-size:2.425rem;
    }
    .form-group{display:flex; justify-content:space-between;}
    .form-group > div:nth-of-type(1) {width:calc(100% / 3 - 10px);}
    .form-group > div:nth-of-type(2) {width:calc(100% / 3 - 10px);}
    .form-group > div:nth-of-type(3) {width:calc(100% / 3 - 10px);}
    input[type="text"]:focus{outline:none;border:1px solid #777}
    .form-group div input[type="text"]{width:100%;height:42px;border-radius:10px;background-color:#F2F6F8;border:none;margin-bottom:10px;padding:0px 20px;color:var(--ink)}
    .form-group div input[type="text"]::placeholder{font-size:1rem;color:var(--ink);opacity:0.8}
    input[type="text"]:focus{outline:none;border:1px solid var(--ink) !important;}
    textarea {
        min-width: 100%;
        min-height: 427px;
        border: none;
        background-color: #F2F6F8;
        border-radius: 10px;
        padding: 10px 20px;
        font-family: 'Asap', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
        color: var(--ink);
    }
    textarea:focus{outline:none;border:1px solid var(--ink) !important;}
    .form-group div input[type="checkbox"]{width:21px;height:21px;}
    textarea::placeholder {font-size: 1rem;opacity: 0.8;color: var(--ink);}
    .check-group{margin-bottom:5px;display:flex;align-items:center;gap:10px;}
    .page-form-field p{margin-bottom:20px;}
    .form-group div input[type="text"].fieldDisabled {
        background-color: #536686;
        color: white;
        cursor:not-allowed;
    }
    .form-group div input[type="text"].error{border:1px solid red;}
    .configurazioniSelect {
        width: 100%;
        height: 42px;
        border-radius: 10px;
        background-color: #F2F6F8;
        border: none;
        margin-bottom: 10px;
        padding: 0px 20px;
        color: var(--ink);
    }
    .configurazioniSelect.fieldDisabled {
        background-color: #536686;
        color: white;
        pointer-events: none;
        cursor:not-allowed;
    }
    .configurazioniSelect:focus{outline:none;border:1px solid var(--ink) !important;}
    .checkbox-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      margin-right:50px;
      width:400px;
    }
    .checkbox-wrapper.error .checkbox-custom {border:1px solid red}
    .checkbox-wrapper.error .checkbox-label{color:red}
    .checkbox-input {
      display: none;
    }
    .checkbox-custom {
      width: 25px;
      height: 25px;
      border-radius: 6px;
      background-color: white;
      border: 2px solid var(--ink);
      transition: all 0.2s ease;
    }
    /* quando è checkata */
    .checkbox-input.fieldDisabled + .checkbox-custom {
        background-color: #E5EBEE;
        border-color: #AEC6D0;
    }
    .checkbox-input:checked + .checkbox-custom {
        background-color: #ff5c8a;
        border-color: #ff5c8a;
    }
    
    .checkbox-input.fieldDisabled:checked + .checkbox-custom, .checkbox-input.fieldDisabled + .checkbox-custom {
        cursor: not-allowed;
    }
    .checkbox-label {
      font-size: 18px;
      color: #004b6b;
      cursor:auto;
    }
    .form-group-checkboxes {display: flex;justify-content: flex-start;margin-bottom:10px;}
    .form-group-checkboxes-column{width:450px;}
    .form-group-column p{height:30px;width:100%;margin-bottom:10px;}

    .hidden{display:none;}
    .form-verification .checkbox-wrapper{width:100%;}
    #rc-anchor-container.error{border:1px solid red}
    .message-container{text-align:center;padding: 140px 0px 0px 0px;}
    .message-container h3{font-size:1.5rem;margin-bottom:25px}
    .message-container h4{font-size:1.5rem;margin-bottom:25px}
    .message-container p{font-size:1.5rem;margin-bottom:25px}
    .btn-primary{border:none; cursor:pointer;}
@media (max-width: 1700px) {
    .hero-container{width:95vw;height:525px;}
    /*==========HERO================*/
    .right-hero {width: 80%;padding-left:110px;}
    .hero-text{padding:40px 0px;width:75%}
    .left-hero {width: 15%;}
    .hero-eyebrow {font-size:3.5rem;}
    .hero-title {font-size: 3.5rem;margin-bottom:10px;}
    .hero-text p{font-size:1.1rem;margin-bottom:20px;line-height:1.25rem}
    .hero-row{padding:50px 0px 0px 20px;}
    /*===========MODALE=============*/
    .modal {width: 1200px;padding: 0px 140px 50px 140px;}
    .modal__header {margin-bottom: 0px;}
    .modal__body {height: 460px;}
    .page-form-field h3 {font-size: 2.025rem;}
    .form-group div input[type="text"] {height: 35px;}
    .configurazioniSelect {height: 35px;}
    .checkbox-label {font-size: 16px;}
    .form-group-checkboxes-column {width: 370px;}
    .message-container {padding: 80px 0px 0px 0px;}

}

@media (max-width: 1400px) {
    /*==========HERO================*/
    .hero-text{padding:40px 0px;}
    .hero-eyebrow {font-size:2.85rem;}
    .hero-title {font-size: 2.85rem;margin-bottom:10px;}
    .hero-text p{font-size:1rem;margin-bottom:20px;line-height:1.25rem}
    .hero-row{padding:50px 0px 0px 20px;}
    .right-hero{padding-right:0px;width:100%;padding-left:205px;}
    .btn-primary{font-size:1rem}
    .btn-secondary{font-size:1rem}
    .left-hero{display:none;}
    .faq-category h3 {font-size: 2.025rem;line-height: 2.5rem;}
    
    /*==========PIANI===============*/
    .opzione-piano-container {width: 1020px;}
    .piano-option h3 {font-size: 1.9rem;margin-bottom: 0px;}
    .piano-description p {font-size: 0.875rem;line-height: 1.2rem;}
    .piano-description {height: 130px;margin-bottom: 15px;}
    .specs-included p {font-size: 0.85rem;}
    .specs-included {width: calc(100% / 2 - 0px);}
    .specs-description {width: calc(100% / 2 + 0px);}
    .specs-description p {font-size: 0.85rem;}
    .piano-option {border-bottom-right-radius: 70px;}
    .specs-included img {height: 13px;}

    /*========MODAL================*/
    .modal {padding: 0px 100px 40px 100px;}
    .checkbox-label {font-size: 15px;}
    

}

@media(max-width:1300px){
    
}

@media(max-width:1100px) {
    /*============HERO==================*/
    .hero-text {width: 80%;}
    .right-hero {padding-left: 140px;}
    /*==========PIANO===================*/
    .piano-option {width: calc(100% / 2 - 10px);height:750px;margin-bottom:30px;}
    .opzione-piano-container {width: 650px;flex-wrap: wrap;height:max-content;}
    .opzione-personalizza-container {width: 780px;}

    /*=======MODALE====================*/
    .modal {padding: 0px 60px 40px 60px;}
    .configurazioniSelect {font-size: 12px;}
    .form-group div input[type="text"] {font-size: 12px;}
    .configurazioniSelect {padding: 0px 10px;}
    .form-group div input[type="text"] {padding: 0px 10px;}
    .form-group-checkboxes-column {width: 280px;}
    .checkbox-label {font-size: 12px;}
    .message-container h4 {font-size: 1.2rem;margin-bottom: 10px;}
    .message-container h5 {font-size: 1.2rem;margin-bottom: 10px;}
    .message-container p {font-size: 1.2rem;margin-bottom: 10px;}
    .modal-overlay {align-items: normal;}
    .modal {height: max-content;}
}

@media(max-width:870px){
    /*=======HERO====================*/
    .hero-row {padding: 50px 0px 0px 0px;}
    .hero-text {width: 100%;}
    .right-hero {padding-left: 0px;}
    /*======PIANI====================*/
    .opzione-piano-container {width: 525px;}
    .piano-description {height: 110px;margin-bottom: 15px;}
    .opzione-personalizza-container {width: 515px;}
    #personalizza {padding: 35px 30px;}
    #personalizza h3 {font-size: 2.425rem;}
    
    /*========MODALE=================*/
    .form-group {display: block;}
    .form-group > div:nth-of-type(1) {width: 100%;}
    .form-group > div:nth-of-type(2) {width: 100%;}
    .form-group > div:nth-of-type(3) {width: 100%;}
    .modal {padding: 0px 40px 40px 40px;}
    .modal__close {right: 5px;}
    .form-group-checkboxes {display: block;margin-bottom: 10px;}
    .checkbox-label {font-size: 14px;width: 440px;}
    .form-group-checkboxes {margin-bottom: 5px;}
    .modal__body {height: 780px;}
    .form-group-column p {display: none;}
    .checkbox-wrapper {width: 520px;}

}

@media(max-width:576px){
    .hero-title {font-size: 1.8rem;margin-bottom: 0px;}
    .hero-eyebrow {font-size: 1.9rem;}
    .hero-text p {width: 75%;font-size: 1.125rem;margin-bottom: 20px;line-height: 1.5rem;}
    /*============PIANI==============*/
    .opzione-piano-container {
        width: 100vw;
        flex-wrap: wrap;

    }
    .opzione-piano-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, mobile */
    }
    .piano-option{width:300px;flex-shrink:0;margin:auto;height: max-content;margin-bottom:30px;}
    .opzione-personalizza-container {width: 90vw;}
    #personalizza h3 {font-size: 1.593rem;margin-bottom: 0px;line-height:1.7rem;}

    /*===MODALE=====================*/
    .modal__body {height: 890px;}
    .modal {padding: 20px 10px 40px 10px;}
    .page-form-field h3 {font-size: 1.5rem;}
    .page-form-field p {margin-top: 35px;margin-bottom: 20px;font-size: 1.125rem;line-height: 1.5rem;}
    .modal__close {right: 5px;top: 0;}
    .checkbox-label {font-size: 14px;width: 240px;}
}



/*PREZIARIO*/
:root{
      --bg: #ffffff;
      --muted: #6f8597;
      --line: #e8eef5;
      --line-2: #dfe9f3;
      --head: #f4f9ff;
      --accent: #2aa6d6;
      --check: #27c28b;
      --radius: 14px;
      --shadow: 0 10px 25px rgba(20, 60, 100, .08);
    }
    #prezziario{margin-bottom:200px;padding: 15px;}
    .wrap{
      max-width: 980px;
      margin: 0 auto;
    }

    .wrap h2{
      margin: 0 0 40px 0;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: .2px;
    }

    .card{
      background: var(--bg);
      border: 1px solid var(--line-2);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .table-scroll{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table{
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      min-width: 860px; /* evita che su mobile si schiacci troppo */
    }

    colgroup col:first-child{ width: 12%; }
    colgroup col:not(:first-child){ width: 16%; }

    thead th{
      background: var(--head);
      text-align: center;
      padding: 5px 10px;
      border-bottom: 1px solid var(--line-2);
      font-size: 1.5rem;
      white-space: nowrap;
    }

    thead th:first-child{
      text-align: left;
      color: transparent; /* cella vuota come nello screenshot */
      user-select: none;
    }

    tbody td, tbody th{
      border-bottom: 1px solid var(--line);
      padding: 10px 12px;
      font-size: 13px;
      vertical-align: middle;
      
    }
    .iconaSpuntaVerde{height:100%;}
    tbody th{
      text-align: left;
      color: #2a3b4b;
      background: #fff;
      font-weight:400;
    }
    .bold{font-weight:700}

    tbody tr:last-child td, tbody tr:last-child th{
      border-bottom: 0;
    }

    td{
      text-align: center;
    }

    .sub{
      display: block;
      font-weight: 600;
      color: var(--muted);
      font-size: 12px;
      margin-top: 3px;
    }

    .dash{
      color: #a9b7c6;
      font-weight: 700;
    }

    .pill{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      font-size: 1rem;
      line-height: 1;
      min-width: 72px;
      white-space: nowrap;
    }

    .check{
      width: 16px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      color: var(--check);
      font-weight: 900;
      margin: 0 auto;
      line-height: 1;
    }

    tbody tr:hover td{
      background: #fbfdff;
    }
    tbody tr:hover th{
      background: #fbfdff;
    }

    /* Prima colonna fissa (sticky) per vedere sempre la categoria durante lo scroll orizzontale */
    thead th:first-child,
    tbody th{
      position: sticky;
      left: 0;
      z-index: 3;
      background: #fff;
    }

    /* La cella vuota in header deve rimanere sopra alle altre */
    thead th:first-child{
      background: var(--head);
      z-index: 5;
    }

    /* Bordo separatore della colonna fissa */
    thead th:first-child,
    tbody th{
      box-shadow: 1px 0 0 var(--line-2);
    }

    @media (max-width: 1100px) {
        .wrap {max-width: 870px;}
        
    }

    @media (max-width: 870px){
      .wrap {max-width: 600px;}
      .wrap h2{ font-size: 18px; }
    }
    @media (max-width: 576px){
      .wrap {max-width: 400px;}
      .wrap h2{ font-size: 18px; }
      
    }