/* ==========================================================================
   TRE - design system

   Nessun colore e nessuna misura sono scritti qui dentro: stanno tutti nelle
   variabili che inc/dynamic-css.php stampa su :root a partire dal Customizer.
   Se in questo file compare un esadecimale, e' un errore.

   La grammatica visiva e' quella dei siti di prodotto ad alta densita' di
   dati: molto bianco, una sola famiglia di caratteri, titoli stretti di
   crenatura, un unico accento cromatico, e il gradiente riservato a un posto
   solo - la testata - dove fa da oggetto e non da decorazione.
   ========================================================================== */

/* --------------------------------------------------------------- fondamenta */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Chi ha chiesto al sistema di ridurre le animazioni non deve subire nemmeno
   lo scorrimento morbido: per alcune persone e' un problema vestibolare, non
   una preferenza estetica. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	/* IL FONDO NON E' BIANCO.
	   Le superfici - card, pannelli, vetrine - sono bianche; il fondo e' il
	   grigio chiarissimo della tavolozza. Con tutti e due bianchi le card
	   sembrano scatole che galleggiano sul nulla, ed e' la loro ombra a
	   disegnare un bordo che non dovrebbe vedersi. */
	background: var(--tre-bg-2);
	color: var(--tre-ink-2);
	font-family: var(--tre-font-testo);
	font-size: var(--tre-p);
	font-weight: var(--tre-peso-testo);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------- tipografia */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--tre-ink);
	font-family: var(--tre-font-titoli);
	font-weight: var(--tre-peso-titoli);
	line-height: 1.12;
	/* La crenatura negativa cresce con il corpo: a 4rem un titolo con
	   spaziatura normale sembra sfilacciato, a 1rem uno stretto sembra
	   compresso. */
	letter-spacing: -0.022em;
	text-wrap: balance;
}

h1 { font-size: var(--tre-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--tre-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--tre-h3); }
h4 { font-size: 1.125rem; }

p {
	margin: 0 0 1.15em;
	text-wrap: pretty;
}

/* La misura di riga: oltre i 72 caratteri l'occhio perde il capo della riga
   successiva. Vale per il testo corrente, non per i titoli. */
.tre-prosa p,
.tre-prosa li {
	max-width: 68ch;
}

a {
	color: var(--tre-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--tre-accent-2);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

strong, b { font-weight: 600; color: var(--tre-ink); }

small { font-size: 0.875rem; }

hr {
	height: 1px;
	margin: 3rem 0;
	border: 0;
	background: var(--tre-line);
}

blockquote {
	margin: 2rem 0;
	padding: 0.2rem 0 0.2rem 1.4rem;
	border-left: 3px solid var(--tre-accent);
	color: var(--tre-ink);
	font-size: 1.15rem;
	line-height: 1.5;
}

code, kbd, samp, pre {
	font-family: var(--tre-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.12em 0.38em;
	border-radius: 4px;
	background: var(--tre-bg-2);
	color: var(--tre-ink);
}

pre {
	overflow-x: auto;
	margin: 1.6rem 0;
	padding: 1.15rem 1.3rem;
	border: 1px solid var(--tre-line);
	border-radius: var(--tre-raggio);
	background: var(--tre-bg-2);
	line-height: 1.55;
}

pre code {
	padding: 0;
	background: none;
}

/* ------------------------------------------------------------- accessibilita' */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Il salto al contenuto deve diventare visibile quando riceve il fuoco:
   invisibile sempre non serve a nessuno. */
.tre-skip-link:focus {
	position: fixed !important;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 10000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.7rem 1.1rem;
	overflow: visible;
	clip: auto;
	clip-path: none;
	border-radius: 6px;
	background: var(--tre-ink);
	color: #fff;
	font-weight: 600;
}

:focus-visible {
	outline: 2px solid var(--tre-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---------------------------------------------------------------- struttura */

.tre-main {
	display: block;
}

.tre-container {
	width: 100%;
	max-width: var(--tre-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* Rompe il contenitore e va a tutta larghezza, anche dentro una colonna di
   Elementor. */
.tre-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.tre-stretta { max-width: 46rem; margin-inline: auto; }

/* Passi di spaziatura verticale. Si riducono sotto i 782px perche' su un
   telefono 8rem di vuoto sono mezzo schermo speso in niente. */
.pt-10 { padding-top: 1rem; }    .pb-10 { padding-bottom: 1rem; }
.pt-20 { padding-top: 2rem; }    .pb-20 { padding-bottom: 2rem; }
.pt-30 { padding-top: 3rem; }    .pb-30 { padding-bottom: 3rem; }
.pt-40 { padding-top: 4rem; }    .pb-40 { padding-bottom: 4rem; }
.pt-60 { padding-top: 6rem; }    .pb-60 { padding-bottom: 6rem; }
.pt-80 { padding-top: 8rem; }    .pb-80 { padding-bottom: 8rem; }

@media (max-width: 782px) {
	.pt-40 { padding-top: 2.5rem; }  .pb-40 { padding-bottom: 2.5rem; }
	.pt-60 { padding-top: 3.5rem; }  .pb-60 { padding-bottom: 3.5rem; }
	.pt-80 { padding-top: 4.5rem; }  .pb-80 { padding-bottom: 4.5rem; }
}

/* ------------------------------------------------------------------- sfondi */

.tre-bg-base { background: var(--tre-bg); }
.tre-bg-alt  { background: var(--tre-bg-2); }

.tre-bg-ink {
	background: var(--tre-ink);
	color: rgba(255, 255, 255, 0.82);
}

.tre-bg-ink h1, .tre-bg-ink h2, .tre-bg-ink h3, .tre-bg-ink h4, .tre-bg-ink strong {
	color: #fff;
}

.tre-bg-accent {
	background: var(--tre-accent);
	color: rgba(255, 255, 255, 0.92);
}

.tre-bg-accent h1, .tre-bg-accent h2, .tre-bg-accent h3, .tre-bg-accent strong {
	color: #fff;
}

/* Il taglio obliquo fra due fasce. Lo fa uno pseudo-elemento inclinato, non
   la fascia stessa: inclinare la fascia inclinerebbe anche il testo. */
.tre-taglio {
	position: relative;
	isolation: isolate;
}

.tre-taglio::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: inherit;
	transform: skewY(-3.5deg);
	transform-origin: 0 0;
}

/* ------------------------------------------------------------------ testata */

/* La testata e' l'unico posto dove compare il gradiente. Ha un taglio
   obliquo in basso e il contenuto sopra, dritto. */
.tre-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4rem, 2rem + 8vw, 9rem) clamp(5rem, 2rem + 9vw, 11rem);
	color: #fff;
}

.tre-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% 12% -10%;
	z-index: -2;
	background: var(--tre-gradiente);
	transform: skewY(-6deg);
	transform-origin: 100% 0;
}

/* Un velo scuro sotto il testo: un gradiente vivo non garantisce contrasto
   sufficiente in nessun punto, e il contrasto non e' un dettaglio estetico. */
.tre-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(var(--tre-ink-rgb), 0.55), rgba(var(--tre-ink-rgb), 0.25));
}

.tre-hero h1 { color: #fff; max-width: 18ch; }

.tre-hero__occhiello {
	display: inline-block;
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.tre-hero__sommario {
	max-width: 52ch;
	margin-bottom: 2rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.5;
}

/* --------------------------------------------------------------- occhielli */

.tre-occhiello {
	display: block;
	margin-bottom: 0.8rem;
	color: var(--tre-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- pulsanti */

.tre-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.68em 1.25em;
	border: 1px solid transparent;
	border-radius: calc(var(--tre-raggio) - 4px);
	font-family: var(--tre-font-testo);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.tre-btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.tre-btn--solid {
	background: var(--tre-accent);
	color: #fff;
	box-shadow: var(--tre-ombra);
}

.tre-btn--solid:hover {
	background: var(--tre-accent-2);
	color: #fff;
	box-shadow: var(--tre-ombra-alta);
}

.tre-btn--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.tre-btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.tre-btn--linea {
	padding-inline: 0;
	background: none;
	color: var(--tre-accent);
}

/* La freccia che avanza: dice "si continua di la'" senza una parola in piu'. */
.tre-btn--linea::after {
	content: "\203A";
	font-size: 1.2em;
	line-height: 1;
	transition: transform 0.15s ease;
}

.tre-btn--linea:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ schede */

.tre-griglia {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.tre-scheda {
	display: flex;
	flex-direction: column;
	padding: 1.6rem;
	border: 1px solid var(--tre-line);
	border-radius: var(--tre-raggio);
	background: var(--tre-bg);
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.tre-scheda:hover {
	transform: translateY(-2px);
	box-shadow: var(--tre-ombra-alta);
}

.tre-scheda h3 { margin-bottom: 0.45rem; }

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

/* La scheda con il filetto colorato in testa: serve a distinguere una voce
   dalle altre senza cambiarle il colore di fondo. */
.tre-scheda--filo { border-top: 3px solid var(--tre-accent); }

/* ---------------------------------------------------------------- etichette */

.tre-pillola {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background: rgba(var(--tre-accent-rgb), 0.1);
	color: var(--tre-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ numeri */

/* I numeri con il loro denominatore sono il contenuto portante di questo
   tema, non un ornamento: hanno un blocco loro. */
.tre-cifra {
	font-family: var(--tre-font-titoli);
	font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--tre-ink);
}

.tre-cifra__nota {
	display: block;
	margin-top: 0.5rem;
	color: var(--tre-ink-3);
	font-family: var(--tre-font-testo);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
}

/* L'intervallo di confidenza accanto alla cifra. */
.tre-cifra__intervallo {
	color: var(--tre-ink-3);
	font-family: var(--tre-font-mono);
	font-size: 0.5em;
	font-weight: 500;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ tabelle */

table {
	width: 100%;
	margin: 1.8rem 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

/* Una tabella larga scorre dentro il suo contenitore: non deve mai far
   scorrere la pagina di lato. */
.tre-tabella { overflow-x: auto; }

th, td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--tre-line);
	text-align: left;
	vertical-align: top;
}

th {
	color: var(--tre-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Le colonne di numeri si leggono incolonnate a destra e con le cifre di
   larghezza uguale, o il confronto fra due righe non si fa a colpo d'occhio. */
td.num, th.num {
	text-align: right;
	font-family: var(--tre-font-mono);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- fisarmonica */

/* Le domande frequenti restano nel DOM e vengono nascoste con il CSS, non
   caricate dopo: un modello che legge la pagina le deve trovare tutte. */
.tre-faq__voce {
	border-bottom: 1px solid var(--tre-line);
}

/* Il pulsante sta dentro un h3: la domanda e' un titolo anche per chi legge
   la pagina con uno screen reader o con una macchina, non solo un comando.
   L'h3 va azzerato, o si porta dietro i margini e il corpo dei titoli. */
.tre-faq__titolo {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

.tre-faq__sezione {
	margin-bottom: 3rem;
}

.tre-faq__sezione h2 {
	margin-bottom: 1rem;
	font-size: var(--tre-h3);
}

.tre-faq__domanda {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.15rem 0;
	border: 0;
	background: none;
	color: var(--tre-ink);
	font-family: var(--tre-font-titoli);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.tre-faq__domanda:hover {
	color: var(--tre-accent);
}

/* Il segno che la voce si apre. Senza, una domanda chiusa sembra un titolo e
   nessuno ci clicca: l'affordance non e' decorazione. Ruota invece di
   cambiare, cosi' lo stato aperto e quello chiuso sono lo stesso oggetto. */
.tre-faq__domanda::after {
	content: "";
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin-top: 0.42em;
	border-right: 2px solid var(--tre-accent);
	border-bottom: 2px solid var(--tre-accent);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.tre-faq__domanda[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.tre-faq__risposta {
	padding-bottom: 1.3rem;
	max-width: 68ch;
}

.tre-faq__risposta > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------- testata e piede */

/* La riserva: povera di proposito. Il giorno in cui esiste un modello
   Elementor per la testata, queste regole smettono di avere un elemento su
   cui applicarsi e restano inerti. */

.tre-testata {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	transition: border-color 0.2s ease;
}

/* La riga di separazione compare solo quando la pagina e' scorsa: in cima,
   sopra la testata chiara, un filetto taglierebbe il nastro sfumato. */
.tre-testata__riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: 0.875rem;
}

.tre-testata__marchio {
	color: var(--tre-accent);
	font-family: var(--tre-font-titoli);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.tre-testata__marchio:hover { color: var(--tre-accent-2); text-decoration: none; }
.tre-testata__marchio img { max-height: 34px; width: auto; }

.tre-testata__menu { margin-left: auto; }

.tre-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tre-menu li { margin: 0; }

.tre-menu a {
	color: var(--tre-ink-2);
	font-size: var(--tre-menu);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
}

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

/* La voce corrente si riconosce senza dover leggere: il colore da solo non
   basta a chi non lo distingue, quindi c'e' anche il filetto sotto. */
.tre-menu .current-menu-item > a,
.tre-menu .current_page_item > a {
	color: var(--tre-accent);
	box-shadow: inset 0 -2px 0 var(--tre-accent);
}

/* Sul telefono il menu va sotto il marchio, su tutta la riga. Vale quando il
   JavaScript non c'e': con il JavaScript diventa il menu a scomparsa qui
   sotto. */
@media (max-width: 640px) {
	.tre-testata__menu { margin-left: 0; flex-basis: 100%; }
	.tre-menu { gap: 0.25rem 1.25rem; font-size: 0.875rem; }
}

/* IL MENU A SCOMPARSA SUL TELEFONO.

   Con quattro voci il menu andava a capo due volte e la testata diventava
   alta 128 pixel, un sesto dello schermo, fissa sopra ogni pagina. Sotto i
   768 pixel restano il marchio e un pulsante; le voci stanno in un pannello
   che scende sotto la testata, in colonna e grandi da toccare.

   Tutto dipende da .con-hamburger, che mette theme.js: senza JavaScript il
   pulsante non c'e' e il menu e' quello di sopra.

   Il pannello e' quasi opaco, non vetro: sta dentro la testata, che e' gia'
   sfocata, e il browser non sa sfocare una seconda volta dentro un elemento
   sfocato. Un bianco trasparente senza sfocatura, sopra la hero colorata, non
   si leggerebbe. */
.tre-testata__apri {
	display: none;
}

@media (max-width: 767px) {
	.tre-testata.con-hamburger .tre-testata__riga {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.tre-testata.con-hamburger .tre-testata__apri {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 44px;
		height: 44px;
		margin: 0 -10px 0 auto;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--tre-ink);
		cursor: pointer;
	}

	.tre-testata.con-hamburger .tre-testata__apri:focus-visible {
		outline: 2px solid var(--tre-accent);
		outline-offset: 2px;
	}

	/* Tre linee che diventano una X. */
	.tre-testata__linee,
	.tre-testata__linee::before,
	.tre-testata__linee::after {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.25s ease, background-color 0.2s ease;
	}

	.tre-testata__linee {
		position: relative;
	}

	.tre-testata__linee::before,
	.tre-testata__linee::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.tre-testata__linee::before { top: -7px; }
	.tre-testata__linee::after  { top: 7px; }

	.tre-testata.is-aperta .tre-testata__linee {
		background: transparent;
	}

	.tre-testata.is-aperta .tre-testata__linee::before {
		transform: translateY(7px) rotate(45deg);
	}

	.tre-testata.is-aperta .tre-testata__linee::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Il pannello: chiuso e' invisibile anche ai lettori di schermo. */
	.tre-testata.con-hamburger .tre-testata__menu {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		flex-basis: auto;
		margin: 0;
		padding: 6px 20px 18px;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 22px 34px -20px rgba(20, 18, 43, 0.35);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.tre-testata.con-hamburger.is-aperta .tre-testata__menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	.tre-testata.con-hamburger .tre-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.tre-testata.con-hamburger .tre-menu li + li {
		border-top: 1px solid rgba(20, 18, 43, 0.08);
	}

	.tre-testata.con-hamburger .tre-menu a {
		display: block;
		padding: 14px 0;
		font-size: 1.0625rem;
	}

	.tre-testata.con-hamburger .tre-menu .current-menu-item > a,
	.tre-testata.con-hamburger .tre-menu .current_page_item > a {
		box-shadow: none;
	}
}

/* IL SELETTORE DELLE LINGUE.

   Un interruttore IT | EN: una capsula con dentro un cursore del colore del
   nastro, sotto la lingua in cui si sta leggendo. Passando sull'altra lingua
   il cursore si allunga verso di lei, come a indicare la strada; scegliendola
   ci scivola sopra, e solo dopo la pagina cambia (theme.js).

   Il cursore e' largo meta' capsula meno il bordo, e si sposta di una sua
   larghezza per ogni lingua: --tre-lingue-indice arriva da inc/lingue.php e,
   al clic, da theme.js. */
.tre-lingue {
	position: relative;
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: center;
	padding: 3px;
	border-radius: 999px;
	background: rgba(var(--tre-ink-rgb), 0.05);
	box-shadow: inset 0 0 0 1px rgba(var(--tre-ink-rgb), 0.09);
	isolation: isolate;
}

.tre-lingue__cursore {
	position: absolute;
	z-index: -1;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc(50% - 3px);
	border-radius: 999px;
	background: var(--tre-gradiente);
	box-shadow: var(--tre-ombra);
	transform: translateX(calc(var(--tre-lingue-indice, 0) * 100%));
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tre-lingue:not(.is-in-viaggio):has(.tre-lingue__voce:not(.is-attiva):hover) .tre-lingue__cursore {
	width: calc(100% - 6px);
	transform: translateX(0);
}

.tre-testata .tre-menu a.tre-lingue__voce {
	display: block;
	min-width: 2.75rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	color: var(--tre-ink-3);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: center;
	transition: color 0.2s ease;
}

.tre-testata .tre-menu a.tre-lingue__voce:hover,
.tre-testata .tre-menu a.tre-lingue__voce.is-attiva {
	color: var(--tre-ink);
}

.tre-testata .tre-menu a.tre-lingue__voce:focus-visible {
	outline: 2px solid var(--tre-accent);
	outline-offset: 2px;
}

/* L'invito all'altra lingua: una nuvoletta come una risposta in chat, con i
   puntini di chi sta scrivendo prima della frase. Sta nella testata, non nel
   menu, cosi' sul telefono si vede anche a pannello chiuso; theme.js la mette
   sotto il selettore, o sotto il pulsante del menu. */
.tre-lingue-nuvola {
	position: absolute;
	top: calc(100% + 10px);
	right: 20px;
	z-index: 101;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	max-width: min(24rem, calc(100vw - 24px));
	padding: 0.4375rem 0.4375rem 0.4375rem 1rem;
	border: 2px solid transparent;
	border-radius: 18px 6px 18px 18px;
	background: linear-gradient(#fff, #fff) padding-box, var(--tre-gradiente) border-box;
	box-shadow: var(--tre-ombra-alta);
	color: var(--tre-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px) scale(0.94);
	transform-origin: top right;
	transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tre-lingue-nuvola.is-visibile {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* Con il menu del telefono aperto la nuvoletta si mette da parte: starebbe
   sopra il pannello e ne coprirebbe le prime voci. Torna quando si chiude. */
.tre-testata.is-aperta .tre-lingue-nuvola.is-visibile {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px) scale(0.94);
}

.tre-lingue-nuvola__testo { display: none; }
.tre-lingue-nuvola.is-scritta .tre-lingue-nuvola__testo { display: inline; }
.tre-lingue-nuvola.is-scritta .tre-lingue-nuvola__puntini { display: none; }

.tre-lingue-nuvola__testo a {
	color: var(--tre-accent);
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.tre-lingue-nuvola__testo a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tre-lingue-nuvola__puntini {
	display: inline-flex;
	gap: 4px;
	padding: 0.5rem 0.25rem;
}

.tre-lingue-nuvola__puntini i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tre-accent);
	opacity: 0.35;
	animation: tre-puntini 1s ease-in-out infinite;
}

.tre-lingue-nuvola__puntini i:nth-child(2) { animation-delay: 0.15s; }
.tre-lingue-nuvola__puntini i:nth-child(3) { animation-delay: 0.3s; }

@keyframes tre-puntini {
	0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
	40%           { opacity: 1;    transform: translateY(-3px); }
}

.tre-lingue-nuvola__chiudi {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--tre-ink-rgb), 0.06);
	color: var(--tre-ink-2);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

.tre-lingue-nuvola__chiudi:hover { background: rgba(var(--tre-ink-rgb), 0.12); color: var(--tre-ink); }

.tre-lingue-nuvola__chiudi:focus-visible,
.tre-lingue-nuvola__testo a:focus-visible {
	outline: 2px solid var(--tre-accent);
	outline-offset: 2px;
}

/* Nel pannello del telefono il selettore sta nella sua riga, con le lingue
   grandi da toccare. */
@media (max-width: 767px) {
	.tre-testata.con-hamburger .tre-menu li.tre-lingue-voce {
		padding: 12px 0;
	}

	.tre-testata.con-hamburger .tre-menu a.tre-lingue__voce {
		display: block;
		min-width: 3.5rem;
		padding: 0.5rem 1rem;
		font-size: 0.9375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tre-testata__linee,
	.tre-testata__linee::before,
	.tre-testata__linee::after,
	.tre-testata.con-hamburger .tre-testata__menu,
	.tre-lingue__cursore,
	.tre-lingue-nuvola {
		transition: none;
	}

	.tre-lingue-nuvola__puntini i {
		animation: none;
	}
}

.tre-piede {
	margin-top: 3rem;
	border-top: 1px solid var(--tre-line);
	background: var(--tre-bg);
}

.tre-piede__riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: 1.75rem;
	color: var(--tre-ink-3);
	font-size: 0.875rem;
}

.tre-piede__marchio {
	color: var(--tre-accent);
	font-family: var(--tre-font-titoli);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.tre-piede__menu { margin-left: auto; }
.tre-piede__nota { margin-left: auto; }

@media (max-width: 640px) {
	.tre-piede__menu,
	.tre-piede__nota { margin-left: 0; }
}

/* ------------------------------------------------------------------ avvisi */

/* L'avviso "manca il template Elementor": lo vede solo chi puo' rimediare. */
.tre-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.9rem;
	max-width: var(--tre-container);
	margin: 1.5rem auto;
	padding: 1rem 1.25rem;
	border: 1px dashed var(--tre-line);
	border-radius: var(--tre-raggio);
	background: var(--tre-bg-2);
	font-size: 0.9375rem;
}

.tre-notice__text { color: var(--tre-ink); font-weight: 600; }
.tre-notice__hint { color: var(--tre-ink-3); font-size: 0.8125rem; width: 100%; }

/* ------------------------------------------------------------------ riserva */

/* Il minimo leggibile mentre i template non ci sono ancora. Volutamente
   spoglio: non deve diventare un secondo tema da mantenere. */
.tre-riserva { padding-block: 3rem 4rem; }
.tre-riserva__titolo { margin-bottom: 1.5rem; }
.tre-riserva__elenco { padding-left: 1.1rem; }
.tre-riserva__elenco li { margin-bottom: 0.5rem; }
.tre-riserva__data { color: var(--tre-ink-3); font-size: 0.875rem; }
.tre-riserva__pagine { margin-top: 2rem; }

/* -------------------------------------------------------- allineamento testo */

.tre-text-left   { text-align: left; }
.tre-text-center { text-align: center; }
.tre-text-right  { text-align: right; }
.tre-uppercase   { text-transform: uppercase; letter-spacing: 0.08em; }

/* Un blocco centrato deve centrare anche quello che sta dentro, altrimenti il
   paragrafo con max-width resta incollato a sinistra. */
.tre-text-center .tre-prosa p,
.tre-text-center p { margin-inline: auto; }