/* ==========================================================================
   TRE - vetrine di prodotto

   La grammatica: card grandi e arrotondate, dentro ognuna un pannello che
   galleggia sopra un velo pastello, righe sfalsate con la loro ombra, numeri
   grandi separati da filetti sottili, chiusura su una fascia piena.

   Non sono immagini: sono HTML e CSS. Restano nitide a ogni risoluzione, si
   aggiornano cambiando un numero, e un modello che legge la pagina legge i
   dati. Per un sito che parla di farsi citare dai modelli, una tabella dentro
   un PNG non esiste.

   I colori escono tutti dalle variabili del tema: cambiando combinazione nel
   Customizer cambiano anche le vetrine, veli compresi.
   ========================================================================== */

/* ------------------------------------------------------- il nastro della testata */

/* Le quattro macchie pastello sfocate dietro la testata. Stanno dietro a tutto
   e non intercettano il puntatore. La rotazione serve a non farle leggere come
   una fascia: storte sembrano un oggetto.

   I raggi sono farthest-side, non closest-side: con closest-side le macchie non
   arrivavano a toccarsi e restava un vuoto chiaro in mezzo - lo sfondo si
   vedeva spezzato in due. */
.tre-nastro {
	position: absolute;
	top: -180px;
	right: -280px;
	width: 900px;
	height: 700px;
	pointer-events: none;
	background:
		radial-gradient(farthest-side at 30% 35%, rgba(var(--tre-g1-rgb), 0.55), rgba(var(--tre-g1-rgb), 0) 70%),
		radial-gradient(farthest-side at 62% 22%, rgba(var(--tre-g2-rgb), 0.55), rgba(var(--tre-g2-rgb), 0) 70%),
		radial-gradient(farthest-side at 72% 62%, rgba(var(--tre-g3-rgb), 0.55), rgba(var(--tre-g3-rgb), 0) 70%),
		radial-gradient(farthest-side at 40% 78%, rgba(var(--tre-g4-rgb), 0.45), rgba(var(--tre-g4-rgb), 0) 70%);
	opacity: 0.95;
	filter: blur(36px);
	transform: rotate(-8deg);
}

/* LA VARIANTE CHE RESPIRA, AL TERZO TENTATIVO.

   I primi due muovevano due strati in direzioni opposte, perche' e' dal loro
   incrocio che nascono le tinte intermedie. Ma due strati che si allontanano
   lasciano il vuoto in mezzo: lo sfondo si spezzava in DUE macchie separate da
   una striscia chiara, e nella home il titolo cadeva proprio nel vuoto.

   Adesso a muoversi e' un oggetto solo - il contenitore - e i due strati dentro
   non si spostano affatto: si alternano di opacita'. La massa colorata non puo'
   piu' spezzarsi, perche' geometricamente e' una cosa sola.

   Il cambio di tinta arriva dalla dissolvenza fra due disposizioni degli stessi
   quattro pastelli, negli stessi quattro punti, scambiati fra loro: nessuno dei
   due strati lascia scoperta una zona che l'altro copriva.

   Ventisei e diciannove secondi, primi fra loro: posizione e colore non tornano
   mai insieme allo stesso punto. */
.tre-nastro--vivo {
	background: none;
	filter: none;
	animation: tre-respiro 26s ease-in-out infinite;
}

.tre-nastro--vivo::before,
.tre-nastro--vivo::after {
	content: "";
	position: absolute;
	inset: 0;
	filter: blur(36px);
}

.tre-nastro--vivo::before {
	background:
		radial-gradient(farthest-side at 30% 35%, rgba(var(--tre-g1-rgb), 0.55), rgba(var(--tre-g1-rgb), 0) 70%),
		radial-gradient(farthest-side at 62% 22%, rgba(var(--tre-g2-rgb), 0.55), rgba(var(--tre-g2-rgb), 0) 70%),
		radial-gradient(farthest-side at 72% 62%, rgba(var(--tre-g3-rgb), 0.55), rgba(var(--tre-g3-rgb), 0) 70%),
		radial-gradient(farthest-side at 40% 78%, rgba(var(--tre-g4-rgb), 0.45), rgba(var(--tre-g4-rgb), 0) 70%);
	animation: tre-sfuma-a 19s ease-in-out infinite;
}

.tre-nastro--vivo::after {
	background:
		radial-gradient(farthest-side at 30% 35%, rgba(var(--tre-g3-rgb), 0.5), rgba(var(--tre-g3-rgb), 0) 70%),
		radial-gradient(farthest-side at 62% 22%, rgba(var(--tre-g4-rgb), 0.5), rgba(var(--tre-g4-rgb), 0) 70%),
		radial-gradient(farthest-side at 72% 62%, rgba(var(--tre-g1-rgb), 0.5), rgba(var(--tre-g1-rgb), 0) 70%),
		radial-gradient(farthest-side at 40% 78%, rgba(var(--tre-g2-rgb), 0.45), rgba(var(--tre-g2-rgb), 0) 70%);
	animation: tre-sfuma-b 19s ease-in-out infinite;
}

/* Il respiro: rotazione attorno agli otto gradi di riposo, e un po' di
   dilatazione. NESSUNA TRASLAZIONE, cosi' il nastro non puo' migrare. */
@keyframes tre-respiro {
	0%   { transform: rotate(-8deg)  scale(1); }
	25%  { transform: rotate(-2deg)  scale(1.1); }
	50%  { transform: rotate(-8deg)  scale(1.04); }
	75%  { transform: rotate(-14deg) scale(1.1); }
	100% { transform: rotate(-8deg)  scale(1); }
}

/* Le due dissolvenze sono in opposizione: quando una sale l'altra scende.
   Senza questo il nastro pulserebbe di luminosita' invece di cambiare tinta. */
@keyframes tre-sfuma-a {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.15; }
}

@keyframes tre-sfuma-b {
	0%, 100% { opacity: 0.15; }
	50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.tre-nastro--vivo,
	.tre-nastro--vivo::before,
	.tre-nastro--vivo::after { animation: none; }

	.tre-nastro--vivo { transform: rotate(-8deg); }
	.tre-nastro--vivo::after { opacity: 0.5; }
}

/* Il nastro dentro la hero costruita con Elementor. Il blocco HTML che lo
   contiene sarebbe un elemento del flusso, alto zero ma con il suo spazio fra
   un figlio e l'altro: diventa uno strato che copre la sezione, sta dietro al
   contenuto e non intercetta il puntatore. La sezione (glimpse-hero) lo
   taglia ai suoi bordi. */
.glimpse-hero > .elementor-widget-html {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: auto;
	max-width: none;
	margin: 0;
	pointer-events: none;
}

/* Agganciato al contenuto, non al bordo della finestra. Con right fisso, su
   uno schermo largo duemila pixel il nastro finiva a quattrocento pixel dal
   titolo, tagliato in alto, come una macchia dimenticata nell'angolo. Qui il
   suo bordo destro sta sempre poco oltre il bordo destro del contenitore da
   1120 pixel; sotto quella larghezza torna a uscire dalla finestra. */
.glimpse-hero > .elementor-widget-html .tre-nastro {
	top: -180px;
	right: auto;
	left: calc(50% - 560px - 160px);
	width: 1440px;
	height: 820px;
	opacity: 1;
	animation: glimpse-deriva 18s ease-in-out infinite;
}

/* Il respiro del tema ruota di pochi gradi in ventisei secondi: in una
   testata che deve attirare l'occhio non si vedeva muovere. Nella hero il
   nastro deriva davvero - si sposta, ruota, si dilata - e le tinte si
   scambiano ogni dodici secondi. Resta un oggetto solo che si muove, come
   nel tema: i due strati dentro cambiano solo opacita', la massa non si
   spezza. */
.glimpse-hero .tre-nastro--vivo::before {
	animation-duration: 12s;
}

.glimpse-hero .tre-nastro--vivo::after {
	animation-duration: 12s;
}

@keyframes glimpse-deriva {
	0%   { transform: translate(0, 0)        rotate(-8deg)  scale(1); }
	25%  { transform: translate(-90px, 50px)  rotate(-1deg)  scale(1.12); }
	50%  { transform: translate(-30px, 110px) rotate(-12deg) scale(1.04); }
	75%  { transform: translate(60px, 30px)   rotate(-18deg) scale(1.1); }
	100% { transform: translate(0, 0)        rotate(-8deg)  scale(1); }
}

/* Il titolo della hero, di vetro satinato: piatto. Un solo colore, bianco
   latte semitrasparente, e attraverso le lettere si vede il nastro che si
   muove dietro. Niente ombre, niente contorni, niente sfumature dentro le
   lettere: le versioni con lo spessore sembravano plastica, non vetro.

   Il nastro passa dietro tutto il titolo perche' un bianco semitrasparente
   sul fondo bianco sparirebbe: e' il colore dietro a disegnare le lettere.

   Solo nella hero: glimpse-h1 e' la classe dei titoli di tutte le pagine, e
   gli altri restano pieni. */
.elementor .glimpse-hero .glimpse-h1 {
	color: rgba(255, 255, 255, 0.65);
	-webkit-text-fill-color: rgba(255, 255, 255, 0.65);
}

.elementor .glimpse-hero .glimpse-h1::selection {
	-webkit-text-fill-color: #14122b;
	background: rgba(142, 197, 252, 0.5);
}

/* LA TESTATA IN VETRO FIN DALL'INIZIO, sulla home.

   La testata e' gia' vetro (base.css: bianco all'82%, sfocata), ma in cima
   alla pagina dietro non le passava niente: la hero cominciava sotto di lei,
   e il vetro sembrava bianco finche' non si scendeva. Qui la hero risale
   sotto la testata - margine negativo pari alla sua altezza, e altrettanto
   spazio in piu' in alto, cosi' il titolo resta dov'era - e la testata diventa
   piu' trasparente: il nastro colorato si vede attraverso da subito.

   L'altezza della testata e' 63 pixel sul computer e 100 sul telefono, dove il
   menu va a capo. Se la testata cambia, vanno cambiati qui. */
/* Senza bordo: il filo bianco sotto la testata, sopra il nastro colorato,
   era una riga netta che tagliava il vetro dalla hero. */
body:has(.glimpse-hero) .tre-testata {
	border-bottom-color: transparent;
	background: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
}

/* padding-block-start e non padding-top, e section nel selettore: la classe
   globale glimpse-sezione scrive lo spazio in alto come padding-block-start,
   che per il browser e' la stessa proprieta' di padding-top. A parita' di peso
   vinceva il foglio di Elementor, caricato dopo, e la hero restava con il suo
   spazio di prima: il titolo saliva, e sul telefono l'occhiello finiva sotto
   la testata. */
/* --tre-testata la misura theme.js; 63 e 100 pixel valgono finche' non arriva. */
.elementor section.glimpse-hero {
	--glimpse-testata: var(--tre-testata, 63px);
	margin-block-start: calc(-1 * var(--glimpse-testata));
	padding-block-start: calc(96px + var(--glimpse-testata));
}

@media (max-width: 767px) {
	.elementor section.glimpse-hero {
		--glimpse-testata: var(--tre-testata, 100px);
		padding-block-start: calc(56px + var(--glimpse-testata));
	}
}

/* I PULSANTI DELLA HERO, nello stile delle bento card e del titolo.

   Il pieno e' viola GLIMPSE con un riflesso che lo attraversa al passaggio del
   puntatore (lo sfondo e' una sfumatura larga il doppio del pulsante, che
   scorre), un alone viola che si allarga sotto, e la freccia alla Stripe: la
   punta c'e' sempre, l'asta compare e la spinge avanti.

   Il secondario e' vetro satinato, come la testata: bianco semitrasparente e
   sfocato, e dietro si intravede il nastro che si muove. Al passaggio diventa
   piu' opaco e prende la stessa freccia.

   La freccia e' disegnata qui (::before l'asta, ::after la punta): per questo
   in homeit.md il pulsante secondario non ha piu' la freccia nel testo.

   Solo nella hero: gli altri pulsanti del sito restano com'erano. .elementor
   davanti vince sulle classi globali dei pulsanti, e :hover in piu' vince sul
   loro stato al passaggio. */
.elementor .glimpse-hero .glimpse-pulsante,
.elementor .glimpse-invito .glimpse-pulsante,
.elementor .glimpse-hero .glimpse-pulsante-linea {
	position: relative;
	gap: 0;
	padding-right: 44px;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, background-color 0.3s ease, background-position 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}

.elementor .glimpse-hero .glimpse-pulsante,
.elementor .glimpse-invito .glimpse-pulsante {
	background-color: #1800ad;
	background-image: linear-gradient(110deg, #1800ad 0%, #1800ad 38%, #6a5cff 50%, #1800ad 62%, #1800ad 100%);
	background-size: 250% 100%;
	background-position: 100% 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -12px rgba(24, 0, 173, 0.65);
}

.elementor .glimpse-hero .glimpse-pulsante:hover,
.elementor .glimpse-invito .glimpse-pulsante:hover {
	background-color: #1800ad;
	background-position: 0 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 36px -12px rgba(24, 0, 173, 0.7);
	transform: translateY(-2px);
}

.elementor .glimpse-hero .glimpse-pulsante-linea {
	border-color: rgba(255, 255, 255, 0.85);
	background-color: rgba(255, 255, 255, 0.42);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 20px -14px rgba(20, 18, 43, 0.35);
}

.elementor .glimpse-hero .glimpse-pulsante-linea:hover {
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 1px 0 #fff, 0 14px 28px -14px rgba(20, 18, 43, 0.4);
	transform: translateY(-2px);
}

.elementor .glimpse-hero .glimpse-pulsante:active,
.elementor .glimpse-invito .glimpse-pulsante:active,
.elementor .glimpse-hero .glimpse-pulsante-linea:active {
	transform: translateY(0);
	transition-duration: 0.08s;
}

/* La freccia: l'asta nasce corta e invisibile, la punta sta un po' indietro;
   al passaggio l'asta si allunga e la punta avanza con lei. */
.elementor .glimpse-hero .glimpse-pulsante::before,
.elementor .glimpse-hero .glimpse-pulsante-linea::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 10px;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: currentColor;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}

.elementor .glimpse-hero .glimpse-pulsante::after,
.elementor .glimpse-hero .glimpse-pulsante-linea::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	border-radius: 1px;
	transform: translateX(-4px) rotate(45deg);
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.elementor .glimpse-hero .glimpse-pulsante:hover::before,
.elementor .glimpse-hero .glimpse-pulsante-linea:hover::before,
.elementor .glimpse-hero .glimpse-pulsante:focus-visible::before,
.elementor .glimpse-hero .glimpse-pulsante-linea:focus-visible::before {
	opacity: 1;
	transform: scaleX(1);
}

.elementor .glimpse-hero .glimpse-pulsante:hover::after,
.elementor .glimpse-hero .glimpse-pulsante-linea:hover::after,
.elementor .glimpse-hero .glimpse-pulsante:focus-visible::after,
.elementor .glimpse-hero .glimpse-pulsante-linea:focus-visible::after {
	transform: translateX(1px) rotate(45deg);
}

.elementor .glimpse-hero .glimpse-pulsante:focus-visible,
.elementor .glimpse-invito .glimpse-pulsante:focus-visible,
.elementor .glimpse-hero .glimpse-pulsante-linea:focus-visible {
	outline: 2px solid #1800ad;
	outline-offset: 3px;
}

/* LE SEZIONI SCURE (il numero grande, Phil e i report).

   Intestazioni, testi e bento card sono gli stessi componenti delle sezioni
   chiare: il colore lo cambia il contesto. Le card diventano vetro scuro,
   con il velo colorato delle vignette piu' tenue; i pannelli dentro restano
   bianchi, e sul fondo d'inchiostro si staccano di piu'. */
.elementor .glimpse-sezione-scura .glimpse-h2 {
	color: #fff;
}

.elementor .glimpse-sezione-scura .glimpse-occhiello {
	color: #8ec5fc;
}

.elementor .glimpse-sezione-scura .glimpse-testo {
	color: rgba(255, 255, 255, 0.75);
}

.elementor .glimpse-sezione-scura .glimpse-nota {
	color: rgba(255, 255, 255, 0.55);
}

.elementor .glimpse-sezione-scura .glimpse-bento-card {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.elementor .glimpse-sezione-scura .glimpse-bento-card:hover {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.elementor .glimpse-sezione-scura .glimpse-bento-titolo {
	color: #fff;
}

.elementor .glimpse-sezione-scura .glimpse-bento-desc {
	color: rgba(255, 255, 255, 0.7);
}

.glimpse-sezione-scura .tre-bento::before {
	opacity: 0.45;
}

/* La tabella dei prezzi sullo scuro: in un riquadro di vetro, con il testo
   chiaro e i filetti tenui. base.css le da' testo e righe d'inchiostro, che
   sul fondo d'inchiostro sparivano. */
.glimpse-sezione-scura .tre-tabella {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
}

.glimpse-sezione-scura .tre-tabella table {
	margin: 0;
}

.glimpse-sezione-scura .tre-tabella th,
.glimpse-sezione-scura .tre-tabella td {
	border-bottom-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.82);
}

.glimpse-sezione-scura .tre-tabella th {
	color: #8ec5fc;
	font-weight: 600;
}

.glimpse-sezione-scura .tre-tabella tr:last-child td {
	border-bottom: 0;
}

.elementor .glimpse-sezione-scura .glimpse-pulsante-linea {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

/* L'INVITO A ISCRIVERSI, dopo "Come funziona".

   Stesso inchiostro delle altre sezioni scure, ma la luce sale dal basso,
   dietro il pulsante, e respira piano. Il selettore ha due classi perche' il
   gradiente di glimpse-sezione-scura arriva dal foglio delle classi globali,
   caricato dopo questo: a parita' di specificita' vinceva lui. Per lo stesso
   motivo il respiro verticale sta qui: nella classe glimpse-sezione-invito
   perdeva contro il padding di glimpse-sezione.

   Il pulsante e' quello della hero (riflesso e freccia, regole sopra), piu'
   grande e di un viola piu' acceso: il #1800ad sul fondo d'inchiostro quasi
   spariva. */
.elementor .glimpse-sezione-scura.glimpse-sezione-invito {
	padding-top: 128px;
	padding-bottom: 128px;
	background-color: #14122b;
	background-image: radial-gradient(42rem 24rem at 50% 118%, rgba(106, 92, 255, 0.6), transparent 70%), radial-gradient(36rem 22rem at 6% 0, rgba(142, 197, 252, 0.2), transparent 70%), radial-gradient(34rem 22rem at 96% 8%, rgba(255, 207, 159, 0.14), transparent 70%);
	background-size: 130% 130%, 100% 100%, 100% 100%;
	background-position: 50% 100%, 0 0, 0 0;
	animation: glimpse-invito-luce 9s ease-in-out infinite alternate;
}

@keyframes glimpse-invito-luce {
	to {
		background-size: 165% 165%, 100% 100%, 100% 100%;
	}
}

@media (max-width: 767px) {
	.elementor .glimpse-sezione-scura.glimpse-sezione-invito {
		padding-top: 88px;
		padding-bottom: 88px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .glimpse-sezione-scura.glimpse-sezione-invito {
		animation: none;
	}
}

.elementor .glimpse-invito .glimpse-pulsante {
	padding: 18px 58px 18px 32px;
	font-size: 17px;
	background-color: #4430ff;
	background-image: linear-gradient(110deg, #4430ff 0%, #4430ff 38%, #a79dff 50%, #4430ff 62%, #4430ff 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 48px -14px rgba(106, 92, 255, 0.85);
}

.elementor .glimpse-invito .glimpse-pulsante:hover {
	background-color: #4430ff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 60px -12px rgba(106, 92, 255, 0.95);
}

.elementor .glimpse-invito .glimpse-pulsante::before,
.elementor .glimpse-invito .glimpse-pulsante::after {
	right: 28px;
}

.elementor .glimpse-invito .glimpse-pulsante:focus-visible {
	outline-color: #fff;
}

/* COME FUNZIONA: I PASSI CHE SCORRONO.

   Ogni passo e' un blocco con dentro la vignetta e il testo. Sul computer il
   blocco sparisce dalla disposizione (display: contents) e i suoi due figli
   diventano celle della griglia dei passi: i testi in fila a sinistra, le
   vignette tutte nella stessa cella a destra, impilate e ferme mentre si
   scorre. Si vede quella del passo attivo, che il JavaScript segna con
   .is-attivo guardando quale testo attraversa il centro dello schermo.

   Sul telefono il carosello parte dalla sezione: .elementor .e-div-block-base
   di Elementor mette display: block con la stessa specificita', e il suo
   foglio arriva dopo questo.

   Tutto dipende da .is-pronta, che mette il JavaScript: senza, le vignette
   nascoste resterebbero nascoste per sempre, e i passi restano in fila. */
@media (min-width: 1025px) {
	.elementor .glimpse-passi.is-pronta {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: 64px;
		align-items: start;
	}

	.elementor .glimpse-passi.is-pronta > .glimpse-passo {
		display: contents;
	}

	.elementor .glimpse-passi.is-pronta > .glimpse-passo > .elementor-widget-html {
		grid-column: 2;
		grid-row: 1 / span 4;
		position: sticky;
		top: calc(50vh - 190px);
		align-self: start;
		overflow: hidden;
		border-radius: 24px;
		background: #fff;
		box-shadow: 0 30px 60px -30px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(14px) scale(0.98);
		transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.45s;
	}

	.elementor .glimpse-passi.is-pronta > .glimpse-passo.is-attivo > .elementor-widget-html {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
	}

	.glimpse-passi.is-pronta .tre-bento {
		min-height: 380px;
	}

	.elementor .glimpse-passi.is-pronta > .glimpse-passo > .glimpse-passo-testo {
		grid-column: 1;
		justify-content: center;
		min-height: 24vh;
		padding: 24px 0 24px 28px;
		border-left: 2px solid #e7e6f0;
		opacity: 0.42;
		cursor: pointer;
		transition: opacity 0.35s ease, border-color 0.35s ease;
	}

	.elementor .glimpse-passi.is-pronta > .glimpse-passo.is-attivo > .glimpse-passo-testo {
		border-left-color: #1800ad;
		opacity: 1;
	}
}

/* Sul telefono e sul tablet i passi sono un carosello: una card per passo,
   vignetta sopra e testo sotto, da scorrere di lato. La card dopo si
   intravede, e dice che ce n'e' un'altra. */
@media (max-width: 1024px) {
	.elementor .glimpse-sezione .glimpse-passi {
		display: flex;
		gap: 14px;
		width: auto;
		margin-inline: -20px;
		padding: 4px 20px 22px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.glimpse-passi::-webkit-scrollbar {
		display: none;
	}

	.elementor .glimpse-passi > .glimpse-passo {
		display: flex;
		flex: 0 0 min(86%, 440px);
		flex-direction: column;
		overflow: hidden;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 15px 35px -10px rgba(50, 50, 93, 0.14), 0 5px 15px -5px rgba(0, 0, 0, 0.06);
		scroll-snap-align: center;
	}

	.elementor .glimpse-passi > .glimpse-passo > .glimpse-passo-testo {
		padding: 8px 22px 24px;
	}
}

/* BRAND CENTER: LE LINGUETTE.

   Sono le e-tabs di Elementor: il cambio di pannello lo fa il loro script.
   Qui l'aspetto: sul computer il menu e' una colonna a sinistra, ferma mentre
   si scorre, e il pannello una bento card a destra; sul telefono il menu e'
   una riga di pillole che scorre di lato.

   Le linguette hanno stili di base propri (bordo grigio, larghezza fissa,
   fondo grigio al passaggio): per questo i selettori partono dalla sezione. */
.elementor .glimpse-sezione .glimpse-linguette {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 40px;
	align-items: start;
}

.elementor .glimpse-sezione .glimpse-linguette-menu {
	position: sticky;
	top: calc(var(--tre-testata, 64px) + 32px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 6px;
}

.elementor .glimpse-sezione .glimpse-linguetta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 18px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: #4a4863;
	text-align: left;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.elementor .glimpse-sezione .glimpse-linguetta::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cfcde0;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.elementor .glimpse-sezione .glimpse-linguetta:hover {
	background: rgba(24, 0, 173, 0.05);
	color: #14122b;
}

.elementor .glimpse-sezione .glimpse-linguetta.e--selected {
	background: #fff;
	color: #1800ad;
	box-shadow: 0 0 0 1px #e7e6f0, 0 12px 28px -16px rgba(50, 50, 93, 0.35);
}

.elementor .glimpse-sezione .glimpse-linguetta.e--selected::before {
	background: #1800ad;
	box-shadow: 0 0 0 4px rgba(24, 0, 173, 0.12);
}

.elementor .glimpse-sezione .glimpse-linguetta:focus-visible {
	outline: 2px solid #1800ad;
	outline-offset: 2px;
}

.elementor .glimpse-sezione .glimpse-linguetta-pannello {
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 15px 35px -10px rgba(50, 50, 93, 0.14), 0 5px 15px -5px rgba(0, 0, 0, 0.06);
}

.elementor .glimpse-sezione .glimpse-linguetta-pannello.e--selected {
	animation: glimpse-pannello 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.glimpse-linguetta-pannello .tre-bento {
	min-height: 340px;
}

@keyframes glimpse-pannello {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .glimpse-sezione .glimpse-linguetta-pannello.e--selected {
		animation: none;
	}
}

@media (max-width: 1024px) {
	.elementor .glimpse-sezione .glimpse-linguette {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.elementor .glimpse-sezione .glimpse-linguette-menu {
		position: static;
		flex-direction: row;
		gap: 8px;
		margin-inline: -20px;
		padding: 2px 20px 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.glimpse-linguette-menu::-webkit-scrollbar {
		display: none;
	}

	.elementor .glimpse-sezione .glimpse-linguetta {
		flex: none;
		width: auto;
		padding: 10px 16px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 0 0 1px #e7e6f0;
		white-space: nowrap;
	}

	.elementor .glimpse-sezione .glimpse-linguetta::before {
		display: none;
	}

	.elementor .glimpse-sezione .glimpse-linguetta.e--selected {
		background: #1800ad;
		color: #fff;
		box-shadow: 0 8px 20px -12px rgba(24, 0, 173, 0.6);
	}

	.glimpse-linguetta-pannello .tre-bento {
		min-height: 280px;
	}
}

/* CHI SIAMO.

   Le card numerate (glimpse-tappa) hanno dentro il componente Passo della
   home: qui il numero diventa una pillola con i colori del nastro, e la card
   si solleva al passaggio come le bento card. Nel percorso del Protocollo GEO
   una freccia viola sta nello spazio fra una card e l'altra; sotto i tre
   affiancati le card vanno a capo e la freccia non avrebbe senso.

   Il ::after parte da inset: auto perche' Elementor posiziona gli pseudo
   elementi dei suoi contenitori dal bordo sinistro. */
.elementor .glimpse-tappa:hover {
	box-shadow: 0 30px 60px -30px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.elementor .glimpse-tappa .glimpse-passo-numero {
	align-self: flex-start;
	margin-bottom: 4px;
	padding: 4px 11px;
	border-radius: 999px;
	background: linear-gradient(120deg, rgba(142, 197, 252, 0.4), rgba(205, 180, 219, 0.4) 50%, rgba(255, 207, 159, 0.45));
}

.elementor .glimpse-tappa .glimpse-passo-titolo {
	font-size: 22px;
}

@media (min-width: 1025px) {
	.elementor .glimpse-percorso > .glimpse-tappa {
		position: relative;
	}

	.elementor .glimpse-percorso > .glimpse-tappa:not(:last-child)::after {
		content: "";
		position: absolute;
		inset: auto;
		top: 50%;
		right: -15px;
		width: 10px;
		height: 10px;
		margin-top: -5px;
		border-top: 2px solid #1800ad;
		border-right: 2px solid #1800ad;
		opacity: 0.55;
		transform: rotate(45deg);
	}
}

/* La frase grande con il suo pulsante: il contenitore e' una colonna, e
   centrarne i figli porta al centro anche il pulsante sotto la frase. */
.elementor .glimpse-sezione-frase .glimpse-contenitore {
	align-items: center;
}

/* TRE MODELLI: le righe del confronto in fondo a ogni colonna. Il componente
   scrive <span><span>voce</span><b>valore</b></span>, senza classi: l'editor
   di Elementor le toglierebbe dal testo. */
.glimpse-modello-voci > span {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #efeef6;
}

.glimpse-modello-voci > span > span {
	color: #6e6c85;
}

.glimpse-modello-voci > span > b {
	font-weight: 600;
	text-align: right;
	color: #14122b;
}

/* I LIMITI della home in cassetti: stessa colonna leggibile della FAQ. */
.elementor #i-limiti .glimpse-cassetti {
	max-width: 860px;
}

/* La regola della hero pesa piu' di quella del tema per chi riduce le
   animazioni: senza ripeterla qui, il nastro si muoverebbe anche per loro. */
@media (prefers-reduced-motion: reduce) {
	.glimpse-hero > .elementor-widget-html .tre-nastro,
	.glimpse-hero .tre-nastro--vivo::before,
	.glimpse-hero .tre-nastro--vivo::after {
		animation: none;
	}
}

/* Nella hero il nastro deve vedersi. Con le trasparenze della testata le
   quattro macchie, sovrapposte quasi per intero, si mescolavano in un grigio:
   azzurro e pesca sono quasi complementari, e sommati piano si annullano.
   Qui le macchie sono piu' piene e si toccano solo ai bordi, e ogni macchia
   confina con una tinta vicina alla sua - azzurro con lilla, lilla con pesca,
   pesca con menta - cosi' dove si incontrano nasce un colore, non un grigio.
   La massa resta una sola: i bordi si sovrappongono, il centro no. */
/* I colori pieni della hero. Le tinte sono i quattro pastelli del tema, ma
   piu' profonde: il titolo e' bianco semitrasparente, e sui pastelli, chiari
   quasi quanto lui, si confondeva. Un bianco si legge su un colore deciso.
   Scritte a mano e non dalle variabili del Customizer perche' valgono solo
   qui: il resto del sito resta nei pastelli.
   azzurro #3d8fe8 · lilla #8f6ad0 · pesca #ff9a4d · menta #3fbf94 */
.glimpse-hero .tre-nastro--vivo::before {
	filter: blur(28px);
	background:
		radial-gradient(farthest-side at 24% 30%, rgba(61, 143, 232, 0.95), rgba(61, 143, 232, 0) 64%),
		radial-gradient(farthest-side at 58% 18%, rgba(143, 106, 208, 0.92), rgba(143, 106, 208, 0) 64%),
		radial-gradient(farthest-side at 78% 52%, rgba(255, 154, 77, 0.92), rgba(255, 154, 77, 0) 64%),
		radial-gradient(farthest-side at 46% 76%, rgba(63, 191, 148, 0.85), rgba(63, 191, 148, 0) 64%);
}

.glimpse-hero .tre-nastro--vivo::after {
	filter: blur(28px);
	background:
		radial-gradient(farthest-side at 24% 30%, rgba(143, 106, 208, 0.92), rgba(143, 106, 208, 0) 64%),
		radial-gradient(farthest-side at 58% 18%, rgba(255, 154, 77, 0.9), rgba(255, 154, 77, 0) 64%),
		radial-gradient(farthest-side at 78% 52%, rgba(63, 191, 148, 0.88), rgba(63, 191, 148, 0) 64%),
		radial-gradient(farthest-side at 46% 76%, rgba(61, 143, 232, 0.92), rgba(61, 143, 232, 0) 64%);
}

@media (max-width: 767px) {
	.glimpse-hero > .elementor-widget-html .tre-nastro {
		top: -220px;
		left: -520px;
		right: auto;
	}
}


/* ------------------------------------------------- il nastro come filmato */

/* Quando nelle impostazioni c'e' un filmato, prende il posto dei due strati di
   sfumature: qui si spengono, o si vedrebbero attraverso.

   L'onda iridescente e' gia' su fondo bianco, quindi non serve nessun velo:
   si fonde con la testata da sola. Sta a destra, e sfuma verso sinistra con
   una maschera, cosi' sotto il titolo resta bianco pulito - un testo scuro
   sopra un riflesso cromato non si legge, per quanto sia bello il riflesso. */

.tre-nastro--video::before,
.tre-nastro--video::after { content: none; }

.tre-nastro--video {
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(52%, 44rem);
	height: 100%;
	overflow: hidden;
	opacity: 1;
	/* La sfumatura comincia piu' a destra di prima: al primo giro l'onda
	   arrivava sotto il sottotitolo, e un testo scuro su un riflesso cromato
	   non si legge - per quanto sia bello il riflesso. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
}

.tre-nastro__filmato {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Il filmato e' 768x432: ingrandito riempie una testata larga, e su una
	   sfumatura astratta la perdita di definizione non si vede. Su un testo o
	   su un'interfaccia si vedrebbe, ed e' il motivo per cui questo trucco vale
	   solo per gli sfondi. */
}

/* Sul telefono il filmato non sta a destra - sarebbe una striscia di due
   centimetri - ma sotto il testo, piu' tenue e sfumato in alto. */
@media (max-width: 720px) {
	.tre-nastro--video {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 52%;
		opacity: 0.75;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
	}
}

/* SUL TELEFONO IL NASTRO VA RIMPICCIOLITO.

   E' 900x700 e sta in alto a destra mezzo fuori schermo: su un monitor e' una
   macchia in un angolo, su 375 pixel e' una fascia che attraversa tutto, passa
   dietro il testo e viene tagliata netta dai bordi della testata.

   Tre cose: piu' piccolo, tutto DENTRO la testata - che ha overflow nascosto,
   quindi taglia di netto quello che sborda - e senza rotazione, perche' ruotare
   di otto gradi allarga il riquadro di una ventina di pixel oltre i suoi bordi
   e quei venti pixel finivano fuori. A meta' opacita' e' una velatura e non una
   fascia, e il testo resta leggibile. */
@media (max-width: 720px) {
	.tre-nastro {
		top: 8px;
		right: -110px;
		width: 23rem;
		height: 20rem;
		opacity: 0.5;
		transform: none;
	}

	/* Sfocatura piu' bassa: una sfocatura enorme su una GPU piccola e' il modo
	   piu' rapido per far decidere a Safari di disegnare un fotogramma e poi
	   fermarsi. */
	.tre-nastro--vivo::before,
	.tre-nastro--vivo::after { filter: blur(26px); }

	/* Il respiro senza rotazione, come il nastro fermo qui. */
	.tre-nastro--vivo { animation-name: tre-respiro-telefono; }
}

@keyframes tre-respiro-telefono {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}


@keyframes tre-respiro-telefono {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}


/* ------------------------------------------------------- la testata chiara */

/* LA TESTATA NON E' UNA COPERTINA.
   Il gradiente sta dietro, sfocato e fuori squadro; il testo resta scuro sul
   bianco. La versione precedente era l'opposto - colore pieno e testo bianco
   con un velo scuro per reggere il contrasto - e pesava come una copertina
   invece di aprire una pagina di prodotto. */
.tre-hero--chiaro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 5rem 5.5rem;
	background: var(--tre-bg);
	color: var(--tre-ink-2);
}

/* La vecchia testata a colore pieno va spenta: la sua regola sta nel foglio di
   base e vincerebbe per ordine di caricamento. */
.tre-hero--chiaro::before { content: none; }

/* LA SFUMATURA IN BASSO.
   Serve quando la testata porta un filmato: la testata contiene anche la
   fascia dei numeri, quindi e' alta, e l'onda arrivava fin sotto le cifre.
   Col solo gradiente non fa danno - e' bianco su bianco - e resta pronto. */
.tre-hero--chiaro::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	/* Misurato: al 42% il velo cominciava quattordici pixel SOTTO la prima
	   cifra della fascia dei numeri, che restava quindi sul riflesso. Al 56%
	   comincia un centinaio di pixel piu' su e le cifre stanno sul bianco. */
	height: 56%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--tre-bg) 62%);
	pointer-events: none;
}

/* Il contenuto sta sopra il velo, il nastro sotto. */
.tre-hero--chiaro > .tre-container { position: relative; z-index: 1; }
.tre-hero--chiaro > .tre-nastro { z-index: 0; }

.tre-hero--chiaro h1 {
	max-width: 17ch;
	color: var(--tre-ink);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	font-weight: 800;
	letter-spacing: -0.032em;
	line-height: 1.04;
}

.tre-hero--chiaro .tre-hero__occhiello {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 1.25rem;
	color: var(--tre-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Il pallino davanti all'occhiello: un segno piccolo che dice "qui comincia",
   al posto del maiuscoletto spaziato. */
.tre-hero--chiaro .tre-hero__occhiello::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tre-accent);
}

/* LA TESTATA E' A DUE COLONNE, anche se non lo dichiara: a sinistra il testo,
   a destra lo sfondo. La colonna del testo si ferma prima, o quello che
   scrive finisce sopra l'onda. Sotto i 900px l'onda passa in fondo e il testo
   riprende tutta la larghezza. */
@media (min-width: 900px) {
	.tre-hero--chiaro.tre-hero--con-filmato .tre-container > * { max-width: 33rem; }
	.tre-hero--chiaro.tre-hero--con-filmato .tre-container > .tre-azioni { max-width: none; }
}

.tre-hero--chiaro .tre-hero__sommario {
	max-width: 56ch;
	margin: 1.375rem 0 0;
	color: var(--tre-ink-2);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
}

.tre-hero--chiaro .tre-azioni { margin-top: 1.875rem; }

/* I pulsanti della proposta sono tondi. */
.tre-hero--chiaro .tre-btn,
.tre-finale .tre-btn,
.tre-vetrina .tre-btn { border-radius: 999px; padding: 0.6875rem 1.25rem; }

.tre-hero--chiaro .tre-btn--ghost {
	border-color: var(--tre-line);
	background: var(--tre-bg);
	color: var(--tre-ink);
}

.tre-hero--chiaro .tre-btn--ghost:hover {
	border-color: var(--tre-accent);
	color: var(--tre-accent);
}

.tre-hero--chiaro .tre-nota {
	margin: 1rem 0 0;
	color: var(--tre-ink-3);
	font-size: 0.875rem;
}

/* La testata di una pagina interna e' piu' bassa: sopra un contenuto da
   leggere non deve rubare la prima schermata. */
.tre-hero--basso { padding-block: 3rem 3rem; }

.tre-hero--basso h1 {
	max-width: 22ch;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
}

/* ----------------------------------------------------------------- l'indice */

/* Le undici sezioni come pastiglie. Non e' un menu: e' una scorciatoia per
   chi arriva da un link di supporto e cerca una risposta sola. */
.tre-indice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tre-indice a {
	padding: 0.4375rem 0.875rem;
	border: 1px solid var(--tre-line);
	border-radius: 999px;
	background: var(--tre-bg);
	color: var(--tre-ink-2);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease;
}

.tre-indice a:hover {
	border-color: var(--tre-accent);
	color: var(--tre-accent);
	text-decoration: none;
}

/* ------------------------------------------------------- le domande a schede */

/* Ogni sezione e' una scheda bianca sul fondo grigio: undici blocchi di
   domande di fila, senza separazione, si leggono come un elenco unico lungo
   trentanove voci. */
.tre-faq__sezione {
	margin-bottom: 1.25rem;
	padding: 1.75rem 1.75rem 0.5rem;
	border-radius: 18px;
	background: var(--tre-bg);
	box-shadow: 0 1px 2px rgba(var(--tre-ink-rgb), 0.04), 0 18px 36px -24px rgba(var(--tre-ink-rgb), 0.18);
}

.tre-faq__sezione h2 {
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

/* L'ultima voce di una scheda non ha bisogno del filetto: lo fa gia' il bordo
   della scheda. */
.tre-faq__sezione .tre-faq__voce:last-child { border-bottom: 0; }

/* Arrivando da un ancoraggio la voce va sotto la testata, non sotto il bordo
   dello schermo. */
.tre-faq__voce { scroll-margin-top: 1.5rem; }

/* ----------------------------------------------------------- la fascia dei numeri */

.tre-numeri {
	display: grid;
	gap: 1.75rem 0;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	padding-block: 2.75rem 3.5rem;
}

.tre-numeri > div {
	padding-inline: 1.75rem;
	border-left: 1px solid var(--tre-line);
}

.tre-numeri > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.tre-numeri b {
	display: block;
	color: var(--tre-ink);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.tre-numeri span {
	display: block;
	max-width: 26ch;
	margin-top: 0.5rem;
	color: var(--tre-ink-2);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------- le card grandi */

.tre-vetrina {
	position: relative;
	overflow: hidden;
	margin-block: 1.75rem;
	padding: 2.25rem 2.25rem 0;
	border-radius: 24px;
	background: var(--tre-bg);
	box-shadow: 0 1px 2px rgba(var(--tre-ink-rgb), 0.04), 0 24px 48px -24px rgba(var(--tre-ink-rgb), 0.22);
}

/* Il velo: due sfumature sovrapposte che scendono da un angolo. Sta in uno
   pseudo-elemento perche' il contenuto deve restarci sopra senza ereditarne
   l'opacita'. */
.tre-vetrina::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tre-vetrina > * { position: relative; }

.tre-vetrina--uno::before {
	background:
		linear-gradient(160deg, rgba(var(--tre-g1-rgb), 0.38), rgba(var(--tre-g1-rgb), 0) 62%),
		radial-gradient(closest-side at 96% 4%, rgba(var(--tre-g2-rgb), 0.34), transparent 70%);
}

.tre-vetrina--due::before {
	background:
		linear-gradient(160deg, rgba(var(--tre-g3-rgb), 0.42), rgba(var(--tre-g3-rgb), 0) 60%),
		radial-gradient(closest-side at 4% 0%, rgba(var(--tre-g2-rgb), 0.3), transparent 70%);
}

.tre-vetrina--tre::before {
	background:
		linear-gradient(160deg, rgba(var(--tre-g4-rgb), 0.38), rgba(var(--tre-g4-rgb), 0) 58%),
		radial-gradient(closest-side at 92% 8%, rgba(var(--tre-g1-rgb), 0.32), transparent 70%);
}

.tre-vetrina h2 {
	max-width: 20ch;
	margin: 0;
	font-size: clamp(1.4375rem, 1.1rem + 1.6vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.024em;
	line-height: 1.14;
}

.tre-vetrina .spiega {
	max-width: 52ch;
	margin: 0.75rem 0 0;
	color: var(--tre-ink-2);
	font-size: 1rem;
}

.tre-vetrina .palco {
	margin-top: 1.875rem;
	padding-bottom: 2.25rem;
}

/* Le schede dentro una vetrina sono bianche e piatte: il colore lo porta gia'
   il velo della card che le contiene, e sommare velo, bordo colorato e ombra
   su ogni elemento e' il modo in cui una pagina diventa rumorosa. */
.tre-vetrina .tre-scheda {
	border-color: rgba(var(--tre-ink-rgb), 0.08);
	background: rgba(255, 255, 255, 0.82);
	box-shadow: none;
}

.tre-vetrina .tre-scheda:hover {
	transform: none;
	box-shadow: 0 10px 15px -3px rgba(var(--tre-ink-rgb), 0.08);
}

/* -------------------------------------------------------- il pannello del prodotto */

.tre-app {
	overflow: hidden;
	border-radius: 14px;
	background: var(--tre-bg);
	box-shadow: 0 10px 15px -3px rgba(var(--tre-ink-rgb), 0.1), 0 4px 6px -4px rgba(var(--tre-ink-rgb), 0.1);
}

.tre-app__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1.125rem;
	background: linear-gradient(to right, rgba(var(--tre-g1-rgb), 0.32), rgba(var(--tre-g4-rgb), 0.28));
}

.tre-app__testa .domanda {
	color: var(--tre-ink);
	font-size: 0.875rem;
	font-style: italic;
	font-weight: 600;
}

.tre-app__testa .base {
	color: var(--tre-ink-2);
	font-size: 0.75rem;
	white-space: nowrap;
}

.tre-app__corpo { padding: 1.125rem; }

.tre-app__nota {
	margin: 0;
	padding: 0.8125rem 1.125rem;
	border-top: 1px solid var(--tre-line);
	color: var(--tre-ink-2);
	font-size: 0.84375rem;
}

.tre-app__nota b { color: var(--tre-ink); font-weight: 700; }

/* ---------------------------------------------- le righe sfalsate dei report */

/* E' il componente che Glimpse usa gia' nei report, applicato qui a un
   contenuto nuovo. Lo sfalsamento e la sovrapposizione di sei pixel danno
   profondita' senza aggiungere bordi: ogni riga sembra un foglio posato. */
.tre-righe { display: flex; flex-direction: column; }

.tre-riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	/* Il testo dentro le righe sta su un pastello chiaro: resta scuro sempre,
	   anche se un giorno il tema avesse una variante notte. */
	color: #111827;
	box-shadow: 0 10px 15px -3px rgba(var(--tre-ink-rgb), 0.1), 0 4px 6px -4px rgba(var(--tre-ink-rgb), 0.1);
}

.tre-riga + .tre-riga { margin-top: -6px; }
.tre-riga:nth-child(odd) { margin-right: 34px; }
.tre-riga:nth-child(even) { margin-left: 34px; }

.tre-riga--c1 { background: rgba(var(--tre-g1-rgb), 0.3); }
.tre-riga--c2 { background: rgba(var(--tre-g3-rgb), 0.3); }
.tre-riga--c3 { background: rgba(var(--tre-g2-rgb), 0.3); }
.tre-riga--c4 { background: rgba(var(--tre-g4-rgb), 0.3); }

.tre-riga .nome {
	flex: 1 1 9.375rem;
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tre-riga .letture {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
}

.tre-riga .lettura {
	min-width: 6.5rem;
	padding: 0.3125rem 0.6875rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.72);
}

.tre-riga .lettura dt {
	color: #4b5563;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tre-riga .lettura dd {
	margin: 1px 0 0;
	color: #111827;
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* L'ASSENZA VA VISTA, NON DEDOTTA.
   "mai nominato" non e' "0%": e' un evento diverso, e uno zero li
   confonderebbe. Il corsivo grigio lo tiene distinto senza spiegazioni. */
.tre-riga .lettura dd.assente {
	color: #9ca3af;
	font-size: 0.9375rem;
	font-style: italic;
	font-weight: 500;
}

.tre-riga .lettura small {
	display: block;
	color: #6b7280;
	font-size: 0.625rem;
	font-weight: 500;
}

.tre-riga .chips {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 0.5rem;
}

.tre-riga .chips span {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	color: #111827;
	font-size: 0.75rem;
}

/* ------------------------------------------------------ il selettore di profondita' */

.tre-app .scelte { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tre-app .scelta {
	padding: 0.5rem 1rem;
	border: 1px solid var(--tre-line);
	border-radius: 999px;
	background: var(--tre-bg);
	color: var(--tre-ink-2);
	font-family: var(--tre-font-testo);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.tre-app .scelta:hover { border-color: var(--tre-accent); color: var(--tre-accent); }

.tre-app .scelta[aria-pressed="true"] {
	border-color: var(--tre-accent);
	background: var(--tre-accent);
	color: #fff;
}

.tre-app .righello { padding: 2.125rem 0.25rem 0.625rem; }
.tre-app .asse { position: relative; height: 64px; }

.tre-app .linea {
	position: absolute;
	top: 40px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--tre-line);
}

.tre-app .tacca {
	position: absolute;
	top: 36px;
	width: 1px;
	height: 8px;
	background: var(--tre-line);
}

.tre-app .tacca span {
	position: absolute;
	top: 13px;
	left: 50%;
	color: var(--tre-ink-3);
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
}

.tre-app .intervallo {
	position: absolute;
	top: 32px;
	height: 8px;
	border-right: 2px solid var(--tre-accent);
	border-left: 2px solid var(--tre-accent);
	border-radius: 4px;
	background: rgba(var(--tre-g2-rgb), 0.55);
	transition: left 700ms cubic-bezier(0.22, 0.8, 0.28, 1), width 700ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

.tre-app .quota {
	position: absolute;
	top: 27px;
	left: 50%;
	width: 2px;
	height: 18px;
	background: var(--tre-ink);
}

.tre-app .quota b {
	position: absolute;
	bottom: 23px;
	left: 50%;
	color: var(--tre-ink);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	transform: translateX(-50%);
}

.tre-app .esiti {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	overflow: hidden;
	margin: 0.375rem 0 0;
	border-radius: 12px;
	background: var(--tre-line);
}

.tre-app .esiti > div { padding: 0.9375rem 1.125rem; background: var(--tre-bg); }

.tre-app .esiti dt {
	color: var(--tre-ink-3);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.tre-app .esiti dd {
	margin: 0.25rem 0 0;
	color: var(--tre-ink);
	font-size: 1.3125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.024em;
}

.tre-app .esiti dd.tenue { color: var(--tre-ink-2); font-size: 1.125rem; font-weight: 600; }

/* ------------------------------------------------------------------ le parole */

.tre-app ul.parole {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tre-app ul.parole li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	padding: 0.6875rem 0.875rem;
	border-radius: 10px;
	background: var(--tre-bg);
	box-shadow: 0 10px 15px -3px rgba(var(--tre-ink-rgb), 0.1), 0 4px 6px -4px rgba(var(--tre-ink-rgb), 0.1);
}

.tre-app .frase {
	display: flex;
	flex: 1 1 16rem;
	min-width: 0;
	flex-direction: column;
	gap: 0.4375rem;
}

.tre-app .frase > span { color: var(--tre-ink); font-size: 0.9375rem; font-weight: 500; }

.tre-app .traccia {
	overflow: hidden;
	height: 5px;
	border-radius: 3px;
	background: var(--tre-line);
}

.tre-app .riempimento {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(to right, var(--tre-accent), rgba(var(--tre-g2-rgb), 1));
	transition: width 900ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

.tre-app .quante {
	color: var(--tre-ink-2);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tre-app .cerca {
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--tre-line);
	border-radius: 999px;
	background: transparent;
	color: var(--tre-ink-2);
	font-family: var(--tre-font-testo);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease;
}

.tre-app .cerca:hover { border-color: var(--tre-accent); color: var(--tre-accent); }

/* --------------------------------------------------------------- la chiusura */

.tre-finale {
	margin-block: 1.75rem;
	padding: 3.25rem 2.5rem;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--tre-accent), var(--tre-serie-2) 55%, #7B5CF0);
	color: rgba(255, 255, 255, 0.82);
}

.tre-finale h2 {
	max-width: 20ch;
	margin: 0;
	color: #fff;
	font-size: clamp(1.625rem, 1.2rem + 2vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.tre-finale p { max-width: 52ch; margin: 1rem 0 0; }

.tre-finale .tre-btn--solid {
	margin-top: 1.625rem;
	background: #fff;
	color: var(--tre-accent);
}

.tre-finale .tre-btn--solid:hover { background: rgba(255, 255, 255, 0.88); color: var(--tre-accent); }

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

@media (max-width: 720px) {
	.tre-vetrina { padding: 1.75rem 1.25rem 0; border-radius: 18px; }

	/* Lo sfalsamento su 375px mangia un terzo della riga: sul telefono le
	   righe tornano allineate e distanziate. */
	.tre-riga:nth-child(odd),
	.tre-riga:nth-child(even) { margin-right: 0; margin-left: 0; }
	.tre-riga + .tre-riga { margin-top: 0.5rem; }

	.tre-numeri > div { padding: 0; border-left: 0; }
	.tre-finale { padding: 2.25rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tre-app .riempimento,
	.tre-app .intervallo { transition: none; }
}