input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*COLORI:
blu: #005ba4
arancione: #f49300
grigio: #f8f9fa
azzurro: #0092d9
verde: #18c316

FONT:
-titoli: Poppins 
-Roboto*/
* {
    transition: 0.5s;
}

input,
select {
    cursor: pointer;
}

html,
body {

    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    flex-direction: column;

    font-size: 20px;
    font-family: "Roboto", arial;

}

.fascia_blu {
    background: #005ba4;
    color: white;
    text-align: center;
    padding: 0.2%;
    font-size: 16px;
}

.header {}

.titolo {
    font-family: 'Poppins';
    background-color: white;
    width: fit-content;
    padding-inline: 1%;
    font-size: 3vw;
    /* text-transform: uppercase; */
    font-weight: 900;
    color: #0092d9;
    margin: auto;
    display: block;
    line-height: 110%;
}

.offerta {
    width: 16%;
    margin-left: 15%;
    margin-top: 1%;
    vertical-align: top;
    display: inline-block;
}

.header img {
    width: 15%;
    margin: 0.2% auto;
    display: block;
}


.fascia1 {
    height: 600px;
    background: url('apertura.jpg');
    background-size: cover;
    padding-top: 1%;
}

.vantaggi {
    list-style: none;
    margin: 0;
    padding: 20px;
    width: 100%;
    display: block;
    font-family: Arial, sans-serif;
}

.vantaggi li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 18px;
}

/* cerchio base */
.vantaggi li::before {
    content: '';
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 49px 60px;
    /* dimensione icona */
}

/* check blu */
.vantaggi li.ok::before {
    background-color: #19b5fe;
    background-image: url('check.png');
}

/* x rossa */
.vantaggi li.no::before {
    background-color: #e53935;
    background-image: url('icona-x.png');
}




/* BOX FORM (uguale immagine) */
.form {
    /* tu hai <div class="form"></div> dentro fascia1 */
    display: inline-block;
    justify-content: flex-end;
    padding-right: 4%;
    vertical-align: top;
    margin-left: 38%;
    margin-top: -3.3%;
}

.form-box {
    width: 20vw;
    min-width: 350px;
    background: #d9dde1;
    padding: 18px 18px 14px;
    box-sizing: border-box;
    font-family: "Roboto", Arial, sans-serif;
}

.form-title {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 800;
    font-size: 1.2vw;
    line-height: 1.1;
    text-align: center;
    color: #1c1c1c;
    margin-bottom: 8px;
}

.form-title .hl {
    background: #0092d9;
    color: #fff;
    padding: 0 8px 2px;
    border-radius: 2px;
    display: inline-block;
}

.form-step {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #2c2c2c;
    margin: 6px 0 10px;
}

/* campi */
.f-input {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e6e6e6;
    padding: 0 14px;
    margin: 0 0 2%;
    font-size: 1vw;
    color: #666;
    outline: none;
}

.f-input::placeholder {
    color: #8a8a8a;
}

select.f-input {
    color: #4c4c4c;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #7a7a7a 50%),
        linear-gradient(135deg, #7a7a7a 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 13px) 19px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* consenso */
.f-consenso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 2px 0 0;
    color: #000;
    font-size: 0.6vw;
    line-height: 1.25;
}

.f-consenso input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #0092d9;
}

.f-consenso a {
    color: #0a66cc;
    text-decoration: underline;
}

/* bottone */
.f-btn {
    width: 100%;
    height: 50px;
    background: #f49300;
    border: 0;
    color: #fff;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 800;
    font-size: 1.2vw;
    letter-spacing: .3px;
    cursor: pointer;
    width: 48.3%;
    font-size: 14px;
}

/* nota sotto */
.f-note {
    text-align: center;
    margin-top: 12px;
    font-size: 0.6vw;
    line-height: 1.25;
    color: #000;
}

.f-note a {
    color: #0a66cc;
    text-decoration: underline;
}



.footer {
    font-size: 0.7vw;
    padding: 1%;
}

.cards3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 22px 30px;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* CARD */
.card3 {
    border: 1px solid #0092d9;
    border-radius: 12px;
    background: #fff;
    padding: 22px 22px 18px;
    box-sizing: border-box;
}

/* IMMAGINE IN ALTO */
.card3__img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin-bottom: 18px;
}

/* TITOLO */
.card3__title {
    margin: 0 0 10px;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #000;
}

/* TESTO */
.card3__text {
    margin: 0 0 10px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    color: #000;
}

/* LISTA */
.card3__list {
    margin: 0;
    padding-left: 20px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    color: #000;
}

.card3__list li {
    margin: 6px 0;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    .cards3 {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
    }

    .card3__img {
        height: 180px;
    }
}

.fascia3,
.fascia2 {
    font-weight: 300;
}

.sp-hero2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 46px;
    max-width: 1050px;
    margin: 0 auto;
    padding: 28px 30px;
    box-sizing: border-box;
}

.sp-hero2__left {
    flex: 1 1 58%;
}

.sp-hero2__right {
    flex: 0 0 420px;
    display: flex;
    justify-content: flex-end;
}

.sp-hero2__img {
    width: 95%;
}

/* titolo */
.sp-hero2__title {
    margin: 1% auto;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 1.3vw;
    font-weight: 800;
    line-height: 1.15;
    color: #0092d9;
    display: block;
    text-align: center;
}

.sp-hero2__title span {
    color: #000;
    font-weight: 800;
}

/* paragrafi */
.sp-hero2__p {
    margin: 0 0 14px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #000;
}

.sp-hero2__p--strong {
    font-weight: 700;
}

.sp-hero2__p--strong .normal {
    font-weight: 400;
}

/* bottone */
.sp-hero2__btn {
    display: inline-block;
    margin-top: 12px;
    background: #f49300;
    color: #fff;
    text-decoration: none;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 800;
    font-size: 1.2vw;
    padding: 14px 44px;


}

.reviews-section {
    padding: 30px 18px 40px;
    font-family: Roboto, Arial, sans-serif;
}

.reviews-box {
    max-width: 1094px;
    margin: 0 auto 28px;
    border: 2px solid #1d65c7;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    padding: 22px;
    background: white;
}

/* BRAND SX */
.reviews-brand {
    display: flex;
    align-items: flex-start;
}

.reviews-brand-img {
    width: 220px;
    height: auto;
    max-width: max-content;
}

/* SLIDER DX */
.reviews-slider {
    position: relative;
    width: 33%;
}

.reviews-window {
    overflow: hidden;
}

.reviews-track {
    display: flex;
    transition: transform .35s ease;
}

.reviews-page {
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

/* RECENSIONE */
.review-stars {
    color: #f5a000;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.review-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.review-name {
    font-size: 22px;
    font-weight: 800;
}

.review-verified {
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 6px;
}

.review-verified i {
    width: 16px;
    height: 16px;
    background: #ccc;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
}

.review-google {
    width: 18px;
}

.review-text {
    font-size: 14px;
    line-height: 1.35;
}

/* FRECCE */
.reviews-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 22px;
    color: #666;
    cursor: pointer;
}

.reviews-prev {
    left: -2vw;
}

.reviews-next {
    right: -2vw;
}

/* CTA */
.reviews-cta {
    display: block;
    max-width: 650px;
    margin: 0 auto;
    background: #18c316;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: Poppins, Arial, sans-serif;
    font-size: 26px;
    font-weight: 900;
    padding: 18px;
    border-radius: 10px;
}

.fascia4 {
    background-color: #f8f9fa;
}

/* MOBILE */
@media (max-width: 1300px) {
    .offerta {
        width: 27%;
        margin-left: 4%;
        margin-top: 1%;
        vertical-align: top;
        display: inline-block;
        font-size: 20px;
    }

    .form {
        display: inline-block;
        justify-content: flex-end;
        padding-right: 0%;
        vertical-align: top;
        margin-left: 43%;
        margin-top: -3.3%;
    }

    .form-box {
        width: 20vw;
        min-width: 250px;
        background: #d9dde1;
        font-size: 20px;
        padding: 18px 18px 14px;
        box-sizing: border-box;
        font-family: "Roboto", Arial, sans-serif;
    }

    .fascia1 {
        background-position: -150px 0px;
    }
}



/* responsive */
@media (max-width: 1000px) {
    .offerta {
        width: 24%;
        margin-left: 9%;
        margin-top: 1%;
        vertical-align: top;
        display: inline-block;
        font-size: 20px;
        margin-right: -1%;
    }

    .reviews-box {
        grid-template-columns: 1fr;
    }

    .reviews-brand {
        justify-content: center;
    }

    .reviews-page {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sp-hero2 {
        flex-direction: column;
        gap: 18px;
        padding: 22px 18px;
    }

    .sp-hero2__right {
        flex: 1 1 auto;
        justify-content: center;
        width: 29%;
        margin: 0 auto;
        display: none;
        display: block;
    }

    .sp-hero2__img {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
        display: none;
    }

    .sp-hero2__title {
        font-size: 28px;
        margin-top: 3%;
    }
}

/* =========================
   MOBILE <= 1000px
   Tutto centrato + slider ok
========================= */
@media (max-width: 1000px) {

    /* pagina base */
    .pagina {
        width: 100%;
    }

    .header img {
        width: 180px;
        max-width: 70%;
    }

    .titolo {
        font-size: 29px;
        /* più leggibile su mobile */
        text-align: center;
        margin: 10px auto 0;
        display: none;
    }

    /* HERO (fascia1) */
    .fascia1 {
        height: auto;
        /* niente altezza fissa */
        padding: 18px 0 24px;
        background-position: center;
        /* evita crop brutti */
    }

    /* vantaggi + form in colonna e centrati */
    .offerta,
    .form {
        width: 91%;
        display: block;
        margin: 0 auto;
        padding: 0;
        vertical-align: top;
        text-align: left;
    }

    .offerta {
        max-width: 520px;
        padding: 12px 16px 6px;
    }

    .vantaggi {
        padding: 0;
        margin: 0 auto;
        width: 100%;
        display: none;
    }

    .vantaggi li {
        justify-content: left;
        /* icona + testo centrati */
        text-align: left;
        /* testo leggibile */
        margin: 0 auto 14px;
        max-width: 520px;
    }

    .form {
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }

    .form-box {
        width: 100%;
        max-width: 520px;
        min-width: 0;
        /* importantissimo su mobile */
        margin: 0 16px;
        margin-top: 69vw;
    }

    /* tipografia form */
    .form-title {
        font-size: 18px;
    }

    .f-input {
        font-size: 16px;
    }

    .f-btn {
        font-size: 14px;
        margin-top: 10px;
        vertical-align: middle;
    }

    .f-consenso,
    .f-note {
        font-size: 12px;
    }

    /* fascia2/3 già ok: centro e respiro */
    .sp-hero2 {
        padding: 22px 16px;
        text-align: center;
    }

    .sp-hero2__left {
        width: 100%;
    }

    .sp-hero2__p {
        text-align: left;
    }

    /* =========================
     SLIDER RECENSIONI (OCCHIO)
  ========================= */
    .reviews-box {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .reviews-brand {
        justify-content: center;
    }

    .reviews-slider {
        width: 100% !important;
        /* prima era 33% */
        position: relative;
    }

    .reviews-window {
        overflow: hidden;
    }

    .reviews-page {
        grid-template-columns: 1fr;
        /* 2 immagini -> in colonna */
        gap: 12px;
    }

    /* frecce: sempre visibili, niente tagli ai lati */
    .reviews-nav {
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
    }

    .reviews-prev {
        left: 6px;
    }

    .reviews-next {
        right: 6px;
    }

    /* CTA */
    .reviews-cta {
        width: calc(100% - 32px);
        max-width: 520px;
        margin: 0 auto;
        font-size: 20px;
        padding: 14px;
    }

    /* footer */
    .footer {
        font-size: 12px;
        padding: 16px;
    }
}

/* =========================
   RECENSIONI - BASE
========================= */
.reviews-section {
    padding: 30px 18px 40px;
    font-family: Roboto, Arial, sans-serif;
}

.reviews-box {
    max-width: 1094px;
    margin: 0 auto 28px;
    border: 2px solid #1d65c7;
    border-radius: 12px;
    background: #fff;

    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    padding: 22px;
    box-sizing: border-box;
}

/* brand sx */
.reviews-brand {
    display: flex;
    align-items: flex-start;
}

.reviews-brand-img {
    width: 220px;
    height: auto;
    max-width: 100%;
}

/* CTA */
.reviews-cta {
    display: block;
    max-width: 650px;
    margin: 0 auto;
    background: #18c316;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: Poppins, Arial, sans-serif;
    font-size: 26px;
    font-weight: 900;
    padding: 18px;
    border-radius: 10px;
}

.fascia4 {
    background-color: #f8f9fa;
}

/* =========================
   SLIDER - BASE (valido per entrambi)
========================= */
.reviews-slider {
    position: relative;
    width: 100%;
}

.reviews-window {
    overflow: hidden;
    width: 100%;
}

.reviews-track {
    display: flex;
    gap: 0;
    transition: transform .35s ease;
    will-change: transform;
}

.reviews-page {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.reviews-page img {
    width: 100%;
    height: auto;
    display: block;
}

/* frecce */
.reviews-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 22px;
    color: #666;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-prev {
    left: -2%;
}

.reviews-next {
    right: -2%;
}

/* =========================
   DESKTOP: slider "2 recensioni" (quello attuale)
   -> Dentro .reviews-page ci sono 2 immagini
========================= */
.reviews-slider-desktop .reviews-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

/* MOBILE slider (1 recensione): ogni pagina ha 1 immagine */
.reviews-slider-mobile .reviews-page {
    display: block;
}

/* di default: mostra DESKTOP, nascondi MOBILE */
.reviews-slider-desktop {
    display: block;
}

.reviews-slider-mobile {
    display: none;
}

/* =========================
   <= 1000px
========================= */
@media (max-width: 1000px) {

    .reviews-box {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .reviews-brand {
        justify-content: center;
    }

    /* slider centrato e con spazio frecce interno */
    .reviews-slider {
        max-width: 520px;
        margin: 0 auto;
        padding: 0 46px;
        /* spazio per frecce */
        box-sizing: border-box;
    }

    /* in questa fascia, le 2 immagini è meglio metterle in colonna */
    .reviews-slider-desktop .reviews-page {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .reviews-cta {
        width: calc(100% - 32px);
        max-width: 520px;
        font-size: 20px;
        padding: 14px;
    }
}

/* =========================
   <= 600px  (qui fai lo switch: 2 sparisce, 1 compare)
========================= */
@media (max-width: 600px) {

    /* switch layout: nascondi desktop, mostra mobile */
    .reviews-slider-desktop {
        display: none;
    }

    .reviews-slider-mobile {
        display: block;
    }

    .reviews-section {
        padding: 18px 12px 26px;
    }

    .reviews-box {
        padding: 12px;
        gap: 12px;
    }

    .reviews-brand-img {
        width: max-content;
        max-width: max-content;
    }

    .reviews-slider {
        max-width: none;
        padding: 0 34px;
        /* meno spazio laterale */
    }

    .reviews-nav {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    .reviews-prev {
        left: 6px;
    }

    .reviews-next {
        right: 12px;
    }

    .reviews-cta {
        width: 87%;
        max-width: none;
        font-size: 16px;
        padding: 12px;
    }

    .sp-hero2__btn {

        font-size: 17px;

    }

    .vantaggi li {
        display: inline-flex;
        align-items: l;
        gap: 14px;
        color: #fff;
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 18px;
    }
}

.f-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.f-birth {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* sotto 600 tutto in colonna */
@media (max-width:600px) {
    .f-grid-2 {
        grid-template-columns: 1fr;
    }

    .f-birth {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* STEP2: griglia identica */
.f-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* data nascita: 3 select piccole */
.f-birth {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* bottone "INDIETRO" uguale arancione ma puoi differenziarlo se vuoi */
.f-btn-secondary {
    margin-top: 6px;
}

#form_step_1 .f-btn {
    Width: 100%;
}

/* su mobile: tutto in colonna come nel mock */
@media (max-width:600px) {
    .f-grid-2 {
        grid-template-columns: 1fr;
    }

    .f-birth {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .fascia1 {
        height: auto;
        background: url(mob-ape-2.jpg) no-repeat;
        background-size: contain;
        background-color: black;
    }
}



.f-birth {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}