/*
Theme Name: Valerio Cassano
Theme URI: https://valeriocassano.com
Author: Valerio Cassano
Author URI: https://valeriocassano.com
Description: Tema a blocchi su misura per valeriocassano.com. Nessun page builder, nessun font esterno, nessuna richiesta verso domini terzi.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.2.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valeriocassano
Tags: block-theme, custom-colors, custom-menu, translation-ready
*/

/* ══════════════════════════════════════════════════════════════════
   I TOKEN — l'unico posto del tema dove compare un esadecimale.
   theme.json non contiene colori: contiene i nomi che puntano qui.
   Cambiare palette significa cambiare questo blocco e nient'altro.

   Provenienza, verificata: i grigi sono quelli del piede di
   valeriocassano.com (#23272A, #292E31). I due blu sono i due capi
   del gradiente della testata attuale, #045089 e #047389 — qui
   separati, perché il secondo ha un compito: significa «acceso».
   ══════════════════════════════════════════════════════════════════ */

:root {
	--vc-carta:        #FFFFFF;
	--vc-carta-alt:    #F4F6F7;
	--vc-inchiostro:   #2B2F33;
	--vc-inchiostro-2: #41474C;
	/* #6B747C dava 4,39 sulla carta alternata: sotto la soglia AA.
	   #626B73 dà 5,01 lì e 5,44 sul bianco. */
	--vc-tenue:        #626B73;
	--vc-filetto:      #E1E1E1;
	--vc-accento:      #045089;
	--vc-acceso:       #047389;

	/* Le bande scure. Restano scure anche nel tema chiaro:
	   sono struttura della pagina, non modalità. */
	--vc-notte:         #23272A;
	--vc-notte-2:       #292E31;
	--vc-su-notte:      #E9EBED;
	--vc-su-notte-2:    #C9CED3;
	--vc-su-notte-3:    #BBC2C7;
	--vc-su-notte-4:    #7C858B;
	--vc-filetto-notte: #383D41;
	/* Il tenue delle bande scure. Non è --vc-tenue: quello è pensato per
	   la carta bianca e su #292E31 darebbe 2,89. Questo dà 5,11. */
	--vc-tenue-notte:   #979FA5;
	/* Sul fondo scuro #045089 dà contrasto 1,9 e #047389 ne dà 2,7:
	   illeggibili tutti e due. Schiariti, danno 5,81 e 7,19. */
	--vc-accento-notte: #5AA8E0;
	--vc-acceso-notte:  #51C2D6;

	/* I pulsanti non seguono l'accento: sul chiaro è fondo blu e testo bianco
	   (8,35), sullo scuro il blu si schiarisce e allora il testo si scurisce.
	   Bianco su #5AA8E0 darebbe 2,59. */
	--vc-bottone-fondo:  #045089;
	--vc-bottone-testo:  #FFFFFF;
	--vc-bottone-hover:  #2B2F33;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--vc-carta:        #23272A;
		--vc-carta-alt:    #292E31;
		--vc-inchiostro:   #E9EBED;
		--vc-inchiostro-2: #C9CED3;
		--vc-tenue:        #8E979F;
		--vc-filetto:      #383D41;
		--vc-accento:      #5AA8E0;
		--vc-acceso:       #51C2D6;
		--vc-bottone-fondo: #5AA8E0;
		--vc-bottone-testo: #0E1216;
		--vc-bottone-hover: #FFFFFF;
	}
}

:root[data-theme="dark"] {
	--vc-carta:        #23272A;
	--vc-carta-alt:    #292E31;
	--vc-inchiostro:   #E9EBED;
	--vc-inchiostro-2: #C9CED3;
	--vc-tenue:        #8E979F;
	--vc-filetto:      #383D41;
	--vc-accento:      #5AA8E0;
	--vc-acceso:       #51C2D6;
	--vc-bottone-fondo: #5AA8E0;
	--vc-bottone-testo: #0E1216;
	--vc-bottone-hover: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════
   Fondamenta
   ══════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--vc-accento); color: #FFFFFF; }

h1, h2, h3 { text-wrap: balance; }

/* Il focus da tastiera si vede sempre, ovunque. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--vc-accento);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Salta al contenuto: primo elemento focalizzabile della pagina. */
.vc-salta {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--vc-bottone-fondo);
	color: var(--vc-bottone-testo);
	text-decoration: none;
	font-weight: 600;
}
.vc-salta:focus { left: 0; }

/* ══════════════════════════════════════════════════════════════════
   Il pallino acceso — l'unico elemento di marca del sito.
   Statico: nessuna animazione, nessuna pulsazione.
   ══════════════════════════════════════════════════════════════════ */

.vc-pallino {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vc-acceso-notte);
	flex: none;
	box-shadow: 0 0 0 3px rgba(81, 194, 214, .22), 0 0 10px 1px rgba(81, 194, 214, .55);
}

/* ══════════════════════════════════════════════════════════════════
   Le bande scure
   ══════════════════════════════════════════════════════════════════ */

.vc-notte {
	background: var(--vc-notte);
	color: var(--vc-su-notte);
}
.vc-notte :is(h1, h2, h3, h4) { color: #FFFFFF; }
.vc-notte p { color: var(--vc-su-notte-2); }
.vc-notte a { color: var(--vc-accento-notte); }
.vc-notte .vc-occhiello { color: var(--vc-accento-notte); }

/* ══════════════════════════════════════════════════════════════════
   Testata
   ══════════════════════════════════════════════════════════════════ */

.vc-testata {
	background: var(--vc-notte);
	color: var(--vc-su-notte);
	position: relative;
	z-index: 5;
}
.vc-testata .wp-block-group.vc-testata__interno {
	display: flex;
	align-items: center;
	gap: 30px;
	min-height: 86px;
}
.vc-marchio {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-right: auto;
	color: #FFFFFF;
	text-decoration: none;
}
.vc-marchio-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-marchio-nome {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1.03rem;
	font-weight: 600;
	letter-spacing: -.012em;
	line-height: 1.1;
}
.vc-marchio-terzina {
	font-size: .63rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--vc-accento-notte);
	line-height: 1.1;
	white-space: nowrap;
}
.vc-marchio:hover { text-decoration: none; }
.vc-menu ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.vc-menu a {
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--vc-su-notte-2);
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}
.vc-menu a:hover,
.vc-menu .current-menu-item > a {
	color: #FFFFFF;
	border-color: var(--vc-accento-notte);
	text-decoration: none;
}

/* Il secondo livello esiste solo nel pannello: sulla barra larga una
   tendina su otto voci renderebbe la testata più affaccendata che utile.
   Il selettore ripete .vc-menu perché «.vc-menu ul» qui sopra ha
   specificità maggiore della sola classe e vincerebbe. */
.vc-menu .vc-sottomenu { display: none; }

/* ── Il pulsante del pannello ──────────────────────────────────────
   Nasce con l'attributo «hidden» nel markup: senza JavaScript non
   compare mai, e il menu resta quello di sempre. Per questo la regola
   è :not([hidden]) e non un display secco, che scavalcherebbe hidden. */
.vc-menu-apri {
	display: none;
	align-items: center;
	gap: 10px;
	background: none;
	border: 1px solid var(--vc-filetto-notte);
	border-radius: 4px;
	padding: 9px 14px;
	color: var(--vc-su-notte-2);
	font: inherit;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
}
.vc-menu-apri:hover { color: #FFFFFF; border-color: var(--vc-accento-notte); }
.vc-menu-apri__barre,
.vc-menu-apri__barre::before,
.vc-menu-apri__barre::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.vc-menu-apri__barre { position: relative; }
.vc-menu-apri__barre::before { content: ''; position: absolute; top: -6px; }
.vc-menu-apri__barre::after  { content: ''; position: absolute; top: 6px; }
.vc-menu-apri[aria-expanded='true'] .vc-menu-apri__barre { background: transparent; }
.vc-menu-apri[aria-expanded='true'] .vc-menu-apri__barre::before { top: 0; transform: rotate(45deg); }
.vc-menu-apri[aria-expanded='true'] .vc-menu-apri__barre::after  { top: 0; transform: rotate(-45deg); }
/* Sulla barra larga il menu è visibile SEMPRE, anche se lo script lo ha
   lasciato con «hidden» richiudendolo da stretto. È la rete di sicurezza:
   se si scommettesse sull'evento di matchMedia, chi allarga la finestra
   resterebbe senza navigazione e senza pulsante per riaprirla. */
.vc-menu[hidden] { display: block; }
.vc-lingue {
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--vc-tenue-notte);
	border-left: 1px solid var(--vc-filetto-notte);
	padding-left: 24px;
	/* Con otto voci la barra si è allargata e «IT · EN» finiva a capo
	   su due righe: qui non deve spezzarsi mai. */
	white-space: nowrap;
	flex: none;
}
.vc-lingue a { color: var(--vc-tenue-notte); text-decoration: none; }
.vc-lingue a:hover { color: #FFFFFF; }
.vc-lingue [aria-current] { color: #FFFFFF; font-weight: 700; }

/* La soglia è la stessa dichiarata in assets/menu.js. Se cambia qui e non
   lì, il pulsante e il pannello finiscono in disaccordo. */
@media (max-width: 1080px) {
	.vc-testata .wp-block-group.vc-testata__interno { flex-wrap: wrap; padding-block: 16px; }

	/* :not([hidden]) e non un display secco: senza JavaScript l'attributo
	   resta, il pulsante non compare e il menu sotto è già tutto a vista. */
	.vc-menu-apri:not([hidden]) { display: inline-flex; }

	/* Solo qui «hidden» nasconde davvero: è la larghezza in cui il
	   pannello si apre e si chiude. */
	.vc-menu[hidden] { display: none; }

	/* Aperto, il pannello copre lo schermo invece di stare nel flusso.
	   Prima scorreva insieme alla pagina: il menu se ne andava verso
	   l'alto e sotto si vedeva il sito. La testata stessa diventa il
	   pannello — ha già lo sfondo giusto e contiene marchio, pulsante,
	   lingue e voci, cioè tutto quello che serve. */
	/* Su html e su body: a seconda del browser l'elemento che scorre è
	   l'uno o l'altro, e bloccarne uno solo lascia la pagina scorrere
	   sotto al pannello. */
	html.vc-menu-aperto,
	html.vc-menu-aperto body { overflow: hidden; }
	html.vc-menu-aperto .vc-testata {
		position: fixed;
		inset: 0;
		z-index: 90;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	html.vc-menu-aperto .vc-testata .wp-block-group.vc-testata__interno {
		align-items: flex-start;
		min-height: 0;
		padding-bottom: 40px;
	}

	/* Il pannello prende tutta la riga sotto marchio e pulsante. */
	.vc-menu { flex-basis: 100%; order: 10; }
	.vc-menu ul { flex-direction: column; gap: 0; align-items: stretch; }
	.vc-menu > ul { margin-top: 8px; border-top: 1px solid var(--vc-filetto-notte); }
	.vc-menu > ul > li { border-bottom: 1px solid var(--vc-filetto-notte); }
	.vc-menu > ul > li > a {
		display: block;
		font-size: .88rem;
		padding: 15px 2px;
		border-bottom: 0;
	}
	.vc-menu > ul > li > a:hover,
	.vc-menu > ul > li.current-menu-item > a { border-bottom: 0; }

	/* Nel pannello lo spazio verticale abbonda: il secondo livello
	   compare, e l'elenco diventa una mappa invece di un elenco. */
	.vc-menu .vc-sottomenu { display: block; padding: 0 0 12px 2px; }
	.vc-sottomenu li { border: 0; }
	.vc-sottomenu a {
		display: block;
		padding: 9px 0 9px 16px;
		font-size: .74rem;
		letter-spacing: .06em;
		text-transform: none;
		font-weight: 400;
		color: var(--vc-tenue-notte);
		border-left: 1px solid var(--vc-filetto-notte);
		border-bottom: 0;
	}
	.vc-sottomenu a:hover,
	.vc-sottomenu .current-menu-item > a { color: #FFFFFF; border-bottom: 0; }

	.vc-lingue { border-left: 0; padding-left: 0; margin-top: 4px; }
}

/* Sotto i 380px il pulsante perde la parola e resta il solo simbolo:
   a quella larghezza «MENU» spingerebbe il marchio a capo. */
@media (max-width: 380px) {
	.vc-menu-apri__testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.vc-menu-apri { padding: 11px; }
}

/* ══════════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════════ */

.vc-hero {
	background: var(--vc-notte);
	color: var(--vc-su-notte);
	position: relative;
	overflow: hidden;
	padding-block: 104px 0;
}
.vc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 90% at 12% 0%, rgba(90, 168, 224, .11), transparent 62%);
}
.vc-hero > * { position: relative; z-index: 2; }

.vc-occhiello {
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--vc-accento-notte);
	margin: 0 0 24px;
}
.vc-hero h1 { max-width: 15ch; color: #FFFFFF; margin: 0 0 24px; }
.vc-hero .vc-sommario {
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	line-height: 1.4;
	color: var(--vc-su-notte-2);
	max-width: 32ch;
	margin: 0 0 40px;
	font-weight: 400;
}
.vc-azioni { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 48px; }
.vc-hero .wp-block-button__link {
	background: var(--vc-accento-notte);
	color: #0E1216;
}
.vc-hero .wp-block-button__link:hover { background: #FFFFFF; color: #0E1216; }

.vc-collegamento {
	font-size: .97rem;
	color: var(--vc-accento);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	border-bottom-color: color-mix(in srgb, currentColor 40%, transparent);
	padding-bottom: 2px;
}
.vc-collegamento:hover { border-bottom-color: currentColor; text-decoration: none; }
.vc-hero .vc-collegamento,
.vc-notte .vc-collegamento { color: var(--vc-accento-notte); }

.vc-prova {
	font-size: 1rem;
	color: var(--vc-su-notte-2);
	max-width: 54ch;
	border-left: 2px solid var(--vc-accento-notte);
	padding-left: 20px;
	line-height: 1.5;
	margin: 0 0 64px;
}
.vc-prova strong { color: #FFFFFF; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   Barra dei numeri
   ══════════════════════════════════════════════════════════════════ */

.vc-numeri {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--vc-notte-2);
	color: var(--vc-su-notte);
	border-top: 1px solid var(--vc-filetto-notte);
	gap: 0;
}
.vc-numero {
	padding: 40px 32px;
	border-right: 1px solid #2A3036;
	margin: 0;
}
.vc-numero:last-child { border-right: 0; }
.vc-numero__valore {
	display: block;
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1;
	color: #FFFFFF;
}
.vc-numero__nome { font-size: .84rem; color: var(--vc-tenue-notte); line-height: 1.4; display: block; margin: 0; }

@media (max-width: 820px) {
	.vc-numeri { grid-template-columns: 1fr 1fr; }
	.vc-numero { border-bottom: 1px solid #2A3036; }
	.vc-numero:nth-child(2n) { border-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   Sezioni
   ══════════════════════════════════════════════════════════════════ */

.vc-sezione { padding-block: 112px; }

.vc-intestazione { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.vc-progressivo {
	font-family: var(--wp--preset--font-family--serif);
	font-size: .94rem;
	color: var(--vc-accento);
	font-weight: 600;
	letter-spacing: .04em;
	flex: none;
}
.vc-notte .vc-progressivo { color: var(--vc-accento-notte); }
.vc-intestazione h2 { margin: 0; max-width: 20ch; }

.vc-guida { color: var(--vc-inchiostro-2); max-width: 58ch; margin: 0 0 48px; }

/* I tre binari */
.vc-binari {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--vc-filetto);
	border: 1px solid var(--vc-filetto);
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 32px;
}
.vc-binario {
	background: var(--vc-carta);
	padding: 40px 32px 32px;
	display: flex;
	flex-direction: column;
}
.vc-binario:hover { background: var(--vc-carta-alt); }
.vc-binario :is(h2, h3) { margin: 0 0 14px; font-size: var(--wp--preset--font-size--medio); }
.vc-binario p { margin: 0 0 18px; color: var(--vc-inchiostro-2); font-size: .95rem; }
.vc-binario .vc-appiglio {
	font-size: .89rem;
	color: var(--vc-tenue);
	border-top: 1px solid var(--vc-filetto);
	padding-top: 16px;
	margin-top: auto;
	margin-bottom: 16px;
}
.vc-binario .vc-appiglio strong { color: var(--vc-inchiostro); font-weight: 600; }


@media (max-width: 960px) { .vc-binari { grid-template-columns: 1fr; } }

/* Il patto in chiusura di sezione */
.vc-patto {
	border-top: 2px solid var(--vc-inchiostro);
	padding-top: 24px;
	font-size: 1.1rem;
	color: var(--vc-inchiostro-2);
	max-width: 62ch;
}

/* I passaggi del metodo */
.vc-passaggi { counter-reset: passo; margin: 0 0 32px; padding: 0; }
.vc-passaggi > * { margin-block: 0; }
.vc-passaggio {
	counter-increment: passo;
	border-top: 1px solid var(--vc-filetto);
	padding: 32px 0 32px 78px;
	position: relative;
}
.vc-passaggio:last-child { border-bottom: 1px solid var(--vc-filetto); }
.vc-passaggio::before {
	content: "0" counter(passo);
	position: absolute;
	left: 0;
	top: 32px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.3rem;
	color: var(--vc-accento);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.vc-passaggio h3 { margin: 0 0 9px; }
.vc-passaggio p { margin: 0; color: var(--vc-inchiostro-2); max-width: 64ch; }
.vc-passaggio strong { color: var(--vc-inchiostro); font-weight: 600; }

@media (max-width: 600px) {
	.vc-passaggi > li { padding-left: 0; }
	.vc-passaggio::before { position: static; display: block; margin-bottom: 8px; }
}

/* Le tre cose che quasi nessuno sa fare */
.vc-capacita {
	padding-block: 40px;
	border-top: 1px solid var(--vc-filetto);
	display: grid;
	grid-template-columns: minmax(0, 13rem) 1fr;
	gap: 44px;
	margin: 0;
}
.vc-capacita:last-of-type { border-bottom: 1px solid var(--vc-filetto); }
.vc-capacita h3 { margin: 0; }
.vc-capacita p { margin: 0; color: var(--vc-inchiostro-2); max-width: 64ch; }
.vc-capacita strong { color: var(--vc-inchiostro); font-weight: 600; }

@media (max-width: 820px) { .vc-capacita { grid-template-columns: 1fr; gap: 14px; } }

/* Il blocco "pochi clienti, a lungo" */
.vc-ultima {
	color: #FFFFFF;
	font-weight: 600;
	font-size: 1.2rem;
	border-left: 2px solid var(--vc-accento-notte);
	padding-left: 20px;
	margin-top: 32px;
}

/* Chiusura */
.vc-chiusura h2 { max-width: 24ch; margin-bottom: 24px; }
.vc-chiusura .vc-guida { font-size: 1.1rem; max-width: 52ch; margin-bottom: 40px; }

/* ══════════════════════════════════════════════════════════════════
   Piede
   ══════════════════════════════════════════════════════════════════ */

.vc-piede {
	background: var(--vc-notte-2);
	color: var(--vc-tenue-notte);
	padding-block: 56px;
	font-size: .87rem;
}
.vc-piede a { color: var(--vc-su-notte); text-decoration: none; }
.vc-piede a:hover { color: #FFFFFF; text-decoration: underline; }
.vc-piede .vc-categoria {
	color: var(--vc-su-notte);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .75rem;
	margin-bottom: 10px;
	display: block;
}

/* ══════════════════════════════════════════════════════════════════
   Segnaposto — devono dare fastidio finché non sono sostituiti.
   ══════════════════════════════════════════════════════════════════ */

.vc-segnaposto,
:is(p, h1, h2, h3, li, td):has(> mark.vc-segnaposto) { }

mark.vc-segnaposto {
	background: repeating-linear-gradient(-45deg, #FFE9A8, #FFE9A8 8px, #FFD866 8px, #FFD866 16px);
	color: #4A3600;
	padding: 2px 8px;
	border-radius: 2px;
	font-weight: 600;
	font-size: .9em;
}

/* ══════════════════════════════════════════════════════════════════
   Movimento — se ne chiedono meno, se ne dà meno.
   ══════════════════════════════════════════════════════════════════ */

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

/* ══════════════════════════════════════════════════════════════════
   Aggiustamenti sui blocchi di WordPress
   ══════════════════════════════════════════════════════════════════ */

/* WordPress mette un margine fra blocchi fratelli. Dentro le griglie del
   tema non deve arrivarci: sposterebbe le celle e farebbe affiorare il
   fondo del contenitore fra una scheda e l'altra. */
.vc-binari.wp-block-group > *,
.vc-numeri.wp-block-group > *,
.vc-passaggi.wp-block-group > *,
.vc-azioni.wp-block-group > *,
.vc-intestazione.wp-block-group > * { margin-block: 0; }

.vc-binari.wp-block-group { gap: 1px; }
.vc-numeri.wp-block-group { gap: 0; }
.vc-binario.wp-block-group > * { margin-block: 0; }
.vc-binario.wp-block-group > .vc-appiglio { margin-top: auto; }
.vc-hero.wp-block-group > * { margin-block: 0; }
.vc-azioni .wp-block-buttons { margin: 0; }
.vc-capacita.wp-block-group { margin-block: 0; }

/* La larghezza della pagina è .wrap: 1140px con 40px di respiro. */
.vc-fascia > .wp-block-group__inner-container,
.vc-fascia { margin-inline: auto; }

/* Il volto nella testata. */
.vc-marchio img {
	width: 48px;
	height: 48px;
	display: block;
	border-radius: 50%;
	background: #FFFFFF;
	flex: none;
}

/* Il contenitore di pagina — l'equivalente di .wrap della bozza. */
.vc-fascia {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}
.vc-piede__interno {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* Le fasce della home sono a contatto: nessun respiro fra una banda e l'altra.
   Il contenuto della pagina passa dentro .wp-block-post-content, quindi la
   regola deve valere lì e non solo sui figli diretti di <main>. */
main.wp-block-group > .wp-block-group,
main.wp-block-group > section,
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > section { margin-block: 0; }
.wp-block-post-content { margin-block: 0; }

/* I collegamenti testuali portano un filetto sotto, non la sottolineatura. */
:root :where(a).vc-collegamento,
:root :where(a).vc-marchio,
.vc-menu :where(a),
.vc-lingue :where(a),
.vc-piede :where(a) { text-decoration: none; }
:root :where(a).vc-collegamento:hover { text-decoration: none; }
.vc-piede :where(a):hover { text-decoration: underline; }

/* Testata, contenuto e piede sono a contatto: il blockGap non passa fra loro. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ══════════════════════════════════════════════════════════════════
   Pagine di testo
   ══════════════════════════════════════════════════════════════════ */

.vc-testo h1 {
	max-width: 22ch;
	margin: 0 0 32px;
	font-size: var(--wp--preset--font-size--grande);
}
.vc-testo h2 {
	max-width: 24ch;
	margin: 56px 0 16px;
	font-size: var(--wp--preset--font-size--medio);
}
.vc-testo h3 { margin: 32px 0 8px; }
.vc-testo p { max-width: 64ch; margin: 0 0 20px; color: var(--vc-inchiostro-2); }
.vc-testo p strong,
.vc-testo li strong { color: var(--vc-inchiostro); font-weight: 600; }
.vc-testo .vc-guida {
	font-size: 1.14rem;
	color: var(--vc-inchiostro);
	max-width: 58ch;
	margin-bottom: 40px;
	border-left: 2px solid var(--vc-accento);
	padding-left: 20px;
}
.vc-testo ul { max-width: 64ch; color: var(--vc-inchiostro-2); padding-left: 1.2em; margin: 0 0 20px; }
.vc-testo li { margin-bottom: 8px; }
.vc-testo .vc-nota {
	font-size: .87rem;
	color: var(--vc-tenue);
	border-top: 1px solid var(--vc-filetto);
	padding-top: 16px;
	margin-top: 40px;
}
/* La chiusura di una pagina interna: un blocco, non un'altra sezione. */
.vc-chiusura {
	border-top: 1px solid var(--vc-filetto);
	margin-top: 88px;
	padding-top: 56px;
}
/* La chiusura come sezione tiene il respiro della sezione: azzerarlo
   la incollava alla banda scura sopra. */
section.vc-chiusura { margin-top: 0; padding-top: 112px; border-top: 0; }
.vc-testo .vc-chiusura h2 { margin-top: 0; max-width: 24ch; }

/* Griglia a due colonne per gli hub */
.vc-binari--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .vc-binari--2 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   La scheda di un caso
   ══════════════════════════════════════════════════════════════════ */

.vc-caso__dati {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	border-block: 1px solid var(--vc-filetto);
	padding-block: 20px;
	margin: 0 0 48px;
	list-style: none;
	padding-inline: 0;
	max-width: none;
}
.vc-caso__dati div { min-width: 0; }
.vc-caso__dati dt {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vc-tenue);
	font-weight: 700;
	margin-bottom: 5px;
}
.vc-caso__dati dd { margin: 0; font-weight: 600; color: var(--vc-inchiostro); }
.vc-caso__dati dd a { color: inherit; }

.vc-caso__coda {
	border-top: 1px solid var(--vc-filetto);
	margin-top: 56px;
	padding-top: 32px;
}
.vc-caso__coda h2 { margin-top: 0; }
.vc-stack { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 32px; }
.vc-stack li {
	font-size: .84rem;
	border: 1px solid var(--vc-filetto);
	border-radius: 3px;
	padding: 5px 11px;
	color: var(--vc-inchiostro-2);
	margin: 0;
}
.vc-acceso-spia {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .84rem;
	color: var(--vc-tenue);
}
.vc-acceso-spia::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vc-acceso);
	flex: none;
}

/* ══════════════════════════════════════════════════════════════════
   L'elenco dei casi
   ══════════════════════════════════════════════════════════════════ */

.vc-casi { list-style: none; margin: 0; padding: 0; max-width: none; }
.vc-casi > li {
	border-top: 1px solid var(--vc-filetto);
	padding: 32px 0;
	display: grid;
	grid-template-columns: minmax(0, 9rem) 1fr;
	gap: 32px;
	margin: 0;
}
.vc-casi > li:last-child { border-bottom: 1px solid var(--vc-filetto); }
.vc-casi__anni {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.05rem;
	color: var(--vc-accento);
	font-variant-numeric: tabular-nums;
}
.vc-casi__area { display: block; font-family: var(--wp--preset--font-family--sans);
	font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vc-tenue);
	margin-top: 6px; }
.vc-casi h2 { margin: 0 0 10px; max-width: 30ch; font-size: var(--wp--preset--font-size--medio); }
.vc-casi h2 a { color: inherit; text-decoration: none; }
.vc-casi h2 a:hover { color: var(--vc-accento); }
.vc-casi p { margin: 0 0 12px; color: var(--vc-inchiostro-2); max-width: 62ch; }

@media (max-width: 700px) { .vc-casi > li { grid-template-columns: 1fr; gap: 10px; } }

/* ══════════════════════════════════════════════════════════════════
   404
   ══════════════════════════════════════════════════════════════════ */

.vc-404 h1 { max-width: 20ch; }
.vc-404 ul { list-style: none; padding: 0; }

/* Una scheda sola, a tutta larghezza: il mestiere prima delle specializzazioni. */
.vc-binari--1 { grid-template-columns: 1fr; margin-bottom: 24px; }
.vc-binari--1 .vc-binario { padding: 40px 32px 32px; }
.vc-binari--1 .vc-binario :is(h2, h3) {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.95rem);
	max-width: 24ch;
	margin-bottom: 18px;
}
.vc-binari--1 .vc-binario p { max-width: 62ch; }
.vc-binari--1 .vc-appiglio { max-width: 62ch; }

/* ══════════════════════════════════════════════════════════════════
   Il ritratto in /chi-sono
   ══════════════════════════════════════════════════════════════════ */

.vc-ritratto { margin: 0 0 40px; }
.vc-ritratto img {
	width: 100%;
	max-width: 240px;
	height: auto;
	border-radius: 4px;
	display: block;
	background: var(--vc-carta-alt);
}

/* ══════════════════════════════════════════════════════════════════
   La griglia tecnologia × anno
   ══════════════════════════════════════════════════════════════════ */

.vc-tec {
	--vc-cella-lato: 13px;
	--vc-cella-gap: 2px;
	--vc-nome-larghezza: 13rem;
	margin: 0 0 48px;
}

/* La scala: una sola tinta, chiara → scura. Il colore dice quantità. */
.vc-cella--0 { background: var(--vc-carta-alt); }
.vc-cella--1 { background: color-mix(in srgb, var(--vc-accento) 16%, var(--vc-carta-alt)); }
.vc-cella--2 { background: color-mix(in srgb, var(--vc-accento) 34%, var(--vc-carta-alt)); }
.vc-cella--3 { background: color-mix(in srgb, var(--vc-accento) 55%, var(--vc-carta-alt)); }
.vc-cella--4 { background: color-mix(in srgb, var(--vc-accento) 78%, var(--vc-carta-alt)); }
.vc-cella--5 { background: var(--vc-accento); }

.vc-cella {
	display: block;
	width: var(--vc-cella-lato);
	height: var(--vc-cella-lato);
	border-radius: 2px;
	flex: none;
}
/* Gli anni senza repository non sono «zero»: sono «non misurati».
   Vuoti e basta — una fila di caselle vuote farebbe sembrare la pagina rotta,
   che è esattamente il rischio segnalato nel brief. La legenda lo dichiara. */
.vc-cella--nonmisurata.vc-cella--0 { background: transparent; }

.vc-tec-scorri { overflow-x: auto; padding-bottom: 8px; }

.vc-tec-corpo { min-width: min(100%, 640px); }

.vc-tec-riga,
.vc-tec-asse {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--vc-cella-gap);
}
.vc-tec-nome {
	width: var(--vc-nome-larghezza);
	flex: none;
	font-size: .8rem;
	color: var(--vc-inchiostro-2);
	line-height: 1.25;
	overflow-wrap: anywhere;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
}
/* Il marchio, dove esiste. Prende il colore del testo: resta un segno,
   non diventa una griglia di loghi. */
.vc-ico {
	width: 13px;
	height: 13px;
	flex: none;
	fill: currentColor;
	opacity: .75;
	order: -1;
}
.vc-tec-riga--attiva .vc-ico { opacity: .9; }
.vc-tec-riga--ferma .vc-tec-nome { color: var(--vc-tenue); }
.vc-tec-celle,
.vc-tec-anni { display: flex; gap: var(--vc-cella-gap); }

.vc-tec-asse { margin-bottom: 10px; align-items: flex-end; }
.vc-tec-anno {
	width: var(--vc-cella-lato);
	flex: none;
	position: relative;
	height: 16px;
}
.vc-tec-anno i {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	font-style: normal;
	font-size: .68rem;
	letter-spacing: .04em;
	color: var(--vc-tenue);
	font-variant-numeric: tabular-nums;
}
/* Il filo verticale sull'anno corrente: un filo solo, non un bordo su
   ogni cella — quello sembrava un difetto di rendering. */
.vc-tec-corpo { position: relative; }
.vc-tec-corpo::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: color-mix(in srgb, var(--vc-accento) 40%, transparent);
	left: calc(var(--vc-nome-larghezza) + 14px
	           + var(--vc-oggi, 0) * (var(--vc-cella-lato) + var(--vc-cella-gap))
	           + var(--vc-cella-lato) / 2);
	pointer-events: none;
}
.vc-tec-anno--oggi i { color: var(--vc-accento); font-weight: 700; }

.vc-tec-sezione { margin: 0 0 34px; }
.vc-testo .vc-tec-titolo,
.vc-tec-titolo {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .72rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--vc-tenue);
	font-weight: 700;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--vc-filetto);
	max-width: none;
	white-space: nowrap;
}

/* I filtri: radio veri, quindi navigabili da tastiera e senza JavaScript. */
.vc-tec-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 32px;
	padding: 0 0 24px;
	margin: 0 0 28px;
	border-bottom: 1px solid var(--vc-filetto);
}
.vc-tec-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-tec-etichetta {
	font-size: .7rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--vc-tenue);
	font-weight: 700;
	margin-right: 4px;
}
.vc-tec-radio { position: absolute; opacity: 0; pointer-events: none; }
.vc-tec-radio + label {
	font-size: .85rem;
	padding: 6px 13px;
	border: 1px solid var(--vc-filetto);
	border-radius: 3px;
	cursor: pointer;
	color: var(--vc-inchiostro-2);
	transition: border-color .16s, color .16s, background-color .16s;
}
.vc-tec-radio + label:hover { border-color: var(--vc-accento); color: var(--vc-accento); }
.vc-tec-radio:checked + label {
	background: var(--vc-accento);
	border-color: var(--vc-accento);
	color: var(--vc-carta);
	font-weight: 600;
}
.vc-tec-radio:focus-visible + label { outline: 2px solid var(--vc-accento); outline-offset: 2px; }

/* Il filtro nasconde righe. Non cambia i colori. */
/* Le regole dei filtri le genera inc/griglia.php dalle sezioni reali. */

.vc-tec-legenda {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 20px;
	font-size: .76rem;
	color: var(--vc-tenue);
}
.vc-tec-legenda i { display: inline-block; }
.vc-tec-legenda-nota { margin-left: auto; }

.vc-tec-conteggio strong { display: block; font-size: 1.3rem; color: var(--vc-inchiostro); }

@media (max-width: 700px) {
	.vc-tec { --vc-nome-larghezza: 8.5rem; --vc-cella-lato: 11px; }
	.vc-tec-legenda-nota { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   La tabella con tutte le voci
   ══════════════════════════════════════════════════════════════════ */

.vc-tec-tabella { margin: 48px 0 0; }
.vc-tec-cerca { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.vc-tec-cerca span {
	font-size: .7rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--vc-tenue);
	font-weight: 700;
}
.vc-tec-cerca input {
	font: inherit;
	font-size: .9rem;
	padding: 8px 12px;
	border: 1px solid var(--vc-filetto);
	border-radius: 3px;
	background: var(--vc-carta);
	color: var(--vc-inchiostro);
	min-width: min(100%, 280px);
}
.vc-tec-tabella table { border-collapse: collapse; width: 100%; font-size: .87rem; }
.vc-tec-tabella th,
.vc-tec-tabella td {
	text-align: left;
	padding: 9px 14px 9px 0;
	border-bottom: 1px solid var(--vc-filetto);
	vertical-align: top;
}
.vc-tec-tabella thead th {
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vc-tenue);
	border-bottom: 1px solid var(--vc-inchiostro-2);
	white-space: nowrap;
}
.vc-tec-tabella tbody th { font-weight: 600; color: var(--vc-inchiostro); }
.vc-tec-tabella td { color: var(--vc-inchiostro-2); }
.vc-tec-tabella .vc-num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 24px; }
.vc-tec-tabella thead th[data-col] { cursor: pointer; }
.vc-tec-tabella thead th[aria-sort="ascending"]::after { content: " ↑"; color: var(--vc-accento); }
.vc-tec-tabella thead th[aria-sort="descending"]::after { content: " ↓"; color: var(--vc-accento); }
.vc-tec-tabella tr[hidden] { display: none; }

/* La banda degli anni non misurati: dichiarare il confine è la cosa che
   rende credibile tutto il resto della pagina. */
.vc-tec-nonmisurato {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
}
.vc-tec-banda {
	width: calc(var(--vc-span) * (var(--vc-cella-lato) + var(--vc-cella-gap)) - var(--vc-cella-gap));
	border-top: 1px dashed var(--vc-filetto);
	border-left: 1px dashed var(--vc-filetto);
	border-right: 1px dashed var(--vc-filetto);
	border-radius: 3px 3px 0 0;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .66rem;
	letter-spacing: .06em;
	color: var(--vc-tenue);
	white-space: nowrap;
	overflow: visible;
}

/* ══════════════════════════════════════════════════════════════════
   La fascia temporale dei casi
   ══════════════════════════════════════════════════════════════════ */

.vc-fascia-tempo {
	--vc-ft-nome: 15rem;
	--vc-ft-altezza: 15px;
	margin: 0 0 56px;
}

/* Un colore per area. Il colore dice l'area, mai il cliente. */
[data-area="gestionali-su-misura"]   { --vc-area: #155684; }
[data-area="integrazione-sistemi"]   { --vc-area: #157384; }
[data-area="industriale-hardware"]   { --vc-area: #844915; }
[data-area="dati-bi-ai"]             { --vc-area: #491584; }
[data-area="cloud-continuita"]       { --vc-area: #158468; }
[data-area="identita-firma"]         { --vc-area: #84154D; }
[data-area="startup-nuovi-prodotti"] { --vc-area: #846815; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--vc-ft-chiarore: 1;
	}
	:root:not([data-theme="light"]) [data-area="gestionali-su-misura"]   { --vc-area: #66A7D6; }
	:root:not([data-theme="light"]) [data-area="integrazione-sistemi"]   { --vc-area: #66C5D6; }
	:root:not([data-theme="light"]) [data-area="industriale-hardware"]   { --vc-area: #D69A66; }
	:root:not([data-theme="light"]) [data-area="dati-bi-ai"]             { --vc-area: #9A66D6; }
	:root:not([data-theme="light"]) [data-area="cloud-continuita"]       { --vc-area: #66D6BA; }
	:root:not([data-theme="light"]) [data-area="identita-firma"]         { --vc-area: #D6669E; }
	:root:not([data-theme="light"]) [data-area="startup-nuovi-prodotti"] { --vc-area: #D6BA66; }
}
:root[data-theme="dark"] [data-area="gestionali-su-misura"]   { --vc-area: #66A7D6; }
:root[data-theme="dark"] [data-area="integrazione-sistemi"]   { --vc-area: #66C5D6; }
:root[data-theme="dark"] [data-area="industriale-hardware"]   { --vc-area: #D69A66; }
:root[data-theme="dark"] [data-area="dati-bi-ai"]             { --vc-area: #9A66D6; }
:root[data-theme="dark"] [data-area="cloud-continuita"]       { --vc-area: #66D6BA; }
:root[data-theme="dark"] [data-area="identita-firma"]         { --vc-area: #D6669E; }
:root[data-theme="dark"] [data-area="startup-nuovi-prodotti"] { --vc-area: #D6BA66; }

.vc-ft-asse {
	position: relative;
	height: 22px;
	margin-left: var(--vc-ft-nome);
	border-bottom: 1px solid var(--vc-filetto);
}
.vc-ft-tacca { position: absolute; bottom: 3px; transform: translateX(-50%); }
.vc-ft-tacca i {
	font-style: normal;
	font-size: .7rem;
	color: var(--vc-tenue);
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.vc-ft-oggi {
	position: absolute;
	top: 18px;
	bottom: -1000px;
	width: 1px;
	background: var(--vc-filetto);
}

.vc-ft-barre { list-style: none; margin: 0; padding: 0; position: relative; max-width: none; }
.vc-ft-riga {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 7px 0;
	margin: 0;
	border-bottom: 1px solid var(--vc-filetto);
}
.vc-ft-nome {
	width: var(--vc-ft-nome);
	flex: none;
	padding-right: 20px;
	font-size: .84rem;
	line-height: 1.3;
	color: var(--vc-inchiostro-2);
	overflow-wrap: anywhere;
}
.vc-ft-nome em { font-style: normal; color: var(--vc-tenue); font-size: .78rem; }
.vc-ft-riga--bozza .vc-ft-nome { color: var(--vc-tenue); }

.vc-ft-pista { position: relative; flex: 1; height: var(--vc-ft-altezza); min-width: 0; }
.vc-ft-barra {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--vc-area, var(--vc-accento));
	border-radius: 2px;
	display: block;
	text-decoration: none;
	transform-origin: left center;
}
.vc-ft-barra:hover { filter: brightness(1.12); text-decoration: none; }
.vc-ft-riga--bozza .vc-ft-barra { opacity: .38; }

/* Le tappe: segni verticali dentro la barra. Tre cicatrici dentro una
   barra continua raccontano più di sedici anni lisci. */
.vc-ft-tappa {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 2px;
	background: var(--vc-carta);
	transform: translateX(-1px);
	border-radius: 1px;
}

.vc-ft-legenda {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 18px 0 0;
	padding: 0;
	font-size: .78rem;
	color: var(--vc-tenue);
	max-width: none;
}
.vc-ft-legenda li { display: flex; align-items: center; gap: 8px; margin: 0; }
.vc-ft-legenda i {
	width: 14px;
	height: 8px;
	border-radius: 2px;
	background: var(--vc-area, var(--vc-accento));
	flex: none;
}
.vc-ft-mancanti { margin-top: 20px; }

.vc-a11y {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Su mobile la fascia diventa verticale: non sparisce. */
@media (max-width: 680px) {
	.vc-fascia-tempo { --vc-ft-nome: 0; }
	.vc-ft-asse { margin-left: 0; }
	.vc-ft-riga { display: block; padding: 12px 0; }
	.vc-ft-nome { width: auto; padding: 0 0 7px; display: block; }
	.vc-ft-pista { display: block; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   Movimento — micro, e sempre disattivabile.
   Il brief dice zero; Valerio ha chiesto qualcosa. Questo è il minimo
   che si vede senza che il sito diventi come tutti gli altri.
   ══════════════════════════════════════════════════════════════════ */

@keyframes vc-cresci { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vc-comparsa { from { opacity: 0; } to { opacity: 1; } }

/* Le barre della fascia si disegnano da sinistra, scaglionate. */
.vc-ft-barra { animation: vc-cresci .5s cubic-bezier(.22, .75, .3, 1) both; }
.vc-ft-riga:nth-child(1)  .vc-ft-barra { animation-delay: .02s; }
.vc-ft-riga:nth-child(2)  .vc-ft-barra { animation-delay: .06s; }
.vc-ft-riga:nth-child(3)  .vc-ft-barra { animation-delay: .10s; }
.vc-ft-riga:nth-child(4)  .vc-ft-barra { animation-delay: .14s; }
.vc-ft-riga:nth-child(5)  .vc-ft-barra { animation-delay: .18s; }
.vc-ft-riga:nth-child(6)  .vc-ft-barra { animation-delay: .22s; }
.vc-ft-riga:nth-child(7)  .vc-ft-barra { animation-delay: .26s; }
.vc-ft-riga:nth-child(8)  .vc-ft-barra { animation-delay: .30s; }
.vc-ft-riga:nth-child(9)  .vc-ft-barra { animation-delay: .34s; }
.vc-ft-riga:nth-child(n+10) .vc-ft-barra { animation-delay: .38s; }
.vc-ft-tappa { animation: vc-comparsa .3s .55s both; }

/* Le celle della griglia entrano in dissolvenza, una volta sola. */
.vc-tec-sezione .vc-cella { animation: vc-comparsa .45s both; }
.vc-tec-sezione:nth-of-type(2) .vc-cella { animation-delay: .05s; }
.vc-tec-sezione:nth-of-type(3) .vc-cella { animation-delay: .10s; }
.vc-tec-sezione:nth-of-type(4) .vc-cella { animation-delay: .15s; }
.vc-tec-sezione:nth-of-type(5) .vc-cella { animation-delay: .20s; }
.vc-tec-sezione:nth-of-type(6) .vc-cella { animation-delay: .25s; }

/* Il resto: transizioni, non animazioni. */
.vc-binario { transition: background-color .18s ease; }
.wp-element-button { transition: transform .16s cubic-bezier(.2, .7, .3, 1), background-color .16s; }
.wp-element-button:hover { transform: translateY(-1px); }
.vc-casi h2 a { transition: color .16s; }
.vc-collegamento { transition: border-color .16s, color .16s; }
.vc-cella { transition: filter .12s; }
.vc-cella:hover { filter: brightness(1.15) saturate(1.1); }
.vc-ft-barra { transition: filter .16s; }

/* Se il sistema chiede meno movimento, il sito è fermo. Tutto. */
@media (prefers-reduced-motion: reduce) {
	.vc-ft-barra,
	.vc-ft-tappa,
	.vc-tec-sezione .vc-cella { animation: none !important; }
}

/* Le schermate dei prodotti. */
.vc-schermata { margin: 32px 0 40px; }
.vc-schermata img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--vc-filetto);
	border-radius: 4px;
	background: var(--vc-carta-alt);
}
.vc-didascalia {
	font-size: .8rem;
	color: var(--vc-tenue);
	margin: 10px 0 0;
	max-width: 60ch;
}

/* ══════════════════════════════════════════════════════════════════
   La striscia in hero
   ══════════════════════════════════════════════════════════════════ */

.vc-striscia {
	--vc-s-lato: 13px;
	--vc-s-gap: 2px;
	--vc-s-nome: 8.6rem;
	padding-bottom: 40px;
}
/* Due colonne: la striscia occupa la fascia, non un terzo di essa. */
.vc-striscia-corpo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 44px;
}
.vc-striscia-cap {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vc-tenue-notte);
	margin-bottom: 16px;
}
.vc-striscia-cap .vc-collegamento { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.vc-striscia-riga { display: flex; align-items: center; gap: 14px; margin-bottom: var(--vc-s-gap); }
.vc-striscia-nome {
	width: var(--vc-s-nome);
	flex: none;
	text-align: right;
	font-size: .7rem;
	color: var(--vc-tenue-notte);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vc-striscia-celle { display: flex; gap: var(--vc-s-gap); }
.vc-scella {
	width: var(--vc-s-lato);
	height: var(--vc-s-lato);
	border-radius: 2px;
	flex: none;
	display: block;
}
.vc-scella--0 { background: rgba(255, 255, 255, .05); }
.vc-scella--1 { background: color-mix(in srgb, var(--vc-accento-notte) 22%, transparent); }
.vc-scella--2 { background: color-mix(in srgb, var(--vc-accento-notte) 42%, transparent); }
.vc-scella--3 { background: color-mix(in srgb, var(--vc-accento-notte) 62%, transparent); }
.vc-scella--4 { background: color-mix(in srgb, var(--vc-accento-notte) 82%, transparent); }
.vc-scella--5 { background: var(--vc-accento-notte); }
.vc-scella--ric {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(90, 168, 224, .38);
	border-radius: 2px;
}

.vc-striscia-anni {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin-top: 12px;
	/* Larga esattamente quanto una fila di celle: N lati più N-1 spazi.
	   Prima era «50% meno 22px», che è una stima e non corrispondeva. */
	width: calc(var(--vc-s-anni, 22) * var(--vc-s-lato) + (var(--vc-s-anni, 22) - 1) * var(--vc-s-gap));
	max-width: 100%;
	margin-left: calc(var(--vc-s-nome) + 14px);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--vc-su-notte-4);
	font-variant-numeric: tabular-nums;
}
.vc-striscia-anni span:nth-child(2) { color: var(--vc-accento-notte); }

/* Si disegna da sinistra, una volta sola. */
.vc-striscia-celle { animation: vc-comparsa .6s .1s both; }
@media (prefers-reduced-motion: reduce) { .vc-striscia-celle { animation: none; } }

@media (max-width: 980px) {
	.vc-striscia-corpo { grid-template-columns: 1fr; }
	.vc-striscia-anni { max-width: none; }
}
@media (max-width: 760px) {
	.vc-striscia { --vc-s-nome: 0; --vc-s-lato: 9px; }

	/* Il nome non sparisce: sale sopra la sua riga. Nasconderlo lasciava
	   trenta file di puntini che non dicevano di cosa parlassero, e una
	   griglia senza etichette non è un grafico, è una decorazione. */
	.vc-striscia-riga { flex-direction: column; align-items: stretch; gap: 3px; }
	.vc-striscia-nome {
		display: block;
		width: auto;
		text-align: left;
		font-size: .72rem;
		color: var(--vc-su-notte-2);
	}

	/* Impilate, trenta righe etichettate sarebbero tre schermate. Se ne
	   mostrano dodici — la striscia è già dichiarata come una selezione, e
	   «Guardale tutte» porta all'elenco intero. */
	.vc-striscia-corpo .vc-striscia-riga:nth-child(n+13) { display: none; }

	.vc-striscia-anni { margin-left: 0; }
}

/* Le due righe dei fornitori cloud: sono aggregati, e si vede. */
.vc-tec-riga--fornitore .vc-tec-nome {
	font-weight: 700;
	color: var(--vc-inchiostro);
}
.vc-tec-riga--fornitore { margin-bottom: 5px; }

/* ══════════════════════════════════════════════════════════════════
   Comparsa allo scorrimento

   La classe sulla radice la mette lo script. Senza JavaScript, o con
   prefers-reduced-motion, questo blocco non si applica e il contenuto
   è visibile da subito: non si nasconde mai niente in attesa.
   ══════════════════════════════════════════════════════════════════ */

.vc-con-comparsa .vc-entra {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .62s cubic-bezier(.22, .75, .3, 1) var(--vc-ritardo, 0ms),
	            transform .62s cubic-bezier(.22, .75, .3, 1) var(--vc-ritardo, 0ms);
	will-change: opacity, transform;
}
/* Le celle delle griglie entrano di lato, alternate. */
.vc-con-comparsa .vc-entra--sinistra { transform: translate3d(-26px, 12px, 0); }
.vc-con-comparsa .vc-entra--destra { transform: translate3d(26px, 12px, 0); }
.vc-con-comparsa .vc-entra.vc-entrato {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.vc-con-comparsa .vc-entra {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
   Le fasce si alternano: non è più una colonna bianca lunga.
   ══════════════════════════════════════════════════════════════════ */

.vc-sezione.vc-alt { background: var(--vc-carta-alt); }
.vc-sezione.vc-alt .vc-binario { background: var(--vc-carta); }
.vc-sezione.vc-alt .vc-binario:hover { background: var(--vc-carta-alt); }
.vc-chiusura:not(section) { background: transparent; }
section.vc-chiusura { background: var(--vc-carta-alt); }

/* Il segno della chiusura: il pallino acceso, accanto al titolo, nello
   stesso posto dove le altre sezioni hanno 01, 02, 03. Non è decorazione:
   è l'unico elemento di marca del sito. */
.vc-segno {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 1em;
}
.vc-segno::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vc-acceso);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc-acceso) 18%, transparent);
}
.vc-notte .vc-segno::before { background: var(--vc-acceso-notte); }

/* Le celle ricostruite a memoria: tratteggiate, mai piene.
   Sappiamo che è stata usata, non quanto. Dirlo è la cosa che rende
   credibile tutto il resto della pagina. */
.vc-cella--ricostruita {
	background: transparent !important;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vc-accento) 45%, transparent);
	border-radius: 2px;
}
.vc-tec-legenda-ric { display: inline-flex; align-items: center; gap: 7px; margin-left: 18px; }
.vc-tec-legenda-ric i { flex: none; }

/* ══════════════════════════════════════════════════════════════════
   Gli esempi di siti
   ══════════════════════════════════════════════════════════════════ */

.vc-sito {
	border-top: 1px solid var(--vc-filetto);
	padding-top: 32px;
	margin: 0 0 40px;
	display: grid;
	grid-template-columns: minmax(0, 22rem) 1fr;
	gap: 6px 40px;
	align-items: start;
}
/* La schermata tiene tutta la colonna di sinistra; il testo resta unito
   nella colonna di destra invece di spezzarsi fra le due. */
.vc-sito > :first-child { grid-column: 1; grid-row: 1 / span 3; }
.vc-sito h3 { grid-column: 2; grid-row: 1; margin: 0 0 8px; }
.vc-sito p:not(.vc-sotto) { grid-column: 2; grid-row: 2; }
.vc-sito .vc-sotto { grid-column: 2; grid-row: 3; margin-top: 6px; }
.vc-sito > * { margin-block: 0; }
/* L'immagine occupa tutta la colonna di sinistra: il testo resta unito
   nella colonna di destra invece di spezzarsi fra le due. */

.vc-sito img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--vc-filetto);
	border-radius: 4px;
	background: var(--vc-carta-alt);
	transition: border-color .18s;
}
.vc-sito a:hover img { border-color: var(--vc-accento); }
.vc-sito h3 { margin: 0 0 10px; font-size: var(--wp--preset--font-size--medio); }
.vc-sito h3 a { color: inherit; text-decoration: none; }
.vc-sito h3 a:hover { color: var(--vc-accento); }
.vc-sito p { max-width: 56ch; margin: 0 0 10px; }
.vc-sotto {
	font-size: .8rem;
	color: var(--vc-tenue);
	letter-spacing: .02em;
}

@media (max-width: 820px) {
	.vc-sito { grid-template-columns: 1fr; gap: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   I casi di un'area, in fondo alla pagina che racconta quel mestiere
   ══════════════════════════════════════════════════════════════════ */

.vc-casi-area {
	border-top: 1px solid var(--vc-filetto);
	margin-top: 56px;
	padding-top: 32px;
}
.vc-casi-area h2 {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--medio);
	max-width: none;
}
.vc-casi-area ul { list-style: none; padding: 0; margin: 0 0 18px; max-width: 64ch; }
.vc-casi-area li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--vc-filetto);
	margin: 0;
}
.vc-casi-area li a { color: var(--vc-inchiostro); text-decoration: none; font-weight: 600; }
.vc-casi-area li a:hover { color: var(--vc-accento); }
.vc-casi-area li span {
	margin-left: auto;
	font-size: .8rem;
	color: var(--vc-tenue);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Il pulsante nella scheda di un prodotto.
   Non usa le classi dei blocchi di WordPress: quel foglio di stile viene
   caricato solo quando il blocco sta nel contenuto, e qui il markup lo
   scrive il tema. Senza, il pulsante si sovrapponeva al testo sotto. */
.vc-azione-prodotto { margin: 0 0 32px; max-width: none; }
.vc-azione-prodotto a {
	display: inline-block;
	text-decoration: none;
}
.vc-stato-prodotto { margin: 0 0 20px; }

/* ══════════════════════════════════════════════════════════════════
   Il banner del consenso

   Una fascia in fondo, dello stesso scuro del piede: si vede, non
   copre la pagina, e non ha una X. I due pulsanti hanno lo stesso
   peso — sì e no si somigliano apposta, perché la scelta sia una
   scelta e non un percorso obbligato.
   ══════════════════════════════════════════════════════════════════ */

.vc-consenso {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: var(--vc-notte-2);
	color: var(--vc-su-notte-2);
	border-top: 1px solid var(--vc-filetto-notte);
	box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
	font-size: .87rem;
	animation: vc-consenso-entra .22s ease-out both;
}

@keyframes vc-consenso-entra {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vc-consenso { animation: none; }
}

.vc-consenso__interno {
	max-width: 1140px;
	margin-inline: auto;
	padding: 20px clamp(20px, 4vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.vc-consenso__testo { max-width: 68ch; }
.vc-consenso__testo p { margin: 0; }
.vc-consenso__titolo {
	color: var(--vc-su-notte);
	font-weight: 600;
	margin-bottom: 6px !important;
}
.vc-consenso a { color: var(--vc-accento-notte); }
.vc-consenso a:hover { color: #FFFFFF; }

.vc-consenso__scelte {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.vc-consenso__scelte button {
	font: inherit;
	font-weight: 600;
	padding: 11px 22px;
	border-radius: 3px;
	cursor: pointer;
	border: 1px solid var(--vc-su-notte-4);
	transition: background-color .16s, color .16s, border-color .16s;
}

/* Il no non è un ripiego grigio: è un pulsante, come l'altro. */
.vc-consenso__no {
	background: transparent;
	color: var(--vc-su-notte);
}
.vc-consenso__no:hover {
	background: var(--vc-su-notte);
	color: var(--vc-notte);
}

.vc-consenso__si {
	background: var(--vc-su-notte);
	color: var(--vc-notte);
	border-color: var(--vc-su-notte);
}
.vc-consenso__si:hover { background: #FFFFFF; border-color: #FFFFFF; }

@media (max-width: 640px) {
	.vc-consenso__interno { gap: 18px; }
	.vc-consenso__scelte { width: 100%; }
	.vc-consenso__scelte button { flex: 1; }
}

/* Il comando che riapre la scelta, nel piede: è un pulsante, ma nel
   piede deve leggersi come le voci che gli stanno accanto. */
.vc-preferenze {
	font: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--vc-su-notte);
}
.vc-preferenze:hover { color: #FFFFFF; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════
   Le tabelle nelle pagine di testo — la cookie policy, per ora
   ══════════════════════════════════════════════════════════════════ */

/* Il blocco tabella di WordPress arriva con la griglia completa: qui
   serve il contrario — un filetto sotto ogni riga e basta. I selettori
   sono più lunghi del necessario apposta, per battere wp-block-library. */
.vc-testo .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: .87rem;
	margin-bottom: 28px;
}
.vc-testo .wp-block-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--vc-filetto);
	padding: 10px 16px 10px 0;
	text-align: left;
	vertical-align: top;
}
.vc-testo .wp-block-table :is(thead, tfoot) { border: 0; }
.vc-testo .wp-block-table th {
	color: var(--vc-tenue);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .72rem;
	white-space: nowrap;
}
.vc-testo .wp-block-table td code {
	font-size: .92em;
	background: var(--vc-carta-alt);
	padding: 1px 5px;
	border-radius: 2px;
}
.vc-testo figure.wp-block-table { margin: 0 0 28px; overflow-x: auto; }