/* =========================================================
   ALCA srl — Design System
   Palette derivata dal logo: rosso #ED1C25 + nero.
   ========================================================= */

/* ---------- Font ospitati nel tema (12 agosto 2026, GDPR) ----------
   Prima arrivavano da fonts.googleapis.com: ogni visita mandava l'IP
   del visitatore a Google prima di qualunque consenso. Ora i woff2
   stanno in assets/fonts (sottoinsieme latino, ~220 KB in tutto) e il
   sito non parla piu' con Google, salvo la mappa caricata su richiesta. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/outfit-800.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jetbrains-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-700.woff2') format('woff2'); }

:root {
	/* --- Colori dal logo --- */
	--color-ink: #121215;          /* nero del logo — hero, footer, titoli */
	--color-ink-soft: #26262B;     /* nero schiarito — superfici scure */
	--color-red: #ED1C25;          /* rosso del logo — grafica, elementi 3D */
	--color-red-action: #C4141C;   /* rosso scurito — CTA e link (contrasto AA) */
	--color-red-dark: #9E1015;     /* hover CTA */
	--color-red-light: #FF6067;    /* rosso chiaro — testo piccolo su fondo scuro */

	/* --- Neutri caldi (cemento) --- */
	--color-background: #F4F2EF;
	--color-surface: #FFFFFF;
	--color-muted: #E9E5E0;
	--color-border: #D9D4CD;
	--color-text: #1A1A1D;
	--color-text-muted: #55555C;
	--color-concrete: #C9C4BC;     /* grigio cemento — volumi 3D */

	--color-destructive: #C4141C;
	--color-ring: #C4141C;

	/* --- Tipografia --- */
	--font-heading: 'Outfit', system-ui, sans-serif;
	--font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* --- Spaziatura --- */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 96px;
	/* Respiro verticale delle sezioni: cresce col viewport invece di restare
	   fisso a 96px. E' la differenza piu' visibile fra un layout "stretto"
	   e uno che sembra progettato. */
	--space-section: clamp(72px, 8.5vw, 144px);
	--gutter: clamp(20px, 4vw, 40px);

	/* --- Forme --- */
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--container-max: 1200px;
	--measure: 64ch;

	/* --- Profondita' ---
	   Ombre a due livelli e virate sul caldo (non nero puro): su fondo
	   cemento il nero puro sporca, il bruno resta pulito. */
	--shadow-sm: 0 1px 2px rgba(28, 22, 16, 0.05), 0 2px 6px -2px rgba(28, 22, 16, 0.06);
	--shadow-md: 0 2px 4px rgba(28, 22, 16, 0.05), 0 12px 24px -12px rgba(28, 22, 16, 0.16);
	--shadow-lg: 0 4px 8px rgba(28, 22, 16, 0.06), 0 28px 48px -24px rgba(28, 22, 16, 0.26);

	/* --- Movimento --- */
	--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--duration-fast: 150ms;
	--duration-standard: 280ms;
	--duration-slow: 700ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-red-action); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dt, dd { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* Evita le righe finali di una sola parola nei paragrafi. */
p { text-wrap: pretty; }

::selection { background: var(--color-red); color: #fff; }

:focus-visible {
	outline: 3px solid var(--color-ring);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	line-height: 1.05;
	margin: 0 0 var(--space-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
/* Il tracking si stringe man mano che il corpo cresce: e' la correzione
   ottica che distingue una gerarchia composta da una scalata a caso. */
.h1, h1 { font-size: clamp(2.75rem, 5.4vw, 5rem); letter-spacing: -0.035em; line-height: 0.98; }
.h2, h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -0.028em; line-height: 1.03; }
.h3, h3 { font-size: clamp(1.3125rem, 1.9vw, 1.625rem); letter-spacing: -0.018em; line-height: 1.15; }
.h4, h4 { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.25; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-red-action);
	margin-bottom: var(--space-3);
}
.eyebrow::before {
	content: '';
	width: 22px;
	height: 3px;
	background: var(--color-red);
	display: inline-block;
}

.lead {
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.65;
	color: var(--color-text-muted);
	max-width: var(--measure);
}

.prose p { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.prose h2 { margin-top: var(--space-5); }
.prose ul { list-style: disc; padding-left: 1.25em; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

/* ---------- Layout ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space-section) 0; }
.section-tight { padding: calc(var(--space-section) * 0.55) 0; }
.section-dark { background: var(--color-ink); color: rgba(255,255,255,0.86); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: var(--color-red-light); }
.section-dark .lead { color: rgba(255,255,255,0.72); }
.section-muted { background: var(--color-muted); }

.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* ---------- Bottoni (estrusione 3D: ombra netta, non sfocata) ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 48px;
	padding: 0 var(--space-4);
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	border: 1.5px solid transparent;
	transition: background-color var(--duration-standard) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}
.btn-primary {
	background: var(--color-red-action);
	color: #fff;
	box-shadow: 3px 3px 0 var(--color-ink);
}
.btn-primary:hover {
	background: var(--color-red-dark);
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--color-ink);
}
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.45); color: currentColor; }
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-muted); }
.btn-block { width: 100%; }
/* Freccia che avanza in hover: microinterazione che segnala la direzione
   dell'azione senza aggiungere rumore visivo. */
.btn-arrow { transition: transform var(--duration-standard) var(--ease-standard); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #FFFFFF;
	border-bottom: 3px solid var(--color-red);
	transition: box-shadow var(--duration-standard) var(--ease-standard);
}
/* Staccandosi dalla cima la testata prende un'ombra e si compatta:
   segnala che il contenuto le scorre sotto invece di restare piatta. */
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
/* La riduzione del logo vale solo da desktop: sotto i 1080px la testata e'
   alta 72px fissi e il menu a tendina ci si aggancia sotto. */
@media (min-width: 1080px) {
	.site-header.is-scrolled .site-logo img { height: 44px; }
}

/* Avanzamento di lettura: 2px di rosso sul bordo inferiore della testata. */
.scroll-progress {
	position: absolute;
	left: 0;
	bottom: -3px;
	height: 3px;
	width: 0;
	background: var(--color-ink);
	transform-origin: left center;
	will-change: width;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) var(--gutter);
	max-width: var(--container-max);
	margin: 0 auto;
	gap: var(--space-3);
}
.site-logo img { height: 56px; width: auto; transition: height var(--duration-standard) var(--ease-standard); }
.nav-menu { display: flex; align-items: center; gap: var(--space-4); }
.nav-menu a {
	position: relative;
	color: var(--color-text-muted);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	padding: var(--space-1) 0;
	transition: color var(--duration-fast) var(--ease-standard);
}
/* Sottolineatura che si apre da sinistra invece di comparire di colpo. */
.nav-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--color-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-standard) var(--ease-standard);
}
.nav-menu a:hover, .nav-menu a.current-menu-item { color: var(--color-red-action); }
.nav-menu a:hover::after, .nav-menu a.current-menu-item::after { transform: scaleX(1); }
.header-cta { display: flex; align-items: center; gap: var(--space-3); }
.header-cta .phone-link { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-ink); }

.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: var(--space-1);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	content: '';
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-ink);
	position: relative;
}
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after { position: absolute; top: 8px; }

.header-quote .label-corto { display: none; }

/* Fino a 1079px e non piu' 900 (10 ottobre 2026): fra 901 e 1079px (tablet in
   orizzontale, finestre strette con la barra di scorrimento) le voci del menu
   in linea andavano a capo e "Richiedi preventivo" occupava due righe. Misurato:
   con la barra di scorrimento il menu sta su una riga da 1080px di finestra. */
@media (max-width: 1079px) {
	.nav-toggle { display: flex; }
	/* --header-h la scrive il JS con l'altezza reale della testata: se il
	   pulsante o il logo cambiano ingombro, il pannello resta agganciato. */
	.primary-nav {
		position: fixed;
		top: var(--header-h, 72px);
		left: 0;
		right: 0;
		/* bottom e non 100vh: sui telefoni 100vh e' piu' alto dello schermo
		   visibile e l'ultima voce finiva sotto la barra del browser. */
		bottom: 0;
		background: #FFFFFF;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
		overflow-y: auto;
	}
	.primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
	.nav-menu { flex-direction: column; align-items: stretch; padding: var(--space-3); gap: 0; }
	.nav-menu li { border-bottom: 1px solid var(--color-border); }
	.nav-menu a { display: block; padding: var(--space-3) var(--space-1); }
	.header-cta .btn-label { display: none; }
	.header-cta .phone-link { width: 44px; height: 44px; justify-content: center; }
}

/* Testata compatta sotto i 600px: senza questo blocco l'etichetta del
   pulsante andava a capo e la barra diventava alta il doppio. */
@media (max-width: 600px) {
	.header-inner { gap: var(--space-1); padding-left: var(--space-2); padding-right: var(--space-2); }
	.site-logo img { height: 42px; }
	.header-cta { gap: var(--space-1); }
	.header-quote {
		min-height: 44px;
		padding: 0 var(--space-2);
		font-size: 0.8125rem;
		white-space: nowrap;
	}
	.header-quote .label-lungo { display: none; }
	.header-quote .label-corto { display: inline; }
}

/* =========================================================
   SCENA 3D — struttura in costruzione + gru
   Cuboidi CSS: ogni blocco rende 3 facce (fronte/lato/cima).
   Le dimensioni arrivano da --w/--h/--d (numeri puri, in px).
   ========================================================= */
.scene-3d {
	position: relative;
	height: 460px;
	perspective: 1150px;
	perspective-origin: 50% 42%;
}

/* Da tablet in su la scena esce dalla colonna e occupa tutto l'hero: un
   oggetto 3D chiuso in mezza colonna resta un soprammobile, a tutta pagina
   diventa l'ambiente in cui sta il testo. Il velo sotto tiene la leggibilita'. */
@media (min-width: 900px) {
	.scene-3d {
		position: absolute;
		inset: 0;
		height: auto;
		z-index: 0;
	}
	.scene-3d::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(100deg,
			rgba(18, 18, 21, 0.94) 0%,
			rgba(18, 18, 21, 0.86) 30%,
			rgba(18, 18, 21, 0.45) 52%,
			rgba(18, 18, 21, 0) 70%);
	}
	.hero-inner { position: relative; z-index: 3; }
	.hero-enter { max-width: 640px; }
	.hero { min-height: 86vh; display: flex; align-items: center; }
}

/* La tela WebGL sta sopra la scena CSS e la sostituisce solo quando il 3D
   e' partito: se WebGL manca o il file non arriva, resta il fallback. */
#scena-webgl {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 900ms var(--ease-out-quart);
}
.scene-3d.webgl-attiva > #scena-webgl { opacity: 1; }
.scene-3d.webgl-attiva > .structure { opacity: 0; visibility: hidden; }
.structure {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: translate3d(-26px, 18px, 0) rotateX(-15deg) rotateY(-28deg);
	animation: structure-orbit 16s var(--ease-standard) infinite alternate;
}
@keyframes structure-orbit {
	from { transform: translate3d(-26px, 18px, 0) rotateX(-15deg) rotateY(-36deg); }
	to   { transform: translate3d(-26px, 18px, 0) rotateX(-15deg) rotateY(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
	.structure { animation: none; }
}

.blk {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
	transform: translate3d(calc(var(--x) * 1px), calc(var(--y) * 1px), calc(var(--z) * 1px));
	--base: var(--color-concrete);
}
.blk .f { position: absolute; }
.blk .f-front {
	width: calc(var(--w) * 1px);
	height: calc(var(--h) * 1px);
	left: calc(var(--w) * -0.5px);
	top: calc(var(--h) * -0.5px);
	transform: translateZ(calc(var(--d) * 0.5px));
	background: var(--base);
}
.blk .f-right {
	width: calc(var(--d) * 1px);
	height: calc(var(--h) * 1px);
	left: calc(var(--d) * -0.5px);
	top: calc(var(--h) * -0.5px);
	transform: rotateY(90deg) translateZ(calc(var(--w) * 0.5px));
	background: color-mix(in srgb, var(--base) 68%, #000);
}
.blk .f-top {
	width: calc(var(--w) * 1px);
	height: calc(var(--d) * 1px);
	left: calc(var(--w) * -0.5px);
	top: calc(var(--d) * -0.5px);
	transform: rotateX(90deg) translateZ(calc(var(--h) * 0.5px));
	background: color-mix(in srgb, var(--base) 88%, #fff);
}

.blk-red { --base: var(--color-red); }
.blk-dark { --base: #3A3A42; }
.blk-slab { --base: #D6D1C9; }

@media (max-width: 1100px) {
	.scene-3d { height: 380px; }
	.structure { scale: 0.8; }
}
@media (max-width: 900px) {
	.scene-3d { height: 320px; }
	.structure { scale: 0.66; }
}

/* La griglia tecnica di sfondo (.blueprint-grid, col bagliore rosso) e'
   stata tolta anche dalla pagina Certificazioni il 12 agosto 2026: le
   fasce scure di tutto il sito sono nere piene, come la home rifatta. */

/* ---------- Mirini ad angolo ----------
   Riferimento al disegno tecnico: in hover i due angoli si "chiudono" sulla
   scheda, come le squadrette di inquadratura di una tavola di progetto. */
.corner-marks { position: relative; }
.corner-marks::before, .corner-marks::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border-color: var(--color-red);
	opacity: 0;
	transition: opacity var(--duration-standard) var(--ease-standard),
		transform var(--duration-slow) var(--ease-standard);
	pointer-events: none;
}
.corner-marks::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid;
	border-left: 2px solid;
	transform: translate(6px, 6px);
}
.corner-marks::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid;
	border-right: 2px solid;
	transform: translate(-6px, -6px);
}
.corner-marks:hover::before,
.corner-marks:hover::after,
.corner-marks:focus-within::before,
.corner-marks:focus-within::after {
	opacity: 1;
	transform: translate(0, 0);
}

/* ---------- Hero ---------- */
.hero {
	background: var(--color-ink);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.hero-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) var(--gutter) clamp(48px, 6vw, 88px);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-5);
	align-items: center;
	position: relative;
	z-index: 1;
}
/* Ingresso in sequenza degli elementi dell'hero al caricamento: l'ordine di
   lettura (occhiello, titolo, testo, pulsanti) diventa anche l'ordine in cui
   compaiono. Il ritardo lo imposta il JS elemento per elemento. */
.hero-enter > * {
	opacity: 0;
	transform: translateY(14px);
	animation: hero-in 800ms var(--ease-out-quart) forwards;
	animation-delay: var(--enter-delay, 0ms);
}
@keyframes hero-in {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-enter > * { opacity: 1; transform: none; animation: none; }
}
/* Faretto che insegue il cursore, con un ritardo impostato dal JS.
   Sta sopra la griglia tecnica e sotto il testo, e resta appena percepibile:
   deve far sembrare la scena illuminata, non attirare l'attenzione su di se'. */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 700ms var(--ease-out-quart);
	background: radial-gradient(
		480px circle at var(--mx, 50%) var(--my, 42%),
		rgba(255, 255, 255, 0.07),
		rgba(237, 28, 37, 0.05) 45%,
		transparent 72%
	);
}
.hero.is-lit::after { opacity: 1; }

.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero .eyebrow { color: var(--color-red-light); }
.hero p.lead { color: rgba(255,255,255,0.72); }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.hero .btn-primary { box-shadow: 3px 3px 0 rgba(0,0,0,0.5); }
.hero .btn-primary:hover { box-shadow: 5px 5px 0 rgba(0,0,0,0.5); }
@media (max-width: 900px) {
	/* Su mobile il titolo viene prima dell'illustrazione: con la scena 3D in
	   testa il messaggio principale finiva sotto la piega. */
	.hero-inner { grid-template-columns: 1fr; padding-top: var(--space-5); }
	.scene-3d { order: 1; }
}

/* ---------- Ticker certificazioni ---------- */
.ticker-band {
	background: var(--color-ink-soft);
	border-top: 1px solid rgba(255,255,255,0.08);
	overflow: hidden;
	padding: var(--space-3) 0;
}
.ticker-track {
	display: flex;
	width: max-content;
	gap: var(--space-5);
	animation: ticker-scroll 32s linear infinite;
}
.ticker-track span {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}
.ticker-track span::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--color-red);
	display: inline-block;
}
@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Documenti scaricabili ----------
   Una tavola sola: i pulsanti sono celle separate da un filo di 1px, non
   schede che galleggiano. Al passaggio la cella si inverte in nero — una
   sola idea, applicata bene, invece di tre effetti sovrapposti. */
.doc-tavola {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
/* Il numero di celle vuote di chiusura dipende dalle colonne, quindi le
   colonne sono fissate a soglie note invece che con auto-fill. */
/* Selettore discendente per battere `.doc-tasto { display: flex }`, che sta
   piu' avanti nel foglio e a pari specificita' avrebbe la meglio. */
@media (max-width: 991px) {
	.doc-tavola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.doc-tavola .doc-vuoto:last-child { display: none; }
}
@media (max-width: 619px) {
	.doc-tavola { grid-template-columns: minmax(0, 1fr); }
	.doc-tavola .doc-vuoto { display: none; }
}

.doc-tasto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-4) var(--space-3) var(--space-2);
	background: var(--color-surface);
	color: var(--color-text);
	min-height: 210px;
	transition: background-color var(--duration-standard) var(--ease-standard),
		color var(--duration-standard) var(--ease-standard);
}
.doc-tasto:focus-visible { outline: 3px solid var(--color-ring); outline-offset: -3px; }
.doc-vuoto { background: var(--color-surface); pointer-events: none; }

/* L'inversione: fondo nero, testo bianco. Il rosso del segno resta lo stesso
   in entrambi gli stati ed e' l'elemento che tiene insieme le due versioni. */
@media (hover: hover) {
	.doc-tasto:not(.doc-vuoto):hover {
		background: var(--color-ink);
		color: #fff;
	}
}
.doc-tasto:not(.doc-vuoto):focus-visible {
	background: var(--color-ink);
	color: #fff;
}

.doc-alto {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.doc-tipo {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding-top: 6px;
	transition: color var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.doc-tasto:hover .doc-tipo { color: rgba(255, 255, 255, 0.55); }
}

.doc-segno {
	flex-shrink: 0;
	color: var(--color-red-action);
	transition: color var(--duration-standard) var(--ease-standard),
		transform var(--duration-slow) var(--ease-out-quart);
}
@media (hover: hover) {
	.doc-tasto:hover .doc-segno { color: var(--color-red); transform: translateY(-2px); }
}

.doc-sigla {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: inherit;
}
.doc-nome { font-size: 0.9375rem; line-height: 1.4; color: inherit; }
/* Colore dichiarato esplicitamente nei due stati invece di affidarlo
   all'ereditarieta': su fondo invertito e' la differenza fra testo leggibile
   e testo nero su nero. */
.doc-tasto .doc-sigla, .doc-tasto .doc-nome { color: var(--color-ink); }
@media (hover: hover) {
	.doc-tasto:hover .doc-sigla,
	.doc-tasto:hover .doc-nome { color: #fff; }
}
.doc-tasto:focus-visible .doc-sigla,
.doc-tasto:focus-visible .doc-nome { color: #fff; }
.doc-nota {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	margin-top: 2px;
	transition: color var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.doc-tasto:hover .doc-nota { color: rgba(255, 255, 255, 0.55); }
}

.doc-azione {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	/* margin-top:auto incolla la riga in basso: le celle restano allineate
	   anche quando i nomi occupano un numero diverso di righe. */
	margin-top: auto;
	padding-top: var(--space-3);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	border-top: 1px solid var(--color-border);
	transition: color var(--duration-standard) var(--ease-standard),
		border-color var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.doc-tasto:hover .doc-azione { color: #fff; border-color: rgba(255, 255, 255, 0.22); }
}
.doc-etichetta { text-transform: uppercase; font-weight: 600; }
.doc-peso { margin-left: auto; white-space: nowrap; opacity: 0.75; }
.doc-freccia { flex-shrink: 0; transition: transform var(--duration-standard) var(--ease-standard); }
@media (hover: hover) {
	.doc-tasto:hover .doc-freccia { transform: translateX(4px); }
}

/* ---------- Divisore a strisce da cantiere ---------- */
.stripe-divider {
	height: 8px;
	background: repeating-linear-gradient(
		135deg,
		var(--color-red) 0 14px,
		var(--color-ink) 14px 28px
	);
}

/* ---------- Stats ---------- */
.stats-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.stats-bar .grid { padding: var(--space-5) 0; gap: var(--space-4); }
.stats-bar .grid > div { border-left: 3px solid var(--color-red); padding-left: var(--space-3); }
.stat-number {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 3.4vw, 3.5rem);
	font-weight: 800;
	color: var(--color-ink);
	letter-spacing: -0.035em;
	line-height: 1;
	/* Cifre a larghezza fissa: senza questo il numero "salta" mentre il
	   contatore sale da 0 al valore finale. */
	font-variant-numeric: tabular-nums;
}
.stat-label {
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-top: var(--space-1);
}

/* ---------- Badge certificazioni ---------- */
.cert-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cert-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-ink);
}
.cert-badge .dot { width: 8px; height: 8px; background: var(--color-red); }

/* ---------- Card ----------
   L'inclinazione 3D in hover e' stata tolta: su una scheda di testo si legge
   come effetto da template. Al suo posto un sollevamento netto, ombra a due
   livelli e i mirini d'angolo (vedi .corner-marks) che si chiudono sul bordo. */
.card {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-standard) var(--ease-standard),
		box-shadow var(--duration-standard) var(--ease-standard),
		border-color var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.card:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-lg);
		border-color: var(--color-concrete);
	}
}
.card .icon-badge {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-3);
	font-family: var(--font-heading);
	font-weight: 800;
	box-shadow: 3px 3px 0 var(--color-ink);
	transition: box-shadow var(--duration-standard) var(--ease-standard),
		transform var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.card:hover .icon-badge { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--color-ink); }
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); margin: 0; }

/* ---------- Blocchi valori ----------
   Impaginazione editoriale: numero di sezione in colonna a se', testo su una
   misura leggibile invece che a tutta larghezza. */
.value-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.value-row + .value-row { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.value-row .num {
	font-family: var(--font-mono);
	font-weight: 700;
	color: var(--color-red-action);
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	padding-top: 6px;
	position: relative;
}
.value-row .num::after {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	background: var(--color-red);
	margin-top: var(--space-2);
	opacity: 0.35;
}
.value-row h3 { margin-bottom: var(--space-2); }
.value-row p { max-width: var(--measure); }
@media (max-width: 700px) {
	.value-row { grid-template-columns: 1fr; gap: var(--space-2); }
	.value-row .num::after { display: none; }
}

/* ---------- CTA band ---------- */
.cta-band {
	background: var(--color-ink);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	border-left: 8px solid var(--color-red);
}
/* Strisce da cantiere appena accennate nell'angolo: dettaglio di texture che
   toglie alla fascia l'aspetto di rettangolo pieno. */
.cta-band::after {
	content: '';
	position: absolute;
	right: -40px;
	top: -40px;
	width: 220px;
	height: 220px;
	background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 10px, transparent 10px 20px);
	transform: rotate(0deg);
	pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h3 { color: #fff; margin-bottom: 4px; }
.cta-band .btn-primary { background: var(--color-red); color: #fff; box-shadow: 3px 3px 0 rgba(0,0,0,0.55); }
.cta-band .btn-primary:hover { background: var(--color-red-dark); box-shadow: 5px 5px 0 rgba(0,0,0,0.55); }

/* ---------- Form ---------- */
.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; font-size: 0.9375rem; }
.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;
	padding: var(--space-2);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	transition: border-color var(--duration-fast) var(--ease-standard);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color: var(--color-red-action); }
.form-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 4px; }
.form-consent { display: flex; gap: var(--space-1); align-items: flex-start; font-size: 0.875rem; color: var(--color-text-muted); }
.form-consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
/* Il collegamento all'informativa, subito sotto la casella (14 settembre 2026),
   rientrato quanto il testo del consenso. Il selettore composto serve a
   vincere su `.card p { margin: 0 }`, che altrimenti lo azzera. */
.modulo .form-privacy { margin: var(--space-1) 0 0 calc(20px + var(--space-1)); font-size: 0.8125rem; color: var(--color-text-muted); }
.modulo .form-privacy a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.modulo .form-privacy a:hover { color: var(--color-red-action); }

/* I moduli nativi del tema (12 agosto 2026): Contact Form 7 non serve
   piu', le sue regole di compatibilita' sono state tolte. */

/* Il campo trappola per i robot: fuori dallo schermo, mai display:none
   (i robot piu' furbi lo saltano se e' dichiaratamente nascosto). */
.solo-per-robot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* L'esito dell'invio, sopra il modulo. */
.form-esito {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-weight: 600;
	margin: 0 0 var(--space-3);
}
.form-esito-ok { background: #E8F4EA; color: #1E6B34; border: 1px solid #BBDEC4; }
.form-esito-ko { background: #FDECEC; color: var(--color-red-dark, #A01018); border: 1px solid #F2C4C7; }

/* La mappa a consenso (pagina contatti, GDPR). */
.mappa-consenso {
	margin-top: var(--space-4);
	padding: var(--space-4);
	border: 1px dashed var(--color-border-strong, var(--color-border));
	border-radius: var(--radius-md);
	background: var(--color-surface);
	text-align: center;
}
.mappa-consenso p {
	margin: 0 0 var(--space-3);
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}
.mappa-consenso.mappa-aperta {
	padding: 0;
	border-style: solid;
	overflow: hidden;
}
.mappa-esterna {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.875rem;
	color: var(--color-red-action);
}

/* Il campo file: lo stile base dei campi piu' il bottone del browser. */
.form-field input[type="file"] { padding: calc(var(--space-2) - 4px) var(--space-2); }
.form-field input[type="file"]::file-selector-button {
	margin-right: var(--space-2);
	padding: 6px 14px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-ink);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Footer ----------
   Fondo bianco: il logo resta nei suoi colori originali, senza alcuna
   alterazione del marchio. */
.site-footer { background: #FFFFFF; color: var(--color-text-muted); border-top: 3px solid var(--color-red); }
/* Solo il padding verticale: la scorciatoia azzerava quello laterale di
   .container e su telefono il footer toccava i bordi (10 ottobre 2026). */
.footer-top { padding-top: var(--space-6); padding-bottom: var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 {
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}
.footer-grid a { color: var(--color-text-muted); display: block; padding: 6px 0; }
.footer-grid a:hover { color: var(--color-red-action); }
/* Selettore a doppia classe per avere la meglio su `.footer-grid a { display:block }`. */
.footer-grid .footer-logo {
	display: inline-block;
	margin-bottom: var(--space-3);
}
.footer-logo img { height: 56px; }
/* Blocco sedi nel footer: etichetta piccola sopra, indirizzo sotto. */
.footer-sedi { margin-top: var(--space-3); }
.footer-sedi p {
	margin: 0 0 var(--space-2);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}
.footer-sedi p:last-child { margin-bottom: 0; }
.footer-sedi .etichetta {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
	margin-bottom: 2px;
}

.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.footer-social a {
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink);
	transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.footer-social a:hover { border-color: var(--color-red); color: var(--color-red-action); }
.footer-bottom {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: 0.8125rem;
	font-family: var(--font-mono);
	color: var(--color-text-muted);
}

/* ---------- Reveal ----------
   Spostamento contenuto (16px): deve leggersi come una dissolvenza, non come
   un elemento che scivola dentro. Il ritardo lo assegna il JS agli elementi
   fratelli, cosi' una griglia entra a cascata invece che in blocco.
   Lo stato nascosto vale solo dietro la classe `.js`, aggiunta dall'head:
   senza JavaScript il contenuto resta visibile invece di sparire. */
.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--duration-slow) var(--ease-out-quart),
		transform var(--duration-slow) var(--ease-out-quart);
	transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.max-w-prose { max-width: 720px; }

.section-header { max-width: 720px; margin: 0 0 var(--space-6); }
.section-header.text-center { margin-left: auto; margin-right: auto; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-red-action);
	color: #fff;
	padding: var(--space-1) var(--space-2);
	z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* =========================================================
   PAGINA CERTIFICAZIONI
   ========================================================= */

.cert-hero { position: relative; overflow: hidden; }
/* Nessun padding in basso: sotto la targa dati basta quello della sezione,
   altrimenti resta una fascia nera vuota alta un centinaio di pixel. */
.cert-hero-inner { position: relative; z-index: 1; padding-top: var(--space-4); padding-bottom: 0; }
.cert-hero .lead { max-width: 60ch; }

/* ---------- Targa della qualificazione SOA ----------
   Un solo tipo di dato, non quattro di natura diversa: categoria, classifica,
   importo massimo. Impaginata come la riga di un'attestazione, non come un
   cruscotto. Nessun effetto al passaggio: non e' cliccabile. */
.qualifica {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.qualifica-et {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-red-light);
	margin-bottom: var(--space-3);
}
.qualifica-riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.qualifica-riga:first-child { padding-top: 0; }
.qualifica-riga dt,
.qualifica-riga dd {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0;
	min-width: 0;
}
.qualifica-riga dd { justify-content: flex-end; }

.qualifica-cat {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}
.qualifica-desc { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.6); }
/* Larghezza minima sulle due voci di destra: senza, ogni riga si dispone per
   conto suo e classifiche e importi risultano scalati fra loro. */
.qualifica-classe {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	white-space: nowrap;
	min-width: 9.5rem;
	text-align: right;
}
/* L'importo e' il dato che si cerca: unico elemento a peso pieno a destra.
   Cifre proporzionali, non tabellari: sono due valori, non una colonna. */
.qualifica-tetto {
	font-family: var(--font-body);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
	font-variant-numeric: proportional-nums;
	white-space: nowrap;
	min-width: 10.5rem;
	text-align: right;
}

@media (max-width: 720px) {
	.qualifica-riga { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
	.qualifica-riga dt { flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
	.qualifica-riga dd { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
	/* In colonna le larghezze minime creerebbero uno scalino a sinistra. */
	.qualifica-classe,
	.qualifica-tetto { min-width: 0; text-align: left; }
}

/* ---------- Indice delle credenziali ----------
   Righe a tutta larghezza, non schede: e' l'impaginazione di un indice
   editoriale. Al passaggio la riga si riempie di nero da sinistra. */
/* Il reset generale copre solo ul: senza questo il browser stampa la propria
   numerazione accanto a quella composta in monospazio. */
.cred-indice {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}
.cred-indice li { border-bottom: 1px solid var(--color-border); }

.cred-riga {
	position: relative;
	display: grid;
	/* La quarta colonna e' la piastra col marchio dell'organismo. */
	grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 1.1fr) 104px auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-2);
	color: var(--color-text);
	transition: color var(--duration-standard) var(--ease-standard);
}
/* Il riempimento sborda di 16px ai lati cosi' tocca i bordi della colonna
   di testo invece di fermarsi al padding. */
.cred-riga::before {
	content: '';
	position: absolute;
	left: calc(var(--space-2) * -1);
	right: calc(var(--space-2) * -1);
	top: 0;
	bottom: 0;
	background: var(--color-ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 550ms var(--ease-out-quart);
	z-index: 0;
}
.cred-riga > * { position: relative; z-index: 1; }
@media (hover: hover) {
	.cred-riga:hover::before { transform: scaleX(1); }
}
.cred-riga:focus-visible::before { transform: scaleX(1); }
.cred-riga:focus-visible { outline: 3px solid var(--color-red); outline-offset: 2px; }

.cred-num {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-red-action);
}

.cred-titolo {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 2vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--color-ink);
	transition: color var(--duration-standard) var(--ease-standard);
}
.cred-sotto {
	display: block;
	margin-top: 4px;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	transition: color var(--duration-standard) var(--ease-standard);
}

.cred-dati { display: grid; gap: var(--space-2); }
.cred-dato {
	display: block;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--color-text);
	transition: color var(--duration-standard) var(--ease-standard);
}
.cred-dato em {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 2px;
	transition: color var(--duration-standard) var(--ease-standard);
}

.cred-azione {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	white-space: nowrap;
	color: var(--color-text-muted);
	transition: color var(--duration-standard) var(--ease-standard);
}
.cred-peso { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; }

/* La piastra col marchio ufficiale dell'organismo: fondo bianco fisso,
   cosi' il marchio resta sull'originale anche quando la riga si inverte
   in hover (la regola dei loghi vale anche per quelli degli enti). */
.cred-marchio {
	width: 104px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.cred-marchio:empty { visibility: hidden; }
.cred-marchio img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.cred-azione svg { transition: transform var(--duration-standard) var(--ease-standard); }

/* Stato invertito: ogni colore dichiarato, niente ereditarieta'. */
@media (hover: hover) {
	.cred-riga:hover .cred-titolo,
	.cred-riga:hover .cred-dato,
	.cred-riga:hover .cred-azione { color: #fff; }
}
.cred-riga:focus-visible .cred-titolo,
.cred-riga:focus-visible .cred-dato,
.cred-riga:focus-visible .cred-azione { color: #fff; }
@media (hover: hover) {
	.cred-riga:hover .cred-sotto,
	.cred-riga:hover .cred-dato em { color: rgba(255, 255, 255, 0.6); }
}
.cred-riga:focus-visible .cred-sotto,
.cred-riga:focus-visible .cred-dato em { color: rgba(255, 255, 255, 0.6); }
@media (hover: hover) {
	.cred-riga:hover .cred-num { color: var(--color-red); }
}
.cred-riga:focus-visible .cred-num { color: var(--color-red); }
@media (hover: hover) {
	.cred-riga:hover .cred-azione svg { transform: translateX(5px); }
}

@media (max-width: 900px) {
	.cred-riga {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: var(--space-1) var(--space-2);
		padding: var(--space-3) var(--space-2);
	}
	.cred-corpo { grid-column: 2; }
	.cred-dati { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2); }
	.cred-marchio { grid-column: 2; margin-top: var(--space-2); }
	.cred-marchio:empty { display: none; }
	.cred-azione { grid-column: 2; margin-top: var(--space-2); }
}
@media (max-width: 520px) {
	.cred-dati { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fascia «un solo sistema» ----------
   Le tre norme sono gia' scaricabili qui sopra: ripeterle in tre schede con
   l'elenco degli impegni era la stessa informazione detta due volte. Qui
   restano tre parole a corpo grande e una riga a testa. */
.sistema { position: relative; overflow: hidden; }
.sistema-inner { position: relative; z-index: 1; }

/* La frase e' spenta tranne il nucleo: e' l'accento a portare il senso,
   non un secondo colore. */
/* Doppia classe: .section-dark h2 imporrebbe altrimenti il bianco pieno. */
.sistema .sistema-claim {
	margin: var(--space-3) 0 clamp(40px, 6vw, 88px);
	max-width: 24ch;
	font-family: var(--font-heading);
	font-size: clamp(1.875rem, 4.2vw, 3.375rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.06;
	color: rgba(255, 255, 255, 0.38);
	text-wrap: balance;
}
.sistema .sistema-claim em { font-style: normal; color: #fff; }

.sistema-righe { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sistema-riga {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr);
	align-items: baseline;
	gap: var(--space-4);
	padding: clamp(26px, 3.4vw, 48px) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.sistema-indice {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-red-light);
}
.sistema-parola {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2.125rem, 5.2vw, 4.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.95;
	color: #fff;
}
.sistema-detta {
	margin: 0;
	max-width: 38ch;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 860px) {
	.sistema-riga { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-2); }
	.sistema-detta { grid-column: 2; margin-top: var(--space-2); }
}

/* ---------- Manifesto Stop Work ----------
   Composto in grande e appoggiato a un filo rosso: e' una dichiarazione,
   non una scheda informativa. */
.manifesto {
	margin: 0;
	max-width: 48rem;
	padding-left: clamp(20px, 4vw, 56px);
	border-left: 2px solid var(--color-red);
}
.manifesto blockquote {
	margin: var(--space-3) 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: clamp(1.625rem, 3.6vw, 2.875rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--color-ink);
	text-wrap: balance;
}
.manifesto p { margin: 0; max-width: var(--measure); color: var(--color-text-muted); }
.manifesto figcaption {
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ---------- Elenco iscrizioni ---------- */
.cred-elenco { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.cred-elenco > div {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
}
.cred-elenco dt {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-ink);
	letter-spacing: -0.01em;
}
.cred-elenco dd { margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.cred-codice {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	color: var(--color-ink);
	font-weight: 600;
}
@media (max-width: 700px) {
	.cred-elenco > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ---------- Rimando a una sottopagina ----------
   Riga a tutta larghezza: la freccia si sposta e il fondo si scurisce.
   Stessa grammatica dell'indice delle credenziali. */
.rimando {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: clamp(28px, 4vw, 48px);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 8px solid var(--color-red);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	transition: background-color var(--duration-standard) var(--ease-standard),
		color var(--duration-standard) var(--ease-standard),
		box-shadow var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.rimando:hover { background: var(--color-ink); box-shadow: var(--shadow-lg); }
}
.rimando:focus-visible { background: var(--color-ink); box-shadow: var(--shadow-lg); }
.rimando-testo { display: block; }
.rimando .h2 {
	display: block;
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	color: var(--color-ink);
	margin: 0 0 var(--space-2);
	transition: color var(--duration-standard) var(--ease-standard);
}
.rimando-nota {
	display: block;
	max-width: 56ch;
	color: var(--color-text-muted);
	line-height: 1.6;
	transition: color var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.rimando:hover .h2 { color: #fff; }
}
.rimando:focus-visible .h2 { color: #fff; }
@media (hover: hover) {
	.rimando:hover .rimando-nota { color: rgba(255, 255, 255, 0.7); }
}
.rimando:focus-visible .rimando-nota { color: rgba(255, 255, 255, 0.7); }
@media (hover: hover) {
	.rimando:hover .eyebrow { color: var(--color-red-light); }
}
.rimando:focus-visible .eyebrow { color: var(--color-red-light); }
.rimando-freccia {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1.5px solid var(--color-border);
	color: var(--color-ink);
	transition: transform var(--duration-standard) var(--ease-standard),
		border-color var(--duration-standard) var(--ease-standard),
		background-color var(--duration-standard) var(--ease-standard),
		color var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.rimando:hover .rimando-freccia {
		transform: translateX(6px);
		background: var(--color-red);
		border-color: var(--color-red);
		color: #fff;
	}
}
.rimando:focus-visible .rimando-freccia {
	transform: translateX(6px);
	background: var(--color-red);
	border-color: var(--color-red);
	color: #fff;
}
@media (max-width: 700px) {
	.rimando { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
	.rimando-freccia { width: 52px; height: 52px; }
}

/* ---------- Sottomenu della navigazione ----------
   Serve alla sottopagina "Certificazioni" sotto "Chi siamo". Si apre su hover
   e anche su focus da tastiera (:focus-within), altrimenti chi naviga con Tab
   non lo raggiungerebbe mai. */
.nav-menu li { position: relative; }
.nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: calc(var(--space-2) * -1);
	min-width: 280px;
	padding: var(--space-1) 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-red);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--duration-standard) var(--ease-standard),
		transform var(--duration-standard) var(--ease-standard),
		visibility var(--duration-standard);
	z-index: 60;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-menu .sub-menu a {
	display: block;
	padding: var(--space-2);
	font-size: 0.875rem;
	line-height: 1.35;
	white-space: normal;
}
.nav-menu .sub-menu a::after { display: none; }
.nav-menu .sub-menu a:hover { background: var(--color-muted); color: var(--color-red-action); }

/* Segno che indica la presenza di un sottomenu. */
.nav-menu .menu-item-has-children > a { padding-right: 14px; }
.nav-menu .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.5;
}

@media (max-width: 1079px) {
	/* Su mobile niente tendina: il sottomenu resta in colonna, rientrato.
	   'inherit' e non 'visible': il pannello chiuso e' visibility:hidden e
	   la visibilita' si eredita. Con 'visible' i link del sottomenu
	   restavano nell'ordine di tabulazione anche a menu chiuso — invisibili
	   (il pannello ha opacity 0) ma raggiungibili con Tab. */
	.nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: inherit;
		/* Su mobile la tendina non si anima: senza questo azzeramento la
		   transizione su visibility (ereditata dalla regola desktop) tiene
		   il sottomenu nascosto per tutta la durata dopo l'apertura. */
		transition: none;
		transform: none;
		min-width: 0;
		padding: 0 0 var(--space-2) var(--space-3);
		border: none;
		box-shadow: none;
		background: transparent;
	}
	.nav-menu .sub-menu li { border-bottom: none; }
	.nav-menu .sub-menu a { padding: var(--space-2) var(--space-1); color: var(--color-text-muted); }
	.nav-menu .menu-item-has-children > a::before { display: none; }
}


/* =========================================================
   HOME — impianto rifatto (riferimento: CONSTRUX)
   Sette fasce alternate chiaro/scuro:
   palco -> apertura -> cantiere -> numeri -> ambiti -> lavori -> chiamata.
   Tutto quello che segue vale solo in home, tranne .sr-solo.
   ========================================================= */

.sr-solo {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Testata in home ----------
   La testata trasparente sospesa sull'hero e' stata tolta su richiesta di
   Carmine (11 agosto 2026): anche in home la barra e' bianca e in flusso,
   identica alle pagine interne. Il logo resta sull'originale, su fondo
   bianco suo. */

/* =============== 1. PALCO =============== */
/* La testata bianca ora sta in flusso sopra l'hero: l'hero riempie il
   resto della finestra, non tutta. La griglia a 12 colonne e' stata tolta
   (11 agosto 2026): fondo nero pieno, la scena la fa il video. */
.palco {
	position: relative;
	isolation: isolate;
	min-height: calc(100vh - var(--header-h, 84px));
	min-height: calc(100svh - var(--header-h, 84px));
	display: flex;
	flex-direction: column;
	background: #0A0A0C;
	color: #fff;
	overflow: hidden;
	padding: var(--space-5) var(--gutter);
}
/* La scena animata di cantiere, a copertura piena dietro la parola. */
.palco-scena {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	pointer-events: none;
}
/* Un velo leggero: scurisce appena la base, dove il ritaglio incontra
   l'invito, e tiene morbido l'attacco con la fascia chiara che segue. */
.palco-velo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Un velo uniforme leggero + la base piu' scura: il video resta vivo
	   ma la parola bianca regge ovunque. */
	background: linear-gradient(to bottom,
		rgba(10, 10, 12, 0.30) 0%,
		rgba(10, 10, 12, 0.22) 45%,
		rgba(10, 10, 12, 0.40) 80%,
		rgba(10, 10, 12, 0.82) 100%);
}
.palco-corpo {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	/* Prova del 12 agosto 2026: la parola sta in CIMA all'hero, subito
	   sotto la testata, non piu' al centro. Il respiro sopra e' misurato
	   perche' la testata bianca e' appena sopra. */
	align-items: flex-start;
	justify-content: center;
	min-height: 0;
	padding-top: clamp(20px, 5vh, 56px);
}
.palco-parola {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	/* Una riga sola in cima (posizione dallo schizzo di Carmine), ma con
	   corpo e peso originali del titolone: la prova in piccolo e' stata
	   scartata ("per le dimensioni e per il font mantieni le tue originali",
	   12 agosto 2026). */
	font-size: clamp(1.625rem, 6.1vw, 6.25rem);
	line-height: 0.92;
	letter-spacing: -0.05em;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
}
.palco-basso { z-index: 2; }

.palco-basso {
	position: relative;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
}
.palco-invito {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
	width: min(100%, calc(var(--container-max) / 3));
	padding: var(--space-3);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	        backdrop-filter: blur(16px) saturate(150%);
}
.palco-invito p {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: #fff;
}
.palco-dal {
	margin: 0 0 var(--space-1);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	text-align: right;
}
@media (max-width: 820px) {
	.palco-basso { flex-direction: column; align-items: stretch; }
	.palco-invito { width: 100%; }
	.palco-dal { text-align: left; }
	.palco-parola { letter-spacing: -0.045em; }
}

/* =============== 2. APERTURA =============== */
.apertura { background: var(--color-background); padding: var(--space-section) 0; }
.apertura-griglia {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: var(--space-6);
	align-items: start;
}
.apertura-frase {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(2rem, 4.3vw, 3.5rem);
	line-height: 1.02;
	letter-spacing: -0.032em;
	color: var(--color-ink);
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}
.apertura-frase em { font-style: normal; color: var(--color-red-action); }
.apertura-fianco p {
	margin: 0 0 var(--space-4);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-text-muted);
}
.apertura-foto { margin: 0; overflow: hidden; border-radius: var(--radius-md); }
.apertura-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) {
	.apertura-griglia { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* =============== 3. TRAGUARDI & NUMERI ===============
   Le tessere colorate sono state bocciate da Carmine (11 agosto 2026):
   il formato e' una fascia scura editoriale. Ogni voce ha un filetto
   sottile in testa con un segno rosso corto sopra la cifra; il "+" e'
   rosso perche' sta in uno span suo, fuori dal contatore. Il filetto e'
   per voce (non per riga), cosi' regge qualunque numero di colonne. */
.traguardi { background: var(--color-ink, #121215); color: #fff; padding: var(--space-section) 0; }
.traguardi .section-header .eyebrow { color: var(--color-red-light); }
.traguardi .section-header .h2 { color: #fff; }
.traguardi-griglia {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-4) var(--space-4);
}
.traguardo {
	position: relative;
	display: grid;
	gap: var(--space-1);
	align-content: start;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: var(--space-3);
}
.traguardo::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--color-red);
}
.traguardo-cifra {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(2.25rem, 3.8vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	/* JetBrains Mono per le cifre farebbe a pugni con la parola dell'hero:
	   stessa famiglia dei titoli, i numeri tabulari evitano il tremolio
	   in larghezza mentre il contatore sale. */
	font-variant-numeric: tabular-nums;
}
.traguardo-piu { color: var(--color-red-light); }
.traguardo-voce {
	font-size: 0.8125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.4;
}
@media (max-width: 1024px) { .traguardi-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .traguardi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =============== (vecchia fascia numeri, ora inutilizzata) =============== */
.numeri {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-5) 0;
}
.numeri-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.numero { border-left: 3px solid var(--color-red); padding-left: var(--space-3); }
.numero-cifra {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(1.875rem, 3.2vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-ink);
}
.numero-cifra em { font-style: normal; color: var(--color-text-muted); }
.numero-voce {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--color-text-muted);
}
@media (max-width: 1024px) { .numeri-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
@media (max-width: 520px) { .numeri-griglia { grid-template-columns: minmax(0, 1fr); } }

/* =============== 5. AMBITI =============== */
.ambiti { background: var(--color-background); padding: var(--space-section) 0; }
.ambiti-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ambito {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--duration-standard) var(--ease-standard),
	            box-shadow var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.ambito:hover { border-color: var(--color-red); box-shadow: var(--shadow-md); }
}
.ambito-segno { width: 132px; height: auto; color: var(--color-red); margin-bottom: var(--space-2); }
.ambito h3 { margin: 0; }
.ambito p { margin: 0; color: var(--color-text-muted); }
.ambito-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: auto;
	padding-top: var(--space-3);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
}
.ambito-link svg { transition: transform var(--duration-standard) var(--ease-standard); }
.ambito-link:hover svg { transform: translateX(4px); }
@media (max-width: 760px) { .ambiti-griglia { grid-template-columns: minmax(0, 1fr); } }

/* --- Il filmato unico della fascia, a tutta larghezza sopra le schede --- */
.ambiti-scena {
	position: relative;
	margin-bottom: var(--space-3);
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-ink);
}
.ambiti-scena video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 760px) {
	.ambiti-scena { aspect-ratio: 16 / 10; }
}
/* =============== 5. VERSO IL PORTFOLIO ===============
   Un'unica grande superficie cliccabile: testo a sinistra, il diorama 3D a
   destra. L'illustrazione e' dichiaratamente un'illustrazione — le foto vere
   stanno nella pagina che questa fascia apre. */
.verso-portfolio { background: #0A0A0C; }
.verso-portfolio-corpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-4);
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
	color: rgba(255, 255, 255, 0.86);
}
.verso-portfolio-dire .eyebrow { color: var(--color-red-light); }
.verso-portfolio-dire h2 { color: #fff; }
.verso-portfolio-dire { display: grid; justify-items: center; }
.verso-portfolio-dire p {
	max-width: 52ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.7;
}
.verso-portfolio-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--color-red);
}
.verso-portfolio-cta svg { transition: transform var(--duration-standard) var(--ease-standard); }
@media (hover: hover) {
	.verso-portfolio-corpo:hover .verso-portfolio-cta svg { transform: translateX(5px); }
}
.verso-portfolio-figura { display: flex; justify-content: center; }
/* Il diorama e' un video quadrato su fondo scuro: il fondo non e' identico
   al nero della fascia, quindi lo si presenta come una mattonella con gli
   angoli tondi — una scelta, non una cucitura. */
.verso-portfolio-figura video {
	width: min(100%, 520px);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
	transition: transform 700ms var(--ease-out-quart);
}
@media (hover: hover) {
	.verso-portfolio-corpo:hover .verso-portfolio-figura video { transform: translateY(-8px); }
}
@media (max-width: 860px) {
	.verso-portfolio-figura video { width: min(100%, 380px); }
}

/* =============== 7. CHIAMATA =============== */
.chiamata { background: var(--color-background); padding: var(--space-section) 0; }
/* Ambiti e chiamata sono due fasce color cemento di fila: sommare i due
   respiri verticali aprirebbe un vuoto che sembra un errore di montaggio. */
.ambiti + .chiamata { padding-top: 0; }
.chiamata-corpo {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	text-align: center;
	max-width: 720px;
}
.chiamata-corpo h2 {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	letter-spacing: -0.03em;
}
.chiamata-corpo p { margin: 0; color: var(--color-text-muted); font-size: 1.0625rem; }


/* =========================================================
   PORTFOLIO — il modello dei portfolio delle grandi imprese
   (HITT, McCarthy, Skyline): fondo chiaro, griglia di card
   uniformi a due colonne, fotografia protagonista, etichetta
   di categoria rossa e titolo sotto la foto, zoom leggero in
   hover. Ogni card ancora alla "pellicola" del cantiere piu'
   in basso. Le versioni precedenti (fasce con racconto,
   galleria scura) sono state scartate da Carmine (12 ago).
   ========================================================= */
.lavori-griglia {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
}
.lavoro-scheda { display: block; }
.lavoro-figura {
	position: relative;
	margin: 0 0 var(--space-2);
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
/* L'invito compare in hover sull'angolo della fotografia: dice che la
   card e' viva e dove porta. Su touch semplicemente non si vede. */
.lavoro-invito {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	background: rgba(10, 10, 12, 0.78);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--radius-sm);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--duration-standard) var(--ease-standard),
	            transform var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.lavoro-scheda:hover .lavoro-invito { opacity: 1; transform: none; }
}
.lavoro-scheda:focus-visible .lavoro-invito { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.lavoro-invito { transform: none; }
}
.lavoro-figura img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 700ms var(--ease-out-quart);
}
@media (hover: hover) {
	.lavoro-scheda:hover .lavoro-figura img { transform: scale(1.05); }
}
.lavoro-scheda:focus-visible .lavoro-figura img { transform: scale(1.05); }
.lavoro-categoria {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-red-action);
	margin-bottom: 6px;
}
.lavoro-nome {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.1875rem;
	color: var(--color-ink);
	letter-spacing: -0.01em;
	transition: color var(--duration-standard) var(--ease-standard);
}
@media (hover: hover) {
	.lavoro-scheda:hover .lavoro-nome { color: var(--color-red-action); }
}
@media (max-width: 760px) {
	.lavori-griglia { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* Le pellicole dei cantieri, raggiunte dalle card della griglia. */
.cantieri-pellicole { background: var(--color-surface); }
.cantiere {
	/* L'ancora deve fermarsi sotto la testata fissa, non dietro. */
	scroll-margin-top: calc(var(--header-h, 84px) + var(--space-3));
	padding-top: var(--space-4);
}
.cantiere:first-of-type { padding-top: 0; }
.cantiere-titolo {
	margin: 0 0 var(--space-2);
	font-weight: 600;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Deterrente al salvataggio delle foto dei cantieri: niente trascinamento
   e niente selezione. Insieme al blocco del tasto destro in alca-3.js.
   Non e' una protezione assoluta: uno screenshot resta sempre possibile. */
.lavoro-figura img,
.pellicola-foto img,
.lightbox-foto {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* =========================================================
   PAGINA SERVIZI — fasce con fotografia vera dai cantieri
   del portfolio, e il percorso in quattro passi (12 ago 2026)
   ========================================================= */
.servizio {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-5);
	align-items: center;
	padding: var(--space-5) 0;
	border-top: 1px solid var(--color-border);
	/* Le ancore dal footer (#costruzione, ...) si fermano sotto la testata. */
	scroll-margin-top: calc(var(--header-h, 84px) + var(--space-2));
}
.servizio:first-child { border-top: 0; padding-top: 0; }
.servizio-inverso .servizio-foto { order: 2; }
.servizio-foto {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}
.servizio-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 900ms var(--ease-out-quart);
}
@media (hover: hover) {
	.servizio:hover .servizio-foto img { transform: scale(1.04); }
}
.servizio-numero {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--color-red-action);
	margin-bottom: var(--space-1);
}
.servizio-nome { margin: 0 0 var(--space-2); font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.servizio-testo { margin: 0 0 var(--space-3); color: var(--color-text-muted); line-height: 1.7; }
.servizio-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-red-action);
	padding-bottom: 4px;
	border-bottom: 2px solid var(--color-red);
}
.servizio-link svg { transition: transform var(--duration-standard) var(--ease-standard); }
.servizio-link:hover svg { transform: translateX(4px); }
@media (max-width: 860px) {
	.servizio { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
	.servizio-inverso .servizio-foto { order: 0; }
}

/* Il percorso: fascia scura editoriale, stessa grammatica dei traguardi
   della home — filetto in testa, segno rosso corto, numerazione mono. */
.percorso { background: var(--color-ink, #121215); color: #fff; padding: var(--space-section) 0; }
.percorso .section-header .eyebrow { color: var(--color-red-light); }
.percorso .section-header .h2 { color: #fff; }
.percorso-griglia {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4);
}
.passo {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: var(--space-3);
}
.passo::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--color-red);
}
.passo-numero {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--color-red-light);
	margin-bottom: var(--space-1);
}
.passo-nome { margin: 0 0 var(--space-1); font-size: 1.125rem; color: #fff; }
.passo-testo { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
@media (max-width: 1024px) { .percorso-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .percorso-griglia { grid-template-columns: minmax(0, 1fr); } }

/* La riga in maiuscoletto nella testata del portfolio. */
.portfolio-cifre {
	margin: var(--space-3) 0 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* Il lightbox delle pellicole: markup creato da alca.js alla prima
   apertura. Senza JavaScript le foto si aprono in una scheda nuova. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3);
	background: rgba(10, 10, 12, 0.93);
}
.lightbox.is-aperto { display: flex; }
.lightbox-foto {
	max-width: min(92vw, 1400px);
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox button {
	appearance: none;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 2rem;
	line-height: 1;
	padding: var(--space-2);
	cursor: pointer;
	transition: color var(--duration-standard) var(--ease-standard);
}
.lightbox button:hover,
.lightbox button:focus-visible { color: var(--color-red-light); }
.lightbox-chiudi {
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 2.25rem;
}
.lightbox-freccia {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.lightbox-prima { left: 6px; }
.lightbox-dopo { right: 6px; }
/* La didascalia: nome del cantiere e numero della foto, la stessa
   descrizione della miniatura. Si aggiorna con le frecce. */
.lightbox-didascalia {
	margin: 0;
	max-width: min(92vw, 1400px);
	padding: 0 56px;
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: center;
	color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 640px) {
	.lightbox { padding: var(--space-2); }
	.lightbox-foto { max-width: 96vw; max-height: 74vh; }
	.lightbox-didascalia { padding: 0 40px; font-size: 0.8125rem; }
}

/* La pellicola: striscia orizzontale scorrevole ad altezza fissa, cosi'
   convivono verticali, orizzontali e panorami senza ritagli. Ogni foto
   apre l'originale in una scheda nuova: niente lightbox, niente librerie. */
.pellicola {
	display: flex;
	gap: var(--space-1);
	margin-top: var(--space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: var(--space-1);
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
/* La voce (role=listitem) e' il contenitore che scorre e si aggancia;
   il collegamento dentro resta un collegamento (14 settembre 2026). */
.pellicola-voce {
	flex: 0 0 auto;
	scroll-snap-align: start;
}
.pellicola-foto {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
}
.pellicola-foto img {
	display: block;
	height: 240px;
	width: auto;
	transition: transform 600ms var(--ease-out-quart), filter 600ms var(--ease-out-quart);
}
@media (hover: hover) {
	.pellicola-foto:hover img { transform: scale(1.05); filter: brightness(1.06); }
}
.pellicola-foto:focus-visible img { transform: scale(1.05); filter: brightness(1.06); }
@media (max-width: 640px) {
	.pellicola-foto img { height: 170px; }
}

/* =========================================================
   TELEFONO E TABLET (10 ottobre 2026, dopo l'audit del sito)
   ========================================================= */

/* Il pulsante del menu diventa una X quando il pannello e' aperto: prima
   restava un hamburger e non diceva come chiudere. */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	transition: transform var(--duration-standard) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] span { background-color: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Lightbox: lo swipe orizzontale lo gestisce lo script, il resto resta al
   browser (scorrimento verticale e zoom con due dita). */
.lightbox { touch-action: pan-y pinch-zoom; }
/* Su telefono il fondo e' pieno: al 93% si vedeva sotto la testata, con
   l'hamburger proprio dietro la X di chiusura. */
@media (max-width: 640px) {
	.lightbox { background: #0A0A0C; }
}

/* Bersagli al tocco: telefono ed email in Contattaci e il link alla privacy
   nel footer erano alti circa 20px. Il padding di un link in linea allarga
   l'area che si tocca senza spostare il testo; nel footer, dove il link e'
   un elemento flex, il margine negativo compensa. */
@media (pointer: coarse) {
	.site-main a[href^="tel:"],
	.site-main a[href^="mailto:"] { padding-top: 12px; padding-bottom: 12px; }
	.footer-bottom a { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
}

/* Etichette da 10 e 11px leggibili su telefono: 12px sotto i 600px. Sopra,
   le misure restano quelle del disegno. */
@media (max-width: 600px) {
	.doc-tipo,
	.qualifica-et,
	.cred-dato em,
	.cred-peso,
	.footer-sedi .etichetta,
	.lavoro-categoria,
	.palco-dal { font-size: 0.75rem; }
}