/* Montserrat e Barlow sono i caratteri di snupers.com: qui servono alle schede
   in griglia, che devono essere identiche a quelle del ramo retail. Montserrat
   è anche il carattere del motto nel logo. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
}

:root {
	--verde: #2d6a45;
	--verde-scuro: #215734;
	--verde-notte: #12281d;
	--verde-medio: #579246;
	--lime: #8bc348;
	--lime-scuro: #3b6d11;
	--azzurro: #e8f4fd;
	--azzurro-bordo: #d7eaf8;
	--azzurro-testo: #0c447c;
	--verde-tenue: #eff7f2;
	--carta: #ffffff;
	--fondo: #f7faf8;
	--inchiostro: #12281d;
	--inchiostro-tenue: #4d5f55;
	--grigio: #6b7d73;
	--bordo: #e2ebe5;
	--rosso-fondo: #faf0f0;
	--rosso-testo: #8c2626;

	/* Caratteri di snupers.com: Montserrat per titoli ed elementi marcati,
	   Barlow per il testo corrente. Allineano il ramo educational al retail. */
	--famiglia-titoli: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--famiglia-testo: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--famiglia-base: var(--famiglia-testo);

	/* Altezza della testata. Sta qui perché la usano in due: la testata stessa
	   e la barra dei filtri, che ci si incolla sotto. Erano due numeri scritti
	   a mano e si erano già scollati — 84 contro 74, con la barra che spariva
	   di dieci pixel sotto la testata. */
	--altezza-testata: 84px;

	--larghezza: 1200px;
	--larghezza-testo: 68ch;
	--raggio: 10px;
	--raggio-grande: 16px;

	--passo-1: 0.5rem;
	--passo-2: 1rem;
	--passo-3: 1.5rem;
	--passo-4: 2.5rem;
	--passo-5: 4rem;
	--passo-6: 6rem;

	--transizione: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
	margin: 0;
	background: var(--carta);
	color: var(--inchiostro);
	font-family: var(--famiglia-testo);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--verde);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

h1, h2, h3, h4 {
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0 0 var(--passo-2);
	text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 var(--passo-2); }

/* ------------------------------------------------------------------ *
 * Utilità
 * ------------------------------------------------------------------ */

.contenitore {
	width: min(100% - 2.5rem, var(--larghezza));
	margin-inline: auto;
}

/* Griglie di schede: occupano tutta la larghezza della finestra, non i 1200 px
   del contenitore normale. Il margine laterale resta stretto, come sulle
   schede tour di snupers.com. */
.contenitore--largo {
	width: calc(100% - 2.5rem);
	max-width: none;
}

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

/* Contenuto che esiste solo sul foglio: l'intestazione con marchio, recapiti e
   indirizzo della pagina. A schermo sarebbe un doppione della testata e del
   piede, sul foglio è ciò che rende il documento riconoscibile. Il blocco
   `@media print` la riporta a `display: block`. */
.solo-stampa {
	display: none;
}

.salta-al-contenuto {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--verde);
	color: #fff;
	padding: var(--passo-2);
}

.salta-al-contenuto:focus {
	left: 0;
}

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

.occhiello {
	/* Non sotto i 12 px: più in piccolo un testo tutto maiuscolo e spaziato
	   diventa faticoso da leggere su schermo piccolo. */
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--verde-medio);
	margin: 0 0 var(--passo-1);
}

/* ------------------------------------------------------------------ *
 * Intestazione
 * ------------------------------------------------------------------ */

.testata {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--bordo);
}

.testata__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--passo-3);
	min-height: var(--altezza-testata);
}

.marchio {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
	color: var(--verde-notte);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
}

.marchio--immagine img {
	max-height: 52px;
	width: auto;
}

.marchio span {
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--verde-medio);
	margin-top: 3px;
}

.navigazione ul {
	display: flex;
	align-items: center;
	gap: var(--passo-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* La barra lime cresce da sinistra invece di comparire tutta insieme: è lo
   stesso movimento delle voci delle tendine e del velo sulle schede. Prima era
   un `border-bottom` che passava da trasparente a lime — si accendeva, non
   entrava.

   `inline-block` è necessario: su un elemento in linea che va a capo — succede
   nel menu a scomparsa su schermo stretto — uno pseudo-elemento in posizione
   assoluta si aggancia solo all'ultimo frammento di riga. */
.navigazione a {
	position: relative;
	display: inline-block;
	color: var(--inchiostro);
	text-decoration: none;
	font-size: 0.98rem;
	padding: 6px 0;
}

.navigazione a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.navigazione a:hover::after,
.navigazione a:focus-visible::after,
.navigazione .current-menu-item > a::after {
	transform: scaleX(1);
}

/* La pagina in cui ci si trova non è un'animazione: la sua barra c'è e basta,
   altrimenti a ogni caricamento comparirebbe strisciando. */
.navigazione .current-menu-item > a::after {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.navigazione a::after {
		transition: none;
	}
}

.bottone {
	display: inline-flex;
	align-items: center;
	/* Almeno 44 px: è la dimensione minima perché un dito colpisca il
	   bersaglio senza sbagliare. Con il solo padding il pulsante si fermava
	   a 42. */
	min-height: 44px;
	gap: 8px;
	background: var(--verde);
	color: #fff;
	border: 1px solid var(--verde);
	padding: 0.7rem 1.35rem;
	/* Spigolo vivo su tutti i pulsanti del sito, come il modulo di ricerca
	   della home e i nastri delle schede. */
	border-radius: 0;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--transizione), transform var(--transizione);
}

.bottone:hover {
	background: var(--verde-scuro);
	transform: translateY(-1px);
}

.bottone--chiaro {
	background: transparent;
	color: var(--verde);
}

.bottone--chiaro:hover {
	background: var(--verde-tenue);
	color: var(--verde-scuro);
}

/* Il pulsante d'azione principale. Si chiamava `--lime` e lo era davvero:
   fondo lime con testo quasi nero. Il lime però è troppo chiaro per reggere
   un testo chiaro — bianco su lime dà **2,10:1**, misurato, illeggibile — e
   il testo scuro su fondo acido non convinceva il committente. Delle due
   uscite possibili si è scelta la seconda: fondo scuro, testo bianco.

   La classe è stata rinominata `--forte` perché `--lime` ora descriveva un
   colore che non c'è più, e un nome che mente costa più di una rinomina. */
.bottone--forte {
	background: var(--verde-scuro);
	border-color: var(--verde-scuro);
	color: #fff;
}

.bottone--forte:hover {
	background: var(--verde-notte);
	border-color: var(--verde-notte);
}

.apri-menu {
	display: none;
	background: none;
	border: 0;
	font: inherit;
	color: var(--verde-scuro);
	cursor: pointer;
	/* I 44 px valgono anche qui: con il solo padding attorno a un'icona da
	   22 px il bersaglio si fermava a 38, sotto il minimo per un dito. */
	min-width: 44px;
	min-height: 44px;
	padding: 8px;
	place-items: center;
}

/* Le tre linee: una è l'elemento, le altre due i suoi pseudo-elementi.
   `currentColor` le lega al colore del pulsante, come le altre icone. */
.apri-menu__icona,
.apri-menu__icona::before,
.apri-menu__icona::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform var(--transizione), background-color var(--transizione);
}

.apri-menu__icona {
	position: relative;
}

.apri-menu__icona::before,
.apri-menu__icona::after {
	content: "";
	position: absolute;
	left: 0;
}

.apri-menu__icona::before {
	top: -7px;
}

.apri-menu__icona::after {
	top: 7px;
}

/* A menu aperto le tre linee diventano una croce: la linea di mezzo sparisce e
   le altre due si sovrappongono ruotate. Lo stato lo detta `aria-expanded`, che
   il copione aggiorna già: nessuna classe in più da tenere allineata, e
   l'aspetto non può divergere da ciò che viene annunciato. */
.apri-menu[aria-expanded="true"] .apri-menu__icona {
	background: transparent;
}

.apri-menu[aria-expanded="true"] .apri-menu__icona::before {
	transform: translateY(7px) rotate(45deg);
}

.apri-menu[aria-expanded="true"] .apri-menu__icona::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.apri-menu__icona,
	.apri-menu__icona::before,
	.apri-menu__icona::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Motivo geometrico ricorrente
 * ------------------------------------------------------------------ */

.arco,
.disco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.arco {
	border: 10px solid var(--lime);
	opacity: 0.5;
}

.disco {
	background: var(--verde-scuro);
}

/* ------------------------------------------------------------------ *
 * Apertura della homepage
 * ------------------------------------------------------------------ */

.apertura {
	position: relative;
	background: var(--verde);
	color: #fff;
	overflow: hidden;
	padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
	isolation: isolate;
}

/* Ordine di sovrapposizione dell'apertura, dal fondo alla superficie:
   fotografia (-3), filmato (-2), gradiente (-1), testo (in flusso).
   Il filmato sta sopra la fotografia, che continua a fargli da primo
   fotogramma, ma resta sotto il gradiente e sotto il testo. */
.apertura__sfondo {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.34;
	transition: opacity 900ms ease;
	z-index: -3;
}

/* Quando il filmato entra in onda la fotografia si ritira.
   Le due immagini sono diverse — una ferma e una in movimento — e sommate
   al 34% ciascuna si leggevano come una sovrapposizione confusa. Si danno il
   cambio con la stessa durata, quindi la somma resta costante: nessun
   momento in cui l'apertura si schiarisce o si scurisce di colpo. */
.apertura.filmato-attivo .apertura__sfondo {
	opacity: 0;
}

.apertura::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(33, 87, 52, 0.35), rgba(18, 40, 29, 0.75));
	z-index: -1;
}

.apertura .disco {
	width: 420px;
	height: 420px;
	top: -180px;
	right: -120px;
	background: rgba(255, 255, 255, 0.05);
}

.apertura .arco {
	width: 300px;
	height: 300px;
	bottom: -170px;
	right: 12%;
	opacity: 0.35;
}

.apertura h1 {
	color: #fff;
	max-width: 15ch;
	margin-bottom: var(--passo-3);
}

.apertura__occhiello {
	color: var(--lime);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: var(--passo-2);
}

.apertura__sommario {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: #d5e7dc;
	max-width: 46ch;
	margin-bottom: var(--passo-4);
}

/* ------------------------------------------------------------------ *
 * Ricerca
 * ------------------------------------------------------------------ */

/* Contenitore di altezza nulla: il modulo di ricerca vi si centra e resta a
   cavallo della linea fra l'apertura e la sezione seguente, metà sopra e metà
   sotto. L'altezza nulla evita di dover conoscere in anticipo quella del
   modulo, che cambia con la larghezza della finestra. */
.ricerca-ponte {
	position: relative;
	z-index: 20;
	height: 0;
	display: flex;
	align-items: center;
}

.ricerca-ponte > .contenitore {
	width: min(100% - 2.5rem, var(--larghezza));
}

/* La sezione che segue deve lasciare spazio alla metà sporgente del modulo. */
.ricerca-ponte + .sezione {
	padding-top: clamp(5rem, 9vw, 7.5rem);
}

@media (max-width: 780px) {
	/* Su schermi stretti il modulo diventa alto e a cavallo starebbe male:
	   torna nel flusso, subito sotto l'apertura. */
	.ricerca-ponte {
		height: auto;
		display: block;
		margin-top: calc(-1 * var(--passo-4));
	}
}

.ricerca {
	background: rgba(255, 255, 255, 0.97);
	border-radius: 0;
	padding: var(--passo-3);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--passo-2);
	align-items: end;
	box-shadow: 0 4px 18px rgba(18, 40, 29, 0.14);
}

.ricerca label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--verde-medio);
	font-weight: 500;
	margin-bottom: 6px;
}

.ricerca select,
.ricerca input[type="search"] {
	width: 100%;
	font: inherit;
	font-size: 0.98rem;
	color: var(--inchiostro);
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: 0;
	padding: 0.68rem 0.8rem;
	appearance: none;
	transition: border-color var(--transizione);
}

/* Lo spigolo vivo ora è nella regola base di `.bottone`: qui non va ripetuto. */
.ricerca .bottone {
	justify-content: center;
	width: 100%;
	padding-block: 0.72rem;
}

/* ------------------------------------------------------------------ *
 * Tendine costruite a mano
 *
 * Sostituiscono le select native, le cui voci sono disegnate dal sistema
 * operativo e non si possono animare. La select resta nel documento, nascosta,
 * e continua a portare il valore inviato dal modulo.
 * ------------------------------------------------------------------ */

.tendina {
	position: relative;
}

/* La select originale resta nel documento per portare il valore al modulo, ma
   non deve occupare spazio. Il selettore è più specifico di `.ricerca select`,
   che altrimenti le rimetterebbe "width: 100%" e la farebbe sporgere oltre il
   bordo destro, con scorrimento orizzontale sotto gli 800 px.
   Un campo con "display: none" viene comunque inviato con il modulo. */
.ricerca select.tendina__nativa {
	display: none;
}

.tendina__campo {
	width: 100%;
	text-align: left;
	font: inherit;
	font-size: 0.98rem;
	color: var(--inchiostro);
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: 0;
	padding: 0.68rem 2.2rem 0.68rem 0.8rem;
	cursor: pointer;
	position: relative;
}

/* Freccia disegnata con i bordi, senza immagini. */
.tendina__campo::after {
	content: "";
	position: absolute;
	right: 0.9rem;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--verde-medio);
	border-bottom: 2px solid var(--verde-medio);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--transizione);
}

.tendina.aperta .tendina__campo::after {
	transform: translateY(-30%) rotate(225deg);
}

/* Posizione fissa e non assoluta: il modulo di ricerca sta dentro `.apertura`,
   che ha `overflow: hidden` per contenere i motivi geometrici. Un elenco in
   posizione assoluta verrebbe ritagliato dai bordi dell'apertura. Le coordinate
   le calcola il JavaScript e le aggiorna allo scorrimento. */
.tendina__elenco {
	position: fixed;
	z-index: 60;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	/* Il colore va dichiarato: dentro `.apertura` il testo eredita il bianco. */
	color: var(--inchiostro);
	border: 1px solid var(--bordo);
	box-shadow: 0 8px 26px rgba(18, 40, 29, 0.2);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tendina__voce {
	padding: 0.55rem 0.8rem;
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--inchiostro);
	/* Alte almeno 44 px: con il solo padding si fermavano a 38, sotto la
	   soglia in cui un dito sbaglia bersaglio. */
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* La barra corre per tutta la larghezza della riga, uguale per ogni voce:
   ancorarla al testo la faceva cambiare di lunghezza a ogni voce, con un
   effetto a scalini che confonde invece di guidare. */
.tendina__voce {
	position: relative;
}

.tendina__voce::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tendina__voce.in-evidenza::after,
.tendina__voce:hover::after {
	transform: scaleX(1);
}

.tendina__voce[aria-selected="true"] {
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.tendina__voce::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Sezioni
 * ------------------------------------------------------------------ */

.sezione {
	padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.sezione--tenue {
	background: var(--fondo);
}

.sezione__testa {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--passo-3);
	margin-bottom: var(--passo-4);
	flex-wrap: wrap;
}

.sezione__testa h2 {
	margin: 0;
	max-width: 20ch;
}

/* ------------------------------------------------------------------ *
 * Griglia e schede
 * ------------------------------------------------------------------ */

/* Cinque schede per riga a tutta larghezza. Sotto i 1400 px si scende per
   gradi fino a una sola colonna: una scheda più stretta di 210 px non è
   leggibile. Le schede di una stessa riga hanno sempre la stessa altezza,
   perché la griglia le distende (comportamento predefinito di `stretch`). */
.griglia {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 1400px) {
	.griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
	.griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.griglia { grid-template-columns: 1fr; }
}

/* I viaggi simili in fondo alla scheda sono tre e stanno nel contenitore
   normale: cinque colonne li lascerebbero schiacciati a sinistra. Dichiarata
   dopo le soglie di `.griglia`, che altrimenti la sovrascriverebbero. */
.griglia--tre {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.griglia--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.griglia--tre { grid-template-columns: 1fr; }
}

/* Scheda ricalcata su quelle di snupers.com: nessun angolo arrotondato,
   nessun bordo, ombra diffusa su tutti i lati. Valori rilevati dal sito. */
.scheda {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--carta);
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 15px rgba(24, 24, 24, 0.15);
	transition: box-shadow var(--transizione);
}

.scheda:hover {
	box-shadow: 0 0 22px rgba(24, 24, 24, 0.26);
}

/* La figura ritaglia il proprio contenuto: senza, l'arco decorativo delle
   schede prive di fotografia deborda di 60 px a destra e 80 in basso, e
   sull'ultima colonna della griglia produce scorrimento orizzontale. I nastri
   possono sporgere perché stanno fuori dalla figura, figli della scheda. */
.scheda__figura {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--verde);
	overflow: hidden;
}

/* Al passaggio del mouse la fotografia si vela di verde e sotto compare una
   barra piena: è il comportamento delle schede tour di snupers.com. Non si
   solleva la scheda, così la griglia resta ferma. */
.scheda__figura::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--verde);
	opacity: 0;
	transition: opacity var(--transizione);
	pointer-events: none;
	z-index: 1;
}

.scheda:hover .scheda__figura::after {
	opacity: 0.42;
}

.scheda__figura::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: var(--lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transizione);
	z-index: 3;
}

.scheda:hover .scheda__figura::before {
	transform: scaleX(1);
}

.scheda__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.scheda__figura .arco {
	width: 150px;
	height: 150px;
	bottom: -80px;
	right: -60px;
	border-width: 8px;
	opacity: 0.45;
}

/* Nastri sovrapposti alla fotografia, come sulle schede tour di snupers.com:
   rettangolari, sporgenti di 5 px oltre l'angolo in alto a sinistra, con una
   piega d'ombra triangolare che dà profondità. Sopra la sezione tematica, sotto
   la durata — dove il retail mette il prezzo, che qui non esiste. */
.nastro {
	position: absolute;
	left: -5px;
	z-index: 2;
	font-family: var(--famiglia-titoli);
	color: #fff;
	white-space: nowrap;
	max-width: calc(100% + 5px);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* La piega: un triangolo scuro sotto l'angolo sinistro del nastro. */
.nastro::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 0;
	height: 0;
	border-width: 5px 5px 0 0;
	border-style: solid;
	border-color: var(--verde-notte) transparent transparent transparent;
}

.nastro--sezione {
	top: -5px;
	background: #2e6f40;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 3px 20px;
}

.nastro--durata {
	top: 22px;
	background: #a8cd3b;
	font-size: 1rem;
	font-weight: 800;
	padding: 3px 20px;
}

.nastro--durata::after {
	border-top-color: #6c8b1f;
}

.scheda__corpo {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

/* Valori rilevati da snupers.com: Montserrat 800, 20 px, spaziatura -1 px.
   Sul retail i titoli dei tour sono scritti in maiuscolo nel database; qui i
   titoli sono in forma normale, quindi il maiuscolo lo mette il foglio di
   stile. */
.scheda__titolo {
	font-family: var(--famiglia-titoli);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	/* Due righe fisse: così le materie partono alla stessa altezza in tutte
	   le schede e la riga resta ordinata anche con titoli di lunghezza
	   molto diversa. */
	min-height: calc(2 * 1.2em);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scheda__titolo a {
	color: var(--inchiostro);
	text-decoration: none;
}

.scheda__titolo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.scheda__sottotitolo {
	color: var(--inchiostro-tenue);
	font-size: 0.95rem;
	line-height: 1.45;
	margin: 0;
}

/* Elenco delle materie, al posto delle categorie tour del retail: Barlow 14 px
   in nero, due righe al massimo. Il taglio tiene uniforme l'altezza delle
   schede, dove le materie variano da una a sei. */
.scheda__materie {
	font-family: var(--famiglia-testo);
	color: #181818;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scheda__dato {
	font-family: var(--famiglia-testo);
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bordo);
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.875rem;
	color: #181818;
}

.scheda__icona {
	flex: none;
	color: #a8cd3b;
}

.scheda__dati {
	margin-top: auto;
	padding-top: var(--passo-2);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.86rem;
	color: var(--grigio);
}

.scheda__dati span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* ------------------------------------------------------------------ *
 * Archivio e filtri
 * ------------------------------------------------------------------ */

.intestazione-archivio {
	background: var(--verde);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.intestazione-archivio h1 {
	color: #fff;
	margin-bottom: var(--passo-1);
}

.intestazione-archivio p {
	color: #cfe6d8;
	max-width: 52ch;
	margin: 0;
}

/* I dati del termine sulle pagine di tassonomia: «12 itinerari · 2-5 giorni».
   Stesso colore dei paragrafi dell'intestazione e non il lime, che qui non è
   mai stato misurato sul composito del mosaico: il rilievo lo dà il peso, che
   non costa contrasto. */
.intestazione-archivio__dati {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.intestazione-archivio__testo {
	margin-top: var(--passo-1);
	max-width: 60ch;
}

.intestazione-archivio .arco {
	width: 260px;
	height: 260px;
	top: -110px;
	right: -60px;
	opacity: 0.3;
}

/* ---- Mosaico dell'apertura ---------------------------------------- *
 *
 * Sfondo composto dalle fotografie dei viaggi pubblicati. Il testo continua a
 * stare su `--verde`: il mosaico non lo sostituisce, lo texturizza.
 *
 * I contrasti sono calcolati sul composito nel caso peggiore, cioè con una
 * fotografia completamente bianca sotto il velo — non sul verde pieno, che
 * darebbe numeri più belli e non veri. Nella zona del testo il velo è 0,90:
 *
 *   velo 0,90 su foto bianca → fondo #4279 58 circa
 *   titolo e testo bianchi   → 5,12:1   (soglia 4,5)
 *   paragrafo #eaf4ee        → 4,55:1   (soglia 4,5)
 *
 * Il paragrafo è stato schiarito apposta: il #cfe6d8 di prima, che sul verde
 * pieno dà 4,90, sul composito peggiore scende a 3,89 — sotto soglia.
 *
 * **0,90 è il limite, non una scelta prudente**: a 0,88 il paragrafo scende a
 * 4,39 e si esce dai parametri. Se un giorno il velo va alleggerito ancora,
 * prima va cambiato il colore del paragrafo. Questi numeri vanno rifatti, non
 * stimati, ogni volta che si tocca il velo.
 */
.intestazione-archivio--mosaico {
	padding: clamp(4rem, 10vw, 7rem) 0;
}

.mosaico {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	/* Due righe piene qualunque sia l'altezza della fascia. I riquadri che
	   avanzano escono dal riquadro e vengono tagliati da `overflow: hidden`
	   della sezione: è una trama, non una galleria, e non deve tornare il
	   conto. */
	grid-auto-rows: 50%;
	overflow: hidden;
}

/* La cella tiene ferma la casella della griglia mentre le due fotografie si
   incrociano: la seconda è sovrapposta, non affiancata. */
.mosaico__cella {
	position: relative;
	display: block;
	overflow: hidden;
}

.mosaico__cella .mosaico__riquadro + .mosaico__riquadro {
	position: absolute;
	inset: 0;
}

/* Stato di partenza della fotografia entrante. Vive dentro
   `@media (scripting: enabled)` per una ragione precisa: se il copione non
   gira, questa classe non viene mai tolta da nessuno, e senza la guardia una
   fotografia resterebbe invisibile per sempre. È la stessa cautela già presa
   per l'entrata del richiamo in fondo alla home. */
@media (scripting: enabled) {
	.mosaico__riquadro--entra {
		opacity: 0;
	}
}

.mosaico__riquadro {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 1100ms ease;
	/* Colore quasi pieno. Il grigio al 45% della prima versione spegneva le
	   fotografie due volte, perché a spegnerle è già il velo: tolto quasi tutto
	   e alzata un poco la saturazione, che sotto il verde recupera il rosso dei
	   tetti e l'azzurro del mare — i due colori che il velo mangia per primi.
	   Resta un decimo di grigio per non far saltare fuori le foto più sature. */
	filter: grayscale(0.1) saturate(1.15);
}

/* La fotografia unica dei termini piccoli.
 *
 * Stesso posto del mosaico — assoluta, dietro al testo, ritagliata — e stesso
 * trattamento cromatico dei riquadri, perche' sotto lo stesso velo deve
 * comportarsi allo stesso modo. Il velo e' letteralmente lo stesso elemento,
 * quindi i contrasti calcolati per il mosaico valgono qui senza rifarli: il
 * caso peggiore considerato la' e' gia' una fotografia bianca.
 *
 * `object-position: center 40%` e non il centro esatto: queste sono le
 * fotografie di apertura del catalogo, dove il soggetto sta quasi sempre nella
 * meta' alta e il centro geometrico cade sul terreno.
 *
 * Dal 2026-08-13 la stessa classe serve anche l'archivio dei viaggi, dove la
 * fotografia non viene da un itinerario ma dal Customizer. Due misure utili a
 * chi la scegliera': la fascia a 1920 px e' 4,52:1, quindi si vede circa il
 * 58% dell'altezza dell'immagine, dal 17% al 75% — cio' che sta sopra o sotto
 * quella finestra non esiste. E il `filter` qui sopra non e' neutro: chi
 * calcola il contrasto a occhio sul file originale sbaglia in entrambe le
 * direzioni. */
.intestazione-archivio__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	filter: grayscale(0.1) saturate(1.15);
}

/* ── LA PELLICOLA ────────────────────────────────────────────────────────
   L'apertura di «Cosa offriamo»: una striscia sola di fotogrammi che scorre
   lentamente da destra a sinistra, sotto lo stesso velo del mosaico.

   Di una pellicola la regolarita' e' tutto: passo costante e perforazioni
   allineate sono cio' che la rende riconoscibile. La variante con i fotogrammi
   ruotati e sfalsati e' stata provata e scartata perche' diceva «griglia
   storta» e non «pellicola» — e per un secondo motivo tecnico: sotto un velo a
   0,96 di opacita' un bordo nero diventa una riga verde scura, quindi il
   contrasto fra fotogramma e cornice, che e' cio' che si dovrebbe leggere,
   non c'e'.

   CONTRASTO. Misurato il 2026-08-13 sul composito reale, sui soli pixel
   coperti dalle lettere, in 55 posizioni di scorrimento: mediana fra 4,97 e
   6,78:1, **nessuna lettera sotto 3:1 in nessuna posizione**. Con una
   fotografia in movimento il caso peggiore non e' una posizione: sono tutte, e
   vanno provate tutte. Il margine lo da' il velo, che sotto il testo sta a
   0,96 — se un domani lo si alleggerisce a sinistra, questi numeri decadono. */
/* NIENTE `z-index` NEGATIVO, e il motivo va scritto perche' e' costato un giro.
   Nel file di prova la sezione aveva `isolation: isolate` — l'avevo messa io
   scrivendolo — e li' un `z-index: -3` restava dentro quel contesto. Qui la
   sezione non ce l'ha: un figlio con z-index negativo finisce DIETRO lo sfondo
   verde del genitore, cioe' sparisce. Il sintomo e' una fascia verde vuota,
   che sembra «le fotografie non arrivano» ed e' invece «le fotografie sono
   sotto la vernice».
   Il mosaico non ha mai avuto z-index: si affida all'ordine del documento, e
   la pellicola fa lo stesso. Il velo viene dopo, quindi copre; il testo viene
   dopo il velo, quindi sta sopra a entrambi. */
.pellicola {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: stretch;
	pointer-events: none;
}

.pellicola__nastro {
	position: relative;
	height: 100%;
	display: flex;
	gap: 6px;
	background: #0d0f0d;

	/* `width: max-content` e `flex: 0 0 auto` insieme, e servono entrambi.
	   Il nastro e' a sua volta un elemento flex dentro `.pellicola`, quindi
	   per difetto SI RESTRINGE: la sua scatola si ferma alla larghezza della
	   finestra mentre i fotogrammi, che hanno `flex: 0 0 auto`, proseguono
	   oltre. Le fotografie si vedevano lo stesso — traboccano — ma le
	   perforazioni sono ancorate alla scatola con `inset-inline: 0`, quindi
	   finivano dove finiva la scatola. Il sintomo era una striscia nera che
	   «si spezza dopo un po'», in un punto che sembrava casuale ed era invece
	   sempre lo stesso: il bordo destro della finestra. */
	width: max-content;
	flex: 0 0 auto;
	/* `-50%` e' la meta' della larghezza del nastro, cioe' di se' stesso: il
	   ciclo resta esatto qualunque altezza abbia la fascia e qualunque
	   larghezza ne consegua, senza nessuna misura scritta a mano. */
	animation: sedu-pellicola 80s linear infinite;
	will-change: transform;
}

@keyframes sedu-pellicola {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Ferma, non nascosta: chi ha chiesto meno movimento vede comunque i viaggi. */
@media (prefers-reduced-motion: reduce) {
	.pellicola__nastro { animation: none; }
}

.pellicola__fotogramma {
	flex: 0 0 auto;
	height: 100%;
	width: auto;
	/* 3:2 e' il rapporto vero del 35 mm, 36×24 mm, ed e' gia' quello delle
	   fotografie del catalogo: non si ritaglia niente. */
	aspect-ratio: 3 / 2;
	display: block;
	object-fit: cover;
	filter: grayscale(0.1) saturate(1.15);
}

/* Le perforazioni sono disegnate, non immagini.
   UN SOLO strato: la prima versione ne aveva due, i fori trasparenti sopra e
   un rettangolo dello stesso nero sotto — il foro scopriva il nero invece
   della fotografia e non si vedeva niente.
   `z-index` non e' ornamentale: i fotogrammi hanno un `filter`, e un filtro
   crea un contesto di impilamento che li promuove al livello degli elementi
   posizionati. Stando dopo nel documento coprivano queste due fasce. */
.pellicola__perforazioni {
	position: absolute;
	inset-inline: 0;
	height: 26px;
	z-index: 1;
	background: radial-gradient(closest-side, transparent 0 36%, rgba(13, 15, 13, 0.92) 37%)
		0 50% / 44px 26px repeat-x;
	pointer-events: none;
}

.pellicola__perforazioni--sopra { top: 0; }
.pellicola__perforazioni--sotto { bottom: 0; }

/* Velo piu' trasparente a destra, SOLO per la pellicola.
   `.mosaico__velo` e' lo stesso elemento usato dall'archivio e dalle pagine di
   sezione: alleggerirlo li' cambierebbe tre pagine per farne contenta una.

   La misura che ha guidato i numeri: il testo dell'apertura occupa da 361 a
   845 px su 1920, cioe' finisce al 44% della larghezza. Quindi non serve
   alleggerire dove sta il testo — pagato caro: sotto 0,88 di opacita' a
   sinistra il paragrafo da 17 px va sotto 4,5:1 nel 39% delle lettere — ma
   dopo. Il velo resta denso fino al 58% e poi scende ripido.

   Misurato il 2026-08-13 su 10 posizioni di scorrimento, sui soli pixel delle
   lettere: **zero sotto 3:1 e zero sotto 4,5:1**. Il margine arriva fino a
   0,18 sul bordo destro; qui si sta a 0,35 per scelta, non per necessita'. */
.mosaico__velo--pellicola {
	background: linear-gradient(
		100deg,
		rgba(45, 106, 69, 0.96) 0%,
		rgba(45, 106, 69, 0.92) 58%,
		rgba(45, 106, 69, 0.35) 100%
	);
}

.mosaico__velo {
	position: absolute;
	inset: 0;
	/* Più denso a sinistra, dove sta il testo, più leggero a destra, dove il
	   mosaico può respirare. Il paragrafo è largo al massimo 52ch, cioè circa
	   il 36% del contenitore: resta dentro la zona densa. */
	background: linear-gradient(
		100deg,
		rgba(45, 106, 69, 0.96) 0%,
		rgba(45, 106, 69, 0.90) 45%,
		rgba(45, 106, 69, 0.62) 100%
	);
}

.intestazione-archivio--mosaico .contenitore {
	position: relative;
	z-index: 1;
}

.intestazione-archivio--mosaico p {
	color: #eaf4ee;
}

@media (max-width: 860px) {
	/* A colonna stretta il testo occupa tutta la larghezza e finirebbe anche
	   sopra la parte chiara del velo: il gradiente diventa uniforme e denso. */
	/* Uniforme e un filo più denso del punto peggiore del gradiente: qui il
	   testo può stare ovunque. Verificato: bianco 5,36:1, paragrafo 4,77:1. */
	.mosaico__velo {
		background: rgba(45, 106, 69, 0.92);
	}

	/* Riquadri più piccoli, così i trenta continuano a coprire due righe piene
	   anche quando le colonne si riducono. */
	.mosaico {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}

/* La barra dei filtri.
 *
 * Da fascia piena a lastra traslucida: mentre si scorre, le schede si
 * intravedono passare sotto invece di sparire dietro un muro. Il fondo pieno
 * resta come ripiego dove la sfocatura non c'è — senza `@supports` il bianco
 * al'86% lascerebbe leggere il testo delle schede *nitido* sotto le etichette,
 * che è molto peggio del muro.
 *
 * L'86% non è un valore d'occhio: è la soglia sotto la quale il contrasto delle
 * etichette non regge più. Vedi la nota su `.filtri label`. */
.filtri {
	background: var(--fondo);
	border-bottom: 1px solid var(--bordo);
	/* Il filo lime lega la barra ai nastri delle schede e al catalogo stampato,
	   senza introdurre un colore che non ci sia già. È decorativo: non porta
	   informazione e non ha una soglia di contrasto da rispettare. */
	border-top: 3px solid var(--lime);
	padding: var(--passo-3) 0;
	position: sticky;
	top: var(--altezza-testata);
	z-index: 40;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.filtri {
		background: rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter: blur(14px) saturate(1.3);
		backdrop-filter: blur(14px) saturate(1.3);
	}
}

.filtri form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--passo-2);
	align-items: end;
}

/* Le etichette passano da `--verde-medio` a `--verde-scuro`.
 *
 * Non è una scelta di gusto, è una correzione. Misurato: `--verde-medio` sul
 * fondo di prima dava **3,52:1**, e sono maiuscoletti da 0,7 rem, cioè testo
 * piccolo, dove la soglia è 4,5. Era già fuori parametro prima di rendere la
 * barra traslucida — con la traslucidità, nel caso peggiore di una fotografia
 * scura che scorre sotto, scendeva a 1,87.
 *
 * Con `--verde-scuro` e il bianco all'86%: **6,12:1** nel caso peggiore, cioè
 * fondo completamente nero sotto la barra. Se un giorno si abbassa quel valore
 * il conto va rifatto: a 0,72 il margine scende a 4,23 e si torna sotto soglia.
 */
.filtri label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--verde-scuro);
	font-weight: 600;
	margin-bottom: 5px;
}

/* Spigolo vivo come ovunque nel sito: pulsanti, nastri delle schede e modulo di
   ricerca della home. Era rimasto `--raggio` solo qui.

   Questa regola vale per chi non ha JavaScript: con il copione attivo la select
   viene sostituita dalla tendina costruita a mano e non si vede più. */
.filtri select {
	width: 100%;
	font: inherit;
	font-size: 0.95rem;
	background: var(--carta);
	border: 1px solid var(--bordo);
	border-radius: 0;
	padding: 0.6rem 0.7rem;
	appearance: none;
}

/* La select sostituita resta nel documento per portare il valore al modulo, ma
   non deve occupare spazio. Selettore a due classi come nel modulo della home:
   `.filtri select` da solo pareggerebbe in specificità e le rimetterebbe
   `width: 100%`, facendola sporgere dalla barra. */
.filtri select.tendina__nativa {
	display: none;
}

/* Dentro la barra dei filtri il campo è bianco come le select che sostituisce,
   non `--fondo` come nell'apertura della home: lì sta su una fascia verde, qui
   su una barra chiara e traslucida, dove un grigio appena sporco si legge come
   un campo disabilitato. */
.filtri .tendina__campo {
	background: var(--carta);
	font-size: 0.95rem;
}

.filtri__azioni {
	display: flex;
	gap: 8px;
}

.conteggio {
	color: var(--grigio);
	font-size: 0.95rem;
	margin: var(--passo-3) 0 var(--passo-2);
}

/* ------------------------------------------------------------------ *
 * Pagina «Cosa offriamo»: numeri e barre
 *
 * I grafici sono barre in CSS, senza librerie e senza immagini. La regola che
 * li governa è una sola: **il valore è sempre scritto accanto alla barra**.
 * La barra dà il colpo d'occhio, il numero regge da solo — quando la pagina
 * viene stampata in bianco e nero, quando la ascolta un lettore di schermo, e
 * per chi le lunghezze non le confronta a colpo sicuro. Se domani sparissero
 * tutte le barre, la pagina direbbe ancora tutto.
 * ------------------------------------------------------------------ */

/* Colonne a larghezza fissa e gruppo centrato, invece di riempire la finestra.
 *
 * Con `1fr` la fascia cambiava proporzioni a ogni schermo: 460 px per riquadro
 * a 1920, 330 a 1400, 250 a 1100 — e la stessa cifra da 40 px sembrava di una
 * taglia diversa ogni volta. Fissando la colonna, quello che si disegna è
 * quello che vede chiunque, e ai lati resta aria.
 *
 * `auto-fit` con un minimo e un massimo, non una misura sola: sotto i 1030 px
 * le colonne si riducono fino a 200 e poi vanno a capo, invece di sfondare il
 * contenitore. */
.numeri {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
	justify-content: center;
	gap: var(--passo-3);
}

/* Il riquadro si stacca con un bordo, non con un fondo più scuro.
 *
 * Misurato: il bianco della carta sul fondo della sezione dà **1,05:1**, e
 * anche scurendo il fondo fino a un verde marcato si arriva a 1,16 — due
 * superfici così restano indistinguibili. Un filetto allo stesso valore di
 * contrasto invece si vede, perché l'occhio rileva le discontinuità lineari
 * molto meglio delle differenze di superficie. Ed è il linguaggio del tema,
 * che è fatto di filetti: `--bordo` è la stessa riga dei campi e della barra
 * dei filtri. */
.numeri__voce {
	position: relative;
	background: var(--carta);
	border: 1px solid var(--bordo);
	padding: var(--passo-3);
	/* Spazio a destra riservato all'icona: senza, un nome lungo le finirebbe
	   sotto. La misura è la sua larghezza più l'aria attorno. */
	padding-right: calc(var(--passo-3) + 46px);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* L'icona sta in alto a destra, fuori dal flusso.
 *
 * In posizione assoluta e non come colonna della griglia: il riquadro ha tre
 * righe di lunghezza variabile, e una colonna vera avrebbe legato l'altezza
 * dell'icona a quella del testo, facendola ballare da un riquadro all'altro.
 * Così sta sempre allo stesso posto, e riempie l'angolo che restava vuoto.
 *
 * `--verde-medio` su carta dà 3,75:1, sopra la soglia degli elementi grafici —
 * anche se qui non servirebbe: l'icona è decorazione, il nome accanto dice già
 * tutto, ed è per questo che porta `aria-hidden`. */
.numeri__icona {
	position: absolute;
	top: var(--passo-3);
	right: var(--passo-3);
	color: var(--verde-medio);
	flex: none;
}

@media (max-width: 620px) {
	/* Su schermo stretto il riquadro è largo quanto la finestra e lo spazio non
	   manca: l'icona resta, il rientro del testo si può ridurre. */
	.numeri__voce {
		padding-right: calc(var(--passo-3) + 40px);
	}
}

/* Il filetto lime passa da sopra la scheda a sotto la cifra: lì separa il dato
   dal suo nome, invece di fare da cappello a tutto il riquadro.

   Corre da sinistra a destra quando la fascia entra nello schermo. È uno
   pseudo-elemento, quindi da JavaScript non si tocca: il copione si limita ad
   aggiungere due classi sull'involucro — una spegne, l'altra fa partire. Senza
   copione nessuna delle due arriva e il filetto sta lì, disegnato per intero. */
.numeri__cifra + .numeri__nome::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	background: var(--lime);
	margin: 10px 0 8px;
	transform-origin: left;
	transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Spento e **senza transizione**: la classe la aggiunge il copione a pagina già
   dipinta, e con la transizione attiva i quattro filetti si sarebbero visti
   chiudere da destra a sinistra prima di riaprirsi. La transizione torna
   disponibile solo quando arriva `--parte`, cioè quando devono correre. */
.numeri--anima .numeri__cifra + .numeri__nome::before {
	transform: scaleX(0);
	transition: none;
}

.numeri--anima.numeri--parte .numeri__cifra + .numeri__nome::before {
	transform: scaleX(1);
	transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A cascata come le barre: i quattro filetti partono sfalsati, così la fascia
   si legge da sinistra a destra invece di accendersi tutta insieme. */
.numeri--parte .numeri__voce:nth-child(2) .numeri__nome::before {
	transition-delay: 90ms;
}

.numeri--parte .numeri__voce:nth-child(3) .numeri__nome::before {
	transition-delay: 180ms;
}

.numeri--parte .numeri__voce:nth-child(4) .numeri__nome::before {
	transition-delay: 270ms;
}

/* Rete di sicurezza. Con «movimento ridotto» il copione non aggiunge nemmeno le
   classi, quindi in teoria non serve — ma se un domani le aggiungesse, questa
   regola deve vincere: per questo ripete `--anima.--parte`, che ha la
   specificità più alta fra quelle sopra. Una rete meno specifica della regola
   che deve annullare non è una rete. */
@media (prefers-reduced-motion: reduce) {
	.numeri__cifra + .numeri__nome::before,
	.numeri--anima .numeri__cifra + .numeri__nome::before,
	.numeri--anima.numeri--parte .numeri__cifra + .numeri__nome::before {
		transform: none;
		transition: none;
	}

	.numeri--parte .numeri__voce .numeri__nome::before {
		transition-delay: 0s;
	}
}

/* La nota va in fondo alla scheda, non subito sotto il nome. Oggi le quattro
   note stanno alla stessa altezza per caso, perché i testi sono di lunghezza
   simile: basta un nome su due righe — e succede appena la tassonomia cresce —
   e le righe si sfalsano. */
.numeri__nota {
	margin-top: auto;
	padding-top: 6px;
}

.numeri__cifra {
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	/* Grande davvero: è il dato che porta la pagina, e sotto i 2,5 rem su
	   schermo largo si legge come un sottotitolo qualunque. */
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	line-height: 1;
	color: var(--verde-scuro);
}

.numeri__nome {
	font-weight: 600;
	color: var(--inchiostro);
}

/* `--inchiostro-tenue` e non `--grigio`, che è il colore di contorno usato
   altrove nel tema: misurato, il grigio su bianco dà **4,37:1** e queste sono
   0,86 rem, cioè testo piccolo, dove la soglia è 4,5. L'inchiostro tenue dà
   6,81. Vale anche per il valore delle barre e per il conteggio delle voci. */
.numeri__nota {
	font-size: 0.86rem;
	color: var(--inchiostro-tenue);
}

.barre {
	list-style: none;
	margin: var(--passo-3) 0 0;
	padding: 0;
	display: grid;
	gap: var(--passo-1);
}

.barra {
	display: grid;
	/* Tre colonne: nome, traccia, valore. Il nome ha una larghezza fissa così
	   le tracce partono tutte dalla stessa ascissa e le lunghezze si possono
	   confrontare — con colonne elastiche il confronto sarebbe falsato dalla
	   lunghezza del nome, che non c'entra nulla col dato. */
	grid-template-columns: minmax(0, 22ch) 1fr auto;
	align-items: center;
	gap: var(--passo-2);
	padding: 6px 0;
}

.barra__nome {
	font-size: 0.95rem;
}

.barra__nome a {
	color: var(--inchiostro);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color var(--transizione);
}

.barra__nome a:hover,
.barra__nome a:focus-visible {
	border-bottom-color: var(--lime);
}

.barra__traccia {
	display: block;
	height: 10px;
	background: var(--verde-tenue);
}

.barra__pieno {
	display: block;
	height: 100%;
	background: var(--verde-medio);
	/* L'entrata è una crescita da sinistra, come la barra delle tendine e del
	   menu: lo stesso movimento in tutto il sito. */
	transform-origin: left;
	transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.barra__valore {
	font-size: 0.86rem;
	color: var(--inchiostro-tenue);
	white-space: nowrap;
	/* Cifre a larghezza fissa: incolonnate, i valori si confrontano leggendo
	   invece che misurando le barre. */
	font-variant-numeric: tabular-nums;
}

/* Le barre corte — durate e periodi — hanno etichette brevi: la colonna del
   nome si stringe e la traccia guadagna spazio. */
.barre--corte .barra {
	grid-template-columns: minmax(0, 14ch) 1fr auto;
}

/* Sotto i 620 px le tre colonne non ci stanno: nome e valore vanno sulla stessa
   riga, la traccia sotto a tutta larghezza. Restringere le colonne avrebbe
   ridotto le tracce a moncherini incomparabili, che è peggio di non averle. */
@media (max-width: 620px) {
	.barra {
		grid-template-columns: 1fr auto;
		gap: 4px var(--passo-2);
	}

	.barre--corte .barra {
		grid-template-columns: 1fr auto;
	}

	.barra__traccia {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* Quante volte una voce compare negli itinerari. Sta accanto alla voce, in
   piccolo: è un dato di contorno, non la voce stessa. */
.conteggio-voce {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.78rem;
	color: var(--inchiostro-tenue);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Scheda del viaggio
 * ------------------------------------------------------------------ */

.viaggio-apertura {
	position: relative;
	background: var(--verde);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	/* Ritocco del 2026-08-11, dopo l'aggiunta della riga «Agenda 2030».
	   Quella riga costa circa 72 px: 24 di stacco fra le due righe dei dati,
	   20 di etichetta e 28 di valore. Erano 96 px sopra e 64 sotto; ora 60 e
	   36, cioe' 64 recuperati — quasi tutti. L'apertura torna alta come prima
	   invece di crescere su tutte e settanta le schede. */
	padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.viaggio-apertura__sfondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.42;
	z-index: -2;
}

.viaggio-apertura::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(33, 87, 52, 0.4), rgba(18, 40, 29, 0.82));
	z-index: -1;
}

.viaggio-apertura .arco {
	width: 320px;
	height: 320px;
	bottom: -190px;
	right: 6%;
	opacity: 0.3;
}

.viaggio-apertura h1 {
	color: #fff;
	max-width: 16ch;
	margin-bottom: var(--passo-2);
}

.viaggio-apertura__sottotitolo {
	font-size: clamp(1.05rem, 1.7vw, 1.3rem);
	color: #d5e7dc;
	max-width: 48ch;
	margin-bottom: var(--passo-3);
}

.viaggio-apertura__dati {
	display: flex;
	flex-wrap: wrap;
	gap: var(--passo-3) var(--passo-4);
	margin-top: var(--passo-3);
}

.viaggio-apertura__dati div span {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lime);
	margin-bottom: 3px;
}

.viaggio-apertura__dati div strong {
	font-weight: 500;
	font-size: 1.08rem;
}

/* La voce «Agenda 2030» dell'apertura, e solo quella, impila i valori.
 *
 * Le altre quattro voci hanno un valore solo e stanno bene affiancate. Qui i
 * valori sono due in 27 viaggi su 70, e sono nomi lunghi — «Obiettivo 16 —
 * Pace, giustizia e istituzioni solide» da solo e' lungo quanto Durata,
 * Target e Periodo messi insieme. Su una riga sola andrebbero a capo dove
 * capita, spezzando il nome invece che l'elenco.
 *
 * La regola agisce sulla classe della voce e non su `.viaggio-apertura__dati
 * strong`: le altre quattro non devono accorgersi di niente. */
/* La voce «Agenda 2030» va a capo da sola, ma non si prende la riga intera.
 *
 * Tre tentativi prima di questo, tutti misurati sulle 70 schede reali.
 * (1) Riga intera, voce messa dopo la durata: in un flex che manda a capo, un
 *     elemento che occupa la riga spinge sotto TUTTO cio' che lo segue, quindi
 *     Target, Periodo e Materie finivano sotto gli obiettivi.
 * (2) Durata e obiettivi raccolti in una colonna: le altre tre restavano in
 *     alto, ma la colonna diventava larga quanto il nome dell'obiettivo, e su
 *     Altomonte a scivolare era Materie.
 * (3) Riga intera con la voce per ultima: 62 schede a posto, ma le 8 con il
 *     Target lungo andavano a tre righe — Durata/Target/Periodo, poi Materie
 *     da sola, poi gli obiettivi.
 *
 * La larghezza minima e' la quarta strada, e i due numeri che la delimitano
 * sono misurati con le metriche vere del carattere su tutte e 70 le schede,
 * dentro il contenitore da 1200 px:
 *
 *   - sotto i 415 px la voce entrerebbe in prima riga su 8 schede, diventando
 *     una quinta colonna accanto a Materie;
 *   - sopra i 635 px non entrerebbe piu' accanto a Materie sulla seconda riga
 *     delle 8 schede larghe, che tornerebbero a tre righe.
 *
 * 500 px sta in mezzo con margine da entrambe le parti. Esito: 62 schede con
 * Durata/Target/Periodo/Materie sopra e gli obiettivi sotto; 8 schede con
 * Durata/Target/Periodo sopra e Materie/obiettivi sotto. Nessuna a tre righe.
 *
 * `min-width` e non `flex-basis`: la voce puo' restare piu' stretta di 500 px
 * quando il contenitore lo e', cosa che succede sotto i 1000. */
.dati__voce--agenda {
	min-width: 500px;
	max-width: 100%;
}

/* I due obiettivi affiancati, separati come le materie e i gradi.
 *
 * Erano impilati. Misurati i 27 viaggi che ne hanno due, il piu' largo in riga
 * e' Sicilia Ovest a 777 px: nessuna scheda va a tre righe e nessuna riga
 * sfora. Il punto mediano e' lo stesso separatore che divide gia' le materie e
 * i gradi nella riga accanto, quindi l'occhio lo legge come un elenco e non
 * come una frase sola. */
.dati__voce--agenda strong + strong::before {
	content: " · ";
}

/* Sui piccoli schermi la larghezza minima non serve piu' — le voci vanno a capo
   tutte comunque — e sarebbe dannosa: 500 px dentro un contenitore da 343
   sfondano di lato e fanno comparire la barra di scorrimento orizzontale. */
@media (max-width: 620px) {
	.dati__voce--agenda {
		min-width: 0;
	}
}

.viaggio-dettaglio {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: var(--passo-5);
	align-items: start;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.sintesi {
	position: sticky;
	/* Legata all'altezza della testata invece di essere un 100 scritto a mano:
	   è lo stesso scollamento che aveva già colpito la barra dei filtri. */
	top: calc(var(--altezza-testata) + var(--passo-2));
	background: var(--azzurro);
	border-radius: var(--raggio-grande);
	padding: var(--passo-3);
}

.sintesi h2 {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--azzurro-testo);
	font-weight: 500;
	margin-bottom: var(--passo-2);
}

.sintesi dl {
	margin: 0;
	font-size: 0.97rem;
}

.sintesi dt {
	font-size: 0.72rem;
	color: var(--azzurro-testo);
	letter-spacing: 0.04em;
}

.sintesi dd {
	margin: 2px 0 0;
	padding-bottom: 0.7rem;
	margin-bottom: 0.7rem;
	border-bottom: 1px solid var(--azzurro-bordo);
	line-height: 1.4;
}

/* Gli obiettivi nel riquadro «In sintesi»: unica voce cliccabile dell'elenco.
 *
 * Uno per riga e non separati da un punto mediano: i nomi contengono gia' un
 * trattino lungo e una virgola, e un terzo separatore in mezzo renderebbe
 * illeggibile dove finisce un obiettivo e comincia l'altro.
 *
 * `--verde-scuro` su `--azzurro` da' 7,58:1 — misurato, non stimato — ed e' lo
 * stesso verde delle etichette di tassonomia in fondo alla scheda, quindi un
 * lettore che ha gia' visto quelle riconosce il collegamento. La sottolineatura
 * resta: il colore da solo non e' un segnale accessibile, e qui il collegamento
 * vive in mezzo a sei voci di testo semplice che gli somigliano. */
.sintesi__obiettivi a {
	display: block;
	color: var(--verde-scuro);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sintesi__obiettivi a + a {
	margin-top: 5px;
}

.sintesi__obiettivi a:hover {
	color: var(--verde-medio);
}

.sintesi dd:last-of-type {
	border-bottom: 0;
	margin-bottom: var(--passo-2);
}

.sintesi .bottone {
	width: 100%;
	justify-content: center;
}

/* Il comando di stampa esiste solo se il copione può eseguirlo: `window.print()`
   senza JavaScript non parte, e un pulsante che non fa nulla è peggio di un
   pulsante assente. Chi non ha il copione stampa dal menu del browser e ottiene
   esattamente lo stesso foglio. */
.sintesi__stampa,
.sintesi__stampa-nota {
	display: none;
}

@media (scripting: enabled) {
	.sintesi__stampa {
		display: flex;
		margin-top: var(--passo-1);
		border-color: var(--azzurro-bordo);
	}

	/* `flex: none` come sulle `.scheda__icona`: dentro un contenitore flex
	   un SVG senza dimensione intrinseca si lascia comprimere quando
	   l'etichetta va a capo su schermo stretto. */
	.sintesi__stampa-icona {
		flex: none;
	}

	.sintesi__stampa-nota {
		display: block;
		margin: var(--passo-1) 0 0;
		font-size: 0.76rem;
		line-height: 1.35;
		/* `--azzurro-testo` e non il grigio del tema: sul fondo azzurro della
		   colonna il grigio dà poco contrasto, questo ne dà 7,3:1. */
		color: var(--azzurro-testo);
	}
}

.viaggio-dettaglio__corpo > * + * {
	margin-top: var(--passo-4);
}

/* ---- Galleria dell'itinerario ----
 *
 * Le tre fotografie della striscia del catalogo, importate insieme al viaggio e
 * fino a oggi mai mostrate. Tre colonne su schermo largo, due sotto i 1000 px,
 * una sotto i 620.
 *
 * `aspect-ratio` e non altezze fisse: le fotografie del catalogo sono tutte
 * 940×627, ma un'immagine caricata a mano domani potrebbe non esserlo, e una
 * riga con un riquadro più alto degli altri si legge come un errore. */
.galleria__griglia {
	list-style: none;
	margin: var(--passo-2) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.galleria__griglia li {
	margin: 0;
}

.galleria__griglia img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	/* Spigolo vivo: è la regola delle schede viaggio e dei nastri, ripresa dal
	   ramo retail. Qui gli angoli tondi farebbero rima con «In sintesi», che è
	   un riquadro di servizio, non con il contenuto. */
	border-radius: 0;
}

@media (max-width: 1000px) {
	.galleria__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.galleria__griglia {
		grid-template-columns: 1fr;
	}
}

.testo {
	max-width: var(--larghezza-testo);
	font-size: 1.08rem;
	color: var(--inchiostro-tenue);
}

/* Un blocco centrato. Serve alla fascia dell'Agenda 2030, che e' una
   affermazione sola e non un elenco: li' il centro sta bene perche' non c'e'
   niente da scorrere con l'occhio riga per riga.

   `max-width` piu' stretta del solito, e non e' un vezzo: un testo centrato si
   legge peggio di uno allineato a sinistra, perche' l'occhio deve ritrovare
   ogni volta un inizio riga che si sposta. Piu' la riga e' lunga, piu' il
   difetto pesa. Stringendo la misura il problema resta piccolo; sulla misura
   piena di `--larghezza-testo` diventerebbe fastidioso.
   Per questo la classe non va usata su blocchi lunghi. */
.sezione--centrata {
	text-align: center;
}

.sezione--centrata .testo {
	max-width: 62ch;
	margin-inline: auto;
}

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

/* Programma a timeline */

.programma {
	position: relative;
	padding-left: 52px;
}

.programma::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: var(--bordo);
}

.giornata {
	position: relative;
	padding-bottom: var(--passo-3);
}

.giornata:last-child {
	padding-bottom: 0;
}

.giornata__numero {
	position: absolute;
	left: -52px;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--verde);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.giornata h3 {
	margin: 4px 0 6px;
	font-size: 1.22rem;
}

.giornata p {
	margin: 0;
	color: var(--inchiostro-tenue);
	max-width: var(--larghezza-testo);
}

/* Incluso / non incluso */

.due-colonne {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--passo-3);
}

/* ---- Pagina «Chi siamo» ------------------------------------------- */

/* Fondi contestuali dei blocchi.
 *
 * Due trame gia' del progetto, riportate su fondo chiaro invece che scuro. Non
 * sono decorazioni nuove: il reticolo e' quello del diagramma dei collegamenti
 * in Contatti, i punti sono la trama del catalogo stampato misurata a pagina
 * 39. Riusarle costa niente e tiene insieme le pagine; inventarne una terza
 * avrebbe aggiunto un linguaggio in piu' da mantenere.
 *
 * L'opacita' e' l'unica cosa rifatta, e andava rifatta: le versioni originali
 * sono bianche su verde scuro e su fondo chiaro sparirebbero. Qui sono verdi a
 * bassissima intensita' — abbastanza da dare consistenza alla carta, non
 * abbastanza da competere col testo. Il contrasto del testo non cambia:
 * l'inchiostro resta su fondo bianco o `--fondo`, e la trama passa sotto senza
 * scurirlo in modo apprezzabile. */
.sezione--reticolo,
.sezione--punti {
	position: relative;
	isolation: isolate;
}

.sezione--reticolo::before,
.sezione--punti::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Reticolo da 52 px, lo stesso passo del diagramma di Contatti. Sfuma verso il
   basso: una griglia che arriva netta fino al bordo della sezione sembra un
   errore di ritaglio, mentre una che si spegne sembra carta. */
.sezione--reticolo::before {
	background-image:
		repeating-linear-gradient(0deg, rgba(45, 106, 69, 0.07) 0 1px, transparent 1px 52px),
		repeating-linear-gradient(90deg, rgba(45, 106, 69, 0.07) 0 1px, transparent 1px 52px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* Punti da 12 px, il passo del catalogo. */
.sezione--punti::before {
	background-image: radial-gradient(circle, rgba(45, 106, 69, 0.11) 0.9px, transparent 1px);
	background-size: 12px 12px;
	-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 100%);
	mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 100%);
}

/* Blocco con la fotografia a fianco del testo.
 *
 * `auto-fit` e non due colonne fisse: se la fotografia manca — itinerario
 * rinominato, immagine non ancora rigenerata — il testo si prende tutta la
 * larghezza invece di lasciare mezza sezione vuota.
 *
 * `align-items: center` perche' i due lati hanno altezze diverse per natura: il
 * testo cresce con le parole, la fotografia ha una proporzione fissa. Allineati
 * in alto, il blocco piu' corto lascerebbe un vuoto in fondo che si legge come
 * una svista. */
.blocco-foto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--passo-5);
	align-items: center;
}

.blocco-foto__testo .testo {
	max-width: 56ch;
}

.blocco-foto__foto {
	margin: 0;
	/* Serve al ritaglio dell'ingrandimento in entrata, non agli angoli: quelli
	   restano vivi. */
	overflow: hidden;
}

.blocco-foto__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Lo stesso ritocco cromatico del mosaico e delle aperture: un decimo di
	   grigio e un filo di saturazione, cosi' fotografie di provenienza diversa
	   stanno nella stessa pagina senza stonare. */
	filter: grayscale(0.08) saturate(1.08);
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Movimento delicato, e una volta sola: la fotografia entra appena ingrandita e
   si posa sulla sua dimensione quando il blocco diventa visibile. Nessun
   effetto al passaggio del mouse: non e' un elemento cliccabile, e far muovere
   qualcosa che non si puo' premere e' una promessa che non viene mantenuta. */
.blocco-foto.comparsa .blocco-foto__foto img {
	transform: scale(1.06);
}

.blocco-foto.comparsa.visibile .blocco-foto__foto img {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.blocco-foto .blocco-foto__foto img {
		transition: none;
		transform: none;
	}
}

/* A colonne affiancate il testo puo' passare a destra. Sotto il punto di
   rottura la regola si spegne da sola, perche' in colonna singola il testo deve
   restare primo: chi legge su telefono vuole sapere di cosa si parla prima di
   vedere la fotografia. */
@media (min-width: 900px) {
	.blocco-foto--invertito .blocco-foto__testo {
		order: 2;
	}
}


/* I quattro principi.
 *
 * Filetto lime in cima e nessun fondo pieno. Non e' una preferenza: e' la
 * stessa misura fatta il 6 agosto per i badge di «Cosa offriamo» — un riquadro
 * appena piu' scuro del fondo da 1,05:1 e non si distingue, mentre un filetto
 * allo stesso contrasto si vede benissimo, perche' l'occhio rileva le
 * discontinuita' lineari molto meglio delle differenze di superficie.
 *
 * Due colonne e non quattro: i testi sono frasi intere, non etichette, e su
 * quattro colonne da 270 px andrebbero a sei righe ciascuna. */
.principi {
	list-style: none;
	margin: var(--passo-4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--passo-4) var(--passo-5);
}

.principio {
	border-top: 2px solid var(--lime);
	padding-top: var(--passo-2);
}

.principio h3 {
	font-size: 1.12rem;
	margin: 0 0 0.5rem;
}

.principio p {
	margin: 0;
	color: var(--inchiostro-tenue);
}

/* L'invito e' un collegamento di testo con la stessa barra lime che cresce
   sotto le voci di menu e le tendine: e' il gesto gia' usato altrove per dire
   «questo si puo' aprire», e ripeterlo costa meno che inventarne un altro. */
.principio__invito {
	display: inline-block;
	margin-top: 0.9rem;
	color: var(--verde-scuro);
	font-weight: 600;
	font-size: 0.94rem;
	text-decoration: none;
	position: relative;
}

.principio__invito::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background: var(--lime);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transizione);
}

.principio__invito:hover::after,
.principio__invito:focus-visible::after {
	transform: scaleX(1);
}

/* La colonna dei dati di sintesi: stessa forma dell'elenco «In sintesi» della
   scheda viaggio — etichetta piccola sopra, valore sotto, filetto di
   separazione — ma senza il fondo azzurro, che qui non ha nessuna colonna da
   delimitare. */
.scheda-fatti {
	list-style: none;
	margin: 0;
	padding: 0;
}

.scheda-fatti li {
	padding-bottom: 0.8rem;
	margin-bottom: 0.8rem;
	border-bottom: 1px solid var(--bordo);
}

.scheda-fatti li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.scheda-fatti span {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--verde-medio);
	margin-bottom: 2px;
}

.scheda-fatti strong {
	font-weight: 500;
	line-height: 1.4;
}


.elenco-riquadro {
	border-radius: var(--raggio-grande);
	padding: var(--passo-3);
}

.elenco-riquadro--si {
	background: var(--verde-tenue);
}

.elenco-riquadro--no {
	background: var(--rosso-fondo);
}

.elenco-riquadro h3 {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: var(--passo-2);
}

.elenco-riquadro--si h3 { color: var(--lime-scuro); }
.elenco-riquadro--no h3 { color: var(--rosso-testo); }

.elenco-riquadro ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.98rem;
	line-height: 1.55;
}

.elenco-riquadro li {
	padding-left: 20px;
	position: relative;
	margin-bottom: 8px;
}

.elenco-riquadro li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 600;
}

.elenco-riquadro--si li::before { content: "+"; color: var(--lime-scuro); }
.elenco-riquadro--no li::before { content: "–"; color: var(--rosso-testo); }

.nota-riquadro {
	border-left: 3px solid var(--lime);
	background: #f7fbf4;
	padding: var(--passo-2) var(--passo-3);
	color: #2c4a39;
	font-size: 0.97rem;
}

.curiosita {
	background: var(--verde-notte);
	color: #d5e7dc;
	border-radius: var(--raggio-grande);
	padding: var(--passo-3);
	position: relative;
	overflow: hidden;
}

.curiosita h3 {
	color: var(--lime);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
}

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

.curiosita .arco {
	width: 180px;
	height: 180px;
	bottom: -110px;
	right: -50px;
	opacity: 0.22;
}

/* ------------------------------------------------------------------ *
 * Richiamo finale e piede
 * ------------------------------------------------------------------ */

/* ---- Richiamo finale: il processo in tre passi ---- *
 *
 * Fondo chiaro, e non è una scelta di gusto: sopra c'è il tabellone in
 * `--verde-notte` e sotto il piede in `--verde-scuro`. La fascia scura che
 * stava qui aveva esattamente lo stesso colore del tabellone, quindi non si
 * staccava; e tre blocchi scuri di fila chiudevano la pagina a bande. Il
 * chiaro fa respirare la pagina prima del piede.
 *
 * `overflow: hidden` non è decorativo: l'involucro entra da destra partendo
 * da +90 px, e senza il ritaglio la pagina prenderebbe una barra di
 * scorrimento orizzontale per tutta la durata dell'animazione. */
.richiamo {
	position: relative;
	background: var(--fondo);
	color: var(--inchiostro);
	overflow: hidden;
	padding: clamp(3rem, 7vw, 5rem) 0;
}

.richiamo h2 {
	margin: 0 0 var(--passo-4);
	max-width: 24ch;
}

.richiamo__passi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--passo-4);
}

/* Filetto sopra ogni passo invece di un riquadro: la separazione serve, il
   contenitore no. Un riquadro qui avrebbe fatto tre schede, e di schede la
   pagina ne ha già dieci poco sopra. */
.richiamo__passo {
	border-top: 1px solid rgba(18, 40, 29, 0.16);
	padding-top: var(--passo-2);
}

/* Il numero è grande e in tinta, ma non lime: `--lime` su questo fondo dà
   1,95:1 — misurato — e un numero è informazione, non decorazione. Il verde
   medio arriva a 3,3:1, che è la soglia per il testo grande.
   Il selettore è doppio di proposito: `.richiamo__passo p` più sotto ha
   specificità maggiore di una classe sola e vinceva, lasciando il numero
   grigio come il testo. Trovato misurando il contrasto, non guardando. */
.richiamo__passo .richiamo__numero {
	margin: 0 0 var(--passo-2);
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	color: var(--verde-medio);
}

.richiamo__passo h3 {
	margin: 0 0 var(--passo-1);
	font-size: 1.1rem;
}

.richiamo__passo p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--inchiostro-tenue);
}

.richiamo__passo .bottone {
	margin-top: var(--passo-3);
}

/* ---- Entrata: l'involucro da destra, poi i passi cadono uno alla volta ----
 *
 * Lo stato di partenza sta dentro `scripting: enabled`. Senza, un blocco a
 * `opacity: 0` resterebbe invisibile per sempre nel caso in cui il copione
 * non venga eseguito — non solo se manca `IntersectionObserver`, che il JS
 * già gestisce, ma anche se un errore a monte lo interrompe. Così, senza
 * JavaScript, il blocco è semplicemente lì, fermo. */
@media (scripting: enabled) {
	.richiamo__involucro {
		opacity: 0;
		transform: translateX(90px);
	}

	.richiamo__passo {
		opacity: 0;
		transform: translateY(-44px);
	}
}

.richiamo__involucro {
	transition:
		opacity 620ms ease,
		transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.richiamo--visibile .richiamo__involucro {
	opacity: 1;
	transform: none;
}

/* La dissolvenza è più breve della caduta: il passo compare subito e poi
   scende, invece di materializzarsi a mezz'aria. */
.richiamo__passo {
	transition:
		opacity 280ms ease,
		transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Il rimbalzo vero — tocca terra, risale di 9 px, ritocca, risale di 2 —
   non si esprime con una curva di Bézier, che ha un solo overshoot.
   `linear()` sì. Dove non è supportata resta la curva sopra: la caduta
   perde il sobbalzo ma non si rompe niente. */
@supports (transition-timing-function: linear(0, 1)) {
	.richiamo__passo {
		transition-timing-function:
			ease,
			linear(0, 0.06 12%, 0.25 25%, 1 45%, 0.8 60%, 1 75%, 0.955 87%, 1);
	}
}

/* Lo sfalsamento è in CSS e non con dei timer: tre `setTimeout` da tenere
   allineati a tre transizioni è un modo sicuro per vederli sfasarsi. */
.richiamo--visibile .richiamo__passo {
	opacity: 1;
	transform: none;
}

.richiamo--visibile .richiamo__passo:nth-child(1) { transition-delay: 520ms; }
.richiamo--visibile .richiamo__passo:nth-child(2) { transition-delay: 630ms; }
.richiamo--visibile .richiamo__passo:nth-child(3) { transition-delay: 740ms; }

@media (max-width: 900px) {
	.richiamo__passi {
		grid-template-columns: 1fr;
		gap: var(--passo-3);
	}

	/* In colonna sola tre cadute in fila diventano lunghe e l'occhio deve
	   inseguirle in verticale mentre già sta scorrendo. Resta la sola entrata
	   d'insieme dell'involucro. */
	.richiamo__passo,
	.richiamo--visibile .richiamo__passo:nth-child(1),
	.richiamo--visibile .richiamo__passo:nth-child(2),
	.richiamo--visibile .richiamo__passo:nth-child(3) {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.richiamo__involucro,
	.richiamo__passo {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* La trama a punti del catalogo stampato, misurata a pagina 39 e non stimata
   a occhio: passo di 9,125 pt (73 px in un rendering a scala 8), punti da
   1,375 pt. Il colore dei punti risultava `rgb(59,102,76)` su un fondo
   `rgb(36,86,56)`: rifatto il conto sui tre canali è **bianco al 10%**, e
   scritto così la trama funziona su qualunque verde invece che solo su quello.
   Il fondo del catalogo, `#245638`, è di fatto il `--verde-scuro` del tema.

   È una classe a sé perché la stessa trama servirà altrove — il catalogo la
   usa su tutte le pagine di sezione. */
.trama-punti,
.piede {
	background-color: var(--verde-scuro);
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.9px, transparent 1px);
	background-size: 12px 12px;
}

/* Gli anelli della pagina 39, estratti dai vettori del PDF e non ricostruiti
   a occhio. Non sono curve generiche: sono **cerchi in traccia bianca con il
   centro esattamente negli angoli della pagina**, tre nell'angolo in basso a
   destra e due in quello in alto a sinistra.
   Raggi e opacità dal documento, in punti tipografici:

     basso a destra   265 pt · 0,7 pt di tratto · opacità 0,10
                      348 pt · 0,5 pt          · 0,07
                      432 pt · 0,35 pt         · 0,05
     alto a sinistra  195 pt · 0,5 pt          · 0,08
                      275 pt · 0,35 pt         · 0,05

   Raggio e opacità calano insieme verso l'esterno: è quello che dà l'effetto
   di eco, e va rispettato o restano cinque cerchi qualunque.

   I raggi sono in `vw` perché sono proporzioni della pagina, non misure
   assolute: 265 pt su 603,78 di larghezza fanno il 43,9%. Il **tratto invece
   resta di 1 px**: in proporzione sarebbe 2,2 px su uno schermo largo, e un
   segno che nella stampa è un capello diventerebbe una riga. */
.piede {
	color: #cfe6d8;
	padding: var(--passo-5) 0 var(--passo-3);
	font-size: 0.95rem;

	background-image:
		radial-gradient(circle at 100% 100%, transparent calc(43.9vw - 1px), rgba(255, 255, 255, 0.1) calc(43.9vw - 1px), rgba(255, 255, 255, 0.1) 43.9vw, transparent 43.9vw),
		radial-gradient(circle at 100% 100%, transparent calc(57.6vw - 1px), rgba(255, 255, 255, 0.07) calc(57.6vw - 1px), rgba(255, 255, 255, 0.07) 57.6vw, transparent 57.6vw),
		radial-gradient(circle at 100% 100%, transparent calc(71.5vw - 1px), rgba(255, 255, 255, 0.05) calc(71.5vw - 1px), rgba(255, 255, 255, 0.05) 71.5vw, transparent 71.5vw),
		radial-gradient(circle at 0% 0%, transparent calc(32.3vw - 1px), rgba(255, 255, 255, 0.08) calc(32.3vw - 1px), rgba(255, 255, 255, 0.08) 32.3vw, transparent 32.3vw),
		radial-gradient(circle at 0% 0%, transparent calc(45.5vw - 1px), rgba(255, 255, 255, 0.05) calc(45.5vw - 1px), rgba(255, 255, 255, 0.05) 45.5vw, transparent 45.5vw),
		radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.9px, transparent 1px);

	/* Gli anelli non si ripetono, la trama sì. L'ordine conta: nel catalogo
	   gli archi stanno sopra la trama, e qui la prima immagine è la più in
	   alto. */
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	background-size: auto, auto, auto, auto, auto, 12px 12px;
}

.piede a {
	color: #cfe6d8;
	text-decoration: none;
}

.piede a:hover {
	color: var(--lime);
}

/* Una voce del piede che resta scritta ma non porta da nessuna parte.
   Serve a «Termini e condizioni» finché la pagina non può essere raggiunta
   (questione 14). Il colore è lo stesso della riga legale in fondo — `#a9c6b5`
   invece di `#cfe6d8` — così si legge che è testo e non collegamento, senza
   bisogno di spiegarlo: la differenza di tono è la spiegazione.
   Nessun `pointer-events: none` né opacità: qui non c'è un link da spegnere,
   c'è uno `<span>`. */
.piede__voce-inattiva {
	color: #a9c6b5;
	cursor: default;
}

.piede__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--passo-3);
	margin-bottom: var(--passo-4);
}

/* L'anagrafica completa in una colonna sola: sei righe brevi, che con
   l'interlinea del piede diventerebbero un blocco troppo arioso per essere
   letto come un unico dato. */
.piede__anagrafica {
	margin: 0;
	line-height: 1.75;
}

.piede h2 {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lime);
	font-weight: 500;
	margin-bottom: var(--passo-2);
}

.piede ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 2;
}

.piede__legale {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: var(--passo-3);
	font-size: 0.85rem;
	color: #a9c6b5;
}

/* ------------------------------------------------------------------ *
 * Paginazione
 * ------------------------------------------------------------------ */

/* `hidden` è un attributo, non un suggerimento: qualunque regola che imposti
   un `display` lo batte, perché una classe pesa più di un attributo nella
   specificità. Senza questa riga, `elemento.hidden = true` non nascondeva
   niente — la paginazione restava in pagina sotto il pulsante «Carica altri
   viaggi». Trovato guardando lo schermo, non leggendo il codice. */
[hidden] {
	display: none !important;
}

/* Il titolo che WordPress mette sopra la paginazione è destinato ai lettori
   di schermo e va nascosto alla vista, ma non alla voce: `display: none` lo
   toglierebbe a entrambi. Questa è la tecnica standard — l'elemento resta
   nel documento, largo un pixel e ritagliato. Mancava nel tema, e in pagina
   si leggeva «Paginazione degli articoli» a caratteri di scatola. */
.screen-reader-text {
	position: absolute;
	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;
}

.paginazione {
	margin-top: var(--passo-4);
	display: flex;
	justify-content: center;
}

.paginazione .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--raggio);
	text-decoration: none;
	color: var(--inchiostro);
	border: 1px solid var(--bordo);
	margin: 0 4px;
}

.paginazione .page-numbers.current {
	background: var(--verde);
	border-color: var(--verde);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Comparsa allo scorrimento
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Vetrina della homepage
 * ------------------------------------------------------------------ */

/* L'altezza della griglia viene bloccata dal copione durante lo scambio: se
   non lo fosse, la pagina collasserebbe per un istante e tutto ciò che sta
   sotto salterebbe verso l'alto. È la differenza fra un effetto e un difetto. */

/* I due comandi della sezione stanno sulla stessa riga, in fondo a destra.
   Sotto i 620 px passano a colonna e si distendono a tutta larghezza: uno
   accanto all'altro diventerebbero due bersagli troppo stretti per un dito. */
.sezione__comandi {
	display: flex;
	align-items: center;
	gap: var(--passo-2);
	flex-wrap: wrap;
}

@media (max-width: 620px) {
	.sezione__comandi {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.sezione__comandi .bottone {
		justify-content: center;
	}
}

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

/* Il pulsante mentre il gruppo successivo sta arrivando: resta cliccabile e
   leggibile, cambia solo di intensità. Non si disabilita, perché un comando
   disattivato non spiega perché non risponde. */
.vetrina[data-attesa] [data-vetrina-avanti] {
	opacity: 0.6;
	pointer-events: none;
}

/* Entrata: la scheda arriva di lato e dall'alto, e si posa. La curva ha un
   soprassalto contenuto — un rimbalzo pieno su dieci oggetti insieme diventa
   chiassoso. Si animano solo `transform` e `opacity`, le due proprietà che il
   browser affida alla scheda grafica: nessun ricalcolo di impaginazione. */
.vetrina__scheda--entra {
	animation: vetrina-entra 580ms cubic-bezier(0.22, 1.1, 0.36, 1) both;
	will-change: transform, opacity;
}

@keyframes vetrina-entra {
	from {
		opacity: 0;
		transform: translate3d(var(--vetrina-scarto, -90px), -70px, 0) rotate(var(--vetrina-angolo, -4deg)) scale(0.9);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Uscita: breve e discreta. Le schede vecchie devono togliersi di mezzo, non
   fare a loro volta uno spettacolo. */
.vetrina__scheda--esce {
	animation: vetrina-esce 240ms ease-in both;
}

@keyframes vetrina-esce {
	to {
		opacity: 0;
		transform: translate3d(0, 12px, 0) scale(0.97);
	}
}

/* ------------------------------------------------------------------ *
 * Pagine legali (informativa privacy, note legali)
 *
 * Nessuna fotografia: sono pagine che si leggono, e un'intestazione
 * scenografica sopra un testo di legge è una promessa che il contenuto non
 * mantiene. Colonna stretta e interlinea generosa, perché queste pagine
 * vengono lette davvero solo se sono leggibili.
 * ------------------------------------------------------------------ */

/* Valori rilevati da snupers.com/privacy-policy/ e replicati: titolo
   Montserrat 800 a 45 px maiuscolo su fondo bianco, corpo Barlow 16 px con
   interlinea 28 px, colonna da circa 580 px. */
.pagina-legale {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}

.legale-testata h1 {
	margin: 0 0 var(--passo-2);
	font-size: clamp(2rem, 4.2vw, 2.8rem);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--inchiostro);
}

/* La premessa corre per tutta la larghezza, sopra le due colonne, come sul
   retail: è il cappello del documento e non fa parte del corpo suddiviso. */
.legale-premessa {
	margin: 0 0 var(--passo-4);
	line-height: 1.65;
}

/* Due colonne come nel retail. Il testo scorre: si legge tutta la prima
   colonna e poi la seconda, che è l'ordine naturale — e resta anche l'ordine
   del documento, quindi chi legge con la voce sente le sezioni in sequenza. */
.legale-corpo {
	column-count: 2;
	column-gap: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 900px) {
	.legale-corpo {
		column-count: 1;
	}
}

/* Un titoletto non deve restare orfano in fondo a una colonna, con il suo
   paragrafo che riparte in cima all'altra. */
.legale-blocco {
	break-inside: avoid-column;
	margin-bottom: var(--passo-3);
}

.legale-corpo h2 {
	margin: 0 0 var(--passo-1);
	font-size: 1rem;
	font-weight: 800;
	color: var(--inchiostro);
	break-after: avoid-column;
}

.legale-corpo p,
.legale-corpo li {
	font-size: 1rem;
	line-height: 1.75;
	margin-bottom: var(--passo-2);

	/* Giustificato come sul sito retail, per scelta del committente.
	   Il giustificato allarga gli spazi fra le parole per far quadrare la
	   riga, e su una colonna stretta questo apre "fiumi" bianchi verticali che
	   affaticano la lettura, soprattutto a chi ha dislessia. La sillabazione
	   automatica è ciò che rende il giustificato accettabile: spezzando le
	   parole lunghe — e l'italiano ne ha molte — gli spazi restano vicini alla
	   misura naturale. Funziona perché il documento dichiara `lang="it"`:
	   senza quello il browser non saprebbe dove spezzare. */
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;

	/* Limite alle sillabazioni consecutive: tre trattini di fila in fondo alla
	   colonna sono più brutti di uno spazio largo. Ignorato dai browser che
	   non lo supportano, senza conseguenze. */
	hyphenate-limit-chars: 7 3 3;
	-webkit-hyphenate-limit-lines: 2;
}

/* Gli indirizzi email e i collegamenti non si spezzano mai: un indirizzo
   tagliato da un trattino a fine riga si legge come un indirizzo sbagliato. */
.legale-corpo a {
	hyphens: manual;
}

/*
 * `ol` accanto a `ul`: i termini e condizioni usano anche elenchi numerati
 * (Art. 4), che senza questa regola resterebbero senza rientro e con i numeri
 * a filo del testo.
 */
.legale-corpo ul,
.legale-corpo ol {
	padding-left: 1.2rem;
	margin-bottom: var(--passo-2);
}

.legale-corpo a {
	color: var(--verde-scuro);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.legale-data {
	margin: var(--passo-4) 0 0;
	padding-top: var(--passo-2);
	border-top: 1px solid var(--bordo);
	font-size: 0.88rem;
	color: var(--inchiostro-tenue, #5c6b62);
}

/* ------------------------------------------------------------------ *
 * Pagina Contatti
 * ------------------------------------------------------------------ */

/* Colonna più stretta per il modulo: una riga di testo lunga 1200 px si legge
   male, e un campo largo altrettanto sembra chiedere un tema invece di un
   nome. Sessantacinque caratteri è la misura in cui l'occhio ritrova la riga
   successiva senza perdersi. */
.contenitore--stretto {
	max-width: 860px;
}

/* Intestazione alta: 62vh contro i circa 40 del ramo retail, per richiesta
   del committente. Il minimo in pixel evita che su uno schermo basso — un
   portatile vecchio, o un telefono in orizzontale — la fotografia si riduca a
   una striscia. */
.contatti-apertura {
	position: relative;
	min-height: min(62vh, 620px);
	display: flex;
	align-items: flex-end;
	padding: clamp(4rem, 12vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem);
	background: var(--verde);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Opacità alta: qui la fotografia è informazione — è il luogo dove hanno sede
   — e non un fondale come nell'apertura della home. Misurato: anche al 100%
   il titolo bianco resterebbe a 7,65 di contrasto contro il 4,5 richiesto,
   perché la leggibilità la garantisce il velo scuro in basso, non l'opacità.
   Il 70% lascia emergere la città conservando la dominante verde. */
.contatti-apertura__sfondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
	z-index: -2;
}

.contatti-apertura__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(33, 87, 52, 0.3), rgba(18, 40, 29, 0.78));
	z-index: -1;
}

.contatti-apertura .arco {
	right: -90px;
	bottom: -110px;
	width: 320px;
	height: 320px;
	border-width: 12px;
	opacity: 0.4;
}

.contatti-apertura h1 {
	margin: 0 0 var(--passo-2);
	color: #fff;
	max-width: 14ch;
}

.contatti-apertura .occhiello {
	color: var(--lime);
}

.contatti-apertura__sommario {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	color: #d5e7dc;
}

/* I tre recapiti. Su schermi stretti diventano una colonna sola: affiancarli
   a 375 px lascerebbe tre colonne da centoventi pixel, dove un indirizzo va a
   capo tre volte. */
.recapiti {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--passo-3);
}

@media (max-width: 860px) {
	.recapiti {
		grid-template-columns: 1fr;
	}
}

/* Carta piena invece del riquadro bordato. Il bordo grigio chiaro non faceva
   nulla: separava tre blocchi bianchi da un fondo bianco. La tinta tenue li
   rende oggetti, e permette di togliere il bordo del tutto — un elemento in
   meno, non uno in più. Nessun `hover` sul riquadro: non è cliccabile, e un
   riquadro che reagisce al passaggio del mouse promette un click che non c'è. */
.recapito {
	background: var(--verde-tenue);
	padding: var(--passo-3);
}

/* Titolo e icona sulla stessa riga, l'icona in fondo. Davanti competerebbe
   con l'occhiello per il primo sguardo; in fondo chiude la riga. */
.recapito__titolo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--passo-2);
	margin: 0 0 var(--passo-2);
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--verde);
}

/* Il lime del tema (#8bc348) su questa tinta dà un contrasto di 1,9:1 —
   misurato, non stimato: l'icona sarebbe quasi invisibile. Il verde medio
   arriva a 3,4:1 e resta più chiaro del testo, che è ciò che serve. */
.recapito__icona {
	flex: none;
	color: var(--verde-medio);
}

.recapito__dato {
	margin: 0 0 var(--passo-1);
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--inchiostro);
}

/* La sottolineatura resta: sono gli unici due elementi cliccabili del gruppo e
   devono distinguersi dal testo attorno. Passa dal lime al verde medio per lo
   stesso motivo dell'icona — sul fondo tenue il lime non si vedeva. */
.recapito__dato a {
	color: var(--verde-scuro);
	text-decoration: none;
	border-bottom: 2px solid var(--verde-medio);
	transition: color var(--transizione);
}

.recapito__dato a:hover {
	color: var(--verde);
}

.recapito__nota {
	margin: 0;
	font-size: 0.88rem;
	color: var(--inchiostro-tenue, #5c6b62);
}

.contatti-testo,
.contatti-guida {
	margin-top: var(--passo-4);
	max-width: 68ch;
}

.contatti-guida {
	margin-top: 0;
	margin-bottom: var(--passo-3);
	color: var(--inchiostro-tenue, #5c6b62);
}

/* Avvisi di esito. Il colore non è l'unico segnale: c'è sempre una parola in
   grassetto che dice cosa è successo, perché una persona daltonica vedrebbe
   due riquadri identici. */
.avviso {
	padding: var(--passo-2) var(--passo-3);
	margin-bottom: var(--passo-3);
	border-left: 4px solid var(--verde);
	background: var(--verde-tenue);
}

.avviso p {
	margin: 0;
}

.avviso ul {
	margin: var(--passo-1) 0 0;
	padding-left: 1.2rem;
}

.avviso--errore {
	border-left-color: #b3261e;
	background: var(--rosso-fondo);
}

.avviso--errore:focus-visible {
	outline: 3px solid #b3261e;
	outline-offset: 3px;
}

/* ---- Diagramma dei collegamenti accanto al modulo ---- */

/* Schema a sinistra, modulo a destra. Il modulo era largo 460 px, portato a
   613 (un terzo in più) su richiesta del committente: i campi lunghi — nome
   dell'istituto, periodo, messaggio — respirano, e resta comunque una colonna
   sola, che è ciò che accorcia il tragitto dell'occhio fra etichetta e campo.
   Il bordo sinistro del modulo passa dal 57% al 49% del blocco; il diagramma
   dei collegamenti arriva al 33%, quindi non ci finisce sotto. */
.contatti-doppia {
	display: grid;
	grid-template-columns: 1fr minmax(0, 613px);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/* Il punto di rottura è salito da 980 a 1180 px insieme all'allargamento del
   modulo. Con 613 px di modulo, a 1000 px di finestra alla colonna di testo ne
   restavano 263 e il diagramma finiva sotto il modulo: misurato, non temuto.
   Sotto i 1180 si passa a una colonna sola, dove il problema non esiste. */
@media (max-width: 1180px) {
	.contatti-doppia {
		grid-template-columns: 1fr;
	}
}

/* Il diagramma è lo sfondo dell'intero blocco, non un riquadro dentro una
   colonna: prende tutta la larghezza e tutta l'altezza della sezione, al posto
   della tinta piena che c'era prima. */
.contatti-blocco {
	position: relative;
	background: var(--verde-notte);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.contatti-blocco__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.contatti-blocco__fondo svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Reticolo, disegnato con un gradiente ripetuto invece che con decine di
   elementi: una regola sola, e nulla in più nel documento. */
.contatti-blocco__fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(45, 106, 69, 0.45) 0 1px, transparent 1px 52px),
		repeating-linear-gradient(90deg, rgba(45, 106, 69, 0.45) 0 1px, transparent 1px 52px);
}

.contatti-blocco__contenuto {
	position: relative;
	z-index: 1;
}

/* Il testo di sinistra sta sul fondo scuro: colori ribaltati. */
.contatti-blocco h2 {
	color: #fff;
	margin-top: 0;
}

.contatti-blocco .occhiello {
	color: var(--lime);
}

.contatti-mappa__intro {
	max-width: 42ch;
	color: #d5e7dc;
}

.contatti-mappa__linea {
	stroke: var(--lime);
	stroke-width: 1;
	stroke-dasharray: 2 5;
	stroke-linecap: round;
	opacity: 0.9;
	vector-effect: non-scaling-stroke;
}

.contatti-mappa__punto,
.contatti-mappa__sede {
	position: absolute;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 130px;
}

.contatti-mappa__sede {
	width: 160px;
	z-index: 2;
}

.contatti-mappa__segno {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 auto 5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(18, 40, 29, 0.7);
}

/* Il punto della sede pulsa piano: dice «siamo qui» senza una freccia. */
.contatti-mappa__pulsa {
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: var(--lime);
	box-shadow: 0 0 0 0 rgba(168, 205, 59, 0.5);
	animation: contatti-pulsa 2.8s ease-out infinite;
}

@keyframes contatti-pulsa {
	70% { box-shadow: 0 0 0 16px rgba(168, 205, 59, 0); }
	100% { box-shadow: 0 0 0 0 rgba(168, 205, 59, 0); }
}

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

.contatti-mappa__etichetta {
	display: block;
	font-size: 0.7rem;
	line-height: 1.3;
	color: #eaf5e2;
	text-shadow: 0 1px 5px rgba(8, 16, 11, 0.95);
}

.contatti-mappa__sede .contatti-mappa__etichetta {
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
}

.contatti-mappa__etichetta em {
	display: block;
	font-style: normal;
	font-weight: 500;
	color: var(--lime);
}

/* L'elenco sotto il disegno non è una didascalia: è la stessa informazione in
   forma leggibile, per chi usa un lettore di schermo e per gli schermi stretti,
   dove il disegno sparisce. */
.contatti-mappa__titolo {
	margin: var(--passo-4) 0 var(--passo-2);
	font-size: 1.05rem;
	color: #fff;
}

.contatti-mappa__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 34ch;
}

.contatti-mappa__elenco li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.contatti-mappa__tempo {
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 1rem;
	color: var(--lime);
	white-space: nowrap;
	min-width: 4.5ch;
}

.contatti-mappa__luogo {
	color: #fff;
}

.contatti-mappa__luogo em {
	display: block;
	font-style: normal;
	font-size: 0.82rem;
	color: #a9c4b5;
}

.contatti-mappa__nota {
	margin: var(--passo-2) 0 0;
	font-size: 0.82rem;
	color: #a9c4b5;
}

/* Sotto i 1180 px le due colonne diventano una e il modulo va a finire sopra
   i punti del diagramma: le etichette non si leggerebbero comunque, e sotto
   un modulo bianco sparirebbero. Si spengono, e resta l'elenco. */
@media (max-width: 1180px) {
	.contatti-blocco__fondo svg,
	.contatti-mappa__sede,
	.contatti-mappa__punto {
		display: none;
	}
}

/* Il modulo su carta bianca: si stacca dal fondo scuro e copre i punti del
   diagramma che gli finiscono sotto, invece di lasciarli trasparire dietro i
   campi. */
.contatti-form {
	background: var(--carta);
	padding: clamp(1.4rem, 3vw, 2.2rem);
	color: var(--inchiostro);
	box-shadow: 0 0 40px rgba(8, 16, 11, 0.35);
}

.contatti-form .contatti-guida {
	margin-top: 0;
}

/* Il modulo, in colonna sola: un campo per riga. Affiancarne due darebbe campi
   da trecento pixel, dove un nome di istituto non si legge per intero mentre
   lo si scrive. */
.modulo-contatti {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--passo-3);
}

.modulo-contatti__campo--largo,
.modulo-contatti__azioni,
.modulo-contatti__consenso {
	grid-column: 1 / -1;
}

.modulo-contatti label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--verde-scuro);
}

.modulo-contatti input[type="text"],
.modulo-contatti input[type="email"],
.modulo-contatti input[type="tel"],
.modulo-contatti textarea {
	width: 100%;
	font: inherit;
	color: var(--inchiostro);
	background: var(--carta);
	border: 1px solid var(--bordo);
	border-radius: 0;
	padding: 0.7rem 0.85rem;
	/* Sotto i 44 px il dito manca il campo. */
	min-height: 44px;
	transition: border-color var(--transizione), box-shadow var(--transizione);
}

.modulo-contatti textarea {
	resize: vertical;
	line-height: 1.55;
}

.modulo-contatti input:focus,
.modulo-contatti textarea:focus {
	outline: none;
	border-color: var(--verde);
	box-shadow: 0 0 0 3px rgba(45, 106, 69, 0.16);
}

.modulo-contatti__necessario {
	color: #b3261e;
	margin-left: 3px;
}

.modulo-contatti__aiuto {
	margin: 6px 0 0;
	font-size: 0.82rem;
	color: var(--inchiostro-tenue, #5c6b62);
}

.modulo-contatti__consenso label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--inchiostro);
	cursor: pointer;
}

.modulo-contatti__consenso input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--verde);
}

.modulo-contatti__azioni {
	display: flex;
	align-items: center;
	gap: var(--passo-3);
	flex-wrap: wrap;
}

.modulo-contatti__nota {
	margin: 0;
	font-size: 0.9rem;
	color: var(--inchiostro-tenue, #5c6b62);
}

.modulo-contatti__nota a {
	color: var(--verde-scuro);
	font-weight: 500;
}

/* La trappola per i programmi automatici: fuori campo, non nascosta con
   `display: none` — che alcuni riempitori automatici sanno riconoscere e
   saltare. */
.modulo-contatti__trappola {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Filmato di apertura
 *
 * Si sovrappone alla fotografia, che resta sotto e continua a fare da
 * elemento più grande della pagina. Il filmato compare solo quando è pronto:
 * fino ad allora, e su telefono, si vede la fotografia e nessuno se ne
 * accorge.
 * ------------------------------------------------------------------ */

.apertura__filmato {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 900ms ease;
	pointer-events: none;
	z-index: -2;
}

/* Il click non si ascolta sul filmato ma sull'intera sezione.
 *
 * Provato e scartato: rendere cliccabile il `<video>` non funziona, perché il
 * gradiente `.apertura::after` copre tutta la sezione a `z-index: -1` e si
 * prende lui il puntatore. Si potrebbe togliergli `pointer-events`, ma poi
 * resterebbero i motivi geometrici e qualunque cosa si aggiunga domani: ogni
 * nuovo strato decorativo tornerebbe a rubare il click.
 *
 * Ascoltando sulla sezione il bersaglio è grande e stabile; il copione lascia
 * passare i click che nascono su collegamenti e comandi. */
.apertura.filmato-attivo {
	cursor: pointer;
}

/* Il testo resta selezionabile e i suoi comandi cliccabili: su di loro il
   puntatore torna quello di sempre. */
.apertura.filmato-attivo a,
.apertura.filmato-attivo button {
	cursor: pointer;
}

.apertura.filmato-attivo h1,
.apertura.filmato-attivo p {
	cursor: auto;
}

/* Segnale al centro: compare al click e sfuma. Non intercetta il puntatore,
   altrimenti il click successivo cadrebbe su di lui invece che sul filmato. */
.apertura__segnale {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	margin: -46px 0 0 -46px;
	border-radius: 50%;
	background: rgba(8, 16, 11, 0.5);
	color: #fff;
	opacity: 0;
	transform: scale(0.82);
	pointer-events: none;
	transition: opacity 900ms ease, transform 900ms ease;
}

/* Il lampo di conferma: entra svelto, si spegne con calma. */
.apertura__segnale.acceso {
	opacity: 1;
	transform: scale(1);
	transition: opacity 140ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* A filmato fermo resta un'ombra di simbolo: senza, chi torna a guardare
   dopo qualche secondo non capisce se il filmato è in pausa o guasto. */
.apertura__segnale.in-attesa {
	opacity: 0.16;
	transform: scale(1);
}

.apertura__segnale svg {
	display: block;
}

.apertura__segnale-pausa,
.apertura__segnale-play {
	display: none;
}

.apertura__segnale[data-simbolo="pausa"] .apertura__segnale-pausa,
.apertura__segnale[data-simbolo="play"] .apertura__segnale-play {
	display: block;
}

/* La stessa opacità della fotografia che sostituisce: il filmato è un fondale,
   non un contenuto. A piena opacità cancellava il titolo e il sommario. */
.apertura__filmato.in-onda {
	opacity: 0.34;
}

/* Il comando di pausa non si vede, ma continua a esistere.
 *
 * Toglierlo del tutto sarebbe stato più semplice, e sbagliato: le WCAG
 * chiedono che qualunque movimento partito da solo e più lungo di cinque
 * secondi si possa fermare, e qui il ciclo dura nove secondi e mezzo. Chi ha
 * disturbi vestibolari o dell'attenzione ha diritto a fermarlo.
 *
 * La soluzione è la stessa del collegamento "salta al contenuto" in cima alla
 * pagina: il pulsante è fuori campo finché non lo si raggiunge con il
 * tabulatore, e allora compare. Chi naviga col mouse non lo vede mai; chi ne
 * ha bisogno lo trova al primo Tab. Il movimento ridotto di sistema resta
 * comunque rispettato a monte: in quel caso il filmato non parte affatto.
 */
.apertura__pausa {
	position: absolute;
	right: var(--passo-3);
	bottom: var(--passo-3);
	z-index: 3;
	transform: translateY(calc(100% + var(--passo-3)));
	opacity: 0;
	pointer-events: none;
	transition: transform 220ms ease, opacity 220ms ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	background: rgba(8, 16, 11, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 0;
	color: #fff;
	font-family: var(--famiglia-titoli);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transizione);
}

/* Compare solo quando arriva il fuoco da tastiera. */
.apertura__pausa:focus-visible {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.apertura__pausa:hover {
	background: rgba(8, 16, 11, 0.78);
}

/* Il quadratino o il triangolino davanti all'etichetta, disegnati con i
   bordi: due caratteri in meno da tradurre e nessuna immagine da caricare. */
.apertura__pausa::before {
	content: "";
	width: 9px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.apertura__pausa[aria-pressed="true"]::before {
	width: 0;
	height: 0;
	border-left: 9px solid currentColor;
	border-right: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

@media (max-width: 760px) {
	.apertura__pausa {
		right: var(--passo-2);
		bottom: var(--passo-2);
	}
}

/* ------------------------------------------------------------------ *
 * Tabellone delle partenze
 *
 * Le nove sezioni tematiche rese come il tabellone di una stazione, sopra la
 * fotografia di King's Cross in bianco e nero. Londra è una destinazione reale
 * del catalogo: la stazione non è un fondale qualunque.
 * ------------------------------------------------------------------ */

.tabellone {
	position: relative;
	overflow: hidden;
	background: var(--verde-notte);
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	isolation: isolate;
}

.tabellone__sfondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Il bianco e nero lo applica il tema: la fotografia caricata resta a
	   colori nella libreria dei media e può essere riusata altrove. */
	filter: grayscale(1) contrast(1.1) brightness(0.85);
	z-index: -2;
}

/* Il velo non è decorativo: testo bianco su una fotografia non raggiunge il
   contrasto minimo dove la fotografia è chiara, e in una stazione la luce in
   fondo alla pensilina lo è sempre. Senza, la sezione non è leggibile da tutti. */
.tabellone__velo {
	position: absolute;
	inset: 0;
	background: rgba(8, 16, 11, 0.62);
	z-index: -1;
}

/* Senza fotografia caricata il fondo resta pieno: il tabellone funziona
   ugualmente, e il sito non mostra un buco in attesa del materiale. */
.tabellone--senza-foto .tabellone__velo {
	background: rgba(8, 16, 11, 0.35);
}

.tabellone__pannello {
	background: rgba(10, 20, 14, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: clamp(1rem, 2.2vw, 1.6rem);
	max-width: 1100px;
	margin-inline: auto;
}

/* Il vetro smerigliato è un di più: dove non è supportato, o su macchine
   deboli come quelle di molte scuole, il pannello resta pieno e leggibile. */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.tabellone__pannello {
		background: rgba(10, 20, 14, 0.42);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
}

.tabellone__testata,
.tabellone__piede {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--passo-2);
	flex-wrap: wrap;
}

.tabellone__testata {
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	padding-bottom: 0.7rem;
	margin-bottom: 0.3rem;
}

.tabellone__piede {
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	padding-top: 0.75rem;
	margin-top: 0.75rem;
	align-items: center;
}

.tabellone__occhiello {
	margin: 0;
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1;
}

.tabellone__conteggio {
	margin: 0;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.04em;
}

/* Nel piede resta il solo comando: senza la nota accanto, va allineato a
   destra, dove la colonna della durata gli fa da riferimento verticale. */
.tabellone__piede {
	justify-content: flex-end;
}

.tabellone__riga {
	display: flex;
	align-items: center;
	gap: var(--passo-2);
	padding: 0.55rem 0.2rem;
	/* Sotto i 44 px il dito sbaglia bersaglio: vale anche per una riga di
	   tabellone, che è a tutti gli effetti un collegamento. */
	min-height: 44px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	text-decoration: none;
	transition: background var(--transizione);
}

.tabellone__riga:hover,
.tabellone__riga:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

.tabellone__nome {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	flex: 1;
	min-width: 0;
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

/* Una cella per lettera. Larghezza fissa: è ciò che dà l'allineamento a
   colonne del tabellone anche senza un carattere a spaziatura fissa. */
.tabellone__cella {
	width: 13px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.4);
	border-radius: 1px;
	overflow: hidden;
	font-size: 0.72rem;
}

.tabellone__cella--spazio {
	background: transparent;
	box-shadow: none;
	width: 7px;
}

.tabellone__riga:hover .tabellone__cella,
.tabellone__riga:focus-visible .tabellone__cella {
	background: rgba(255, 255, 255, 0.22);
}

.tabellone__quanti {
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 1.05rem;
	color: #fff;
	min-width: 2ch;
	text-align: right;
}

.tabellone__durata {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
	min-width: 9ch;
	text-align: right;
	transition: color var(--transizione);
}

/* Il lime compare solo qui, e solo al passaggio: un tocco, non una palette. */
.tabellone__riga:hover .tabellone__durata,
.tabellone__riga:focus-visible .tabellone__durata {
	color: var(--lime);
}

.tabellone__comando {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.55rem 1rem;
	min-height: 44px;
	cursor: pointer;
	transition: background var(--transizione);
}

.tabellone__comando:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* Su telefono il nome resta testo normale — il copione non lo spezza in celle
   (vedi la nota in main.js): trentadue palette su uno schermo stretto vanno a
   capo e raddoppiano l'altezza della sezione. */
@media (max-width: 620px) {
	.tabellone__riga {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.tabellone__nome {
		flex: 1 0 100%;
		font-size: 0.82rem;
		letter-spacing: 0.04em;
		line-height: 1.25;
	}

	.tabellone__quanti {
		font-size: 0.9rem;
		min-width: auto;
	}

	.tabellone__durata {
		margin-left: auto;
		min-width: auto;
	}
}

.comparsa {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.comparsa.visibile {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------ *
 * Adattamento
 * ------------------------------------------------------------------ */

@media (max-width: 1000px) {
	.viaggio-dettaglio {
		grid-template-columns: 1fr;
		gap: var(--passo-4);
	}

	.sintesi {
		position: static;
	}
}

@media (max-width: 780px) {
	/* `grid` e non `block`: il `place-items: center` che centra le tre linee
	   nei 44 px del bersaglio ha effetto solo in un contenitore grid o flex. */
	.apri-menu {
		display: grid;
	}

	.navigazione {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--bordo);
		padding: var(--passo-3);
	}

	.navigazione.aperta {
		display: block;
	}

	.navigazione ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--passo-2);
	}

	.filtri {
		position: static;
	}

	.programma {
		padding-left: 44px;
	}

	.giornata__numero {
		left: -44px;
		width: 30px;
		height: 30px;
		font-size: 0.74rem;
	}

	.programma::before {
		left: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.comparsa {
		opacity: 1;
		transform: none;
	}

	/* Chi ha chiesto meno movimento non deve vedere schede che volano: resta
	   una dissolvenza, che comunica comunque che il contenuto è cambiato.
	   La regola generale qui sopra azzera ogni durata, quindi vanno ridichiarate
	   sia l'animazione sia il tempo. */
	.vetrina__scheda--entra,
	.vetrina__scheda--esce {
		animation-delay: 0ms !important;
		transform: none !important;
	}

	.vetrina__scheda--entra {
		animation: vetrina-dissolvi 260ms ease both !important;
		animation-duration: 260ms !important;
	}

	.vetrina__scheda--esce {
		animation: vetrina-dissolvi 160ms ease reverse both !important;
		animation-duration: 160ms !important;
	}

	@keyframes vetrina-dissolvi {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}

/* Le regole di stampa che stavano qui sono confluite nel blocco `@media print`
   in fondo al foglio, insieme a quelle della scheda viaggio. Erano due blocchi
   separati a centinaia di righe di distanza: il secondo vinceva sul primo per
   posizione, e chi ne avesse toccato uno solo avrebbe ottenuto risultati
   inspiegabili. Un solo posto dove si decide cosa esce dalla stampante. */

/* ------------------------------------------------------------------ *
 * Pannello della richiesta di preventivo
 * ------------------------------------------------------------------ *
 *
 * A tutta finestra e non riquadro centrato, come il ramo retail: il gesto
 * è quello che l'utente conosce già dall'altro sito, e i nostri sette campi
 * più il consenso ci stanno comodi.
 *
 * È un `<dialog>`: fuoco intrappolato, chiusura con ESC e strato superiore
 * li dà il browser. Il retail li scrive a mano in jQuery. */
.pannello {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	/* Bianco al 95%, come il ramo retail: la pagina sotto resta appena
	   percepibile e il pannello si legge come uno strato sopra il sito, non
	   come un'altra pagina. Misurato là: `opacity: 0.95` su fondo pieno. */
	background: rgba(255, 255, 255, 0.95);
	color: var(--inchiostro);
	overflow: hidden;
}

/* Nessun velo scuro: il velo è il pannello stesso, semitrasparente. Un
   `::backdrop` colorato sotto un fondo al 95% ne cambierebbe la tinta. */
.pannello::backdrop {
	background: transparent;
}

/* Il foglio scorre, non la finestra sotto: `overscroll-behavior` impedisce
   che arrivati in fondo al modulo la pagina retrostante inizi a scorrere,
   che è il difetto classico dei pannelli a tutta pagina. */
.pannello__foglio {
	position: relative;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.pannello__contenuto {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(3rem, 7vw, 4.5rem) var(--passo-3) var(--passo-5);
}

.pannello__contenuto h2 {
	margin: 0 0 var(--passo-3);
}

/* La X ripresa dal ramo retail: riquadro da 128 px in alto a destra, segno
   sottile in lime, e al passaggio del mouse mezzo giro in 300 ms.
   Là è un carattere icona dentro uno `<span>`; qui è un `<button>` con un
   disegno vettoriale, così è raggiungibile da tastiera e ha un nome.
   Differenza voluta: `sticky` invece di `absolute`, perché nel retail la X
   scorre via col contenuto e per chiudere bisogna risalire tutto il modulo. */
.pannello__chiudi {
	position: sticky;
	top: 0;
	float: right;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lime);
	cursor: pointer;
}

.pannello__chiudi svg {
	transition:
		transform 300ms ease,
		color 300ms ease;
}

.pannello__chiudi:hover svg,
.pannello__chiudi:focus-visible svg {
	transform: rotate(180deg);
	color: var(--lime-scuro);
}

@media (prefers-reduced-motion: reduce) {
	.pannello__chiudi svg {
		transition: color 300ms ease;
	}

	.pannello__chiudi:hover svg,
	.pannello__chiudi:focus-visible svg {
		transform: none;
	}
}

/* Sotto i 620 px un riquadro da 128 è un terzo dello schermo. Il segno resta
   ben oltre i 44 px minimi per il tocco. */
@media (max-width: 620px) {
	.pannello__chiudi {
		width: 76px;
		height: 76px;
	}
}

/* Il contesto: titolo e dati dell'itinerario da cui si è partiti. */
.pannello__contesto {
	margin: 0 0 var(--passo-3);
	padding: var(--passo-2) var(--passo-3);
	background: var(--verde-tenue);
	border-left: 3px solid var(--verde-medio);
	border-radius: 0;
}

.pannello__contesto-titolo {
	margin: 0;
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 1rem;
	color: var(--verde-notte);
}

.pannello__contesto-dati {
	margin: 4px 0 0;
	font-size: 0.88rem;
	color: var(--inchiostro-tenue);
}

/* ---- Entrata: cala dall'alto ----
 *
 * `@starting-style` dà lo stato di partenza dell'apertura senza una classe
 * aggiunta dal copione, e `overlay` nella transizione fa restare l'elemento
 * nello strato superiore anche durante l'uscita — senza, il pannello
 * sparirebbe di colpo alla chiusura invece di risalire. */
.pannello,
.pannello::backdrop {
	transition:
		display 420ms allow-discrete,
		overlay 420ms allow-discrete,
		opacity 420ms ease,
		transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pannello {
	opacity: 0;
	transform: translateY(-100%);
}

.pannello[open] {
	opacity: 1;
	transform: none;
}

@starting-style {
	.pannello[open] {
		opacity: 0;
		transform: translateY(-100%);
	}
}

.pannello::backdrop {
	opacity: 0;
}

.pannello[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.pannello[open]::backdrop {
		opacity: 0;
	}
}

/* Nel pannello i campi vanno a coppie: referente ed email su una riga,
   classi e periodo su un'altra. Due righe in meno, e i campi corti smettono
   di occupare seicento pixel per contenere una data.
   Istituto e messaggio restano a tutta larghezza: un nome di istituto va
   letto per intero mentre lo si scrive. */
.pannello .modulo-contatti {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--passo-2);
	/* Righe più strette delle colonne: fra due campi sovrapposti bastano
	   dodici pixel perché si leggano come separati, mentre affiancati serve
	   più aria per non far sembrare due campi un campo solo. */
	row-gap: 12px;
}

.pannello .modulo-contatti__campo--largo,
.pannello .modulo-contatti__consenso,
.pannello .modulo-contatti__azioni {
	grid-column: 1 / -1;
}

/* Sotto i 620 px due colonne darebbero campi da centocinquanta pixel. */
@media (max-width: 620px) {
	.pannello .modulo-contatti {
		grid-template-columns: 1fr;
	}
}

/* ---- Compattamento, solo dentro il pannello ----
 *
 * Nella pagina Contatti lo spazio verticale non è un problema: il modulo
 * respira e va bene così. Nel pannello il contenuto misurava **1590 px in una
 * finestra da 919**, con il pulsante di invio mai visibile all'apertura. Qui
 * si stringe tutto ciò che si può stringere senza togliere un campo né
 * scendere sotto i 44 px di bersaglio: interlinee, spaziature, aiuti.
 * Nessun campo nascosto — un campo che non si vede è un campo che non arriva. */
.pannello .contatti-guida {
	margin-bottom: var(--passo-1);
	font-size: 0.92rem;
}

/* Secondo giro di compattamento (2026-08-04): l'obiettivo è far stare il
 * modulo intero in una finestra da 900 px senza barra di scorrimento, ora che
 * il riquadro dell'itinerario compare **sempre** su una scheda viaggio — prima
 * appariva solo aprendo dal riquadro azzurro, quindi il caso alto era l'eccezione
 * e adesso è la regola.
 *
 * Recuperati circa 125 px, tutti da spazi vuoti e nessuno da contenuto: nessun
 * campo tolto, nessun aiuto accorciato, e i bersagli restano a 44 px. La voce
 * più grossa era il fondo del pannello — 64 px di aria sotto un pulsante che è
 * già l'ultima cosa della pagina.
 *
 * Se dovesse ancora scorrere su finestre più basse, le due leve successive sono
 * il campo messaggio da 3 righe a 2 (−25 px) e la X da 128 a 96 px (−32).
 * Entrambe costano qualcosa: la prima rende angusto il campo più importante, la
 * seconda allontana dal ramo retail, che quella misura ce l'ha uguale. */
.pannello__contenuto {
	padding-top: var(--passo-3);
	padding-bottom: var(--passo-3);
	/* Cento pixel in più di larghezza non allargano il pannello — il modulo è
	   centrato — ma tolgono l'andata a capo agli aiuti sotto i campi appaiati.
	   Ogni riga di aiuto che si evita vale 16 px, ed era anche il difetto già
	   annotato dell'aiuto sotto Email, che scendeva a due righe lasciando un
	   vuoto sotto il campo del referente. */
	max-width: 820px;
}

.pannello__contenuto h2 {
	margin-bottom: var(--passo-1);
}

.pannello .pannello__contesto {
	margin-bottom: var(--passo-2);
	padding: 10px var(--passo-2);
}

.pannello .modulo-contatti {
	gap: 12px;
}

.pannello .modulo-contatti label {
	margin-bottom: 3px;
	line-height: 1.3;
}

.pannello .modulo-contatti input[type="text"],
.pannello .modulo-contatti input[type="email"],
.pannello .modulo-contatti input[type="tel"] {
	/* 44 px netti: la soglia minima perché un dito colpisca il bersaglio.
	   Sotto non si scende, per nessuna ragione di spazio. */
	padding-block: 0.55rem;
}

.pannello .modulo-contatti__aiuto {
	margin-top: 2px;
	font-size: 0.8rem;
	line-height: 1.35;
}

.pannello .modulo-contatti__consenso .modulo-contatti__aiuto {
	margin-top: 4px;
}

.pannello .modulo-contatti__azioni {
	margin-top: 0;
}

@media (max-width: 620px) {
	.pannello__contenuto {
		padding-top: var(--passo-5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pannello,
	.pannello::backdrop {
		transition: none;
	}

	.pannello[open] {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Archivio: caricamento progressivo
 * ------------------------------------------------------------------ */

.archivio__comandi {
	display: flex;
	justify-content: center;
	margin-top: var(--passo-4);
}

/* La rotella del ramo retail, misurata sulle sue regole: due anelli
   concentrici da 64 e 56 px che girano **a velocità diverse**, 2 s e 5 s.
   È la sfasatura fra i due tempi a dare l'effetto di ingranaggio: con la
   stessa durata sembrerebbero un anello solo.
   L'esterno ha colorati i bordi alto e basso, l'interno quelli laterali —
   così a ogni istante si vedono quattro archi in croce invece di due. */
.archivio__attesa {
	display: flex;
	justify-content: center;
}

.rotella {
	display: block;
	width: 64px;
	height: 64px;
	margin: var(--passo-4) auto;
	position: relative;
	border-radius: 50%;
	border: 2px solid transparent;
	border-top-color: var(--lime);
	border-bottom-color: var(--lime);
	animation: rotella 2s linear infinite;
}

.rotella::before {
	content: "";
	display: block;
	position: absolute;
	left: 2px;
	top: 2px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-left-color: var(--verde);
	border-right-color: var(--verde);
	animation: rotella 5s linear infinite;
}

@keyframes rotella {
	to { transform: rotate(360deg); }
}

/* Senza movimento la rotella non direbbe più «sto caricando»: al suo posto
   una scritta, che quel lavoro lo fa comunque. */
@media (prefers-reduced-motion: reduce) {
	.rotella,
	.rotella::before {
		animation: none;
	}

	.rotella {
		width: auto;
		height: auto;
		border: 0;
		border-radius: 0;
		text-align: center;
		color: var(--inchiostro-tenue);
	}

	.rotella::before {
		position: static;
		width: auto;
		height: auto;
		border: 0;
		content: "Caricamento in corso…";
	}
}

.archivio__annuncio {
	margin: var(--passo-2) 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--inchiostro-tenue);
}

/* Il fuoco sulla prima scheda nuova serve a chi naviga da tastiera, ma la
   scheda non è un comando: il contorno va mostrato senza farla sembrare
   selezionabile. */
.griglia > [tabindex="-1"]:focus {
	outline: 3px solid var(--verde-medio);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ *
 * Pulsante «torna in cima»
 *
 * Compare **solo quando il piede entra nello schermo**, non dopo un numero
 * fisso di pixel: la pagina è finita quando è finita, e su una scheda corta e
 * su un archivio lungo quel punto sta in due posti diversi.
 *
 * Quadrato e non tondo: ogni pulsante del sito ha `border-radius: 0`, dal
 * modulo di ricerca ai nastri delle schede, e un cerchio qui sarebbe l'unico
 * elemento circolare di tutte le pagine.
 *
 * Bianco su piede verde, come il pulsante della coda: 15,6:1. Il quadrato è di
 * 48 px, sopra i 44 che servono perché un dito colpisca il bersaglio.
 *
 * Il rimbalzo **si fa una volta sola, all'entrata**. Un elemento che rimbalza
 * per sempre a pochi centimetri dai recapiti diventa rumore, e cattura l'occhio
 * proprio mentre si legge un numero di telefono: il movimento serve a farsi
 * notare quando arriva, non a farsi guardare per sempre.
 * ------------------------------------------------------------------ */
.torna-su {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 50;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;

	background: #fff;
	color: var(--verde-notte);
	border: 1px solid #fff;
	border-radius: 0;
	text-decoration: none;

	/* `visibility` oltre a `opacity`: un elemento a opacità zero resta
	   cliccabile e raggiungibile da tastiera, e sarebbe una trappola. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity var(--transizione),
		transform var(--transizione),
		visibility var(--transizione),
		background var(--transizione);
}

.torna-su.visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
	animation: torna-su-rimbalzo 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms 1;
}

.torna-su:hover {
	background: var(--verde-tenue);
}

.torna-su:focus-visible {
	outline: 3px solid var(--lime);
	outline-offset: 3px;
}

.torna-su svg {
	width: 20px;
	height: 20px;
	display: block;
}

@keyframes torna-su-rimbalzo {
	0%   { transform: translateY(0); }
	30%  { transform: translateY(-9px); }
	55%  { transform: translateY(0); }
	75%  { transform: translateY(-3px); }
	100% { transform: translateY(0); }
}

/* La rete di sicurezza ha la stessa specificità della regola che annulla —
   `.torna-su.visibile`, due classi — altrimenti perderebbe in silenzio. */
@media (prefers-reduced-motion: reduce) {
	.torna-su,
	.torna-su.visibile {
		transition: opacity 200ms linear, visibility 200ms linear;
		transform: none;
		animation: none;
	}
}

/* ------------------------------------------------------------------ *
 * Coda della pagina «Chi siamo»
 *
 * Il congedo della pagina, e da oggi l'unico: su «Chi siamo» il richiamo dei
 * tre passi è spento, quindi questa fascia porta anche l'invito.
 *
 * **Il fondo non è `.trama-punti`, ed è deliberato.** Quella classe e `.piede`
 * usano lo stesso `--verde-scuro` con la stessa trama: senza il richiamo chiaro
 * in mezzo, coda e piede diventerebbero un unico campo verde e non si capirebbe
 * dove finisce la pagina. `--verde-notte` è più scuro del piede — lo stesso del
 * tabellone in home — quindi il confine si vede senza introdurre un colore
 * nuovo. I punti sono all'8% invece che al 10%: su un fondo più scuro la stessa
 * opacità li rendeva più evidenti del dovuto.
 * ------------------------------------------------------------------ */
.coda {
	background-color: var(--verde-notte);
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0.9px, transparent 1px);
	background-size: 12px 12px;
	color: #fff;
	text-align: center;
	padding: clamp(4rem, 9vw, 6.5rem) 0;
	position: relative;
	overflow: hidden;
}

.coda h2 {
	color: #fff;
	max-width: 20ch;
	margin-inline: auto;
}

.coda .testo {
	color: #cfe6d8;
	max-width: 52ch;
	margin-inline: auto;
}

.coda__azione {
	margin: var(--passo-4) 0 0;
}

/* Pulsante bianco pieno e non `--chiaro`.
 *
 * `.bottone--chiaro` è trasparente con il testo `--verde`: nato per i fondi
 * chiari, qui sarebbe verde su verde scuro. E un fantasma sarebbe comunque
 * troppo debole, perché questo è ormai **l'unico invito della pagina**. Bianco
 * su `--verde-notte` dà 15,6:1, e il testo scuro sul bianco altrettanto.
 *
 * Al passaggio del mouse si va su `--verde-tenue` e non sul lime: bianco su
 * lime era stato misurato a 2,10:1, e il testo scuro su lime era già stato
 * scartato dal committente quando si scelse `.bottone--forte`. */
.coda .bottone {
	background: #fff;
	border-color: #fff;
	color: var(--verde-notte);
}

.coda .bottone:hover {
	background: var(--verde-tenue);
	border-color: var(--verde-tenue);
	color: var(--verde-notte);
}

/* ------------------------------------------------------------------ *
 * Apertura a fotografia — blocco condiviso
 *
 * Nato per «Accessibilità e inclusione», usato dal 2026-08-12 anche da
 * «Chi siamo». Si chiamava `.acc-apertura`: rinominato perché un nome che
 * porta il titolo di una pagina sola mente appena la seconda lo adotta, e
 * chi legge il CSS non capisce se può toccarlo.
 *
 * Chi lo usa deve saperlo: **modificarlo cambia due pagine**, e vanno
 * riguardate entrambe.
 *
 * La fotografia è decorazione — `alt` vuoto, opacità 0,55 — e il testo sta
 * su un velo a sfumatura che si scurisce verso il basso, dove il titolo
 * appoggia. Se l'immagine in evidenza manca resta `.trama-punti`: la
 * pagina non si rompe, perde solo la fotografia.
 *
 * Nessun colore nuovo e nessun carattere nuovo: si compone con quello che
 * il tema ha già. Le entrate riusano `.comparsa`, quindi «riduci
 * movimento» è gestito una volta sola, dove era già gestito.
 * ------------------------------------------------------------------ */

.apertura-foto {
	position: relative;
	min-height: min(56vh, 540px);
	display: flex;
	align-items: flex-end;
	padding: clamp(4rem, 12vw, 7rem) 0 clamp(2.5rem, 5vw, 3.5rem);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Opacità della fotografia: 0.55, alzata dal 34% iniziale il 2026-08-03.
 *
 * Il 34% era stato scelto quando l'apertura era pensata come fondale
 * decorativo, con la trama del catalogo a fare da legame con le altre
 * pagine. Con la fotografia vera — una classe di spalle davanti al Tower
 * Bridge — quel valore la cancellava: i ragazzi si intuivano appena e il
 * ponte spariva. Qui la fotografia **è contenuto**, e un contenuto velato
 * al punto da non riconoscersi tanto vale non metterlo.
 *
 * Il limite superiore non è un gusto ma una misura. Contrasto del titolo
 * bianco contro il punto più chiaro della sua fascia, calcolato sul
 * composito reale (foto + velo a gradiente):
 *
 *   0.34 → 5,27:1     0.50 → 3,94:1     0.62 → 3,20:1     0.70 → 2,81:1
 *
 * La soglia per un titolo grande è 3:1, quindi 0.62 è il massimo tecnico e
 * 0.70 è già fuori. 0.55 lascia la scena leggibile con circa 3,6:1 di
 * margine: un margine serve, perché la fascia più chiara si sposta se un
 * giorno la fotografia cambia.
 *
 * ⚠️ Cambiando fotografia questi numeri non valgono più. Vanno rifatti sul
 * composito, non stimati a occhio: una foto con un cielo bianco in basso a
 * sinistra può far crollare il contrasto pur sembrando simile.
 */
.apertura-foto__sfondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	z-index: -2;
}

.apertura-foto__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(18, 40, 29, 0.92) 0%, rgba(18, 40, 29, 0.55) 45%, rgba(18, 40, 29, 0.25) 100%);
}

/* L'arco esce dall'angolo in alto a destra, come gli anelli del catalogo:
   raggio grande, tratto sottile, appena percettibile. */
.apertura-foto__arco {
	width: 46vw;
	height: 46vw;
	max-width: 620px;
	max-height: 620px;
	top: -23vw;
	right: -12vw;
	border-width: 6px;
	opacity: 0.32;
}

.apertura-foto .occhiello {
	color: var(--lime);
}

.apertura-foto h1 {
	margin: 0 0 var(--passo-3);
	max-width: 16ch;
}

.apertura-foto__sommario {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: rgba(255, 255, 255, 0.92);
}

/* ---- I quattro impegni ---- */

.acc-principi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--passo-3);
}

.acc-principio {
	background: var(--carta);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	padding: var(--passo-3);
	/* Il filetto lime in alto compare al passaggio del mouse, come sulle
	   schede viaggio: è la stessa famiglia di gesti, non un effetto nuovo. */
	position: relative;
	overflow: hidden;
	/*
	 * ATTENZIONE — questa `transition` deve continuare a elencare `opacity` e
	 * `transform`.
	 *
	 * Il riquadro è anche `.comparsa`, e `.comparsa` dichiara la transizione
	 * dell'entrata. Ridefinendo qui la shorthand con il solo `border-color`
	 * si sovrascriveva quella regola — stessa specificità, ma questa viene
	 * dopo — e l'entrata scattava di colpo invece di sfumare, senza che
	 * nulla segnalasse l'errore.
	 *
	 * Il ritardo è una variabile e non `transition-delay`, che si applica a
	 * tutte le proprietà: con `transition-delay: 270ms` anche il filetto
	 * dell'hover sarebbe partito con un quarto di secondo di ritardo, e un
	 * comando che risponde in ritardo sembra un comando rotto.
	 */
	transition:
		opacity 620ms ease var(--ritardo, 0ms),
		transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--ritardo, 0ms),
		border-color var(--transizione);
}

.acc-principio::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 3px;
	width: 0;
	background: var(--lime);
	transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acc-principio:hover::before {
	width: 100%;
}

.acc-principio:hover {
	border-color: var(--verde-medio);
}

/* Lo sfalsamento delle entrate: quattro riquadri che arrivano insieme
   sembrano un ricaricamento, uno dietro l'altro sembrano un elenco che si
   scrive. I ritardi sono brevi perché stanno sulla stessa riga. */
.acc-principio:nth-child(2) { --ritardo: 90ms; }
.acc-principio:nth-child(3) { --ritardo: 180ms; }
.acc-principio:nth-child(4) { --ritardo: 270ms; }

.acc-principio__icona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--verde-tenue);
	color: var(--verde-scuro);
	margin-bottom: var(--passo-2);
}

.acc-principio h3 {
	font-size: 1.15rem;
	margin: 0 0 var(--passo-1);
}

.acc-principio p {
	margin: 0;
	font-size: 0.97rem;
	color: var(--inchiostro-tenue);
	line-height: 1.6;
}

/* ---- Le cifre ---- */

.acc-cifre {
	color: #fff;
}

.acc-cifre__titolo {
	margin: 0 0 var(--passo-4);
	max-width: 22ch;
}

.acc-cifre__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--passo-4) var(--passo-3);
}

/* Filetto sopra ogni cifra invece di un riquadro: su fondo scuro un bordo
   completo chiuderebbe quattro scatole dentro una scatola. */
.acc-cifra {
	border-top: 2px solid rgba(255, 255, 255, 0.28);
	padding-top: var(--passo-2);
}

.acc-cifra:nth-child(2) { transition-delay: 90ms; }
.acc-cifra:nth-child(3) { transition-delay: 180ms; }
.acc-cifra:nth-child(4) { transition-delay: 270ms; }

.acc-cifra__numero {
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: clamp(2.8rem, 5vw, 3.9rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--lime);
	margin: 0 0 var(--passo-2);
}

.acc-cifra__unita {
	font-size: 0.42em;
	font-weight: 700;
	letter-spacing: 0;
	margin-left: 0.15em;
	color: rgba(255, 255, 255, 0.75);
}

.acc-cifra__testo {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

/* ---- I contrasti ---- */

.acc-intro {
	max-width: var(--larghezza-testo);
	color: var(--inchiostro-tenue);
	margin: 0 0 var(--passo-4);
}

.acc-misure {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--passo-3);
}

.acc-misura {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	overflow: hidden;
	background: var(--carta);
}

.acc-misura:nth-child(2) { transition-delay: 80ms; }
.acc-misura:nth-child(3) { transition-delay: 160ms; }
.acc-misura:nth-child(4) { transition-delay: 240ms; }

/* Il saggio scritto nei colori di cui parla: è la dimostrazione, non
   l'illustrazione. Il testo è grande perché a corpo piccolo un contrasto si
   valuta male, ed è quello che si sta chiedendo di valutare. */
.acc-misura__saggio {
	display: flex;
	align-items: center;
	padding: var(--passo-4) var(--passo-3);
	font-family: var(--famiglia-titoli);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.acc-misura__dati {
	padding: var(--passo-3);
	border-left: 1px solid var(--bordo);
	background: var(--fondo);
}

.acc-misura__nome {
	margin: 0 0 var(--passo-1);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--verde-medio);
}

.acc-misura__valore {
	margin: 0;
	font-family: var(--famiglia-titoli);
	font-weight: 800;
	font-size: 2.1rem;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--verde-scuro);
}

.acc-misura__valore span {
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--inchiostro-tenue);
	margin-left: 0.25em;
}

.acc-misura__soglia {
	margin: var(--passo-1) 0 var(--passo-2);
	font-size: 0.85rem;
	color: var(--inchiostro-tenue);
}

.acc-misura__barra {
	height: 8px;
	border-radius: 99px;
	background: var(--bordo);
	overflow: hidden;
}

/* La barra cresce quando il riquadro entra: la transizione sta qui e non nel
   copione, perché `.visibile` la aggiunge l'osservatore che il tema ha già.
   Con «riduci movimento» attivo `.visibile` viene messa subito e la barra
   risulta già piena — nessun caso in cui resti a zero. */
.acc-misura__barra span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--verde-medio), var(--lime));
	transition: width 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms;
}

.acc-misura.visibile .acc-misura__barra span {
	width: var(--riempimento);
}

/* ---- Tastiera ---- */

.acc-tasti {
	margin: 0 0 var(--passo-3);
	display: grid;
	gap: var(--passo-2);
}

.acc-tasto {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: var(--passo-3);
	align-items: baseline;
	padding-bottom: var(--passo-2);
	border-bottom: 1px solid var(--bordo);
}

.acc-tasto dt {
	margin: 0;
}

.acc-tasto dd {
	margin: 0;
	color: var(--inchiostro-tenue);
}

kbd {
	display: inline-block;
	font-family: var(--famiglia-titoli);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 6px;
	background: var(--carta);
	color: var(--verde-scuro);
	border: 1px solid var(--bordo);
	/* L'ombra corta è ciò che fa leggere il rettangolo come un tasto: senza,
	   sembra un'etichetta. */
	box-shadow: 0 2px 0 var(--bordo);
}

.acc-nota {
	margin: 0;
	font-size: 0.95rem;
	color: var(--inchiostro-tenue);
	max-width: var(--larghezza-testo);
}

/* ---- Elenco delle cose fatte ---- */

.acc-elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: var(--passo-5);
	max-width: none;
}

.acc-elenco li {
	break-inside: avoid;
	position: relative;
	padding-left: 2rem;
	margin-bottom: var(--passo-2);
	color: var(--inchiostro-tenue);
	line-height: 1.6;
}

/* Il segno di spunta è disegnato con due filetti e non con un carattere:
   una spunta tipografica cambia forma da un sistema all'altro, e in alcune
   voci sintetiche viene letta ad alta voce. */
.acc-elenco li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--verde-medio);
	border-bottom: 2px solid var(--verde-medio);
	transform: rotate(-45deg);
}

/* ---- Segnalazioni ---- */

.acc-scrivi__riquadro {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--raggio-grande);
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--verde-tenue);
	border: 1px solid var(--bordo);
}

.acc-scrivi__arco {
	position: absolute;
	right: -90px;
	bottom: -110px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 30px solid var(--carta);
	opacity: 0.7;
	z-index: -1;
	pointer-events: none;
}

.acc-scrivi__riquadro h2 {
	margin: 0 0 var(--passo-2);
	max-width: 18ch;
}

.acc-scrivi__riquadro p {
	max-width: 60ch;
	color: var(--inchiostro-tenue);
}

.acc-scrivi__recapiti {
	display: flex;
	align-items: center;
	gap: var(--passo-3);
	flex-wrap: wrap;
	margin: var(--passo-3) 0 0;
}

.acc-scrivi__telefono {
	color: var(--verde-scuro);
	font-weight: 500;
}

.acc-testo-libero {
	max-width: var(--larghezza-testo);
}

/* ---- Adattamento ---- */

@media (max-width: 1100px) {
	.acc-principi,
	.acc-cifre__elenco {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Con due colonne i ritardi vanno per riga, non per posizione assoluta:
	   il terzo riquadro apre la seconda riga e deve ripartire da zero. */
	.acc-principio:nth-child(3) { --ritardo: 0ms; }
	.acc-principio:nth-child(4) { --ritardo: 90ms; }
	.acc-cifra:nth-child(3) { transition-delay: 0ms; }
	.acc-cifra:nth-child(4) { transition-delay: 90ms; }
}

@media (max-width: 860px) {
	.acc-elenco {
		columns: 1;
	}

	.acc-misura {
		grid-template-columns: 1fr;
	}

	.acc-misura__dati {
		border-left: 0;
		border-top: 1px solid var(--bordo);
	}

	.acc-misura__saggio {
		padding: var(--passo-3);
	}
}

@media (max-width: 620px) {
	.acc-principi,
	.acc-cifre__elenco {
		grid-template-columns: 1fr;
	}

	.acc-principio:nth-child(n) { --ritardo: 0ms; }
	.acc-cifra:nth-child(n) { transition-delay: 0ms; }

	/* Sotto i 620 px l'etichetta dei tasti va sopra la spiegazione: una
	   colonna da 190 px lascerebbe alla descrizione meno di 150 px. */
	.acc-tasto {
		grid-template-columns: 1fr;
		gap: var(--passo-1);
	}
}

/* Con «riduci movimento» le entrate sono già disattivate da `.comparsa`;
   restano da spegnere il filetto delle schede e la crescita delle barre,
   che sono transizioni proprie di questa pagina. */
@media (prefers-reduced-motion: reduce) {
	.acc-principio,
	.acc-principio::before,
	.acc-misura__barra span {
		transition: none;
	}
}

/* ================================================================== *
 * Stampa — la scheda viaggio nello stile del catalogo
 * ================================================================== *
 *
 * Il lettore vero di questa pagina non è chi decide: è un docente che deve
 * portare la proposta al consiglio di istituto, e ha bisogno di qualcosa da
 * allegare. Il modello è la scheda del catalogo stampato, misurata sul PDF
 * (pagina 7, «Foreste della Sila») e non ricordata a memoria.
 *
 * MISURE RILEVATE DAL CATALOGO
 *   pagina 216 × 303 mm · carattere Lato (Regular, Bold, Heavy)
 *   titolo 21pt Heavy · sottotitolo 9,5 · occhiello sezione 7,5 Bold
 *   testata programma 8,5 Bold · titolo giornata 8 Bold · corpo 7,2
 *   descrizione 8 · etichette laterali 5,8 Bold maiuscolo · valori 7 · nota 6,2
 *   verde #2D6A45 · lime #8BC348 · azzurro #E8F4FD — che sono esattamente
 *   `--verde`, `--lime` e `--azzurro` del tema: la palette del sito viene da qui
 *   azzurro pieno #B8D9F0 · etichette #1A5A8A · valori #0D2D45
 *   testate colonna #5A8EB0 · titoli verdi #1B4D2C · corpo #444
 *   incluso #155724 · non incluso #721C24
 *
 * LA SCELTA CHE GOVERNA TUTTO IL RESTO: NIENTE FONDI PIENI, SOLO FILETTI.
 * Nel pannello di stampa di Chrome la voce «Grafica di sfondo» è **disattivata
 * per impostazione predefinita**. Un foglio costruito su rettangoli colorati —
 * come è la pagina del catalogo — esce quindi bianco, e tutto ciò che è scritto
 * in bianco sopra un fondo sparisce: titolo, occhiello di sezione, quadratini
 * G1…G5. I bordi invece si stampano sempre. Da qui la traduzione: dove il
 * catalogo mette un rettangolo pieno, la scheda mette un filetto dello stesso
 * colore e il testo in colore invece che in bianco. Chi attiva la grafica di
 * sfondo vede in più i fondi tenui; chi non la attiva ottiene comunque un
 * documento completo. Somiglianza che regge in entrambi i casi, invece di
 * fedeltà che regge in uno solo.
 */
@media print {

	/* Lato dichiarato dentro `@media print`: chi naviga il sito non lo scarica
	   mai, perché nessuna regola a schermo lo nomina. 69 kB che vivono solo
	   nel momento in cui qualcuno stampa. */
	@font-face {
		font-family: "Lato";
		font-style: normal;
		font-weight: 400;
		src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
	}

	@font-face {
		font-family: "Lato";
		font-style: normal;
		font-weight: 700;
		src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
	}

	@font-face {
		font-family: "Lato";
		font-style: normal;
		font-weight: 900;
		src: url("../fonts/lato-latin-900-normal.woff2") format("woff2");
	}

	/* ---- I margini del foglio: una variabile in meno ----
	 *
	 * Il selettore «Margini» del pannello di stampa ha tre posizioni e noi ne
	 * controlliamo zero. Con «Nessuno» il `@page` viene ignorato e vale 0; con
	 * «Predefinito» viene rispettato. Finché il margine stava **sia** in
	 * `@page` **sia** nel padding, i due si sommavano solo in uno dei due casi:
	 * 8 mm per lato con «Nessuno», 16 con «Predefinito» — e in quel secondo
	 * caso l'area utile si restringeva al punto che la scheda non ci stava più.
	 * Una prova reale è uscita su **tre** pagine, con la prima vuota.
	 *
	 * La soluzione non è scegliere numeri migliori: è **togliere la variabile**.
	 * `@page` viene azzerato, così «Nessuno» e «Predefinito» producono lo stesso
	 * foglio, e tutto il margine sta nel `padding` del corpo, che nessuna
	 * impostazione può cambiare. L'area utile diventa una costante: 186 × 275 mm
	 * su A4, sempre, per chiunque stampi.
	 *
	 * Resta fuori solo «Personalizzato», che è una scelta esplicita di chi
	 * stampa e in quel caso i margini si sommano — ma è una decisione presa
	 * apposta, non un valore predefinito subìto.
	 *
	 * **Effetto collaterale verificato, e prezioso: con `margin: 0` Chrome fa
	 * sparire dal pannello la casella «Intestazioni e piè di pagina»** — senza
	 * margine non ha dove disegnare data e indirizzo, e toglie l'opzione invece
	 * di offrirla. Risultato: nessuna scheda esce mai con la data e l'URL
	 * stampati agli angoli, per chiunque la stampi, **senza che nessuno debba
	 * sapere dove sta quella casella**. Non è un effetto cercato ed è il motivo
	 * per cui va scritto qui: chi domani rimettesse un margine in `@page` se li
	 * ritroverebbe addosso senza capire da dove arrivano. */
	@page {
		size: A4;
		margin: 0;
	}

	body {
		background: #fff;
		color: #444;
		font-family: "Lato", var(--famiglia-testo);
		font-size: 7.4pt;
		line-height: 1.42;
		padding: 10mm 12mm 12mm;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Il corpo del catalogo è 7,2pt su una pagina professionale. Qui 7,4:
	   mezzo punto in più per una stampante d'ufficio e per le fotocopie che
	   quella scheda farà in segreteria, senza cambiare la gerarchia. */

	/* ---- Fuori tutto ciò che su un foglio non si può usare ---- */
	.testata,
	.piede,
	.pannello,
	.pannello__velo,
	.filtri,
	.archivio__comandi,
	.paginazione,
	.sezione--tenue,
	.richiamo,
	.arco,
	.bottone,
	[data-preventivo],
	[data-stampa],
	/* La nota «da allegare alla delibera» spiega a chi guarda lo schermo perché
	   premere quel pulsante. Sul foglio sarebbe un'istruzione per una cosa già
	   fatta. */
	.sintesi__stampa-nota,
	.apri-menu,
	.solo-lettori-schermo {
		display: none !important;
	}

	/* Le barre della pagina «Cosa offriamo» sono fondi pieni, e i fondi non si
	   stampano quando «Grafica di sfondo» è disattivata — cioè quasi sempre.
	   Stampate resterebbero righe vuote fra il nome e il numero. Si tolgono: il
	   valore è scritto accanto e la riga continua a dire tutto, che è il motivo
	   per cui è stato scritto lì fin dall'inizio. */
	.barra__traccia {
		display: none;
	}

	.barra {
		grid-template-columns: 1fr auto;
		padding: 1mm 0;
	}

	/* I riquadri dei numeri diventano righe: quattro schede affiancate su carta
	   sprecano mezza pagina per quattro cifre. */
	.numeri {
		display: block;
	}

	.numeri__voce {
		border-top: 0.5pt solid #8BC348;
		padding: 1.5mm 0;
	}

	.numeri__cifra {
		font-size: 14pt;
	}

	/* Le entrate allo scorrimento non esistono su carta: senza questa regola
	   tutto ciò che non è ancora comparso a schermo si stampa trasparente.
	   È la trappola più insidiosa di una stampa fatta bene, e non si vede
	   finché qualcuno non stampa davvero. */
	/* Basta annullare opacità e trasformazione. **Il `display: block !important`
	   che stava qui era un danno**: `.due-colonne` porta anche la classe
	   `comparsa`, e quel `block` batteva per `!important` il `grid` dichiarato
	   più sotto — incluso e non incluso finivano impilati invece che affiancati
	   come sul sito, allungando la scheda di una ventina di millimetri. Nessun
	   elemento con `comparsa` è nascosto a schermo, quindi non c'era nulla da
	   riportare a `block`. */
	.comparsa,
	.galleria {
		opacity: 1 !important;
		transform: none !important;
	}

	.contenitore,
	.contenitore--largo {
		width: auto;
		max-width: none;
		padding: 0;
	}

	/* La colonna alta quanto la pagina che permette al piede di scendere in
	   fondo. `flex: none` sui figli perché in una colonna flex nessuno deve
	   stirarsi per riempire il vuoto: il vuoto va tutto sopra il piede. */
	/* `100vh` meno il padding verticale del corpo (10 + 12), **più 4 mm di
	   respiro**. Il calcolo esatto sarebbe 22, ma un contenitore flex alto
	   quanto lo spazio disponibile è una bomba a orologeria in stampa: se per
	   un decimo di millimetro non ci entra, il motore non lo spezza — lo sposta
	   **tutto** alla pagina dopo, e la prima esce **bianca**. È successo, ed è
	   il difetto peggiore visto su questo foglio, perché non somiglia a un
	   problema di spazio: somiglia a una pagina rotta.
	 *
	 * Quattro millimetri di scarto costano nulla — il piede si ferma due
	 * millimetri più in alto — e tolgono di mezzo il caso limite. */
	article {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 26mm);
	}

	article > * {
		flex: none;
	}

	/* 5 mm e non 8. Gli 8 erano una misura scelta a occhio, e su Aspromonte
	   costavano una pagina intera: in fondo alla prima restavano 17,9 mm
	   liberi, il piede ne chiede 10,8, e con 8 di stacco il fabbisogno saliva a
	   18,8 — **mancavano nove decimi di millimetro** e il piede se ne andava da
	   solo nella pagina dopo. Cinque millimetri separano comunque i due filetti
	   in modo leggibile e lasciano un margine di sicurezza. */
	.viaggio-dettaglio {
		margin-bottom: 5mm;
	}

	/* ---- Intestazione di carta ---- */
	.solo-stampa {
		display: block !important;
	}

	/* Il piede è ancorato al fondo del foglio, non appeso all'ultima riga di
	   contenuto.
	 *
	 * `article` diventa una colonna alta quanto la pagina e il piede prende
	 * `margin-top: auto`: tutto lo spazio che avanza finisce lì. Serviva perché
	 * il filetto del piede e quello sotto la nota sull'accessibilità cadevano a
	 * pochi millimetri l'uno dall'altro, e due righe orizzontali ravvicinate si
	 * leggono come un difetto di impaginazione, non come due sezioni.
	 *
	 * `100vh` in stampa è l'altezza della pagina, non della finestra: **è
	 * l'unico punto di questo foglio che l'emulazione a schermo non riproduce**,
	 * perché lì `vh` resta la finestra. Va guardato sulla stampa vera.
	 *
	 * Gli 8 mm sotto la scheda sono la distanza **minima**: quando la scheda è
	 * lunga e di spazio non ne avanza, `auto` vale zero e senza quel margine i
	 * due filetti tornerebbero a toccarsi, che è il difetto di partenza. */
	/* Ogni decimo tolto qui è un decimo di probabilità in più che il piede
	   resti nella pagina della scheda invece di aprirne una seconda per sé. */
	.stampa-piede {
		border-top: 1.2pt solid #2D6A45;
		padding-top: 1.5mm;
		margin-top: auto;
		break-inside: avoid;
	}

	.stampa-piede__marchio {
		font-weight: 900;
		font-size: 10pt;
		line-height: 1.15;
		color: #1B4D2C;
		margin: 0 0 0.3mm;
	}

	/* `#5A8EB0` è il colore delle testate di colonna del catalogo, ma su bianco
	   dà 3,54:1 e qui sopra ci stanno i recapiti a 6,2pt — testo piccolo, dove
	   la soglia è 4,5. Portato a `#1A5A8A`, lo stesso delle etichette dei dati:
	   7,31:1. Su una fotocopia in bianco e nero la differenza si vede davvero. */
	.stampa-piede__riga {
		margin: 0;
		font-size: 6.2pt;
		color: #1A5A8A;
	}

	/* ---- Apertura ----
	 *
	 * Come nel catalogo e come a schermo: testo **sopra** la fotografia, non
	 * sotto. Impilarli costava 30 mm su ogni scheda, ed è la misura che decide
	 * se un itinerario sta in un foglio o ne sporca un secondo.
	 *
	 * La leggibilità però non può dipendere dal velo verde, che è uno sfondo e
	 * con «Grafica di sfondo» disattivata non viene stampato: resterebbe testo
	 * bianco sui templi al sole. Perciò la fotografia viene scurita da un
	 * `filter`, che agisce sul contenuto dell'immagine e si stampa sempre.
	 *
	 * Degrada nei due sensi: con la grafica attiva si somma anche il velo e il
	 * risultato è quello del sito; senza, resta la fotografia scurita e il
	 * testo è comunque leggibile. In nessuno dei due casi si va sotto soglia. */
	/*
	 * La fascia esce dal padding del corpo e arriva al bordo dell'area di
	 * stampa: i margini negativi valgono esattamente quanto quel padding.
	 * **Il testo però resta dentro**, perché il padding interno ricostruisce il
	 * margine che i margini negativi hanno tolto: 12 mm di lato — gli stessi del
	 * corpo, così titolo e colonna «In sintesi» sono incolonnati — e 10 + 4
	 * sopra. È la condizione che rende sicura la fascia a filo: nessuna
	 * stampante stampa fino al bordo, e ciò che finisce nella fascia non
	 * stampabile è **solo fotografia**. Se il testo fosse rimasto a 4 mm dal
	 * bordo della fascia, sarebbe stato il titolo a essere rifilato. */
	.viaggio-apertura {
		position: relative;
		min-height: 0;
		margin: -10mm -12mm 2mm;
		padding: 14mm 12mm 4mm;
		background: none;
		color: #fff;
		display: block;
		overflow: hidden;
		isolation: isolate;
		break-inside: avoid;
	}

	/* Il velo scuro è uno **pseudo-elemento**, non uno sfondo: `background:
	   none` sulla regola qui sopra non lo tocca nemmeno. Resta acceso perché
	   quando la grafica di sfondo è attiva aggiunge la tinta verde del marchio
	   e scurisce ulteriormente — non è più lui a reggere il contrasto, è il
	   filtro qui sotto. */

	/* `brightness(.42)` non è un valore d'occhio: è stato scelto misurando la
	   luminanza delle **settanta** fotografie di apertura, ritagliate come le
	   ritaglia `object-fit: cover` in questa fascia. Sul punto più chiaro della
	   scheda peggiore il bianco dà **5,32:1**; a .45 scenderebbe a 4,76 e a .50
	   a 3,98, cioè sotto soglia su dieci schede. Cambiando le fotografie il
	   conto va rifatto, non stimato. */
	.viaggio-apertura__sfondo {
		display: block !important;
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		opacity: 1 !important;
		filter: brightness(0.42) !important;
		margin: 0 !important;
	}

	.viaggio-apertura .contenitore {
		position: relative;
	}

	/* Sul fondo peggiore solo il bianco e questo verde quasi bianco superano
	   4,5:1. Il lime del sito dà **2,53** e qui non si può usare: l'occhiello
	   si distingue per spaziatura e peso, non per colore. */
	.apertura__occhiello {
		color: #E8F4EE;
		font-weight: 700;
		font-size: 7.5pt;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		margin: 0 0 1mm;
	}

	.viaggio-apertura h1 {
		font-weight: 900;
		font-size: 21pt;
		line-height: 1.1;
		color: #fff;
		max-width: none;
		margin: 0 0 1.5mm;
	}

	.viaggio-apertura__sottotitolo {
		font-size: 9.5pt;
		color: #E8F4EE;
		max-width: none;
		margin: 0 0 2.5mm;
	}

	/* I quattro dati dell'apertura su una riga sola, come la riga
	   «Destinazione:» del catalogo. */
	.viaggio-apertura__dati {
		display: block;
		font-size: 7pt;
		color: #fff;
		border-top: 0.5pt solid rgba(255, 255, 255, 0.5);
		border-bottom: 0.5pt solid rgba(255, 255, 255, 0.5);
		padding: 1.2mm 0;
		margin: 0;
	}

	/* Tutti i selettori di questo gruppo ripetono `div` prima di `span` e
	   `strong`. Non è ridondanza: a schermo le regole sono scritte come
	   `.viaggio-apertura__dati div span`, che pesa più di
	   `.viaggio-apertura__dati span` e vince comunque, anche stando prima nel
	   file. Era la ragione delle etichette lime e dei valori enormi sul primo
	   foglio stampato. In un blocco di stampa la specificità va pareggiata a
	   mano: qui non c'è un secondo autore con cui competere. */
	.viaggio-apertura__dati div {
		display: inline;
	}

	.viaggio-apertura__dati div + div::before {
		content: " · ";
		color: rgba(255, 255, 255, 0.65);
	}

	.viaggio-apertura__dati div span {
		display: inline;
		font-weight: 700;
		font-size: 7pt;
		letter-spacing: 0;
		text-transform: none;
		color: #E8F4EE;
		margin: 0;
	}

	.viaggio-apertura__dati div span::after {
		content: ": ";
	}

	.viaggio-apertura__dati div strong {
		font-weight: 400;
		font-size: 7pt;
		color: #fff;
	}

	/* Sul foglio la larghezza minima non serve: la riga dei dati e' tutta in
	   linea, e 500 px dentro una colonna da 46 mm non avrebbero senso. */
	.viaggio-apertura__dati .dati__voce--agenda {
		min-width: 0;
	}

	/* ---- Le due colonne ----
	 *
	 * Nel catalogo la colonna dei dati è 52 mm su una pagina da 216. Qui 46 su
	 * A4 al netto dei margini: stessa proporzione. Una colonna sola sarebbe
	 * stata più facile, ma è la disposizione a rendere la scheda riconoscibile
	 * al primo sguardo. */
	.viaggio-dettaglio {
		display: grid;
		grid-template-columns: 46mm minmax(0, 1fr);
		gap: 6mm;
		align-items: start;
		padding: 3mm 0 0;
	}

	.sintesi {
		position: static;
		background: #F4FAFE;
		border: 0.5pt solid #B8D9F0;
		border-radius: 0;
		padding: 3mm;
		margin: 0;
		break-inside: avoid;
	}

	.sintesi h2 {
		color: #5A8EB0;
		font-weight: 700;
		font-size: 6pt;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		margin: 0 0 2mm;
	}

	.sintesi dl {
		margin: 0;
		font-size: 7pt;
	}

	.sintesi dt {
		font-weight: 700;
		font-size: 5.8pt;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #1A5A8A;
	}

	.sintesi dd {
		color: #0D2D45;
		margin: 0.4mm 0 2mm;
		padding-bottom: 2mm;
		border-bottom: 0.4pt solid #B8D9F0;
		line-height: 1.35;
	}

	/* Sul foglio gli obiettivi restano uno per riga ma smettono di sembrare
	   collegamenti: su carta non si clicca, e un testo sottolineato in verde in
	   mezzo a sei voci nere e' solo rumore. Il colore torna quello delle altre
	   voci del riquadro. */
	.sintesi__obiettivi a {
		color: inherit;
		text-decoration: none;
	}

	.sintesi dd:last-of-type {
		border-bottom: 0;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* ---- Corpo ----
	 *
	 * L'ordine del catalogo non è quello del documento: sul foglio le
	 * fotografie stanno **dopo** incluso/non incluso, a schermo stanno dopo il
	 * programma. Si sistema con `order`, che sposta ciò che si vede e non
	 * l'ordine di lettura — sul foglio è esattamente ciò che serve, e non c'è
	 * tabulazione da rispettare come ci sarebbe a schermo. */
	.viaggio-dettaglio__corpo {
		display: flex;
		flex-direction: column;
	}

	/* 3 mm e non 4: su cinque blocchi sono 5 mm recuperati, ed è la differenza
	   fra una scheda che sta in un foglio e una che ne sporca un secondo con
	   due righe. Lo spazio tolto è quello vuoto, nessun contenuto è stato
	   compresso. */
	.viaggio-dettaglio__corpo > * {
		margin-top: 0;
		margin-bottom: 3mm;
	}

	.viaggio-dettaglio__corpo > *:last-child {
		margin-bottom: 0;
	}

	/* La descrizione è avvolta in una `<section>` da quando ha l'occhiello
	   «Perché questo viaggio»: il selettore `.testo` non la coglieva più e
	   l'ordine reggeva solo sul valore predefinito `order: 0`. Funzionava, ma
	   per caso — e il prossimo blocco senza `order` esplicito si sarebbe
	   ordinato rispetto a lei per posizione nel documento. */
	.viaggio-dettaglio__corpo > section:has(.testo) { order: 1; }
	.viaggio-dettaglio__corpo > section:has(.programma) { order: 2; }
	.viaggio-dettaglio__corpo > .due-colonne { order: 3; }
	.viaggio-dettaglio__corpo > .galleria { order: 4; }
	.viaggio-dettaglio__corpo > .curiosita { order: 5; }
	.viaggio-dettaglio__corpo > .nota-riquadro { order: 6; }

	.testo {
		max-width: none;
		font-size: 8pt;
		color: #444;
	}

	/* Il filetto lime sopra l'occhiello è stato tolto su richiesta del
	   committente: sul foglio le righe orizzontali erano diventate troppe, e
	   ogni filetto costava 2,2 mm fra tratto e padding — su una scheda lunga
	   sono i millimetri che decidono se il piede resta in pagina.

	   Nota per chi legge dopo: la barra lime richiamava l'occhiello di sezione
	   del catalogo stampato, ed era un filetto e non un rettangolo pieno perché
	   i fondi non si stampano se «Grafica di sfondo» è disattivata. Rimetterla
	   significa ricontare lo spazio sulle tre schede più lunghe. */
	.occhiello {
		color: #1B4D2C;
		font-weight: 700;
		font-size: 8.5pt;
		letter-spacing: 0.02em;
		text-transform: none;
		margin: 0 0 2.5mm;
	}

	/* ---- Programma ---- */
	.programma {
		padding-left: 0;
	}

	.programma::before {
		display: none;
	}

	.giornata {
		position: relative;
		padding-left: 9mm;
		margin-bottom: 2.5mm;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Il quadratino G1: nel catalogo è verde pieno con la sigla in bianco. Qui
	   è bordato con la sigla in verde — stessa lettura, nessuna dipendenza
	   dalla grafica di sfondo. */
	.giornata__numero {
		position: absolute;
		left: 0;
		top: 0;
		width: 7mm;
		height: 7mm;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0.8pt solid #2D6A45;
		border-radius: 0;
		background: none;
		color: #1B4D2C;
		font-weight: 900;
		font-size: 8pt;
	}

	.giornata h3 {
		font-weight: 700;
		font-size: 8pt;
		color: #1B4D2C;
		margin: 0 0 0.6mm;
	}

	.giornata p {
		margin: 0;
		font-size: 7.4pt;
	}

	/* ---- Incluso / non incluso ---- */
	.due-colonne {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4mm;
	}

	/* Senza cornice: il titolo ha già il suo filetto e basta a delimitare
	   l'elenco. Un riquadro attorno a un blocco che comincia con una riga
	   orizzontale disegna due volte lo stesso confine. */
	.elenco-riquadro {
		background: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		break-inside: avoid;
		page-break-inside: avoid;
		margin: 0;
	}

	.elenco-riquadro h3 {
		font-weight: 700;
		font-size: 7pt;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		margin: 0 0 1.5mm;
		padding-bottom: 1mm;
	}

	.elenco-riquadro--si,
	.elenco-riquadro--no {
		border: 0;
	}

	.elenco-riquadro--si h3 {
		color: #155724;
		border-bottom: 0.5pt solid #155724;
	}

	.elenco-riquadro--no h3 {
		color: #721C24;
		border-bottom: 0.5pt solid #721C24;
	}

	.elenco-riquadro ul {
		margin: 0;
		padding-left: 3.5mm;
	}

	.elenco-riquadro li {
		font-size: 7pt;
		margin-bottom: 0.8mm;
	}

	/* ---- La striscia di tre fotografie, dove sta nel catalogo ---- */
	.galleria .occhiello {
		display: none;
	}

	.galleria__griglia {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5mm;
		margin: 0;
		break-inside: avoid;
	}

	/* 22 mm e non 28: sei millimetri che spostano una dozzina di schede da due
	   pagine a una. Le tre fotografie restano larghe 57 mm, quindi diventano
	   più panoramiche del catalogo — è corredo, e il prezzo è accettabile. */
	.galleria__griglia img {
		height: 22mm;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/* ---- Coda ---- */
	.curiosita {
		background: none;
		border-left: 2pt solid #8BC348;
		border-radius: 0;
		padding: 1.5mm 0 1.5mm 3mm;
		break-inside: avoid;
	}

	.curiosita h3 {
		font-weight: 700;
		font-size: 8pt;
		color: #1B4D2C;
		margin: 0 0 1mm;
	}

	.curiosita p {
		font-size: 7.2pt;
		margin: 0;
	}

	/* La nota sull'accessibilità nel catalogo sta su una fascia con filetto
	   lime, ed è l'ultima cosa prima della riga della quota. */
	/* Un filetto solo, sotto: due righe che stringono una riga di testo la
	   trasformano in un'etichetta, e questa è una nota di chiusura. */
	.nota-riquadro {
		border: 0;
		border-bottom: 1pt solid #8BC348;
		background: none;
		border-radius: 0;
		padding: 0 0 1.5mm;
		font-size: 6.6pt;
		color: #444;
		break-inside: avoid;
	}

	h2,
	h3 {
		break-after: avoid;
		page-break-after: avoid;
	}

	/* Gli indirizzi accanto ai collegamenti del testo libero: su carta un link
	   non cliccabile è un vicolo cieco. Esclusi quelli delle etichette, che
	   sono nomi e non destinazioni. */
	.testo a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 6pt;
		word-break: break-all;
	}
}