/*
 * Foglio di stile del tema CADesk, accodato da inc/assets.php su tutte le pagine:
 * token, base sui tag, pulsanti, nav e footer (header.php e footer.php) e le sezioni
 * della home (inc/landing-sections.php, rese dai widget Elementor del tema in
 * inc/elementor/). Gli stili dei template interni (pagine, archivi, ricerca, 404)
 * stanno in css/cadesk-pages.css, che dipende da questo. Lo scope e' la classe
 * cadesk-site, messa sul body da cadesk_body_classes() in functions.php.
 *
 * Design system "Modernist" nella variante verde del design: griglia visibile, righe
 * da 2px, raggio 0, etichette allineate a sinistra, Archivo 400/600/800.
 * I valori (clamp, interlinee, margini ottici negativi, colori oklch) sono quelli
 * del design, spostati dagli stili inline alle classi con prefisso cl-.
 *
 * Le regole di base sui tag stanno in :where(), a specificita' zero: una classe cl-
 * vince su di loro qualunque sia l'ordine, come vincevano gli stili inline del design.
 * Non vince pero' sul CSS dei plugin, che in produzione resta in pagina: una regola
 * come «.elementor-kit-N a { color }» vale (0,1,1) e batte una classe sola. Per questo
 * i colori di pulsanti e link-pulsante portano il prefisso body.cadesk-site (0,2,1),
 * e l'anello di focus e' limitato ai contenitori cl-nav, cl-main, cl-contact e
 * cl-footer (0,2,0).
 */

/* ------------------------------------------------------------------ token */

:root {
	--color-bg: oklch(0.985 0.005 160);
	--color-surface: oklch(0.95 0.01 160);
	--color-text: oklch(0.20 0.03 200);
	--color-accent: oklch(0.55 0.14 160);
	--color-divider: color-mix(in srgb, oklch(0.20 0.03 200) 40%, transparent);

	--color-accent-100: oklch(0.96 0.02 160);
	--color-accent-200: oklch(0.93 0.04 160);
	--color-accent-400: oklch(0.72 0.14 160);
	--color-accent-500: oklch(0.55 0.14 160);
	--color-accent-600: oklch(0.48 0.13 160);
	--color-accent-700: oklch(0.40 0.11 160);
	--color-accent-800: oklch(0.32 0.08 160);

	--color-neutral-600: oklch(0.50 0.02 220);
	--color-neutral-700: oklch(0.42 0.025 210);
	--color-neutral-800: oklch(0.30 0.03 210);

	--cadesk-dark: oklch(0.22 0.03 210);
	--cadesk-dark-fg: oklch(0.95 0.01 200);
	--cadesk-green-bright: oklch(0.65 0.18 160);

	--font-heading: "Archivo", system-ui, sans-serif;
	--font-heading-weight: 800;
	--font-body: "Archivo", system-ui, sans-serif;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;

	--radius-md: 0px;

	/* larghezza e margine laterale del contenitore (.cl-wrap, nav, contatti, sfondo
	   dell'hero): un valore solo per ciascuno, cosi' tutto quello che deve stare a
	   filo del testo ci sta davvero. I max-width in ch dei paragrafi non c'entrano. */
	--cl-container: 1320px;
	--cl-gutter: clamp(20px, 5vw, 72px);

	/* Altezza della nav (header.php, .cl-nav): 12px di padding sopra e sotto, il logo
	   da 40px (piu' alto del pulsante «Contattaci», 35px) e il bordo da 2px. Dove il
	   marchio arriva a 44px (tocco e sotto 760px, piu' sotto) sono 70. La legge lo
	   scroll-padding dell'html: le ancore e il focus da tastiera si fermano sotto la
	   nav sticky. */
	--cl-nav-h: 66px;
}

/* ------------------------------------------------------------------- base */

/* Le ancore della home (#vantaggi, #come-funziona, #pannello, #mepa, #contatti) e ogni
   elemento portato in vista dal browser (il focus da tastiera, uno scrollIntoView) si
   fermano sotto la nav sticky con almeno 16px d'aria: scroll-padding sul contenitore
   che scorre, non scroll-margin sulle sezioni, cosi' vale anche per un link che
   riceve il fuoco risalendo con Shift+Tab. Anche la barra admin, se c'e' (la variabile
   la definisce admin-bar.css del core, che sta prima di questo foglio e mette solo la
   sua altezza: qui si somma la nav). */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cl-nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.cadesk-site,
.cadesk-site *,
.cadesk-site *::before,
.cadesk-site *::after {
	box-sizing: border-box;
}

body.cadesk-site {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	font-weight: 400;
	text-wrap: pretty;
}

:where(.cadesk-site) :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 var(--space-2);
}

:where(.cadesk-site h1) { font-size: 42px; }
:where(.cadesk-site h2) { font-size: 32px; }
:where(.cadesk-site h3) { font-size: 25px; }
:where(.cadesk-site h4) { font-size: 20px; }
:where(.cadesk-site h5) { font-size: 16px; }
:where(.cadesk-site h6) { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

:where(.cadesk-site p) {
	margin: 0 0 var(--space-3);
}

:where(.cadesk-site a) {
	color: var(--color-accent-700);
	text-underline-offset: 3px;
}

:where(.cadesk-site a:hover) {
	color: var(--color-accent);
}

:where(.cadesk-site img) {
	display: block;
	max-width: 100%;
}

:where(.cadesk-site figure) {
	margin: 0;
}

/* L'anello di focus vale solo dentro i contenitori della landing: cosi' non tocca la
   barra admin di chi e' loggato, e a (0,2,0) batte un «a:focus» di plugin. */
:is(.cl-nav, .cl-main, .cl-contact, .cl-footer) :focus {
	outline: none;
}

:is(.cl-nav, .cl-main, .cl-contact, .cl-footer) :focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.cadesk-site ::selection {
	background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Testo solo per i lettori di schermo (etichetta del form di ricerca, skip link).
   position con !important come nel core: un CSS di plugin non lo rimette in pagina. */
body.cadesk-site .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip link «Vai al contenuto» (header.php): al primo Tab compare in alto a sinistra,
   sopra la nav e sotto la barra admin (99999), spostato della sua altezza quando c'e'.
   La posizione resta absolute (il !important sopra la fissa): se la pagina era scorsa,
   il browser torna in cima per mostrarlo, come su ogni tema WordPress. Il rientro di
   8px lascia vedere l'anello di focus intero. */
body.cadesk-site .cl-skip:focus {
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--space-2));
	left: var(--space-2);
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	z-index: 99998;
	background: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* I titoli ripetono famiglia e peso del design system: cosi' non dipendono dalla
   regola di base sui tag, che un CSS di plugin potrebbe scavalcare. */
.cl-hero-title,
.cl-benefit-title,
.cl-process-title,
.cl-step-title,
.cl-panel-title,
.cl-mepa-title,
.cl-contact-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.12;
	letter-spacing: -0.015em;
}

/* --------------------------------------------------------------- pulsanti */

.cl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 14px;
	line-height: 1.2;
	color: var(--color-text);
	background: transparent;
	border: 1px solid transparent;
	padding: var(--space-2) calc(var(--space-3) * 1.2);
	border-radius: var(--radius-md);
}

.cl-btn svg {
	display: block;
	flex: none; /* l'icona non si stringe se il testo va a capo */
}

/* Colori e sfondi delle varianti con il prefisso body.cadesk-site: (0,2,1), sopra
   un «.kit a { color }» di plugin. .cl-nav-cta non ha colori suoi: eredita da primary. */

/* Primario: fondo al passo 600 della scala dell'accento, hover 700, pressed 800. Il
   passo 500 (--color-accent) con il testo chiaro misurava 4,28:1, sotto il 4,5:1 del
   livello AA per il testo da 14px; il 600 lo supera. Solo i pulsanti: l'accento resta
   quello su occhielli, cifre e quadrati dei passi, dove il contrasto e' un altro. */
body.cadesk-site .cl-btn-primary {
	background: var(--color-accent-600);
	color: var(--color-bg);
}

body.cadesk-site .cl-btn-primary:hover {
	background: var(--color-accent-700);
	color: var(--color-bg);
}

body.cadesk-site .cl-btn-primary:active {
	background: var(--color-accent-800);
	color: var(--color-bg);
}

/* ghost: testo al 600 per la stessa ragione (bordo trasparente, come nel design),
   tinte dell'accento in color-mix */
body.cadesk-site .cl-btn-ghost {
	color: var(--color-accent-600);
	padding-inline: var(--space-1);
}

body.cadesk-site .cl-btn-ghost:hover {
	background: color-mix(in srgb, var(--color-accent-600) 10%, transparent);
	color: var(--color-accent-600);
}

body.cadesk-site .cl-btn-ghost:active {
	background: color-mix(in srgb, var(--color-accent-600) 18%, transparent);
}

/* -------------------------------------------------------------------- nav */

/* La nav resta in alto durante lo scorrimento: sticky, non fixed, cosi' il contenuto
   non salta e, per chi e' loggato, sta sotto la barra admin (la variabile la definisce
   admin-bar.css del core solo quando la barra c'e'). Il fondo e' esplicito: il
   contenuto che scorre sotto non trasparisce, e il bordo da 2px resta. Lo z-index sta
   sopra il contenuto della pagina e sotto lo skip link (99998) e la barra admin
   (99999). Gli antenati (body, colonna flex) non hanno overflow: lo sticky funziona. */
.cl-nav {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	/* i bordi interni della nav seguono il contenitore (--cl-container) */
	padding-inline: max(var(--cl-gutter), calc((100% - var(--cl-container)) / 2 + var(--cl-gutter)));
	background: var(--color-bg);
	border-bottom: 2px solid var(--color-divider);
}

/* Quando un link o il pulsante della nav riceve il fuoco (tab, o il focus() dello
   script dopo Esc) il browser lo porta «in vista» rispettando lo scroll-padding
   dell'html, e con la nav sticky questo fa risalire la pagina di 400px e passa
   (misurato in Chrome: da 1840 a 1381). Un margine di scorrimento negativo pari al
   padding dice che l'elemento e' gia' dove deve stare: la pagina non si muove. */
.cl-nav :is(a, button) {
	scroll-margin-top: calc(-1 * (var(--wp-admin--admin-bar--height, 0px) + var(--cl-nav-h) + 16px));
}

.cl-nav-home,
.cl-nav-link {
	color: inherit;
	text-decoration: none;
	font-size: 14px;
}

.cl-nav-home:hover,
.cl-nav-link:hover {
	color: var(--color-accent);
}

/* La voce della sezione che occupa il centro della finestra (aria-current="true", lo
   mette js/cadesk-motion.js scorrendo la home; la sottolineatura che resta e' in
   css/cadesk-motion.css). Al passo 600 e non al 500 dell'hover: e' uno stato che
   resta, e sul fondo chiaro il 500 sta sotto il 4,5:1 del testo da 14 e 16px. */
.cl-nav-link[aria-current="true"] {
	color: var(--color-accent-600);
}

/* Le voci e il pulsante «Contattaci» stanno in un contenitore solo (#cl-nav-menu,
   header.php): qui in riga, con lo stesso passo della nav, cosi' il layout e' quello di
   prima; sotto i 760px diventa la tendina (in fondo al foglio). Il pulsante che la apre
   (.cl-nav-toggle) esiste solo la'. */
.cl-nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}

.cl-nav-toggle {
	display: none;
}

.cl-nav-home {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	min-width: 0;
}

.cl-nav-logo {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
}

.cl-nav-brand {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 24px;
	white-space: nowrap;
}

.cl-nav-brand-tld {
	font-weight: 400;
	color: var(--color-neutral-600);
}

.cl-nav-cta {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Sotto 600px la barra admin del core e' position: absolute (admin-bar.css): scorre
   via con la pagina, ma la sua variabile resta 46px. La nav sticky torna quindi a
   fermarsi in cima alla finestra, e lo scroll-padding non somma piu' la barra. */
@media (max-width: 600px) {
	.cl-nav {
		top: 0;
	}

	html {
		scroll-padding-top: calc(var(--cl-nav-h) + 16px);
	}
}

/* ------------------------------------------------------------ contenitore */

/* Il body e' una colonna flex alta almeno quanto la finestra, meno la barra admin
   (la variabile la definisce admin-bar.css del core solo quando la barra c'e'):
   il main cresce e il footer resta in fondo anche sulle pagine corte (Privacy, 404).
   100vh prima di 100dvh per i browser che non conoscono dvh. */
body.cadesk-site {
	min-height: 100vh;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
}

/* contenitore trasparente del contenuto principale: nessuna misura, solo block
   per i browser che non conoscono <main>; nella colonna del body prende lo spazio
   che avanza */
.cl-main {
	display: block;
}

body.cadesk-site .cl-main {
	flex: 1 0 auto;
}

/* width 100%: con margin auto dentro una colonna flex, senza larghezza il contenitore
   si stringerebbe al contenuto e il footer perderebbe l'allineamento con la nav */
.cl-wrap {
	width: 100%;
	max-width: var(--cl-container);
	margin: 0 auto;
	padding: 0 var(--cl-gutter);
}

/* riga di separazione dentro il contenitore: pagine interne (titolo / contenuto) */
.cl-rule {
	height: 2px;
	border: 0;
	margin: 0;
	background: var(--color-divider);
}

/* Sezioni della home con la riga sopra: il bordo sta sulla <section>, che va da bordo
   a bordo, e prende il posto della riga da 2px che prima apriva il contenitore (il
   ritmo verticale e' lo stesso: 2px + il padding della sezione). Il fondo e'
   trasparente: lo dipinge il container Elementor che le ospita, chiaro o grigio-verde
   a turno (sezione «Elementor» in fondo). */
.cl-numbers,
.cl-benefits,
.cl-process,
.cl-panel,
.cl-mepa {
	background: transparent;
	border-top: 2px solid var(--color-divider);
}

.cl-line {
	display: block;
}

/* Occhiello di sezione: e' il titolo delle sezioni che non ne hanno uno grande
   (Perche' CADesk), quindi ha il peso di un titolo e non di un'etichetta. */
.cl-eyebrow {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	font-variant-numeric: tabular-nums;
	margin: 0 0 18px;
}

/* La riga sotto l'occhiello (opzione «Riga sotto l'occhiello» dei widget, Avanzate →
   Animazione: si disegna da sinistra, css/cadesk-motion.css): 2px × 40px nell'accento.
   Quando c'e', l'occhiello le cede 8px del suo margine: dalla sua ultima riga al
   titolo restano 10 + 2 + 18 = 30px invece di 18, abbastanza per leggerla come un
   segno a parte. Nella sezione MePA, dove l'occhiello sta sopra la fascia con 28px,
   la riga tiene gli stessi 28. */
.cl-eyebrow-rule {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--color-accent);
	margin: 0 0 18px;
	transform-origin: 0 50%;
}

.cl-eyebrow:has(+ .cl-eyebrow-rule) {
	margin-bottom: 10px;
}

.cl-mepa .cl-eyebrow:has(+ .cl-eyebrow-rule) {
	margin-bottom: 10px;
}

.cl-mepa .cl-eyebrow-rule {
	margin-bottom: 28px;
}

/* ------------------------------------------------------------------- hero */

/* La sezione va da bordo a bordo (il suo container Elementor non ha padding) e
   dipinge il fondo della pagina (chiaro, e' la prima sezione): il velo sfuma lo
   sfondo decorativo, quando c'e', nello stesso colore. overflow: clip, non hidden:
   niente scroll container nascosto che un focus o uno scrollIntoView potrebbero
   far scorrere (hidden resta come ripiego). Il padding verticale del design
   (112/84) sta su .cl-hero-inner: l'altezza della sezione e' la stessa. */
.cl-hero {
	position: relative;
	background: var(--color-bg);
	overflow: hidden;
	overflow: clip;
}

.cl-hero-inner {
	position: relative; /* sopra lo sfondo assoluto, che nel DOM viene prima */
	padding: 112px 0 84px;
}

/* Sfondo decorativo (la mappa): un riquadro assoluto alto quanto la sezione e largo
   come il contenitore (--cl-container, centrato), con lo stesso margine laterale del testo
   (--cl-gutter come padding): immagine e velo riempiono il suo content box, cosi' la
   mappa comincia dove comincia il titolo e finisce dove finisce il contenitore,
   anche sul telefono (20px dai bordi). L'immagine e' al 50% sotto un velo a gradiente
   che a sinistra, dove sta il testo, la nasconde quasi del tutto e a destra la lascia
   vedere. Il contenitore e' aria-hidden e l'immagine ha alt vuoto. Il prefisso
   .cadesk-site batte «.elementor img { height: auto }» (0,1,1). */
.cl-hero-bg {
	position: absolute;
	inset: 0;
	max-width: var(--cl-container);
	margin: 0 auto;
	padding: 0 var(--cl-gutter);
	pointer-events: none;
	/* Niente oltre il rettangolo dell'immagine (il content box, dentro i margini):
	   l'ingrandimento d'entrata e gli anelli dei punti sul bordo non sporgono nei
	   margini laterali. In alto e in basso taglia gia' la sezione (overflow: clip). */
	clip-path: inset(0 var(--cl-gutter));
}

/* Punti animati sulla mappa (campo «Punti animati» del widget): il livello
   .cl-hero-pins copre il rettangolo dell'immagine come il velo, e sta dopo di lui nel
   DOM, cosi' i punti si vedono sopra il velo. Ogni punto e' un cerchio di --d px
   centrato su --x/--y (percento del rettangolo) e porta un anello in ::after che in
   css/cadesk-motion.css pulsa (da solo e' un alone fermo al 60%). Colore in
   currentColor: la scheda Stile cambia «color» e cambiano cerchio e anello. */
.cl-hero-pins {
	position: absolute;
	inset: 0 var(--cl-gutter);
}

.cl-hero-pin {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: var(--d, 12px);
	height: var(--d, 12px);
	translate: -50% -50%;
	border-radius: 50%;
	color: var(--color-accent);
	background: currentColor;
}

.cl-hero-pin::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: 0.6;
}

/* con i colori forzati i punti prenderebbero il colore del testo sopra la mappa: via */
@media (forced-colors: active) {
	.cl-hero-pins {
		display: none;
	}
}

.cl-hero-bg picture {
	display: block;
	height: 100%;
}

.cadesk-site .cl-hero-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

/* il velo copre il content box del riquadro, non il padding: stessi margini
   dell'immagine */
.cl-hero-veil {
	position: absolute;
	inset: 0 var(--cl-gutter);
	background: linear-gradient(
		90deg,
		var(--color-bg) 0%,
		color-mix(in srgb, var(--color-bg) 92%, transparent) 42%,
		color-mix(in srgb, var(--color-bg) 55%, transparent) 70%,
		color-mix(in srgb, var(--color-bg) 10%, transparent) 100%
	);
}

/* Con lo sfondo il blocco di testo lascia libera a destra la parte di mappa visibile. */
.cl-hero--bg .cl-hero-inner {
	margin-right: min(38vw, 460px);
}

.cl-hero-title {
	font-size: clamp(42px, 6.2vw, 84px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0 0 0 -0.058em; /* margine ottico: la prima lettera a filo del bordo */
}

/* Con lo sfondo la colonna di testo e' larga ~600px: a 84px il titolo andava su quattro righe. */
.cl-hero--bg .cl-hero-title {
	font-size: clamp(42px, 3.9vw, 56px);
}

/* la terza riga del titolo, se scritta («Titolo, riga evidenziata»): nell'accento,
   come «Parliamone.» nei contatti (.cl-contact-highlight, nel verde chiaro sul fondo
   scuro) */
.cl-hero-highlight {
	color: var(--color-accent);
}

.cl-hero-lead {
	font-size: 17px;
	line-height: 28px;
	max-width: 58ch;
	margin: 36px 0 0;
}

.cl-hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}

/* ----------------------------------------------------------------- numeri */

.cl-numbers {
	padding: 70px 0;
}

.cl-numbers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 42px 28px;
}

.cl-number {
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 56px;
	font-weight: 800;
	color: var(--color-accent);
	margin: 0 0 0 -0.045em;
	font-variant-numeric: tabular-nums;
}

.cl-number-label {
	font-size: 13px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	margin: 14px 0 0;
}

/* --------------------------------------------------------------- vantaggi */

.cl-benefits {
	padding: 84px 0 70px;
}

.cl-benefit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 14px clamp(24px, 4vw, 72px);
	align-items: baseline;
	padding: 42px 0;
}

.cl-benefit + .cl-benefit {
	border-top: 2px solid var(--color-divider);
}

/* Titolo con la cifra dietro, come una filigrana. La cella riserva in alto lo spazio
   della cifra (padding-top): il titolo si posa sulla meta' inferiore della cifra e
   l'inchiostro di questa non arriva alla riga da 2px sopra. Con line-height 1 la
   baseline di Archivo 800 cade a 0,833em dal bordo del box e le cifre sono alte
   0,70em (inchiostro 0,13em-0,83em): il titolo (riga 28px, baseline a 22px) ha la
   baseline a 0,60em della cifra: il titolo sta poco sotto la meta' della cifra. La griglia allinea il
   paragrafo di destra alla baseline del titolo (l'assoluto non conta per la baseline
   della cella). isolation tiene lo z-index della cifra dentro la cella. */
.cl-benefit-head {
	--cl-benefit-num-size: clamp(72px, 8vw, 112px);
	position: relative;
	isolation: isolate;
	padding-top: calc(var(--cl-benefit-num-size) * 0.60 - 22px);
}

.cl-benefit-title {
	position: relative;
	z-index: 1;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.01em;
	margin: 0;
	/* Il titolo rientra dentro la cifra: 10px con la cifra da 112px (misura scelta
	   dall'utente), in proporzione alla cifra cosi' vale anche sul telefono (~6px). */
	padding-left: calc(var(--cl-benefit-num-size) * 0.09);
	/* Alone del colore del fondo attorno alle lettere, cosi' la cifra marcata che passa
	   sotto si interrompe intorno al titolo e il titolo si legge al primo colpo. Lo
	   stroke (6px, centrato sul contorno: 3px fuori) si dipinge prima del riempimento,
	   quindi le lettere restano nitide. --cl-section-bg arriva dal container Elementor
	   (alternanza, in fondo); fuori da Elementor il fondo e' quello della pagina. */
	paint-order: stroke fill;
	-webkit-text-stroke: 6px var(--cl-section-bg, var(--color-bg));
	stroke-linejoin: round;
}

/* Senza paint-order lo stroke coprirebbe meta' delle lettere: al suo posto otto ombre
   da 2px nello stesso colore, un alone piu' grezzo ma leggibile. */
@supports not (paint-order: stroke fill) {
	.cl-benefit-title {
		-webkit-text-stroke: 0;
		text-shadow:
			2px 0 0 var(--cl-section-bg, var(--color-bg)),
			-2px 0 0 var(--cl-section-bg, var(--color-bg)),
			0 2px 0 var(--cl-section-bg, var(--color-bg)),
			0 -2px 0 var(--cl-section-bg, var(--color-bg)),
			2px 2px 0 var(--cl-section-bg, var(--color-bg)),
			-2px 2px 0 var(--cl-section-bg, var(--color-bg)),
			2px -2px 0 var(--cl-section-bg, var(--color-bg)),
			-2px -2px 0 var(--cl-section-bg, var(--color-bg));
	}
}

/* -0.04em: margine ottico, il bordo sinistro dell'inchiostro di «2» e «3» a filo
   della prima lettera del titolo (come -0.058em sui titoli grandi). */
.cl-benefit-num {
	position: absolute;
	z-index: 0;
	top: 0;
	left: -0.04em;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: var(--cl-benefit-num-size);
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--color-accent-400); /* ben visibile anche sul fondo surface */
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* La prima voce porta sempre «1», che nella cella tabulare sta centrato e rientra il
   doppio delle altre cifre (0,10em contro 0,05em): si compensa a parte. */
.cl-benefit:first-of-type .cl-benefit-num {
	left: -0.09em;
}

/* Con i colori forzati (contrasto elevato di Windows) la cifra prenderebbe il colore
   del testo e coprirebbe il titolo: via, il numero d'ordine lo da' gia' la sequenza. */
@media (forced-colors: active) {
	.cl-benefit-num {
		display: none;
	}
}

.cl-benefit-text {
	font-size: 15.5px;
	line-height: 28px;
	margin: 0;
	color: var(--color-neutral-800);
	max-width: 52ch;
}

/* ---------------------------------------------------------- come funziona */

.cl-process {
	padding: 84px 0 84px;
}

.cl-process-title {
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.015em;
	margin: 0 0 42px;
	max-width: 30ch;
}

.cl-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* due passi per riga; uno sul telefono (media query sotto) */
	gap: 28px clamp(24px, 3vw, 48px);
	border-top: 2px solid var(--color-divider);
}

.cl-step {
	position: relative; /* per la linea che si disegna sopra (.cl-step-rule) */
	padding: 28px 0 0;
}

/* La linea che si disegna sopra ogni passo (opzione «Linea che si disegna fra i
   passi», Avanzate → Animazione; il disegno, da sinistra, sta in
   css/cadesk-motion.css): 2px nell'accento a filo del bordo superiore del passo, quindi
   sulla riga grigia di .cl-steps per la prima fila (il filo verde che la ripassa passo
   dopo passo) e nello spazio fra le file per le altre. Sotto 760px diventa verticale,
   nella media query del telefono. */
.cl-step-rule {
	position: absolute;
	top: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-accent);
	transform-origin: 0 50%;
}

.cl-step-mark {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}

/* Il numero del passo dentro un quadrato pieno dell'accento, 44×44 anche sul telefono
   (la misura del bersaglio minimo, anche se qui non si tocca), spigoli vivi come
   tutto il design; il numero centrato nel colore del fondo. */
.cl-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	background: var(--color-accent);
	color: var(--color-bg);
	border-radius: 0;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 24px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cl-step-title {
	font-size: 20px;
	line-height: 28px;
	margin: 0 0 8px;
}

.cl-step-text {
	font-size: 15px;
	line-height: 26px;
	margin: 0;
	color: var(--color-neutral-800);
}

/* --------------------------------------------------------------- pannello */

.cl-panel {
	padding: 84px 0;
}

/* Intestazione su due colonne: occhiello e titolo a sinistra, il testo a destra,
   allineati in alto; sotto i 280px per colonna (telefono) si impilano. */
.cl-panel-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 28px clamp(24px, 5vw, 96px);
	align-items: start;
	margin-bottom: 42px;
}

.cl-panel-title {
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.015em;
	margin: 0;
}

.cl-panel-text {
	font-size: 15.5px;
	line-height: 28px;
	color: var(--color-neutral-800);
	margin: 0;
	max-width: 52ch;
}

/* Carosello delle schermate (js/cadesk-slider.js): un riquadro con il bordo da 2px,
   raggio 0 come tutto il design. Dentro, la finestra con il rapporto fisso delle
   schermate (1176/823) e sotto la barra con didascalia, puntini e frecce. */
.cl-panel-slider {
	border: 2px solid var(--color-divider);
	border-radius: 0;
}

/* La finestra ritaglia la pista. overflow: clip, non hidden: niente scroll container
   nascosto che un focus potrebbe far scorrere (hidden resta come ripiego). Il fondo
   e' il colore opposto a quello della sezione (--cl-section-alt dal container
   Elementor; grigio-verde fuori da Elementor): si vede un attimo prima
   dell'immagine. touch-action: pan-y: lo scorrimento verticale della pagina resta
   al browser, quello orizzontale (lo swipe) va agli eventi pointer dello script. */
.cl-panel-viewport {
	position: relative;
	overflow: hidden;
	overflow: clip;
	aspect-ratio: 1176 / 823;
	background: var(--cl-section-alt, var(--color-surface));
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* La pista scorre di una schermata alla volta: translateX(-N00%) dallo script, con
   la transizione del design; senza script resta sulla prima. Con le animazioni
   ridotte dal sistema la schermata cambia di colpo. */
.cl-panel-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.cl-panel-track {
		transition: none;
	}
}

.cl-panel-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	min-width: 0;
}

/* l'immagine riempie la finestra; il prefisso batte «.elementor img { height: auto }» */
.cadesk-site .cl-panel-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
}

/* Barra sotto la finestra: didascalia (prende lo spazio che avanza), puntini, frecce.
   Il fondo e' quello della sezione (--cl-section-bg dal container Elementor). */
.cl-panel-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-top: 2px solid var(--color-divider);
	background: var(--cl-section-bg, var(--color-bg));
}

.cl-panel-caption {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	line-height: 24px;
}

.cl-panel-caption strong {
	font-weight: 800;
}

.cl-panel-caption span {
	color: var(--color-neutral-700);
}

/* Puntini e frecce compaiono solo quando lo script ha preso in carico il carosello
   (data-ready): senza JavaScript non farebbero niente. visibility, non display: la
   barra ha la stessa altezza prima e dopo, niente salto. */
.cl-panel-slider:not([data-ready]) .cl-panel-dots,
.cl-panel-slider:not([data-ready]) .cl-panel-arrows {
	visibility: hidden;
}

.cl-panel-dots {
	display: flex;
	gap: 6px;
}

/* Puntino: un quadrato di 10px (raggio 0), grigio al 20% del testo, nell'accento
   quello della schermata corrente. L'aspetto resta quello, ma il bersaglio si allarga
   con lo pseudo-elemento: 44px in altezza (dentro il padding della barra) e in
   larghezza fino a meta' dello spazio dal puntino accanto, cosi' i bersagli si
   toccano senza sovrapporsi (un bersaglio sopra al puntino vicino gli ruberebbe il
   clic). Sul tocco i puntini si distanziano (in fondo al foglio). */
.cl-panel-dot {
	position: relative;
	width: 10px;
	height: 10px;
	flex: 0 0 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: color-mix(in srgb, var(--color-text) 20%, transparent);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cl-panel-dot::before {
	content: "";
	position: absolute;
	inset: -17px -3px;
}

.cl-panel-dot:hover {
	background: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.cl-panel-dot[aria-current="true"] {
	background: var(--color-accent);
}

/* Con i colori forzati (contrasto elevato di Windows) i fondi diventano Canvas e i
   puntini sparirebbero: un bordo nel colore dei pulsanti li disegna tutti, e quello
   della schermata corrente prende il colore di selezione del sistema (le parole chiave
   di sistema scritte dall'autore restano anche con i colori forzati). */
@media (forced-colors: active) {
	.cl-panel-dot {
		border: 1px solid ButtonText;
	}

	.cl-panel-dot[aria-current="true"] {
		background: Highlight;
	}
}

.cl-panel-arrows {
	display: flex;
	gap: 6px;
}

/* Frecce: pulsanti ghost di 36×36 con la sola icona (il nome sta in aria-label);
   stesso prefisso di .cl-btn-ghost, cosi' a parita' di specificita' vince l'ordine. */
body.cadesk-site .cl-panel-arrow {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	padding: 0;
}

/* ------------------------------------------------------------------- MePA */

.cl-mepa {
	padding: 84px 0;
}

/* l'occhiello sta sopra la fascia, non sopra il titolo: un po' piu' d'aria */
.cl-mepa .cl-eyebrow {
	margin-bottom: 28px;
}

/* Fascia su due colonne con il bordo da 2px (raggio 0, niente ombre, come la figura
   del pannello): a sinistra il riquadro del logo, a destra titolo, testo e pulsante.
   Il riquadro prende il colore opposto al fondo del container (--cl-section-alt,
   dalla sezione «Elementor» in fondo; grigio-verde fuori da Elementor), cosi' si
   distingue sia sul chiaro sia sul grigio-verde. Senza logo (modificatore --text) la
   fascia ha una colonna sola. */
.cl-mepa-card {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	border: 2px solid var(--color-divider);
	border-radius: 0;
}

.cl-mepa-card--text {
	grid-template-columns: minmax(0, 1fr);
}

.cl-mepa-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 3vw, 42px);
	background: var(--cl-section-alt, var(--color-surface));
	border-right: 2px solid var(--color-divider);
}

/* Il logo alla sua misura naturale, dentro un riquadro di 254×80 al massimo (il
   marchio di Acquisti in Rete PA del tema e' 254×35 e lo riempie in larghezza): un
   logo della libreria piu' alto o piu' stretto non viene stirato a 254px. min(…, 100%)
   perche' non esca mai dal riquadro. Il prefisso batte «.elementor img» (0,1,1). */
.cadesk-site .cl-mepa-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(254px, 100%);
	max-height: 80px;
}

.cl-mepa-body {
	padding: 42px clamp(24px, 4vw, 56px);
}

.cl-mepa-title {
	font-size: 32px;
	line-height: 42px;
	letter-spacing: -0.015em;
	margin: 0;
}

.cl-mepa-text {
	font-size: 15.5px;
	line-height: 28px;
	color: var(--color-neutral-800);
	margin: 20px 0 0;
	max-width: 52ch;
}

.cl-mepa-body .cl-btn {
	margin-top: 28px;
}

/* --------------------------------------------------------------- contatti */

.cl-contact {
	background: var(--cadesk-dark);
	color: var(--cadesk-dark-fg);
}

.cl-contact-inner {
	max-width: var(--cl-container);
	margin: 0 auto;
	padding: 84px var(--cl-gutter);
}

/* Etichetta sopra il titolo («Fai parte della PA?»): maiuscoletto nel verde chiaro
   con il bordo da 1px, spigoli vivi come tutto il design (per la forma a pillola
   basterebbe border-radius: 999px). inline-flex: larga quanto il testo, e i 28px
   sotto sono l'unico spazio che aggiunge; il titolo e il resto non si spostano. */
.cl-contact-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--cadesk-green-bright);
	border-radius: 0;
	color: var(--cadesk-green-bright);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 28px;
}

.cl-contact-title {
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	margin: 0 0 0 -0.058em;
	color: var(--cadesk-dark-fg);
}

.cl-contact-highlight {
	color: var(--cadesk-green-bright);
}

.cl-contact-actions {
	display: flex;
	gap: 12px 28px;
	flex-wrap: wrap;
	margin-top: 42px;
}

/* ghost sul fondo scuro: colore e bordo nel verde chiaro, tinte dallo stesso verde.
   Stesso prefisso di .cl-btn-ghost, cosi' a parita' di specificita' vince l'ordine. */
body.cadesk-site .cl-contact-link {
	color: var(--cadesk-green-bright);
	border-color: var(--cadesk-green-bright);
	padding-inline: 14px;
	font-size: 16px;
}

body.cadesk-site .cl-contact-link:hover {
	background: color-mix(in srgb, var(--cadesk-green-bright) 12%, transparent);
	color: var(--cadesk-green-bright);
}

body.cadesk-site .cl-contact-link:active {
	background: color-mix(in srgb, var(--cadesk-green-bright) 20%, transparent);
}

.cl-contact :focus-visible {
	outline-color: var(--cadesk-green-bright);
}

/* La nota sugli orari sta su una riga sola: nessun limite di larghezza, il testo
   occupa il contenitore e va a capo solo quando lo schermo non basta. */
.cl-contact-note {
	font-size: 15px;
	line-height: 28px;
	margin: 42px 0 0;
	color: var(--cadesk-dark-fg);
}

/* ----------------------------------------------------------------- footer */

/* La fascia del footer (footer.php) va da bordo a bordo su tutte le pagine: fondo
   grigio-verde e riga da 2px sopra, come le sezioni della home. Dentro il .cl-wrap sta
   .cl-footer (il contenitore dell'anello di focus, in alto) con la griglia a quattro
   colonne (marchio, Prodotto, Contatti, Azienda) e, sotto, la riga legale. */
.cl-footer-band {
	background: var(--color-surface);
	border-top: 2px solid var(--color-divider);
}

.cl-footer {
	font-size: 15px;
	line-height: 28px;
	color: var(--color-neutral-800);
}

/* Quattro colonne, la prima (marchio e claim) piu' larga. minmax(0, …): una PEC o un
   indirizzo lunghi vanno a capo nella loro colonna (overflow-wrap sui link) invece di
   allargare la griglia oltre il contenitore. Sotto 1024px due colonne, sotto 760 una
   (in fondo al foglio). */
.cl-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 42px clamp(24px, 4vw, 72px);
	padding: 56px 0 42px;
}

/* Intestazioni di colonna: come gli occhielli (.cl-eyebrow) ma piccole. Sono <h2>, e
   tutto il carattere e' dichiarato qui a (0,2,0): un «.kit h2 { … }» di plugin non le
   riporta a 32px. */
.cl-footer .cl-footer-heading {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	margin: 0 0 14px;
}

/* Marchio come nella nav (.cl-nav-home): logo da 28px e il nome con il «.it» leggero;
   al passaggio il nome prende il verde scuro, il «.it» resta neutro. */
.cl-footer-home {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text);
	text-decoration: none;
}

.cl-footer-home:hover {
	color: var(--color-accent-700);
}

.cl-footer-logo {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
}

.cl-footer-name {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 18px;
	line-height: 28px;
	white-space: nowrap;
}

.cl-footer-tld {
	font-weight: 400;
	color: var(--color-neutral-600);
}

.cl-footer-claim {
	margin: 16px 0 0;
	max-width: 32ch;
	font-size: 15px;
	line-height: 24px;
	color: var(--color-neutral-800);
}

/* «Acquistabile sul MePA»: l'etichetta dei contatti (.cl-contact-badge) nei colori
   chiari, bordo e testo nel verde scuro; e' un link alla sezione MePA della home. */
.cl-footer .cl-footer-badge {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 6px 12px;
	border: 1px solid var(--color-accent-700);
	border-radius: 0;
	color: var(--color-accent-700);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.cl-footer .cl-footer-badge:hover {
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	color: var(--color-accent-700);
}

/* Elenchi delle colonne e della riga legale: nessun puntino, nessun rientro. I link
   hanno il colore del testo, e al passaggio il verde scuro con la sottolineatura.
   (0,2,1): sopra un «.kit a { color }» di plugin. */
.cl-footer .cl-footer-list,
.cl-footer .cl-footer-legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-footer .cl-footer-list a,
.cl-footer .cl-footer-text a,
.cl-footer .cl-footer-legal a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cl-footer .cl-footer-list a:hover,
.cl-footer .cl-footer-text a:hover,
.cl-footer .cl-footer-legal a:hover {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* «PEC» davanti all'indirizzo di posta certificata: senza, due email di fila non si
   distinguono */
.cl-footer-label {
	font-weight: 600;
}

/* Azienda: <address> senza il corsivo di default, ragione sociale in evidenza, paragrafi
   senza il margine di base */
.cl-footer .cl-footer-address {
	font-style: normal;
	margin: 0;
}

.cl-footer .cl-footer-address strong {
	font-weight: 600;
	color: var(--color-text);
}

.cl-footer .cl-footer-text {
	margin: 0;
}

/* Riga legale sopra la riga da 2px: copyright a sinistra, Privacy, Cookie policy e
   credito a destra, separati da un punto mediano decorativo (content con testo
   alternativo vuoto: i lettori di schermo non lo leggono). */
.cl-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 28px;
	padding: 20px 0 28px;
	border-top: 2px solid var(--color-divider);
	font-size: 13px;
	line-height: 24px;
	color: var(--color-neutral-700);
}

.cl-footer .cl-footer-copy {
	margin: 0;
}

.cl-footer .cl-footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.cl-footer .cl-footer-legal-links li + li::before {
	content: "·"; /* ripiego per i browser senza la sintassi con il testo alternativo */
	content: "·" / "";
	margin-right: 12px;
	color: var(--color-neutral-600);
}

.cl-footer .cl-footer-credit-link {
	color: var(--color-text);
	font-weight: 600;
}

/* fra 760 e 1024px: due colonne, il marchio su tutta la prima riga */
@media (min-width: 760px) and (max-width: 1023.98px) {
	.cl-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cl-footer-brand {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------- tocco: bersagli da 44px */

/* Si alza l'altezza minima, non il testo: su schermi tocco e sotto 760px pulsanti
   e link di nav e footer arrivano a 44px. Va prima della regola che nasconde i
   link di sezione, cosi' display:none vince. */
@media (pointer: coarse), (max-width: 759.98px) {
	.cl-btn {
		min-height: 44px;
	}

	/* con il marchio da 44px la nav sticky e' alta 70: le ancore e il focus si fermano
	   piu' giu' (scroll-padding dell'html, in testa al foglio) */
	:root {
		--cl-nav-h: 70px;
	}

	.cl-nav-home,
	.cl-nav-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* link del footer: nelle colonne, nella riga legale e il marchio */
	.cl-footer .cl-footer-list a,
	.cl-footer .cl-footer-text a,
	.cl-footer .cl-footer-legal a,
	.cl-footer .cl-footer-home {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* ogni riga degli elenchi e' alta 44px, anche quelle senza link (orari) e quella
	   con l'etichetta «PEC» davanti: stesso ritmo per tutta la colonna */
	.cl-footer .cl-footer-list li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 6px;
		min-height: 44px;
	}

	/* il link al sito nella colonna Azienda sta in un blocco di testo da 28px per riga:
	   il bersaglio e' alto 44 ma rientra di 8px sopra e sotto, cosi' la riga non si
	   stacca dalle altre (sopra c'e' solo testo, niente da intercettare) */
	.cl-footer .cl-footer-text a {
		margin-block: -8px;
	}

	/* l'etichetta MePA resta alta 28px (e' un'etichetta, non un pulsante): il bersaglio
	   si allarga di 8px sopra e sotto con uno pseudo-elemento, nello spazio che il
	   margine attorno lascia comunque libero */
	.cl-footer .cl-footer-badge {
		position: relative;
	}

	.cl-footer .cl-footer-badge::before {
		content: "";
		position: absolute;
		inset: -8px 0;
	}

	/* Carosello del pannello: frecce da 44×44. I puntini restano quadrati di 10px ma
	   si distanziano (14px): ogni bersaglio arriva a 24×44, il minimo che un dito
	   centra senza prendere il puntino accanto; per il resto sul telefono si scorre
	   con lo swipe e con le frecce. */
	body.cadesk-site .cl-panel-arrow {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
	}

	.cl-panel-dots {
		gap: 14px;
	}

	.cl-panel-dot::before {
		inset: -17px -7px;
	}
}

/* ---------------------------------------------------------------- telefono */

/* Sotto 760px la nav tiene logo e nome e, a destra, il pulsante con le tre barre: le
   voci e «Contattaci» stanno nella tendina #cl-nav-menu che si apre sotto la nav (le
   regole della nav sono piu' giu' in questa stessa media query). */
@media (max-width: 759.98px) {
	/* Testo a 16px con riga da 28: sotto i 16px il telefono fa fatica (misurato da
	   wp-ui-ux). Una regola per il corpo della pagina e per i paragrafi che in
	   css/cadesk.css hanno una misura propria (15 e 15,5px) piu' la nota dei contatti e
	   la didascalia del carosello; i titoli non cambiano. */
	body.cadesk-site,
	.cl-benefit-text,
	.cl-panel-text,
	.cl-mepa-text,
	.cl-step-text,
	.cl-contact-note,
	.cl-panel-caption {
		font-size: 16px;
		line-height: 28px;
	}

	.cl-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	/* La linea fra i passi in verticale: scende dal passo precedente (nello spazio da
	   28px della griglia) fino al quadrato del numero (altri 28px di padding), a 21px da
	   sinistra, il centro del quadrato da 44. Si disegna dall'alto (--cl-rx/--cl-ry,
	   lette dalla variante «rule» di css/cadesk-motion.css: ferma la x, cresce la y). La
	   prima parte dalla riga grigia di .cl-steps, non da sopra. */
	.cl-step-rule {
		top: -28px;
		left: 21px;
		width: 2px;
		height: 56px;
		transform-origin: 50% 0;
		--cl-rx: 1;
		--cl-ry: 0;
	}

	.cl-step:first-child .cl-step-rule {
		top: 0;
		height: 28px;
	}

	.cl-nav {
		flex-wrap: nowrap;
	}

	/* Il pulsante del menu: bersaglio di 44×44 con dentro un'icona da 24px, tre barre
	   da 2px a 7px l'una dall'altra (centro del bersaglio a 22: 14, 21, 28). Le barre
	   sono bordi e non fondi: con i colori forzati di Windows i fondi spariscono, i
	   bordi restano. I 10px di margine negativo portano l'icona a filo del margine della
	   nav, dove prima finiva «Contattaci». Senza JavaScript (html senza «js») non c'e':
	   non aprirebbe niente. */
	.cl-nav-toggle {
		position: relative;
		display: block;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin: 0 -10px 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
	}

	.cl-nav-toggle-bar {
		position: absolute;
		left: 10px;
		width: 24px;
		height: 2px;
		border-top: 2px solid currentColor;
	}

	.cl-nav-toggle-bar:nth-child(1) {
		top: 14px;
	}

	.cl-nav-toggle-bar:nth-child(2) {
		top: 21px;
	}

	.cl-nav-toggle-bar:nth-child(3) {
		top: 28px;
	}

	/* Aperto (aria-expanded, scritto dallo script): le barre esterne vanno al centro e
	   ruotano di 45° in versi opposti, quella in mezzo si restringe e sparisce. Le
	   proprieta' translate/rotate/scale sono separate cosi' css/cadesk-motion.css le
	   puo' far muovere una dopo l'altra (prima il tratto, poi il giro). */
	.cl-nav-toggle[aria-expanded="true"] .cl-nav-toggle-bar:nth-child(1) {
		translate: 0 7px;
		rotate: 45deg;
	}

	.cl-nav-toggle[aria-expanded="true"] .cl-nav-toggle-bar:nth-child(2) {
		scale: 0 1;
		opacity: 0;
	}

	.cl-nav-toggle[aria-expanded="true"] .cl-nav-toggle-bar:nth-child(3) {
		translate: 0 -7px;
		rotate: -45deg;
	}

	/* La tendina: assoluta sotto la nav sticky (che e' il suo contenitore: top 100% e' il
	   bordo interno del padding, i 2px in piu' la portano sotto la riga della nav), a
	   tutta larghezza, stesso fondo e stessa riga da 2px sotto. Chiusa e' visibility:
	   hidden e non display: none, cosi' puo' dissolversi (css/cadesk-motion.css) e
	   intanto le voci sono fuori dall'albero di accessibilita' e dal tab. Non blocca lo
	   scorrimento della pagina: e' una tendina, non un velo a tutto schermo. */
	.cl-nav-menu {
		position: absolute;
		top: calc(100% + 2px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--cl-gutter) var(--space-4);
		background: var(--color-bg);
		border-bottom: 2px solid var(--color-divider);
		visibility: hidden;
		opacity: 0;
	}

	.cl-nav.is-open .cl-nav-menu {
		visibility: visible;
		opacity: 1;
	}

	/* L'ombra della nav scorsa (is-scrolled, css/cadesk-motion.css) la copre la tendina
	   stessa: quando e' aperta la prende lei, cosi' stacca dal contenuto come la nav. */
	.cl-nav.is-scrolled .cl-nav-menu {
		box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 6%, transparent);
	}

	/* Le voci: righe da 48px con testo da 16px, una riga sottile fra l'una e l'altra.
	   Il bordo sinistro trasparente da 2px, con il margine negativo che lo porta nel
	   gutter, e' il posto per la tacca della voce corrente: nessuna voce si sposta
	   quando lo diventa. */
	.cl-nav-menu .cl-nav-link {
		display: flex;
		align-items: center;
		min-height: 48px;
		margin-left: -12px;
		padding-left: 10px;
		border-left: 2px solid transparent;
		border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
		font-size: 16px;
	}

	.cl-nav-menu .cl-nav-link[aria-current="true"] {
		border-left-color: var(--color-accent-600);
	}

	/* «Contattaci» in fondo, come pulsante pieno a tutta larghezza, con lo stesso corpo
	   delle voci sopra (i pulsanti del tema stanno a 14px) */
	.cl-nav-menu .cl-nav-cta {
		margin-top: var(--space-4);
		justify-content: center;
		font-size: 16px;
	}

	/* Senza JavaScript il pulsante non c'e' (sopra) e la tendina non si aprirebbe: le
	   voci tornano in pagina, in una seconda riga compatta sotto il marchio, dentro il
	   flusso della nav (che per questo puo' andare a capo). Vale anche se lo script non
	   arriva o si ferma: la classe «js» se ne va dopo 2 s (inc/assets.php). */
	html:not(.js) .cl-nav {
		flex-wrap: wrap;
		row-gap: 0;
	}

	html:not(.js) .cl-nav-toggle {
		display: none;
	}

	html:not(.js) .cl-nav-menu {
		position: static;
		flex: 1 0 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 var(--space-4);
		padding: 0;
		border-bottom: 0;
		visibility: visible;
		opacity: 1;
	}

	html:not(.js) .cl-nav-menu .cl-nav-link {
		display: inline-flex;
		min-height: 44px;
		margin-left: 0;
		padding-left: 0;
		border: 0;
		font-size: 14px;
	}

	html:not(.js) .cl-nav-menu .cl-nav-cta {
		margin-top: 0;
	}

	/* Hero con sfondo: il testo prende tutta la larghezza e il velo diventa uniforme
	   (86% del fondo): la mappa resta un accenno sotto il testo, che si legge. */
	.cl-hero--bg .cl-hero-inner {
		margin-right: 0;
	}

	.cl-hero-veil {
		background: color-mix(in srgb, var(--color-bg) 86%, transparent);
	}

	/* I punti animati stanno sopra il velo, e qui il testo passa sopra tutta la mappa:
	   un punto pieno in mezzo alle righe del titolo disturba la lettura (provato a
	   390px). Sul telefono la mappa e' un accenno e resta tale: niente punti. */
	.cl-hero-pins {
		display: none;
	}

	/* Vantaggi: cifra dietro il titolo piu' piccola, stesso effetto (il padding della
	   cella si ricalcola da solo). */
	.cl-benefit-head {
		--cl-benefit-num-size: 64px;
	}

	/* MePA: le due colonne si impilano, il logo sopra (al massimo 220×60) con la riga
	   da 2px sotto al posto di quella a destra. */
	.cl-mepa-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-mepa-logo {
		padding: 28px 20px;
		border-right: 0;
		border-bottom: 2px solid var(--color-divider);
	}

	.cadesk-site .cl-mepa-logo img {
		max-width: min(220px, 100%);
		max-height: 60px;
	}

	.cl-mepa-body {
		padding: 28px 20px;
	}

	/* Carosello del pannello: la barra va a capo, didascalia su tutta la larghezza e
	   sotto i puntini a sinistra e le frecce a destra. */
	.cl-panel-bar {
		flex-wrap: wrap;
		gap: 12px 14px;
	}

	.cl-panel-caption {
		flex-basis: 100%;
	}

	.cl-panel-arrows {
		margin-left: auto;
	}

	/* Footer in una colonna (marchio, Prodotto, Contatti, Azienda) e riga legale
	   impilata a sinistra, senza i punti mediani */
	.cl-footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 42px 0 32px;
	}

	.cl-footer-legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.cl-footer .cl-footer-legal-links {
		flex-direction: column;
		gap: 0;
	}

	.cl-footer .cl-footer-legal-links li + li::before {
		content: none;
	}
}

/* -------------------------------------------------------------- Elementor */

/* La home e' costruita con Elementor: un container per sezione, dentro un widget del
   tema (inc/elementor/). Il container di Elementor ha di suo 10px di padding per
   lato, uno spazio di 20px fra i widget e, se e' «boxed», la larghezza massima del
   kit (1140px): sui container che ospitano un widget CADesk si azzerano, cosi' le
   misure restano quelle di .cl-wrap (--cl-container) e dei padding delle sezioni, e i
   contatti arrivano ai bordi. :has() senza «>»: in un container «boxed» il widget sta
   dentro .e-con-inner, non e' figlio diretto. :where() tiene la specificita' a (0,2,0):
   sotto le regole per elemento che Elementor scrive nel CSS della pagina (0,3,0),
   quindi un padding impostato a mano nell'editor vince comunque. */
.cadesk-site .e-con:where(:has(.elementor-widget[data-widget_type^="cadesk-"])) {
	--container-max-width: 100%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

.cadesk-site .e-con .elementor-widget:where([data-widget_type^="cadesk-"]) {
	--kit-widget-spacing: 0px;
}

/* Fondi alternati. I container che ospitano una sezione CADesk (contatti esclusi) si
   alternano da soli secondo le sezioni presenti nella pagina: dispari chiaro
   (--color-bg), pari grigio-verde (--color-surface). :nth-child(even of S) conta fra i
   fratelli solo gli elementi che corrispondono a S, cioe' i container con un widget
   CADesk che non sia i contatti: un container di altro tipo, vuoto o con un widget di
   Elementor non sposta il ritmo, e nemmeno i contatti, che hanno il loro fondo scuro
   e per questo vanno in un container tutto loro (nello stesso container di un'altra
   sezione la toglierebbero dal giro). L'hero e' il primo (dispari, chiaro) e dipinge
   da se' il fondo sotto l'immagine. Le sezioni .cl-* dentro sono trasparenti, cosi'
   il colore del container si vede. --cl-section-bg e --cl-section-alt portano ai
   figli il colore del fondo e il suo opposto (il riquadro del logo MePA, l'alone dei
   titoli dei vantaggi). :where(): (0,2,0), un fondo impostato nell'editor vince. */
.cadesk-site .e-con:where(:has(.elementor-widget[data-widget_type^="cadesk-"]):not(:has(.elementor-widget[data-widget_type^="cadesk-contact"]))) {
	--cl-section-bg: var(--color-bg);
	--cl-section-alt: var(--color-surface);
	background: var(--cl-section-bg);
}

.cadesk-site .e-con:where(:nth-child(even of .e-con:has(.elementor-widget[data-widget_type^="cadesk-"]):not(:has(.elementor-widget[data-widget_type^="cadesk-contact"])))) {
	--cl-section-bg: var(--color-surface);
	--cl-section-alt: var(--color-bg);
}