/* ==== content-carousel-hero ==== */
/* ============================================================================
 * Element:     Content Carousel come hero a slide
 * Class:       .hi-hero-slider
 * Description: Trasforma il Content Carousel di Impreza nell'hero a tutto schermo del mockup CVA - dev 20261030: slide alte quanto lo schermo, velature sull'immagine, testi che entrano dal basso e puntini trasformati in barre di avanzamento in basso a sinistra.
 * ============================================================================
 *
 * Uso      : nel builder, Content Carousel con Extra class `hi-hero-slider`
 *            (1 item, loop, autoplay, dissolvenza, puntini "dash", niente
 *            frecce); dentro, una slide per ogni Contenitore verticale con
 *            Extra class `hi-hero-slider__slide` e immagine di sfondo nelle
 *            Design Options. Testi, immagini e link si cambiano dal builder.
 * Rimozione: cancellare questo file = carosello Impreza standard.
 *
 * La durata del riempimento della barra (7s) deve coincidere con
 * "Autoplay Timeout" del carosello: se si cambia lì, va cambiata qui in
 * --hi-hero-slider-duration.
 *
 * Misure in px perché il rem di Impreza è fluido.
 */

.hi-hero-slider {
	--hi-hero-slider-duration: 7s;
	--hi-hero-slider-ease: cubic-bezier(.16, .84, .32, 1);

	position: relative;
	background: #0a1320;
}

/* ---------------------------------------------------------------------------
 * Slide: tutto schermo, testi sotto l'header fisso.
 * ------------------------------------------------------------------------- */

.hi-hero-slider .hi-hero-slider__slide {
	position: relative;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	padding: max(clamp(140px, 20vh, 170px), calc(var(--header-height, 0px) + 40px)) 6vw calc(max(20px, 5vh) + 84px);
	overflow: hidden;
}

/* Le quattro velature del mockup: tinta blu, verticale, da sinistra e angolo
   in alto a destra. Stanno sotto i testi, che sono figli diretti. */
.hi-hero-slider .hi-hero-slider__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(48% 34% at 100% 0%, rgba(8, 22, 38, .62) 0%, rgba(8, 22, 38, .3) 45%, rgba(8, 22, 38, 0) 100%),
		linear-gradient(90deg, rgba(8, 22, 38, .66) 0%, rgba(8, 22, 38, .32) 38%, rgba(8, 22, 38, 0) 64%),
		linear-gradient(180deg, rgba(8, 22, 38, .32) 0%, rgba(8, 22, 38, .06) 34%, rgba(8, 22, 38, .08) 58%, rgba(8, 22, 38, .7) 100%),
		rgba(25, 65, 103, .16);
}

.hi-hero-slider .hi-hero-slider__slide > * {
	position: relative;
	z-index: 1;
}

.hi-hero-slider .hi-hero-slider__slide :is(h1, h2) {
	text-shadow: 0 2px 10px rgba(6, 16, 28, .62);
}

.hi-hero-slider .hi-hero-slider__slide p {
	text-shadow: 0 1px 18px rgba(6, 16, 28, .5);
}

/* I testi della slide che arriva entrano dal basso, dopo che l'immagine ha
   iniziato la dissolvenza. */
.hi-hero-slider .owl-item .hi-hero-slider__slide > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s ease, transform .8s var(--hi-hero-slider-ease);
}

.hi-hero-slider .owl-item.active .hi-hero-slider__slide > * {
	opacity: 1;
	transform: none;
	transition-delay: .4s;
}

/* Freccia del link: scorre a destra all'hover, come negli altri pulsanti. */
.hi-hero-slider .hi-hero-slider__slide .w-text i {
	transition: transform .4s var(--hi-hero-slider-ease);
}

.hi-hero-slider .hi-hero-slider__slide .w-text a:hover i {
	transform: translateX(10px);
}

/* ---------------------------------------------------------------------------
 * Puntini "dash" → barre di avanzamento.
 * La barra attiva si riempie in --hi-hero-slider-duration; quando Owl cambia
 * slide sposta la classe .active e l'animazione riparte da sola.
 * ------------------------------------------------------------------------- */

.hi-hero-slider .owl-dots {
	position: absolute;
	left: max(6vw, 96px);
	bottom: max(20px, 5vh);
	z-index: 8;
	display: flex;
	gap: 10px;
	padding: 0;
}

.hi-hero-slider .owl-dots .owl-dot {
	display: flex;
	align-items: center;
	width: 64px;
	height: 44px;
	padding: 0;
}

.hi-hero-slider.hi-hero-slider .owl-dot span {
	position: relative;
	width: 100%;
	height: 3px;
	margin: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, .28);
	opacity: 1;
}

.hi-hero-slider .owl-dot span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

.hi-hero-slider .owl-dot.active span::after {
	animation: hi-hero-slider-bar var(--hi-hero-slider-duration) linear forwards;
}

.hi-hero-slider .owl-dot:focus-visible {
	outline: 2px solid #45c8f5;
	outline-offset: 2px;
}

@keyframes hi-hero-slider-bar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---------------------------------------------------------------------------
 * Schermi bassi e mobile
 * ------------------------------------------------------------------------- */

@media (max-height: 700px) {
	.hi-hero-slider .hi-hero-slider__slide p {
		margin-top: 16px !important;
		font-size: 15px !important;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* I corpi dei testi su mobile sono nelle Design Options dei singoli titoli
   (scheda Mobiles), modificabili dal builder. Qui solo la posizione delle barre. */
@media (max-width: 760px) {
	.hi-hero-slider .owl-dots {
		left: 6vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hi-hero-slider .owl-item .hi-hero-slider__slide > * {
		transition: none;
		transform: none;
	}
	.hi-hero-slider .owl-dot.active span::after {
		animation: none;
		transform: scaleX(1);
	}
}

/* ==== counter-in-image-circle ==== */
/* ============================================================================
 * Element:     Contatore dentro il cerchio
 * Class:       .hi-counter-in-image-circle
 * Description: L'immagine del blocco diventa un cerchio e il contatore le si siede al centro, dentro un disco semitrasparente che lascia intravedere la foto.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-counter-in-image-circle` nel campo Extra class del
 *            Vertical Wrapper (US Builder) che contiene, in quest'ordine,
 *            un elemento Image e un elemento Counter:
 *
 *              .hi-counter-in-image-circle   (.w-vwrapper)
 *              |- .w-image > .w-image-h > img
 *              +- .w-counter
 *                 |- .w-counter-value        il numero
 *                 +- .w-counter-title        l'etichetta
 *
 * Rimozione: cancellare questo file = ritorno immediato allo stato attuale
 *            (immagine sopra, contatore sotto).
 *
 * ---------------------------------------------------------------------------
 * L'EFFETTO E' FATTO DI TRE STRATI, NON DI DUE IMMAGINI
 *   .w-image     l'immagine, portata a riempire il quadrato e arrotondata
 *   .w-counter   il disco centrale, un velo semitrasparente sopra la foto
 *   :after       il filo di luce sul bordo del cerchio
 *
 * Il disco non contiene una copia dell'immagine: e' uno strato di colore
 * semitrasparente, quindi cio' che si vede al suo interno E' la foto sotto,
 * a fuoco, solo scurita. Niente da tenere allineato fra due copie.
 *
 * La sfocatura c'e' ma e' leggera, 6px come nel mockup: ammorbidisce i
 * contorni senza nascondere la foto. Alzandola molto si torna al "vetro
 * smerigliato" delle prime versioni, che nasconde proprio cio' che qui si
 * vuole far vedere. Le due note qui sotto riguardano quella sfocatura.
 *
 * ATTENZIONE (backdrop root). `backdrop-filter` guarda cio' che sta sotto fino
 * al primo antenato che fa da "backdrop root": lo diventa un elemento con
 * filter, opacity < 1, mask, clip-path, mix-blend-mode, contain: paint o
 * isolation: isolate. Se una di queste finisse sul wrapper o sull'immagine, il
 * disco resterebbe un cerchio piatto senza sfocatura. E' il motivo per cui qui
 * il wrapper ha solo `position: relative`, e per cui il ritaglio tondo sta sul
 * bordo dell'<img> (border-radius) invece che su un `overflow: hidden` del
 * contenitore.
 *
 * ATTENZIONE (centratura). Il disco e' centrato con `inset: 0; margin: auto` e
 * non con `translate(-50%, -50%)`: un antenato trasformato e' causa nota di
 * sfocature disallineate in WebKit.
 * ---------------------------------------------------------------------------
 * PERCHE' LA DOPPIA CLASSE SUL WRAPPER
 * Il CSS del plugin viene accodato PRIMA dei <style> del builder
 * (`us-theme-options-css`, `us-design-options-css`), quindi a parita' di
 * specificita' vincerebbe il builder. `.classe.classe` porta la specificita' a
 * (0,2,0) e chiude la questione senza `!important` e senza nominare le classi
 * generate `us_custom_...`.
 *
 * Le regole sui figli non ne hanno bisogno: `.wrapper .figlio` e' gia' (0,2,0),
 * e soprattutto le dichiarazioni `!important` che il builder mette su
 * `.w-counter` (colore, corpo, peso) arrivano ai figli solo per EREDITARIETA',
 * che perde contro qualsiasi dichiarazione diretta sul figlio. L'unica cosa
 * davvero intoccabile e' il corpo di 13px scritto inline sull'etichetta dal
 * builder: quello resta suo, si cambia nel builder.
 * ---------------------------------------------------------------------------
 * IL CORPO DEL NUMERO NON SI TOCCA: SI ADATTA IL DISCO
 * Il contatore dentro il cerchio deve avere lo stesso corpo di quelli in
 * colonna a destra, altrimenti la fila di numeri non si legge come una fila.
 * Sul sito e' automatico: e' lo stesso elemento Counter con la stessa classe
 * `us_custom_...` dei laterali, quindi basta NON dichiarare qui il font-size e
 * i corpi coincidono da soli, oggi e dopo ogni modifica nel builder.
 *
 * Una versione precedente di questo file faceva l'opposto — corpo in `cqi`,
 * cioe' proporzionale al diametro del cerchio — e il numero nel cerchio
 * finiva molto piu' grande dei laterali. Se il testo non ci sta non si
 * rimpicciolisce il testo: si allarga il disco.
 *
 * Da cui la regola del disco: e' il PIU' GRANDE fra la percentuale del cerchio
 * (`--hi-cic-disc`, 42% come il mockup: e' questo il valore che si vede quasi
 * sempre) e un minimo che garantisce solo che il testo ci stia
 * (`--hi-cic-disc-min`). Il minimo NON deve mai essere la misura normale,
 * altrimenti il disco si gonfia e la proporzione col cerchio se ne va: e'
 * tarato su quanto il testo occupa davvero, e subentra solo sotto i ~375px di
 * cerchio, dove il 42% non basterebbe piu' a contenere un testo che, per
 * scelta, non rimpicciolisce.
 * ============================================================================ */

.hi-counter-in-image-circle.hi-counter-in-image-circle {

	/* ---- LEVE DI TARATURA ---- */

	/* Diametro massimo del cerchio. 100% = tutta la colonna. */
	--hi-cic-size: 100%;

	/* Diametro del disco centrale, in percentuale del cerchio.
	   42% e' il valore del mockup (`.ring-content`: width 42%). */
	--hi-cic-disc: 42%;

	/* Sfocatura di cio' che sta sotto il disco. 6px e' il valore del mockup
	   (demo1.hidoly.dev/cva-proposta-1-B, `.ring-content`): ammorbidisce i
	   contorni delle forme senza nasconderle, la foto dentro il disco si legge
	   ancora. Oltre i 30px il disco diventa una macchia uniforme e la
	   trasparenza sparisce, per quanto basso sia il velo.
	   Non c'e' un ripiego per i browser senza `backdrop-filter`: a 6px la
	   differenza e' impercettibile, e il contrasto dei testi lo regge il velo,
	   che e' identico nei due casi. Se si sale molto, rimetterlo — un
	   `@supports not (backdrop-filter: blur(1px))` con un velo piu' coprente. */
	--hi-cic-blur: 6px;

	/* Velo del disco: da' il colore ed e' la leva della trasparenza — piu' e'
	   basso, piu' si intravede la foto sotto.

	   ATTENZIONE, E' ANCHE LA LEVA DELLA LEGGIBILITA', ed e' praticamente
	   l'unica: con 6px di sfocatura sotto i testi passa l'immagine quasi a
	   fuoco, con i suoi contrasti locali. Misurato su questa foto (velo .64,
	   sfocatura 6px), sfondo tipico e sfondo piu' chiaro sotto ciascun testo:
	       104 da 12,0:1 a 7,3:1        IMPIANTI da 6,7:1 a 5,8:1
	   Su una foto molto piu' chiara di questa (neve, cielo pieno) la stessa .64
	   non basta piu': salire verso .80 e rimisurare. La verifica si fa
	   sull'etichetta, non sul numero: e' piccola e azzurra, quindi cede molto
	   prima. */
	--hi-cic-veil: rgba(11, 22, 41, .64);

	/* Morbidezza del bordo del disco, in percentuale del suo raggio.
	   0 come nel mockup, che il bordo tondo lo fa con un semplice
	   `border-radius` e nessuna maschera.
	   0 = bordo netto, ed e' cio' che permette al disco di restare un OGGETTO
	   anche da trasparente: il confine e' un gradino, non un passaggio, quindi
	   la foto che traspare non lo sfilaccia. Se invece il bordo sfuma, la
	   trasparenza e la sfumatura si sommano e il disco torna a sembrare un
	   alone. Alzarlo solo se si vuole quell'effetto. */
	--hi-cic-feather: 0%;

	/* Filo di contorno del cerchio. `transparent` per toglierlo. */
	--hi-cic-ring: rgba(255, 255, 255, .18);
	--hi-cic-ring-width: 1px;

	/* Diametro minimo del disco, in multipli del corpo del NUMERO (`em` qui si
	   misura sul font-size del contatore). E' cio' che tiene il testo dentro
	   quando il cerchio si stringe. Con un'etichetta lunga va alzato: la
	   verifica e' che il disco resti piu' largo del testo piu' largo.

	   E' UN PARACADUTE, NON UNA MISURA: deve restare SOTTO il 42% in tutti i
	   casi normali, altrimenti gonfia il disco e la proporzione col cerchio non
	   e' piu' quella del mockup. Con 4.6em, su un cerchio da 390px, il disco
	   arrivava al 58%. Va quindi tarato su cio' che il testo occupa davvero:
	   misurata, la scatola dei due testi sta in un cerchio di 122px di diametro
	   (angolo piu' lontano dal centro 61px), 140px con un po' d'aria.
	   Il termine in em serve se qualcuno alza il corpo del contatore nel
	   builder; quello in px copre l'etichetta, che il builder tiene a 13px
	   fissi e che quindi non rimpicciolisce insieme al numero. */
	--hi-cic-disc-min: max(3.2em, 140px);

	/* Distanza fra numero ed etichetta, anch'essa in em: cresce col testo. */
	--hi-cic-gap: .3em;

	/* Spaziatura fra le lettere dell'etichetta. */
	--hi-cic-label-tracking: .34em;

	/* Parte dell'immagine che sopravvive al ritaglio quadrato. */
	--hi-cic-crop: center;

	/* ---- STRUTTURA ---- */

	position: relative;
	display: block;
	/* il wrapper era flex: ora impila per sovrapposizione */
	width: 100%;
	max-width: var(--hi-cic-size);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	/* il quadrato che contiene il cerchio */
}

/* ---- IMMAGINE ---- */

.hi-counter-in-image-circle>.w-image {
	position: absolute;
	inset: 0;
	margin: 0;
	/* il vwrapper dava un margin-bottom ai figli */
}

.hi-counter-in-image-circle .w-image-h {
	height: 100%;
}

.hi-counter-in-image-circle .w-image img {
	width: 100%;
	height: 100%;
	max-height: none;
	/* il tema imposta height/max-height: inherit */
	object-fit: cover;
	object-position: var(--hi-cic-crop);
	border-radius: 50%;
}

/* ---- ANELLO DI CONTORNO ----
   Un box-shadow inset sull'immagine non si vedrebbe: le ombre interne stanno
   sopra lo sfondo ma sotto il contenuto. Serve uno strato proprio, sopra
   tutto e trasparente al mouse. */
.hi-counter-in-image-circle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 var(--hi-cic-ring-width) var(--hi-cic-ring);
	pointer-events: none;
}

/* ---- DISCO CENTRALE ---- */

.hi-counter-in-image-circle>.w-counter {
	position: absolute;
	inset: 0;
	margin: auto;
	/* centratura senza transform */
	/* Il piu' grande fra il valore estetico e il minimo che regge il testo. */
	width: max(var(--hi-cic-disc), var(--hi-cic-disc-min));
	height: max(var(--hi-cic-disc), var(--hi-cic-disc-min));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Il velo e' uno strato a se' e non il fondo del disco: cosi' l'eventuale
   sfumatura del bordo tocca solo il velo e mai il testo, che resta a pieno
   contrasto fino all'ultimo pixel. */
.hi-counter-in-image-circle>.w-counter::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--hi-cic-veil);
	-webkit-backdrop-filter: blur(var(--hi-cic-blur));
	backdrop-filter: blur(var(--hi-cic-blur));
}

/* `closest-side` = il raggio del disco, quindi le percentuali del gradiente
   sono percentuali del raggio: pieno fino a (100 - sfumatura), poi via. */
@supports ((-webkit-mask-image: radial-gradient(#000, #000)) or (mask-image: radial-gradient(#000, #000))) {
	.hi-counter-in-image-circle>.w-counter::before {
		-webkit-mask-image: radial-gradient(circle closest-side, #000 calc(100% - var(--hi-cic-feather)), transparent 100%);
		mask-image: radial-gradient(circle closest-side, #000 calc(100% - var(--hi-cic-feather)), transparent 100%);
	}
}

/* ---- NUMERO ED ETICHETTA ----
   `position: relative` li porta sopra lo strato del velo, che e' posizionato e
   li precede nell'ordine del documento, senza ricorrere agli z-index.
   Il colore non e' toccato: il numero ha il suo inline dal builder
   (--color-alt-content-text) e l'etichetta eredita --color-alt-content-link,
   che e' gia' l'azzurro CVA. */

.hi-counter-in-image-circle .w-counter-value {
	position: relative;
	/* gia' nel tema, ripetuto perche' qui e' necessario */
	/* NIENTE font-size qui: il numero deve restare quello del builder, uguale
	   ai contatori laterali (vedi la nota in testa al file). */
	line-height: 1;
	font-variant-numeric: tabular-nums;
	/* le cifre non ballano mentre conta */
}

/*
 * L'ETICHETTA E IL BUCO CHE LA SEPARAVA DAL NUMERO
 * Nel markup l'etichetta e' uno <span> inline dentro .w-counter, che porta il
 * corpo del numero (fino a 58px). La riga che la contiene non e' alta quanto i
 * suoi 13px ma quanto lo "strut" del blocco, cioe' l'interlinea calcolata sul
 * corpo del PADRE: il testo piccolo galleggia in mezzo a quel vuoto. Misurato
 * in pagina: margin-top 9,6px, distanza reale 26px. I 16px di troppo sono la
 * riga, non il margine, e infatti abbassare il margine non li toglieva.
 * Diventando elemento di un contenitore flex lo span e' "blockificato": si
 * porta dietro la propria interlinea e il buco sparisce. Da li' in poi la
 * distanza e' una sola cosa, --hi-cic-gap, ed essendo in em cresce col testo.
 */
.hi-counter-in-image-circle .w-counter-title {
	position: relative;
	display: block;
	margin: var(--hi-cic-gap) 0 0;
	line-height: 1.2;
	text-transform: uppercase;

	/* La spaziatura viene aggiunta anche DOPO l'ultima lettera: su un testo
	   centrato lo sposta a sinistra di quella stessa quantita'. Il rientro
	   della prima riga, uguale alla spaziatura, lo rimette in asse. */
	letter-spacing: var(--hi-cic-label-tracking);
	text-indent: var(--hi-cic-label-tracking);
}

/* ==== counter-inline ==== */
/* ============================================================================
 * Element:     Contatore in linea
 * Class:       .hi-custom-counter
 * Description: Valore e titolo del contatore Impreza sempre sulla stessa riga, dentro la colonna, senza scatto di larghezza durante il conteggio.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-custom-counter` nel campo Extra class
 *            dell'elemento Counter di Impreza (US Builder > Counter).
 * Rimozione: cancellare questo file = ritorno immediato allo stato attuale.
 *
 * NOTA SUL NOME
 * Il file si chiama `counter-inline.css` ma la classe e' rimasta
 * `.hi-custom-counter`: e' gia' scritta nel campo Extra class di sei blocchi
 * nella sola home, e rinominarla qui spegnerebbe lo stile su tutti finche' non
 * viene cambiata anche nel builder. Per allineare anche la classe: prima
 * sostituire `hi-custom-counter` con `hi-inline-counter` nei blocchi, poi in
 * questo file. Negli altri file di css/ nome e classe combaciano
 * (`counter-in-image-circle.css` -> `.hi-counter-in-image-circle`).
 *
 * ---------------------------------------------------------------------------
 * PERCHE' SBORDAVA, E PERCHE' IL WRAP NON ERA LA RISPOSTA
 * Il requisito e' che valore e titolo restino SEMPRE su una riga, dentro la
 * colonna. Con `flex-wrap: wrap` il titolo scendeva sotto: niente sbordo, ma
 * requisito violato. Rimesso `nowrap`.
 *
 * Con `nowrap` il contenuto e' rigido: se non ci sta, esce. Quindi l'unica
 * variabile su cui agire e' il CORPO DEL VALORE.
 *
 * LA CAUSA VERA
 * Il corpo era `clamp(34px, 3.4vw, 58px)`: scala con la larghezza del
 * VIEWPORT. Ma cio' che deve contenerlo e' la larghezza della COLONNA, e le
 * due non crescono insieme: quando il contenitore raggiunge la sua larghezza
 * massima la colonna si ferma, mentre 3.4vw continua a salire fino a 58px
 * (a 1706px di viewport). In quella finestra il numero cresce dentro una
 * colonna che non cresce piu' -> sborda. Ecco perche' dipendeva dalla
 * risoluzione.
 *
 * IL RIMEDIO
 * Questo file dichiara la colonna come container di query (`container-type`),
 * cosi' il corpo del valore puo' essere espresso in `cqi` = 1% della
 * larghezza del CONTENITORE invece che del viewport. Il valore va impostato
 * nel builder, vedi in fondo.
 * ---------------------------------------------------------------------------
 */

/* contatori */
.hi-custom-counter {
  display: flex;
  flex-direction: row;
  align-items: flex-end;

  /* nowrap: valore e titolo non si separano mai. Lo sbordo NON si evita qui,
	   si evita col corpo del valore (vedi nota in fondo). */
  flex-wrap: nowrap;
  gap: 8px;
}

.hi-custom-counter .w-counter-value,
.hi-custom-counter .w-counter-title {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Il titolo e' `span.w-counter-title`, fratello di `.w-counter-value`: qui il
   font tocca solo l'etichetta (l'unita' di misura), il valore resta nel font
   del tema. Se un giorno servisse anche sul numero, la regola andrebbe su
   `.w-counter-value` e non sui suoi span, perche' il `::before` piu' in basso
   riserva la larghezza e va misurato nello stesso font delle cifre visibili.
   Dopo IBM Plex Mono ci sono i monospace di sistema come ripiego: il font non
   viene registrato qui, va aggiunto tra quelli del tema. */
.hi-custom-counter .w-counter-title {
  margin: 0;
  line-height: 1;
  font-family: var(--font-family, sans-serif);
}

/* Rende il contatore un container di query, cioe' la misura di riferimento per
   le unita' cqi usate dal corpo del valore. Il contatore e' un blocco che
   riempie la colonna, quindi 100cqi = larghezza della colonna.
   ATTENZIONE: `container-type: inline-size` applica il contenimento della
   larghezza. Se il contatore risultasse collassato o invisibile, significa che
   Impreza lo rende un elemento dimensionato dal contenuto: in quel caso
   togliere questa regola e usare il ripiego in fondo. */
@supports (font-size: 1cqi) {
  .hi-custom-counter {
    container-type: inline-size;
  }
}

/* conteggio senza scatto: riserva la larghezza del valore finale.
   aria-label lo contiene già, scritto da Impreza. height:0 = larghezza sì, altezza no.

   DA VERIFICARE: se `aria-label` contenesse anche il suffisso (es. "1,407 Mld €"
   invece di "1407"), qui verrebbe riservata la larghezza di TUTTA quella stringa
   al corpo grande del valore, molto piu' del necessario, e sarebbe una seconda
   causa di sbordo indipendente dal font. Controllo: ispezionare .w-counter-value
   e leggere cosa c'e' dentro aria-label. */
.hi-custom-counter .w-counter-value::before {
  content: attr(aria-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================================
 * IL CORPO DEL VALORE - DA IMPOSTARE NEL BUILDER
 *
 * Sostituire nel campo Font size dell'elemento:
 *     da   clamp(34px, 3.4vw, 58px)      <- scala col viewport
 *     a    clamp(34px, 24cqi, 58px)      <- scala con la colonna
 *
 * Minimo e massimo restano i tuoi, quindi dove oggi funziona non cambia nulla:
 * cambia solo il comportamento nella fascia intermedia, dove prima sbordava.
 *
 * COME SI TARA IL 24
 * Il vincolo e':  larghezza(numero) + gap + larghezza(titolo) <= colonna
 * Misurando in devtools sul contatore piu' largo ("1,407"):
 *   - larghezza del numero diviso il suo font-size -> quante "em" occupa
 *     (con 5 caratteri sta intorno a 2,6em)
 *   - larghezza del titolo "Mld EUR" + gli 8px di gap -> lo spazio fisso
 * Da cui:  cqi = (100 - spazio_fisso/colonna * 100) / em_del_numero
 * Con colonna ~195px, titolo+gap ~60px e 2,6em -> circa 26cqi.
 * 24 e' preso volutamente un po' sotto, come margine. Se il numero risulta
 * troppo piccolo alzalo di 2 alla volta e ricontrolla la larghezza peggiore.
 *
 * ATTENZIONE AL MINIMO
 * Sotto una certa larghezza vince il minimo di 34px e lo sbordo torna: con
 * 2,6em e 60px fissi servono almeno ~148px di colonna. Piu' stretto di cosi'
 * Impreza impila le colonne a tutta larghezza, quindi il caso non si presenta.
 * Da verificare alla larghezza in cui le colonne sono ancora tre e piu' strette.
 *
 * RIPIEGO SENZA CONTAINER QUERIES
 * Se `container-type` dovesse dare problemi, si resta su vw abbassando il
 * MASSIMO fino al valore che ci sta quando la colonna smette di crescere:
 *     clamp(34px, 3.4vw, 41px)
 * dove 41px = 3,4% della larghezza massima del contenitore (1200px -> 40,8px;
 * da correggere con la misura reale del contenitore del sito).
 * Risolve la finestra larga, non le larghezze intermedie: rimedio piu' grezzo
 * ma senza alcuna dipendenza da feature nuove.
 * ============================================================================ */

/* ==== image-circle-hole ==== */
/* ============================================================================
 * Element:     Immagine tonda col buco
 * Class:       .hi-image-circle-hole
 * Description: L'immagine diventa un cerchio con un foro al centro - una ciambella - e dal foro si vede lo sfondo della sezione. Il foro ha la stessa misura del disco di counter-in-image-circle.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-image-circle-hole` nel campo Extra class
 *            (US Builder) di UNO di questi due:
 *
 *            a) il singolo elemento Image  -> riguarda solo quella;
 *            b) la Row / il Wrapper che le contiene
 *               -> tutte le immagini dentro diventano ciambelle.
 *
 * Rimozione: cancellare questo file = l'immagine torna rettangolare e piena.
 *
 * ---------------------------------------------------------------------------
 * PARENTE DI counter-in-image-circle, MA CON UNO STRATO SOLO
 * Li' il cerchio e' fatto di tre strati: la foto, un disco semitrasparente
 * sopra e i testi dentro il disco. Qui gli strati sono uno: il centro non e'
 * COPERTO, e' TOLTO. Non c'e' niente sopra la foto, quindi niente velo, niente
 * `backdrop-filter` e nessuna delle precauzioni che li' servono a farlo
 * funzionare (backdrop root, centratura senza transform).
 *
 * Il ritaglio tondo e la misura del foro sono pero' gli stessi: i due elementi
 * finiscono nella stessa fila e devono leggersi come una famiglia.
 *
 * Manca solo il filo di luce sul bordo (`--hi-cic-ring`): li' lo disegna uno
 * pseudo-elemento del wrapper, qui la classe puo' stare direttamente
 * sull'`<img>`, che pseudo-elementi non ne ha. Se servisse, va messo su un
 * contenitore, non su questo file.
 *
 * ---------------------------------------------------------------------------
 * IL BUCO E' UNA MASCHERA, NON UN DISCO DI COLORE SOPRA
 * Un cerchio del colore della sezione sopra la foto sembrerebbe un buco solo
 * finche' dietro c'e' una tinta piatta: su un gradiente, su un'immagine di
 * fondo o a cavallo del confine fra due sezioni diventa una toppa visibile, e
 * va ritinteggiato ogni volta che cambia lo sfondo. `mask-image` invece
 * toglie davvero i pixel, quindi dal foro passa QUALSIASI cosa ci sia dietro,
 * per sempre e senza taratura.
 *
 * Il prezzo e' che senza `mask-image` non c'e' ripiego possibile: resta il
 * cerchio pieno, senza foro. E' un mancato ornamento, non un difetto di
 * lettura, e riguarda solo browser precedenti a Safari 15.4 / Chrome 120 per
 * la sintassi non prefissata (il `-webkit-` qui sotto copre i WebKit vecchi).
 *
 * ---------------------------------------------------------------------------
 * LA MISURA DEL FORO E' UN DIAMETRO, COME NEL CONTATORE
 * `--hi-ich-hole` e' il DIAMETRO del foro in percentuale del diametro del
 * cerchio: 42%, lo stesso numero di `--hi-cic-disc` e della `.ring-content`
 * del mockup (demo1.hidoly.dev/cva-proposta-1-B). I due elementi si tarano
 * cosi' con lo stesso valore e restano confrontabili a occhio.
 *
 * Il gradiente pero' ragiona in RAGGI. Da qui il `/ 2`: un'ellisse di raggi
 * `21% 21%` - percentuali della larghezza e dell'altezza del riquadro, che qui
 * e' quadrato - e' un foro largo il 42%. Scrivere il diametro e dividerlo
 * serve a far valere la leva anche quando NON le si passa una percentuale:
 * `--hi-ich-hole: 140px` da' un foro di 140px, non di 280.
 *
 * Si poteva fare piu' corto con `circle closest-side`, dove su un riquadro
 * quadrato la percentuale del gradiente coincide per caso col diametro del
 * foro. E' la coincidenza il problema: vale solo per le percentuali e solo
 * finche' il riquadro e' quadrato, e chi ci scrivesse `140px` otterrebbe un
 * foro di 280 senza capire perche'.
 *
 * `--hi-ich-hole: 0` e' il caso limite e si comporta bene: gradiente di raggio
 * nullo, nessun foro, cerchio pieno.
 *
 * ---------------------------------------------------------------------------
 * IL MINIMO CHE C'E' NEL CONTATORE QUI NON SERVE
 * Nel contatore il disco e' `max(42%, max(3.2em, 140px))`: il minimo esiste
 * solo perche' dentro il disco ci sta del testo che, per scelta, non
 * rimpicciolisce. Qui dentro non c'e' niente, quindi il foro e' il 42% a
 * qualunque misura - che e' anche il motivo per cui e' questo il file "pulito"
 * dei due.
 *
 * Da sapere se i due elementi stanno nella STESSA FILA: sotto un certo
 * diametro il disco del contatore si gonfia oltre il 42% mentre la ciambella
 * resta al 42%, e i due centri smettono di somigliarsi. La soglia dipende dal
 * corpo del contatore impostato nel builder, perche' il minimo e' in `em`: con
 * un numero da 58px, 3.2em fanno ~186px, cioe' il 42% di un cerchio da ~440px.
 * Se serve che coincidano si alza `--hi-ich-hole` dal campo CSS del builder
 * fino a pareggiarli; non si abbassa il minimo del contatore, che li' tiene
 * dentro il testo.
 *
 * ---------------------------------------------------------------------------
 * DAL FORO SI VEDE LO SFONDO, NON IL BIANCO
 * Attraverso il foro passa cio' che sta DIETRO l'immagine. Se il contenitore
 * ha un fondo suo - il builder lo sa mettere sull'elemento Image, e il tema lo
 * mette su `.w-image-h` quando c'e' una cornice - si vedra' quello e il foro
 * sembrera' pieno: va tolto li', non qui.
 *
 * ---------------------------------------------------------------------------
 * PERCHE' LA CLASSE E' SCRITTA DUE VOLTE
 * Il CSS del plugin viene accodato PRIMA dei <style> generati dal builder
 * (`us-design-options-css`), quindi a parita' di specificita' vincerebbe il
 * builder - che sull'elemento Image sa scrivere proprio `border-radius` e
 * dimensioni. La classe ripetuta porta la specificita' a (0,2,x) e chiude la
 * questione senza `!important`.
 * ============================================================================ */

/* ---- I DUE VALORI CHE FINISCONO DENTRO IL GRADIENTE ----
   Registrarli serve a una cosa sola: rendere innocuo l'errore di unita'. Nel
   `calc()` della maschera una percentuale meno un NUMERO non e' un'operazione
   valida, quindi basta scrivere `--hi-ich-feather: 0` invece di `0%` per
   invalidare l'INTERA `mask-image` e ritrovarsi col cerchio pieno: niente foro
   e niente errore che lo spieghi. Con `@property` un valore del tipo sbagliato
   viene ignorato e resta quello di partenza - si perde la modifica, non
   l'effetto.
   I valori iniziali sono ripetuti fra le leve qui sotto, che e' dove si va a
   cercarli e a cambiarli: qui contano il TIPO e il ripiego.
   Prima di Safari 16.4 / Firefox 128 la regola viene saltata e la trappola
   torna: l'unita' va scritta comunque. */

@property --hi-ich-hole {
	syntax: "<length-percentage>";
	inherits: true;
	initial-value: 42%;
}

@property --hi-ich-feather {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 1%;
}

.hi-image-circle-hole {

	/* ---- LEVE DI TARATURA ----
	   Si possono sovrascrivere per singolo blocco dal campo CSS del builder. */

	/* Diametro massimo del cerchio. 100% = tutta la colonna. */
	--hi-ich-size: 100%;

	/* Diametro del foro, in percentuale del diametro del cerchio.
	   42% e' il valore del mockup, lo stesso di `--hi-cic-disc`. */
	--hi-ich-hole: 42%;

	/* Morbidezza del bordo del foro, in percentuale del suo raggio - la stessa
	   unita' di `--hi-cic-feather`.
	   1% e' meno di un pixel su un cerchio da 400 e non si vede: serve solo a
	   togliere la scalettatura che un gradiente con stacco netto lascia sulle
	   curve. A `0%` - con il segno di percentuale, vedi sopra - il bordo e'
	   netto ma seghettato; da ~8% in su il foro comincia a sfumare davvero e la
	   ciambella perde il contorno. */
	--hi-ich-feather: 1%;

	/* Parte dell'immagine che sopravvive al ritaglio quadrato. */
	--hi-ich-crop: center;
}

/* ---- IL CERCHIO COL FORO ----
   Due selettori perche' la classe puo' stare sul contenitore (tutte le
   immagini dentro) o direttamente sull'immagine (solo quella). */

.hi-image-circle-hole.hi-image-circle-hole img,
img.hi-image-circle-hole.hi-image-circle-hole {

	/* Il quadrato che contiene il cerchio. `height`/`max-height` vanno
	   riscritti: il tema li mette a `inherit` sulle immagini, e con un valore
	   ereditato l'`aspect-ratio` non ha voce in capitolo. */
	display: block;
	width: 100%;
	max-width: var(--hi-ich-size, 100%);
	height: auto;
	max-height: none;
	margin-inline: auto;
	aspect-ratio: 1 / 1;

	/* La foto riempie il quadrato senza deformarsi. */
	object-fit: cover;
	object-position: var(--hi-ich-crop, center);

	/* Il bordo esterno: tondo per `border-radius`, non per maschera, perche'
	   qui il bordo lo disegna il browser e viene levigato: un gradiente
	   allo stesso posto arriverebbe seghettato. */
	border-radius: 50%;

	/* Il foro. Fuori dall'ultima fermata il colore continua, quindi tutto cio'
	   che sta oltre il raggio del gradiente resta opaco: la maschera agisce
	   solo al centro. */
	-webkit-mask-image: radial-gradient(ellipse calc(var(--hi-ich-hole, 42%) / 2) calc(var(--hi-ich-hole, 42%) / 2),
			transparent calc(100% - var(--hi-ich-feather, 1%)),
			#000 100%);
	mask-image: radial-gradient(ellipse calc(var(--hi-ich-hole, 42%) / 2) calc(var(--hi-ich-hole, 42%) / 2),
			transparent calc(100% - var(--hi-ich-feather, 1%)),
			#000 100%);
}

/* ==== image-grayscale-hover ==== */
/* ============================================================================
 * Element:     Immagine in grigio che riprende colore in hover
 * Class:       .hi-image-grayscale-hover
 * Description: Le immagini diventano grigie e sbiadite; quella puntata dal mouse riprende il colore pieno. Pensata per la fila di loghi di "Riconoscimenti e certificazioni".
 * ============================================================================
 *
 * Uso      : aggiungere `hi-image-grayscale-hover` nel campo Extra class
 *            (US Builder) di UNO di questi due:
 *
 *            a) la Row / il Wrapper che contiene tutti i loghi
 *               -> tutte le immagini dentro diventano grigie, e riprende il
 *                  colore SOLO quella puntata, una per volta (e' il caso dei
 *                  riconoscimenti);
 *
 *            b) il singolo elemento Image
 *               -> riguarda solo quella.
 *
 *            In entrambi i casi l'unita' che risponde al mouse e' l'immagine,
 *            non il contenitore: puntare il bordo della riga non accende nulla.
 *
 * Rimozione: cancellare questo file = i loghi tornano a colori pieni.
 *
 * ---------------------------------------------------------------------------
 * RIFERIMENTO
 * L'effetto e' quello del mockup demo1.hidoly.dev/cva-proposta-1-B/gruppo.html
 * (`css/gruppo.css`, `.award-cell img`), da cui sono presi i valori di
 * partenza: grigio pieno, opacita' .55, transizione .4s.
 *
 * Nel mockup i due filtri sono `grayscale(1) opacity(.55)`: l'opacita' e' una
 * funzione di `filter` e non la proprieta' `opacity`, cosi' l'intero effetto
 * sta in una sola proprieta' e la transizione ne anima una sola. Da tenere,
 * anche perche' `opacity` creerebbe un contesto di composizione che puo'
 * disturbare eventuali strati sovrapposti.
 *
 * ---------------------------------------------------------------------------
 * SOLO <img>, NON GLI SFONDI CSS
 * La regola agisce sugli `<img>` — cioe' sull'elemento Image di Impreza. Un
 * logo messo come background di un box NON viene toccato: `filter` su quel box
 * ingrigirebbe anche il testo che contiene, che non e' cio' che si vuole.
 * Se servisse, va messa la classe su un elemento che contiene SOLO lo sfondo.
 *
 * ---------------------------------------------------------------------------
 * PERCHE' LA CLASSE E' SCRITTA DUE VOLTE
 * Il CSS del plugin viene accodato PRIMA dei <style> generati dal builder
 * (`us-design-options-css`), quindi a parita' di specificita' vincerebbe il
 * builder — che sull'elemento Image sa scrivere proprio dei filtri. La classe
 * ripetuta porta la specificita' a (0,2,x) e chiude la questione senza
 * `!important`.
 *
 * PERCHE' LE REGOLE DEL COLORE SONO TRE E NON UNA
 * Un selettore non riconosciuto invalida l'INTERA regola in cui si trova, non
 * solo se stesso. `:has()` e `:focus-visible` stanno quindi in regole separate:
 * su un browser che non li conosce si perde il loro pezzo di effetto, non
 * l'hover di base.
 * ============================================================================ */

.hi-image-grayscale-hover {

	/* ---- LEVE DI TARATURA ----
	   Si possono sovrascrivere per singolo blocco dal campo CSS del builder. */

	/* Quanto grigio: 1 = nessun colore, 0 = immagine intatta. */
	--hi-igh-gray: 1;

	/* Quanto resta visibile da spenta. Piu' basso = loghi piu' discreti, ma
	   sotto ~.35 su fondo bianco un logo chiaro sparisce del tutto. */
	--hi-igh-opacity: .55;

	/* Durata del passaggio grigio <-> colore. */
	--hi-igh-duration: .4s;
	--hi-igh-easing: ease;
}

/* ---- STATO A RIPOSO ----
   Due selettori perche' la classe puo' stare sul contenitore (primo caso) o
   direttamente sull'immagine (secondo). */

.hi-image-grayscale-hover.hi-image-grayscale-hover img,
img.hi-image-grayscale-hover.hi-image-grayscale-hover {
	filter: grayscale(var(--hi-igh-gray, 1)) opacity(var(--hi-igh-opacity, .55));
	transition: filter var(--hi-igh-duration, .4s) var(--hi-igh-easing, ease);
}

/* ---- IL COLORE TORNA SULL'IMMAGINE PUNTATA ---- */

.hi-image-grayscale-hover.hi-image-grayscale-hover img:hover,
img.hi-image-grayscale-hover.hi-image-grayscale-hover:hover {
	filter: grayscale(0) opacity(1);
}

/* La scatola che contiene l'immagine conta come immagine: nel markup di
   Impreza l'`<img>` sta dentro `.w-image-h`, spesso dentro un `<a>`, e quei
   contenitori hanno un po' di aria intorno. Senza questa regola il colore si
   accende e si spegne mentre il mouse attraversa quel bordo.
   `:has(> img)` = "l'antenato piu' vicino che contiene DIRETTAMENTE
   un'immagine": si ferma li' e non risale mai al contenitore di tutti i loghi,
   quindi le altre immagini restano grigie. */
.hi-image-grayscale-hover.hi-image-grayscale-hover :has(> img):hover img,
.hi-image-grayscale-hover.hi-image-grayscale-hover:has(> img):hover > img {
	filter: grayscale(0) opacity(1);
}

/* Da tastiera: se il logo e' un link, il colore torna quando il link prende il
   fuoco. Senza questa regola l'effetto esisterebbe solo per chi usa il mouse. */
.hi-image-grayscale-hover.hi-image-grayscale-hover a:focus-visible img,
a.hi-image-grayscale-hover.hi-image-grayscale-hover:focus-visible img {
	filter: grayscale(0) opacity(1);
}

/* Chi ha chiesto meno animazioni vede comunque l'effetto, ma senza la
   dissolvenza: il cambio e' immediato. La regola in base.css non arriva qui,
   copre le sole classi `hi-cva-*`. */
@media (prefers-reduced-motion: reduce) {

	.hi-image-grayscale-hover.hi-image-grayscale-hover img,
	img.hi-image-grayscale-hover.hi-image-grayscale-hover {
		transition-duration: 1ms;
	}
}

/* ==== number-image-zeros ==== */
/* ============================================================================
 * Element:     Numero con gli zeri fotografici
 * Class:       .hi-number-image-zeros
 * Description: Il "100%" in cui gli zeri sono due immagini tonde: la cifra viene portata esattamente all'altezza delle immagini, e la fila resta su una riga sola.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-number-image-zeros` nel campo Extra class (US
 *            Builder) dell'Horizontal Wrapper che contiene, in quest'ordine:
 *
 *              .hi-number-image-zeros        (.w-hwrapper, allineamento Top)
 *              |- .vc_custom_heading         la cifra "1"
 *              |- .w-image.hi-image-circle-hole
 *              |- .w-image.hi-image-circle-hole
 *              +- .vc_custom_heading         il "%"
 *
 *            SERVE ANCHE UNA MANO NEL BUILDER: nelle Design Options della
 *            cifra vanno SVUOTATI `Font size` e `Line height`. Il builder li
 *            scrive con `!important` e vincerebbero su questo file, che
 *            verrebbe ignorato in silenzio. Tutto il resto - colore,
 *            `letter-spacing`, `font-weight` - resta suo.
 *
 * Rimozione: cancellare questo file = le immagini tornano a prendersi lo
 *            spazio che avanza e la cifra torna alla misura del builder (che
 *            pero' a quel punto e' vuota: vanno rimessi corpo e interlinea).
 *
 * ---------------------------------------------------------------------------
 * IL CORPO DEL CARATTERE NON E' L'ALTEZZA DELLA CIFRA
 * E' il punto di tutto il file. In Montserrat la cifra e' alta 0,700 volte il
 * corpo - misurato sulla pagina, identico a ogni larghezza - quindi per averla
 * alta quanto un cerchio di diametro D il corpo deve essere D / 0,700.
 * Scrivere `font-size: D` la farebbe alta 0,7 D.
 *
 * E LA SCATOLA NON E' LA CIFRA
 * La riga di testo e' alta quanto l'interlinea, e la cifra ci galleggia dentro
 * secondo le metriche del font: non basta allineare le scatole in alto perche'
 * le cifre si allineino. Con `line-height` pari al 0,700 la scatola viene alta
 * esattamente quanto la cifra, e resta un solo scarto, sempre lo stesso:
 *
 *     scarto = (ascender - descender - altezza cifra) / 2
 *
 * che il margine negativo qui sotto toglie. Essendo in `em` si adatta da solo
 * a qualunque corpo. Verificato sui pixel di uno screenshot, non solo con la
 * formula: cifra e cerchi coincidono entro 1px da 320 a 1920.
 *
 * SE CAMBIA IL FONT DELLA CIFRA, LE DUE COSTANTI VANNO RIMISURATE
 * Oggi la cifra e' Montserrat: lo stile inline dell'elemento dice "Abril
 * Fatface" ma non ha effetto, perche' le Design Options impongono
 * `font-family: var(--font-family)!important` e l'`!important` batte l'inline.
 * (Il "%" quell'override non ce l'ha, quindi lui e' davvero Abril Fatface.)
 * Si rimisurano in console, sull'elemento della cifra:
 *
 *     const c = getComputedStyle($0), px = parseFloat(c.fontSize);
 *     const x = document.createElement('canvas').getContext('2d');
 *     x.font = c.fontWeight + ' ' + c.fontSize + ' ' + c.fontFamily;
 *     const m = x.measureText('1');
 *     m.actualBoundingBoxAscent / px                                  // --cap
 *     (m.fontBoundingBoxAscent - m.fontBoundingBoxDescent) / px       // --asc-desc
 *
 * ---------------------------------------------------------------------------
 * PERCHE' ALLE IMMAGINI SERVE UNA MISURA ESPLICITA
 * Senza questo file le immagini non hanno una larghezza propria: sono l'avanzo
 * di una riga flex piena al pixel. A 1440 erano 151,4 (la cifra) + 293,6 +
 * 293,6 + 46,8 (il "%") + 3 spazi da 1rem = 836,4 su una riga da 836,3. Quindi
 * cifra e cerchi sono legati: ogni pixel tolto all'una lo prendono gli altri,
 * ed era questo a far ballare il rapporto fra i due da +9% a +47% a seconda
 * della larghezza dello schermo.
 *
 * Da un flex non si torna indietro: `font-size` non sa leggere una larghezza
 * decisa dal layout. Quindi una delle due misure deve essere assoluta, ed e'
 * il diametro - come nel mockup, che gli anelli li dimensiona in `clamp`.
 *
 * QUANTO PUO' ESSERE GRANDE IL DIAMETRO
 * Tutto quello che sta sulla riga, in funzione del diametro D:
 *
 *     riga = 0,4171 D  +  2 D  +  larghezza del "%"  +  3 spazi
 *            \______/
 *          la cifra: 0,292 em di avanzo (compreso il letter-spacing
 *          del builder) su un corpo che vale D / 0,700
 *
 * da cui  D massimo = (riga - "%" - 3 spazi) / 2,4171. Misurato:
 *
 *     1920 -> 299    1280 -> 286    900 -> 193    600 -> 196    360 ->  97
 *     1440 -> 306    1024 -> 225    768 -> 157    480 -> 146    320 ->  80
 *
 * Il punto stretto e' 768: la colonna e' ancora 8/12 ma larga 455px. Sotto i
 * 768 la colonna diventa piena e lo spazio raddoppia di colpo - da cui le due
 * formule qui sotto, e il salto di misura al breakpoint, che quella colonna ha
 * gia' oggi.
 *
 * A 1440 il risultato e' cerchi e cifra a 274px: prima erano cerchi 294 e
 * cifra 363. Tenere la cifra a 363 e' possibile solo su una riga piu' larga -
 * servirebbero ~975px, cioe' una riga a piena larghezza invece della colonna.
 * ============================================================================ */

.hi-number-image-zeros {

	/* ---- LEVE DI TARATURA ---- */

	/* Diametro dei cerchi, che e' anche l'altezza della cifra: e' LA misura,
	   tutto il resto si ricava da qui. Sotto i 768 la colonna e' piena e la
	   parte fissa della riga (il "%" e i tre spazi, ~84px) pesa troppo perche'
	   una percentuale del viewport la insegua da sola: da li' la sottrazione.
	   Provate a 320, 360, 390, 480, 600, 767: avanzano 5-14px. */
	--hi-niz-d: calc(41vw - 56px);

	/* Metriche del font della cifra (Montserrat), in em. Vanno insieme al
	   font: se cambia lui, si rimisurano entrambe - vedi la nota in testa. */
	--hi-niz-cap: .7;        /* altezza della cifra            */
	--hi-niz-asc-desc: .717; /* ascender meno descender        */
}

/* Da 768 in su comanda la colonna 8/12, e il massimo che ci sta e' il 20,5%
   del viewport: 19vw lascia il margine di sicurezza. Il tetto a 290px e' per
   gli schermi larghi, dove il contenitore smette di crescere e continuare a
   seguire il viewport farebbe sbordare. */
@media (min-width: 768px) {

	.hi-number-image-zeros {
		--hi-niz-d: min(19vw, 290px);
	}
}

/* ---- LA RIGA ----
   Doppio selettore: la classe puo' stare sul wrapper stesso o su un
   contenitore piu' esterno, a seconda di dove il builder la deposita. */

.hi-number-image-zeros.w-hwrapper,
.hi-number-image-zeros .w-hwrapper {
	/* Detto qui e non lasciato al tema: che i quattro pezzi stiano su una riga
	   sola e' un requisito dell'elemento, non una preferenza. */
	flex-wrap: nowrap;
}

/* ---- I DUE ZERI ----
   `flex: 0 1 auto` e non `0 0 auto`: dove la misura ci sta il risultato e'
   identico, ma se un domani cambia il corpo del "%" o un padding, le immagini
   si stringono come facevano prima invece di uscire dalla colonna. Si perde
   l'allineamento, non il layout. */

.hi-number-image-zeros.w-hwrapper > .w-image,
.hi-number-image-zeros .w-hwrapper > .w-image {
	flex: 0 1 auto;
	width: var(--hi-niz-d);
}

/* ---- LA CIFRA ----
   E' il primo elemento della riga; il "%" e' l'ultimo ed e' dello stesso tipo,
   per questo si distinguono per posizione. Se l'ordine cambia, cambia qui. */

.hi-number-image-zeros.w-hwrapper > .vc_custom_heading:first-child,
.hi-number-image-zeros .w-hwrapper > .vc_custom_heading:first-child {
	flex: 0 1 auto;

	/* il corpo che porta la CIFRA - non la scatola - a var(--hi-niz-d) */
	font-size: calc(var(--hi-niz-d) / var(--hi-niz-cap));

	/* la scatola alta quanto la cifra */
	line-height: var(--hi-niz-cap);

	/* ...e la cifra portata sul bordo della scatola */
	margin-top: calc((var(--hi-niz-cap) - var(--hi-niz-asc-desc)) / 2 * 1em);
}

/* ==== row-half-bleed ==== */
/* ============================================================================
 * Element:     Riga a vivo da un lato
 * Class:       .hi-row-half-bleed
 * Description: Riga a due colonne in cui una sola arriva al bordo dello schermo: l'altra resta allineata alla griglia del sito, come in tutte le righe normali.
 * ============================================================================
 *
 * Uso      : Row a DUE colonne, con la classe nel campo Extra class (US Builder).
 *            L'immagine va nella colonna che deve uscire:
 *
 *              hi-row-half-bleed
 *                  esce l'ULTIMA colonna, verso destra
 *              hi-row-half-bleed hi-row-half-bleed--left
 *                  esce la PRIMA colonna, verso sinistra
 *
 *            Content width della riga: "Default" (va bene anche "Full width
 *            with indents"), NON "Full width" - e' la condizione che fa
 *            funzionare tutto il resto, il perche' e' qui sotto.
 *
 * Rimozione: cancellare questo file = la riga torna una riga normale, con
 *            l'immagine che si ferma al bordo del contenitore.
 *
 * ---------------------------------------------------------------------------
 * NON SI PARTE DA UNA RIGA FULL WIDTH: SI PARTE DA UNA RIGA NORMALE
 * L'istinto e' mettere la riga a tutta larghezza e poi stringerla dal lato del
 * testo. Il conto pero' non torna quasi mai, perche' il rientro del sito non e'
 * un numero solo: fino a 1280px e' il padding del tema (6vw, 2.4rem, 2rem,
 * 1.2rem a seconda del breakpoint), oltre e' meta' dello spazio che avanza
 * attorno al contenitore. E su una riga full width il tema azzera
 * `--padding-inline`, quindi quel numero da dentro la riga non e' nemmeno
 * leggibile: andrebbe riscritto a mano qui, e ricopiato ogni volta che
 * qualcuno tocca Theme Options.
 *
 * Al contrario non serve niente: `<section class="l-section">` e' SEMPRE larga
 * quanto la pagina, anche a larghezza "Default". A rientrare e' solo il suo
 * contenuto (`.l-section-h`). Quindi lo sfondo della riga resta a tutto
 * schermo comunque, e la colonna del testo la impagina il tema insieme a tutte
 * le altre righe del sito - stessi margini, stessa larghezza, stessi
 * breakpoint, per sempre e senza taratura.
 *
 * Resta da fare una cosa sola: far uscire l'altra colonna.
 *
 * ---------------------------------------------------------------------------
 * --margin-inline-stretch: LA DISTANZA DAL BORDO, GIA' CALCOLATA DAL TEMA
 * Impreza tiene su ogni `.l-section` la variabile
 *
 *     --margin-inline-stretch: min(
 *         var(--site-content-width) / 2 + var(--header-width) / 2
 *             + var(--site-outline-width) - 50vw,
 *         var(--padding-inline) * -1
 *     )
 *
 * cioe' esattamente il margine negativo che porta dal bordo del contenitore al
 * bordo dello schermo: meta' spazio avanzato sui monitor larghi, il padding
 * del tema quando lo spazio finisce. E' la stessa leva che il tema usa per
 * `.alignfull` e per l'opzione Stretch delle colonne. Usandola, i quattro
 * valori dei breakpoint non compaiono in questo file: se cambiano in Theme
 * Options, cambia anche l'effetto.
 *
 * Il margine negativo da solo non basta: su un flex container libera spazio
 * invece di allargare la colonna, che resta al suo 50%. Serve `flex-grow: 1`
 * perche' se lo riprenda - stessa coppia che il tema usa su `.stretched`.
 *
 * I padding interni si annullano da soli: la colonna esce di --margin-inline-
 * stretch e il contenuto rientra del gap, quindi il bordo dell'immagine cade
 * sul bordo dello schermo qualunque sia il gap impostato sulla riga.
 *
 * ---------------------------------------------------------------------------
 * SUI MONITOR LARGHI L'IMMAGINE SBORDA DI MEZZA SCROLLBAR, ED E' GIUSTO COSI'
 * Nel ramo largo la formula del tema misura con `50vw`, che comprende la
 * scrollbar: l'immagine esce di ~7px oltre il bordo utile. Non si vede e non
 * fa scorrere niente, perche' `body` ha `overflow-x: hidden`: quei pixel
 * vengono tagliati. Il verso e' quello giusto - meglio sbordare di 7px che
 * fermarsi 7px prima lasciando una riga di sfondo lungo il bordo. Dove la
 * scrollbar e' in sovrimpressione (macOS, mobile) l'errore e' zero.
 *
 * ---------------------------------------------------------------------------
 * COLONNE IMPILATE: SOTTO I 768px L'IMMAGINE ESCE DA TUTTI E DUE I LATI
 * Sotto i 768px Impreza mette le colonne una sotto l'altra (la soglia e' la
 * sua, `.g-cols.stacking_default` nel CSS generato in pagina, e va tenuta
 * uguale: e' l'unico numero di questo file che non arriva da una variabile).
 * Li' "uscire da un lato" non vuol dire piu' niente - la colonna dell'immagine
 * e' larga quanto la riga - e la si porta a vivo da entrambi i lati. Il testo
 * resta dov'e', con i rientri del sito.
 *
 * ---------------------------------------------------------------------------
 * IMPILATE, LA RIGA DEVE TORNARE A RESPIRARE
 * Una riga cosi' nasce senza spazi verticali - Height "Auto", padding a zero -
 * perche' in orizzontale e' l'IMMAGINE a fare da blocco: riempie l'altezza da
 * bordo a bordo e il testo le sta accanto, centrato, con tutta l'aria che
 * serve. Impilate, quel motivo sparisce: l'immagine scende sotto e il testo
 * resta incollato al bordo di sopra, contro la riga precedente.
 *
 * Sotto i 768px la riga si riprende quindi il passo verticale delle altre:
 * `--section-custom-padding`, la stessa variabile che il tema usa per le righe
 * Height "Custom" - cioe' quasi tutte, in questo sito - dichiarata una volta
 * sola insieme a `--site-content-width`. Di nuovo: nessun numero qui dentro.
 *
 * La regola ha di proposito UNA sola classe di specificita': qualunque Height
 * scelto nel builder (`.l-section.height_medium` e compagni, 0,2,0) la batte,
 * e cosi' pure un padding messo da Design Options. Non decide niente, riempie
 * un vuoto - quello di Height "Auto", che una regola di padding non ce l'ha.
 * Per toglierla su una riga basta il campo CSS del builder:
 *
 *     --hi-rhb-stack-padding: 0;      niente aria sopra e sotto
 *     padding-bottom: 0;              immagine attaccata alla riga seguente
 *
 * ---------------------------------------------------------------------------
 * LE TRE LARGHEZZE DI RIGA DEL BUILDER, E PERCHE' NE VANNO BENE DUE
 * "Default" e "Full width with indents" portano allo stesso posto: la seconda
 * toglie il tetto al contenitore, e la regola qui sotto glielo rimette. Sono
 * due nomi per la stessa riga, e chi sceglie il secondo pensando di dover
 * partire da una riga a tutta larghezza ottiene comunque il risultato giusto.
 *
 * "Full width" no: li' il tema azzera `--padding-inline`, e con quello a zero
 * sotto i 1280px il testo finisce contro il bordo dello schermo - il rientro
 * del sito non esiste piu' e non c'e' modo di ricavarlo da dentro la riga.
 * Sopra i 1280px l'allineamento tornerebbe (decide il contenitore, non il
 * padding), quindi e' un errore che si vede solo rimpicciolendo la finestra:
 * vale la pena controllare la voce Content width prima di dire che non va.
 *
 * ---------------------------------------------------------------------------
 * PERCHE' IL PADDING DELLA RIGA E' RIMESSO CON !important
 * Una riga nata full width si porta dietro, dalle Design Options, un
 * `padding-left/right: 0` - a tutta larghezza ci sta, a larghezza Default
 * spinge il testo contro il bordo dello schermo sotto i 1280px. Le Design
 * Options sono `!important`, quindi l'unico modo di rimettere il rientro del
 * tema e' `!important` su una specificita' piu' alta della loro (0,2,0 contro
 * 0,1,0). E' l'eccezione alla regola del plugin - qui si vince per cascata,
 * senza `!important` - e vale perche' quel rientro NON e' decorazione: e' la
 * misura che tiene il testo in griglia, cioe' il senso stesso della classe.
 * Se su una riga serve davvero un padding orizzontale diverso, si mette da
 * Design Options con un valore: e' solo lo zero a essere incompatibile.
 * ============================================================================ */

/* ---- La riga tiene i rientri del sito (lo sfondo resta a tutto schermo) ---- */

.l-section.hi-row-half-bleed {
	padding-left: var(--padding-inline, 2.5rem) !important;
	padding-right: var(--padding-inline, 2.5rem) !important;
}

/* Il contenuto della riga sta nel contenitore del sito come in ogni altra riga.
   Serve solo a chi ha scelto "Full width with indents": li' il tema toglie il
   tetto, e senza tetto la colonna del testo non sarebbe in griglia. Su una riga
   "Default" e' il valore che c'e' gia'. */

.l-section.hi-row-half-bleed > .l-section-h {
	max-width: var(--site-content-width, 1280px) !important;
}

/* ---- La colonna che esce si riprende lo spazio del margine negativo ---- */

.hi-row-half-bleed:not(.hi-row-half-bleed--left) > .l-section-h > .g-cols > .wpb_column:last-child,
.hi-row-half-bleed--left > .l-section-h > .g-cols > .wpb_column:first-child {
	flex-grow: 1;
}

.hi-row-half-bleed:not(.hi-row-half-bleed--left) > .l-section-h > .g-cols > .wpb_column:last-child {
	margin-inline-end: var(--margin-inline-stretch);
}

.hi-row-half-bleed--left > .l-section-h > .g-cols > .wpb_column:first-child {
	margin-inline-start: var(--margin-inline-stretch);
}

/* ---- L'immagine riempie la colonna anche quando e' piu' larga del file ----
   Senza questo un file da 1024px si ferma a 1024px e lascia lo sfondo scoperto
   lungo il bordo dei monitor grandi. Il tema tiene gia' `object-fit: cover`. */

.hi-row-half-bleed:not(.hi-row-half-bleed--left) > .l-section-h > .g-cols > .wpb_column:last-child .w-image img,
.hi-row-half-bleed--left > .l-section-h > .g-cols > .wpb_column:first-child .w-image img {
	width: 100%;
}

/* ---- Colonne impilate: l'immagine va a vivo da entrambi i lati, e la riga
        riprende il passo verticale delle altre ---- */

.hi-row-half-bleed {
	--hi-rhb-stack-padding: var(--section-custom-padding, 5vmax);
}

@media (max-width: 767px) {

	.hi-row-half-bleed {
		padding-top: var(--hi-rhb-stack-padding);
		padding-bottom: var(--hi-rhb-stack-padding);
	}

	.hi-row-half-bleed:not(.hi-row-half-bleed--left) > .l-section-h > .g-cols > .wpb_column:last-child {
		margin-inline-start: var(--margin-inline-stretch);
	}

	.hi-row-half-bleed--left > .l-section-h > .g-cols > .wpb_column:first-child {
		margin-inline-end: var(--margin-inline-stretch);
	}
}

/* ==== tabs-valori ==== */
/* ============================================================================
 * Element:     Tabs come sezione "I valori in cui crediamo"
 * Class:       .hi-tabs-valori
 * Description: Trasforma le Tabs di Impreza nella sezione valori del mockup CVA - dev 20261030 (chi-siamo.html): un valore alla volta che entra dal basso in dissolvenza, e sotto i titoli delle schede trasformati in barre cliccabili.
 * ============================================================================
 *
 * Uso      : nel builder, elemento Tabs con Extra class `hi-tabs-valori`,
 *            stile "Simple", "Transform to Accordion" = 1px (così non diventa
 *            mai fisarmonica). Una sezione per valore; dentro, i blocchi con
 *            Extra class `hi-tabs-valori__idx` (01 / 04),
 *            `hi-tabs-valori__title` (titolo) e `hi-tabs-valori__desc`
 *            (testo). Testi, colori e corpi si cambiano dal builder.
 *            La riga che la contiene porta immagine di sfondo e velatura.
 * Rimozione: cancellare questo file = Tabs Impreza standard.
 *
 * Il cambio di scheda resta quello del tema (click, tastiera, aria-*):
 * qui solo l'aspetto. Le sezioni sono impilate nella stessa cella di una
 * griglia, così l'altezza è quella del valore più lungo e le barre sotto
 * non saltano a ogni cambio.
 *
 * Misure in px perché il rem di Impreza è fluido.
 */

.hi-tabs-valori {
	--hi-tabs-valori-ease: cubic-bezier(.16, .84, .32, 1);

	display: flex;
	flex-direction: column;
	max-width: 640px;
}

/* ---------------------------------------------------------------------------
 * Sezioni: impilate, entra solo l'attiva.
 * ------------------------------------------------------------------------- */

.hi-tabs-valori > .w-tabs-sections {
	display: grid;
	order: 1;
}

/* !important per battere il display:none che il JS del tema scrive inline
   sulle sezioni nascoste: qui a nasconderle è l'opacità. */
.hi-tabs-valori > .w-tabs-sections > .w-tabs-section {
	grid-area: 1 / 1;
	display: block !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(28px);
	pointer-events: none;
	transition: opacity .7s var(--hi-tabs-valori-ease), transform .7s var(--hi-tabs-valori-ease), visibility 0s linear .7s;
}

.hi-tabs-valori > .w-tabs-sections > .w-tabs-section.active {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}

/* Il tema stacca il contenuto dalle schede con un padding in alto: qui le
   schede sono sotto e la distanza la dà l'etichetta sopra. */
.hi-tabs-valori .w-tabs-section-content,
.hi-tabs-valori .w-tabs-section-content-h {
	padding: 0;
}

.hi-tabs-valori .hi-tabs-valori__title {
	margin-top: clamp(18px, 2.4vh, 30px);
}

/* Trattino azzurro sotto il titolo. */
.hi-tabs-valori .hi-tabs-valori__title::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-top: clamp(20px, 2.6vh, 32px);
	background: var(--color-alt-content-primary, #00b5e2);
}

.hi-tabs-valori .hi-tabs-valori__desc {
	margin-top: clamp(22px, 3vh, 34px);
	text-shadow: 0 1px 14px rgba(6, 14, 22, .55);
}

/* ---------------------------------------------------------------------------
 * Titoli delle schede → barre sotto il testo.
 * ------------------------------------------------------------------------- */

.hi-tabs-valori > .w-tabs-list {
	order: 2;
	margin-top: clamp(34px, 5vh, 56px);
}

.hi-tabs-valori > .w-tabs-list .w-tabs-list-h {
	flex-wrap: wrap;
	gap: 14px;
}

/* La barra scorrevole del tema non serve: ogni scheda ha la sua. */
.hi-tabs-valori > .w-tabs-list .w-tabs-list-bar {
	display: none;
}

.hi-tabs-valori.hi-tabs-valori > .w-tabs-list .w-tabs-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 96px;
	margin: 0;
	padding: 10px 0;
	opacity: 1;
	font-family: var(--h6-font-family, inherit);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	transition: color .3s ease;
}

.hi-tabs-valori > .w-tabs-list .w-tabs-item::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, .35);
	transition: background .3s ease;
}

.hi-tabs-valori.hi-tabs-valori > .w-tabs-list .w-tabs-item:hover,
.hi-tabs-valori.hi-tabs-valori > .w-tabs-list .w-tabs-item.active {
	color: #fff;
}

.hi-tabs-valori > .w-tabs-list .w-tabs-item:hover::before {
	background: rgba(255, 255, 255, .7);
}

.hi-tabs-valori > .w-tabs-list .w-tabs-item.active::before {
	background: var(--color-alt-content-primary, #00b5e2);
}

.hi-tabs-valori > .w-tabs-list .w-tabs-item:focus-visible {
	outline: 2px solid var(--color-alt-content-link-hover, #45c8f5);
	outline-offset: 4px;
}

/* Su telefono le quattro barre stanno su due righe uguali. */
@media (max-width: 600px) {
	.hi-tabs-valori > .w-tabs-list .w-tabs-list-h {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hi-tabs-valori > .w-tabs-sections > .w-tabs-section {
		transform: none;
		transition: none;
	}
}

/* ==== text-animated-scrolling ==== */
/* ============================================================================
 * Element:     Testo animato allo scroll
 * Class:       .hi-animated-scrolling-text
 * Description: Il testo si accende un carattere per volta, nell'ordine di lettura, mentre la pagina scorre.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-animated-scrolling-text` nel campo Extra class
 *            dell'elemento (WPBakery: Custom Heading > Extra class name).
 *            Funziona su qualsiasi tag, non solo <h2>.
 * Coppia   : questo file lavora insieme a `text-animated-scrolling.js`, che
 *            spezza il testo in `<span class="hi-ast-ch">` numerati.
 *            Senza quel file non c'e' effetto: NESSUN SELETTORE CSS SA
 *            INDIRIZZARE UN CARATTERE, quindi le lettere devono diventare
 *            elementi prima che il CSS possa animarle una per una.
 * Supporto : dove `animation-timeline` non esiste il JS non tocca il DOM e il
 *            titolo resta quello del tema. Nessuna rottura, nessun testo
 *            invisibile.
 * Rimozione: cancellare i due file = ritorno immediato allo stato attuale.
 *
 * ---------------------------------------------------------------------------
 * PERCHE' A CARATTERE E NON A SFUMATURA CONTINUA
 * La versione precedente accendeva il testo con un gradiente inclinato
 * ritagliato sulle glifi (`background-clip: text`) che scorreva sul blocco: una
 * sola sfumatura continua, che tagliava le lettere a meta' mentre passava.
 * Il mockup fa un'altra cosa: divide il titolo in caratteri e ne accende
 * `round(progresso * totale)`, commutando il colore di netto. Quello scatto
 * secco non piaceva. Questa versione tiene l'avanzamento a carattere del
 * mockup e gli mette sotto una dissolvenza: ogni lettera passa da spenta ad
 * accesa in un intervallo proprio, e gli intervalli si sovrappongono.
 * La leva e' `--hi-ast-overlap`, misurata in caratteri:
 *     1 = scatto secco, identico al mockup
 *     6 = alcune lettere in dissolvenza insieme (valore tarato)
 *     8 = molto morbido, quasi la vecchia sfumatura continua
 * ---------------------------------------------------------------------------
 * LA FINESTRA DI SCROLL VA IN LUNGHEZZE, NON IN PERCENTUALI
 * La versione precedente usava `animation-range: cover 33% cover 68%` con il
 * commento "traduce la finestra della demo (top del titolo da 60vh a 18vh)".
 * MISURATO IN PAGINA, NON LA TRADUCEVA. Le percentuali della range `cover`
 * sono percentuali del percorso totale, che vale `altezza del viewport +
 * altezza dell'elemento`: con l'h2 di questa pagina, alto 493px su un viewport
 * di 813px, il 33% cadeva col titolo a 0,47vh (l'effetto partiva tardi) e il
 * 68% col titolo gia' uscito sopra il bordo. Dipendeva dall'altezza del
 * blocco, quindi ogni titolo si comportava in modo diverso.
 *
 * In lunghezze la stessa finestra si dice esatta e senza dipendere
 * dall'altezza: a un offset X della range `cover`, il top dell'elemento sta a
 * `viewport - X`. Quindi "top a 60vh" e' `calc(100vh - 60vh)`, e le due leve
 * qui sotto sono direttamente i numeri del mockup.
 * Verificato a sei posizioni di scroll: titolo a 0,50vh -> 22% acceso,
 * 0,40vh -> 46%, 0,30vh -> 69%, 0,20vh -> 93%.
 * ---------------------------------------------------------------------------
 * NOTA SULLA DOPPIA CLASSE
 * In pagina il CSS del plugin viene PRIMA degli <style> del builder
 * (`us-theme-options-css`, `us-design-options-css`), dove finiscono regole tipo
 *     .us_custom_xxxxxxxx{color:var(--color-alt-content-text)!important}
 * A parita' di specificita' vincerebbe il builder. `.classe.classe` porta la
 * specificita' a (0,2,0) e chiude la questione senza nominare nessuna classe
 * generata da WPBakery.
 *
 * IL COLORE VA DICHIARATO SUGLI SPAN
 * Sul titolo il builder scrive `color: ... !important`. Se il colore "spento"
 * si dichiarasse sulla radice, i caratteri lo prenderebbero per EREDITARIETA',
 * e l'ereditarieta' perde contro l'important: le lettere resterebbero del
 * colore del builder e l'effetto sarebbe invisibile (accaduto, in prova).
 * Dichiarato sugli span vince, perche' sugli span non c'e' nessuna regola
 * avversaria.
 *
 * NIENTE SHORTHAND `animation`
 * `animation-timeline` e `animation-range` sono sue sub-property reset-only:
 * la shorthand le riazzera. Qui si usano solo le proprieta' lunghe, cosi'
 * l'ordine delle dichiarazioni non puo' rompere nulla.
 *
 * NOTA SUL PREFISSO
 * Questa classe usa `hi-` e non `hi-cva-` come il resto del plugin: e' voluto,
 * la classe e' gia' referenziata nei blocchi del builder e rinominarla
 * spegnerebbe l'effetto sulle pagine dove e' in uso.
 * ============================================================================ */












/* VERSIONE STANDARD */
.hi-animated-scrolling-text.hi-animated-scrolling-text {
	--hi-ast-off: rgba(81, 178, 221, .5);
	--hi-ast-on: #ffffff;

	--hi-ast-start: 60vh;
	--hi-ast-end: 18vh;

	--hi-ast-overlap: 6;
}


/* VERSIONE DARK */
.hi-animated-scrolling-text.hi-animated-scrolling-text-dark {
	--hi-ast-off: rgba(12, 34, 54, 0.2);
	--hi-ast-on: rgb(25, 65, 103);
}


@supports (animation-timeline: view()) {

	.hi-animated-scrolling-text.hi-animated-scrolling-text {
		view-timeline-name: --hi-ast;
	}

	.hi-ast-ch {
		color: var(--hi-ast-off);

		--hi-ast-da: calc(100vh - var(--hi-ast-start));
		--hi-ast-corsa: calc(var(--hi-ast-start) - var(--hi-ast-end));

		animation-name: hi-ast-accendi;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-timeline: --hi-ast;

		animation-range:
			cover calc(var(--hi-ast-da) + var(--hi-ast-corsa) * var(--i) / var(--n)) cover calc(var(--hi-ast-da) + var(--hi-ast-corsa) * (var(--i) + var(--hi-ast-overlap)) / var(--n));
	}

	@keyframes hi-ast-accendi {
		to {
			color: var(--hi-ast-on);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hi-ast-ch {
			animation-name: none;
			color: var(--hi-ast-on);
		}
	}
}