/* Desktop large: allinea e alza solo il bottone sinistro "Richiedi assistenza" */
    @media screen and (min-width: 1367px) {
        body.servizi-page .hero-cta {
            margin-top: -55px !important;
        }
    }
    body.home-page .hero-section .hero-tagline,
    body.servizi-page .hero-section .hero-tagline {
        margin-top: -30px !important;
    }
@media screen and (min-width: 1367px) {
    /* Rimossa regola margin-top: 30px su body.servizi-page per allineare menu con altre pagine */
    body.servizi-page .hero-section .h1-hero {
        margin-top: 0 !important;
    }
    body.servizi-page .hero-section .hero-tagline {
        margin-top: -30px !important;
    }
    body.servizi-page .hero-cta-mobile {
        margin-top: -80px !important;
    }
    body.servizi-page .hero-cta-text-only {
        margin-top: -55px !important;
    }
    }
    }
}
@media (max-width: 820px) {
    body.servizi-page .hero-section {
        display: flex !important;
        flex-direction: column !important;
    }
        body.servizi-page .hero-section {
            display: flex !important;
            flex-direction: column !important;
        }
        body.servizi-page .hero-section .h1-hero,
        body.servizi-page h1.h1-hero {
            order: 1 !important;
            margin-top: -250px !important;
        }
        body.servizi-page .hero-section .hero-tagline {
            order: 2 !important;
            margin-top: 90px !important;
        }
        order: 2 !important;
    }
}
@media (max-width: 820px) {
    body.servizi-page .hero-section .h1-hero,
    body.servizi-page h1.h1-hero {
        margin-top: -250px !important;
    }
    body.servizi-page .main-container .hero-cta-mobile {
        margin-top: 0 !important;
    }
}
    }
}
/* Override solo per la pagina servizi */

/* Su MOBILE: H1 mantiene ordine naturale (prima) - NESSUN riposizionamento */
@media (max-width: 820px) {
    body.servizi-page .hero-section {
        display: block !important;
    }
    
    body.servizi-page .hero-section .h1-hero,
    body.servizi-page h1.h1-hero {
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin-top: -10px !important; /* Alzato di 10px - override mobile.css */
    }
    
    body.servizi-page .hero-tagline {
        position: static !important;
        top: auto !important;
        left: auto !important;
    }

    body.servizi-page .hero-section .hero-cta-mobile,
    body.servizi-page .main-container .hero-cta-mobile,
    body.servizi-page .hero-cta-mobile {
        margin-top: -50px !important;
    }
    }
}

/* Su DESKTOP: inverte ordine visivo (tagline sopra H1) */
@media (min-width: 821px) {
    body.servizi-page .hero-section {
        display: flex;
        flex-direction: column;
    }
    
    body.servizi-page .hero-tagline {
        order: 1 !important; /* Tagline prima su desktop */
    }
    
    body.servizi-page .h1-hero {
        order: 2 !important; /* H1 dopo su desktop */
    }
}

/* Fallback H1 abbassato su servizi (desktop default senza breakpoint) */
html body.servizi-page .h1-hero {
    top: calc(clamp(200px, 17.36vw, 300px) + 80px) !important;
    position: absolute !important;
}

/* ========== DESKTOP ONLY (min-width: 821px) ========== */
@media (min-width: 821px) {
    /* Ripristino titolo sezione 1 (rimuovo forzature dimensioni/margini) */
    .h2-sezione-1 {
        margin-top: -15px !important;
        font-size: clamp(32px, 3.5vw, 60px) !important; /* Ridotto: era 40-80px, ora 32-60px */
        line-height: 1.125 !important;
        width: clamp(700px, 60%, 1000px) !important; /* container più stretto su desktop */
        text-align: left !important;
        white-space: normal !important;
        position: relative !important;
        left: 100px !important;
    }
}

/* Alza H1 servizi per desktop piccoli avvicinandolo al menu */
@media (max-width: 1400px) and (min-width: 821px) {
    html body.servizi-page .h1-hero { top: calc(clamp(120px, 10vw, 180px) + 130px) !important; position: absolute !important; }
    body.servizi-page .hero-tagline { top: calc(clamp(300px, 24vw, 460px) + 158px) !important; }
    body.servizi-page .hero-cta { top: calc(clamp(340px, 27vw, 500px) + 130px) !important; left: calc(50% - clamp(70px, 5.21%, 90px) - 70px) !important; }
    body.servizi-page .hero-cta-text-only { top: calc(clamp(360px, 28vw, 520px) + 130px) !important; left: calc(50% + 15px) !important; }
    body.servizi-page .icona-assistenza-animata { top: calc(clamp(800px, 58vw, 1000px) - 80px) !important; }
    body.servizi-page .h2-sezione-4 { top: clamp(1120px, 84vw, 1520px) !important; }
    body.servizi-page .testo-sezione-4 { top: clamp(1240px, 94vw, 1680px) !important; }
    body.servizi-page .video-sezione-4-container { top: clamp(1340px, 99vw, 1760px) !important; }
    body.servizi-page .icone-container { top: 2290px !important; }
    body.servizi-page .sezione-5 { padding-top: 420px !important; }
}
@media (max-width: 1200px) and (min-width: 821px) {
    html body.servizi-page .h1-hero { top: calc(clamp(100px, 9vw, 160px) + 130px) !important; position: absolute !important; }
    body.servizi-page .hero-tagline { top: calc(clamp(260px, 22vw, 420px) + 158px) !important; }
    body.servizi-page .hero-cta { top: calc(clamp(300px, 25vw, 460px) + 130px) !important; left: calc(50% - clamp(70px, 5.21%, 90px) - 70px) !important; }
    body.servizi-page .hero-cta-text-only { top: calc(clamp(320px, 26vw, 480px) + 130px) !important; left: calc(50% + 15px) !important; }
    body.servizi-page .icona-assistenza-animata { top: calc(clamp(760px, 55vw, 940px) - 80px) !important; }
    body.servizi-page .h2-sezione-4 { top: clamp(1040px, 78vw, 1440px) !important; }
    body.servizi-page .testo-sezione-4 { top: clamp(1160px, 88vw, 1600px) !important; }
    body.servizi-page .video-sezione-4-container { top: clamp(1260px, 94vw, 1680px) !important; }
    body.servizi-page .icone-container { top: 2200px !important; }
    body.servizi-page .sezione-5 { padding-top: 400px !important; }
}

/* Desktop large (>1400px): abbassa H1 anche su schermi ampi */
@media (min-width: 1401px) {
    html body.servizi-page .h1-hero { top: calc(clamp(200px, 17.36vw, 300px) + 80px) !important; position: absolute !important; }
}

/* Ripristino paragrafo sezione 1 (nessun offset verticale) */
.testo-sezione-1 {
    margin-top: 0 !important;
}
.h2-sezione-4 {
    top: clamp(1260px, 94vw, 1680px) !important; /* compattato */
}
.testo-sezione-4 {
    /* Posizionato sotto al titolo, altezza fluida e testo leggibile */
    left: 117px !important; /* allineato con testo sezione 1 */
    top: clamp(1410px, 104vw, 1850px) !important; /* compattato - 150px sopra */
    width: 683px !important; /* stessa larghezza sezione 1 */
    height: auto !important;
    font-family: 'Outfit' !important;
    font-weight: 300 !important; /* stesso peso sezione 1 */
    font-size: clamp(20px, 2.2vw, 32px) !important; /* fluido */
    line-height: clamp(26px, 2.8vw, 40px) !important; /* fluido */
    color: var(--sima-text-main) !important;
    text-align: left !important;
    z-index: 2;
}
.icone-container {
    top: 2530px !important; /* compattato (alzato di 161px) */
}
.sezione-5 {
    padding-top: 520px !important;
}
.testo-blu {
    color: var(--sima-text-main) !important;
    font-family: 'Outfit' !important;
    font-weight: 300 !important; /* peso normale come il resto del testo */
    font-size: clamp(20px, 2.2vw, 32px) !important; /* fluido */
    line-height: clamp(26px, 2.8vw, 40px) !important; /* fluido */
    margin-top: -20px !important;
}

/* Posizionamento icona assistenza (solo pagina Servizi) */
.icona-assistenza-animata {
    right: clamp(240px, 19.7vw, 340px) !important; /* fluido */
    top: calc(clamp(900px, 63.7vw, 1100px) - 80px) !important; /* fluido (alzata totale di 80px) */
    width: clamp(300px, 28.9vw, 500px) !important; /* fluido */
    pointer-events: none;     /* evita interazioni involontarie */
}

/* Video progettazione lavanderia a destra del testo sezione 4 */
.video-sezione-4-container {
    position: absolute;
    width: clamp(350px, 30vw, 600px); /* fluido - più piccolo su schermi piccoli */
    height: clamp(330px, 28.3vw, 565px); /* fluido - più piccolo su schermi piccoli */
    right: clamp(50px, 4.9vw, 85px); /* fluido */
    top: clamp(1510px, 110vw, 1940px) !important; /* compattato */
    background: transparent;
    border-radius: 25px;
    overflow: hidden;
    z-index: 2;
    transition: transform 0.3s ease-out;
}

.video-sezione-4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    transform: scale(1); /* rimosso lo zoom, video a dimensione naturale */
}

/* Zoom sul video lavatrice hero nella pagina servizi */
body .hero-video-container {
    width: 800px !important
}

/* H1 servizi: forza stessa dimensione del home H1 e mantiene minuscolo */
/* Desktop H1 Servizi: aumenta leggermente mantenendo una riga */
/* Titolo hero Servizi (desktop) - colore brand e spazio sotto */
.h2-hero-servizi {
    display: none !important; /* Nascosto di default, visibile solo su schermi <=1366px */
}
.h1-hero {
    font-size: 92px !important; /* +2px rispetto a 90 */
    line-height: 104px !important; /* più respiro verticale */
    text-transform: none !important;
}
.h1-hero .hero-line-1 {
    /* Mantieni la prima riga leggermente più grande, ma lascia alla seconda la gestione dinamica via JS */
    font-size: 85px !important;
    line-height: 104px !important;
    text-transform: none !important;
    letter-spacing: -0.018em !important;
    white-space: nowrap !important;
    position: relative !important;
    left: -4px !important; /* sposta 4px a sinistra */
}

/* Rimuovo l'override aggressivo sulla seconda riga per consentire allo script di modificarne il font-size (110px -> 140px su scroll)
   Imposto solo il valore iniziale senza !important così lo stile inline JS prevale. */
.h1-hero .hero-line-2 {
    font-size: 85px; /* valore base uguale a home; verrà aumentato dallo script-simple.js */
    line-height: 85px; /* ridotto per eliminare spazio extra */
    text-transform: none; /* evita maiuscolo forzato se non desiderato */
    margin-top: -20px !important; /* riduce ulteriormente lo spazio tra le righe */
}

/* Prima riga dell'H1 leggermente più grande ma sempre su una riga */
/* Prima riga leggermente più grande e compatta */
/* (definizione spostata sopra e ampliata) */

/* ========== MOBILE ONLY OVERRIDES ========== */
@media (max-width: 1366px) {
    .h2-hero-servizi {
        display: none !important; /* Nasconde H2 in hero per evitare duplicato */
        font-weight: 500 !important;
        font-size: clamp(22px, 6.5vw, 30px) !important;
        margin-top: 90px !important;
        padding-top: 0 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        color: #82ADE1 !important;
    }
    .h2-sezione-1 {
        display: block !important;
        font-weight: 500 !important;
        font-size: clamp(22px, 6.5vw, 30px) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        color: #18202d !important;
        margin-bottom: 10px !important;
        margin-top: 60px !important;
        position: relative !important;
        left: -215px !important;
        width: clamp(420px, 70vw, 760px) !important; /* container più stretto su small */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .testo-sezione-1 {
        margin-top: -70px !important;
    }
    .sezione-1 {
        margin-top: -200px !important;
    }
}





/* ===== Servizi: correzione H1 su desktop molto grandi (>=1920px) ===== */
@media (min-width: 1920px) {
    /* Forza l'H1 30px più in alto rispetto al valore base */
    html body.servizi-page .h1-hero {
        top: calc(clamp(200px, 17.36vw, 300px) - 30px) !important;
        position: absolute !important;
    }
}