@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");

/* =========================================================
   LEGALESS — /seleziona-servizi/
   Riscritto il 16/08/2026
   =========================================================

   COS'ERA: un fork del vecchio hero-new (coverflow), 50 KB, con dentro ancora
   le regole della home e il riferimento a landascape-OK-webp2.webp, l'immagine
   che la home non usa piu' da giorni. Buttato.

   COS'E' ORA: una schermata sola. Titolo in alto sulla riga dell'header
   trasparente, le card al centro, la linea diretta in fondo, fondo navy.
   Niente hero, niente mockup, niente morph, niente GSAP.

   -----------------------------------------------------------------------
   LA REGOLA CHE FA STARE TUTTO IN UNA SCHERMATA, A QUALUNQUE RISOLUZIONE
   -----------------------------------------------------------------------
   La scena e' alta 100dvh ed e' un flex verticale con un solo elemento che
   cresce:

       intestazione   flex: 0 0 auto   ancorata in alto, sotto l'header
       slider         flex: 1 1 auto   prende l'avanzo, card al centro
       punti          flex: 0 0 auto
       linea diretta  flex: 0 0 auto   ancorata in basso

   Le card hanno un'altezza FISSA (--lss-card-h, lo stesso valore della home)
   e stanno al centro della fascia dello slider grazie ad align-content.
   Quindi l'avanzo verticale diventa aria sopra e sotto le card, mai card di
   una misura diversa da quelle della home — che era il difetto della prima
   stesura del 16/08, dove le righe erano a 1fr e le card si allungavano.

   A tenerlo dentro lo schermo e' il `vh` dentro il clamp di --lss-card-h,
   piu' due soglie di ALTEZZA (sezione 8) che lo abbassano ancora. La misura
   in pixel non si tocca senza rifare quel conto.

   ⚠️ E LA SCENA COMINCIA A y = 0 PERCHE' IL JS LA ALZA, non per una regola
   di qui. Avada spinge il contenuto sotto l'header con piu' meccanismi
   sommati, e azzerarli da CSS non basta: alzaScena() in
   seleziona-servizi-new.js misura di quanto e' scesa e applica un margine
   negativo identico, esattamente come alzaHero() fa sulla home.
   Senza quel pezzo la scena e' alta uno schermo ma comincia cento pixel piu'
   in basso: il titolo resta sotto l'header e la linea diretta finisce sotto
   il bordo. E' stato il difetto delle prime due stesure del 16/08.

   ⚠️ Se aggiungi un elemento fra l'intestazione e lo slider, dagli
   flex: 0 0 auto. Un secondo elemento che cresce si spartisce l'avanzo con
   lo slider e le card scendono dal centro senza che nulla lo segnali.

   -----------------------------------------------------------------------
   ⚠️ GEMELLA DI hero-new.css — SE CAMBI QUI, CAMBIA ANCHE LI'
   -----------------------------------------------------------------------
   Le sezioni 5 (slider), 6 (card) e 7 (scheda) sono la stessa cosa delle
   sezioni 5, 6 e 7 di assets/hero-new/hero-new.css, con il prefisso lss-
   invece di lgh- e la pagina .legaless-servizi-page invece di
   .legaless-hero-new-page.
   E' un doppione deliberato (scelta dell'utente del 16/08: la home non si
   tocca). Il costo e' questo, ed e' scritto qui perche' non si scopra fra
   sei mesi guardando due card diverse sulle due pagine.

   -----------------------------------------------------------------------
   ⚠️ LITESPEED — UCSS E QUESTO FILE
   -----------------------------------------------------------------------
   Tutto quello che c'e' qui dentro stila elementi che ESISTONO nell'HTML che
   il server produce, quindi UCSS non dovrebbe buttarlo. Ma il sintomo da
   riconoscere resta quello del 14/08: connesso vedi una versione, in incognito
   un'altra. Se succede, la casella e'
   LiteSpeed Cache -> Page Optimization -> Tuning -> CSS Excludes,
   e ci va scritto seleziona-servizi-new.css accanto a hero-new.css.

   -----------------------------------------------------------------------
   IL CARATTERE ARRIVA DA @import, E IL MOTIVO E' UN VINCOLO, NON UNA SCELTA
   -----------------------------------------------------------------------
   Montserrat su questa pagina non e' accodato da nessuna parte:
   legaless_front_caratteri() in includes/legaless-front.php esce subito se la
   pagina non e' la home, e l'enqueue in functions.php carica ancora Inter.
   Senza il carattere vero, Montserrat arriverebbe solo dai pesi che porta
   Avada e dove il peso manca il browser si fabbrica un grassetto sintetico —
   lo stesso difetto corretto sulla home il 14/08.
   L'@import lo risolve senza toccare PHP. La versione pulita e' spostare
   l'enqueue: e' la parte B facoltativa della consegna.
   ========================================================= */

/* =========================================================
   1. VARIABILI — sulla PAGINA, cosi' arrivano ovunque
   =========================================================
   Sulla home le variabili stavano sul root della scena e le schede, che di
   quel root non sono discendenti, ricevevano il vuoto: il pulsante CTA
   diventava bianco su bianco. Qui stanno su .legaless-servizi-page, che
   contiene sia la scena sia le schede.
   ========================================================= */

.legaless-servizi-page {
    /* Palette — identica alla home. */
    --lss-accent: #02b1ae;
    --lss-accent-scuro: #017e7c;
    --lss-navy: #0f1826;
    --lss-navy-2: #142433;
    --lss-scuro: #384048;
    --lss-scuro-soft: #57616b;
    --lss-card-bg: #eef0f3;
    --lss-chiaro-soft: #9fb0c3;

    /* Griglia — I VALORI SONO QUELLI DELLA HOME, copiati, non riscelti.
       hero-new.css: --lgh-gap e --lgh-card-h. La card ha un'ALTEZZA FISSA,
       non un tetto: e' cosi' che due card sulle due pagine risultano
       identiche. La prima stesura del 16/08 le faceva crescere fino a
       riempire la riga della griglia, e infatti si vedevano diverse. */
    --lss-gap: clamp(0.7rem, 1.1vw, 1.1rem);
    /* Piu' alte del 27vh della home: li' in fase 1 l'header e' NASCOSTO e le
       card hanno tutto lo schermo, qui l'header resta e va compensato. */
    --lss-card-h: clamp(212px, 28vh, 320px);

    /* PADDING SOPRA E SOTTO — e perche' NON sono quelli della home.
       Sulla home #final-grid ha padding-top 11vh, ma in fase 1 la home
       NASCONDE L'HEADER (hero-new.js, bloccaHeader(true)): quegli 11vh sono
       aria libera. Qui l'header resta visibile e si mangia i primi ~90px, per
       cui copiare 11vh spinge il titolo molto piu' in basso di come appare
       sulla home. Ridotti in proporzione: il titolo si ferma appena sotto la
       riga dell'header, non sopra e non a meta' schermo.

       Il fondo e' ~14px piu' del sopra, e non e' un caso: con
       justify-content:center il gruppo si centra fra i due padding, quindi
       per alzarlo si aumenta QUELLO SOTTO. Cambiarne uno solo lo sposta di
       meta' di quanto ci si aspetta.
       Il conto, a 1080px: sopra 43 + sotto 54, gruppo 836 -> il titolo cade
       a ~117px, cioe' ~25px sotto l'header. */
    /* max() e non clamp(): 6rem e' un PAVIMENTO che il vh non puo' scavalcare
       verso il basso. Sotto i ~96px il titolo finirebbe dietro l'header, alto
       ~90px — e succederebbe proprio sugli schermi bassi, dove 8vh vale meno
       di 6rem. Cosi' il titolo si ferma sempre appena sotto l'header, a
       qualunque altezza di finestra. */
    --lss-cima: max(6rem, 8vh);
    /* Stretto di proposito: la linea diretta deve arrivare vicino al bordo
       basso. Non zero: sotto il pulsante serve respiro. */
    --lss-fondo: clamp(1rem, 2.5vh, 2rem);
}

/* =========================================================
   2. BASE PAGINA — reset Avada, header trasparente, fondo navy
   =========================================================
   IL SELETTORE DEL BODY, e perche' e' scritto con [class*=].
   WordPress, per il template template/template-seleziona-servizi-new.php,
   aggiunge al body una classe ricavata dal basename del file:
       page-template-template-seleziona-servizi-new
   piu' una seconda ricavata dal percorso intero, che sanitize_html_class()
   riduce buttando la barra:
       page-template-templatetemplate-seleziona-servizi-new-php
   Il vecchio foglio provava a indovinarle una per una e ne sbagliava una su
   due. [class*="page-template-template-seleziona-servizi-new"] le prende
   entrambe e non puo' sbagliare. Non tocca la home: le sue classi non
   contengono "seleziona-servizi".
   ========================================================= */

/* Colore scritto per esteso, NON var(--lss-navy): le variabili si ereditano
   solo verso i discendenti, e il body e' l'ANTENATO di
   .legaless-servizi-page, dove la palette e' definita. Qui var() darebbe un
   valore vuoto — e' lo stesso errore che il 14/08 ha lasciato bianco su
   bianco il pulsante della home. */
body[class*="page-template-template-seleziona-servizi-new"] {
    background: #0f1826 !important;
    overflow-x: hidden;
}

/* Regola SEPARATA, e non accorpata a quella sopra: un selettore non
   riconosciuto invalida l'intera lista in cui si trova. Accorpando :has(),
   su un browser che non lo supporta sarebbe saltato anche il fondo del body. */
html:has(body[class*="page-template-template-seleziona-servizi-new"]) {
    background: #0f1826;
}

/* LA RIGA BIANCA IN FONDO ALLA PAGINA.
   Non veniva dalla scena: veniva da cio' che le sta INTORNO. Il fondo navy
   e' dipinto su body::before, che e' position:fixed e copre solo il
   viewport; i contenitori di Avada restano del loro colore, e dove il
   documento e' piu' alto del velo — la barra degli indirizzi che si ritrae
   su mobile, il margine sopra il footer — spunta il bianco sotto.
   Si dipingono anche loro. Il footer NON si tocca: ha i suoi colori. */
body[class*="page-template-template-seleziona-servizi-new"] #boxed-wrapper,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-sides-frame,
body[class*="page-template-template-seleziona-servizi-new"] #wrapper,
body[class*="page-template-template-seleziona-servizi-new"] #main,
body[class*="page-template-template-seleziona-servizi-new"] #content {
    background-color: #0f1826 !important;
    border-bottom: 0 !important;
}

/* Il fondo. Navy pieno piu' l'alone al centro: e' la stessa scena su cui
   stanno le card sulla home (li' il navy e' il velo di fase 1 e l'alone e'
   il radiale di #pin-container). Niente fotografia: questa pagina e'
   separata dalla home e non ne ripete l'hero. */
body[class*="page-template-template-seleziona-servizi-new"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60vh 60vh at 50% 48%,
            rgba(45, 78, 120, 0.55) 0%,
            rgba(35, 60, 95, 0.28) 38%,
            rgba(30, 58, 95, 0.00) 70%),
        linear-gradient(180deg, #0f1826 0%, #142433 100%);
}

/* Avada mette al #wrapper un padding-top pari all'altezza dell'header: e' la
   striscia che impediva al contenuto di prendersi tutto lo schermo. L'header
   e' trasparente e fisso, quindi puo' sovrapporsi al contenuto — ed e'
   esattamente quello che serve perche' il titolo stia sulla sua riga. */
/* ⚠️ QUESTE RIGHE AIUTANO MA NON BASTANO, e va saputo.
   Riducono lo scarto, non lo azzerano: quanto Avada spinga giu' il contenuto
   dipende anche dall'header nel flusso e dal distanziatore dello sticky, che
   si monta dopo il DOM. La misura vera la fa alzaScena() in
   seleziona-servizi-new.js. Qui si tiene pulito quello che si puo' tenere
   pulito da CSS — utile soprattutto per chi ha il JavaScript spento.

   .fusion-row e .post-content sono ANTENATI di #primary, non discendenti:
   per questo si nominano dal body e non da .legaless-servizi-page. E' la
   riga che mancava. */
body[class*="page-template-template-seleziona-servizi-new"] #wrapper,
body[class*="page-template-template-seleziona-servizi-new"] #main,
body[class*="page-template-template-seleziona-servizi-new"] #main > .fusion-row,
body[class*="page-template-template-seleziona-servizi-new"] #content,
body[class*="page-template-template-seleziona-servizi-new"] .post-content,
body[class*="page-template-template-seleziona-servizi-new"] #sliders-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

/* La barra del titolo di Avada, se il tema la stampa, qui non serve: il
   titolo e' l'H1 dentro la scena. */
body[class*="page-template-template-seleziona-servizi-new"] .fusion-page-title-bar,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-breadcrumbs {
    display: none !important;
}

/* Il titolo passa SOTTO l'header (z-index 10010) e si vede solo perche'
   l'header e' trasparente: qui si elencano anche le varianti v1..v7 e la
   barra secondaria, altrimenti basta un fondo dichiarato da Avada su una di
   quelle per coprirlo. */
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-wrapper,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-v1,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-v2,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-v3,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-v4,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-v5,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-v6,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-header-v7,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-secondary-header,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-secondary-main-menu,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-is-sticky .fusion-header,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-is-sticky .fusion-header-wrapper,
body[class*="page-template-template-seleziona-servizi-new"] .fusion-sticky-header-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10010 !important;
}

/* Breakout a tutta larghezza: Avada incolonna il contenuto in una riga
   centrata con un max-width, e la scena deve arrivare ai bordi. */
.legaless-servizi-page {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
}

.legaless-servizi-page #content,
.legaless-servizi-page .post-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.legaless-servizi-page .fusion-row,
.legaless-servizi-page .fusion-builder-row,
.legaless-servizi-page .fusion-layout-column,
.legaless-servizi-page .fusion-column-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   3. TIPOGRAFIA
   =========================================================
   LA CLASSE E' RADDOPPIATA, E NON E' UN REFUSO.
   `.legaless-servizi-page *` vale (0,1,0). Avada genera la sua tipografia con
   selettori come `.fusion-body h1`, che vale (0,1,1): fra due dichiarazioni
   !important vince la piu' specifica, quindi vinceva Avada e sul titolo si
   vedeva. Scrivere due volte la stessa classe seleziona esattamente gli
   stessi elementi (un elemento quella classe ce l'ha o non ce l'ha) e porta
   il punteggio a (0,2,0) e (0,2,1). Da li' in su Avada non arriva.

   ⚠️ NIENTE ::before / ::after in questo elenco, mai. Le icone a font di
   Avada e Font Awesome sono pseudo-elementi con un font-family proprio:
   forzarci Montserrat sopra non le rende Montserrat, le trasforma in
   caratteri a caso.
   ========================================================= */

.legaless-servizi-page.legaless-servizi-page,
.legaless-servizi-page.legaless-servizi-page * {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}

.legaless-servizi-page.legaless-servizi-page h1,
.legaless-servizi-page.legaless-servizi-page h2,
.legaless-servizi-page.legaless-servizi-page h3,
.legaless-servizi-page.legaless-servizi-page h4,
.legaless-servizi-page.legaless-servizi-page p,
.legaless-servizi-page.legaless-servizi-page a,
.legaless-servizi-page.legaless-servizi-page li,
.legaless-servizi-page.legaless-servizi-page span,
.legaless-servizi-page.legaless-servizi-page strong,
.legaless-servizi-page.legaless-servizi-page em,
.legaless-servizi-page.legaless-servizi-page button {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}

/* =========================================================
   4. LA SCENA — una schermata, e una sola
   ========================================================= */

/* IL TITOLO STA SULLA RIGA DELL'HEADER, ED E' UNA SCELTA — non dimenticarla.

   Sulla home il blocco delle card ha `padding-top: clamp(4.5rem, 11vh, 7rem)`:
   li' serve, perche' sopra c'e' l'hero con il titolo grande e il telefono.
   Qui sopra non c'e' niente, e ricopiare quel padding buttava via ~110px in
   cima — l'intestazione finiva sotto l'header e restava una fascia vuota che
   si portava via lo spazio delle card. Era il rilievo del 16/08.

   Ora `--lss-cima` vale ~1rem: il titolo sale sulla riga dell'header, che e'
   trasparente e al centro NON HA CONTENUTO (logo a sinistra, menu a destra).
   Nessuna sovrapposizione vera, nessun clic rubato: il titolo non e'
   cliccabile, e le card cominciano comunque sotto i ~120px, cioe' sotto
   l'header. E' lo stesso principio del codice pre-16/08, dove il carosello
   era `position:absolute; inset:0` e si prendeva tutto lo schermo.

   ⚠️ Se un domani l'header prende un contenuto CENTRALE, questa riga va
   rivista: e' l'unico presupposto su cui poggia.

   PERCHE' `justify-content: flex-start` E NON `center` COME SULLA HOME.
   Sulla home lo slider e' `flex: 0 1 auto` e il gruppo intero e' centrato.
   Qui la richiesta e' diversa e precisa: titolo in ALTO, CTA in BASSO, card
   in mezzo. Si ottiene lasciando crescere solo lo slider (`flex: 1 1 auto`):
   assorbe lui tutto l'avanzo, e `align-content: center` dentro la pagina
   rimette le card al centro della fascia che resta. Titolo e CTA restano
   agli estremi. */
.legaless-servizi-page .lss-scena {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-start, non center: il titolo si ancora a --lss-cima e la linea
       diretta al fondo, mentre lo slider — l'unico che cresce — si prende
       l'avanzo e tiene le card al centro della fascia. Centrando il gruppo
       intero l'avanzo finiva meta' sopra il titolo e meta' sotto la CTA:
       titolo troppo basso e CTA lontana dal bordo. */
    justify-content: flex-start;
    /* Stesso gap della home (hero-new.css, #final-grid). */
    gap: clamp(0.8rem, 2.2vh, 1.7rem);
    padding: var(--lss-cima) clamp(0.8rem, 2.5vw, 2.5rem) var(--lss-fondo);
    /* Nessuno scorrimento interno: se qualcosa non ci sta, si stringe.
       Le schede sono position:fixed e stanno FUORI da qui, altrimenti
       questo overflow le taglierebbe. */
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.legaless-servizi-page .lss-intestazione {
    flex: 0 0 auto;
    text-align: center;
    /* width + box-sizing + min(): l'intestazione non puo' essere piu' larga
       del suo contenitore, mai. In un flex a colonna con align-items:center
       un elemento e' largo quanto il suo contenuto e sborda in silenzio se
       il contenuto non va a capo. */
    width: 100%;
    max-width: min(1180px, 100%);
    box-sizing: border-box;
}

/* Sullo schermo largo si vede l'etichetta ampia. Su telefono la scambia il
   blocco mobile. Sono due span dentro lo stesso <h1>: nessuno dei due e'
   nascosto ai motori piu' di quanto lo sia qualunque contenuto responsive. */
.legaless-servizi-page .lss-titolo__stretto { display: none; }

/* Seconda rete: anche una parola singola piu' larga dello schermo va a capo
   invece di sfondare. Costa nulla e chiude la classe di difetto. */
.legaless-servizi-page .lss-titolo,
.legaless-servizi-page .lss-sottotitolo {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Misure copiate da .lgh-grid-titolo e .lgh-grid-sottotitolo. */
.legaless-servizi-page .lss-titolo {
    margin: 0 0 0.4rem !important;
    padding: 0 !important;
    font-size: clamp(1.8rem, 2.8vw, 2.9rem);
    line-height: 1.1;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Una riga sola: il testo e' lungo, quindi scala col viewport invece di
   andare a capo. Sotto i 1150px puo' spezzarsi, ed e' accettabile. */
.legaless-servizi-page .lss-sottotitolo {
    margin: 0 !important;
    font-size: clamp(1.02rem, 1.32vw, 1.34rem);
    line-height: 1.45;
    font-weight: 500 !important;
    color: var(--lss-chiaro-soft) !important;
    -webkit-text-fill-color: var(--lss-chiaro-soft) !important;
}

/* =========================================================
   5. LO SLIDER — gemello di hero-new.css sezione 5
   =========================================================
   Perche' resta uno slider anche adesso che le pagine sono due e la seconda
   ha una card sola: quando si aggiungera' l'ottavo servizio non ci sara' da
   ripensare il layout. Frecce e puntini compaiono e spariscono da soli in
   base al numero di pagine, che lo decide il PHP.
   ========================================================= */

/* `flex: 1 1 auto` — lo slider e' l'UNICO elemento che cresce, e si prende
   tutto l'avanzo verticale. `align-items: center` (quello della home) lo
   divide equamente sopra e sotto il blocco delle card. Risultato: titolo
   ancorato in alto, CTA ancorata in basso, card al centro.
   ⚠️ Con `0 1 auto` (il valore della home) il gruppo si centra tutto insieme
   e la CTA resta lontana dal bordo basso.
   E il "troppo spazio" segnalato in un giro precedente non si ripresenta
   perche' ora le card sono piu' alte (29.5vh) e i margini piu' stretti:
   l'avanzo da spartire e' ~40px per lato a 1080px, non ~100.
   Su tutto il resto — misure, gap, hover, colori, scheda — nessuna
   divergenza: confrontate dichiarazione per dichiarazione con hero-new.css. */
.legaless-servizi-page .lss-slider {
    position: relative;
    /* 1 1 auto + min-height:0 e' la riga che fa funzionare tutto il resto:
       lo slider si prende l'altezza avanzata, e min-height:0 permette a un
       elemento flex di STRINGERSI sotto il suo contenuto (senza, il minimo
       automatico e' l'altezza del contenuto e la scena sfonda). */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1180px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legaless-servizi-page .lss-slider__vista {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.legaless-servizi-page .lss-slider__pista {
    display: flex;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ogni pagina e' un flex a capo, ESATTAMENTE come .lgh-pagina sulla home.
   La prima stesura del 16/08 usava una griglia con le righe a 1fr: le card
   si allungavano a riempire l'altezza disponibile e risultavano di una
   misura diversa da quelle della home. Con flex-wrap + altezza fissa della
   card, l'avanzo diventa aria — e `align-content: center` la divide sopra e
   sotto il blocco, che resta centrato nella fascia.

   `justify-content: center` fa anche il lavoro che prima facevano le regole
   su data-lss-conta: se una pagina ha una card sola (oggi la seconda, con
   Altra esigenza legale) resta larga un terzo e si centra da sola. */
.legaless-servizi-page .lss-pagina {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: var(--lss-gap);
    /* Tre pixel di respiro: i due anelli turchesi dell'hover stanno FUORI dal
       bordo della card, e senza questo la vista (overflow:hidden) li
       taglierebbe. Stesso valore della home. */
    padding: 3px;
}

.legaless-servizi-page .lss-slider__freccia {
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.legaless-servizi-page .lss-slider__freccia:hover,
.legaless-servizi-page .lss-slider__freccia:focus-visible {
    background: var(--lss-accent);
    transform: scale(1.08);
}

/* [hidden] deve vincere: la classe qui sopra non dichiara display, quindi
   basterebbe, ma la riga costa nulla ed e' la rete contro il difetto del
   14/08 (una classe con display batte l'attributo del browser). */
.legaless-servizi-page .lss-slider__freccia[hidden] { display: none !important; }

.legaless-servizi-page .lss-punti {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.legaless-servizi-page .lss-punto {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.2s ease;
}

.legaless-servizi-page .lss-punto.is-attivo {
    background: var(--lss-accent);
    width: 1.6rem;
}

/* =========================================================
   6. LA CARD — gemella di hero-new.css sezione 6
   =========================================================
   Il bersaglio del clic e' TUTTA la card: il <button> sta in posizione
   assoluta su tutto il perimetro. Con il pulsante grande quanto il suo
   contenuto, hover e clic funzionavano solo sopra testo e icona.
   ========================================================= */

/* Larghezza e altezza sono quelle di .lgh-card sulla home, formula compresa:
   un terzo della riga meno i due gap, e l'altezza fissa di --lss-card-h. */
.legaless-servizi-page .lss-card {
    position: relative;
    flex: 0 0 calc((100% - (2 * var(--lss-gap))) / 3);
    max-width: calc((100% - (2 * var(--lss-gap))) / 3);
    height: var(--lss-card-h);
    border-radius: 1.2rem;
    background: var(--lss-card-bg);
    border: 1px solid rgba(17, 17, 17, 0.06);
    box-shadow: 0 10px 26px rgba(6, 12, 22, 0.18);
    overflow: hidden;
    /* Identico a .lgh-card: a riposo la card NON ha transizione su transform.
       La aggiunge la classe .lss-pronta qui sotto, come fa .lgh-pronta sulla
       home. Tenerla sempre accesa era l'ultima differenza di comportamento
       rimasta fra le due pagine. */
    transition: box-shadow 0.24s ease, border-color 0.24s ease;
}

/* Gemella di .lgh-pronta .lgh-card. Sulla home la mette il JS entrando in
   fase 1; qui la mette al caricamento, perche' non c'e' nessun morph da
   aspettare. */
.legaless-servizi-page .lss-pagina.lss-pronta .lss-card {
    transition:
        opacity 0.28s ease,
        filter 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.legaless-servizi-page .lss-card__apri {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1rem 0.85rem;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.legaless-servizi-page .lss-card__apri:focus-visible {
    outline: 3px solid var(--lss-accent);
    outline-offset: -3px;
}

/* L'icona si misura in vh e non in pixel fissi: su uno schermo basso deve
   restringersi insieme alla card, o mangia lo spazio del testo. */
.legaless-servizi-page .lss-card__icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(70px, 8.6vh, 100px);
    height: clamp(70px, 8.6vh, 100px);
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(2, 177, 174, 0.10);
    transition: background-color 0.24s ease, transform 0.24s ease;
}

.legaless-servizi-page .lss-card__icona img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

.legaless-servizi-page .lss-card__titolo {
    display: block;
    font-size: clamp(1.12rem, 1.42vw, 1.46rem);
    line-height: 1.18;
    font-weight: 700 !important;
    text-wrap: balance;
    color: var(--lss-scuro) !important;
    -webkit-text-fill-color: var(--lss-scuro) !important;
}

/* Il testo si taglia a tre righe invece di sfondare la card: la spiegazione
   intera sta nella scheda che si apre al clic. */
.legaless-servizi-page .lss-card__testo {
    display: block;
    font-size: clamp(0.88rem, 1.02vw, 1.05rem);
    line-height: 1.45;
    font-weight: 600 !important;
    text-wrap: pretty;
    color: var(--lss-scuro-soft) !important;
    -webkit-text-fill-color: var(--lss-scuro-soft) !important;
}

/* ============================================================
   HOVER — il blocco della home, SENZA LO ZOOM.
   ============================================================
   Preso da hero-new.css righe 1176-1200 e riportato dichiarazione per
   dichiarazione: anello turchese 2px, alone 7px, ombra profonda, fondo che
   passa a bianco, bordo acceso, z-index, sollevamento di 4px, icona che si
   accende.

   L'UNICA COSA TOLTA E' LA SCALA.
   Sulla home c'e': `transform: scale(1.09) translateY(-4px)` sulla card e
   `scale(1.06)` sull'icona — verificato sul file che gira davvero sul
   server, non sulla copia locale (md5 be915e68, identici).
   Qui la card NON SI MUOVE AFFATTO: niente scala e niente sollevamento.
   Nella regola qui sotto non c'e' proprio la proprieta' `transform`.

   Il motivo non e' solo estetico. La vista dello slider e' overflow:hidden e
   ha 3px di respiro: qualunque movimento della card — crescita o
   sollevamento — la fa sbordare e VENIRE TAGLIATA sul bordo del riquadro.
   L'effetto deve restare di sola evidenziazione del contorno.

   ⚠️ NON aggiungere `transform` a questa regola, in nessuna forma, e non
   rimetterlo "per allineare alla home": e' stato tolto apposta, due volte.
   Sulla home ci sta perche' li' la scena e' diversa; qui taglia le card.
   ============================================================ */
@media (hover: hover) {
    .legaless-servizi-page .lss-card:hover {
        border-color: rgba(2, 177, 174, 0.95);
        background: #ffffff;
        box-shadow:
            0 0 0 2px rgba(2, 177, 174, 0.95),
            0 0 0 7px rgba(2, 177, 174, 0.16),
            0 26px 50px rgba(6, 12, 22, 0.38);
        z-index: 3;
    }

    .legaless-servizi-page .lss-card:hover .lss-card__icona {
        background: rgba(2, 177, 174, 0.20);
    }
}

/* Il clic e il tocco: nessun ingrandimento e nessun rimpicciolimento — sulla
   home qui c'e' scale(0.985). Resta solo l'anello acceso, cosi' su telefono
   si vede comunque che il dito ha preso. La classe .lss-toccata la mette il
   JS e dura 260ms: su iOS :active non scatta senza un listener touch, e
   comunque un tocco dura meno della transizione. */
.legaless-servizi-page .lss-card:active,
.legaless-servizi-page .lss-card.lss-toccata {
    border-color: rgba(2, 177, 174, 0.95);
    background: #ffffff;
    box-shadow:
        0 0 0 2px rgba(2, 177, 174, 0.95),
        0 0 0 7px rgba(2, 177, 174, 0.16),
        0 14px 30px rgba(6, 12, 22, 0.22);
}


/* Le altre card sfumano quando una scheda e' aperta. */
.legaless-servizi-page .lss-pagina.is-sfocato .lss-card {
    opacity: 0.14;
    filter: blur(2px) saturate(0.6);
    transform: scale(0.965);
    pointer-events: none;
}

.legaless-servizi-page .lss-pagina.is-sfocato .lss-card.is-attiva {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

/* ---------- La linea diretta, in fondo ---------- */

.legaless-servizi-page .lss-diretta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
}

.legaless-servizi-page .lss-diretta__testo {
    margin: 0 !important;
    font-size: 1.14rem;
    font-weight: 500 !important;
    color: var(--lss-chiaro-soft) !important;
    -webkit-text-fill-color: var(--lss-chiaro-soft) !important;
}

/* Fondo e testo dichiarati con un colore VERO prima della variabile: se un
   domani la variabile non arrivasse, il pulsante resterebbe leggibile invece
   di diventare bianco su bianco. E' successo sulla home il 14/08. */
.legaless-servizi-page .lss-diretta__bottone {
    padding: 0.85rem 1.85rem;
    border: 0;
    border-radius: 999px;
    background: #02b1ae;
    background: var(--lss-accent, #02b1ae);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.02rem;
    font-weight: 700 !important;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(2, 177, 174, 0.22);
    transition: transform 0.22s ease, background-color 0.22s ease;
}

.legaless-servizi-page .lss-diretta__bottone:hover,
.legaless-servizi-page .lss-diretta__bottone:focus-visible {
    background: #017e7c;
    transform: scale(1.06);
}

/* =========================================================
   7. LA SCHEDA — gemella di hero-new.css sezione 7
   ========================================================= */

/* LA CORREZIONE DEL 14/08, riportata qui perche' vale allo stesso modo.
   [hidden] vale display:none, ma arriva dal foglio del browser, con
   specificita' piu' bassa: una qualunque classe con display:flex lo batte, e
   le schede restano stese sopra la pagina a mangiarsi i clic. */
.legaless-servizi-page .lss-scheda[hidden],
.legaless-servizi-page .lss-velo[hidden] {
    display: none !important;
}

.legaless-servizi-page .lss-schede {
    position: relative;
    z-index: 2147483000;
}

.legaless-servizi-page .lss-velo {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: rgba(6, 12, 22, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.legaless-servizi-page .lss-velo.is-aperto { opacity: 1; }

.legaless-servizi-page .lss-scheda {
    position: fixed;
    z-index: 2147483001;
    left: 50%;
    top: 50%;
    width: min(680px, calc(100vw - 2rem));
    max-height: min(88vh, 860px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 30px 80px rgba(6, 12, 22, 0.45);
    overflow: hidden;
    transform: translate(-50%, -46%) scale(0.97);
    opacity: 0;
    /* Seconda rete: finche' non e' aperta non intercetta nulla. */
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.legaless-servizi-page .lss-scheda.is-aperto {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.legaless-servizi-page .lss-scheda__barra {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.8rem 0.7rem 1.1rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07);
    background: #ffffff;
}

.legaless-servizi-page .lss-scheda__indietro,
.legaless-servizi-page .lss-scheda__chiudi {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 600 !important;
    color: var(--lss-scuro-soft) !important;
    -webkit-text-fill-color: var(--lss-scuro-soft) !important;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.legaless-servizi-page .lss-scheda__indietro { font-size: 0.86rem; padding: 0.55rem 0.95rem; }
.legaless-servizi-page .lss-scheda__chiudi { font-size: 1.7rem; line-height: 1; width: 2.8rem; height: 2.8rem; }

/* Il bersaglio del clic deve essere il pulsante, non il testo dentro. */
.legaless-servizi-page .lss-scheda__barra button > * { pointer-events: none; }

.legaless-servizi-page .lss-scheda__indietro:hover,
.legaless-servizi-page .lss-scheda__chiudi:hover,
.legaless-servizi-page .lss-scheda__indietro:focus-visible,
.legaless-servizi-page .lss-scheda__chiudi:focus-visible {
    background: rgba(17, 17, 17, 0.06);
    color: var(--lss-scuro) !important;
    -webkit-text-fill-color: var(--lss-scuro) !important;
}

.legaless-servizi-page .lss-scheda__corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.9rem clamp(1rem, 2.6vw, 1.6rem) 1rem;
}

.legaless-servizi-page .lss-scheda__icona {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
    margin: 0 0 0.5rem;
}

.legaless-servizi-page .lss-scheda__titolo {
    margin: 0 0 0.5rem !important;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    line-height: 1.15;
    font-weight: 700 !important;
    color: var(--lss-scuro) !important;
    -webkit-text-fill-color: var(--lss-scuro) !important;
}

.legaless-servizi-page .lss-scheda__titolo:focus { outline: none; }

.legaless-servizi-page .lss-scheda__occhiello {
    margin: 0 0 0.9rem !important;
    font-size: 0.86rem;
    line-height: 1.45;
    font-weight: 500 !important;
    color: var(--lss-scuro-soft) !important;
    -webkit-text-fill-color: var(--lss-scuro-soft) !important;
}

.legaless-servizi-page .lss-scheda__h3 {
    margin: 0 0 0.5rem !important;
    font-size: 0.7rem;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lss-accent-scuro) !important;
    -webkit-text-fill-color: var(--lss-accent-scuro) !important;
}

.legaless-servizi-page .lss-scheda__ottieni {
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.legaless-servizi-page .lss-scheda__ottieni li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

.legaless-servizi-page .lss-scheda__ottieni li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--lss-accent);
}

.legaless-servizi-page .lss-scheda__ottieni strong {
    display: block;
    font-weight: 600 !important;
    color: var(--lss-scuro) !important;
    -webkit-text-fill-color: var(--lss-scuro) !important;
}

.legaless-servizi-page .lss-scheda__ottieni span {
    color: var(--lss-scuro-soft) !important;
    -webkit-text-fill-color: var(--lss-scuro-soft) !important;
    font-weight: 400 !important;
}

.legaless-servizi-page .lss-fascia {
    padding: 0.8rem 0.95rem;
    border-radius: 0.8rem;
    background: rgba(2, 177, 174, 0.07);
    border: 1px solid rgba(2, 177, 174, 0.22);
}

.legaless-servizi-page .lss-fascia__cifre {
    margin: 0 0 0.4rem !important;
    font-size: 1.1rem;
    font-weight: 500 !important;
    color: var(--lss-scuro) !important;
    -webkit-text-fill-color: var(--lss-scuro) !important;
}

.legaless-servizi-page .lss-fascia__cifre strong {
    font-weight: 700 !important;
    color: var(--lss-accent-scuro) !important;
    -webkit-text-fill-color: var(--lss-accent-scuro) !important;
}

/* Art. 35 CDF: non rimuovere. */
.legaless-servizi-page .lss-fascia__nota {
    margin: 0 !important;
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 400 !important;
    color: var(--lss-scuro-soft) !important;
    -webkit-text-fill-color: var(--lss-scuro-soft) !important;
}

.legaless-servizi-page .lss-scheda__azione {
    flex: 0 0 auto;
    padding: 0.9rem clamp(1.1rem, 3vw, 2rem) 1.1rem;
    border-top: 1px solid rgba(17, 17, 17, 0.07);
    background: #ffffff;
    text-align: center;
}

.legaless-servizi-page .lss-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    padding: 0.9rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: #02b1ae;
    background: var(--lss-accent, #02b1ae);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.02rem;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(2, 177, 174, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.legaless-servizi-page .lss-cta:hover,
.legaless-servizi-page .lss-cta:focus-visible {
    background: #017e7c;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* =========================================================
   8. SCHERMI BASSI — si guadagna spazio verticale
   =========================================================
   Non sono breakpoint di dispositivo: sono soglie di ALTEZZA. Un portatile
   da 1366x768 e un monitor 4k in verticale hanno la stessa larghezza utile e
   problemi opposti, ed e' l'altezza a decidere.
   ========================================================= */

/* IL CONTO, ed e' stato fatto sul serio: non ritoccare a occhio.
   Fuori dallo slider la scena spende --lss-cima + intestazione + 3 gap +
   punti + linea diretta + --lss-fondo. Quello che resta deve contenere DUE
   righe di card piu' un gap, altrimenti la linea diretta finisce sotto il
   bordo (la scena e' overflow:hidden: verrebbe tagliata, non scrollata).

   I tre coefficienti qui sotto sono stati verificati su tutta la gamma, da
   1440px a 560px di altezza. Il punto piu' stretto non e' lo schermo piu'
   basso: e' il PRIMO PIXEL SOPRA OGNI SOGLIA — a 901px di altezza il 28vh
   della banda alta lascia 6px di margine, ed e' il valore che ha deciso il
   coefficiente. Alzarlo anche di mezzo punto taglia la CTA fra i 900 e i
   1000px di finestra, che e' proprio la fascia dei portatili.

        oltre 900px    clamp(212px, 28vh,   320px)
        681-900px      clamp(160px, 24.5vh, 230px)
        fino a 680px   clamp(132px, 23vh,   180px)

   Il primo valore di ogni clamp e' il pavimento: sotto quello la card non
   regge piu' icona + titolo + descrizione. */

@media (min-width: 901px) and (max-height: 900px) {
    .legaless-servizi-page {
        --lss-card-h: clamp(160px, 24.5vh, 230px);
    }
    .legaless-servizi-page .lss-scena { gap: clamp(0.5rem, 1.4vh, 1rem); }
    .legaless-servizi-page .lss-titolo { font-size: clamp(1.45rem, 2.2vw, 2rem); }
    .legaless-servizi-page .lss-sottotitolo { font-size: clamp(0.88rem, 1.05vw, 1.05rem); }
}

@media (min-width: 901px) and (max-height: 680px) {
    .legaless-servizi-page {
        --lss-card-h: clamp(132px, 23vh, 180px);
    }
    /* Sotto questa soglia la descrizione sulla card diventa una riga sola:
       meglio un accenno leggibile che tre righe schiacciate. La spiegazione
       intera e' comunque a un clic. */
    .legaless-servizi-page .lss-card__testo { font-size: 0.78rem; line-height: 1.3; }
    .legaless-servizi-page .lss-card__apri { gap: 0.35rem; padding: 0.7rem; }
    .legaless-servizi-page .lss-card__icona { width: 52px; height: 52px; }
    .legaless-servizi-page .lss-diretta__testo { font-size: 0.88rem; }
    .legaless-servizi-page .lss-diretta__bottone { padding: 0.6rem 1.3rem; font-size: 0.88rem; }
}

/* Sotto i 1150px di larghezza: due colonne, e il sottotitolo puo' andare a
   capo. Stessa soglia e stessa regola della home. Tre card da meno di 320px
   con dentro icona, titolo e descrizione non si leggono piu'. */
@media (min-width: 901px) and (max-width: 1150px) {
    .legaless-servizi-page .lss-card {
        flex-basis: calc((100% - var(--lss-gap)) / 2);
        max-width: calc((100% - var(--lss-gap)) / 2);
    }
}

/* IL `nowrap` DEL SOTTOTITOLO VIVE SOLO QUI, E IL MOTIVO E' STRUTTURALE.
   Prima stava nella regola base e ogni contesto piu' stretto doveva
   ricordarsi di annullarlo: bastava dimenticarne uno e il testo usciva dai
   bordi — e' successo su telefono. Dichiarandolo solo dove serve davvero
   (schermi larghi, dove la riga ci sta e andare a capo sarebbe brutto) non
   c'e' niente da annullare e non puo' piu' colare altrove.
   Regola generale: una proprieta' che impedisce al testo di adattarsi si
   dichiara nel contesto che la vuole, mai come base da revocare. */
@media (min-width: 1151px) {
    .legaless-servizi-page .lss-sottotitolo { white-space: nowrap; }
}

/* =========================================================
   9. MOBILE — fino a 900px
   =========================================================
   Qui la promessa cambia, ed e' una scelta: sette card su uno schermo di
   telefono, tutte visibili insieme, sarebbero sette francobolli illeggibili.
   Sotto i 900px la pagina torna una pagina normale che scorre, con le card
   a due colonne — la stessa resa della sezione servizi della home su mobile.

   Lo slider si SCIOGLIE invece di essere nascosto: la pista diventa un
   blocco, le pagine si impilano una sotto l'altra e le card si dispongono a
   due colonne. Cosi' il markup resta uno solo — niente sette card scritte
   due volte nell'HTML come fa la home, che paga quel doppione in peso e in
   contenuto duplicato per i motori.
   ========================================================= */

@media (max-width: 900px) {
    .legaless-servizi-page {
        --lss-gap: 0.8rem;
        /* IL TITOLO SI FERMA APPENA SOTTO L'HEADER, non a occhio.
           --lss-header lo scrive il JS misurando l'header vero
           (misuraHeader()), perche' su telefono la sua altezza cambia col
           logo e col menu e un valore in rem sbaglia sempre di poco.
           I 12px sono gli stessi che la home usa in "Inizia ora" per
           portare il titolo della sezione a filo dell'header.
           Il ripiego 4.2rem vale solo se il JS non parte. */
        --lss-cima: calc(var(--lss-header, 4.2rem) + 12px);
    }

    .legaless-servizi-page .lss-scena {
        height: auto;
        min-height: 100dvh;
        justify-content: flex-start;
        overflow: visible;
        padding: var(--lss-cima) 0.9rem 2.5rem;
        gap: 1.2rem;
    }

    /* Misure copiate da .fdm-feature h2 e .fdm-feature p della home,
       con i pesi chiesti il 16/08: titolo bold, sottotitolo semibold. */
    .legaless-servizi-page .lss-titolo {
        font-size: 1.9rem;
        line-height: 1.1;
        font-weight: 700 !important;
        text-wrap: balance;
    }

    .legaless-servizi-page .lss-sottotitolo {
        margin: 0.8rem auto 0 !important;
        max-width: 34ch;
        font-size: 0.98rem;
        line-height: 1.55;
        font-weight: 600 !important;
    }

    /* Su telefono il titolo e' quello della home mobile. Il testo per lo
       schermo largo resta nell'HTML: e' una sostituzione di etichetta, non
       contenuto costruito dal JS. */
    .legaless-servizi-page .lss-titolo__ampio { display: none; }
    .legaless-servizi-page .lss-titolo__stretto { display: inline; }

    .legaless-servizi-page .lss-slider {
        flex: 0 0 auto;
        display: block;
        width: 100%;
        max-width: 560px;
        /* Lo stesso stacco di .fdm-mini-carousel dalla sua intestazione. */
        margin-top: 1.4rem;
    }

    .legaless-servizi-page .lss-slider__vista { overflow: visible; }

    /* transform:none con !important: il JS non tocca la pista sotto i 900px,
       ma se un domani lo facesse, qui la pagina resta a posto comunque. */
    .legaless-servizi-page .lss-slider__pista {
        display: block;
        height: auto;
        transform: none !important;
        transition: none;
    }

    /* Da flex-wrap a griglia a due colonne: e' la resa che la home ha su
       mobile (.fdm-mini-carousel), qui ottenuta senza scrivere le card una
       seconda volta nell'HTML. */
    .legaless-servizi-page .lss-pagina {
        min-width: 0;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        margin-bottom: var(--lss-gap);
    }

    /* Con un numero dispari di card l'ultima si prende tutta la riga e si
       centra, invece di restare appoggiata a sinistra. */
    .legaless-servizi-page .lss-pagina > .lss-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - (var(--lss-gap) / 2));
    }

    /* flex e max-width vanno annullati con !important: la regola base della
       card li mette a un terzo di riga per la griglia desktop, e dentro due
       colonne quel max-width schiaccerebbe le card. E' la stessa nota che
       hero-new.css porta sulla sua griglia mobile. */
    .legaless-servizi-page .lss-card {
        flex: none !important;
        max-width: none !important;
        width: 100%;
        height: 250px;
        border-radius: 1.05rem;
    }

    .legaless-servizi-page .lss-card__apri { gap: 0.6rem; padding: 1rem 0.75rem; }
    .legaless-servizi-page .lss-card__icona { width: 68px; height: 68px; }
    .legaless-servizi-page .lss-card__titolo { font-size: 1.04rem; }
    .legaless-servizi-page .lss-card__testo { font-size: 0.82rem; line-height: 1.38; }

    .legaless-servizi-page .lss-slider__freccia,
    .legaless-servizi-page .lss-punti { display: none !important; }

    /* ---------------------------------------------------------------
       RETROILLUMINAZIONE E TOCCO — copiato da hero-new.css, righe
       2173-2250 (blocco mobile), con lss- al posto di lgh-.
       ---------------------------------------------------------------
       ⚠️ Qui il transform C'E', a differenza del desktop, e non e' una
       svista: su mobile lo slider e' sciolto e .lss-slider__vista e'
       overflow:visible, quindi la card che cresce non viene tagliata da
       nessun bordo. Sul desktop invece la vista ritaglia, ed e' il motivo
       per cui li' l'hover non muove niente.

       Dalla home, il perche' dei due stati insieme:
         :active dura quanto il dito resta giu' — su un tocco normale sono
         60-80ms, meno della transizione, quindi l'effetto partiva e veniva
         annullato prima di arrivare a meta'. E iOS Safari :active non lo
         applica affatto se l'elemento non ha un gestore touch. Da qui la
         classe .lss-toccata, che il JS mette al touchstart e toglie dopo
         260ms. */
    @media (hover: hover) {
        .legaless-servizi-page .lss-pagina .lss-card:hover {
            border-color: rgba(2, 177, 174, 0.95) !important;
            box-shadow:
                0 0 0 2px rgba(2, 177, 174, 0.95),
                0 0 0 7px rgba(2, 177, 174, 0.16),
                0 14px 30px rgba(6, 12, 22, 0.22) !important;
        }
    }

    /* ⚠️ IL SELETTORE PORTA .lss-pagina, E NON E' RIDONDANTE.
       Senza, vale (0,3,0) e PERDE contro
       `.lss-pagina.is-sfocato .lss-card.is-attiva`, che vale (0,4,0) e
       impone `transform: scale(1) !important` quando si apre una scheda.
       Al tocco la scheda si apre entro ~100ms: l'effetto partiva e veniva
       spento subito, ed e' il motivo per cui su telefono sembrava non
       esserci. Sulla home il selettore ha in mezzo .fdm-mini-carousel e
       arriva a (0,4,0) da solo: qui va scritto. */
    .legaless-servizi-page .lss-pagina .lss-card:active,
    .legaless-servizi-page .lss-pagina .lss-card.lss-toccata {
        transform: scale(1.055) !important;
        border-color: rgba(2, 177, 174, 1) !important;
        background: #ffffff !important;
        box-shadow:
            0 0 0 3px rgba(2, 177, 174, 1),
            0 0 0 12px rgba(2, 177, 174, 0.22),
            0 18px 38px rgba(6, 12, 22, 0.30) !important;
        z-index: 3;
    }

    /* L'icona cresce con la card: senza, al 5.5% di zoom sembra che si
       stacchi dal riquadro. */
    .legaless-servizi-page .lss-pagina .lss-card:active .lss-card__icona,
    .legaless-servizi-page .lss-pagina .lss-card.lss-toccata .lss-card__icona {
        background: rgba(2, 177, 174, 0.22) !important;
        transform: scale(1.06);
    }

    /* Acceso in fretta, spento con calma: e' quello che fa leggere il tocco
       come una risposta e non come uno sfarfallio.
       ⚠️ opacity e filter DEVONO restare in questo elenco: sono quelle con
       cui .is-sfocato sfuma le altre card quando se ne apre una. Dichiarando
       transition con !important senza di loro, quella dissolvenza
       diventerebbe uno scatto. */
    .legaless-servizi-page .lss-card {
        transition:
            opacity 280ms ease,
            filter 280ms ease,
            box-shadow 260ms ease,
            border-color 260ms ease,
            background 260ms ease,
            transform 260ms ease !important;
    }

    .legaless-servizi-page .lss-pagina .lss-card:active,
    .legaless-servizi-page .lss-pagina .lss-card.lss-toccata {
        transition:
            box-shadow 110ms ease-out,
            border-color 110ms ease-out,
            background 110ms ease-out,
            transform 110ms ease-out !important;
    }

    /* La scheda su mobile sale dal basso, come sulla home. */
    .legaless-servizi-page .lss-scheda {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        max-height: 90svh;
        border-radius: 1.4rem 1.4rem 0 0;
        transform: translate(0, 100%);
    }

    .legaless-servizi-page .lss-scheda.is-aperto { transform: translate(0, 0); }
}

@media (max-width: 400px) {
    .legaless-servizi-page .lss-card { height: 238px; }
    .legaless-servizi-page .lss-card__icona { width: 62px; height: 62px; }
    .legaless-servizi-page .lss-card__titolo { font-size: 0.98rem; }
    .legaless-servizi-page .lss-card__testo { font-size: 0.78rem; }
}

/* =========================================================
   10. MOVIMENTO RIDOTTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .legaless-servizi-page .lss-card,
    .legaless-servizi-page .lss-scheda,
    .legaless-servizi-page .lss-velo,
    .legaless-servizi-page .lss-slider__pista,
    .legaless-servizi-page .lss-slider__freccia,
    .legaless-servizi-page .lss-diretta__bottone,
    .legaless-servizi-page .lss-cta {
        transition: none !important;
        animation: none !important;
    }
}