/* ============================================================
   COMPONENTI — portati da crolla-sistemi-v2.html (bozza approvata).
   Vengono aggiunti sezione per sezione mano a mano che i template
   PHP corrispondenti vengono costruiti. Per ora: barra di avanzamento,
   nav adattiva, menu overlay (usati da header.php).
   ============================================================ */

/* ---------- tipografia condivisa ---------- */
.mono {
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted-text);
}

.d1 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.6rem, 7.4vw, 6.6rem);
	/* era .94: con background-clip:text (.sweep) una riga più stretta del
	   reale ingombro del font tagliava le discendenti (g, j, p, q, y) ad
	   ogni riga — vedi .sweep più sotto */
	line-height: 1.08;
	letter-spacing: -.035em;
	margin: 0;
}

.d2 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4.6vw, 4rem);
	line-height: 1.15;
	letter-spacing: -.03em;
	margin: 0;
}

.d3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.9vw, 1.6rem);
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 0;
}

.lede {
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	line-height: 1.5;
	color: var(--page-text);
	max-width: 34ch;
}

.muted {
	color: var(--muted-text);
}

/* ---------- flash: l'impulso blu che attraversa i titoli ---------- */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.sweep {
		background-image: linear-gradient(100deg,
			var(--page-text) 0%, var(--page-text) 38%,
			var(--signal) 50%,
			var(--page-text) 62%, var(--page-text) 100%);
		/* altezza maggiore della riga (140% invece di 100%), ancorata in
		   alto: la "g" e le altre discendenti che escono dalla riga stretta
		   dei titoli restano comunque dentro l'area colorata e non
		   appaiono più tagliate. */
		background-size: 300% 140%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}

	/* sulle sezioni sempre scure (.signals, .since, .hero, .service-diagram,
	   .service-showcase) il testo di base resta chiaro in entrambi i temi */
	.signals .sweep,
	.since .sweep,
	.hero .sweep,
	.service-diagram .sweep,
	.service-showcase .sweep {
		background-image: linear-gradient(100deg,
			var(--accent-text) 0%, var(--accent-text) 38%,
			var(--signal-lt) 50%,
			var(--accent-text) 62%, var(--accent-text) 100%);
	}

	.sweep.flash {
		background-position: 0 0;
		transition: background-position 2.8s var(--ease);
	}
}

/* ---------- reveal on scroll ---------- */
.rv {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.rv.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rv {
		opacity: 1;
		transform: none;
	}
}

/* ---------- pulsanti ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .85em 1.5em;
	border-radius: 100px;
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: -.01em;
	background: var(--accent-bg);
	color: var(--accent-text);
	transition: transform .35s var(--ease), background .35s var(--ease);
}

.btn:hover {
	background: var(--signal);
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	color: var(--page-text);
	box-shadow: inset 0 0 0 1px var(--hairline);
}

.btn--ghost:hover {
	background: var(--page-text);
	color: var(--page-bg);
	box-shadow: none;
}

.btn svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* ---------- filo di avanzamento in alto ---------- */
.progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 70;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(var(--sp, 0));
	background: var(--signal);
	pointer-events: none;
}

/* ============================================================
   NAV + OVERLAY
   ============================================================ */
.nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px var(--gut);
	/* su iPhone con notch/isola dinamica, "viewport-fit=cover" (header.php)
	   estende la pagina fin sotto la barra di stato: senza questo la barra
	   fissa comincerebbe comunque a y=0 (inset: 0 0 auto 0 qui sopra) ma il
	   logo ci finirebbe sotto, nascosto. max() tiene i 16px normali dove
	   non serve (desktop, telefoni senza notch) e cede il passo alla safe
	   area solo dove è più alta. */
	padding-top: max(16px, env(safe-area-inset-top));
	color: var(--page-text);
	transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}

/* allo scroll compare una barra "liquid glass": molto trasparente, solo
   sfocata e leggermente satura, niente bordo/ombra dura che crei un salto
   di contrasto — il logo a colori resta leggibile sopra qualsiasi sezione */
.nav.scrolled {
	padding-block: 11px;
	padding-top: max(11px, env(safe-area-inset-top));
	background: color-mix(in srgb, var(--page-bg) 18%, transparent);
	-webkit-backdrop-filter: blur(26px) saturate(160%);
	backdrop-filter: blur(26px) saturate(160%);
	box-shadow: 0 12px 28px -20px rgba(0, 0, 0, .25);
}

/* la home apre sull'hero scuro: finché non si scrolla (niente barra chiara
   dietro) nav e hamburger devono restare chiari per leggersi sull'immagine,
   non scuri come sulle pagine interne che partono chiare. */
body.nav-on-dark .nav:not(.scrolled) {
	color: var(--accent-text);
}

/* la nav resta fissa in cima mentre il resto della pagina scorre sotto:
   quando lo scroll porta una delle grandi fasce scure del sito (hero,
   testata di pagina, diagramma di servizio, "Cinque segnali", "Dal
   1963", ...) sotto la barra, testo/icone scuri e logo a colori
   diventano illeggibili — stesso problema già risolto qui sopra solo
   per la primissima sezione della pagina. body.nav-over-dark (assets/js/
   scroll-effects.js, un IntersectionObserver su una striscia sottile
   alla stessa altezza della barra) lo risolve per qualunque sezione
   scura si trovi sotto la nav durante lo scroll, non solo la prima. */
body.nav-over-dark .nav {
	color: var(--accent-text);
}

.mark {
	display: grid;
	align-items: center;
}

/* logo ingrandito rispetto alla bozza v2 (30px/26px) su richiesta; scala con
   la larghezza dello schermo (clamp) cosi' sugli schermi grandi non resta
   piccolo, restando invariato sotto i ~1250px circa (min raggiunto).
   Le due versioni (colore/bianco) occupano la stessa cella di griglia,
   sovrapposte: solo una alla volta è visibile, vedi .mark-logo--white
   più sotto. */
/* l'altezza segue --logo-t (0 in cima alla pagina, 1 da scrollata),
   aggiornato frame per frame con un'interpolazione morbida da
   assets/js/scroll-effects.js — non un salto secco a una soglia fissa,
   ma una dimensione che segue con continuità quanto si è scrollato.
   Niente "transition" qui apposta: sarebbe in conflitto con
   l'aggiornamento continuo via JS, che già fa la sua parte di easing. */
.mark-logo {
	--logo-h-big: clamp(54px, 4.2vw, 84px);
	--logo-h-small: clamp(34px, 2.6vw, 52px);
	grid-area: 1 / 1;
	height: calc(var(--logo-h-big) - (var(--logo-h-big) - var(--logo-h-small)) * var(--logo-t, 0));
	width: auto;
	display: block;
}

/* versione bianca del logo: di default trasparente, sostituisce quella a
   colori in tema scuro, sulle pagine con testata scura finché non si
   scrolla, e (body.nav-over-dark, assets/js/scroll-effects.js) ogni
   volta che lo scroll porta una sezione scura sotto la barra — casi in
   cui il logo a colori si legge poco. Dissolvenza incrociata
   (opacity/transition, non display:none/block) così il cambio è
   morbido invece che a scatto: le due versioni occupano già la stessa
   cella di griglia (.mark-logo, grid-area 1/1), sovrapposte. */
.mark-logo--color,
.mark-logo--white {
	transition: opacity .35s var(--ease);
}

.mark-logo--white {
	opacity: 0;
}

:root[data-theme="dark"] .mark-logo--color,
body.nav-on-dark .nav:not(.scrolled) .mark-logo--color,
body.nav-over-dark .mark-logo--color {
	opacity: 0;
}

:root[data-theme="dark"] .mark-logo--white,
body.nav-on-dark .nav:not(.scrolled) .mark-logo--white,
body.nav-over-dark .mark-logo--white {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mark-logo--color,
	.mark-logo--white {
		transition: none;
	}
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	z-index: 2;
}

/* pillola "cambia segnale" nella barra fissa (header.php, solo sulle
   pagine di servizio — mai in home, § richiesta utente): stile Apple
   (es. apple.com/iphone), una scorciatoia sempre a vista senza aprire il
   menu principale. color:inherit/currentColor apposta: segue da solo il
   colore chiaro/scuro che la nav già usa altrove (body.nav-on-dark,
   body.nav-over-dark, tema chiaro/scuro) senza bisogno di regole
   separate per ciascun caso. */
.nav-signal {
	position: relative;
}

.nav-signal-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 100px;
	border: 1px solid currentColor;
	opacity: .82;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: inherit;
	transition: opacity .2s, background .2s;
}

.nav-signal-btn svg {
	width: 9px;
	height: 9px;
	flex: none;
	transition: transform .25s var(--ease);
}

.nav-signal-btn:hover,
.nav-signal[data-open="true"] .nav-signal-btn {
	opacity: 1;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.nav-signal[data-open="true"] .nav-signal-btn svg {
	transform: rotate(180deg);
}

.nav-signal-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 140px;
	padding: 6px;
	border-radius: 14px;
	background: var(--panel-bg);
	border: 1px solid var(--hairline);
	box-shadow: 0 16px 40px -12px rgba(14, 23, 41, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.nav-signal[data-open="true"] .nav-signal-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* stesso font/peso di .foot-links a (footer, colonna "Servizi") — sono
   letteralmente gli stessi cinque nomi trattati come link, il testo più
   simile già presente nel sito: font-weight 600 anche qui, non 500,
   per restare coerenti. Transizione .3s (invece di .25s) sulla stessa
   curva var(--ease) del resto del sito (.btn, .sig-btn della home) —
   più simile a come si comportano già gli altri hover del sito. */
.nav-signal-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-weight: 600;
	font-size: .92rem;
	color: var(--page-text);
	transition: background .3s var(--ease), color .3s var(--ease);
}

.nav-signal-menu a:hover {
	background: color-mix(in srgb, var(--signal) 12%, transparent);
	color: var(--signal);
}

@media (prefers-reduced-motion: reduce) {
	.nav-signal-btn svg,
	.nav-signal-menu,
	.nav-signal-menu a {
		transition: none;
	}
}

@media (max-width: 480px) {
	.nav-signal-btn {
		padding: 6px 10px;
		font-size: 10px;
		gap: 4px;
	}
}

.theme-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: inherit;
}

.theme-toggle svg {
	width: 19px;
	height: 19px;
	grid-area: 1 / 1;
}

.theme-toggle .icon-moon {
	display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
	display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
	display: block;
}

.burger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	margin: -10px;
	color: inherit;
	z-index: 2;
}

.burger span {
	display: block;
	width: 26px;
	height: 1.5px;
	background: currentColor;
	transition: transform .4s var(--ease), opacity .3s;
}

.nav.open {
	background: transparent;
	box-shadow: none;
}

.nav.open .burger,
.nav.open .theme-toggle {
	color: var(--accent-text);
}

.nav.open .mark {
	opacity: 0;
	pointer-events: none;
}

.nav.open .burger span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav.open .burger span:nth-child(2) {
	opacity: 0;
}

.nav.open .burger span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

.overlay {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: var(--accent-bg);
	color: var(--accent-text);
	display: grid;
	align-content: center;
	padding: 120px var(--gut) 48px;
	opacity: 0;
	visibility: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: opacity .5s var(--ease), visibility .5s;
}

.overlay.open {
	opacity: 1;
	visibility: visible;
}

/* banner "cambia segnale" (header.php, solo sulle pagine di servizio):
   primo blocco dell'intero menu overlay, sopra a .overlay-grid — non un
   grid-item affiancato al resto, apposta, così resta la prima cosa che
   si vede aprendo il menu invece di uno dei tanti elementi della
   colonna .ov-side. Bordo sotto per staccarlo chiaramente dal resto. */
.ov-switch {
	max-width: var(--max);
	margin-inline: auto;
	width: 100%;
	padding-bottom: clamp(22px, 3.4vh, 32px);
	margin-bottom: clamp(28px, 4.4vh, 44px);
	border-bottom: 1px solid #232D45;
}

.overlay-grid {
	max-width: var(--max);
	margin-inline: auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
}

.ov-list {
	display: grid;
	gap: 2px;
}

.ov-list a {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -.035em;
	font-size: clamp(2.1rem, 5.4vw, 4.2rem);
	line-height: 1.06;
	color: var(--signal-lt);
	display: flex;
	align-items: center;
	gap: .35em;
	transform: translateY(14px);
	opacity: 0;
	transition: color .3s, transform .55s var(--ease), opacity .55s var(--ease);
}

.overlay.open .ov-list a {
	transform: none;
	opacity: 1;
}

.overlay.open .ov-list a:nth-child(1) { transition-delay: .06s; }
.overlay.open .ov-list a:nth-child(2) { transition-delay: .11s; }
.overlay.open .ov-list a:nth-child(3) { transition-delay: .16s; }
.overlay.open .ov-list a:nth-child(4) { transition-delay: .21s; }
.overlay.open .ov-list a:nth-child(5) { transition-delay: .26s; }
.overlay.open .ov-list a:nth-child(6) { transition-delay: .31s; }

.ov-list a:hover {
	color: #fff;
}

.ov-list a i {
	width: .42em;
	height: .42em;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px currentColor;
	flex: none;
	position: relative;
	top: -.06em;
}

.ov-side {
	display: grid;
	gap: 34px;
	align-content: start;
	padding-top: 12px;
}

.ov-side p {
	margin: .5em 0 0;
	color: #9AA1A6;
	max-width: 30ch;
}

.ov-side a.line {
	color: var(--accent-text);
	border-bottom: 1px solid #3A4145;
	padding-bottom: 2px;
}

.ov-side a.line:hover {
	border-color: var(--signal-lt);
}

.lang {
	display: inline-flex;
	gap: 2px;
	margin-top: 8px;
	border: 1px solid #2A3550;
	border-radius: 100px;
	padding: 3px;
}

.lang button,
.lang a {
	padding: 5px 14px;
	border-radius: 100px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: #9AA1A6;
}

.lang button.on,
.lang a.on {
	background: var(--signal);
	color: #fff;
}

/* cambio rapido tra i cinque segnali, banner .ov-switch in cima al menu
   overlay (header.php, solo quando si è già su una delle cinque pagine
   di servizio): pillole separate invece di un unico blocco segmentato
   come .lang qui sopra — con cinque voci un contenitore unico andrebbe a
   capo in modo scomodo su schermi stretti, le pillole staccate invece si
   dispongono da sole riga per riga. Un filo più grandi di .lang: è il
   primo blocco dell'intero menu, deve pesare visivamente di più — non
   un dettaglio in fondo alla colonna laterale come nella prima versione
   (feedback utente: rischiava di passare inosservato). */
.ov-signals {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 12px;
}

.ov-signals a {
	padding: 9px 20px;
	border-radius: 100px;
	border: 1px solid #2A3550;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9AA1A6;
	transition: background .25s, color .25s, border-color .25s;
}

.ov-signals a:hover {
	border-color: var(--signal-lt);
	color: var(--accent-text);
}

.ov-signals a.on {
	background: var(--signal);
	border-color: var(--signal);
	color: #fff;
}

@media (max-width: 1000px) {
	.overlay-grid {
		grid-template-columns: 1fr;
	}
}

/* schermi bassi (mobile in orizzontale, notebook piccoli): meno spazio
   sprecato sopra/sotto, cosi il primo link resta visibile senza scroll */
@media (max-height: 700px) {
	.overlay {
		align-content: start;
		padding-top: 88px;
	}
}

/* ============================================================
   FOOTER — ispirato (non identico) al riferimento portato in
   conversazione: pannello scuro con claim+CTA, social a lato, colonne
   di link, barra legale sotto.
   ============================================================ */
.foot {
	/* niente margin-top: var(--sec) qui — la sezione sopra ha già il suo
	   padding-block: var(--sec) in fondo, sommarne un altro uguale creava
	   un vuoto doppio tra fine pagina e footer. */
	padding: clamp(24px, 4vh, 48px) 0;
}

.foot-panel {
	/* quasi a tutta larghezza (fuori da .wrap nel markup) ma con un
	   piccolo bordino ai lati, come nel riferimento Alpsim — non il
	   padding orizzontale pieno di .wrap, che darebbe di nuovo un grosso
	   margine: qui basta un filo, per questo il valore fisso e piccolo.
	   Il contenuto resta centrato tramite il .wrap interno
	   (.foot-panel-inner). */
	background: var(--accent-bg);
	color: var(--accent-text);
	margin-inline: clamp(8px, 1.4vw, 16px);
	border-radius: 18px;
	padding-block: clamp(32px, 5vw, 64px);
	margin-bottom: clamp(20px, 3vh, 32px);
}

.foot-panel-inner {
	position: relative;
}

.foot-social {
	position: absolute;
	top: clamp(24px, 4vw, 40px);
	left: clamp(24px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.foot-social a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent-text) 12%, transparent);
	color: var(--accent-text);
	transition: background .25s, color .25s;
}

.foot-social a:hover {
	background: var(--signal-lt);
	color: var(--accent-bg);
}

.foot-social svg {
	width: 16px;
	height: 16px;
}

.foot-main {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
	padding-left: clamp(48px, 6vw, 64px);
}

.foot-logo {
	height: 30px;
	width: auto;
	margin-bottom: clamp(20px, 3vh, 32px);
}

.foot-tagline {
	font-family: var(--font-display);
	font-weight: 800;
	/* frase più lunga di un singolo claim breve: dimensione ridotta
	   rispetto a un titolo hero, per restare leggibile su più righe */
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	letter-spacing: -.02em;
	line-height: 1.08;
	margin: 0;
	max-width: 14ch;
}

.foot-tagline-sub {
	margin: .6em 0 0;
	color: #B7BEC4;
	font-size: .95rem;
	font-weight: 600;
}

.foot-cta .btn {
	margin-top: clamp(20px, 3vh, 28px);
	/* .btn di base è scuro su scuro (stesso colore del pannello): qui
	   serve il contrasto invertito, come già fatto per .hero .btn */
	background: var(--signal);
	color: #fff;
}

.foot-cta .btn:hover {
	background: var(--signal-lt);
	color: var(--accent-bg);
}

.foot-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.foot-links h4 {
	margin: 0 0 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9AA3AB;
	font-weight: 700;
}

.foot-links a {
	display: block;
	color: #DEE3E8;
	font-size: .92rem;
	font-weight: 600;
	margin: 0 0 8px;
	transition: color .2s;
}

/* badge ISO nel footer, sotto l'email: piccolo apposta, non deve
   attirare più attenzione dei link veri accanto a cui sta. */
.foot-iso {
	width: 64px;
	height: auto;
	margin-top: 10px;
	opacity: .8;
}

.foot-links a:hover {
	color: var(--accent-text);
}

.foot-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: space-between;
	font-size: .8rem;
	font-weight: 600;
	color: var(--page-text);
	padding: 0 clamp(4px, 1vw, 12px);
}

/* link Privacy di iubenda (footer.php): stesso colore/peso del resto della
   barra invece del colore di default dei link, sottolineato al passaggio */
.foot-bar .foot-legal a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.foot-bar .foot-legal a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.foot-main {
		grid-template-columns: 1fr;
		padding-left: 0;
		padding-top: clamp(48px, 8vh, 64px);
	}

	.foot-social {
		position: static;
		flex-direction: row;
		margin-bottom: clamp(24px, 4vh, 32px);
	}
}

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

/* ============================================================
   HERO — canvas "campo di segnale" (assets/js/hero-canvas.js)
   ============================================================ */
.hero {
	position: relative;
	/* diviso per --ui-zoom (base.css, scala desktop): con lo zoom attivo
	   100svh verrebbe rimpicciolito e la hero non riempirebbe lo schermo */
	min-height: calc(100svh / var(--ui-zoom, 1));
	display: grid;
	/* via di mezzo tra "incollato in fondo" (align-items:end, padding
	   piccolo) e "centrato a metà": resta ancorato in basso ma con un
	   margine ampio in vh, regolabile spostando solo il padding qui sotto */
	align-items: end;
	/* spazio riservato in alto per la barra fissa (.nav): stessa somma di
	   padding-top della nav (16px o safe area iPhone) + altezza logo
	   (--logo-h-big di .mark-logo, stesso clamp) + padding-bottom della nav
	   (16px) + un respiro che cresce con l'altezza dello schermo. Senza,
	   quando titolo + bottoni riempiono quasi tutta la hero (telefoni,
	   schermi bassi) la scritta "Crolla Sistemi · dal 1963" finiva sotto
	   logo e icone. Il contenuto resta ancorato in basso; se lo spazio non
	   basta è la hero a crescere in altezza, non il testo a salire. */
	padding-top: calc(max(16px, env(safe-area-inset-top)) + clamp(54px, 4.2vw, 84px) + 16px + clamp(16px, 3vh, 32px));
	overflow: hidden;
	background: var(--accent-bg) url('../img/hero-bg.jpg') center/cover no-repeat;
	color: var(--accent-text);
}

/* video in loop (Higgsfield) sopra l'immagine statica (background di .hero,
   resta come fallback sotto). Nascosto con prefers-reduced-motion: la
   pagina torna a mostrare solo l'immagine ferma. */
.hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* leggera dissolvenza gestita frame per frame da hero-video-loop.js
	   (attenua lo scalino nel punto di giunzione del loop): la
	   transizione qui è solo una rete di sicurezza che ammorbidisce
	   ulteriormente il passaggio tra un valore di opacità e il successivo */
	transition: opacity .12s linear;
}

@media (prefers-reduced-motion: reduce) {
	.hero-video {
		display: none;
	}
}

/* render astratto "campo di segnale" (Higgsfield) dietro al canvas
   interattivo: il gradiente scurisce il basso, dove sta il testo, senza
   coprire i dettagli del render in alto. */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(14, 23, 41, .25) 0%,
		rgba(14, 23, 41, .45) 55%,
		rgba(14, 23, 41, .9) 100%);
	pointer-events: none;
}

#field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* pointer-events:none qui e :auto solo sui link: senza, .hero-inner (un
   div pieno, tutta la larghezza) intercetta il tocco anche sullo spazio
   vuoto tra una riga di testo e l'altra, impedendo al tocco di arrivare
   al canvas #field sotto (z-index 2) — "Tocca lo sfondo per mandare un
   segnale" restava quasi sempre morto su schermi bassi, dove il blocco
   di testo/bottoni occupa quasi tutta l'altezza della hero (bug
   verificato su mobile, ma la stessa cosa capitava anche su desktop
   dove però resta più spazio libero sopra al testo e si nota meno). */
.hero-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	padding-bottom: clamp(56px, 11vh, 120px);
	pointer-events: none;
}

.hero-inner a {
	pointer-events: auto;
}

.hero .mono {
	display: block;
	margin-bottom: clamp(20px, 4vh, 40px);
	color: var(--signal-lt);
}

.hero .d1 span {
	display: block;
}

.hero .d1 .rev {
	color: #9AA1A6;
	transition: color .9s var(--ease);
}

.hero .d1 .rev.lit {
	color: var(--signal-lt);
}

.hero .hint {
	color: #9AA1A6;
}

.hero .btn:not(.btn--ghost) {
	background: var(--signal);
	color: #fff;
}

.hero .btn:not(.btn--ghost):hover {
	background: var(--signal-lt);
	color: var(--accent-bg);
}

.hero .btn--ghost {
	color: var(--accent-text);
	box-shadow: inset 0 0 0 1px rgba(244, 245, 247, .35);
}

.hero .btn--ghost:hover {
	background: var(--accent-text);
	color: var(--accent-bg);
}

.hero-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: clamp(32px, 6vh, 64px);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hint {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--slate);
}

@media (max-width: 620px) {
	.hero-foot {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   TESTATA DI PAGINA — pagine di dettaglio dei servizi (page-voce.php, ...):
   versione corta dell'hero, stesso campo di segnale animato (canvas
   #field, automatico — niente video/immagine qui, resta esclusivo
   dell'hero della home) e stesso schema colori "sempre scuro".
   ============================================================ */
.service-head {
	position: relative;
	overflow: hidden;
	background: var(--accent-bg);
	color: var(--accent-text);
	padding: clamp(140px, 22vh, 220px) 0 clamp(56px, 8vh, 96px);
}

.service-head #field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.service-head .wrap {
	position: relative;
	z-index: 1;
}

.service-head .mono {
	color: var(--signal-lt);
}

.service-head h1 {
	margin: .35em 0 .5em;
	max-width: 18ch;
}

.service-head .lede {
	color: #C9D3E4;
	max-width: 46ch;
}

/* ============================================================
   GRUPPI DI CARATTERISTICHE — "cosa include" / "come lo forniamo"
   nelle pagine di dettaglio dei servizi. Stesso linguaggio visivo delle
   liste puntate già in uso (.diag, .sig-pane li), in versione per
   sezioni chiare.
   ============================================================ */
.service-include,
.service-how {
	padding-block: var(--sec);
}

.service-include .mono,
.service-how .mono {
	color: var(--signal);
}

.service-how h2 {
	margin: .35em 0 clamp(32px, 5vh, 56px);
	max-width: 26ch;
}

.feature-groups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 56px);
}

.feature-group {
	margin-top: clamp(24px, 4vh, 40px);
}

.feature-group h3 {
	margin: 0 0 .5em;
}

.feature-group .intro {
	color: var(--muted-text);
	margin: 0 0 1.2em;
	max-width: 38ch;
}

.feature-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.feature-group li {
	position: relative;
	padding: 14px 0 14px 22px;
	border-bottom: 1px solid var(--hairline);
}

.feature-group li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 21px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--signal);
}

.feature-group li:last-child {
	border-bottom: 0;
}

.feature-group li b {
	display: block;
	font-weight: 600;
	margin-bottom: .3em;
	transition: color .2s;
}

.feature-group li span {
	color: var(--muted-text);
	font-size: .92rem;
}

/* solo le voci di "Cosa include" sono link (ancore verso la sezione
   della pagina che ne parla): .feature-group è riusato anche altrove
   ("Come lo forniamo" ecc.) con <li> non cliccabili, per questo la
   regola è specifica a .service-include invece che a .feature-group li
   in generale. */
.service-include .feature-group li a {
	display: block;
}

.service-include .feature-group li a:hover b {
	color: var(--signal);
}

/* punto di arrivo per quei link: la nav fissa non deve coprire il
   titolo della sezione/scheda a cui si salta. */
.anchor-target {
	scroll-margin-top: 100px;
}

@media (max-width: 1000px) {
	.feature-groups {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* ============================================================
   VETRINA SCURA — pausa scura a metà pagina con una foto vera (non uno
   schema): stesso trattamento sempre-scuro di .service-diagram (che qui
   non c'è più, tolta perché ripeteva lo schema già visto su Voce), serve
   solo a dare un punto di contrasto lungo la pagina.
   ============================================================ */
.service-showcase {
	background: var(--accent-bg);
	color: var(--accent-text);
	padding-block: var(--sec);
}

.service-showcase .mono {
	color: var(--signal-lt);
}

.service-showcase p {
	color: #9AA1A6;
	max-width: 48ch;
	margin: 1em 0 1.6em;
}

.service-showcase .btn {
	/* .btn di base usa --accent-bg/--accent-text: identico allo sfondo di
	   questa sezione, sparirebbe — stesso bug già risolto per .support-cta */
	background: var(--signal);
	color: #fff;
}

.service-showcase .btn:hover {
	background: var(--signal-lt);
	color: #fff;
}

.service-showcase .photo-card {
	border-color: color-mix(in srgb, var(--signal-lt) 30%, transparent);
}

/* ============================================================
   DIAGRAMMA — schema animato "come funziona" nelle pagine di dettaglio
   dei servizi. Icone a linea semplice (stesso stile delle altre SVG del
   tema) invece di illustrazioni isometriche/3D: cattura l'idea di schema
   tecnico "vivo" senza un lavoro di illustrazione custom molto più ampio.
   ============================================================ */
.service-diagram {
	background: var(--accent-bg);
	color: var(--accent-text);
	padding-block: var(--sec);
}

.service-diagram .mono {
	color: var(--signal-lt);
}

.service-diagram h2 {
	margin: .35em 0 .5em;
	max-width: 24ch;
}

.service-diagram > .wrap > p {
	color: #9AA1A6;
	max-width: 52ch;
	margin: 0 0 clamp(40px, 6vh, 64px);
}

.diagram-node {
	/* stesso trattamento scuro già usato in .photo-ph/.case-media .ph:
	   var(--panel-bg) qui era sbagliato — in tema chiaro è quasi bianco,
	   rendeva illeggibile il testo chiaro della sezione (bug segnalato) */
	background: radial-gradient(120% 80% at 50% 0%, #16223A 0%, #0E1729 60%);
	border: 1px solid #262C30;
	border-radius: 16px;
	padding: clamp(22px, 2.8vw, 32px);
}

.diagram-node--accent {
	border-color: color-mix(in srgb, var(--signal-lt) 35%, transparent);
}

.dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16A34A;
	flex: none;
}

.dot--pulse {
	animation: crolla-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes crolla-dot-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

/* pannello che racchiude il diagramma: barra di stato in cima, righello
   delle fasi in fondo — struttura più simile al riferimento (schema
   interattivo a più fasi), niente stato multiplo elaborato ma la stessa
   idea di "cornice + stato + timeline". */
.flow-panel {
	border: 1px solid #262C30;
	border-radius: 20px;
	padding: clamp(20px, 3vw, 32px);
}

.flow-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(24px, 4vh, 40px);
	padding-bottom: clamp(20px, 3vh, 28px);
	border-bottom: 1px solid #262C30;
}

.flow-status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #C4CCD6;
}

.flow-bar-desc {
	flex: 1;
	min-width: 200px;
	text-align: right;
	font-size: .84rem;
	color: #8B93A6;
}

.flow-auto {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	padding: 7px 14px;
	border-radius: 100px;
	border: 1px solid #2A3550;
	color: #8B93A6;
	transition: color .25s, border-color .25s;
}

.flow-auto[aria-pressed="true"] {
	color: var(--signal-lt);
	border-color: color-mix(in srgb, var(--signal-lt) 45%, transparent);
}

.flow-steps {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(8px, 2vw, 24px);
	margin-top: clamp(24px, 4vh, 40px);
	padding-top: clamp(20px, 3vh, 28px);
	border-top: 1px solid #262C30;
}

.flow-step {
	text-align: left;
	padding-bottom: 12px;
	border-bottom: 2px solid #262C30;
	color: #6E767B;
	transition: color .25s, border-color .25s;
}

.flow-step .n {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	margin-bottom: 4px;
}

.flow-step .t {
	display: block;
	font-size: .84rem;
	line-height: 1.3;
}

.flow-step.on {
	color: var(--accent-text);
	border-color: var(--signal-lt);
}

.flow-step:hover {
	color: #C4CCD6;
}

.diagram-node.is-active {
	border-color: var(--signal-lt);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal-lt) 50%, transparent), 0 0 32px -12px var(--signal-lt);
	transition: border-color .3s, box-shadow .3s;
}

@media (max-width: 900px) {
	.flow-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px 16px;
	}
}

@media (max-width: 560px) {
	.flow-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

.flow-steps--4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 560px) {
	.flow-steps--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   DIFFUSIONE EVAC — page-suono.php: schema dedicato (diverso dal
   .flow-panel generico sopra, tolto da qui) — quattro fasi in fila
   (rilevamento → centrale → amplificazione → diffusione) collegate da
   linee tratteggiate che si "accendono" una dopo l'altra e restano
   accese, invece di spegnere la fase precedente quando parte la
   successiva: l'idea è mostrare l'intera catena già attiva, non un
   singolo stato alla volta. Porta fedelmente lo schema costruito con
   Claude Design (Grafico flusso SISTEMA EVAC), colori fissi perché
   sempre su sfondo scuro. Animazione in assets/js/evac-flow.js.
   ============================================================ */
.evac-flow {
	background: #0E1729;
	border: 1px solid rgba(201, 205, 208, .14);
	border-radius: 18px;
	padding: clamp(20px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: #ECEEF1;
}

.evac-flow-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(201, 205, 208, .16);
}

.evac-flow-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.evac-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	background: #34D399;
	box-shadow: 0 0 10px rgba(52, 211, 153, .7);
	transition: background .3s, box-shadow .3s;
}

.evac-dot--alarm {
	background: #E24B43;
	box-shadow: 0 0 10px rgba(226, 75, 67, .7);
}

.evac-flow-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #5AA9E6;
}

.evac-flow-desc {
	font-size: 15px;
	color: #A6AFBD;
	flex: 1 1 220px;
	min-width: 0;
}

.evac-flow-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.evac-badge {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8B94A3;
	border: 1px solid #2B497D;
	border-radius: 6px;
	padding: 5px 10px;
	transition: color .3s;
}

.evac-badge--alarm {
	color: #E24B43;
}

.evac-auto {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 100px;
	border: 1px solid #2B497D;
	color: #5AA9E6;
	transition: color .25s, border-color .25s;
}

.evac-auto[aria-pressed="false"] {
	color: #5B6472;
	border-color: rgba(201, 205, 208, .18);
}

.evac-auto:hover {
	color: #ECEEF1;
}

.evac-steps {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow-x: auto;
	padding-bottom: 4px;
	/* position:relative solo per dare a offsetLeft dei figli (.evac-step)
	   un punto di riferimento certo — usato da assets/js/evac-flow.js per
	   scorrere la scheda attiva in vista senza toccare lo scroll
	   verticale della pagina. Nessun effetto visivo. */
	position: relative;
}

.evac-step {
	flex: 1 1 210px;
	min-width: 190px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.evac-step-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8B94A3;
}

.evac-step-card {
	position: relative;
	flex: 1 1 auto;
	background: linear-gradient(155deg, #1B2A48, #111B30);
	border: 1px solid rgba(201, 205, 208, .18);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.evac-step-card--accent {
	border-color: #2B497D;
}

.evac-step-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.evac-step-row svg {
	flex: none;
}

.evac-step-row b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
}

.evac-step-row span {
	display: block;
	font-size: 13px;
	color: #A6AFBD;
	margin-top: 2px;
}

.evac-step-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
}

.evac-step-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.evac-step-list span {
	display: block;
	background: #0C1526;
	border: 1px solid rgba(201, 205, 208, .16);
	border-radius: 7px;
	padding: 7px 10px;
	font-size: 13px;
	color: #C9CDD0;
}

.evac-step-list-active {
	position: relative;
	border-color: #5AA9E6 !important;
	color: #ECEEF1 !important;
	font-size: 11.5px !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
}

.evac-step-text {
	margin: 0;
	font-size: 13px;
	color: #A6AFBD;
	line-height: 1.5;
}

.evac-step-footnote {
	margin: 0;
	font-size: 12px;
	color: #8B94A3;
	border-top: 1px solid rgba(201, 205, 208, .14);
	padding-top: 8px;
}

.evac-step-tag {
	align-self: flex-start;
	background: #08213B;
	border-radius: 12px;
	padding: 5px 10px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #5AA9E6;
	opacity: 0;
	transition: opacity .4s;
}

.evac-step-tag--alarm {
	background: #1F0A0D;
	color: #E24B43;
}

.evac-step-tag.is-on {
	opacity: 1;
}

.evac-step-glow {
	position: absolute;
	inset: -1px;
	border-radius: 15px;
	border: 1px solid #2378BE;
	box-shadow: 0 0 26px rgba(35, 120, 190, .3);
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s;
}

.evac-step-glow--alarm {
	border-color: #E24B43;
	box-shadow: 0 0 24px rgba(226, 75, 67, .28);
}

.evac-step-glow.is-on {
	opacity: 1;
}

.evac-link {
	flex: 0 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.evac-link-track {
	position: relative;
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(201, 205, 208, .32) 0 6px, transparent 6px 12px);
}

.evac-link-fill {
	position: absolute;
	inset: 0;
	background: #2378BE;
	box-shadow: 0 0 10px rgba(35, 120, 190, .6);
	opacity: 0;
	transition: opacity .4s;
}

.evac-link-fill--alarm {
	background: #E24B43;
	box-shadow: 0 0 10px rgba(226, 75, 67, .6);
}

.evac-link-fill.is-on {
	opacity: 1;
}

.evac-selectors {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(201, 205, 208, .16);
}

.evac-selector {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 0 1 auto;
	cursor: pointer;
	text-align: left;
}

.evac-selector-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.evac-selector .n {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: #8B94A3;
}

.evac-selector .t {
	font-size: 14px;
	color: #8B94A3;
	transition: color .3s;
}

.evac-selector.on .t {
	color: #ECEEF1;
}

.evac-selector-bar {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: #2378BE;
	opacity: 0;
	transition: opacity .3s;
}

.evac-selector-bar--alarm {
	background: #E24B43;
}

.evac-selector.on .evac-selector-bar {
	opacity: 1;
}

@media (max-width: 640px) {
	.evac-step {
		min-width: 240px;
	}
}

/* ============================================================
   DIAGRAMMA TELEFONIA IP — page-voce.php: dispositivi → switch →
   centralino → cloud/virtuale/app mobile. Porta fedelmente lo schema
   fornito in conversazione (cartella "Grafico flusso telefonia IP",
   Claude Design) in HTML/CSS/JS nativi del tema invece che come runtime
   .dc.html a parte. Stessa cornice (.flow-panel/.flow-bar/.flow-steps)
   e stesso trattamento sfondo scuro fisso di .diagram-node già in uso
   nelle altre pagine di settore — vedi commento lì sul perché non usa
   var(--accent-bg)/var(--panel-bg) per lo sfondo delle card. Qui in più
   .diagram-node--compact/--row, due varianti di formato per adattare
   la stessa card a schemi più fitti di sei nodi.
   ============================================================ */
.ipflow-section {
	margin-bottom: clamp(18px, 2.6vh, 26px);
}

.ipflow-section:last-child {
	margin-bottom: 0;
}

.ipflow-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8B93A6;
	margin-bottom: 10px;
}

.ipflow-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.diagram-node--compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 7px;
	padding: 12px 8px;
	border-radius: 10px;
}

.diagram-node--compact svg {
	width: 20px;
	height: 20px;
	color: var(--signal-lt);
}

.diagram-node--compact b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .82rem;
}

.diagram-node--compact > span {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .1em;
	color: #C9CDD0;
}

.diagram-node--compact p {
	margin: 0;
	font-size: .7rem;
	color: #8B93A6;
}

.diagram-node--row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 12px;
}

.diagram-node--row svg {
	width: 22px;
	height: 22px;
	color: var(--signal-lt);
	flex: none;
}

.diagram-node--row b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .92rem;
}

.diagram-node--row p {
	margin: 2px 0 0;
	font-size: .78rem;
	color: #8B93A6;
}

.ipflow-online {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8B93A6;
}

/* connettori verticali, tre insieme (dispositivi -> switch): un filo
   tratteggiato sempre visibile, uno pieno che si accende sopra */
.ipflow-vlines {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	height: 44px;
	margin: 2px 0;
}

.ipflow-vline {
	position: relative;
	height: 100%;
	margin: 0 auto;
	width: 0;
	border-left: 1px dashed rgba(201, 205, 208, .32);
}

.ipflow-vline::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 -1px;
	width: 0;
	border-left: 1px solid var(--signal);
	box-shadow: 0 0 10px -2px color-mix(in srgb, var(--signal) 70%, transparent);
	opacity: 0;
	transition: opacity .4s;
}

.ipflow-vlines.is-on .ipflow-vline::after {
	opacity: 1;
}

.ipflow-vlabel {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: var(--accent-bg);
	padding: 2px 0 2px 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #8B93A6;
}

/* connettore verticale singolo (switch -> centralino) */
.ipflow-vline-single {
	position: relative;
	height: 28px;
	width: 0;
	margin: 0 auto;
	border-left: 1px dashed rgba(201, 205, 208, .32);
}

.ipflow-vline-single::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 -1px;
	width: 0;
	border-left: 1px solid var(--signal);
	box-shadow: 0 0 10px -2px color-mix(in srgb, var(--signal) 70%, transparent);
	opacity: 0;
	transition: opacity .4s;
}

.ipflow-vline-single.is-on::after {
	opacity: 1;
}

/* ramo dal centralino verso i tre nodi finali: barra + tre discese in un
   unico SVG (più semplice da tenere allineato di più div assoluti) */
.ipflow-branch {
	height: 28px;
	margin: 2px 0;
}

.ipflow-branch svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ipflow-branch-dash {
	stroke: rgba(201, 205, 208, .32);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	fill: none;
	vector-effect: non-scaling-stroke;
}

.ipflow-branch-fill {
	stroke: var(--signal);
	stroke-width: 1.4;
	fill: none;
	opacity: 0;
	transition: opacity .4s;
	vector-effect: non-scaling-stroke;
}

.ipflow-branch.is-on .ipflow-branch-fill {
	opacity: 1;
}

/* linea orizzontale sotto cloud/virtuale/app ("comunicazione unica") */
.ipflow-hline {
	position: relative;
	height: 22px;
	margin-top: 4px;
}

.ipflow-hline::before {
	content: '';
	position: absolute;
	left: 16.6667%;
	right: 16.6667%;
	top: 0;
	border-top: 1px dashed rgba(201, 205, 208, .32);
}

.ipflow-hline::after {
	content: '';
	position: absolute;
	left: 16.6667%;
	right: 16.6667%;
	top: 0;
	border-top: 1px solid var(--signal);
	box-shadow: 0 0 10px -2px color-mix(in srgb, var(--signal) 60%, transparent);
	opacity: 0;
	transition: opacity .4s;
}

.ipflow-hline.is-on::after {
	opacity: 1;
}

.ipflow-hline span {
	position: absolute;
	left: 50%;
	top: 5px;
	transform: translateX(-50%);
	background: var(--accent-bg);
	padding: 0 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #8B93A6;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.ipflow-grid3 {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.ipflow-vlines,
	.ipflow-branch,
	.ipflow-hline {
		display: none;
	}
}

/* ============================================================
   PRODOTTO — foto + testo, pagine di dettaglio dei servizi (es. "hai
   bisogno anche dei telefoni?" nella pagina Voce). Sezione chiara,
   fotografia vera invece di un'icona o un'illustrazione.
   ============================================================ */
/* ============================================================
   PERCHÉ NOI — chiusura delle pagine di dettaglio dei servizi.
   ============================================================ */
.service-why {
	padding-block: var(--sec);
}

.service-why .mono {
	color: var(--signal);
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px);
	margin-top: clamp(28px, 4vh, 44px);
}

.why-grid h3 {
	margin: 0 0 .4em;
}

.why-grid p {
	color: var(--muted-text);
	margin: 0;
	max-width: 42ch;
}

@media (max-width: 700px) {
	.why-grid {
		grid-template-columns: 1fr;
	}
}

.service-product {
	padding-block: var(--sec);
}

.service-product .mono {
	color: var(--signal);
}

.product-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

/* due .product-grid nella stessa sezione (es. page-voce.php, apparecchi
   ufficio + telefono da hotel): un filo di respiro tra l'uno e l'altro,
   .service-product da solo non lo dà (i due .wrap sono fratelli diretti). */
.product-grid + .product-grid {
	margin-top: clamp(56px, 9vh, 96px);
}

/* variante "pannello": foto e testo dentro un unico riquadro invece di
   stare separati sullo sfondo della pagina — usata dove la foto da sola
   (un solo scatto, non una coppia o un carosello) rischierebbe di
   sembrare slegata dal testo accanto (es. video-sicurezza-urbana). Stesso
   trattamento a "vetro" di .support-card. */
.product-grid--panel {
	background: var(--panel-bg);
	border-radius: 20px;
	padding: clamp(28px, 5vw, 56px);
}

.product-grid h2,
.product-grid h3 {
	margin: .3em 0 .5em;
	max-width: 20ch;
}

.product-grid p {
	color: var(--muted-text);
	max-width: 42ch;
	margin: 0 0 1.6em;
}

.phone-shot {
	position: relative;
	display: block;
}

.phone-shot img,
.phone-shot-video {
	display: block;
	width: 100%;
	height: auto;
	/* foto/video vero con sfondo trasparente (o quasi): niente
	   cornice/box, solo un'ombra leggera per dare un minimo di appoggio
	   sulla pagina */
	filter: drop-shadow(0 26px 34px -18px rgba(14, 23, 41, .38));
}

/* due scatti d'appoggio più piccoli sotto al video principale (altre
   angolazioni dello stesso apparecchio): una riga di supporto, non un
   secondo racconto — per questo restano piccoli e senza testo accanto. */
.phone-shot-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 3vw, 28px);
	margin-top: clamp(20px, 3vw, 32px);
}

.phone-shot-gallery img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 22px -14px rgba(14, 23, 41, .35));
}

/* foto vere (non ritagli di prodotto trasparenti come .phone-shot-gallery):
   cornice arrotondata e bordo sottile, stesso trattamento di .case-media,
   invece dell'ombra "in appoggio" pensata per i cutout. .photo-card-pair
   forza la stessa proporzione su entrambe (object-fit: cover) anche
   quando le foto di partenza hanno inquadrature diverse — es. una
   panoramica dell'installazione finita accanto a uno scatto verticale
   del montaggio. */
.photo-card {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid var(--hairline);
}

/* video prodotto orizzontale a piena riga, non un video case history
   verticale come .case-media (page-video.php, "Come funziona" —
   ospitalità): stesso bordo/ombra di .photo-card, proporzione 16:9
   invece di 9:16, con controlli nativi (niente autoplay, è un video
   promozionale con audio, non un loop muto di sfondo). */
.video-feature {
	max-width: 960px;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	border: 1px solid var(--hairline);
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 60px -30px rgba(14, 23, 41, .5);
}

.video-feature video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-card-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 2vw, 20px);
}

.photo-card-pair img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid var(--hairline);
}

/* ============================================================
   CAROSELLO PRODOTTO — page-voce.php: dentro .phone-shot, a sinistra
   della sezione "Anche in hotel" (stessa posizione/layout — .product-grid
   — che aveva la foto singola dell'hotel in origine). Le due foto (Fanvil
   X210, Fanvil H603W) si alternano con una dissolvenza morbida e lenta
   invece di stare fianco a fianco fra loro. Stessa cornice quadrata per
   entrambe (proporzioni diverse tra le due foto altrimenti farebbero
   "saltare" il layout cambiando slide) con object-fit:contain: essendo
   PNG a sfondo trasparente, l'inquadratura fissa non si vede, sembra solo
   che il prodotto "respiri" al centro.
   ============================================================ */
.carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
}

.carousel-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	/* trascinabile col dito per cambiare foto (assets/js/phone-carousel.js,
	   Pointer Events): pan-y lascia comunque scorrere la pagina in
	   verticale, solo il gesto orizzontale viene intercettato per il
	   cambio diapositiva invece che dal browser. */
	touch-action: pan-y;
	cursor: grab;
}

.carousel-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 1.6s var(--ease);
}

.carousel-slide.is-active {
	opacity: 1;
}

.carousel-slide img {
	display: block;
	/* un filo più grandi di prima (90% → 97%): la cornice quadrata
	   (.carousel-stage) resta della stessa identica dimensione e
	   posizione, cambia solo quanto la foto la riempie — nessun riflusso
	   del resto del layout. */
	max-width: 97%;
	max-height: 97%;
	width: auto;
	height: auto;
	filter: drop-shadow(0 34px 44px -22px rgba(14, 23, 41, .4));
}

.carousel-dots {
	display: flex;
	gap: 8px;
}

.carousel-dots button {
	width: 6px;
	height: 6px;
	padding: 0;
	border-radius: 50%;
	background: var(--hairline);
	transition: background .3s, transform .3s;
}

.carousel-dots button.on {
	background: var(--signal);
	transform: scale(1.4);
}

.carousel-dots button:hover {
	background: var(--signal-lt);
}

@media (prefers-reduced-motion: reduce) {
	.carousel-slide {
		transition: none;
	}
}

/* variante "foto vera" del carosello (page-video.php, Ospitalità): foto di
   repertorio, non ritagli di prodotto trasparenti. Stessa cornice 3:2 con
   angoli arrotondati e bordo sottile per tutte (object-fit: cover), come
   .photo-card--3x2 accanto, invece della cornice quadrata + ombra "in
   appoggio" pensata per i cutout. */
.carousel--photo .carousel-stage {
	aspect-ratio: 3 / 2;
	border-radius: 14px;
	border: 1px solid var(--hairline);
	overflow: hidden;
}

.carousel--photo .carousel-slide img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	filter: none;
}

.photo-card--3x2 {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (max-width: 1000px) {
	.phone-shot.phone-shot--photo {
		max-width: none;
	}
}

/* galleria a scorrimento (page-voce.php, telefono Yealink con
   videocamera integrata): a differenza di .carousel qui sopra
   (dissolvenza fra due foto sovrapposte) qui il passaggio da una foto
   alla successiva è uno scorrimento vero — le foto sono affiancate in
   fila (.slide-track) e la fila trasla di un riquadro alla volta — che
   poi resta fermo per un po' prima del prossimo scorrimento, invece di
   muoversi di continuo. Stessa struttura/i pallini di .carousel (colonna
   flex centrata, .carousel-dots riusata identica) per coerenza visiva.
   assets/js/slide-gallery.js. */
.slide-gallery {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
}

.slide-viewport {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 18px;
	touch-action: pan-y;
}

.slide-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 1s var(--ease);
}

.slide-item {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide-item img {
	display: block;
	max-width: 90%;
	max-height: 90%;
	width: auto;
	height: auto;
	filter: drop-shadow(0 26px 34px -18px rgba(14, 23, 41, .38));
}

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

/* riflesso animato sullo schermo del telefono, ritagliato sull'area del
   display nella foto (la scena resta ferma, solo lo schermo "vive").
   Blend "screen" su un gradiente quasi trasparente: se il ritaglio non è
   millimetrico resta comunque plausibile, è un riflesso di luce non un
   contenuto vero e proprio. */
.phone-glow {
	position: absolute;
	inset: 0;
	clip-path: polygon(49% 20%, 89% 17%, 89% 56%, 50% 59%);
	background: linear-gradient(120deg,
		transparent 0%,
		color-mix(in srgb, var(--signal-lt) 65%, transparent) 45%,
		transparent 70%);
	background-size: 260% 100%;
	mix-blend-mode: screen;
	opacity: 0;
	animation: crolla-phone-glow 6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes crolla-phone-glow {
	0%, 8% { background-position: 130% 0; opacity: 0; }
	22% { opacity: .8; }
	55% { background-position: -40% 0; opacity: .8; }
	72%, 100% { background-position: -40% 0; opacity: 0; }
}

/* stile di base: testo piccolo e smorzato per didascalie/note a piè di
   foto o paragrafo, utilizzabile ovunque nella pagina (non solo dentro
   .product-grid, che sotto aggiunge solo l'aggiustamento di margine
   specifico per stare incollato a una foto). */
.fine-print {
	font-size: .82rem;
	color: var(--muted-text);
}

.product-grid .fine-print {
	margin: -.8em 0 1.6em;
}

/* il margine negativo qui sopra serve ad avvicinare la didascalia a una
   foto/coppia di foto che finisce a raso (.phone-shot-gallery, .photo-card):
   dentro un carosello (.carousel) c'è già la riga dei pallini sotto la
   foto, e quel margine negativo ci si sovrappone invece di avvicinarsi —
   qui va di nuovo verso il basso, normale. */
.phone-shot .carousel + .fine-print {
	margin-top: .8em;
}

@media (max-width: 1000px) {
	.product-grid {
		grid-template-columns: 1fr;
	}

	/* width:100% esplicito, non solo max-width: da griglia a 2 colonne a
	   1 sola colonna, .phone-shot dovrebbe comunque riempire la sua
	   colonna per via dello stretch di default di CSS grid — ma quando
	   contiene il carosello foto (.carousel, che ha al suo interno un
	   figlio con aspect-ratio dentro un flex a colonna) Chrome/Safari
	   mobile calcolano lo stretch in modo sbagliato e lo restringono al
	   solo contenuto intrinseco (il carosello finiva largo ~20px, quasi
	   invisibile — bug verificato). Una larghezza esplicita toglie
	   l'ambiguità e risolve per entrambi i contenuti di .phone-shot
	   (foto/video singoli e carosello). */
	.phone-shot {
		order: -1;
		width: 100%;
		max-width: 340px;
		margin-inline: auto;
	}
}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement {
	padding-block: var(--sec);
}

.statement-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(28px, 6vw, 96px);
	align-items: start;
}

.statement .mono {
	display: block;
	margin-bottom: .6em;
	color: var(--signal);
}

.statement p {
	margin: 0 0 1.1em;
	max-width: 52ch;
}

.statement p:last-child {
	margin-bottom: 0;
}

.statement .big {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.35rem, 2.4vw, 2rem);
	line-height: 1.25;
	letter-spacing: -.025em;
	max-width: 22ch;
}

@media (max-width: 1000px) {
	.statement-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   CINQUE SEGNALI (elemento firma) — tab gestite da assets/js/tabs.js
   ============================================================ */
.signals {
	background: var(--accent-bg);
	color: var(--accent-text);
	padding-block: var(--sec);
	position: relative;
}

.signals .mono {
	color: #9AA1A6;
}

.signals-head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(40px, 7vh, 72px);
}

.signals-head p {
	color: #9AA1A6;
	max-width: 36ch;
	margin: 0;
}

.sig-layout {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.sig-list {
	display: grid;
	border-top: 1px solid #262C30;
}

.sig-btn {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px 18px;
	width: 100%;
	text-align: left;
	padding: clamp(16px, 2.4vh, 26px) 0;
	border-bottom: 1px solid #2A3550;
	color: #7A828C;
	transition: color .3s var(--ease), padding-left .4s var(--ease);
}

.sig-btn .num {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	align-self: center;
}

.sig-btn .eg {
	grid-column: 2;
	font-size: .82rem;
	color: #5E6B84;
	letter-spacing: .01em;
}

.sig-btn.on .eg {
	color: #9FB4D6;
}

.sig-btn .nm {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -.035em;
	font-size: clamp(1.9rem, 4.3vw, 3.4rem);
	line-height: 1;
}

.sig-btn .ar {
	width: 20px;
	height: 20px;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .3s, transform .4s var(--ease);
}

.sig-btn:hover {
	color: #B9C0C4;
}

.sig-btn.on {
	color: #fff;
	padding-left: 14px;
}

.sig-btn.on .nm {
	color: var(--signal-lt);
}

.sig-btn.on .ar {
	opacity: 1;
	transform: none;
}

.sig-panel {
	position: relative;
	min-height: 340px;
}

.sig-pane {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}

.sig-pane.on {
	opacity: 1;
	visibility: visible;
	transform: none;
	position: relative;
}

.sig-pane h3 {
	margin: 0 0 .6em;
	color: #fff;
}

.sig-pane > p {
	color: #9AA1A6;
	margin: 0 0 1.8em;
	max-width: 42ch;
}

.sig-pane ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: #262C30;
	border-block: 1px solid #262C30;
}

.sig-pane li {
	background: var(--accent-bg);
	padding: 14px 0;
	display: flex;
	gap: 14px;
	align-items: baseline;
}

.sig-pane li b {
	font-weight: 500;
	color: var(--accent-text);
	flex: none;
	min-width: 0;
}

.sig-pane li span {
	color: #787F84;
	font-size: .92rem;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: clamp(20px, 3vh, 32px);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--signal-lt);
	transition: gap .3s var(--ease);
}

.link-arrow svg {
	width: 14px;
	height: 14px;
	flex: none;
	transition: transform .3s var(--ease);
}

.link-arrow:hover {
	gap: .75em;
}

.link-arrow:hover svg {
	transform: translateX(3px);
}

.helper {
	margin-top: clamp(32px, 5vh, 56px);
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid #2A3550;
	border-radius: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.helper p {
	margin: 0;
	color: #C4CCD6;
}

.helper p b {
	color: #fff;
	font-weight: 500;
}

.helper .btn {
	background: var(--signal);
	color: #fff;
}

.helper .btn:hover {
	background: var(--signal-lt);
	color: var(--ink);
}

@media (max-width: 1000px) {
	.sig-layout {
		grid-template-columns: 1fr;
	}

	.sig-panel {
		min-height: 0;
	}

	/* .sig-pane li: titolo (b, flex:none) + descrizione affiancati sulla
	   stessa riga vanno bene nella colonna larga del layout a due colonne
	   di desktop, ma alcuni titoli sono lunghi ("Centralino su macchina
	   virtuale") e a schermo stretto non ci stanno più accanto alla
	   descrizione sulla stessa riga: il titolo (flex:none, non va mai a
	   capo) sforava la larghezza dello schermo (bug verificato). Sotto i
	   1000px il titolo va sopra e la descrizione sotto, impilati, invece
	   di provare a stare affiancati. */
	.sig-pane li {
		flex-wrap: wrap;
	}

	.sig-pane li b,
	.sig-pane li span {
		flex: 1 1 100%;
		min-width: 0;
	}
}

@media (max-width: 620px) {
	.sig-btn {
		grid-template-columns: auto 1fr;
		gap: 12px;
	}

	.sig-btn .ar {
		display: none;
	}
}

/* ============================================================
   PROCESSO
   ============================================================ */
.process {
	padding-block: var(--sec);
}

.process-head {
	margin-bottom: clamp(40px, 7vh, 72px);
	max-width: 30ch;
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--wire);
	border-block: 1px solid var(--wire);
}

.step {
	background: var(--fog);
	background: color-mix(in srgb, var(--fog), var(--signal) calc(var(--sp, 0) * 7%));
	padding: clamp(24px, 3vw, 38px) clamp(18px, 2vw, 28px) clamp(36px, 5vw, 60px);
}

.step .mono {
	display: block;
	margin-bottom: clamp(28px, 5vw, 52px);
	color: var(--signal);
}

.step h3 {
	margin: 0 0 .5em;
}

.step p {
	margin: 0;
	color: var(--slate);
	font-size: .94rem;
}

@media (max-width: 1000px) {
	.steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* ============================================================
   CASE HISTORY
   ============================================================ */
.cases {
	padding-block: var(--sec);
}

.cases .mono {
	color: var(--signal);
}

.cases-head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(36px, 6vh, 60px);
}

.cases-head p {
	margin: 0;
	color: var(--muted-text);
	max-width: 38ch;
}

.cases-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

/* pellicola di foto che scorre da sola in loop (es. radio-dove-si-usa:
   foto di repertorio da un evento) — un po' come una striscia di
   pellicola che passa in continuazione. Piena larghezza di finestra,
   stesso trucco width:100vw + margine negativo delle altre gallery a
   piena pagina del tema, con una sfumatura verso la trasparenza ai due
   bordi (mask, non un semplice overflow:hidden) così le foto "appaiono"
   e "spariscono" invece di tagliare di netto. .photo-filmstrip-track
   contiene la lista delle foto ripetuta due volte di seguito: l'anima­
   zione scorre solo la prima metà (translateX 0 → -50%) e quando
   ricomincia da capo la seconda metà, identica, ne prende
   impercettibilmente il posto — un loop che non si vede mai "tagliare".
   In pausa al passaggio del mouse (comodo per guardare meglio una foto)
   e ferma del tutto con prefers-reduced-motion.
   --vw100 (assets/js/scroll-effects.js, window.innerWidth) al posto di
   100vw: 100vw include sempre la barra di scorrimento verticale anche
   quando è riservata ma non disegnata, --vw100 no — con 100vw la
   striscia finiva un po' più larga del centro reale della pagina e
   restava un margine di scorrimento orizzontale fantasma di qualche
   pixel (bug verificato su desktop). Il fallback a 100vw resta per il
   primissimo istante prima che il JS giri, o se è disattivato. */
.photo-filmstrip {
	overflow: hidden;
	position: relative;
	left: 50%;
	width: var(--vw100, 100vw);
	margin-left: calc(var(--vw100, 100vw) / -2);
	padding-block: 4px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.photo-filmstrip-track {
	display: flex;
	gap: clamp(14px, 2.2vw, 24px);
	width: max-content;
	animation: crolla-filmstrip-scroll 42s linear infinite;
}

.photo-filmstrip:hover .photo-filmstrip-track {
	animation-play-state: paused;
}

@keyframes crolla-filmstrip-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.photo-filmstrip img {
	flex: 0 0 auto;
	height: clamp(240px, 32vw, 400px);
	width: auto;
	border-radius: 14px;
	border: 1px solid var(--hairline);
}

@media (prefers-reduced-motion: reduce) {
	.photo-filmstrip-track {
		animation: none;
	}
}

/* galleria a giostra per più casi insieme (es. Dati): esce apposta dal
   contenitore centrale del sito (piena larghezza di finestra, stesso
   trucco width:100vw + margine negativo usato altrove per gli sfondi a
   piena pagina — vedi .photo-filmstrip più sopra per il perché di
   --vw100 al posto di 100vw) per avere lo stesso respiro dei caroselli
   "vetrina" di apple.com/tv — un video alla volta al centro a piena
   opacità, gli altri intravisti ai lati più opachi e sfumati verso il
   bordo (mask invece di un semplice overflow:hidden, per la
   dissolvenza morbida). Scrollbar nascosta apposta: l'indicatore sono i
   pallini sotto (.cases-dots) e i lati stessi, cliccabili per saltarci
   — non la barra del browser. Tutta la logica di avanzamento/pausa è in
   assets/js/case-gallery.js. */
.cases-scroll {
	--cases-slide: min(880px, 86vw);
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	position: relative;
	left: 50%;
	width: var(--vw100, 100vw);
	margin-left: calc(var(--vw100, 100vw) / -2);
	padding-inline: calc((var(--vw100, 100vw) - var(--cases-slide)) / 2);
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.cases-scroll::-webkit-scrollbar {
	display: none;
}

.cases-scroll .cases-grid {
	flex: 0 0 auto;
	width: var(--cases-slide);
	scroll-snap-align: center;
	opacity: .38;
	cursor: pointer;
	transition: opacity .5s ease;
}

.cases-scroll .cases-grid.is-active {
	opacity: 1;
	cursor: default;
}

.cases-dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: clamp(24px, 4vh, 36px);
}

.cases-dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border-radius: 50%;
	background: var(--hairline);
	transition: background .3s, transform .3s;
}

.cases-dots button.on {
	background: var(--signal);
	transform: scale(1.4);
}

.cases-dots button:hover {
	background: var(--signal-lt);
}

.case-media {
	position: relative;
	aspect-ratio: 9 / 16;
	/* più alto di prima: al tetto vecchio (560px) il video verticale
	   restava piccolo e stretto dentro la sua colonna, con molto spazio
	   vuoto ai lati — qui ha più respiro senza mai diventare quadrato
	   (l'aspect-ratio 9:16 resta fisso). */
	max-height: 720px;
	border-radius: 18px;
	overflow: hidden;
	background: var(--accent-bg);
	margin-inline: auto;
	width: 100%;
	box-shadow: 0 30px 60px -30px rgba(14, 23, 41, .5);
}

.case-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.case-video-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.case-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

/* tasto "schermo intero" personalizzato (template-parts/case-expand-button.php
   + assets/js/case-fullscreen.js), va in ".case-fs" più sotto. Solo
   desktop (vedi media query qualche riga sotto): su touch i controlli
   nativi del video hanno già una loro icona di schermo intero, la
   nostra sarebbe un doppione — lì lasciamo fare al sistema operativo,
   bande nere comprese. */
.case-expand {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(14, 23, 41, .55);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background .25s, transform .25s;
}

.case-expand svg {
	width: 16px;
	height: 16px;
}

.case-expand:hover {
	background: rgba(14, 23, 41, .78);
	transform: scale(1.07);
}

/* su touch (telefoni/tablet) i controlli nativi del video hanno già la
   loro icona di schermo intero: la nostra, sovrapposta, è solo un
   doppione confuso. Resta solo su desktop, dove serve ancora perché lì
   il fullscreen nativo non ha lo stesso problema di bande nere. */
@media (hover: none) and (pointer: coarse) {
	.case-expand {
		display: none;
	}
}

/* vista a schermo intero gestita dalla pagina (#caseFs, markup in
   footer.php, unica per tutto il sito — il video "vero" ci si sposta
   dentro, non viene clonato, così riprende esattamente da dove era).
   Il video resta sempre intero (object-fit:contain, mai tagliato) e al
   posto delle bande nere piatte c'è una copia sfocata e ingrandita
   dello stesso video come sfondo ambientale (.case-fs-bg) — stesso
   trucco "ambient" di Apple TV/Apple Music, elegante anche quando le
   proporzioni schermo/video non combaciano esattamente (quasi sempre,
   sui telefoni). */
.case-fs {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s;
}

.case-fs.is-open {
	opacity: 1;
	visibility: visible;
}

.case-fs-bg {
	position: absolute;
	inset: -6%;
	width: 112%;
	height: 112%;
	object-fit: cover;
	filter: blur(60px) saturate(130%) brightness(.55);
	transform: translateZ(0);
}

.case-fs-close {
	position: absolute;
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	z-index: 3;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background .25s;
}

.case-fs-close svg {
	width: 18px;
	height: 18px;
}

.case-fs-close:hover {
	background: rgba(255, 255, 255, .26);
}

/* il video vero, spostato qui dentro da assets/js/case-fullscreen.js: si
   stacca dalle regole di .case-media video qui sopra (non ne è più
   discendente una volta spostato) e prende le proporzioni naturali,
   mai tagliato. */
video.case-fs-main {
	position: relative;
	z-index: 1;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .7);
}

html.case-fs-lock,
html.case-fs-lock body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.case-fs {
		transition: none;
	}
}

.case-media .ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: 14px;
	text-align: center;
	padding: 24px;
	color: #9FB4D6;
	background: radial-gradient(120% 80% at 50% 0%, #16223A 0%, #0E1729 60%);
}

.case-media .ph svg {
	width: 52px;
	height: 52px;
	margin-inline: auto;
	color: var(--signal-lt);
}

.case-media .ph small {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #5E6B84;
}

.case-body .tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--signal);
	border: 1px solid var(--hairline);
	border-radius: 100px;
	padding: 5px 12px;
	margin-bottom: 18px;
}

.case-body h3 {
	margin: 0 0 .5em;
}

.case-body p {
	color: var(--muted-text);
	margin: 0 0 1.6em;
	max-width: 46ch;
}

.case-points {
	list-style: none;
	margin: -.8em 0 1.6em;
	padding: 0;
	max-width: 46ch;
	display: grid;
	gap: 10px;
}

.case-points li {
	position: relative;
	padding-left: 22px;
	color: var(--page-text);
}

.case-points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--signal);
}

.case-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	border-top: 1px solid var(--hairline);
	padding-top: 22px;
}

.case-metrics b {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	letter-spacing: -.03em;
	color: var(--signal-dk);
}

.case-metrics span {
	display: block;
	margin-top: .4em;
	font-size: .82rem;
	color: var(--muted-text);
}

.case-dots {
	display: flex;
	gap: 8px;
	margin-top: clamp(28px, 4vh, 40px);
}

.case-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hairline);
}

.case-dots i:first-child {
	background: var(--signal);
	width: 26px;
	border-radius: 100px;
}

@media (max-width: 1000px) {
	.cases-grid {
		grid-template-columns: 1fr;
	}

	.case-media {
		max-width: 340px;
	}
}

/* ============================================================
   DAL 1963 (sezione scura)
   ============================================================ */
.since {
	background: var(--accent-bg);
	color: var(--accent-text);
	padding-block: var(--sec);
}

.since .mono {
	color: #9AA1A6;
}

.since-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
}

.since h2 {
	margin: .4em 0 0;
}

.since p {
	color: #9AA1A6;
	margin: 0 0 1.1em;
	max-width: 46ch;
}

.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: clamp(40px, 6vh, 72px);
	border-top: 1px solid #262C30;
	padding-top: 28px;
}

.stat b {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -.04em;
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1;
	color: var(--signal-lt);
}

.stat span {
	display: block;
	margin-top: .6em;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6E767B;
}

@media (max-width: 1000px) {
	.since-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.stats {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* foto grandi dentro .wrap (non più a tutto schermo: tagliava troppo la
   foto di gruppo sugli schermi larghi) a 16:9, il rapporto naturale delle
   foto stesse — niente ritaglio, niente ingrandimento/deformazione
   dell'immagine (provati sia scale che scaleY per il margine del
   parallasse: il primo tagliava i lati, il secondo deformava la foto).
   Il movimento di assets/js/since-parallax.js si applica invece
   all'intera .since-band (vedi qui sotto), non a questa img. */
.since-band {
	position: relative;
	margin: clamp(56px, 9vh, 96px) 0;
	will-change: transform;
}

.since-band-frame {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.since-band-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.since-band figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(20px, 4vw, 40px);
	border-radius: 0 0 20px 20px;
	background: linear-gradient(0deg, rgba(5, 7, 12, .78) 0%, transparent 100%);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-text);
}

/* niente aspect-ratio diverso sotto i 700px: le foto sono già 16:9 —
   cambiare rapporto qui costringerebbe object-fit:cover a tagliare i
   lati anche su mobile. */

@media (prefers-reduced-motion: reduce) {
	.since-band {
		transform: none;
	}
}

.since-block {
	max-width: 60ch;
}

.since-block .mono {
	display: block;
	margin-bottom: .6em;
	color: var(--signal-lt);
}

.since-block p {
	color: #9AA1A6;
	margin: 0;
}

/* cosa facciamo / formazione e sicurezza / certificazione */
.since-extra {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 48px);
	margin-top: clamp(40px, 6vh, 64px);
	padding-top: clamp(32px, 4vh, 48px);
	border-top: 1px solid #262C30;
}

.since-extra--2 {
	grid-template-columns: repeat(2, 1fr);
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.since-extra .mono {
	display: block;
	margin-bottom: .6em;
	color: var(--signal-lt);
}

.since-extra p {
	color: #9AA1A6;
	margin: 0;
}

@media (max-width: 900px) {
	.since-extra {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* stesso punto di rottura di .since-extra qui sopra: sotto i 900px
	   "Certificazione" non è più una colonna a sé, quindi l'allineamento
	   con il badge ISO non avrebbe più senso — impilati insieme come il
	   resto. */
	.since-lead {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.since-lead-cert {
		justify-content: flex-start;
	}
}

/* chi guida l'azienda (Patrizio): ritratto vero, non più ritagliato in
   un cerchietto — stessa idea "niente box" già usata per la foto del
   telefono in page-voce.php, solo un'ombra per darle appoggio */
/* stesse due colonne di .since-extra--2 qui sopra (repeat(2,1fr), stesso
   gap): serve perché il badge ISO nella seconda colonna caschi esattamente
   sotto "Certificazione", non un allineamento a occhio. */
.since-lead {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 48px);
	margin-top: clamp(40px, 6vh, 64px);
	padding-top: clamp(32px, 4vh, 48px);
	border-top: 1px solid #262C30;
}

.since-lead-main {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
}

/* badge ISO 9001:2015, discreto: dimensioni piccole apposta, non deve
   competere con la foto di Patrizio. Centrato nella sua colonna, che è
   la stessa larghezza/posizione di "Certificazione" sopra. */
.since-lead-cert {
	display: flex;
	justify-content: center;
}

.since-lead-iso {
	width: clamp(110px, 13vw, 170px);
	height: auto;
	opacity: .9;
}

.since-lead-photo {
	width: clamp(120px, 15vw, 190px);
	height: auto;
	filter: drop-shadow(0 24px 32px -18px rgba(0, 0, 0, .55));
}

.since-lead .mono {
	display: block;
	margin-bottom: .5em;
	color: var(--signal-lt);
}

.since-lead b {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
}

.since-lead-role {
	display: block;
	margin-top: .3em;
	font-size: .92rem;
	color: #9AA1A6;
}

@media (max-width: 560px) {
	.since-lead-main {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.since-lead-iso {
		margin-top: 4px;
	}
}

/* ============================================================
   ASSISTENZA
   ============================================================ */
.support {
	padding-block: var(--sec);
}

.support .mono {
	color: var(--signal);
}

.support-card {
	background: var(--panel-bg);
	border-radius: 20px;
	padding: clamp(32px, 5vw, 72px);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

.support-card p {
	color: var(--muted-text);
	max-width: 44ch;
	margin: 1em 0 0;
}

.support-cta {
	margin-top: clamp(20px, 3vh, 28px);
	/* .btn di base usa --accent-bg/--accent-text (sempre scuri): su
	   --panel-bg in dark mode sono due scuri diversi ma troppo simili —
	   stesso bug già visto altrove, qui evitato con un colore fisso. */
	background: var(--signal);
	color: #fff;
}

.support-cta:hover {
	background: var(--signal-lt);
	color: #fff;
}

.support-list {
	display: grid;
	gap: 14px;
}

.support-list div {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.support-list svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 3px;
	color: var(--signal);
}

@media (max-width: 1000px) {
	.support-card {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   BROCHURE — download in fondo alle pagine di servizio
   ============================================================ */
.brochure {
	padding-block: var(--sec);
}

.brochure-card {
	background: var(--panel-bg);
	border-radius: 20px;
	padding: clamp(24px, 4vw, 40px) clamp(28px, 5vw, 48px);
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 32px);
	flex-wrap: wrap;
}

.brochure-icon {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--signal) 14%, transparent);
	color: var(--signal);
}

.brochure-icon svg {
	width: 26px;
	height: 26px;
}

.brochure-text {
	flex: 1 1 320px;
}

.brochure-text h3 {
	margin: .3em 0 0;
}

.brochure-text p {
	color: var(--muted-text);
	max-width: 48ch;
	margin: .5em 0 0;
}

/* stesso motivo di .support-cta qui sopra: .btn di base usa
   --accent-bg/--accent-text (sempre scuri), che su --panel-bg in tema
   scuro darebbero due scuri troppo simili tra loro — colore fisso per
   restare leggibile in entrambi i temi. */
.brochure-card .btn {
	flex: none;
	background: var(--signal);
	color: #fff;
}

.brochure-card .btn:hover {
	background: var(--signal-lt);
	color: #fff;
}

@media (max-width: 640px) {
	.brochure-card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.brochure-card .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
   STATO SERVIZI
   ============================================================ */
.status {
	padding-block: var(--sec);
}

.status .mono {
	color: var(--signal);
}

.status-card {
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--hairline);
}

.status-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: clamp(22px, 3vw, 32px) clamp(24px, 4vw, 44px);
	background: color-mix(in srgb, #16A34A 12%, var(--page-bg));
}

/* più disservizi attivi insieme (template-parts/section-status.php):
   uno stacca dall'altro con un filo di separazione, dato che qui più
   .status-bar possono comparire di fila dentro la stessa .status-card. */
.status-bar + .status-bar {
	border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.status-bar.danger {
	background: color-mix(in srgb, #DC2626 14%, var(--page-bg));
}

.status-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #16A34A;
	flex: none;
	box-shadow: 0 0 0 5px color-mix(in srgb, #16A34A 22%, transparent);
}

/* stessa pallina, usata anche fuori da .status-bar (pannello riservato
   /pannello-stato/): qui il modificatore sta direttamente su .status-dot
   invece che su un antenato .status-bar.danger. */
.status-dot.danger {
	background: #DC2626;
	box-shadow: 0 0 0 5px color-mix(in srgb, #DC2626 22%, transparent);
}

.status-bar.danger .status-dot {
	background: #DC2626;
	box-shadow: 0 0 0 5px color-mix(in srgb, #DC2626 22%, transparent);
}

.status-bar h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	letter-spacing: -.02em;
}

.status-bar .when {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted-text);
}

.status-body {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	padding: clamp(28px, 4vw, 48px);
}

.status-body h4 {
	margin: 0 0 1em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -.01em;
}

.diag {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.diag li {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--hairline);
	align-items: flex-start;
}

.diag li:last-child {
	border-bottom: 0;
}

.diag .n {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--signal);
	flex: none;
	margin-top: 2px;
}

.diag b {
	font-weight: 500;
}

.diag span {
	color: var(--muted-text);
	font-size: .92rem;
}

.status-note {
	background: var(--panel-bg);
	border-radius: 16px;
	padding: clamp(20px, 2.6vw, 28px);
	align-self: start;
}

.status-note .mono {
	display: block;
	margin-bottom: 10px;
}

.status-note p {
	margin: 0 0 1em;
	color: var(--muted-text);
	font-size: .94rem;
}

.status-note .who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--hairline);
	font-size: .86rem;
	color: var(--muted-text);
}

.status-note .who svg {
	width: 30px;
	height: 30px;
	flex: none;
	color: var(--signal);
}

@media (max-width: 1000px) {
	.status-body {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   CONTATTI — testata + opzioni di contatto, ispirate (non identiche)
   alla pagina Contatti di Alpsim.
   ============================================================ */
.contact-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--sec);
}

/* il campo di segnale (assets/js/hero-canvas.js, data-adaptive) riempie
   la sezione dietro al testo: qui, a differenza di .hero/.service-head,
   lo sfondo segue il tema chiaro/scuro, quindi anche i puntini leggono i
   colori dai design token invece che da valori fissi (vedi commento in
   cima al file JS). */
.contact-hero #field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.contact-hero > .wrap {
	position: relative;
	z-index: 1;
}

.contact-hero-head {
	max-width: 62ch;
	margin: 0 auto;
	text-align: center;
}

.contact-hero-head .mono {
	display: block;
	margin-bottom: .8em;
	color: var(--signal);
}

.contact-hero-head h1 {
	margin: 0 0 .5em;
}

.contact-hero-head p {
	color: var(--muted-text);
	margin: 0 auto;
	max-width: 52ch;
}

.contact-options {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 20px);
	margin-top: clamp(40px, 6vh, 64px);
}

.contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: clamp(28px, 3.5vw, 40px) 20px;
	border-radius: 20px;
	background: var(--panel-bg);
	transition: transform .3s var(--ease), background .3s var(--ease);
}

.contact-card:hover {
	transform: translateY(-3px);
	background: color-mix(in srgb, var(--panel-bg), var(--signal) 8%);
}

.contact-card-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--signal);
}

.contact-card-icon svg {
	width: 24px;
	height: 24px;
}

.contact-card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.02rem;
}

.contact-card-sub {
	color: var(--muted-text);
	font-size: .88rem;
}

@media (max-width: 900px) {
	.contact-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.contact-options {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   LAVORA CON NOI — pagina Contatti, sotto le opzioni di contatto.
   ============================================================ */
.jobs {
	padding-block: var(--sec);
}

.jobs-head {
	max-width: 62ch;
	margin: 0 auto clamp(32px, 5vh, 56px);
	text-align: center;
}

.jobs-head .mono {
	display: block;
	margin-bottom: .8em;
	color: var(--signal);
}

.jobs-head p {
	color: var(--muted-text);
	margin: .6em auto 0;
	max-width: 50ch;
}

.jobs-roles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 40px);
	margin-top: clamp(40px, 6vh, 64px);
}

.jobs-role {
	padding: clamp(24px, 3vw, 32px);
	border-radius: 20px;
	background: var(--panel-bg);
}

.jobs-role h3 {
	margin: 0 0 .5em;
}

.jobs-role p {
	color: var(--muted-text);
	margin: 0;
	max-width: 36ch;
}

.jobs-cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 5vh, 48px);
}

@media (max-width: 700px) {
	.jobs-roles {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   POPUP (moduli di contatto e candidatura) — overlay "liquid glass"
   leggero: sfondo pagina sfocato, ma il pannello resta quasi opaco così
   il testo del form è sempre ben leggibile (niente vetro esagerato).
   ============================================================ */
.modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 40px);
	background: color-mix(in srgb, var(--ink) 55%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease), visibility 0s linear .3s;
}

.modal.open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s var(--ease);
}

.modal-panel {
	position: relative;
	width: min(600px, 100%);
	max-height: min(88vh, 900px);
	overflow-y: auto;
	background: color-mix(in srgb, var(--page-bg-2) 92%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border-radius: 24px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45);
	padding: clamp(28px, 4vw, 44px);
	transform: translateY(16px) scale(.98);
	transition: transform .35s var(--ease);
}

.modal.open .modal-panel {
	transform: none;
}

.modal-close {
	position: absolute;
	top: clamp(16px, 2.5vw, 24px);
	right: clamp(16px, 2.5vw, 24px);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--panel-bg);
	color: var(--page-text);
	transition: background .2s;
}

.modal-close:hover {
	background: var(--hairline);
}

.modal-close svg {
	width: 16px;
	height: 16px;
}

.modal-panel h2 {
	margin: 0 0 .3em;
	padding-right: 44px;
}

.modal-lede {
	color: var(--muted-text);
	margin: 0 0 clamp(20px, 3vh, 28px);
}

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

/* ---------- campi dei form nei popup ---------- */
.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.field {
	margin-bottom: 16px;
}

.field label {
	display: block;
	font-size: .85rem;
	color: var(--muted-text);
	margin-bottom: .4em;
}

/* :not(radio/checkbox) — sono loro la causa del bug segnalato: un radio
   dentro un .field erediva questi stili da campo di testo (width:100% +
   padding + bordo arrotondato) e diventava una barra vuota al posto del
   pallino nativo. Radio/checkbox hanno il loro aspetto, non questo. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
	/* il bordo nativo del browser (specie su <select>) è quadrato e più
	   scuro dell'hairline: si sommava al box-shadow qui sotto creando un
	   doppio bordo "strano" — appearance:none + border:0 lo tolgono, resta
	   solo il contorno morbido dato dal box-shadow. */
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	width: 100%;
	padding: .75em .9em;
	border-radius: 10px;
	background: var(--page-bg);
	box-shadow: inset 0 0 0 1px var(--hairline);
	color: var(--page-text);
	transition: box-shadow .2s;
}

.field select {
	padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6470' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85em center;
	background-size: 14px;
}

/* stessa freccia ma nel grigio-azzurro chiaro di --muted-text in dark
   mode: il colore è dentro un'immagine SVG in background, non può
   leggere la custom property da solo, va duplicata qui. */
:root[data-theme="dark"] .field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B93A6' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

.field input[type="file"] {
	padding: .55em .7em;
	cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--muted-text);
	opacity: .7;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--signal);
}

.field textarea {
	resize: vertical;
	min-height: 100px;
}

.field--hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .85rem;
	color: var(--muted-text);
	margin: 4px 0 20px;
	cursor: pointer;
}

.consent input {
	margin-top: .2em;
	accent-color: var(--signal);
	flex: none;
}

.form-legal {
	font-size: .76rem;
	color: var(--muted-text);
	line-height: 1.5;
	margin: 0 0 20px;
	max-height: 140px;
	overflow-y: auto;
	padding: 12px;
	border-radius: 10px;
	background: var(--page-bg);
}

.form-msg {
	font-size: .88rem;
	min-height: 1.4em;
	margin: 0 0 12px;
}

.form-msg--ok {
	color: #1E8E5A;
}

.form-msg--err {
	color: #C0392B;
}

.modal-panel .btn {
	width: 100%;
	justify-content: center;
	/* .btn di base usa --accent-bg/--accent-text (sempre scuri): dentro un
	   pannello che segue il tema chiaro/scuro andrebbero a sparire in dark
	   mode (bottone quasi nero su pannello quasi nero) — stesso bug già
	   visto altrove, qui evitato con un colore di brand fisso. */
	background: var(--signal);
	color: #fff;
}

.modal-panel .btn:hover {
	background: var(--signal-lt);
	color: #fff;
}

.modal-panel .btn:disabled {
	opacity: .6;
	cursor: default;
	transform: none;
}

@media (max-width: 560px) {
	.field-row {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   PANNELLO RISERVATO /pannello-stato/ — login + modulo di
   aggiornamento "Stato servizi" (vedi inc/panel-stato.php,
   template-parts/panel-stato.php). Pagina autonoma, non fa parte del
   sito pubblico: niente nav, un solo riquadro centrato. Riusa .field,
   .btn, .form-msg già definiti sopra per i form di Contatti.
   ============================================================ */
.panel-stato-body {
	min-height: calc(100vh / var(--ui-zoom, 1));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 5vw, 48px);
	background: var(--page-bg);
}

.panel-stato-wrap {
	width: 100%;
	max-width: 460px;
}

.panel-stato-card {
	background: var(--page-bg-2);
	border-radius: 24px;
	box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .35);
	padding: clamp(28px, 5vw, 40px);
}

.panel-stato-logo {
	height: 30px;
	width: auto;
	margin-bottom: clamp(20px, 3vh, 28px);
}

.panel-stato-lede {
	color: var(--muted-text);
	margin: .3em 0 clamp(20px, 3vh, 28px);
}

.panel-stato-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.panel-stato-logout {
	flex: none;
	font-size: .85rem;
	color: var(--muted-text);
	text-decoration: underline;
	padding-top: .4em;
}

/* ogni "sezione" del pannello (elenco disservizi attivi, modulo per
   aggiungerne uno nuovo) è introdotta da una mono-label, come nel resto
   del sito, e separata dalla precedente da un filo. */
.panel-stato-section {
	margin-top: clamp(28px, 4vh, 40px);
	padding-top: clamp(20px, 3vh, 28px);
	border-top: 1px solid var(--hairline);
}

.panel-stato-section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.panel-stato-section > .mono {
	display: block;
	color: var(--muted-text);
	margin-bottom: clamp(14px, 2vh, 20px);
}

.panel-stato-empty {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .92rem;
	color: var(--muted-text);
	margin: 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--page-bg);
}

.panel-stato-active-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.panel-stato-active-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: color-mix(in srgb, #DC2626 8%, var(--page-bg));
}

.panel-stato-active-body {
	flex: 1;
	min-width: 0;
}

.panel-stato-active-body p {
	margin: 0;
	font-size: .95rem;
}

.panel-stato-active-when {
	display: block;
	margin-top: .3em;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted-text);
}

/* "Modifica messaggio": un <details> nativo, niente JS — utile per i
   casi in cui un disservizio resta lo stesso ma il testo va aggiornato
   (es. tempi di rientro che slittano) senza risolverlo e ripubblicarlo. */
.panel-stato-edit {
	margin-top: 10px;
}

.panel-stato-edit summary {
	cursor: pointer;
	font-size: .82rem;
	color: var(--signal);
	list-style: none;
}

.panel-stato-edit summary::-webkit-details-marker {
	display: none;
}

.panel-stato-edit summary:hover {
	color: var(--signal-lt);
}

.panel-stato-edit-form {
	margin-top: 10px;
	display: grid;
	gap: 10px;
}

.panel-stato-edit-form textarea {
	width: 100%;
	padding: .7em .85em;
	border-radius: 10px;
	background: var(--page-bg);
	box-shadow: inset 0 0 0 1px var(--hairline);
	color: var(--page-text);
	font: inherit;
	resize: vertical;
	min-height: 80px;
}

.panel-stato-edit-form .btn {
	justify-self: start;
	padding: .55em 1.1em;
	font-size: .85rem;
}

.panel-stato-resolve-btn {
	flex: none;
	padding: .6em 1.1em;
	font-size: .85rem;
}

/* ============================================================
   PARTNER — "Ci trovi anche qua" in home, tra Cosa facciamo e Chi
   siamo. Sezione chiara apposta: le due sopra/sotto sono entrambe
   sempre scure (--accent-bg), qui serve un respiro nel ritmo della
   pagina invece di tre sezioni scure di fila. Striscia compatta, non
   una sezione a piena altezza come le altre.
   ============================================================ */
.partner {
	padding-block: clamp(56px, 8vh, 96px);
}

.partner-inner {
	max-width: 56ch;
	margin: 0 auto;
	text-align: center;
}

.partner-inner .mono {
	display: block;
	margin-bottom: .8em;
	color: var(--signal);
}

.partner-inner p {
	color: var(--muted-text);
	margin: .8em auto clamp(24px, 3.5vh, 36px);
	max-width: 48ch;
}

.partner-inner .btn {
	display: inline-flex;
}

/* ============================================================
   NAVIGABILITÀ MOBILE — solo aggiunte, non toccano una sola riga della
   versione desktop già fatta (né qui sotto c'è alcun override di regole
   esistenti, solo regole nuove dentro media query). I pallini dei
   caroselli (.carousel-dots, .cases-dots) sono volutamente piccoli a
   vista (6-7px, coerenti con lo stile minimale del sito) ma su un
   touchscreen un bersaglio così piccolo è difficile da centrare col
   dito — qui si allarga solo l'area toccabile con uno pseudo-elemento
   invisibile attorno al pallino, che resta visivamente identico:
   nessun impatto sul desktop, dove il puntatore del mouse non ha
   questo problema di precisione. ============================================================ */
@media (max-width: 900px) {
	.carousel-dots button,
	.cases-dots button {
		position: relative;
	}

	.carousel-dots button::before,
	.cases-dots button::before {
		content: '';
		position: absolute;
		inset: -12px;
	}
}