/* KLC - foglio di stile del sito.
   YOOtheme carica questo file da solo come css/custom.css del tema attivo.
   Unisce il foglio condiviso e quello della pagina settore.
   E' generato dal progetto statico: le modifiche vanno fatte li' e rigenerate. */

/* KLC — foglio di stile del sito.
   Token dal pacchetto grafico: verde #1FB67F, navy #061629, raggi 10/20,
   breakpoint 768/1100/1440. Contenitore 1680px, fasce a tutta larghezza.
   Condiviso fra tutte le pagine: in WordPress diventa lo style del tema figlio. */
/* ═══════════════════════════════════════════════════════════
   KLC — Home
   Token dal pacchetto grafico: verde #1FB67F, navy #061629,
   raggi 10/20, breakpoint 768/1100/1440.
   Contenitore 1680px, fasce a tutta larghezza.
   Testi: integrali dai documenti editoriali master.
   ═══════════════════════════════════════════════════════════ */
/* Inter servito dal nostro server: nessuna chiamata a Google.
   File variabile 400-800: un solo scaricamento copre tutti i pesi
   che il sito usa (400 corpo, 600/650 grassetti medi, 700/800 titoli).
   Licenza SIL Open Font License 1.1, ridistribuzione consentita. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;
  font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;
  font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── I colori e il carattere del sito ──────────────────────────────────
   Prima questi valori erano scritti qui e basta: per cambiare un verde
   bisognava modificare questo file, rigenerare il tema e ricaricarlo, e
   l'impostazione in Theme > Style non contava niente.

   Adesso ogni token legge prima una variabile --klc-*, e usa il valore di
   oggi solo come ripiego. Per cambiare un colore o il carattere basta una
   riga in YOOtheme > Theme > Style > Custom CSS, per esempio:
       :root{--klc-verde:#0F9E6C; --klc-carattere:Manrope,sans-serif}
   Nessun file da rigenerare, e chi non tocca niente vede esattamente il
   sito di prima.

   Perche' una variabile nostra e non quella di YOOtheme: l'idea di scrivere
   var(--uk-primary,#1FB67F) e' stata provata e scartata. YOOtheme Pro non
   espone i colori come variabili: compila theme.css con i valori dentro le
   regole. Nel foglio in linea sul sito (theme.1.css, 330 KB) le uniche
   custom property dichiarate sono diciotto, e sono tutte di servizio —
   --uk-breakpoint-*, --uk-position-*, --uk-scale-*, --uk-inverse,
   --tm-reveal. Ne' --uk-primary ne' --global-font-family esistono: zero
   occorrenze. Un ripiego su variabili inesistenti sarebbe scattato sempre,
   cioe' non avrebbe cambiato niente fingendo di cambiare tutto.

   Il carattere: per seguire Theme > Style > Typography si scrive in
   --klc-carattere lo stesso nome scelto li', per esempio
       :root{--klc-carattere:'PT Serif',serif}
   Non funziona invece :root{--klc-carattere:inherit}, che sarebbe la scorciatoia
   ovvia: provato nel browser, il corpo resta Inter. Il motivo e' una regola del
   linguaggio — una custom property a cui si assegna una parola come inherit o
   initial vale "invalida garantita", quindi var() prende il ripiego, cioe' Inter.
   E' scritto qui perche' e' il genere di cosa che si riprova due volte. */
:root{
  --green:var(--klc-verde,#1FB67F);
  --green-dark:var(--klc-verde-scuro,#12865D);
  --green-soft:var(--klc-verde-chiaro,#E9F8F2);
  /* verde per testo piccolo su fondo chiaro: #1FB67F non raggiunge il
     contrasto 4,5 e nemmeno #12865D sul grigio nebbia */
  --green-text:var(--klc-verde-testo,#0C6B49);
  --green-on-dark:var(--klc-verde-su-scuro,#5FD3A4);
  --navy:var(--klc-navy,#061629); --navy-2:var(--klc-navy-2,#0B2940);
  --ink:var(--klc-inchiostro,#0B1822); --ink-soft:var(--klc-inchiostro-tenue,#183246);
  --paper:var(--klc-carta,#FFFFFF); --fog:var(--klc-nebbia,#F4F7F6);
  --line:var(--klc-linea,#DBE5E1); --muted:var(--klc-smorzato,#5C6C75);
  --wrap:1680px; --read:74ch;
  --r:10px; --r-lg:20px;
  --pad:clamp(20px,4vw,60px);
  --sec:clamp(64px,7vw,120px);
  --ff:var(--klc-carattere,Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif);
  /* corpo del testo e interlinea: erano scritti dentro la regola body, dove
     il pannello non li poteva raggiungere. Valori di oggi come predefiniti. */
  --fs:var(--klc-corpo,17px); --lh:var(--klc-interlinea,1.62);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh:0 1px 2px rgba(11,24,34,.04),0 10px 30px -18px rgba(11,24,34,.18);
  --sh-hi:0 2px 4px rgba(11,24,34,.05),0 22px 48px -22px rgba(11,24,34,.26);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff);
  font-size:var(--fs);line-height:var(--lh);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
/* ── I due azzeramenti, con una porta lasciata aperta al pannello ───────
   Prima erano ul{} e a{} nudi: valevano su tutto, anche dentro un modulo
   scritto in YOOtheme. Effetto: un collegamento inserito in un modulo di
   testo usciva nero e senza sottolineatura (l'impostazione del colore dei
   link in Theme > Style non contava), e un elenco puntato usciva senza
   pallini.

   Restringerli a pochi contenitori, come suggeriva l'ispezione, non si puo':
   nelle 178 pagine costruite ci sono 3.899 collegamenti e 1.802 elenchi che
   contano su queste due righe, e quasi nessuno sta dentro .nav/.hdr/.ft —
   sono briciole di pane, richiami, schede, riquadri. Toglierle avrebbe reso
   azzurri e sottolineati 744 richiami "correlati", 178 briciole di pane e
   tutte le schede della home.

   La forma scelta lascia gli azzeramenti dove servono e li tiene fuori dai
   contenitori con cui YOOtheme avvolge il contenuto scritto dal pannello.
   Li' torna a decidere Theme > Style. Due dettagli che contano:
   - :where() non pesa nel calcolo di priorita', quindi il selettore vale
     quanto prima (un solo tipo) e nessuna regola gia' scritta cambia;
   - oggi non si vede nessuna differenza, perche' in tutte e 179 le pagine
     online non c'e' un solo .uk-panel: la porta si apre il giorno in cui
     aggiungi un modulo di YOOtheme. */
ul:where(:not(.uk-panel *,.uk-card-body *,.uk-accordion-content *)){list-style:none;padding:0}
a:where(:not(.uk-panel *,.uk-card-body *,.uk-accordion-content *)){color:inherit;text-decoration:none}
/* ── I collegamenti dentro il contenuto ─────────────────────────────────
   La porta qui sopra apre solo i contenitori di YOOtheme (.uk-panel e
   simili), che nelle 178 pagine costruite non esistono: un collegamento
   aggiunto a mano in un paragrafo usciva nero e senza sottolineatura,
   cioe' invisibile. Il contenitore reale del contenuto e' <main> —
   id="tm-main" su WordPress, <main> nudo nel sito statico (verificato su
   entrambi) — e la prosa sta nei <p>. Qui, e solo qui, un collegamento
   torna a sembrare un collegamento: verde testo e sottolineato, la stessa
   convenzione del p.rimando negli articoli. E' l'unico cambiamento voluto:
   oggi non sposta un pixel, perche' in nessuna pagina online c'e' ancora
   un <a> nudo dentro un <p> del contenuto (controllate home, servizio,
   soluzione, mercato, hub, metodo, blog e articolo).
   Restano fuori, apposta: i pulsanti (.btn), le frecce (.link), i titoli
   collegati (.vai-servizio) e il consenso del modulo (.cons/.consent, che
   ha gia' la sua regola). Briciole, schede, hub, tendine e piede non
   passano di qui: i loro <a> non stanno dentro un <p> del main. La
   specificita' resta a livello di elemento (:where non pesa), quindi ogni
   componente con una classe continua a vincere — negli articoli comanda
   ancora .uk-article a, che dice le stesse cose. */
main p a:where(:not(.btn,.link,.vai-servizio):not(.cons *,.consent *)){
  color:var(--green-text);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
main p a:where(:not(.btn,.link,.vai-servizio):not(.cons *,.consent *)):hover{
  color:var(--green-dark)}
/* sui fondi scuri il verde testo sparisce: vale il verde da fondo scuro,
   anche al passaggio del mouse, come per .dark .link */
main :where(.dark,.hero,.banda,.ctabox,.cta-dark,.ctasez.scura) p a:where(:not(.btn,.link,.vai-servizio):not(.cons *,.consent *)),
main :where(.dark,.hero,.banda,.ctabox,.cta-dark,.ctasez.scura) p a:where(:not(.btn,.link,.vai-servizio):not(.cons *,.consent *)):hover{
  color:var(--green-on-dark)}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
/* L'anello di fuoco era --green #1FB67F: 2,61:1 sul bianco e 2,42:1 sul grigio
   nebbia, sotto il minimo di 3:1 per un indicatore. Chi naviga da tastiera
   faticava a capire dove si trovava. --green-text #0C6B49 sta a 6,53:1 sul
   bianco. Sui fondi navy quel verde scuro sparisce, quindi la' si usa il verde
   chiaro previsto per lo scuro (#5FD3A4, 9,82:1 sul navy). */
:focus-visible{outline:2px solid var(--green-text);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.hero :focus-visible,.ft :focus-visible,
.cta-dark :focus-visible{outline-color:var(--green-on-dark)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.fog{background:var(--fog)}
.dark{background:var(--navy);color:#E8EFF3}
/* i titoli nelle fasce scure vanno dichiarati bianchi: YOOtheme assegna
   un colore esplicito a h1-h6 e vince sull'ereditarieta' dal contenitore */
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,
.banda h1,.banda h2,.banda h3,.ctabox h3{color:#fff}
.dark .lead,.dark .body,.dark p{color:#A9BECB}
.tnum{font-variant-numeric:tabular-nums}

/* tipografia */
/* su fondo chiaro il testo verde usa la variante scura: #1FB67F su bianco
   sta a 2,61 di contrasto, #12865D a 4,57 e passa il livello AA */
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-text);margin-bottom:16px}
.dark .eyebrow,.hero .eyebrow{color:var(--green-on-dark)}
/* Il font va dichiarato anche sulle intestazioni: YOOtheme lo impone
   esplicitamente sui suoi h1-h6 e una regola esplicita batte
   l'ereditarieta' dal body.
   Da qui sono state tolte le classi .uk-h1….uk-h6 e .uk-heading-*: quelle
   sono le intestazioni disegnate dai moduli di YOOtheme, e riscriverle
   rendeva muta Theme > Style > Typography anche li'. Adesso una intestazione
   costruita nel pannello segue il carattere scelto nel pannello, mentre il
   markup del sito — che usa h1-h6 e .h1/.h2/.h3 — resta come oggi.
   Verificato: nelle 178 pagine costruite e nelle tre pagine in linea
   controllate non compare nemmeno una volta .uk-h1….uk-h6 o
   .uk-heading-*, quindi oggi la differenza non si vede. */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{font-family:var(--ff)}
h1,.h1{font-size:clamp(34px,4.6vw,62px);line-height:1.06;letter-spacing:-.025em;font-weight:800;
  text-wrap:balance}
h2,.h2{font-size:clamp(27px,3.1vw,44px);line-height:1.12;letter-spacing:-.02em;font-weight:800;
  text-wrap:balance}
h3,.h3{font-size:clamp(18px,1.4vw,21px);line-height:1.3;letter-spacing:-.011em;font-weight:700}
.lead{font-size:clamp(17px,1.25vw,19.5px);line-height:1.6;color:var(--muted);max-width:var(--read);
  text-wrap:pretty}
.body{color:var(--muted);max-width:var(--read);text-wrap:pretty}
/* Dentro una fisarmonica la misura di lettura non serve: il pannello e' largo
   quanto la riga e lasciava vuoto un terzo, mentre le righe chiuse sopra e
   sotto arrivano al bordo. Sono paragrafi da due o tre righe, non prosa lunga. */
details>.body,details>.in>p{max-width:none}
.body+.body{margin-top:15px}
.sec-head{margin-bottom:clamp(34px,3.6vw,58px)}
/* intestazione su due colonne: titolo a sinistra, paragrafo a destra.
   In colonna unica il testo lasciava mezza pagina vuota a destra */
.sec-head.due{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,64px);align-items:end;max-width:none}
.sec-head.due .lead{margin-top:0;max-width:56ch}
@media(max-width:900px){.sec-head.due{grid-template-columns:1fr;gap:16px;align-items:start}}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .lead{margin-inline:auto}

/* bottoni */
/* il verde chiaro con testo bianco dà contrasto 2,61: sotto la soglia di
   leggibilità. I pulsanti pieni usano il verde scuro, che arriva a 4,9 */
/* white-space: l'etichetta di un pulsante e' corta per definizione e andare a
   capo la spezza in due righe storte. "Richiedi un'analisi" nell'intestazione
   si rompeva a certe larghezze, perche' fra il testo e la freccia c'e' un
   ritorno a capo nel markup: quello e' un punto dove il browser puo' spezzare. */
.btn{display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border-radius:var(--r);
  background:var(--green-dark);color:#fff;font-size:15.5px;font-weight:650;border:0;cursor:pointer;
  white-space:nowrap;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 8px 20px -12px rgba(18,134,93,.7)}
/* il verde piu' cupo della famiglia e' lo stesso valore di --green-text:
   letto dal token e non piu' scritto a mano, cosi' un cambio di verde dal
   pannello non lascia macchie del colore vecchio (vale anche per la fascia
   scura e per il "torna in cima", piu' avanti) */
.btn:hover{background:var(--green-text);transform:translateY(-1px);
  box-shadow:0 14px 28px -14px rgba(12,107,73,.8)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-2{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-2:hover{background:var(--paper);color:var(--green-dark);box-shadow:inset 0 0 0 1.5px var(--green)}
/* al 26% il bordo era quasi invisibile a riposo */
.dark .btn-2,.hero .btn-2{background:rgba(232,239,243,.09);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(232,239,243,.58)}
.dark .btn-2:hover,.hero .btn-2:hover{background:rgba(232,239,243,.18);color:#fff;
  box-shadow:inset 0 0 0 1.5px var(--green-on-dark)}
.btn-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
/* Il nowrap qui sopra serve sul desktop, dove "Richiedi un'analisi" si
   spezzava male fra testo e freccia. Su telefono pero' un'etichetta da 45
   caratteri diventa un pulsante da 412px che sfora uno schermo da 390 —
   e non si vede, perche' body{overflow-x:clip} taglia invece di scorrere. */
@media(max-width:700px){.btn{white-space:normal}}
/* su fondo nebbia il verde scuro scende a 4,24: serve quello piu' cupo */
.link{display:inline-flex;align-items:center;gap:9px;color:var(--green-text);font-weight:650;
  font-size:15.5px;transition:gap .3s var(--ease)}
.link:hover{gap:14px}
.link svg{width:18px;height:18px;flex:none}
.dark .link{color:var(--green-on-dark)}
.ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ── HEADER ─────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:78px;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,44px)}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>li>a,.nav>li>button{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:8px;
  font-size:15px;font-weight:600;color:var(--ink-soft);background:none;border:0;cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease)}
.nav>li>a:hover,.nav>li>button:hover,.nav>li[data-open="true"]>button{color:var(--green-dark);
  background:var(--green-soft)}
.nav .caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .3s var(--ease)}
.nav>li[data-open="true"] .caret{transform:rotate(180deg)}

/* La voce con tendina: due bersagli in un'unica superficie.
   Prima l'etichetta era un <button> che apriva soltanto la tendina, con
   preventDefault sul clic: chi premeva "Soluzioni" vedeva l'elenco e non
   arrivava mai su /soluzioni/. Adesso l'etichetta e' un collegamento vero e
   la freccia e' un pulsante separato, cosi' il clic naviga e la freccia apre.
   Il riquadro verde e lo stato aperto stanno sul <li>, non sui due figli:
   all'occhio restano una cosa sola, come prima.
   Il <li> non deve diventare position:relative — la tendina e' larga quanto
   la pagina e si posiziona sull'intestazione, non sulla voce. */
.nav>li[data-mega]{display:flex;align-items:center;border-radius:8px;
  transition:background .25s var(--ease)}
.nav>li[data-mega]>a{padding-right:4px}
.nav>li[data-mega]>button{padding-left:4px;padding-right:11px;
  min-width:26px;justify-content:center}
.nav>li[data-mega]:hover,.nav>li[data-mega][data-open="true"]{background:var(--green-soft)}
.nav>li[data-mega]:hover>a,.nav>li[data-mega]:hover>button,
.nav>li[data-mega][data-open="true"]>a,
.nav>li[data-mega][data-open="true"]>button{color:var(--green-dark);background:none}
/* chi naviga da tastiera deve vedere dove si trova, e i due bersagli sono
   distinti: senza questo, passando dall'etichetta alla freccia non cambiava
   niente sullo schermo */
.nav>li>a:focus-visible,.nav>li>button:focus-visible{outline:2px solid var(--green-dark);
  outline-offset:2px}
.hdr .btn{flex:none;padding:13px 22px;font-size:15px}
/* Verde pieno con le barre bianche: il fondo pallido su testata bianca lo
   rendeva quasi invisibile, e su telefono e' l'unico modo di aprire il menu. */
.burger{display:none;flex:none;width:44px;height:44px;border:0;background:var(--green-dark);
  border-radius:10px;cursor:pointer;position:relative;margin-left:auto}
/* Il sito statico scrive le barre come <i>, il guscio di WordPress come
   <span>: il selettore ne copriva uno solo, e in pagina il pulsante era un
   quadrato vuoto senza le tre righe. */
.burger i,.burger span{position:absolute;left:13px;width:18px;height:2px;background:#fff;
  border-radius:2px;transition:transform .4s var(--ease),opacity .25s}
.burger>:nth-child(1){top:15px}.burger>:nth-child(2){top:21px}.burger>:nth-child(3){top:27px}
.burger[aria-expanded="true"]>:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"]>:nth-child(2){opacity:0}
.burger[aria-expanded="true"]>:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* megamenu: 144 mercati in 23 gruppi */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-hi);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
li[data-open="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:20px var(--pad) 18px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px 30px}
.mega-in a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 12px;border-radius:8px;font-size:14.3px;color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s var(--ease)}
.mega-in a:hover{background:var(--green-soft);color:var(--green-dark)}
.mega-in a b{font-weight:600}
.mega-in a span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}

/* La descrizione sotto il nome del comparto: il markup usa <em>, che senza
   regola resta in corsivo alla stessa dimensione del titolo. La regola qui
   sopra era per il contatore numerico, poi togliato. Titolo e descrizione
   vanno incolonnati, non affiancati. */
.mega-in a{flex-direction:column;align-items:flex-start;gap:3px}

.mega-in a em{font-style:normal;font-size:12.6px;line-height:1.45;
  color:var(--muted);letter-spacing:0}

.mega-in a:hover em{color:var(--green-dark)}
/* ── tendina dei servizi: venti voci, quindi a colonne per gruppo ─────
   La tendina dei mercati mostra otto riquadri con descrizione. I servizi
   sono venti: elencarli allo stesso modo darebbe un pannello altissimo.
   Qui si raggruppano come nell'hub /servizi/, quattro colonne di voci
   brevi sotto l'intestazione del gruppo. */
/* Il menu si apre al passaggio del mouse: piu' e' alto, piu' copre la
   pagina e piu' pesa aprirlo per sbaglio. Righe piu' strette e meno vuoto
   sopra: da 507 a circa 400 px, con le stesse voci. */
.mega-in.mega-col{grid-template-columns:repeat(4,1fr);gap:14px 30px;align-items:start}

.mega-g{display:grid;gap:2px;align-content:start}

.mega-t{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}

.mega-col a{display:block;padding:3px 8px;margin:0 -8px;border-radius:8px;
  font-size:14.2px;line-height:1.35;color:var(--ink);text-decoration:none;
  transition:background .14s ease,color .14s ease}

.mega-col a:hover{background:var(--green-soft);color:var(--green-dark)}

/* la tendina delle soluzioni ha quattro voci: una riga sola */
.mega-in.mega-4{grid-template-columns:repeat(4,1fr)}

@media(max-width:1200px){
  .mega-in.mega-col{grid-template-columns:repeat(3,1fr)}
  .mega-in.mega-4{grid-template-columns:repeat(2,1fr)}
}

.mega-foot{grid-column:1/-1;margin-top:8px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.mega-foot p{max-width:78ch;font-size:14px;color:var(--muted)}
/* "Vedi tutte le soluzioni" mandava la freccia sotto il testo, da sola.
   Non era il testo che andava a capo: il collegamento in fondo alla tendina
   e' un <a> dentro .mega-in, quindi prendeva .mega-in a{flex-direction:column},
   la regola che nelle voci della tendina mette la spiegazione sotto
   l'etichetta. Nella tendina Servizi non si vedeva perche' li' .mega-col a
   rimette display:block. Qui si rimette la riga. */
.mega-foot .link{flex-direction:row;align-items:center;gap:9px;
  white-space:nowrap}

/* drawer mobile */
/* Il pannello chiuso va nascosto, non solo spostato fuori dallo schermo.
   Con il solo translateX i suoi 43 collegamenti restavano nell'ordine di
   tabulazione: su un telefono si premeva Tab e si finiva in 43 voci invisibili
   prima di arrivare al contenuto, e un lettore di schermo annunciava tre
   titoletti prima dell'h1 della pagina. visibility esce dall'albero di
   accessibilita' e si puo' animare, quindi lo scorrimento resta. */
.drawer{position:fixed;inset:0;z-index:59;background:var(--paper);padding:96px var(--pad) 40px;
  overflow-y:auto;transform:translateX(100%);visibility:hidden;
  transition:transform .45s var(--ease),visibility .45s var(--ease)}
.drawer[data-open="true"]{transform:none;visibility:visible}
.drawer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dark);
  margin:22px 0 10px}
.drawer a{display:block;padding:12px 0;font-size:19px;font-weight:650;border-bottom:1px solid var(--line)}
.drawer .sub a{font-size:15px;font-weight:500;color:var(--ink-soft)}
@media(max-width:1100px){
  .nav,.hdr>.hdr-in>.btn{display:none}
  .burger{display:block}
}
@media(min-width:1101px){.drawer{display:none}}

/* ── HERO ───────────────────────────────────────────────── */
/* La foto riempie tutta la fascia e il testo ci sta sopra, velato.
   La velatura resta almeno al 72% dove passa il testo: misurata sul pixel
   piu' chiaro delle foto, da' 7,1 di contrasto col bianco. Da li' in poi
   sfuma e lascia vedere l'immagine. */
.hero{background:var(--navy);color:#E8EFF3;position:relative;overflow:hidden;
  isolation:isolate}
.hero-fig{position:absolute;inset:0;z-index:0;margin:0;border-radius:0;
  box-shadow:none;aspect-ratio:auto}
.hero-fig img{width:100%;height:100%;object-fit:cover;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(6,22,41,.94) 0%,rgba(6,22,41,.90) 38%,
             rgba(6,22,41,.74) 58%,rgba(6,22,41,.30) 82%,rgba(6,22,41,.14) 100%),
             radial-gradient(58% 50% at 8% 0%,rgba(31,182,127,.16),transparent 62%)}
.hero-in{position:relative;z-index:2;display:block;max-width:var(--wrap);
  padding-block:clamp(52px,5.4vw,92px);min-height:clamp(340px,31vw,500px);
  display:flex;flex-direction:column;justify-content:center}

/* Apertura corta, per le due pagine di contatto. Chi ci arriva ha gia' deciso
   di scrivere: la fotografia grande gli mette solo distanza fra se' e il
   modulo. Con l'apertura alta 500 px e il modulo in fondo alla pagina, chi
   premeva "Richiedi un'analisi" si trovava davanti una fotografia e nient'altro. */
/* Corta davvero. min-height da sola non bastava: l'altezza la decideva il
   contenuto, e con briciola, occhiello, un h1 da 62 px su due righe e un
   sommario restava a 449 px, con la fotografia che prendeva il 77% del primo
   schermo. Su una pagina il cui scopo e' il modulo, chi arriva deve vedere i
   campi, non una foto. Qui si stringe tutto quello che la fa crescere. */
.hero.corta .hero-in{padding-block:clamp(22px,2vw,34px);
  min-height:0}
.hero.corta .crumb{margin-bottom:12px}
.hero.corta .eyebrow{margin-bottom:8px}
.hero.corta h1{font-size:clamp(26px,2.7vw,38px);line-height:1.1;margin-bottom:12px}
.hero.corta .deck{gap:8px;max-width:70ch}
.hero.corta .deck p:first-child{font-size:clamp(15.5px,1.15vw,17px);line-height:1.5}
/* dal secondo paragrafo in poi il sommario e' contesto, non serve a chi e'
   arrivato per compilare */
.hero.corta .deck p:nth-child(n+2){display:none}
/* Sugli hub il sommario e' lo slogan della sezione e va letto intero: la
   regola qui sopra ne mostrava solo la prima riga e il resto spariva. */
body:has(#lista) .hero.corta .deck p:nth-child(n+2){display:block}
body:has(#lista) .hero.corta .deck{max-width:78ch}
/* il testo di orientamento su una colonna sola, a riga piena */
/* .sez p.intro (due classi) batte .intro.larga: serve almeno la stessa
   forza, se no la riga resta ferma a 80ch anche qui. */
.intro.larga,.sez p.intro.larga,#elenco p.intro.larga{max-width:none}
#elenco h3{margin:26px 0 10px;font-size:clamp(17px,1.5vw,20px)}
.hero-in>div{max-width:min(62%,780px)}
/* Il 62% lascia libero il posto della foto. Se la foto non c'e', quel
   posto resta vuoto e si legge come una colonna rotta: allora il testo
   si prende la riga. */
.hero:not(:has(.hero-fig)) .hero-in>div{max-width:min(88%,1180px)}
@media(max-width:1000px){.hero-in>div{max-width:none}
  /* a schermo stretto il testo copre tutta la foto: velatura piena */
  .hero::before{background:linear-gradient(180deg,rgba(6,22,41,.88),rgba(6,22,41,.95))}}
/* anche il colore va dichiarato: YOOtheme lo impone sui suoi h1-h6 e
   vince sull'ereditarieta' dal contenitore scuro. Senza questa riga il
   titolo dell'apertura resta grigio scuro sul blu: contrasto 1,34 */
.hero h1,.hero h2,.hero h3{color:#fff}
.hero .eyebrow{color:var(--green-on-dark)}
.hero h1{margin-bottom:26px}
.hero .deck{display:grid;gap:16px;max-width:60ch}
.hero .deck p:first-child{font-size:clamp(17.5px,1.4vw,21px);line-height:1.55;color:#DCE8EE}
.hero .deck p{color:#A9BECB}
.hero .btn-row{margin-top:34px}
/* tinta piena: il semitrasparente sopra il gradiente radiale sgranava */
.hero-strip{position:relative;z-index:1;border-top:1px solid rgba(232,239,243,.16);
  background:#04101E}
/* L'hub la usa con quattro voci, la home con tre: le colonne seguono il
   numero di voci, se no resta un quarto di riga vuoto. */
.hero-strip ul:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.hero-strip ul{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr)}
.hero-strip li{padding:26px 30px 26px 0;border-right:1px solid rgba(232,239,243,.16)}
.hero-strip li:last-child{border-right:0}
.hero-strip b{display:block;font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.02em;
  color:#fff;line-height:1.1}
.hero-strip span{display:block;margin-top:6px;font-size:13.6px;color:#9DB3C1}
@media(max-width:820px){.hero-strip ul{grid-template-columns:1fr 1fr}
  /* con tre voci due colonne lascerebbero un orfano in fondo, e tre colonne
     da 111px non si leggono: sotto gli 820px la fascia a tre va in colonna. */
  .hero-strip ul:has(> li:nth-child(3):last-child){grid-template-columns:1fr}
  .hero-strip ul:has(> li:nth-child(3):last-child) li{border-right:0;
    border-bottom:1px solid rgba(232,239,243,.16);padding:18px 0}
  .hero-strip ul:has(> li:nth-child(3):last-child) li:last-child{border-bottom:0}
  .hero-strip li:nth-child(2){border-right:0}}

/* ── blocco split testo/immagine ────────────────────────── */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.4vw,76px);align-items:center}
.split.rev>*:first-child{order:2}
@media(max-width:1000px){.split{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
.split figure{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-hi)}
.split figure img{width:100%}

/* ── card ───────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(14px,1.5vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,1.9vw,30px);display:flex;flex-direction:column;gap:13px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-hi);border-color:#C4D6CE}
.card .badge{width:46px;height:46px;border-radius:12px;background:var(--green-soft);
  display:grid;place-items:center;color:var(--green-text);flex:none}
.card p{color:var(--muted);font-size:15.6px;line-height:1.6}
.card .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-text)}
.dark .card{background:var(--navy-2);border-color:rgba(232,239,243,.12)}
.dark .card:hover{border-color:rgba(95,211,164,.4)}
.dark .card .badge{background:rgba(31,182,127,.16);color:var(--green-on-dark)}
.dark .card p{color:#A9BECB}

/* card servizi: foto in cima al posto dell'icona */
.card.ph{padding:0;overflow:hidden}
.card.ph .shot{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--navy);flex:none}
.card.ph .shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card.ph:hover .shot img{transform:scale(1.05)}
.card.ph .cnt{padding:clamp(20px,1.7vw,26px);display:flex;flex-direction:column;gap:11px;flex:1}

/* espansore "+" */
details.ex{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.dark details.ex{border-color:rgba(232,239,243,.12)}
details.ex summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-size:14.4px;font-weight:650;color:var(--green-dark);padding:4px 0}
details.ex summary::-webkit-details-marker{display:none}
.dark details.ex summary{color:var(--green-on-dark)}
.pm{width:24px;height:24px;flex:none;border-radius:50%;background:var(--green-soft);position:relative}
.dark .pm{background:rgba(31,182,127,.18)}
.pm::before,.pm::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;
  border-radius:2px;transition:transform .35s var(--ease)}
.pm::before{width:10px;height:1.8px;transform:translate(-50%,-50%)}
.pm::after{width:1.8px;height:10px;transform:translate(-50%,-50%)}
details.ex[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
details.ex .in{padding-top:11px}
details.ex .in p{font-size:15.2px}
details.ex .in p+p{margin-top:11px}

/* problemi: accordion a piena larghezza */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  gap:18px;align-items:center;padding:24px 4px;transition:background .25s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--paper)}
.fog .acc summary:hover{background:rgba(255,255,255,.7)}
.acc .t{font-size:clamp(17px,1.45vw,22px);font-weight:700;letter-spacing:-.014em;line-height:1.28}
/* La misura di lettura non vale nel pannello della fisarmonica: e' largo
   quanto la riga e ne lasciava vuoto un terzo, mentre le righe chiuse
   sopra e sotto arrivano al bordo. Sono paragrafi da due o tre righe. */
.acc .body{padding:0 4px 26px;max-width:none}

/* metodo */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.3vw,20px);position:relative}
@media(max-width:1180px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 28px;position:relative}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--green-dark);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:16px;margin-bottom:18px}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);font-size:15.2px;line-height:1.58}

/* chip settori */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips li{padding:9px 17px;border-radius:999px;background:var(--paper);border:1px solid var(--line);
  font-size:14.6px;color:var(--ink-soft);transition:border-color .3s var(--ease),color .3s var(--ease)}
.chips li:hover{border-color:var(--green);color:var(--green-dark)}

/* tile industrie */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,20px)}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;display:block;
  background:var(--navy)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover img{transform:scale(1.045)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,22,41,.92) 0%,rgba(6,22,41,.45) 40%,rgba(6,22,41,.06) 100%)}
.tile-t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:#fff}
.tile-t b{display:block;font-size:clamp(16px,1.25vw,19px);font-weight:700;letter-spacing:-.012em;
  line-height:1.24}
.tile-t span{display:none}

/* KPI */
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:760px){.kpi{grid-template-columns:1fr}}
.kpi li{display:flex;gap:13px;align-items:flex-start;padding:16px 24px 16px 0;
  border-bottom:1px solid var(--line);font-size:15.8px;color:var(--ink-soft)}
.kpi svg{width:20px;height:20px;flex:none;color:var(--green);margin-top:2px}

/* saggio editoriale */
.essay{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,72px);align-items:start}
@media(max-width:1000px){.essay{grid-template-columns:1fr}}
.essay-b p{color:var(--muted);font-size:16.6px;line-height:1.7;max-width:var(--read)}
.essay-b p+p{margin-top:17px}

/* FAQ due colonne */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,52px)}
@media(max-width:900px){.faq{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;
  align-items:center;padding:20px 0;font-size:16.6px;font-weight:650;line-height:1.36}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-dark)}
.faq .a{padding:0 0 20px;color:var(--muted);font-size:15.6px;line-height:1.62;max-width:64ch}

/* CTA con form */
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,64px);align-items:start}
@media(max-width:1000px){.cta-grid{grid-template-columns:1fr}}
.checks{display:grid;gap:12px;margin:28px 0 0}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#CFE0E8}
.checks svg{width:21px;height:21px;flex:none;color:var(--green-on-dark);margin-top:2px}
.form{background:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,34px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.6)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.form .row{grid-template-columns:1fr}}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13.4px;font-weight:650;color:var(--ink-soft);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border-radius:var(--r);
  border:1.5px solid var(--line);background:#FCFDFC;font:inherit;font-size:15.4px;color:var(--ink);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.field textarea{min-height:112px;resize:vertical}
/* senza outline:0 — l'anello globale deve restare l'indicatore di fuoco */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--green-text);background:#fff}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.6px;color:var(--muted);
  margin:6px 0 18px;line-height:1.5}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--green)}
.consent a{color:var(--green-dark);font-weight:600;text-decoration:underline}
.form .btn{width:100%;justify-content:center}
.fine{margin-top:26px;font-size:14.4px;color:#8FA8B6;max-width:62ch}

/* risorse */
.res{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.res:hover{transform:translateY(-3px);box-shadow:var(--sh-hi)}
.res img{aspect-ratio:16/9;object-fit:cover;width:100%}
.res .in{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.res .k{font-size:11.6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-text)}
.res h3{line-height:1.28}
.res p{color:var(--muted);font-size:15.2px;line-height:1.58}
.res .link{margin-top:auto;padding-top:6px}
.placeholder{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:#FFF6E5;color:#8A6314;font-size:13px;font-weight:650;border:1px solid #F0DCB4}

/* ── FOOTER ─────────────────────────────────────────────── */
.ft{background:var(--navy);color:#A9BECB;padding-block:clamp(56px,6vw,92px) 0}
.ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(22px,2.6vw,44px)}
@media(max-width:1100px){.ft-top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-top{grid-template-columns:1fr}}
.ft-brand img{height:44px;width:auto;margin-bottom:20px}
.ft-brand p{font-size:15px;line-height:1.62;color:#93AAB8;max-width:34ch}
.ft-data{margin-top:24px;display:grid;gap:11px}
.ft-data li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#CFE0E8}
.ft-data svg{width:19px;height:19px;flex:none;color:var(--green-on-dark);margin-top:3px}
.ft-data a:hover{color:var(--green-on-dark)}
.ft h4{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-on-dark);margin-bottom:17px}
/* il distacco del gruppo "unisci" (quello che non apre una colonna nuova):
   oggi lo scrive menu-klc.php in un attributo style con lo stesso valore,
   preso dall'option klc_piede_margine_unisci (predefinito 26px), e uno
   stile in linea vince su questa riga. Quando quello stile sparira',
   comanda questa regola: stesso numero, nessuno spostamento. */
.ft h4.unisci{margin-top:26px}
.ft ul.links li{margin-bottom:11px;font-size:14.8px}
.ft ul.links a{transition:color .25s var(--ease)}
.ft ul.links a:hover{color:#fff}
.ft-bar{margin-top:clamp(38px,4.4vw,68px);border-top:1px solid rgba(232,239,243,.13);
  padding-block:24px;display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center;font-size:14px}
.ft-bar a:hover{color:var(--green-on-dark)}
.ft-bar .sep{color:rgba(169,190,203,.4)}
.ft-bar .right{margin-left:auto;color:#7D95A4}
@media(max-width:760px){.ft-bar .right{margin-left:0}}

/* bersagli tattili: su mobile ogni link cliccabile arriva a 44px */
@media(max-width:760px){
  .ft ul.links li{margin-bottom:2px}
  .ft ul.links a,.ft-bar a,.ft-data a{display:inline-flex;align-items:center;min-height:44px}
  .link{min-height:44px}
  .chips li{padding:12px 18px}
  .mega-in a{min-height:44px;align-items:center}
}

/* rivelazione */
/* La comparsa allo scroll e' un abbellimento, non una condizione per
   leggere. Con .rise{opacity:0} come stato di partenza, se il JavaScript non
   gira — disattivato, in errore, file non arrivato — il 95% del testo della
   home restava invisibile e la pagina sembrava vuota.
   Ora si nasconde SOLO cio' che il JavaScript ha preso in carico: la classe
   "armed" la mette lo script subito prima di mettersi a osservare
   l'elemento. Se lo script non gira, niente e' armato e tutto si legge; se
   gira, arma e rivela nello stesso fotogramma, quindi non c'e' nessun
   lampo di contenuto. */
.rise{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.armed{opacity:0;transform:translateY(26px)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rise.armed{opacity:1;transform:none;transition:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}

/* ── fasce di richiamo, riutilizzabili su tutte le pagine ─────────
   Due varianti: .chiara su fondo nebbia, .scura su verde pieno.
   Nella variante scura il pulsante si inverte: bianco con testo verde,
   perche' il verde chiaro con testo bianco non e' leggibile.        */
.ctasez,.sec.ctasez{padding-block:clamp(30px,3.4vw,52px)}
.ctaband{display:grid;grid-template-columns:1fr auto;gap:clamp(18px,2.4vw,40px);
  align-items:center;border-radius:var(--r-lg);padding:clamp(20px,2.2vw,30px) clamp(22px,2.4vw,34px)}
@media(max-width:900px){.ctaband{grid-template-columns:minmax(0,1fr)}}
/* Le tracce "auto" e "fr" non scendono sotto il min-content del loro
   contenuto: con un'etichetta lunga la fascia si gonfiava oltre lo
   schermo. Su telefono una colonna sola, e tutto puo' restringersi. */
@media(max-width:700px){
  .ctaband,.ctasez.scura .ctaband{grid-template-columns:minmax(0,1fr)}
  .ctaband .tx,.ctaband .btn{min-width:0;max-width:100%}
  .ctaband .btn{justify-content:center}
}
.ctaband .tx{display:grid;gap:6px}
.ctaband b{font-size:clamp(17px,1.6vw,21px);line-height:1.25;letter-spacing:-.014em}
.ctaband span{font-size:14.6px;line-height:1.55}
.ctaband .btn{white-space:nowrap}

.ctasez.chiara .ctaband{background:var(--fog);border:1px solid var(--line)}
.ctasez.chiara b{color:var(--ink)}
.ctasez.chiara span{color:var(--muted)}

/* verde piu' profondo del --green-dark: sul #12865D il sottotitolo bianco
   all'86% si fermava a 3,81 di contrasto. Su #0C6B49 arriva a 5,28 e la
   gerarchia titolo/sottotitolo resta visibile */
.ctasez.scura .ctaband{background:var(--green-text);color:#fff;
  grid-template-columns:auto 1fr auto}
@media(max-width:900px){.ctasez.scura .ctaband{grid-template-columns:auto 1fr}
  .ctasez.scura .btn{grid-column:1/-1;justify-content:center}}
.ctasez.scura b{color:#fff}
.ctasez.scura span{color:rgba(255,255,255,.86)}
.ctasez.scura .ic{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;color:#fff;flex:none}
.ctasez.scura .ic svg{width:25px;height:25px}
/* dentro la fascia verde il pulsante pieno si inverte: bianco con testo verde */
.ctasez.scura .btn{background:#fff;color:var(--green-dark);box-shadow:none}
.ctasez.scura .btn:hover{background:#EAF7F1;color:#0A5C3F}

/* ── pulsante "torna in cima" ─────────────────────────────────────
   visibility invece di display: cosi' sparisce dall'ordine di
   tabulazione quando non si vede, ma la comparsa resta sfumata.
   z-index sotto al menu a tendina del telefono (59), che deve coprirlo */
.su{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:50;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--green-dark);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 20px -6px rgba(11,24,34,.4);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),
             visibility .3s,background .25s var(--ease)}
.su.vedi{opacity:1;visibility:visible;transform:none}
.su:hover{background:var(--green-text)}
.su svg{width:21px;height:21px}
@media(prefers-reduced-motion:reduce){.su{transition:opacity .01s,visibility .01s}}

/* la briciola sta dentro il blocco del testo, non sopra: cosi' lo spazio
   sotto la barra e' identico su tutte le pagine, con o senza briciola */
.hero .crumb{padding:0;margin-bottom:clamp(18px,2vw,30px);font-size:14px;color:#9DB3C1}
.hero .crumb ol{list-style:none;margin:0;padding:0;display:flex;gap:10px;
  flex-wrap:wrap;align-items:center}
.hero .crumb a:hover{color:var(--green-on-dark)}
.hero .crumb .sep{opacity:.5}
.hero .crumb [aria-current]{color:#E8EFF3;font-weight:600}

/* ══════════════════════════════════════════════════════════════════════
   ARTICOLI DEL BLOG
   Gli articoli non passano dal generatore delle pagine: li rende il modello
   di YOOtheme, che li consegnava col suo aspetto e non con quello del sito —
   titolo da 42 px in Playfair Display, paragrafi con margine zero uno
   attaccato all'altro, e righe di testo larghe 1200 px, illeggibili.
   Qui l'articolo prende la veste del sito. I selettori sono quelli di
   YOOtheme (.uk-article dentro .tm-main), non se ne possono cambiare.
   ══════════════════════════════════════════════════════════════════════ */

.uk-article{max-width:none}
/* Il titolo dell'articolo usa tutta la larghezza, come la fotografia sopra:
   incolonnarlo a 24 caratteri lasciava mezza pagina vuota a destra. Nelle
   schede dell'indice vale un'altra regola, piu' avanti, che lo rimpicciolisce. */
.uk-article-title{font-family:inherit!important;font-weight:800!important;
  letter-spacing:-.03em!important;line-height:1.08!important;
  font-size:clamp(30px,4vw,52px)!important;color:var(--ink);
  max-width:none;margin:0 0 18px!important;text-wrap:balance}

/* la riga dei dati la disegniamo noi: quella di YOOtheme rimanda a un
   archivio per autore che Rank Math tiene fuori dall'indice, cioe' un
   collegamento verso una pagina che non deve esistere.
   Spenta pero' con una leva, non con una condanna: il predefinito e' none,
   identico a ieri, e si riaccende dal pannello con una riga nel Custom CSS
   di YOOtheme — :root{--klc-firma-articolo:block} — senza rigenerare
   niente. Il !important non serve: YOOtheme non dichiara mai display su
   .uk-article-meta (verificato sul theme.1.css online, che comunque carica
   prima di questo foglio) e la specificita' qui e' piu' alta. */
.uk-article>.uk-article-meta{display:var(--klc-firma-articolo,none)}
.art-dati{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin:0 0 30px}
.art-dati a{color:var(--green-text)}
.art-dati a:hover{text-decoration:underline}

/* Il corpo. La misura di lettura e' la cosa che cambia di piu': una riga di
   testo continuo oltre gli 80 caratteri si perde, e qui erano oltre 150. */
.uk-article>div:not(.uk-article-meta){max-width:74ch}
.uk-article p,.uk-article ul,.uk-article ol{font-size:17px;line-height:1.72;
  color:var(--ink-soft);margin:0 0 20px}
.uk-article h2{font-size:clamp(23px,2.1vw,30px)!important;font-weight:750!important;
  letter-spacing:-.022em!important;line-height:1.22!important;color:var(--ink);
  margin:46px 0 14px!important;max-width:34ch}
.uk-article h3{font-size:clamp(18px,1.5vw,21px)!important;font-weight:700!important;
  letter-spacing:-.014em!important;color:var(--ink);margin:32px 0 10px!important}
.uk-article h2+p,.uk-article h3+p{margin-top:0}
.uk-article strong{font-weight:680;color:var(--ink)}
.uk-article a{color:var(--green-text);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.uk-article a:hover{color:var(--green-dark)}

.uk-article ul,.uk-article ol{padding-left:24px}
.uk-article li{margin-bottom:9px}
/* I pallini erano spariti anche qui, ed era un difetto vero, non una scelta:
   l'azzeramento ul{list-style:none} in cima al foglio prendeva anche gli
   elenchi scritti dentro un articolo, e la riga qui sotto che colora di
   verde il marcatore restava lettera morta, perche' senza list-style il
   marcatore non viene disegnato affatto.
   Il selettore prende solo gli elenchi senza classe, cioe' esattamente
   quelli scritti nel testo dell'articolo. Gli elenchi che il tema costruisce
   e veste da se' — .fonti in fondo all'articolo, .art-cat e .art-altri nella
   colonna laterale, .uk-pagination — hanno una classe e restano come sono.
   Il tipo di marcatore e' governabile senza toccare il file: basta una riga
   in Theme > Style > Custom CSS, per esempio
       :root{--klc-elenco-punti:square; --klc-elenco-numeri:lower-alpha} */
.uk-article ul:not([class]){list-style:var(--klc-elenco-punti,disc)}
.uk-article ol:not([class]){list-style:var(--klc-elenco-numeri,decimal)}
.uk-article li::marker{color:var(--green);font-weight:700}

/* il riquadro di richiamo: nel documento e' lo stile KLCCallout, e senza una
   regola qui usciva come un paragrafo qualunque */
.uk-article .richiamo{margin:30px 0;padding:20px 24px;background:var(--green-soft);
  border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0}
.uk-article .richiamo p{margin:0;font-size:17.5px;font-weight:600;color:var(--ink);
  line-height:1.6}

/* le tabelle: sono dati tecnici, devono restare leggibili e scorrere sul
   telefono invece di allargare la pagina */
.uk-article table{width:100%;max-width:none;border-collapse:collapse;
  margin:26px 0;font-size:15px;display:block;overflow-x:auto}
/* L'intestazione era grigia su bianco e i bordi tutti uguali: la tabella si
   leggeva come un elenco di righe, senza capire dove finisse una colonna.
   Adesso la testata ha il fondo verde chiaro del sito, le righe si alternano
   e la prima colonna e' in evidenza, che e' quella che si legge per prima.
   Il selettore prende anche le tabelle senza <thead>: negli articoli ci sono
   entrambe le forme, e prima meta' restavano senza testata. */
.uk-article th,.uk-article thead th{text-align:left;font-size:12.6px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:700;
  background:var(--green-soft);padding:12px 14px;
  border-bottom:2px solid var(--green);white-space:nowrap}
/* Il contenuto della tabella e' contenuto dell'articolo, non una didascalia.
   Con --muted le due colonne che portano l'informazione — la domanda e il
   rischio — erano il testo piu' chiaro della pagina: 92,108,117 contro il
   24,50,70 della prosa intorno, e due punti di corpo in meno. Chi legge
   arriva alla tabella per trovare la risposta e la trova sbiadita.
   Adesso l'inchiostro e' quello del testo e il corpo sale a 16, che in una
   tabella sta comunque sotto i 17 della prosa senza sembrare una nota. */
.uk-article td,.uk-article tbody td{padding:12px 14px;
  border-top:1px solid var(--line);vertical-align:top;color:var(--ink-soft);
  font-size:16px;line-height:1.55}
.uk-article tbody tr:nth-child(even) td{background:#FAFCFB}
.uk-article td:first-child{color:var(--ink);font-weight:600}
.uk-article table{border:1px solid var(--line);border-radius:var(--r)}

/* il rimando alla pagina di servizio, in fondo */
.uk-article .rimando{margin-top:38px;padding-top:22px;
  border-top:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.uk-article .rimando a{font-weight:650}

/* la navigazione fra articoli che aggiunge YOOtheme */
.uk-article+nav,.tm-main nav.uk-margin-medium{max-width:74ch;margin-top:44px;
  padding-top:20px;border-top:1px solid var(--line);font-size:15px}

@media(max-width:620px){
  .uk-article p,.uk-article ul,.uk-article ol{font-size:16.5px}
  .uk-article-title{max-width:none}
}

/* ── l'immagine in evidenza dell'articolo ──────────────────────────────
   La stampa YOOtheme, sopra il titolo, sia nell'indice sia sull'articolo: al
   tema resta solo da vestirla. Metterla anche dal filtro produceva due copie
   della stessa figura nella stessa pagina, la seconda a meta' articolo. */
/* La fotografia arriva fino al bordo destro, come il titolo: e' l'apertura
   dell'articolo, non un'illustrazione dentro la colonna del testo. */
body.single-post .uk-article>[property="image"]{margin:0 0 34px!important;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);
  max-width:none;height:clamp(300px,39vh,483px)}
body.single-post .uk-article>[property="image"] img,
body.single-post .uk-article>[property="image"] picture{width:100%;height:100%;
  object-fit:cover;display:block}

/* ── l'indice del blog, e gli archivi per categoria ────────────────────
   YOOtheme li impagina come un elenco a piena larghezza, uno per riga, e
   stampava ogni articolo PER INTERO: quattro pezzi da 1200 parole in una
   pagina che deve far scegliere che cosa leggere. Il contenuto lo accorcia un
   filtro del tema; qui l'elenco diventa la stessa griglia di schede che usa
   la home, per non introdurre un secondo modo di presentare un articolo.

   Il numero di colonne era il numero 3 scritto dentro la regola, e con esso
   l'opzione "Columns" del modello blog di YOOtheme smetteva di contare.
   Adesso i tre numeri stanno in tre variabili — schermo largo, tavoletta,
   telefono — e si cambiano da Theme > Style > Custom CSS senza rigenerare
   niente:
       :root{--blog-col:4; --blog-col-tavoletta:2; --blog-col-telefono:1}
   I predefiniti sono 3/2/1, cioe' l'impaginazione di oggi.

   RESTA APERTO, e non si chiude da qui: la lunghezza del cappello e' ancora
   il numero 32 scritto in genera_functions.py (wp_trim_words), quindi il
   filtro excerpt_length di WordPress continua a non contare. Va sostituito
   con apply_filters('excerpt_length', 32) in genera_functions.py, che e'
   file di un altro cantiere: qui si puo' solo segnalarlo. */
body.blog .uk-container>[uk-grid],
body.category .uk-container>[uk-grid],
body.archive .uk-container>[uk-grid],
body.search .uk-container>[uk-grid]{display:grid;
  grid-template-columns:repeat(var(--blog-col,3),minmax(0,1fr));gap:clamp(20px,2.2vw,34px);
  margin:0;max-width:var(--wrap)}
body.blog .uk-container>[uk-grid]>*,
body.category .uk-container>[uk-grid]>*,
body.archive .uk-container>[uk-grid]>*,
body.search .uk-container>[uk-grid]>*{padding-left:0;margin:0;min-width:0}
@media(max-width:1000px){
  body.blog .uk-container>[uk-grid],
  body.category .uk-container>[uk-grid],
  body.archive .uk-container>[uk-grid],
  body.search .uk-container>[uk-grid]{grid-template-columns:repeat(var(--blog-col-tavoletta,2),minmax(0,1fr))}
}
@media(max-width:680px){
  body.blog .uk-container>[uk-grid],
  body.category .uk-container>[uk-grid],
  body.archive .uk-container>[uk-grid],
  body.search .uk-container>[uk-grid]{grid-template-columns:repeat(var(--blog-col-telefono,1),minmax(0,1fr))}
}

/* la scheda: lo stesso aspetto di .res nella home */
body.blog .uk-article,body.category .uk-article,
body.archive .uk-article,body.search .uk-article{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
body.blog .uk-article:hover,body.category .uk-article:hover,
body.archive .uk-article:hover,body.search .uk-article:hover{
  box-shadow:var(--sh-hi);transform:translateY(-2px)}
body.blog .uk-article>[property="image"],body.category .uk-article>[property="image"],
body.archive .uk-article>[property="image"],body.search .uk-article>[property="image"]{
  margin:0!important;aspect-ratio:16/9;overflow:hidden}
body.blog .uk-article img,body.category .uk-article img,
body.archive .uk-article img,body.search .uk-article img{
  width:100%;height:100%;object-fit:cover;display:block}
/* il titolo della scheda non e' il titolo di una pagina: va molto piu' piccolo */
body.blog .uk-article-title,body.category .uk-article-title,
body.archive .uk-article-title,body.search .uk-article-title{
  font-size:clamp(18px,1.5vw,21.5px)!important;line-height:1.28!important;
  font-weight:700!important;letter-spacing:-.015em!important;max-width:none;
  margin:20px var(--pad-card,22px) 0!important;padding:0}
/* La riga di YOOtheme resta nascosta anche qui: diceva "Scritto da admin il
   30 Luglio 2026. Pubblicato in SEO", col nome dell'utente di servizio e un
   collegamento all'archivio per autore che Rank Math tiene fuori dall'indice.
   Su una scheda bastano immagine, titolo e cappello. Stessa leva della
   riga sull'articolo: :root{--klc-firma-articolo:block} la riaccende
   anche qui, il predefinito none e' lo stato di ieri. */
body.blog .uk-article>.uk-article-meta,body.category .uk-article>.uk-article-meta,
body.archive .uk-article>.uk-article-meta,body.search .uk-article>.uk-article-meta{
  display:var(--klc-firma-articolo,none)}
body.blog .uk-article>div:last-of-type,body.category .uk-article>div:last-of-type,
body.archive .uk-article>div:last-of-type,body.search .uk-article>div:last-of-type{
  margin:10px 22px 22px!important;max-width:none;display:flex;
  flex-direction:column;gap:14px;flex:1}
body.blog .uk-article p,body.category .uk-article p,
body.archive .uk-article p,body.search .uk-article p{
  font-size:15px!important;line-height:1.62!important;color:var(--muted);margin:0}
body.blog .uk-article .link,body.category .uk-article .link,
body.archive .uk-article .link,body.search .uk-article .link{margin-top:auto}
/* nell'indice l'immagine e' cliccabile: l'ordine visivo la vuole per prima */
body.blog .uk-article>[property="image"],body.category .uk-article>[property="image"],
body.archive .uk-article>[property="image"],body.search .uk-article>[property="image"]{order:-2}

/* l'intestazione dell'indice: la stampa un'azione del tema su loop_start,
   dentro il contenitore che qui e' una griglia, quindi prende tutte le colonne */
.blog-testa{grid-column:1/-1;margin-bottom:clamp(10px,1.6vw,26px)}
.blog-testa h1{font-size:clamp(30px,3.6vw,50px);margin:0 0 16px}
/* La frase va su una riga sola: a 64ch si fermava a 686 pixel su una riga da
   1165 e andava a capo a meta', come un paragrafo interrotto. */
.blog-testa .lead{max-width:none}
.blog-testa .lead.sotto{margin-top:10px;font-size:16px;color:var(--muted)}

/* ── la colonna del blog: ultimi articoli e argomenti ──────────────────
   L'articolo occupava 74 caratteri di larghezza in una pagina da 1440 px:
   mezzo schermo vuoto a destra, e chi finiva di leggere non aveva niente da
   fare. Il filtro del tema stampa la colonna DOPO il contenuto, perche' e'
   l'unico punto in cui si puo' aggiungere senza toccare il modello di
   YOOtheme; qui la griglia la riporta a sinistra, dove l'ha chiesta il
   committente. */
/* Il selettore deve essere [property="text"], non la classe: il contenitore
   dell'immagine in evidenza porta la stessa uk-margin-medium-top, e prenderlo
   nella griglia schiacciava la foto dentro la colonna da 260 px. YOOtheme
   marca i due contenitori con property="image" e property="text": e' l'unica
   cosa che li distingue. */
body.single-post .uk-article>div[property="text"]{max-width:none}
/* Il testo si espande fino alla colonna degli approfondimenti invece di
   fermarsi a 74 caratteri: e' la larghezza che ha chiesto il committente. La
   riga cosi' e' lunga, quindi l'interlinea sale — sotto, in .art-corpo p. */
body.single-post .art-corpo{max-width:none}
/* Il titolo dell'articolo andava a capo molto prima del bordo: text-wrap
   balance pareggia le righe e su un titolo lungo le accorcia tutte. */
.uk-article-title{text-wrap:pretty!important}

@media(min-width:1100px){
  body.single-post .uk-article>div[property="text"]{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,260px);
    gap:clamp(30px,3.4vw,64px);align-items:start}
  /* il filtro stampa la colonna dopo il contenuto, quindi a destra ci va da
     sola: nessun order da rigirare, e l'ordine del documento coincide con
     quello visivo — chi naviga da tastiera incontra prima l'articolo */
  body.single-post .art-lato{position:sticky;top:96px}
  body.single-post .art-corpo{min-width:0}
}

.art-lato{margin-top:38px}
.art-lato-b+.art-lato-b{margin-top:30px}
.art-lato h2{font-size:12px!important;letter-spacing:.14em!important;
  text-transform:uppercase;font-weight:800!important;color:var(--muted);
  margin:0 0 14px!important;padding-bottom:10px;border-bottom:1px solid var(--line)}
.art-lato ul{list-style:none;margin:0;padding:0}
.art-lato a{color:var(--ink-soft);text-decoration:none}
.art-lato a:hover{color:var(--green-dark)}

.art-cat li{margin-bottom:2px}
.art-cat a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 10px;margin:0 -10px;border-radius:8px;font-size:14.5px;font-weight:600;
  transition:background .2s var(--ease)}
.art-cat a:hover{background:var(--green-soft)}
.art-cat a span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.art-cat .qui a{background:var(--green-soft);color:var(--green-dark)}

.art-altri li{padding:9px 0;border-bottom:1px solid var(--line)}
.art-altri li:last-child{border-bottom:0}
.art-altri a{font-size:14.4px;line-height:1.45;display:block}
.art-lato .link{margin-top:14px;font-size:14px}

@media(max-width:1099px){
  .art-lato{padding-top:26px;border-top:1px solid var(--line)}
  .art-altri li:nth-child(n+8){display:none}
}

/* Riga lunga, interlinea generosa: con la colonna del testo espansa fino agli
   approfondimenti si arriva oltre i 100 caratteri, e a quella misura una
   interlinea stretta fa perdere il rigo. */
body.single-post .art-corpo p,
body.single-post .art-corpo ul,
body.single-post .art-corpo ol{line-height:1.78}
body.single-post .art-corpo h2{max-width:none}

/* il rimando al servizio in coda a ogni blocco del "nostro lavoro" */
.blocco .vai{margin-top:16px}

/* i rimandi ai servizi vicini: righe di collegamento su piu colonne,
   non un elenco puntato — sono scelte, non una lista di cose */
.collegati{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:10px clamp(24px,3vw,52px);margin:0 0 26px;list-style:none;padding:0}
.collegati li{margin:0}
#collegati h3{margin:0 0 14px;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
#collegati h3+ul+h3{margin-top:8px}

/* Due sezioni affiancate dentro una sola fascia: «che cosa comprende il
   progetto» e «a chi e' adatto». Sotto i 900px tornano una sotto l'altra,
   perche' due colonne da meno di 400px non si leggono. */
.affianco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3vw,48px);align-items:start}
.affianco .lato > .eyebrow{display:block;margin-bottom:10px}
.affianco .lato > h2{font-size:clamp(20px,2vw,26px);margin:0 0 16px}
.affianco .lato .col2{columns:auto 1}
@media(max-width:900px){.affianco{grid-template-columns:1fr;gap:34px}}

/* «Testo dopo hero su un'unica colonna»: la misura di lettura fermava i
   paragrafi a 858px dentro una riga da 1425, lasciando un terzo di riga vuoto
   a destra. Con la colonna sola il testo prende tutta la riga. */
.sez p.intro.larga{max-width:none}

/* La parola del titolo che porta alla pagina del servizio.
   Il colore da solo non basta a dire che una parola e' un collegamento: chi
   non distingue il verde dal grigio del titolo non avrebbe nessun segnale.
   Percio' verde E sottolineatura. --green-text e' la variabile che il sito
   tiene apposta per il verde usato come testo: su bianco fa 6,5:1, quindi
   regge anche per chi legge male. Sul fondo scuro serve l'altro verde, che
   qui il contrasto si rovescia.
   La password FTP cambia una volta a settimana: un 530 vuol dire che va
   chiesta a Luca la nuova, non che si e' rotto qualcosa. */
h3 .vai-servizio{color:var(--green-text);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
h3 .vai-servizio:hover,h3 .vai-servizio:focus-visible{color:var(--green-dark);
  text-decoration-thickness:2px}
h3 .vai-servizio:focus-visible{outline:2px solid var(--green);outline-offset:3px;
  border-radius:2px}
.dark h3 .vai-servizio{color:var(--green-on-dark)}
.dark h3 .vai-servizio:hover{color:#8FE3C0}

/* Gli hub /servizi/ e /soluzioni/: una griglia sola, quattro colonne.
   Venti servizi fanno cinque righe piene e quattro soluzioni una riga piena,
   quindi nessuna riga resta a meta'. Classi proprie e non .prob/.probs, che
   sono le schede-problema delle pagine mercato: cambiare quelle qui vorrebbe
   dire toccare 144 pagine per sistemarne due.
   Lo stacco sopra serve: senza, la prima riga di fotografie partiva attaccata
   all'ultima riga del testo introduttivo e sembravano lo stesso blocco. */
.hubgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:clamp(30px,3.2vw,48px)}
@media(max-width:1180px){.hubgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hubgrid{grid-template-columns:1fr}}

.hubcard{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.fog .hubcard{background:#fff}
.hubcard:hover{transform:translateY(-3px);box-shadow:var(--sh-hi);border-color:#C4D6CE}
/* la scheda si alza anche quando il fuoco arriva da tastiera sul titolo */
.hubcard:focus-within{transform:translateY(-3px);box-shadow:var(--sh-hi)}

/* L'immagine e' un pezzo, non una fotografia intera: 16:9 ritagliato, che a
   questa larghezza tiene la scheda leggera e non ruba spazio al testo. */
.hubshot{display:block;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--fog)}
.hubshot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.hubcard:hover .hubshot img{transform:scale(1.04)}

.hubcard .tx{padding:16px 18px 20px;display:flex;flex-direction:column;gap:7px}
/* Il gruppo non si perde: da titolo di sezione diventa occhiello della scheda,
   e le schede restano nell'ordine dei gruppi. */
.hubgrp{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-text)}
.hubcard b{font-size:17px;line-height:1.32;display:block}
/* Il collegamento e' il titolo, non tutta la scheda: il paragrafo sotto resta
   testo. Per questo l'unico che si sottolinea e si colora e' il titolo. */
.hubcard b a{color:var(--ink);text-decoration:none}
.hubcard:hover b a,.hubcard b a:hover{color:var(--green-dark);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hubcard b a:focus-visible{outline:2px solid var(--green);outline-offset:3px;
  border-radius:2px}
.hubcard p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}


/* ---- componenti della pagina settore ---- */

/* ══ Pagina settore — impianto grafico del pacchetto ChatGPT v1 ═════
   Ricostruito sul mockup 1440px: hero scuro con foto dentro, indice
   appiccicato a destra, card centrate, sequenza orizzontale numerata,
   banda scura a colonne, griglia dell'architettura, FAQ con riquadro.  */


/* ── impaginazione: contenuto + indice ───────────────────────────── */
/* senza indice laterale il contenuto occupa tutta la larghezza */
.pag{padding-block:clamp(28px,3.4vw,46px)}

/* ── sezioni: nessun numero a vista, la numerazione sta nell'indice ─ */
/* Un filo piu' strette: a 54px di sopra e sotto, con dodici sezioni, il
   vuoto sommato diventa mezza pagina. */
.sez{padding-block:clamp(26px,3vw,44px);scroll-margin-top:96px}

/* Un problema solo non e' una griglia di schede: e' un paragrafo. Il
   riquadro a tutta larghezza con dentro tre righe di testo si leggeva
   come un buco nella pagina. */
.probs:has(>.prob:only-child){display:block}
/* ...ma non nell hub dei servizi: li le schede sono collegamenti, e un gruppo
   con un servizio solo deve restare una scheda come le altre, non un riquadro
   a tutta riga. Era l altra meta della pagina spezzata. */
.grp .probs:has(>.prob:only-child){display:grid}
.grp .probs:has(>.prob:only-child) .prob{background:var(--paper);
  border:1px solid var(--line);padding:26px 20px 24px}
.fog .grp .probs:has(>.prob:only-child) .prob{background:#fff}
.probs:has(>.prob:only-child) .prob{background:none;border:0;box-shadow:none;padding:0}

/* Il blocco «perche' oggi non porta richieste»: niente icone e testo
   allineato a sinistra. Le iconcine non dicono niente — una lente sopra un
   paragrafo di quattrocento parole non aiuta a capire — e il testo centrato
   su righe lunghe si legge male: l'occhio non trova dove ricomincia la riga.
   Vale solo qui: altrove le schede sono corte e l'icona ha senso. */
#problema .prob{align-items:flex-start;text-align:left}
/* La scheda lunga smette di essere una scheda: niente riquadro, corpo da
   testo. Il CSS non sa contare i caratteri, la classe la mette il
   costruttore quando il testo supera la soglia. */
.prob.lunga{background:none!important;border:0;box-shadow:none;padding:0;
  align-items:flex-start;text-align:left;gap:6px}
.prob.lunga:hover{border-color:transparent;box-shadow:none;transform:none}
.prob.lunga .ic{display:none}
.prob.lunga b{font-size:clamp(19px,1.5vw,22px);line-height:1.25;margin-bottom:4px}
.prob.lunga p{font-size:17px;line-height:1.65}
.prob.lunga p + p{margin-top:16px}
#problema .prob .ic{display:none}
#problema .probs:has(>.prob:only-child) .prob:hover{border-color:transparent;
  box-shadow:none;transform:none}
#problema .probs:has(>.prob:only-child) .prob b{font-size:clamp(19px,1.5vw,22px);
  line-height:1.25;margin-bottom:2px}
#problema .probs:has(>.prob:only-child) .prob p{font-size:17px;line-height:1.65}
#problema .probs:has(>.prob:only-child) .prob p + p{margin-top:16px}
.sez+.sez{border-top:1px solid var(--line)}
.sez h2{font-size:clamp(22px,2.3vw,30px);line-height:1.18;letter-spacing:-.016em;
  font-weight:800;margin-bottom:16px;text-wrap:balance}
.sez>.wrap>p,.sez p.intro{color:var(--muted);max-width:74ch;line-height:1.65}
.sez p.intro+p.intro{margin-top:11px}
.sez.fog{background:var(--fog)}
/* le fasce colorate vanno da bordo a bordo: il contenuto resta
   centrato dal .wrap interno di ogni sezione */

/* ── hero: pannello scuro, foto dentro, due pulsanti visibili ────── */
/* il pulsante secondario su fondo scuro deve avere bordo e testo bianchi */

/* ── quello che facciamo e quello che non promettiamo ────────────── */
.promesse{background:var(--fog);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px}
.promesse .t{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-text);margin-bottom:14px}
.promesse ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.promesse li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  font-size:15px;line-height:1.5;color:var(--ink)}
.promesse .si{width:22px;height:22px;border-radius:50%;background:var(--green-dark);
  color:#fff;display:grid;place-items:center;margin-top:1px}
.promesse .si svg{width:13px;height:13px}
.promesse .nota{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.2px;line-height:1.55;color:var(--muted)}

/* ── card problema: icona grande centrata, come nel mockup ───────── */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1000px){.probs{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:620px){.probs{grid-template-columns:1fr!important}}
.prob{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 20px 24px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:12px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.fog .prob{background:#fff}
.prob:hover{border-color:var(--green);box-shadow:var(--sh);transform:translateY(-2px)}
.prob .ic{width:58px;height:58px;border-radius:50%;background:var(--green-soft);
  display:grid;place-items:center;color:var(--green-dark);flex:none}
.prob .ic svg{width:28px;height:28px}
/* Il titolo della scheda non e piu in grassetto: fra le 625 schede delle
   pagine mercato ce nerano con tutto in grassetto, altre con meta, altre
   senza, e la stessa pagina mescolava le forme. Adesso il titolo si distingue
   per colore e dimensione, non per peso, ed e uguale ovunque. */
.prob b{display:block;font-weight:600;font-size:16.4px;line-height:1.32;
  letter-spacing:-.008em;color:var(--green-text);margin-bottom:6px}
#problemi .prob b,#problema .prob b{color:var(--green-text)}
.prob p{font-size:14px;line-height:1.56;color:var(--muted)}
@media(max-width:620px){.prob{flex-direction:row;text-align:left;align-items:flex-start}
  .prob .ic{width:46px;height:46px}.prob .ic svg{width:23px;height:23px}
  .prob .tx{display:grid;gap:6px}}

/* ── sequenza d'acquisto: due righe da cinque, niente scorrimento ── */
/* La voce sola, quella che non e' piu' una fisarmonica: titolo, paragrafi e
   basta. Aria fra i paragrafi, che erano a 11px l'uno dall'altro. */
.appro.sola{max-width:none}
.appro.sola h3{margin:0 0 14px;font-size:clamp(19px,1.5vw,22px)}
/* «Tutta su una riga»: il paragrafo prende tutta la larghezza, non la misura
   di lettura stretta. Con la colonna unica e le schede intorno larghe uguale,
   il testo incassato lasciava mezza riga vuota a destra. */
.appro.sola p{max-width:none}
.appro.sola p + p{margin-top:16px}
.sez .appro.sola p.intro{max-width:none;margin-top:16px}
.sez .appro.sola p.intro:first-of-type{margin-top:0}

/* La striscia dei passi finiva attaccata alle schede sotto: il numero 1 e la
   prima scheda si toccavano e sembravano lo stesso blocco. Serve aria fra i
   due, che sono due cose diverse. */
.tl{position:relative;margin-bottom:clamp(30px,3.4vw,52px)}
.tl + .blocchi,.tl + .duo{margin-top:clamp(30px,3.4vw,52px)}
.tl ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:30px 0}
.tl li{position:relative;padding:0 14px;text-align:center;display:block}
.tl li::before{content:"";position:absolute;top:18px;left:0;right:0;height:2px;
  background:var(--line);z-index:0}
/* la linea di collegamento si ferma ai bordi di ogni riga */
.tl li:nth-child(5n+1)::before{left:50%}
.tl li:nth-child(5n)::before{right:50%}
.tl li:last-child::before{right:50%}
@media(max-width:1000px) and (min-width:900.02px){.tl ol{grid-template-columns:repeat(4,1fr)}
  .tl li:nth-child(5n+1)::before{left:0}.tl li:nth-child(5n)::before{right:0}
  .tl li:nth-child(4n+1)::before{left:50%}.tl li:nth-child(4n)::before{right:50%}
  .tl li:first-child::before{left:50%}}
.tl .p{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  background:var(--green-dark);color:#fff;font-weight:800;font-size:14.5px;
  display:grid;place-items:center;margin:0 auto 14px;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px var(--paper)}
.fog .tl .p{box-shadow:0 0 0 6px var(--fog)}
.tl .tx{display:block}
.tl b{display:block;font-size:14.2px;line-height:1.3;margin-bottom:6px;letter-spacing:-.008em}
.tl .d{display:block;font-size:13px;line-height:1.5;color:var(--muted);
  max-width:24ch;margin:0 auto}
/* sotto i 900px la fila diventa una colonna: numero a sinistra, testo a destra */
@media(max-width:900px){
  .tl ol{grid-template-columns:1fr;gap:0}
  .tl li{display:grid;grid-template-columns:38px 1fr;gap:16px;text-align:left;
    padding:0 0 20px;align-items:start}
  .tl li::before,.tl li:nth-child(5n+1)::before,.tl li:nth-child(5n)::before{
    content:"";top:44px;bottom:-4px;left:18px;right:auto;width:2px;height:auto}
  .tl li:last-child::before{display:none}
  .tl .p{margin:0;box-shadow:none}
  .tl .tx{padding-top:7px}
  .tl b{font-size:15px;margin-bottom:4px}
  .tl .d{font-size:13.6px}
}

/* ── blocchi "come li risolviamo": icona + titolo ────────────────── */
/* Due colonne, una scheda per cella: prima le schede si accoppiavano a due
   a due solo se erano entrambe corte, e le altre restavano da sole a riga
   intera — due strette, una larga, due strette, che sembra un errore. */
.blocchi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);align-items:start}
.blocchi > .duo{grid-column:1/-1}
.blocco.larga{grid-column:1/-1}
/* Una scheda sola in griglia lasciava mezza riga vuota a destra: prende
   tutte e due le colonne. */
.blocchi:has(> .blocco:only-child) > .blocco{grid-column:1/-1}
@media(max-width:820px){.blocchi{grid-template-columns:1fr}}
.blocco{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px)}
.fog .blocco{background:#fff}
.blocco>.cap{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;
  margin-bottom:14px}
.blocco .ic{width:46px;height:46px;border-radius:13px;background:var(--green-soft);
  display:grid;place-items:center;color:var(--green-dark);flex:none}
.blocco .ic svg{width:23px;height:23px}
.blocco h3{font-size:19px;line-height:1.25;letter-spacing:-.014em;font-weight:800}
.blocco p{color:var(--muted);line-height:1.65;font-size:15px;max-width:78ch}
.blocco p+p{margin-top:10px}

/* ── griglia dell'architettura del sito ──────────────────────────────
   Erano riquadri tutti identici in fila: la sezione risultava piatta.
   Ora sono schede con il numero in alto, il testo sotto e un filo verde
   che compare al passaggio del mouse. */
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:12px;
  margin-top:20px}
.arch .v{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px 16px 17px;display:grid;gap:11px;
  align-content:start;justify-items:start;
  transition:transform .28s var(--ease),border-color .28s var(--ease),
             box-shadow .28s var(--ease)}
.fog .arch .v{background:#fff}
.arch .v::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--green);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease)}
.arch .v:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:var(--sh)}
.arch .v:hover::before{transform:scaleY(1)}
.arch .v .k{width:30px;height:30px;border-radius:9px;background:var(--green-soft);
  color:var(--green-text);display:grid;place-items:center;font-size:12.5px;
  font-weight:800;font-variant-numeric:tabular-nums;flex:none;
  transition:background .28s var(--ease),color .28s var(--ease)}
.arch .v:hover .k{background:var(--green-dark);color:#fff}
.arch .v .t{font-size:14.4px;line-height:1.38;color:var(--ink);font-weight:600}

/* ── riquadro verde chiaro per gli asset ─────────────────────────── */
.assetbox{background:var(--green-soft);border:1px solid rgba(18,134,93,.22);
  border-radius:var(--r-lg);padding:22px 24px;margin-top:20px}
.assetbox b{display:block;font-size:15.5px;margin-bottom:9px;color:var(--green-text)}
.assetbox p{font-size:14.4px;line-height:1.6;color:var(--ink-soft);max-width:none}

/* ── banda scura a colonne ───────────────────────────────────────── */
.banda{background:var(--navy);color:#E8EFF3;border-radius:var(--r-lg);
  padding:clamp(28px,3vw,42px)}
.banda h2{color:#fff;margin-bottom:6px}
.banda .intro,.banda p.intro{color:#A9BECB;max-width:74ch}
.banda .col{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0;margin-top:26px}
.banda .col>div{padding:4px 24px;border-left:1px solid rgba(255,255,255,.12);
  display:grid;gap:12px;justify-items:center;text-align:center}
.banda .col>div:first-child{border-left:0;padding-left:0}
@media(max-width:620px){.banda .col>div{border-left:0;padding:18px 0;
    border-top:1px solid rgba(255,255,255,.12);justify-items:start;text-align:left}
  .banda .col>div:first-child{border-top:0;padding-top:0}}
.banda .ic{width:52px;height:52px;border-radius:50%;background:rgba(95,211,164,.14);
  display:grid;place-items:center;color:var(--green-on-dark);flex:none}
.banda .ic svg{width:25px;height:25px}
.banda .col p{font-size:14.2px;line-height:1.58;color:#A9BECB;max-width:34ch;margin:0}

/* ── due colonne, elenchi con icona, checklist ───────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,44px)}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.ico-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.ico-list li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.ico-list .ic{width:34px;height:34px;border-radius:9px;background:var(--green-soft);
  display:grid;place-items:center;color:var(--green-dark);flex:none}
.ico-list b{display:block;font-size:14.8px;margin-bottom:3px;line-height:1.3}
.ico-list span{font-size:13.8px;line-height:1.5;color:var(--muted)}

.check{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.check.due{grid-template-columns:1fr 1fr;gap:10px 26px}
@media(max-width:760px){.check.due{grid-template-columns:1fr}}
.check li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  font-size:14.8px;line-height:1.5;color:var(--ink-soft)}
.check .ico{color:var(--green-dark);width:20px;height:20px;margin-top:2px}

/* ── argomenti vicini ────────────────────────────────────────────── */
.vicini{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.fog .vicini{background:#fff}
.vicini a{display:grid;grid-template-columns:auto 1.1fr 1.4fr auto;gap:16px;align-items:center;
  padding:15px 20px;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
.vicini a:last-child{border-bottom:0}
.vicini a:hover{background:var(--green-soft)}
.vicini .ic{width:36px;height:36px;border-radius:10px;background:var(--green-soft);
  display:grid;place-items:center;color:var(--green-dark)}
.vicini b{font-size:14.8px;line-height:1.3}
/* la colonna accanto non e' piu' un percorso URL ma la frase che spiega
   perche' quella pagina e' vicina: va letta come testo, non come codice,
   e su due righe se serve */
.vicini .u{font-size:13.2px;color:var(--muted);line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vicini .go{color:var(--green-text);flex:none}
@media(max-width:900px){.vicini a{grid-template-columns:auto 1fr auto}.vicini .u{display:none}}

/* ── settori correlati ───────────────────────────────────────────── */
.corri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1000px){.corri{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:680px){.corri{grid-template-columns:repeat(2,1fr)!important}}

.corr{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 16px;display:grid;gap:11px;justify-items:center;text-align:center;
  min-height:126px;align-content:start;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.fog .corr{background:#fff}
.corr:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:var(--sh)}
.corr .ic{width:44px;height:44px;border-radius:50%;background:var(--green-soft);
  display:grid;place-items:center;color:var(--green-dark)}
.corr .ic svg{width:22px;height:22px}
.corr b{font-size:14px;line-height:1.32;font-weight:650}
.corr .go{color:var(--green-dark);width:18px;height:18px}
/* card con la copertina del settore collegato */
.corr.foto{padding:0;justify-items:stretch;text-align:left;min-height:0;gap:0;
  grid-template-rows:auto 1fr auto;overflow:hidden}
.corr.foto figure{margin:0;aspect-ratio:16/10;background:var(--fog)}
.corr.foto figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease)}
.corr.foto:hover figure img{transform:scale(1.05)}
.corr.foto b{padding:14px 16px 0;font-size:14.6px}
.corr.foto .go{margin:8px 16px 14px}

/* ── FAQ + riquadro CTA ──────────────────────────────────────────── */
/* minmax(0,...) e non "1.25fr .75fr" secco: una traccia fr non scende sotto
   il min-content del suo contenuto, e il riquadro di richiamo contiene un
   pulsante con white-space:nowrap. Su telefono la colonna si gonfiava a
   464px dentro 350 disponibili e sforava lo schermo — invisibile, perche'
   body{overflow-x:clip} taglia invece di far scorrere. */
.faq2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(20px,2.4vw,36px);align-items:start}
@media(max-width:1000px){.faq2{grid-template-columns:minmax(0,1fr)}}
/* dentro il riquadro l'etichetta lunga puo' andare a capo: e' l'unica cosa
   che impediva alla colonna di restringersi */
.ctabox .btn{white-space:normal;text-align:left}
.faq2 details{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  margin-bottom:9px}
.fog .faq2 details{background:#fff}
.faq2 summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  gap:14px;align-items:center;padding:15px 18px;font-size:15.2px;font-weight:600;line-height:1.4}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary:hover{color:var(--green-text)}
.faq2 .pm{color:var(--green-dark)}
.faq2 details[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq2 .a{padding:0 18px 16px;font-size:14.6px;line-height:1.6;color:var(--muted)}
.ctabox{background:var(--navy);color:#E8EFF3;border-radius:var(--r-lg);padding:28px 26px 30px}
.ctabox h3{color:#fff;font-size:20px;line-height:1.25;margin-bottom:12px}
.ctabox p{color:#A9BECB;font-size:14.6px;line-height:1.6;margin-bottom:22px}
.ctabox .btn-row{flex-direction:column;align-items:stretch}
.ctabox .btn{justify-content:center}

/* ── form finale ─────────────────────────────────────────────────── */
.formsec{background:var(--fog);border-top:1px solid var(--line)}
/* .form2 e' l'impaginazione della sezione finale: testo a sinistra, modulo a
   destra. Vale solo dove c'e' quella sezione. */
.form2{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3vw,52px);
  align-items:start}
@media(max-width:900px){.form2{grid-template-columns:1fr}}

/* Lo stile dei campi sta su .campi, non su .form2.
   Il modulo di Contact Form 7 avvolge sempre tutto in <div class="campi">,
   quindi .campi c'e' su tutte e 177 le pagine; .form2 no. Nella home il
   modulo sta dentro la fascia di chiusura, che non e' una .form2: i campi
   uscivano con l'aspetto predefinito del browser — riquadri grigi di sistema
   su fondo navy — e il collegamento all'informativa era indistinguibile dal
   testo intorno. Legandoli a .campi, la home si allinea alle altre 176 senza
   toccare nessuna impaginazione. */
.campi{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.campi{grid-template-columns:1fr}}
.campi label{display:block}
.campi label.full{grid-column:1/-1}
.campi span.l{display:block;font-size:13px;font-weight:650;color:var(--ink-soft);margin-bottom:6px}
.campi .req{color:#C0392B}
.campi input,.campi textarea,.campi select{width:100%;padding:12px 14px;border-radius:var(--r);
  border:1.5px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--ink)}
.campi textarea{min-height:92px;resize:vertical}
/* Niente outline:0. L'alone verde chiaro che lo sostituiva sta a 2,02:1 sul
   bianco, sotto il minimo di 3:1 richiesto per un indicatore di fuoco: chi
   naviga da tastiera non vedeva su quale campo si trovava. L'anello globale
   resta, l'alone lo rinforza. */
.campi input:focus-visible,.campi textarea:focus-visible,.campi select:focus-visible{
  border-color:var(--green-text);box-shadow:0 0 0 4px rgba(31,182,127,.18)}
.campi .cons{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.2px;
  color:var(--muted);line-height:1.5}
.campi .cons input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--green)}
.campi .cons a{color:var(--green-text);font-weight:600;text-decoration:underline}

/* Nella fascia scura della home il fondo e' navy: le etichette e la riga del
   consenso devono restare leggibili. */
.dark .campi span.l,.cta-dark .campi span.l{color:#DCE8EE}
.dark .campi .cons,.cta-dark .campi .cons{color:#A9BECB}
.dark .campi .cons a,.cta-dark .campi .cons a{color:var(--green-on-dark)}

/* ── testo lungo su due colonne ──────────────────────────────────── */
/* Due colonne SOLO se ci stanno: "columns:2" secco spezzava in due anche
   un contenitore da 635px, e ne uscivano colonne da 296px, cioe' righe da
   trentacinque caratteri. Con la larghezza minima il browser passa da solo
   a una colonna quando lo spazio non basta. */
.col2{columns:340px 2;column-gap:clamp(30px,3vw,56px);max-width:none}
/* La misura di lettura non vale dentro .col2: li' la larghezza la decide la
   colonna. Serve un selettore piu' forte di ".sez p.intro" (due classi), se no
   quello vince e il paragrafo si ferma a 80ch — visibile quando la colonna e'
   una sola, dove 80ch sono due terzi di riga e l'ultimo terzo resta vuoto. */
.col2>p,.sez .col2>p.intro,.sez>.wrap>.col2>p{break-inside:avoid;max-width:none;margin:0 0 13px}
.col2>p:last-child{margin-bottom:0}
@media(max-width:900px){.col2{columns:1}}
/* Un .col2 con un paragrafo solo non e' un testo su due colonne: e' un testo
   che va a capo a meta' riga e lascia vuota l'altra meta'. Succedeva su
   richiedi-analisi, dove il blocco ne contiene uno solo. */
.col2:has(>p:only-child){columns:1}


/* ── fascia orizzontale con quello che facciamo ──────────────────── */
.promesse.larga{margin-top:26px}
.promesse.larga ul{grid-template-columns:repeat(3,1fr);gap:16px 30px}
@media(max-width:900px){.promesse.larga ul{grid-template-columns:1fr}}

/* ── immagine dentro le schede del metodo ────────────────────────── */
.blocco figure{margin:0 0 18px;border-radius:var(--r);overflow:hidden;
  background:var(--fog);aspect-ratio:16/7}
.blocco figure img{width:100%;height:100%;object-fit:cover;display:block}

/* le fasce di richiamo stanno nel foglio condiviso: qui solo l'accordo
   sui margini, perche' nella pagina settore la sezione e' .sez */
.sez.ctasez{padding-block:clamp(28px,3vw,46px)}

/* ── misura di lettura ───────────────────────────────────────────────
   Tolto l'indice laterale, la colonna passa da ~1050 a ~1560px: senza un
   tetto la riga arriva a 190 caratteri e l'occhio perde il rigo. Le
   griglie di card invece la larghezza in piu' la sfruttano, quindi il
   tetto va messo solo sul testo corrente. */
.promesse .nota{max-width:96ch}
.sez>.wrap>p,.sez p.intro{max-width:80ch}
.faq2 .a{max-width:80ch}

/* la sequenza d'acquisto ha bisogno di respiro: la frase che la introduce e
   quella che la commenta si appiccicavano alla fila dei numeri */
#buyer p.intro{margin-top:22px}
#buyer .tl{margin-top:26px;margin-bottom:10px}

/* il riquadro degli asset e' una nota larga, non una colonna di lettura:
   il testo puo' usare tutta la riga */
.assetbox p{max-width:none}

/* i due paragrafi della sequenza d'acquisto vanno a tutta riga: sono elenchi
   di ruoli e di casi, non testo da leggere riga per riga, e spezzarli in una
   colonna stretta li faceva sembrare tre blocchi diversi */
#buyer p.intro{max-width:none}

/* il testo dentro le schede del metodo va a tutta riga */
.blocco p{max-width:none}

/* piu' aria fra le schede e intestazione staccata dal contenuto */
.blocchi{gap:clamp(22px,2.6vw,38px)}
.blocco>.cap{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.fog .blocco>.cap{border-color:var(--line)}
.blocco .ic{width:50px;height:50px;border-radius:14px}
.blocco .ic svg{width:25px;height:25px}

/* ── carattere grafico della sezione del metodo ──────────────────────
   Il fondo scuro era la strada sbagliata: quella e' la sezione piu' lunga
   della pagina e su fondo pieno competeva con la fascia di apertura, che
   e' gia' scura. Il carattere lo danno il filo verde in cima a ogni
   scheda e il numero grande in filigrana nei riquadri. */
.blocco{position:relative;overflow:hidden}
.blocco::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green) 0%,rgba(31,182,127,.35) 42%,
             rgba(31,182,127,0) 78%)}

.arch .v{position:relative;overflow:hidden;padding:18px 16px 19px;min-height:104px;
  align-content:center}
.arch .v .k{position:absolute;right:2px;bottom:-16px;width:auto;height:auto;
  background:none;border-radius:0;font-size:52px;line-height:1;font-weight:800;
  color:#E4F4EC;letter-spacing:-.04em;z-index:0;pointer-events:none;
  transition:color .3s var(--ease)}
.arch .v .t{position:relative;z-index:1;padding-right:34px}
.arch .v:hover .k{color:#CDEBDD}
.fog .arch .v{background:#fff}

/* il pulsante secondario dentro il riquadro blu delle FAQ: la sua regola era
   scritta insieme a quelle del vecchio hero ed e sparita con loro,
   lasciando testo scuro su fondo scuro */
.ctabox .btn-2{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.ctabox .btn-2:hover{background:rgba(255,255,255,.10);color:#fff;
  box-shadow:inset 0 0 0 1.5px #fff}

/* ── banda "Perché KLC": testo e fotografia ──────────────────────────
   Sulla pagina c'era una sola immagine, quella di apertura. Il bozzetto
   ne aveva una anche a metà pagina, dentro la banda scura: è il secondo
   momento visivo e spezza la sequenza di blocchi di testo. */
.banda-foto{grid-template-columns:1.15fr .85fr;align-items:center;
  gap:clamp(24px,3vw,52px)}
.banda-foto figure{margin:0;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.banda-foto figure img{width:100%;height:100%;object-fit:cover;display:block}
.banda-foto .col{grid-template-columns:1fr;gap:0;margin-top:20px}
.banda-foto .col>div{border-left:0;border-top:1px solid rgba(255,255,255,.12);
  padding:18px 0;justify-items:start;text-align:left;
  grid-template-columns:auto 1fr;display:grid;gap:16px;align-items:center}
.banda-foto .col>div:first-child{border-top:0;padding-top:0}
.banda-foto .col p{max-width:none;margin:0}
@media(max-width:900px){.banda-foto{grid-template-columns:1fr}
  .banda-foto figure{order:-1;aspect-ratio:16/9}}

/* l'occhiello dentro la banda scura usa il verde chiaro */
.banda .eyebrow{color:var(--green-on-dark)}

/* ── stacco a tutta pagina ───────────────────────────────────────────
   Dopo la sezione del metodo la pagina diventa una fila di blocchi di
   testo tutti uguali. La fascia verde esce dal contenitore e taglia la
   pagina da bordo a bordo: e' lo stacco che serve li'. */
.ctasez.piena{padding-block:0;background:#0C6B49}
.ctasez.piena>.wrap{padding-block:clamp(30px,3.4vw,52px)}
.ctasez.piena .ctaband{border-radius:0;padding:0;background:none}

/* ── modulo di Contact Form 7 ────────────────────────────────────────
   Il plugin porta stili suoi che ridipingono il pulsante: qui torna
   quello del sito. Il resto del modulo eredita gia' le nostre classi,
   perche' l'HTML del modulo e' scritto con .campi, .l, .cons, .full. */
/* width:auto: il pulsante era largo quanto la sua colonna, e da quando
   occupa la riga intera "100%" voleva dire 730px di bottone. */
.campi input[type="submit"],.campi .wpcf7-submit{
  -webkit-appearance:none;appearance:none;width:auto;min-width:220px;
  background:var(--green-dark);color:#fff;border:0;border-radius:var(--r);
  padding:15px 26px;font:inherit;font-size:15.5px;font-weight:650;cursor:pointer;
  transition:background .3s var(--ease)}
.campi input[type="submit"]:hover,.campi .wpcf7-submit:hover{background:#0C6B49}
.wpcf7 form .wpcf7-response-output{border-radius:var(--r);border-width:1.5px;
  margin:18px 0 0;padding:12px 16px;font-size:14.6px}
.wpcf7-not-valid-tip{color:#C0392B;font-size:13px;margin-top:5px}
.campi .wpcf7-spinner{margin:0 0 0 12px}
/* il consenso privacy: casella a sinistra, testo accanto */
.campi .cons{display:flex;gap:10px;align-items:flex-start}
.campi .cons .wpcf7-list-item{margin:0}
.campi .cons input[type="checkbox"]{width:18px;height:18px;flex:none;margin-top:2px;
  accent-color:var(--green)}


/* ── approfondimenti: le sezioni tecniche oltre le prime quattro ──────
   Sulle pagine servizio il documento porta 16-23 sezioni. In evidenza ne
   stanno quattro: le altre restano qui, richiudibili. Chi deve decidere
   scorre, chi deve verificare apre. */
.appro{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--line);
  padding-top:clamp(22px,2.4vw,34px)}

/* il cappello di una fisarmonica e' una riga sola: la misura di lettura
   qui la spezzava in due */
.appro>p.intro{max-width:none;margin:0 0 18px}

.appro details{border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;margin-bottom:8px;overflow:hidden}

.fog .appro details{background:#fff}

.appro summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1fr 26px;gap:16px;align-items:center;
  padding:16px 20px;font-size:16.4px;font-weight:650;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink)}

.appro summary::-webkit-details-marker{display:none}

.appro summary:hover{background:var(--green-soft)}

.appro .pm{position:relative;width:26px;height:26px;border-radius:50%;
  background:var(--green-soft);color:var(--green-text);flex:0 0 auto}

.appro .pm::before,.appro .pm::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);background:currentColor}

.appro .pm::before{width:11px;height:2px}

.appro .pm::after{width:2px;height:11px;transition:transform .18s ease}

.appro details[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}

.appro details[open] summary{background:var(--fog);
  border-bottom:1px solid var(--line)}

.appro .in{padding:18px 20px 20px}

.appro .in p{margin:0 0 10px;font-size:15.4px;line-height:1.62;color:var(--ink)}

.appro .in p:last-child{margin-bottom:0}

.appro .in ul.check{margin-top:12px}

@media (max-width:620px){
  .appro summary{padding:14px 16px;font-size:15.4px}
  .appro .in{padding:16px}
}


/* la domanda in apertura: e' il punto in cui la pagina parla a chi legge,
   quindi pesa piu' della riga che la segue */
.hero .deck .dom{font-size:clamp(19px,1.9vw,25px);font-weight:650;line-height:1.3;
  letter-spacing:-.018em;color:#fff;margin-bottom:10px}

.hero .deck .dom+p{font-size:clamp(15.5px,1.35vw,17.6px);color:rgba(255,255,255,.9)}

@media (max-width:760px){.hero .deck .dom{font-size:19px}}


/* ── hub servizi: le stesse schede, ma cliccabili ──────────────────── */
a.prob{text-decoration:none;color:inherit;transition:border-color .16s ease,
  box-shadow .16s ease,transform .16s ease}

a.prob:hover{border-color:var(--green-dark);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(6,22,41,.09)}

a.prob b{color:var(--green-text)}

a.prob:hover b{text-decoration:underline;text-underline-offset:3px}

.hub .grp{margin-top:clamp(26px,3vw,42px)}

.hub .grp:first-child{margin-top:20px}

.hub .grp-h{font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .hub .probs{grid-template-columns:1fr 1fr!important}
}

@media (max-width:620px){
  .hub .probs{grid-template-columns:1fr!important}
}


/* ── recapiti: la pagina contatti deve dare i dati senza farli cercare ── */
.recapiti{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.rec{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;
  background:var(--fog);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px}

.rec .ic{width:40px;height:40px;border-radius:10px;background:var(--green-soft);
  color:var(--green-text);display:grid;place-items:center}

.rec>div{display:grid;gap:3px;min-width:0}

.rec b{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted)}

.rec a,.rec>div>span{font-size:16.4px;line-height:1.4;color:var(--ink);
  text-decoration:none;word-break:break-word}

.rec a{color:var(--green-text);font-weight:650}

.rec a:hover{text-decoration:underline;text-underline-offset:3px}

.rec .nota{font-size:13.2px;color:var(--muted);margin-top:4px}

@media (max-width:900px){.recapiti{grid-template-columns:1fr 1fr}}

@media (max-width:620px){.recapiti{grid-template-columns:1fr}}


/* ── l'intestazione di un accordion e' un titolo ───────────────────────
   Le domande e le voci apribili erano testo dentro <summary>: per un
   lettore di schermo e per i motori la pagina non aveva quei 1238 titoli.
   Il livello h3 va dichiarato, e riportato all'aspetto di prima: senza
   questa regola prenderebbe la dimensione dei titoli di sezione. */
.faq2 summary h3,.appro summary h3,.faq summary h3{
  font:inherit;color:inherit;letter-spacing:inherit;margin:0;display:inline}

.faq2 summary,.appro summary{align-items:center}


/* ── il modulo di Contact Form 7 dentro la nostra griglia ──────────────
   CF7 passa il contenuto per wpautop: avvolge i campi in <p> e aggiunge
   <br>. Il risultato era che dentro .campi finivano 3 contenitori invece
   dei 9 campi, e la griglia a due colonne disponeva quei 3: il modulo
   usciva a metà larghezza con una colonna vuota accanto.
   display:contents fa sparire i contenitori dal calcolo del layout e
   promuove i campi a elementi della griglia, che è quello che serve. */
.campi>p,
.campi>div:not(.cons):not([class*="response"]){display:contents}

.campi br{display:none}

.campi>p>label,
.campi label{display:block}

/* il campo lungo e il consenso occupano tutta la riga */
.campi label.full,
.campi .cons,
.campi [class*="wpcf7-acceptance"]{grid-column:1/-1}

/* wpautop annida un <p> ANCHE dentro i nostri contenitori, non solo come
   figlio diretto di .campi: quel <p> restava l'elemento della griglia e il
   pulsante di invio usciva largo una colonna, con l'altra meta' di riga
   vuota accanto. La regola qui sotto lo prometteva senza riuscirci. */
.campi>div:not(.cons):not([class*="response"])>p{display:contents}

/* il pulsante di invio non deve stare a metà riga */
.campi .wpcf7-submit,
.campi input[type="submit"]{grid-column:1/-1;justify-self:start}

/* La riga del consenso non e' piu' un flex: la frase contiene un link, e
   sciogliendo il <p> di wpautop ogni pezzo diventava un elemento a se' che
   andava a capo per conto suo, con la seconda riga incolonnata sotto la
   casella. Casella fuori dal flusso e testo rientrato: le righe si allineano
   fra loro comunque sia spezzata la frase. */
.campi .cons{display:block}
.campi .cons>p{margin:0}
.campi .cons label{display:flex;gap:10px;align-items:flex-start}
.campi .cons input[type="checkbox"]{flex:none;margin:3px 0 0}

/* Il rosso #C0392B e' tarato sul fondo chiaro: sul navy della home sta a
   3,34 di contrasto, e lo legge chi ha appena sbagliato un campo. */
.dark .campi .req,.cta-dark .campi .req,
.dark .campi .wpcf7-not-valid-tip,.cta-dark .campi .wpcf7-not-valid-tip{color:#FF9A8B}

/* Anche i messaggi vanno su .campi: nella home stavano fuori dalla griglia e
   l'errore di un campo compariva senza posto, a metà riga. */
.campi .wpcf7-response-output,
.wpcf7 .wpcf7-response-output{grid-column:1/-1;margin:8px 0 0;
  border-radius:var(--r-sm);padding:12px 14px;font-size:14px}

.campi .wpcf7-not-valid-tip{font-size:12.6px;color:#C0392B;margin-top:4px}


/* ── la coda discorsiva delle pagine soluzione ────────────────────────
   Era tutta attaccata e con il corpo del testo introduttivo, 17px: accanto
   alle voci dei segnali (14,8px) sembrava fuori scala e schiacciava la
   gerarchia. Stesso corpo e stesso colore delle voci, aria fra i paragrafi
   e piu' stacco sopra ogni titolo, che cosi' si vede che apre un blocco. */
#facciamo > .wrap > h3{margin:38px 0 12px;font-size:clamp(17px,1.5vw,19px);
  letter-spacing:-.008em}
#facciamo > .wrap > h3:first-of-type{margin-top:30px}
#facciamo > .wrap > p.intro.larga{font-size:14.8px;line-height:1.62;
  color:var(--ink-soft);margin:0 0 14px;max-width:none}
#facciamo > .wrap > p.intro.larga:last-child{margin-bottom:0}


/* ---- hub industrie e mercati ---- */

/* ── componenti specifici dell'hub ─────────────────────────────── */
.crumb{padding:18px 0 0;font-size:14px;color:#9DB3C1}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--green-on-dark)}
.crumb .sep{opacity:.5}
.crumb [aria-current]{color:#E8EFF3}

.macros{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,22px)}
@media(max-width:1280px){.macros{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.macros{grid-template-columns:1fr}}
.macro{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.macro:hover{transform:translateY(-3px);box-shadow:var(--sh-hi);border-color:#C4D6CE}
.macro-fig{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.macro-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.macro:hover .macro-fig img{transform:scale(1.05)}
.macro-n{position:absolute;left:14px;bottom:14px;z-index:2;padding:7px 13px;border-radius:999px;
  background:rgba(6,22,41,.82);color:#fff;font-size:12.5px;font-weight:600;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.macro-n b{font-weight:800}
.macro-b{padding:clamp(18px,1.6vw,24px);display:flex;flex-direction:column;gap:10px;flex:1}
.macro-b p{font-size:14.8px;line-height:1.58;color:var(--muted)}
.macro-b .link{margin-top:auto;padding-top:6px;font-size:14.6px}

/* directory */
#macroaree{padding-bottom:clamp(26px,3vw,42px)}
#dir .dirbar{padding-block:12px}
.dirbar-in:empty{display:none}
.fchips{margin-top:0}
.dirbar{position:sticky;top:78px;z-index:30;background:var(--fog);
  border-block:1px solid var(--line);padding:18px 0}
@media(max-width:1100px){.dirbar{top:78px}}
.dirbar-in{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.fchip{padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);
  font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;display:inline-flex;gap:8px;
  align-items:center;transition:border-color .25s var(--ease),color .25s var(--ease),
  background .25s var(--ease)}
.fchip span{font-size:12px;color:var(--muted);font-weight:600}
.fchip:hover{border-color:var(--green);color:var(--green-text)}
.fchip[aria-pressed="true"]{background:var(--green-text);border-color:var(--green-text);color:#fff}
.fchip[aria-pressed="true"] span{color:rgba(255,255,255,.75)}

.grp{margin-bottom:clamp(26px,3vw,44px)}
.grp[hidden]{display:none}
.grp-h{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-text);padding-bottom:11px;margin-bottom:16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.grp-h span{color:var(--muted);letter-spacing:0}
.grp-l{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 22px}
@media(max-width:1280px){.grp-l{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grp-l{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grp-l{grid-template-columns:1fr}}
.grp-l li[hidden]{display:none}
.grp-l a{display:block;padding:10px 12px 10px 16px;border-radius:8px;font-size:15.2px;
  color:var(--ink-soft);position:relative;min-height:44px;line-height:1.35;
  transition:background .2s var(--ease),color .2s var(--ease)}
.grp-l a::before{content:"";position:absolute;left:4px;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--line);transform:translateY(-50%);transition:background .2s var(--ease)}
.grp-l a:hover{background:var(--green-soft);color:var(--green-text)}
.grp-l a:hover::before{background:var(--green)}
.vuoto{padding:40px 0;text-align:center;color:var(--muted);font-size:16px}
.vuoto[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* su schermo stretto gli 8 filtri andavano a capo e la barra appiccicata
   arrivava a 574px, coprendo due terzi dello schermo: riga unica scorrevole */
@media(max-width:1100px){
  .dirbar{padding:14px 0}
  .fchips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;padding-bottom:8px;margin-top:12px;
    scrollbar-width:thin;scroll-snap-type:x proximity}
  .fchips::-webkit-scrollbar{height:5px}
  .fchips::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .fchip{flex:none;scroll-snap-align:start}
  .dirbar-in{gap:10px}
  }