/* =========================================================
   LEGALESS HERO — slider servizi 3x2, schede, pacchetti
   Revisione 14/08/2026
   =========================================================

   LE DUE CORREZIONI CHE SPIEGANO SEI DIFETTI SEGNALATI
   ----------------------------------------------------
   1. Le VARIABILI stanno su .legaless-hero-new-page, non piu' su
      #legaless-hero-new-root. Le schede vivono in .lgh-schede, che di quel
      root NON e' discendente: le variabili non ereditavano, quindi dentro le
      schede var(--lgh-accent) non risolveva. Il pulsante CTA aveva fondo
      trasparente e testo bianco -> bianco su bianco, illeggibile.
   2. .lgh-scheda[hidden] ora ha display:none !important. Prima la classe
      dichiarava display:flex, che BATTE l'attributo [hidden] (che vale
      display:none, ma dal foglio del browser, con specificita' piu' bassa).
      Risultato: tutte e 7 le schede renderizzate in permanenza, position:fixed,
      opacity:0, senza pointer-events:none. Invisibili ma stese sopra la pagina,
      si mangiavano i clic al centro -> card centrali non cliccabili, X e
      "torna indietro" inerti, rotella che non scorreva, popup che non si
      aprivano su mobile.
   ========================================================= */

/* =========================================================
   1. VARIABILI — sulla PAGINA, cosi' arrivano ovunque
   ========================================================= */

.legaless-hero-new-page {
    /* Telefono: -15% rispetto alla revisione precedente (era 78vh/46vw/800px). */
    /* La proporzione del telefono e' quella del PNG (429x882 = 1:2.06,
       misurata sul file) e non si puo' cambiare senza deformarlo. Qui si
       riduce l'INGOMBRO del 10% rispetto al giro precedente. */
    --lgh-phone-h: clamp(498px, min(74vh, 44vw), 765px);
    --lgh-phone-w: calc(var(--lgh-phone-h) / 2);

    /* Testo dell'hero: puo' andare a capo, quindi puo' essere GRANDE senza
       rischiare di toccare il mockup. Il limite lo da' --lgh-text-max. */
    --lgh-text-left: clamp(2rem, 5.5vw, 5rem);
    --lgh-text-max: calc(50vw - (var(--lgh-phone-w) / 2) - var(--lgh-text-left) - 2rem);
    --lgh-h1: clamp(2.6rem, 4.4vw, 5.33rem);

    /* Palette */
    --lgh-accent: #02b1ae;
    --lgh-accent-scuro: #017e7c;
    --lgh-navy: #0f1826;
    --lgh-navy-2: #142433;
    --lgh-navy-3: #1e3a5f;
    --lgh-scuro: #384048;
    --lgh-scuro-soft: #57616b;
    --lgh-card-bg: #eef0f3;
    --lgh-chiaro: #e9ecef;
    --lgh-chiaro-soft: #9fb0c3;

    /* Slider */
    --lgh-gap: clamp(0.7rem, 1.1vw, 1.1rem);
    --lgh-card-h: clamp(212px, 27vh, 290px);
}

/* =========================================================
   2. BASE PAGINA / RESET AVADA — invariato
   ========================================================= */

.legaless-hero-new-page,
.legaless-hero-new-page #content,
.legaless-hero-new-page #legaless-hero-new-root {
    width: 100%;
    max-width: 100%;
}

body.page-template-template-template-hero-new-php,
body.page-template-template-hero-new,
body.page-template-template-template-hero-new {
    background: transparent !important;
}

/* Avada aggiunge padding-top al #wrapper pari all'altezza dell'header: e' la
   riga di sfondo che restava in cima e impediva alle card di prendersi tutto
   lo schermo. L'header e' trasparente e fixed, quindi puo' tranquillamente
   sovrapporsi al contenuto. */
body.page-template-template-template-hero-new-php #wrapper,
body.page-template-template-hero-new #wrapper,
body.page-template-template-template-hero-new #wrapper,
body.page-template-template-template-hero-new-php #main,
body.page-template-template-hero-new #main,
body.page-template-template-template-hero-new #main,
body.page-template-template-template-hero-new-php #sliders-container,
body.page-template-template-hero-new #sliders-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}

body.page-template-template-template-hero-new-php::before,
body.page-template-template-hero-new::before,
body.page-template-template-template-hero-new::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image:
        linear-gradient(100deg,
            rgba(15, 24, 38, 0.92) 0%,
            rgba(15, 24, 38, 0.70) 28%,
            rgba(15, 24, 38, 0.25) 50%,
            rgba(15, 24, 38, 0.00) 68%),
        url("https://legaless.it/wp-content/uploads/2026/06/HERO-BG-DKT.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right top;
    background-size: cover, cover;
    transform: translateZ(0);
    /* NIENTE zoom infinito: un'immagine a schermo pieno che si scala per
       sempre tiene occupato il compositore anche quando nessuno la guarda,
       e su mobile si sente. Al suo posto una dissolvenza, che gira una volta.

       La foto entra in dissolvenza al caricamento e ogni volta che si torna
       alla schermata iniziale: prima ricompariva di scatto risalendo. */
    opacity: 0;
    transition: opacity 0.45s ease-out;
}

body.lgh-sfondo-pronto.page-template-template-template-hero-new-php::before,
body.lgh-sfondo-pronto.page-template-template-hero-new::before,
body.lgh-sfondo-pronto.page-template-template-template-hero-new::before {
    opacity: 1;
}

/* La foto resta accesa anche in fase 1: e' il velo navy a coprirla, e ora
   e' lui a sfumare. Spegnerla significava farla ripartire da zero risalendo,
   sommando due stacchi. */

body.page-template-template-template-hero-new-php .legaless-hero-new-page,
body.page-template-template-hero-new .legaless-hero-new-page,
body.page-template-template-template-hero-new .legaless-hero-new-page {
    margin-top: 0 !important;
    top: 0 !important;
}

body.page-template-template-template-hero-new-php #wrapper,
body.page-template-template-hero-new #wrapper,
body.page-template-template-template-hero-new #wrapper,
body.page-template-template-template-hero-new-php #main,
body.page-template-template-hero-new #main,
body.page-template-template-template-hero-new #main,
body.page-template-template-template-hero-new-php #content,
body.page-template-template-hero-new #content,
body.page-template-template-template-hero-new #content,
body.page-template-template-template-hero-new-php #legaless-hero-new-root,
body.page-template-template-hero-new #legaless-hero-new-root,
body.page-template-template-template-hero-new #legaless-hero-new-root,
body.page-template-template-template-hero-new-php #morph-section,
body.page-template-template-hero-new #morph-section,
body.page-template-template-template-hero-new #morph-section {
    background: transparent !important;
    border-top: 0 !important;
}

/* Header — invariato */
body.page-template-template-template-hero-new-php .fusion-header-wrapper,
body.page-template-template-template-hero-new-php .fusion-header,
body.page-template-template-template-hero-new-php .fusion-secondary-header,
body.page-template-template-hero-new .fusion-header-wrapper,
body.page-template-template-hero-new .fusion-header,
body.page-template-template-hero-new .fusion-secondary-header,
body.page-template-template-template-hero-new .fusion-header-wrapper,
body.page-template-template-template-hero-new .fusion-header,
body.page-template-template-template-hero-new .fusion-secondary-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10010 !important;
}

body.hero-lock-active .fusion-header-wrapper,
body.hero-lock-active .fusion-header,
body.hero-lock-active .fusion-secondary-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

body.hero-lock-active { overflow-x: hidden; }

/* RETE DI SICUREZZA sulla striscia in cima.
   In fase 1 si stende un fondo navy FISSO dietro tutto: se per qualunque
   ragione la sezione non arrivasse a filo dello schermo (header montato
   tardi, dvh diverso da vh, padding di Avada), quello che si vede e' il
   colore della scena, mai la foto di sfondo. Costa una regola. */
body[class*="page-template-template-hero-new"]::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--lgh-navy, #0f1826);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.lgh-fase1::after { opacity: 1; }

/* La cornice del telefono e' larga il 256% del suo contenitore (il PNG e'
   quadrato e il telefono ne occupa il 39%). Su mobile quella larghezza
   sfonda il viewport: senza questo, la pagina scorrerebbe lateralmente.
   Sul desktop non serve — #pin-container ha gia' overflow:hidden — ma
   metterlo qui copre entrambi i casi con una riga sola. */
body.page-template-template-template-hero-new-php,
body.page-template-template-hero-new,
body.page-template-template-template-hero-new {
    overflow-x: hidden;
}

body.page-template-template-template-hero-new-php .fusion-is-sticky .fusion-header,
body.page-template-template-template-hero-new-php .fusion-is-sticky .fusion-header-wrapper,
body.page-template-template-template-hero-new-php .fusion-sticky-header-wrapper,
body.page-template-template-hero-new .fusion-is-sticky .fusion-header,
body.page-template-template-hero-new .fusion-is-sticky .fusion-header-wrapper,
body.page-template-template-hero-new .fusion-sticky-header-wrapper,
body.page-template-template-template-hero-new .fusion-is-sticky .fusion-header,
body.page-template-template-template-hero-new .fusion-is-sticky .fusion-header-wrapper,
body.page-template-template-template-hero-new .fusion-sticky-header-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Breakout a tutta larghezza */
.legaless-hero-new-page {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
}

.legaless-hero-new-page #content,
.legaless-hero-new-page #legaless-hero-new-root,
.legaless-hero-new-page #morph-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

.legaless-hero-new-page #content,
.legaless-hero-new-page .post-content { margin: 0; padding: 0; }

/* =========================================================
   3. TIPOGRAFIA
   =========================================================
   RIFATTA IL 14/08 (sera), e il motivo va capito una volta sola.

   La regola era

       .legaless-hero-new-page * { font-family: Montserrat !important }

   e su alcuni testi — il titolo per primo — non vinceva. Non e' un
   problema di !important: e' di SPECIFICITA'. Quel selettore vale
   (0,1,0): una classe piu' l'universale, che non conta nulla. Avada
   genera la sua tipografia con selettori come `.fusion-body h1`, che
   vale (0,1,1) — piu' alto. Fra due dichiarazioni !important vince la
   piu' specifica, quindi vinceva Avada, e su un h1 si vedeva.

   Rimedio: si raddoppia la classe. `.legaless-hero-new-page` scritta
   due volte e' lo STESSO elemento (un elemento ha quella classe o non
   ce l'ha), quindi non cambia cosa viene selezionato — cambia solo il
   punteggio, che sale a (0,2,0) per l'universale e (0,2,1) sugli
   elementi nominati. Da li' in su Avada non arriva.

   Gli elementi si nominano lo stesso, uno per uno, anche se
   l'universale li coprirebbe: e' quello che regge se un domani un
   plugin tira fuori un selettore ancora piu' specifico.

   ⚠️ Non ho potuto LEGGERE il CSS che Avada genera: sta in
   uploads/fusion-styles/, fuori dal perimetro della rotta `file`. Quindi
   questa e' la spiegazione piu' probabile, non una misura. Se dopo
   questo giro un testo resta fuori, si guarda in "Ispeziona" quale
   regola vince davvero e si aggiunge quel selettore qui.
   ========================================================= */

/* ⚠️ NIENTE ::before / ::after in questo elenco, mai. Le icone a font
   (Font Awesome, le fusion-icon di Avada) sono esattamente pseudo-elementi
   con un font-family proprio: forzarci Montserrat sopra non le rende
   Montserrat, le trasforma in un carattere a caso. E non servirebbe
   comunque — uno pseudo-elemento eredita il font dal suo elemento, che
   l'universale qui sotto copre gia'. */
.legaless-hero-new-page.legaless-hero-new-page,
.legaless-hero-new-page.legaless-hero-new-page * {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}

/* Gli stessi caratteri, nominando gli elementi: (0,2,1). E' questa la
   riga che serve contro `.fusion-body h1` e simili. */
.legaless-hero-new-page.legaless-hero-new-page h1,
.legaless-hero-new-page.legaless-hero-new-page h2,
.legaless-hero-new-page.legaless-hero-new-page h3,
.legaless-hero-new-page.legaless-hero-new-page h4,
.legaless-hero-new-page.legaless-hero-new-page h5,
.legaless-hero-new-page.legaless-hero-new-page h6,
.legaless-hero-new-page.legaless-hero-new-page p,
.legaless-hero-new-page.legaless-hero-new-page a,
.legaless-hero-new-page.legaless-hero-new-page li,
.legaless-hero-new-page.legaless-hero-new-page span,
.legaless-hero-new-page.legaless-hero-new-page strong,
.legaless-hero-new-page.legaless-hero-new-page em,
.legaless-hero-new-page.legaless-hero-new-page button,
.legaless-hero-new-page.legaless-hero-new-page input,
.legaless-hero-new-page.legaless-hero-new-page select,
.legaless-hero-new-page.legaless-hero-new-page textarea,
.legaless-hero-new-page.legaless-hero-new-page label {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}

.legaless-hero-new-page #legaless-hero-new-root {
    position: relative;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   4. SCENA — sezione, contenitore, telefono
   ========================================================= */

.legaless-hero-new-page #morph-section {
    position: relative;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

.legaless-hero-new-page #pin-container {
    position: relative;
    min-height: 100dvh !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: transparent !important;
}

.legaless-hero-new-page #pin-container::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70vh;
    height: 70vh;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle,
        rgba(45, 78, 120, 0.55) 0%,
        rgba(35, 60, 95, 0.28) 38%,
        rgba(30, 58, 95, 0.00) 70%);
    filter: blur(8px);
    animation: heroGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes heroGlowPulse {
    from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.97); }
    to   { opacity: 0.85; transform: translate(-50%, -50%) scale(1.03); }
}

/* ---------- Testo dell'hero ----------
   Il titolo PUO' andare a capo (niente nowrap) ed e' limitato a
   --lgh-text-max: cosi' puo' essere molto piu' grande di prima e resta
   comunque impossibile che tocchi il mockup, a qualunque risoluzione. */

.legaless-hero-new-page #hero-text {
    position: relative;
    z-index: 20;
    width: 100%;
    padding: 0 1.5rem;
    text-align: left;
}

.legaless-hero-new-page #hero-text h1 {
    margin: 0 0 1.1rem;
    font-family: "Montserrat", sans-serif !important;
    font-size: var(--lgh-h1) !important;
    line-height: 1.02;
    /* UN SOLO PESO per tutto il titolo, il 300 che c'era prima. Le due righe
       si distinguono per COLORE, non per peso: mescolare 400 e 700 faceva
       sembrare due caratteri diversi. */
    font-weight: 300 !important;
    letter-spacing: -0.015em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-wrap: balance;
}

.legaless-hero-new-page #hero-text h1 span,
.legaless-hero-new-page .lgh-h1-riga {
    display: block;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 300 !important;
}

.legaless-hero-new-page .lgh-h1-accent {
    color: var(--lgh-accent) !important;
    -webkit-text-fill-color: var(--lgh-accent) !important;
}

.legaless-hero-new-page .hero-subtitle {
    margin: 0;
    font-family: "Montserrat", sans-serif !important;
    font-size: clamp(1rem, calc(var(--lgh-h1) * 0.3), 1.5rem) !important;
    line-height: 1.45;
    max-width: min(var(--lgh-text-max), 32ch);
    color: rgba(255, 255, 255, 0.92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
}

.legaless-hero-new-page .hero-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 1rem 1.9rem;
    border-radius: 9999px;
    background: var(--lgh-accent);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.02rem;
    font-weight: 700 !important;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(2, 177, 174, 0.22);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.legaless-hero-new-page .hero-cta-button:hover,
.legaless-hero-new-page .hero-cta-button:focus-visible {
    background: var(--lgh-accent-scuro);
    transform: translateY(-2px);
}

/* ---------- Telefono ---------- */

.legaless-hero-new-page #phone-wrapper {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translateX(-50%);
    width: var(--lgh-phone-w);
    height: var(--lgh-phone-h);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

/* La superficie che si espande. opacity 0 a riposo: e' la correzione del
   contorno che si vedeva dietro il mockup. La accende GSAP, ma solo DOPO
   che il mockup e' sparito. */
.legaless-hero-new-page #morph-background {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 10;
    border-radius: 4rem;
    border: 0 !important;
    background-color: var(--lgh-navy);
    background-clip: padding-box;
    box-shadow: none !important;
    opacity: 0;
    overflow: hidden !important;
}

.legaless-hero-new-page #persistent-card-image {
    position: absolute;
    inset: 0;
    z-index: 50;
    overflow: visible;
    background: transparent;
    pointer-events: none;
}

/* Il telefono desktop eredita ESATTAMENTE la posizione che aveva la vecchia
   immagine: stesso bottom, stessa scala, stessa origine. Cosi' sostituire il
   mockup statico con quello animato non sposta niente di un pixel. */
.legaless-hero-new-page #persistent-card-image .lgh-telefono {
    position: absolute;
    left: 50%;
    /* -22%: la cornice e' quadrata e il telefono ne occupa la fascia centrale,
       questo lo riporta dov'era il vecchio mockup. */
    bottom: -22%;
    width: var(--lgh-frame-scala);
    transform: translateX(-50%);
    transform-origin: center bottom;
}

/* =========================================================
   4-bis. LO SCHERMO ANIMATO
   =========================================================

   >>> CALIBRAZIONE — SI RITOCCA QUI, E VA VERIFICATA ONLINE <<<
   Da locale non si vede come la finestra dello schermo cade dentro il PNG
   della cornice: questi valori sono ragionevoli, NON misurati. Se la UI
   sborda o lascia un bordo, si cambiano queste quattro righe e basta.

   --lgh-screen-top     quanto scende lo schermo dal bordo alto della cornice
   --lgh-screen-bottom  quanto sale dal bordo basso
   --lgh-screen-side    rientro laterale per lato
   --lgh-screen-radius  raggio degli angoli dello schermo
   Tutte in percentuale sulla cornice: restano giuste a ogni dimensione.
   ========================================================= */

/* MISURATI SULL'IMMAGINE VERA, non stimati.
   MOCKUP-MOBILE-2.png e' QUADRATA (1080x1080) e il telefono ne occupa solo
   il 39% in larghezza, centrato. I valori della prima stesura erano calcolati
   come se la cornice avesse la forma di un telefono: da li' il disordine. */
.legaless-hero-new-page .lgh-telefono {
    /* RIMISURATI IL 14/08 leggendo i pixel del PNG vero (1080x1080, canale
       alfa, soglia 128) — non a occhio:
         cornice opaca  x 328..751   y  94..971   (424 x 878)
         schermo (foro) x 344..734   y 108..957   (391 x 850)
         raggio angoli  ~45px

       >>> DENTRO IL FORO C'E' GIA' UN'ISOLA DINAMICA DISEGNATA <<<
         isola opaca    x 485..594   y 121..151
         = dal 36.1% al 64.2% della larghezza schermo,
           dall'1.5% al 5.1% dell'altezza schermo.
       E' opaca: qualunque cosa dell'interfaccia finisca li' sotto sparisce.
       E' il motivo del padding alto della barra dell'app, e non si abbassa.

       Percentuali sulla cornice (1080):
         alto     108/1080        = 10.000%
         basso   (1080-958)/1080  = 11.296%
         sinistra 344/1080        = 31.852%
         destra  (1080-735)/1080  = 31.944%
       I due lati differiscono di 0.09% perche' il telefono nel PNG e' fuori
       asse di 2px. Si usa 31.95% per entrambi: mezzo pixel di margine DENTRO
       la cornice non si vede, mezzo pixel di schermo SOPRA la cornice si
       vedrebbe come una scheggia chiara appoggiata sul bordo.

       ⚠️ --lgh-frame-scala 251.2% derivava da un 39.81% che la misura non
       conferma: il telefono occupa il 39.26% della cornice, quindi al 251.2%
       viene largo il 98.6% di .fdm-phone-mockup, non il 100%. E' un 1.4% che
       nessuno vede e non si tocca — ma sta scritto qui, cosi' chi rifa' il
       conto non lo riscopre come se fosse un difetto nuovo. */
    --lgh-screen-top: 10.00%;
    --lgh-screen-bottom: 11.30%;
    --lgh-screen-side: 31.95%;
    /* Due valori: 45px su 391 di larghezza e su 850 di altezza. Con un solo
       valore percentuale gli angoli verrebbero ellittici, non tondi. */
    --lgh-screen-radius: 11.5% / 5.3%;
    --lgh-frame-scala: 251.2%;

    position: relative;
    display: block;
    width: var(--lgh-frame-scala);
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
    user-select: none;
}

/* La cornice sta SOPRA e detta la dimensione del blocco. */
.legaless-hero-new-page .lgh-cornice {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* La finestra dello schermo: ritaglia tutto quello che c'e' dentro.
   container-type: la UI si dimensiona in cqi, cioe' in percentuale della
   larghezza dello schermo — una sola regola vale a 394px e a 246px. */
.legaless-hero-new-page .lgh-schermo {
    position: absolute;
    z-index: 1;
    top: var(--lgh-screen-top);
    bottom: var(--lgh-screen-bottom);
    left: var(--lgh-screen-side);
    right: var(--lgh-screen-side);
    border-radius: var(--lgh-screen-radius);
    overflow: hidden;
    isolation: isolate;
    /* Schermo CHIARO: il testo scuro su fondo chiaro si legge molto meglio
       dentro un telefono piccolo di quanto facesse il bianco su navy. */
    background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
    container-type: inline-size;
    contain: paint;
}

.legaless-hero-new-page .lgh-app {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* Tutto quello che sta dentro e' in em: cambiando questa riga scala
       l'intera interfaccia in modo proporzionato.
       Alzato da 4.6cqi a 6.4cqi: i testi erano troppo piccoli per leggersi. */
    /* Ripiego per i browser senza unita' di container: senza, la clamp
       verrebbe scartata e il testo erediterebbe una misura enorme. */
    font-size: 15px;
    font-size: clamp(11px, 8.2cqi, 26px);
    line-height: 1.3;
    color: #384048;
}

.legaless-hero-new-page .lgh-app__barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Il notch occupa dall'1.5% al 5.1% dell'altezza schermo: il logo deve
       cominciare sotto. 2.9em lo tiene libero a ogni dimensione, con un
       margine anche quando il telefono e' piccolo. */
    justify-content: flex-start;
    padding: 2.9em 1em 0.6em;
}

.legaless-hero-new-page .lgh-app__logo {
    height: 1.1em;
    width: auto;
    display: block;
}

.legaless-hero-new-page .lgh-app__marchio {
    font-size: 0.95em;
    font-weight: 700 !important;
    color: #0f1826 !important;
    -webkit-text-fill-color: #0f1826 !important;
}

.legaless-hero-new-page .lgh-app__avatar {
    width: 1.7em;
    height: 1.7em;
    border-radius: 999px;
    background: linear-gradient(140deg, #02b1ae 0%, #1e3a5f 100%);
    box-shadow: 0 0 0 0.14em rgba(255, 255, 255, 0.12);
}

.legaless-hero-new-page .lgh-stati {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

/* Gli stati stanno ANCORATI IN ALTO, non centrati: la parte bassa del
   telefono esce dallo schermo con la pagina al 100%, e al centro il
   contenuto veniva tagliato. */

/* Ogni stato e' una schermata sovrapposta: entra e esce in dissolvenza.
   Si animano SOLO opacity e transform. */
.legaless-hero-new-page .lgh-stato {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7em;
    margin: 0 0.9em;
    padding: 1em 0.9em;
    border-radius: 1.1em;
    background: #ffffff;
    border: 1px solid rgba(15, 24, 38, 0.09);
    box-shadow: 0 0.8em 1.8em rgba(15, 24, 38, 0.10);
    opacity: 0;
    animation: lghStato 12s infinite both;
}

.legaless-hero-new-page .lgh-stato:nth-child(1) { animation-delay: 0s; }
.legaless-hero-new-page .lgh-stato:nth-child(2) { animation-delay: 3s; }
.legaless-hero-new-page .lgh-stato:nth-child(3) { animation-delay: 6s; }
.legaless-hero-new-page .lgh-stato:nth-child(4) { animation-delay: 9s; }

/* 12s totali, 4 stati da 3s: 0.6s per entrare, ~1.9s fermo, 0.5s per uscire. */
@keyframes lghStato {
    0%              { opacity: 0; transform: translateY(0.7em) scale(0.97); }
    5%              { opacity: 1; transform: translateY(0) scale(1); }
    21%             { opacity: 1; transform: translateY(0) scale(1); }
    25%, 100%       { opacity: 0; transform: translateY(-0.5em) scale(0.98); }
}

.legaless-hero-new-page .lgh-stato__icona {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 0.85em;
    background: rgba(2, 177, 174, 0.16);
    color: #02b1ae;
}

.legaless-hero-new-page .lgh-svg { width: 1.4em; height: 1.4em; display: block; }

.legaless-hero-new-page .lgh-badge {
    position: absolute;
    top: -0.35em;
    right: -0.35em;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.3em;
    border-radius: 999px;
    background: #e5484d;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.68em;
    font-weight: 700 !important;
    line-height: 1.35em;
    text-align: center;
    animation: lghBadge 2.4s ease-in-out infinite;
}

@keyframes lghBadge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.legaless-hero-new-page .lgh-stato__testo {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700 !important;
    line-height: 1.32;
    color: #0f1826 !important;
    -webkit-text-fill-color: #0f1826 !important;
}

.legaless-hero-new-page .lgh-riga {
    width: 100%;
    height: 0.55em;
    border-radius: 999px;
    background: rgba(15, 24, 38, 0.10);
}

.legaless-hero-new-page .lgh-riga--corta { width: 62%; }

.legaless-hero-new-page .lgh-pulsante {
    width: 100%;
    padding: 0.8em 0;
    border-radius: 999px;
    background: #02b1ae;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.9em;
    font-weight: 700 !important;
    text-align: center;
}

/* La firma che si traccia: si anima la larghezza di un tratto, non un path. */
.legaless-hero-new-page .lgh-firma {
    width: 100%;
    height: 2.2em;
    border-radius: 0.6em;
    background: rgba(15, 24, 38, 0.04);
    border: 1px dashed rgba(15, 24, 38, 0.22);
    display: flex;
    align-items: center;
    padding: 0 0.7em;
    overflow: hidden;
}

.legaless-hero-new-page .lgh-firma__tratto {
    display: block;
    height: 0.16em;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: 999px;
    background: linear-gradient(90deg, #02b1ae, #7bdcda);
    animation: lghFirma 12s infinite both;
    animation-delay: 6.3s;
}

/* Il tratto resta disegnato fino a fine ciclo e torna a zero all'inizio del
   successivo, quando questo stato non e' a schermo: il "riavvolgimento" non
   si vede mai. */
@keyframes lghFirma {
    0%, 2%    { transform: scaleX(0); }
    14%, 100% { transform: scaleX(1); }
}

.legaless-hero-new-page .lgh-tappe {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: grid;
    gap: 0.45em;
}

.legaless-hero-new-page .lgh-tappa {
    display: flex;
    align-items: center;
    gap: 0.55em;
    font-size: 0.86em;
    font-weight: 600 !important;
    color: #57616b !important;
    -webkit-text-fill-color: #57616b !important;
    opacity: 0.4;
    animation: lghTappa 12s infinite both;
}

.legaless-hero-new-page .lgh-tappa:nth-child(1) { animation-delay: 9.3s; }
.legaless-hero-new-page .lgh-tappa:nth-child(2) { animation-delay: 9.7s; }
.legaless-hero-new-page .lgh-tappa:nth-child(3) { animation-delay: 10.1s; }

@keyframes lghTappa {
    0%, 1%    { opacity: 0.45; }
    4%, 21%   { opacity: 1; }
    25%, 100% { opacity: 0.45; }
}

.legaless-hero-new-page .lgh-tappa__punto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(2, 177, 174, 0.2);
    color: #02b1ae;
}

.legaless-hero-new-page .lgh-tappa__punto .lgh-svg { width: 0.8em; height: 0.8em; }

/* Fuori schermo l'animazione si ferma: batteria e CPU. Lo decide il JS. */
.legaless-hero-new-page .lgh-telefono.lgh-in-pausa .lgh-stato,
.legaless-hero-new-page .lgh-telefono.lgh-in-pausa .lgh-badge,
.legaless-hero-new-page .lgh-telefono.lgh-in-pausa .lgh-firma__tratto,
.legaless-hero-new-page .lgh-telefono.lgh-in-pausa .lgh-tappa {
    animation-play-state: paused;
}

.legaless-hero-new-page #legaless-hero-new-root #phone-wrapper [class*="notch"],
.legaless-hero-new-page #legaless-hero-new-root #phone-wrapper [class*="dynamic-island"],
.legaless-hero-new-page #legaless-hero-new-root #phone-wrapper *[data-phone-refuse="time-hidden"] {
    display: none !important;
}

/* =========================================================
   5. LO SLIDER DEI SERVIZI — pagine da 3x2
   ========================================================= */

.legaless-hero-new-page #final-grid {
    position: absolute !important;
    inset: 0 !important;
    z-index: 30;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.8rem, 2.2vh, 1.7rem);
    padding: clamp(4.5rem, 11vh, 7rem) clamp(0.8rem, 2.5vw, 2.5rem) clamp(1.2rem, 3vh, 2.5rem) !important;
    box-sizing: border-box !important;
    background: transparent !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.legaless-hero-new-page .lgh-grid-intestazione { text-align: center; flex: 0 0 auto; }

.legaless-hero-new-page .lgh-grid-titolo {
    margin: 0 0 0.4rem;
    font-size: clamp(1.6rem, 2.4vw, 2.5rem);
    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 1200px puo' spezzarsi, ed e' accettabile. */
.legaless-hero-new-page .lgh-grid-sottotitolo {
    margin: 0;
    font-size: clamp(0.98rem, 1.22vw, 1.24rem);
    line-height: 1.45;
    font-weight: 500 !important;
    white-space: nowrap;
    color: var(--lgh-chiaro-soft) !important;
    -webkit-text-fill-color: var(--lgh-chiaro-soft) !important;
}

.legaless-hero-new-page .lgh-slider {
    position: relative;
    width: 100%;
    max-width: 1180px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 auto;
    min-height: 0;
}

.legaless-hero-new-page .lgh-slider__vista {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    pointer-events: auto;
}

.legaless-hero-new-page .lgh-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: se l'ultima riga ha meno di 3 card,
   justify-content:center le mette al centro da sole. E' il punto 6.3. */
.legaless-hero-new-page .lgh-pagina {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: var(--lgh-gap);
    padding: 3px;
    box-sizing: border-box;
}

.legaless-hero-new-page .lgh-slider__freccia {
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    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;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

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

.legaless-hero-new-page .lgh-slider__freccia[hidden] { display: none !important; }

.legaless-hero-new-page .lgh-punti {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex: 0 0 auto;
    pointer-events: auto;
}

.legaless-hero-new-page .lgh-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-hero-new-page .lgh-punto.is-attivo {
    background: var(--lgh-accent);
    width: 1.6rem;
}

/* =========================================================
   6. LA CARD
   =========================================================
   Il bersaglio e' TUTTA la card: il <button> e' in posizione assoluta su
   tutto il perimetro. Prima il pulsante non copriva i bordi, quindi hover
   e clic funzionavano solo sopra testo e icona (punto 6.2).
   ========================================================= */

.legaless-hero-new-page .lgh-card {
    position: relative;
    flex: 0 0 calc((100% - (2 * var(--lgh-gap))) / 3);
    max-width: calc((100% - (2 * var(--lgh-gap))) / 3);
    height: var(--lgh-card-h);
    border-radius: 1.2rem;
    background: var(--lgh-card-bg);
    border: 1px solid rgba(17, 17, 17, 0.06);
    box-shadow: 0 10px 26px rgba(6, 12, 22, 0.18);
    overflow: hidden;
    transition: box-shadow 0.24s ease, border-color 0.24s ease;
}

.legaless-hero-new-page .lgh-grid.lgh-pronta .lgh-card,
.legaless-hero-new-page .lgh-pagina.lgh-pronta .lgh-card,
.legaless-hero-new-page .fdm-mini-carousel.lgh-pronta .lgh-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-hero-new-page .lgh-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;
    -webkit-tap-highlight-color: transparent;
}

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

/* Icona in un cerchio: piu' grande di prima e visivamente piu' pulita
   di un PNG nudo scalato (punto 6.1). */
/* Niente piu' descrizione sulla card: la spiegazione sta nella scheda che si
   apre al clic. Icona e titolo si prendono lo spazio liberato. */
.legaless-hero-new-page .lgh-card__icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(66px, 7.8vh, 90px);
    height: clamp(66px, 7.8vh, 90px);
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(2, 177, 174, 0.10);
}

.legaless-hero-new-page .lgh-card__icona { transition: background-color 0.24s ease, transform 0.24s ease; }

.legaless-hero-new-page .lgh-card__icona img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

.legaless-hero-new-page .lgh-card__testo {
    display: block;
    font-size: clamp(0.84rem, 0.95vw, 0.98rem);
    line-height: 1.45;
    font-weight: 600 !important;
    text-wrap: pretty;
    color: var(--lgh-scuro-soft) !important;
    -webkit-text-fill-color: var(--lgh-scuro-soft) !important;
}

.legaless-hero-new-page .lgh-card__titolo {
    display: block;
    font-size: clamp(1.05rem, 1.3vw, 1.34rem);
    line-height: 1.18;
    font-weight: 700 !important;
    text-wrap: balance;
    color: var(--lgh-scuro) !important;
    -webkit-text-fill-color: var(--lgh-scuro) !important;
}

/* ---------- Linea diretta sotto le card ---------- */

.legaless-hero-new-page .lgh-diretta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    pointer-events: auto;
}

.legaless-hero-new-page .lgh-diretta__testo {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 500 !important;
    color: var(--lgh-chiaro-soft) !important;
    -webkit-text-fill-color: var(--lgh-chiaro-soft) !important;
}

.legaless-hero-new-page .lgh-diretta__bottone {
    padding: 0.75rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--lgh-accent, #02b1ae);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.95rem;
    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-hero-new-page .lgh-diretta__bottone:hover,
.legaless-hero-new-page .lgh-diretta__bottone:focus-visible {
    background: #017e7c;
    transform: scale(1.06);
}

.legaless-hero-new-page .lgh-card__prezzo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: 0.5rem;   /* staccato dal testo — punto 3 mobile */
    padding: 0.26rem 0.75rem;
    border-radius: 999px;
    background: rgba(2, 177, 174, 0.12);
}

.legaless-hero-new-page .lgh-card__da {
    font-size: 0.72rem;
    font-weight: 600 !important;
    color: var(--lgh-scuro-soft) !important;
    -webkit-text-fill-color: var(--lgh-scuro-soft) !important;
}

.legaless-hero-new-page .lgh-card__cifra {
    font-size: 1rem;
    font-weight: 600 !important;
    color: var(--lgh-accent-scuro) !important;
    -webkit-text-fill-color: var(--lgh-accent-scuro) !important;
}

.legaless-hero-new-page .lgh-card__cifra--valuta { font-size: 0.8rem; }

/* Hover: zoom su tutta la card.
   Valori presi DALLA PAGINA seleziona-servizi, non inventati:
   scale(1.06) e' quello dei suoi pulsanti, il doppio anello turchese
   e' quello delle sue card (seleziona-servizi-new.css righe 1447-1453).
   z-index:2 perche' al 6% la card cresce di ~10px per lato e senza
   sollevarla passerebbe sotto le vicine. */
@media (hover: hover) {
    .legaless-hero-new-page .lgh-card:hover {
        transform: scale(1.09) translateY(-4px);
        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-hero-new-page .lgh-card:hover .lgh-card__icona {
        background: rgba(2, 177, 174, 0.20);
        transform: scale(1.06);
    }
}

.legaless-hero-new-page .lgh-card:active { transform: scale(0.985); }

/* Le altre card sfumano quando una scheda e' aperta.
   !important: GSAP lascia opacity/transform inline dopo il morph. */
.legaless-hero-new-page .lgh-pagina.is-sfocato .lgh-card,
.legaless-hero-new-page .fdm-mini-carousel.is-sfocato .lgh-card {
    opacity: 0.14 !important;
    filter: blur(2px) saturate(0.6) !important;
    transform: scale(0.965) !important;
    pointer-events: none !important;
}

.legaless-hero-new-page .lgh-pagina.is-sfocato .lgh-card.is-attiva,
.legaless-hero-new-page .fdm-mini-carousel.is-sfocato .lgh-card.is-attiva {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1) !important;
}

/* =========================================================
   7. LA SCHEDA
   ========================================================= */

/* LA CORREZIONE. [hidden] deve vincere su display:flex, altrimenti le
   schede restano stese sopra la pagina e si mangiano i clic. */
.legaless-hero-new-page .lgh-scheda[hidden],
.legaless-hero-new-page .lgh-velo[hidden] {
    display: none !important;
}

.legaless-hero-new-page .lgh-schede {
    position: relative;
    z-index: 2147483000;
}

.legaless-hero-new-page .lgh-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-hero-new-page .lgh-velo.is-aperto { opacity: 1; }

.legaless-hero-new-page .lgh-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-hero-new-page .lgh-scheda.is-aperto {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.legaless-hero-new-page .lgh-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-hero-new-page .lgh-scheda__indietro,
.legaless-hero-new-page .lgh-scheda__chiudi {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 600 !important;
    color: var(--lgh-scuro-soft) !important;
    -webkit-text-fill-color: var(--lgh-scuro-soft) !important;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.legaless-hero-new-page .lgh-scheda__indietro { font-size: 0.86rem; padding: 0.55rem 0.95rem; }
.legaless-hero-new-page .lgh-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-hero-new-page .lgh-scheda__barra button > * { pointer-events: none; }

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

.legaless-hero-new-page .lgh-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-hero-new-page .lgh-scheda__icona { width: 46px; height: 46px; object-fit: contain; display: block; margin: 0 0 0.5rem; }

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

.legaless-hero-new-page .lgh-scheda__titolo:focus { outline: none; }

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

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

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

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

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

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

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

.legaless-hero-new-page .lgh-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-hero-new-page .lgh-fascia__cifre {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 500 !important;
    color: var(--lgh-scuro) !important;
    -webkit-text-fill-color: var(--lgh-scuro) !important;
}

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

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

.legaless-hero-new-page .lgh-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;
}

/* Fondo e testo dichiarati con un colore VERO, non solo con la variabile:
   se un domani la variabile non arrivasse, il pulsante resterebbe comunque
   leggibile invece di diventare bianco su bianco. */
.legaless-hero-new-page .lgh-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(--lgh-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-hero-new-page .lgh-cta:hover,
.legaless-hero-new-page .lgh-cta:focus-visible {
    background: #017e7c;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* =========================================================
   8. POPUP DEI FORM — TRASLOCATI
   =========================================================
   Stavano qui, e qui valevano SOLO SULLA HOME: hero-new.css non e'
   caricato su /seleziona-servizi/, dove gli stessi popup si aprivano
   senza stile.

   Ora stanno in assets/legaless-popup/legaless-popup.{css,js}, accodati
   da includes/legaless-front.php dove i popup ci sono davvero, con gli
   ID presi dal registro dei servizi.

   ⚠️ NON rimetterle qui. Erano scritte su ID (#awb-oc-XXXX), quindi
   batterebbero per specificita' le regole nuove, che sono su classe
   (.lgp-popup) — e su telefono impedirebbero al popup di diventare un
   foglio a tutta larghezza. Se serve un ritocco, si fa nel file nuovo.
   ========================================================= */

/* =========================================================
   9. PACCHETTI DI SERVIZI
   ========================================================= */

/* Il configuratore stampa una sua intestazione ("Pacchetti di servizi per
   PMI" / "Supporto legale modulare..."): si nasconde e si usa la nostra,
   scritta nel template. Non si tocca legaless-packages.js, che serve anche
   alla pagina /pacchetti-di-servizi/. */
.legaless-hero-new-page #legaless-packages-app .lp-hero { display: none !important; }

/* Il configuratore ha il suo fondo grigio: la sezione che lo contiene non
   deve metterne un altro sotto. */
.legaless-hero-new-page #legaless-packages-app { padding-top: 0 !important; }

/* ---------------------------------------------------------------
   IL RIPIEGO SENZA JAVASCRIPT
   ---------------------------------------------------------------
   Le tre righe che il template stampa dentro #legaless-packages-app e che
   legaless-packages.js sostituisce appena parte. Chi ha il JS non le vede
   mai; chi non lo ha — e i crawler AI, che in genere non lo eseguono —
   vede queste e non piu' una sezione vuota.
   Stile deliberatamente sobrio: deve leggersi bene se resta, e non deve
   dare nell'occhio nel decimo di secondo in cui compare prima di essere
   sostituito. */
.legaless-hero-new-page .lgh-pack__statico {
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

.legaless-hero-new-page .lgh-pack__statico li {
    margin: 0 0 0.9rem;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(11, 31, 51, 0.10);
    font-size: 0.95rem;
    line-height: 1.55;
    color: #46505a !important;
    -webkit-text-fill-color: #46505a !important;
}

.legaless-hero-new-page .lgh-pack__statico strong {
    color: #0b1f33 !important;
    -webkit-text-fill-color: #0b1f33 !important;
    font-weight: 700 !important;
}

.legaless-hero-new-page .lgh-pack__statico-nota {
    max-width: 780px;
    margin: 0 auto;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #6b7480 !important;
    -webkit-text-fill-color: #6b7480 !important;
    text-align: left;
}

/* Le tre colonne alte uguali — SOLO DA 901px IN SU.
   ⚠️ Queste regole NON devono mai valere su mobile: il configuratore la'
   tiene le card chiuse con .lp-card__body { display: none } e le apre a una
   a una, e un display:flex !important qui sotto le sbloccava tutte. Era la
   causa dei pacchetti "gia' aperti, lunghi e stretti". */
@media (min-width: 901px) {
    .legaless-hero-new-page #legaless-packages-app .lp-grid { align-items: stretch !important; }

    .legaless-hero-new-page #legaless-packages-app .lp-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .legaless-hero-new-page #legaless-packages-app .lp-card__body {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Il pulsante di ogni card si incolla in fondo. */
    .legaless-hero-new-page #legaless-packages-app .lp-card__body .lp-cta { margin-top: auto !important; }
}

.legaless-hero-new-page .lgh-pack__intestazione {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) 1rem clamp(1.5rem, 3vw, 2.2rem);
    text-align: center;
}

.legaless-hero-new-page .lgh-pack__occhiello {
    margin: 0 0 0.7rem;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    color: #00b2ae !important;
    -webkit-text-fill-color: #00b2ae !important;
}

.legaless-hero-new-page .lgh-pack__titolo {
    margin: 0 0 0.9rem;
    font-size: clamp(1.6rem, 3.1vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800 !important;
    text-wrap: balance;
    /* Blu scuro come lo sfondo della scena sopra, un tono piu' cupo. */
    color: #0b1f33 !important;
    -webkit-text-fill-color: #0b1f33 !important;
}

.legaless-hero-new-page .lgh-pack__testo {
    margin: 0;
    font-size: clamp(0.92rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    font-weight: 400 !important;
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
}

.legaless-hero-new-page .lgh-pack {
    position: relative;
    z-index: 4;
    /* 6) Lo stesso grigio del configuratore (--lp-bg), non bianco. */
    background: #f4f7f8;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(0.8rem, 3vw, 1.6rem) clamp(2.5rem, 6vw, 4rem);
}

/* Da qui in giu' la pagina e' chiara, e dello stesso grigio del
   configuratore: il bianco creava uno stacco a meta' sezione. */
.legaless-hero-new-page .lgh-pack ~ *,
body.page-template-template-template-hero-new-php .fusion-footer,
body.page-template-template-hero-new .fusion-footer,
body.page-template-template-template-hero-new .fusion-footer {
    background: #f4f7f8;
}

.legaless-hero-new-page .lgh-pack__interno { max-width: 1100px; margin: 0 auto; text-align: center; }


/* Riga di controllo per l'amministratore — una riga, discreta. */
.legaless-hero-new-page .lgh-controllo {
    margin: 0;
    padding: 0.6rem 1rem;
    background: #fff4e5;
    border-top: 2px solid #c77700;
    font-size: 0.82rem;
    font-weight: 600 !important;
    color: #3d2c00 !important;
    -webkit-text-fill-color: #3d2c00 !important;
    text-align: center;
}

/* =========================================================
   10. DESKTOP — da 901px
   ========================================================= */

@media (min-width: 901px) {
    .legaless-hero-new-page #hero-text {
        position: absolute !important;
        top: clamp(5.5rem, 14vh, 10rem);
        left: var(--lgh-text-left);
        width: auto;
        max-width: var(--lgh-text-max);
        padding: 0 !important;
        margin: 0 !important;
        z-index: 20;
    }

    /* ⚠️ NIENTE transform QUI DENTRO.
       getBoundingClientRect() restituisce coordinate TRASFORMATE: con una
       scala attiva sull'antenato, la misura che alzaHero() usa per allineare
       la sezione risulta falsata — e alzaHero() gira anche a 400 e 1200 ms,
       cioe' mentre la transizione e' ancora in corso. Registrava un margine
       sbagliato, e il ritorno in alto atterrava fuori posto.
       La dissolvenza resta, l'avvicinamento no: costava un difetto vero per
       un effetto che si notava appena. */
    .legaless-hero-new-page #legaless-hero-new-root {
        opacity: 0;
        visibility: hidden;
    }

    .legaless-hero-new-page #legaless-hero-new-root.is-ready {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.4s ease-out;
    }

    /* NIENTE contain: paint qui. Renderebbe #pin-container il blocco di
       riferimento per i position:fixed dei suoi discendenti, e la scheda
       smetterebbe di coprire lo schermo. */
    .legaless-hero-new-page #morph-section { contain: layout style; }
}

/* Schermi bassi: si guadagna spazio verticale. */
@media (min-width: 901px) and (max-height: 800px) {
    .legaless-hero-new-page { --lgh-card-h: clamp(180px, 25vh, 220px); }
    .legaless-hero-new-page #hero-text { top: clamp(4.5rem, 10vh, 6.5rem); }
    .legaless-hero-new-page .hero-cta-button { margin-top: 1.1rem; padding: 0.85rem 1.6rem; }
}

/* Sotto i 1150px: 2 colonne, il sottotitolo puo' andare a capo. */
@media (min-width: 901px) and (max-width: 1150px) {
    .legaless-hero-new-page .lgh-card {
        flex-basis: calc((100% - var(--lgh-gap)) / 2);
        max-width: calc((100% - var(--lgh-gap)) / 2);
    }
    .legaless-hero-new-page .lgh-grid-sottotitolo { white-space: normal; }
}

/* =========================================================
   11. MOBILE — fino a 900px
   ========================================================= */

.legaless-hero-new-page .hero-mobile-root,
.legaless-hero-new-page .mobile-hero-root { display: none; }

@media (max-width: 900px) {
    .legaless-hero-new-page .hero-desktop-root,
    .legaless-hero-new-page #legaless-hero-new-root { display: none !important; }

    body.page-template-template-template-hero-new-php::before,
    body.page-template-template-hero-new::before,
    body.page-template-template-template-hero-new::before {
        content: "";
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: var(--hero-bg-static-h, 100svh) !important;
        background-image: url("https://legaless.it/wp-content/uploads/2026/06/HERO-BG-MOBILE.webp") !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
        animation: none !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
        backface-visibility: hidden !important;
        contain: paint !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    html, body { background-color: var(--lgh-navy, #0f1826) !important; }

    .legaless-hero-new-page .mobile-hero-root {
        display: block !important;
        position: relative !important;
        width: 100%;
        overflow: visible !important;
        background: transparent;
        z-index: 1 !important;
    }

    .legaless-hero-new-page .fdm-hero {
        position: relative !important;
        min-height: 100svh !important;
        height: 100svh !important;
        padding: 0;
        overflow: visible !important;
        background: transparent;
        z-index: 30 !important;
    }

    .legaless-hero-new-page .fdm-hero-content {
        position: relative !important;
        z-index: 31 !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 2rem;
    }

    .legaless-hero-new-page .fdm-copy { position: relative; z-index: 32; padding: 0 1.1rem; text-align: center; }

    .legaless-hero-new-page .fdm-copy h1 {
        margin: 0 0 0.7rem;
        font-size: 2.15rem;
        line-height: 1.06;
        font-weight: 700 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .legaless-hero-new-page .fdm-copy h1 span {
        color: var(--lgh-accent) !important;
        -webkit-text-fill-color: var(--lgh-accent) !important;
    }

    .legaless-hero-new-page .fdm-copy p {
        margin: 0 auto;
        max-width: 336px;
        font-size: 1rem;
        line-height: 1.56;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.90) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.90) !important;
    }

    .legaless-hero-new-page .fdm-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.05rem;
        border-radius: 999px;
        padding: 0.85rem 1.6rem;
        font-size: 0.95rem;
        font-weight: 700 !important;
        text-decoration: none !important;
        border: 1px solid transparent;
    }

    .legaless-hero-new-page .fdm-btn-dark {
        background: var(--lgh-accent, #02b1ae);
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .legaless-hero-new-page .fdm-phone-mockup-wrap {
        position: absolute !important;
        left: 50% !important;
        bottom: -96px !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        z-index: 40 !important;
        pointer-events: none !important;
    }

    /* -15% anche qui, per coerenza col desktop (era 66vw/290px). */
    /* Lo schermo animato vale anche su mobile: la cornice al 251.2% fa si'
       che il telefono venga largo esattamente quanto .fdm-phone-mockup. */
    .legaless-hero-new-page .fdm-phone-mockup {
        position: relative !important;
        z-index: 41 !important;
        /* -20% rispetto al giro precedente (era 66vw / 290 / 240). */
        width: min(53vw, 232px);
        max-width: 232px;
        min-width: 192px;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: translateZ(0);
    }

    .legaless-hero-new-page .fdm-phone-mockup::before,
    .legaless-hero-new-page .fdm-phone-mockup::after { display: none !important; content: none !important; }

    .legaless-hero-new-page .fdm-phone-screen {
        position: relative !important;
        z-index: 41 !important;
        width: 100%;
        background: transparent !important;
        overflow: visible !important;
        display: block !important;
        box-shadow: none !important;
    }

    .legaless-hero-new-page .fdm-phone-screen img {
        position: relative !important;
        z-index: 41 !important;
        width: 100%;
        height: auto;
        object-fit: contain !important;
        object-position: center top !important;
        display: block;
        margin: 0 auto;
        box-shadow: none !important;
        background: transparent !important;
        transform: translateZ(0);
    }

    /* La sezione servizi: il titolo deve poter arrivare a filo dell'header
       quando ci si arriva da "Inizia ora" (punto 2 mobile). */
    .legaless-hero-new-page .fdm-feature {
        position: relative !important;
        z-index: 5 !important;
        background: var(--lgh-navy, #0f1826) !important;
        margin-top: 0 !important;
        padding: clamp(6.5rem, 20vw, 8.5rem) 1rem 1.8rem !important;
        overflow: visible !important;
        scroll-margin-top: 0;
    }

    .legaless-hero-new-page .fdm-feature::before { display: none !important; content: none !important; }

    .legaless-hero-new-page .fdm-feature h2 {
        margin: 0;
        font-size: 1.9rem;
        line-height: 1.1;
        font-weight: 700 !important;
        text-align: center;
        text-wrap: balance;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .legaless-hero-new-page .fdm-feature p {
        margin: 0.8rem auto 0;
        max-width: 34ch;
        font-size: 0.98rem;
        line-height: 1.55;
        font-weight: 400 !important;
        text-align: center;
        color: var(--lgh-chiaro-soft) !important;
        -webkit-text-fill-color: var(--lgh-chiaro-soft) !important;
    }

    .legaless-hero-new-page .fdm-mini-carousel {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
        overflow: visible !important;
        padding: 0 !important;
        margin: 1.4rem 0 0 !important;
        pointer-events: auto !important;
        background: transparent;
    }

    /* max-width e flex vanno annullati con !important: la regola base della
       card li imposta a 1/3 di riga per la griglia desktop, e dentro una
       griglia a 2 colonne quel max-width schiacciava le card. Era lo
       "sformattate" segnalato. */
    /* Misure della versione del 13/08, che su mobile rendeva bene. */
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card {
        flex: none !important;
        max-width: none !important;
        width: 100% !important;
        /* piu' alta per reggere icona e testi ingranditi */
        height: 258px !important;
        border-radius: 1.05rem;
    }

    /* Il titolo dell'ancora si ferma sotto l'header anche con un salto nativo. */
    .legaless-hero-new-page .fdm-feature h2 { scroll-margin-top: 4.5rem; }

    /* Impaginazione della versione precedente: icona, titolo, descrizione
       su tre righe. Il prezzo non c'e' piu' su nessuna card — sta nella
       scheda che si apre al tocco. */
    /* Con 7 aree l'ultima riga ha una card sola: si prende tutta la riga e
       si centra, invece di restare appoggiata a sinistra. Vale per qualunque
       numero dispari di card. */
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 0.4rem) !important;
    }

    .legaless-hero-new-page .fdm-mini-carousel .lgh-card__apri { gap: 0.6rem; padding: 1rem 0.75rem; }
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card__icona { width: 70px !important; height: 70px !important; }
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card__titolo { font-size: 1.06rem; line-height: 1.18; }
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card__testo {
        font-size: 0.82rem;
        line-height: 1.38;
        -webkit-line-clamp: 3;
    }

    .legaless-hero-new-page .fdm-dots { display: none !important; }

    /* La scheda su mobile sale dal basso. */
    .legaless-hero-new-page .lgh-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-hero-new-page .lgh-scheda.is-aperto { transform: translate(0, 0); }

    .legaless-hero-new-page .lgh-pack { padding: 2.4rem 0.7rem 3rem; }

    /* ---------------------------------------------------------------
       PACCHETTI SU MOBILE
       ---------------------------------------------------------------
       Si lascia lavorare la fisarmonica del configuratore: tre card
       compatte in fila, si tocca l'intestazione e quella si apre a tutta
       larghezza sotto. Qui si ritocca solo la resa, mai il meccanismo:
       NIENTE display su .lp-card__body, o si aprono tutte insieme.

       Bordo schermo stretto: 10px per lato invece dei 20 di serie. */
    .legaless-hero-new-page #legaless-packages-app {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ---------------------------------------------------------------
       PACCHETTI SU MOBILE: TRE SCHEDE CHIUSE, UNA SI APRE
       ---------------------------------------------------------------
       Di serie il configuratore mette tre colonnine affiancate e manda la
       card aperta in fondo (order:10). Su un telefono quelle colonnine sono
       strettissime e il titolo va a capo tre volte.

       Qui diventano tre barre impilate: chiusa e' una riga alta ~54px che si
       legge, aperta si espande AL SUO POSTO — le altre due restano dove
       sono, chiuse e visibili, sopra e sotto. E' esattamente il
       comportamento chiesto: si vede che sono tre e che vanno toccate.

       ⚠️ NON toccare il display di .lp-card__body: e' con quello che il
       configuratore tiene chiuse le card, e forzarlo le apre tutte.

       ⚠️ Il configuratore, di suo, APRE DA SOLO la seconda card sotto i
       767px (initMobileAccordion -> applyDefault). Qui non si puo' impedire
       con il CSS senza rompere anche l'apertura al tocco: lo chiude
       hero-new.js, che e' nostro. Vedi la sezione "PACCHETTI" li'.

       RIFATTO IL 14/08: c'erano due generazioni di regole sovrapposte per lo
       stesso selettore — la seconda cambiava corpo e padding ma non
       annullava il position:absolute della prima sulla freccia, che restava
       ancorata a destra e insieme spinta di 7px con un margin-top. Da qui in
       giu' c'e' UNA sola stesura. */
    .legaless-hero-new-page #legaless-packages-app .lp-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        align-items: stretch !important;
    }

    .legaless-hero-new-page #legaless-packages-app .lp-card {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        order: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important;
    }

    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open) {
        cursor: pointer;
    }

    /* --- La barra chiusa: badge, titolo, freccia. Una riga sola. --- */
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open) .lp-card__header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px;
        /* 46px a destra: ci sta il pulsantino della freccia senza che il
           titolo ci finisca sotto. */
        padding: 13px 46px 13px 14px !important;
        text-align: left !important;
    }

    /* Maiuscoletto, come chiesto. Il testo "Pacchetto " davanti al nome lo
       mette hero-new.js nel DOM e non qui con un ::before: cosi' e' testo
       vero, lo legge uno screen reader e lo copia chi copia. */
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open) .lp-card__title {
        flex: 1 1 auto !important;
        margin: 0 !important;
        font-size: 1.02rem !important;
        line-height: 1.2 !important;
        font-variant-caps: small-caps !important;
        letter-spacing: 0.04em !important;
        text-align: left !important;
        /* UNA RIGA SOLA, come chiesto. Il conto: a 320px (il telefono piu'
           stretto in circolazione) restano 240px fra i padding, e
           "Pacchetto Per Servizi" in maiuscoletto a 1.02rem ne misura ~155.
           I puntini sono una rete che non dovrebbe mai servire. */
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Via le etichette "Flessibile" / "Continuativo" / "Personalizzabile"
       dalla barra chiusa (scelta dell'utente, 14/08 sera): erano tre parole
       che rubavano la riga al titolo e non dicevano abbastanza da meritarla.
       Restano sulla card APERTA, dove c'e' spazio e dove servono davvero.
       Si nasconde con display:none, non si toglie dal DOM: e' il
       configuratore a stamparle, e non lo tocchiamo. */
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open) .lp-card__badge,
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open) .lp-popular-badge {
        display: none !important;
    }

    /* La freccia diventa un pulsantino tondo: e' l'unico segnale che dice
       "questa si apre", e con tutte e tre chiuse deve dirlo forte.

       >>> pointer-events: none — E' UNA CORREZIONE, NON UN DETTAGLIO <<<
       Questo ::after e' uno pseudo-elemento di .lp-card, NON
       dell'intestazione. Il listener del configuratore sta invece
       sull'intestazione (.lp-card__header--toggle). Senza questa riga il
       pulsantino intercetta il clic, che finisce su .lp-card e non arriva
       mai a chi lo ascolta: la riga si apriva toccando ovunque TRANNE la
       freccia, cioe' l'unico punto che sembra un pulsante.
       Con pointer-events:none il clic attraversa il tondo e cade
       sull'intestazione, che sta sotto e occupa tutta la larghezza.
       Segnalato dall'utente il 14/08 sera. */
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open)::after {
        position: absolute !important;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
        width: 28px;
        height: 28px;
        line-height: 28px !important;
        border-radius: 999px;
        background: rgba(0, 178, 174, 0.14);
        font-size: 0.9rem !important;
        color: #00b2ae !important;
        text-align: center;
        pointer-events: none !important;
    }

    /* --- Card APERTA: qui si legge, quindi qui si ingrandisce --- */
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-card__header {
        padding: 22px 18px 14px !important;
    }
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-card__body {
        padding: 18px 18px 22px !important;
    }
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-card__title {
        font-size: 1.42rem !important;
        line-height: 1.18 !important;
        font-variant-caps: small-caps !important;
        letter-spacing: 0.02em !important;
    }
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-card__desc {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-card__badge {
        font-size: 0.72rem !important;
        padding: 4px 11px !important;
    }
    /* I <select> non hanno un'altezza propria: alzando corpo e padding senza
       liberare l'altezza, il testo veniva tagliato in verticale. Servono
       height:auto e una line-height esplicita, non basta il padding. */
    .legaless-hero-new-page #legaless-packages-app .lp-card--open select,
    .legaless-hero-new-page #legaless-packages-app .lp-card--open input,
    .legaless-hero-new-page #legaless-packages-app .lp-card--open textarea {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 11px 14px !important;
        box-sizing: border-box !important;
    }

    .legaless-hero-new-page #legaless-packages-app .lp-card--open textarea {
        min-height: 90px !important;
    }

    /* Anche i menu della riga "quantita'", che partono da 12px. */
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-qty-row select {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 9px 12px !important;
    }
    .legaless-hero-new-page #legaless-packages-app .lp-card--open label,
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-price-row__lbl {
        font-size: 0.92rem !important;
    }
    .legaless-hero-new-page #legaless-packages-app .lp-card--open .lp-cta {
        font-size: 1.02rem !important;
        padding: 16px !important;
    }

    /* ---------------------------------------------------------------
       "PER IMPRESE E PROFESSIONISTI" — maiuscoletto e un po' piu' grande
       ---------------------------------------------------------------
       Solo su mobile, perche' e' li' che e' stato chiesto: su desktop
       l'occhiello resta com'e'. Se lo si vuole anche la', basta spostare
       queste due righe fuori dal @media.
       Il maiuscoletto vero (small-caps) tiene la P iniziale a corpo pieno e
       abbassa il resto: essendo le lettere piu' piccole, senza alzare il
       corpo il testo sembrerebbe rimpicciolito invece che ingrandito. */
    .legaless-hero-new-page .lgh-pack__occhiello {
        font-size: 1.05rem !important;
        font-variant-caps: small-caps !important;
        letter-spacing: 0.08em !important;
    }

    /* ---------------------------------------------------------------
       RETROILLUMINAZIONE E ZOOM — card servizi e card pacchetti
       ---------------------------------------------------------------
       Su desktop la .lgh-card ha gia' il suo hover (sezione 6). Qui si
       porta lo stesso linguaggio su mobile e lo si estende alle card del
       configuratore, che non ne avevano nessuno.

       hover  -> retroilluminazione: doppio anello turchese + alone.
       :active -> zoom leggero, 1.03. Sostituisce lo scale(0.985) che la
                  regola desktop applicava anche qui: al tocco la card si
                  rimpiccioliva, che e' il contrario di quanto chiesto.

       Il transform e' di competenza del CSS: su mobile hero-new.js esce
       prima di arrivare a GSAP (ramo mobile, return), quindi qui non c'e'
       il conflitto di proprieta' descritto nel documento. */
    @media (hover: hover) {
        .legaless-hero-new-page .fdm-mini-carousel .lgh-card:hover,
        .legaless-hero-new-page #legaless-packages-app .lp-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;
        }
    }

    /* -----------------------------------------------------------------
       AL TOCCO — rifatto il 14/08 (sera): "piu' evidente e sensibile"
       -----------------------------------------------------------------
       DUE PROBLEMI DIVERSI, e il secondo era quello vero.

       1. Era troppo timido. Ora l'anello e' da 3px, l'alone da 12,
          lo zoom da 1.055, e il fondo della card si schiarisce a bianco:
          si vede senza doverla cercare.

       2. NON SI VEDEVA QUASI MAI, ed e' il motivo per cui sembrava non
          esserci. :active dura quanto il dito resta giu': su un tocco
          normale sono 60-80 millisecondi, meno del tempo di transizione,
          quindi l'effetto partiva e veniva annullato prima di arrivare a
          meta'. In piu' iOS Safari :active non lo applica affatto, a meno
          che l'elemento non abbia un gestore di touch.
          Rimedio: hero-new.js mette la classe .lgh-toccata al touchstart
          e la toglie dopo 260ms. Il tocco piu' rapido si vede lo stesso, e
          su iOS si vede e basta. Vedi la sezione 3-quater li'.

       Si dichiarano tutti e due gli stati insieme: dove :active funziona
       fanno la stessa cosa, e non si sovrappongono male. */
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card:active,
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card.lgh-toccata,
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open):active,
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open).lgh-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 della card servizi cresce con lei: senza, al 5.5% di zoom
       sembra che si stacchi dal riquadro. */
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card:active .lgh-card__icona,
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card.lgh-toccata .lgh-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. La riga "spento"
       sta sulla card, la riga "acceso" sullo stato. */
    /* ⚠️ opacity e filter DEVONO restare in questo elenco: sono quelle con
       cui .is-sfocato sfuma le altre card quando se ne apre una (sezione 6).
       Dichiarando transition con !important senza di loro, quella dissolvenza
       diventerebbe uno scatto. */
    .legaless-hero-new-page #legaless-packages-app .lp-card,
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card {
        transition:
            opacity 280ms ease,
            filter 280ms ease,
            box-shadow 260ms ease,
            border-color 260ms ease,
            background 260ms ease,
            transform 260ms ease !important;
    }

    .legaless-hero-new-page .fdm-mini-carousel .lgh-card:active,
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card.lgh-toccata,
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open):active,
    .legaless-hero-new-page #legaless-packages-app .lp-card:not(.lp-card--open).lgh-toccata {
        transition:
            box-shadow 110ms ease-out,
            border-color 110ms ease-out,
            background 110ms ease-out,
            transform 110ms ease-out !important;
    }

    /* Le regole mobile dei popup sono in legaless-popup.css: li' il popup
       diventa un foglio che sale dal basso, per tutti e sette e non solo
       per tre. Rimetterle qui le farebbe vincere per specificita' (ID) e
       il foglio tornerebbe una finestra al 94%. */
}

/* ---------------------------------------------------------------
   ALLEGGERIMENTO PER MOBILE
   ---------------------------------------------------------------
   Su telefono vero la scena e' crashata: cornice da 1080x1080
   decodificata a dpr 2, piu' maschera, piu' livelli promossi.
   Qui l'animazione si riduce all'osso: cambia solo l'opacita', che
   il compositore gestisce senza creare nuove texture. */
@media (max-width: 900px) {
    .legaless-hero-new-page .lgh-stato {
        animation-name: lghStatoLeggero;
    }

    /* ---------------------------------------------------------------
       NIENTE CONTAINER QUERY SU MOBILE
       ---------------------------------------------------------------
       container-type / cqi / contain sono le tre proprieta' che il
       desktop digerisce e i motori mobili trattano diversamente: se la
       larghezza dello schermo collassa, tutto cio' che sta dentro perde
       le misure. Qui si spengono e la dimensione si ricava in vw.

       >>> IL CONTO ERA RIMASTO INDIETRO DI DUE GIRI, ED E' IL DIFETTO <<<
       Diceva .fdm-phone-mockup = min(66vw, 290px), ma la regola qui sopra lo
       ha portato prima a -15% e poi a -20%: oggi vale clamp(192px, 53vw,
       232px). Il testo continuava pero' a essere calcolato sul telefono
       grande, quindi dentro un telefono piu' piccolo del 25% ci finiva
       un'interfaccia della misura di prima. Da li' tutto: roba che tocca i
       bordi e la scritta del pulsante piu' larga del pulsante.

       Il conto rifatto, con i numeri veri (14/08):
         .fdm-phone-mockup M = clamp(192px, 53vw, 232px)
         cornice             = 251.2% di M
         schermo             = (100 - 2x31.95)% della cornice
                             = 36.10% x 2.512 = 0.9068 x M
         testo               = 8.2% dello schermo = 0.07436 x M
                             = clamp(14.3px, 3.94vw, 17.25px)
       clamp() si compone: essendo la stessa funzione monotona moltiplicata
       per una costante, i tre termini si scalano uno per uno. Se un domani
       cambia la larghezza del mockup, si rifa' questa moltiplicazione — non
       si tira a indovinare un vw.

       Stesso risultato delle cqi, senza dipendere da loro. */
    .legaless-hero-new-page .lgh-schermo {
        isolation: auto;
        contain: none;
        container-type: normal;
    }

    .legaless-hero-new-page .lgh-app {
        font-size: 15px;
        font-size: clamp(14.3px, 3.94vw, 17.25px);
    }

    /* Piu' respiro laterale dentro la scheda: erano 3.6em di margine +
       padding su uno schermo largo ~191px, cioe' 56px mangiati sui lati.
       Con 2.8em ne restano 147 per il contenuto, ed e' quello che serve
       perche' la scritta del pulsante ci stia su una riga sola. */
    .legaless-hero-new-page .lgh-stato {
        margin: 0 0.7em;
        padding: 1em 0.7em;
        gap: 0.6em;
    }

    .legaless-hero-new-page .lgh-stato__testo {
        overflow-wrap: anywhere;
    }

    /* "Paga in sicurezza" a 0.9em misura ~144px: piu' del contenitore.
       A 0.82em ne misura ~131 su 147 disponibili, e ci sta con margine.
       box-sizing + padding laterale: se un domani il testo si allunga,
       stringe invece di sfondare. */
    .legaless-hero-new-page .lgh-pulsante {
        box-sizing: border-box;
        font-size: 0.82em;
        padding: 0.8em 0.5em;
        line-height: 1.25;
    }

    /* Il tratto della firma e le tappe restano fermi: erano due
       animazioni in piu' per un dettaglio che sul piccolo non si legge. */
    .legaless-hero-new-page .lgh-firma__tratto {
        animation: none;
        transform: scaleX(1);
    }

    .legaless-hero-new-page .lgh-tappa {
        animation: none;
        opacity: 1;
    }
}

@keyframes lghStatoLeggero {
    0%        { opacity: 0; }
    5%, 21%   { opacity: 1; }
    25%, 100% { opacity: 0; }
}

@media (max-width: 560px) {
    .legaless-hero-new-page .fdm-phone-mockup-wrap { bottom: -82px !important; }
    .legaless-hero-new-page .fdm-phone-mockup { width: min(54vw, 218px); max-width: 218px; min-width: 182px; }
    .legaless-hero-new-page .fdm-copy h1 { font-size: 2rem; }
    .legaless-hero-new-page .fdm-feature h2 { font-size: 1.75rem; }
    .legaless-hero-new-page .fdm-mini-carousel { gap: 0.7rem; }
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card { height: 248px !important; }
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card__icona { width: 66px !important; height: 66px !important; }
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card__titolo { font-size: 1.02rem; }
    .legaless-hero-new-page .fdm-mini-carousel .lgh-card__testo { font-size: 0.79rem; }

    /* Stesso conto del blocco 900px, con M = clamp(182px, 54vw, 218px):
       testo = 0.07436 x M = clamp(13.5px, 4.02vw, 16.2px). */
    .legaless-hero-new-page .lgh-app { font-size: clamp(13.5px, 4.02vw, 16.2px); }

    body.page-template-template-template-hero-new-php::before,
    body.page-template-template-hero-new::before,
    body.page-template-template-template-hero-new::before {
        background-position: center 22% !important;
    }
}

/* =========================================================
   12. MOVIMENTO RIDOTTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .legaless-hero-new-page #hero-text,
    .legaless-hero-new-page #phone-wrapper,
    .legaless-hero-new-page #morph-background,
    .legaless-hero-new-page .lgh-card,
    .legaless-hero-new-page .lgh-pack-card,
    .legaless-hero-new-page .lgh-scheda,
    .legaless-hero-new-page .lgh-velo,
    .legaless-hero-new-page .lgh-slider__pista,
    .legaless-hero-new-page .mobile-hero-root,
    .legaless-hero-new-page .mobile-hero-root * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }

    body.page-template-template-template-hero-new-php::before,
    body.page-template-template-hero-new::before,
    body.page-template-template-template-hero-new::before,
    .legaless-hero-new-page #pin-container::after {
        animation: none !important;
        transform: translateZ(0) scale(1) !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .legaless-hero-new-page #legaless-hero-new-root,
    .legaless-hero-new-page #legaless-hero-new-root.is-ready {
        transform: none !important;
        transition: none !important;
    }

    .legaless-hero-new-page #pin-container::after { transform: translate(-50%, -50%) !important; }

    /* Lo schermo del telefono: UNO stato fisso, la notifica. Niente loop,
       niente badge che pulsa, niente firma che si traccia. */
    .legaless-hero-new-page .lgh-stato,
    .legaless-hero-new-page .lgh-badge,
    .legaless-hero-new-page .lgh-firma__tratto,
    .legaless-hero-new-page .lgh-tappa {
        animation: none !important;
    }

    .legaless-hero-new-page .lgh-stato { opacity: 0; transform: none !important; }
    .legaless-hero-new-page .lgh-stato:nth-child(1) { opacity: 1; }
    .legaless-hero-new-page .lgh-firma__tratto { transform: scaleX(1) !important; }
    .legaless-hero-new-page .lgh-tappa { opacity: 1; }
}