/* L'impaginazione delle sezioni.

   Separato da components.css, e la divisione ha un criterio: in
   components.css stanno i mattoni del design system — bottoni, badge, card,
   cifre — che esistono a prescindere dai blocchi e si usano anche dentro un
   articolo scritto a mano. Qui sta il modo in cui una sezione si compone: la
   griglia di una vetrina, la spirale, i passi numerati.

   La divisione serve a una cosa in particolare: editor.css carica entrambi, e
   il giorno in cui una regola si comporta male dentro l'editor si sa in quale
   dei due file guardare.

   Ogni sezione porta la classe del suo blocco: .elic-<slug>. */

/* ── Chiusura ───────────────────────────────────────────── */

/* Il testo e le azioni stanno in colonna stretta e centrata: e' l'unica
   sezione della pagina che chiede una cosa sola, e centrarla e' il modo di
   dire che non ce ne sono altre. */
.elic-chiusura {
	text-align: center;
}

.elic-chiusura .elic-azioni {
	justify-content: center;
	margin-top: var(--elic-sp-4);
}

/* Il testo non prende tutta la colonna: una riga lunga centrata si legge
   male, perche' l'occhio deve ritrovare l'inizio della riga successiva in un
   punto che cambia ogni volta. */
.elic-chiusura p {
	margin-inline: auto;
	max-width: 46ch;
}

/* ── Testo ──────────────────────────────────────────────── */

/* La stessa griglia 40/60 di apertura, passi, video e domande: il titolo fa da
   intestazione di margine e il testo comincia subito, invece di stare sotto a
   un titolo a tutta pagina.

   Prima questa fascia era una colonna stretta e centrata. La riga si leggeva,
   ma fra sezioni che occupano l'orizzontale intero lasciava due terzi di
   pagina vuoti, e il vuoto non si leggeva come una pausa: si leggeva come una
   sezione che non ha finito di caricarsi.

   La misura di lettura non e' scritta da nessuna parte, e non serve: a 1440 la
   colonna di destra viene 749px, a 1536 ne viene 806. Sono fra i settantacinque
   e gli ottanta caratteri, cioe' esattamente la misura che la colonna stretta
   difendeva. */
.elic-testo-blocco__interno {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	gap: var(--elic-sp-5);
	align-items: start;
}

/* La testata resta sotto l'occhio mentre il testo scorre: e' il titolo a dire
   di che cosa si sta leggendo. Ma solo quando accanto c'e' abbastanza da
   scorrere — la classe la mette il render contando capoversi e voci di elenco.
   Su un testo breve il titolo fisso non si muove mai e lascia sotto di se' un
   vuoto che sembra un errore. */
.elic-testo-blocco__testata--fissa {
	position: sticky;
	top: calc(var(--elic-sp-3) + 5rem);
}

.elic-testo-blocco__sottotitolo {
	margin-top: var(--elic-sp-2);
	font-size: var(--elic-dim-medio);
	color: var(--elic-testo-tenue);
}

.elic-testo-blocco__introduzione {
	margin-top: var(--elic-sp-2);
	color: var(--elic-testo-tenue);
}

.elic-testo-blocco__introduzione p + p {
	margin-top: var(--elic-sp-1);
}

/* Il corpo non porta il margine superiore che aveva da impilato: qui comincia
   in cima alla sua colonna, allineato al titolo. */
.elic-testo-blocco__corpo {
	margin-top: 0;
}

/* La scheda chiude la testata e la stacca dal titolo. */
.elic-testo-blocco__testata .elic-scheda {
	margin-top: var(--elic-sp-3);
}

/* La misura di lettura: una colonna sola, un po' piu' larga di quella del
   testo corrente. Serve alle pagine legali, dove il titolo deve stare sopra la
   sua sezione e non in un margine — un indice che rimanda a un H2 in colonna
   laterale e' un indice che non si segue. */
.elic-testo-blocco__lettura {
	max-width: var(--elic-larghezza-lettura);
}

.elic-testo-blocco__lettura .elic-testo {
	margin-top: var(--elic-sp-3);
}

/* Le azioni stanno nella corsia del testo, non sotto alle due colonne: cadendo
   a tutta larghezza si allineerebbero al titolo invece che a cio' che le
   giustifica. */
.elic-testo-blocco__interno > .elic-azioni {
	grid-column: 2;
	margin-top: var(--elic-sp-3);
}

/* Bottoni sotto la testata, a sinistra; il testo occupa la colonna di destra
   per tutta l'altezza. Impilato, l'ordine torna quello del documento. */
.elic-testo-blocco--azioni-a-sinistra .elic-testo-blocco__testata {
	grid-column: 1;
	grid-row: 1;
}

.elic-testo-blocco--azioni-a-sinistra .elic-testo-blocco__corpo {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.elic-testo-blocco--azioni-a-sinistra .elic-testo-blocco__interno > .elic-azioni {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	margin-top: 0;
}

@media (max-width: 60rem) {
	.elic-testo-blocco__interno > .elic-azioni {
		grid-column: 1;
	}
}

@media (max-width: 60rem) {
	.elic-testo-blocco--azioni-a-sinistra .elic-testo-blocco__testata,
	.elic-testo-blocco--azioni-a-sinistra .elic-testo-blocco__corpo,
	.elic-testo-blocco--azioni-a-sinistra .elic-testo-blocco__interno > .elic-azioni {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (max-width: 60rem) {
	.elic-testo-blocco__interno {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--elic-sp-3);
	}

	.elic-testo-blocco__testata--fissa {
		position: static;
	}

	/* Impilata, la colonna del testo tornerebbe larga quanto la finestra: qui
	   il tetto di lettura va rimesso, perche' non c'e' piu' una griglia a
	   darlo. */
	.elic-testo-blocco__corpo {
		max-width: var(--elic-larghezza-testo);
	}
}

/* ── Linea del tempo ────────────────────────────────────── */

/* Quattro date in fila, unite da un filo che passa sopra ai pallini.

   Il filo e' un bordo superiore sulla lista, non un elemento a se': cosi'
   comincia e finisce esattamente dove comincia e finisce la prima e l'ultima
   tappa, senza doverne calcolare la sporgenza. */
.elic-timeline__elenco {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--elic-sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--elic-bordo-chiaro);
}

.elic-timeline__tappa {
	position: relative;
	padding-top: var(--elic-sp-3);
}

/* Il pallino sul filo. Sta sopra il bordo, non accanto: e' il punto in cui la
   data tocca la linea, ed e' l'unico segno d'oro della fascia. */
.elic-timeline__tappa::before {
	content: "";
	position: absolute;
	top: -0.3125rem;
	inset-inline-start: 0;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--elic-oro);
}

.elic-timeline__anno {
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-grande);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--elic-oro-scuro);
}

.elic-timeline__titolo {
	margin-top: var(--elic-sp-2);
	font-size: var(--elic-dim-medio);
}

.elic-timeline__testo {
	margin-top: 0.4rem;
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

.elic-sezione--scura .elic-timeline__elenco {
	border-top-color: var(--elic-bordo-scuro);
}

.elic-sezione--scura .elic-timeline__anno {
	color: var(--elic-oro-chiaro);
}

.elic-sezione--scura .elic-timeline__testo {
	color: var(--elic-su-scuro-tenue);
}

/* In colonna una linea orizzontale non collega piu' niente: diventa verticale,
   e i pallini le si appoggiano di lato. */
@media (max-width: 48rem) {
	.elic-timeline__elenco {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--elic-sp-3);
		border-top: 0;
		border-inline-start: 1px solid var(--elic-bordo-chiaro);
		padding-inline-start: var(--elic-sp-3);
	}

	.elic-timeline__tappa {
		padding-top: 0;
	}

	.elic-timeline__tappa::before {
		top: 0.45rem;
		inset-inline-start: calc(var(--elic-sp-3) * -1 - 0.3125rem);
	}
}

/* ── Hero ───────────────────────────────────────────────── */

/* Sulla seconda carta della palette: l'avorio stacca la copertina dal contenuto
   senza aggiungere un colore, e la prima fascia bianca che segue si legge come
   l'inizio della pagina invece che come il seguito dell'apertura.

   Era bianca, e il ragionamento era che un titolo grande sul bianco e' una
   copertina mentre sul colore e' un manifesto. Regge finche' l'apertura e' la
   sola cosa chiara della schermata; con il resto del sito passato al ritmo
   bianco/avorio/scuro, un'apertura bianca sopra una fascia bianca non aveva piu'
   un bordo da nessuna parte. */
.elic-hero {
	display: grid;
	/* Il blocco interno si distende su tutta l'altezza invece di stare al
	   centro: centrandolo, sotto la figura resterebbe una fascia vuota, ed e'
	   li' che su uno schermo basso la figura si perde. */
	align-items: stretch;
	background: var(--elic-avorio);
	/* Il filo che chiude la fascia, per il caso in cui sotto ci sia un'altra
	   fascia avorio: li' il cambio di fondo non basta a dire dove finisce
	   l'apertura e comincia la pagina. */
	border-bottom: 1px solid var(--elic-bordo-chiaro);
}

/* svh e non vh: su mobile vh conta la barra del browser anche quando e'
   aperta, e l'apertura sborderebbe proprio di quel tanto. */
.elic-hero--campagna {
	min-height: min(72vh, 40rem);
	min-height: min(72svh, 40rem);
}

.elic-hero__interno {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	gap: var(--elic-sp-5);
	align-items: center;
}

/* L'apertura della home prende piu' della meta' per il testo, e non e' un
   capriccio: il titolo va a capo dove decide il <br>, e con il 40% della
   riga la seconda meta' si spezzava di nuovo anche su finestre larghe.
   Alla figura non costa quasi niente — e' il tetto in altezza a decidere
   quanto si vede dell'immagine, non la larghezza della colonna.

   Dentro la media query e non fuori, anche se le due colonne ci sono solo
   qui: la regola che le annulla piu' sotto ha un selettore piu' corto, e a
   parita' d'ordine vincerebbe questa. Fuori, la home restava a due colonne
   fino al telefono, con la colonna del testo a 222px. */
@media (min-width: 60.0625rem) {
	.elic-hero--campagna .elic-hero__interno {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
	}
}

.elic-hero__contenuto {
	max-width: 42rem;
	/* Su uno schermo basso due respiri da sei gradini si mangiano la
	   schermata. Il termine centrale e' relativo all'altezza, i due estremi
	   restano gradini della scala. */
	padding-block: clamp(var(--elic-sp-4), 9svh, var(--elic-sp-6));
}

.elic-hero--pagina .elic-hero__contenuto {
	padding-block: var(--elic-sp-5);
}

/* La colonna della figura si distende su tutta l'altezza. Non e' un dettaglio
   di allineamento: e' la corsa dentro cui la figura resta appiccicata al
   fondo della finestra. Un elemento sticky non puo' uscire dal riquadro del
   genitore, quindi se la colonna fosse alta quanto l'immagine la corsa
   sarebbe lunga zero e il sticky non si vedrebbe mai. */
.elic-hero__figura {
	margin: 0;
	justify-self: stretch;
	align-self: stretch;
	display: grid;
	align-content: end;
}

.elic-hero__figura-immagine {
	display: block;
	width: 100%;
	height: auto;
}

/* La sagoma in grande sul fondo dell'apertura, appoggiata all'angolo in basso
   a destra e appena piu' scura della carta. Non e' confinata alla colonna
   della figura: attraversa la fascia e passa anche sotto al testo, che e' il
   punto — e' un fondo, non un secondo soggetto.

   Il disegno arriva come maschera su un rettangolo colorato, non come
   background-image: dentro al file la tinta e' fissa, e usarlo come immagine
   vorrebbe dire una seconda copia del disegno solo per cambiargli colore.
   Cosi' il colore lo decide il foglio di stile ed e' un colore della palette.

   Cosi' com'e' — appoggiata all'angolo, non ritagliata — sul bordo destro si
   taglia soltanto quando la fascia e' piu' stretta del disegno. */
/* Niente overflow: hidden qui, per quanto verrebbe spontaneo: renderebbe la
   fascia un contenitore di scorrimento e la figura appiccicata smetterebbe di
   appiccicarsi, che e' l'effetto d'apertura della home. La sagoma e' ancorata
   all'angolo dentro la fascia e non ha da dove uscire. */
.elic-hero--campagna {
	position: relative;
}

.elic-hero--campagna::before {
	content: "";
	position: absolute;
	inset: auto 0 0 auto;
	width: min(64%, 52rem);
	aspect-ratio: 807.8 / 496.4;
	background: var(--elic-bordo-chiaro);
	-webkit-mask-image: url("../img/snail-mask.svg");
	mask-image: url("../img/snail-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: bottom right;
	mask-position: bottom right;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Sul telefono prende tutta la riga: stretta al 64% di una finestra gia'
   stretta diventava un francobollo nell'angolo. */
@media (max-width: 60rem) {
	.elic-hero--campagna::before {
		width: 100%;
	}
}

/* Il contenuto sta sopra al fondo. Serve dichiararlo: la sagoma e' posizionata
   e il testo no, quindi senza questo il testo verrebbe coperto. */
.elic-hero--campagna .elic-hero__interno {
	position: relative;
	z-index: 1;
}

/* Il bottone a contorno, qui, ha il filo d'oro. Il suo colore normale e'
   --elic-bordo-chiaro, che e' esattamente la tinta della sagoma di fondo:
   sopra ci finiva e spariva. L'oro scuro e non l'oro: sulla sagoma l'oro
   pieno misura 1,85:1, l'oro scuro 4,45 — sopra il 3:1 che il criterio WCAG
   1.4.11 chiede a un bordo che porta significato.

   Il testo resta inchiostro e non oro, altrimenti questo bottone diventerebbe
   identico al primario che gli sta accanto. */
.elic-hero--campagna .elic-bottone--contorno {
	border-color: var(--elic-oro-scuro);
}

/* Solo nella variante campagna. Su una pagina interna la figura sta ferma:
   l'effetto e' un'apertura, e ripeterlo a ogni pagina lo consuma. */
.elic-hero--campagna .elic-hero__figura-immagine {
	position: sticky;
	bottom: 0;
	/* Il tetto impedisce che sia la figura a far crescere l'apertura oltre la
	   finestra: su uno schermo basso rimpicciolisce invece di spingere il
	   fondo sotto la piega. Quando il tetto morde, il riquadro diventa piu'
	   largo dell'immagine: object-fit ne tiene le proporzioni e
	   object-position la lascia appoggiata in basso. */
	max-height: min(56svh, 28rem);
	object-fit: contain;
	object-position: bottom center;
}

/* Quale sagoma, lo dice il blocco. La scelta arriva come classe e qui diventa
   una variabile: cosi' la geometria dell'apertura e' scritta una volta sola e
   cambia solo il disegno. Con «nessuna» la variabile non esiste, il ripiego
   none spegne la maschera e resta la fotografia intera.

   La seconda sagoma non ha il foro della spirale: quel foro, cadendo su un
   viso, lo bucava. */
.elic-hero--maschera-chiocciola {
	--elic-maschera-hero: url("../img/snail-mask.svg");
}

.elic-hero--maschera-chiocciola-2 {
	--elic-maschera-hero: url("../img/snail-mask-2.svg");
}

/* ── L'apertura delle pagine interne, in sagoma ────────────

   La fotografia esce dal rettangolo: la maschera le da' la sagoma della
   chiocciola, e la sagoma corre fino al bordo della finestra dove si taglia.

   E' una maschera vera e non una tavola avorio sovrapposta: sotto passa il
   fondo della sezione qualunque sia, e il giorno che l'apertura smette di
   essere avorio non resta una toppa del colore di ieri. */

/* La geometria e' quella della vetrina, e per la stessa ragione: la figura
   deve arrivare al vivo, quindi il contenitore non puo' contenerla. Si
   annulla il tetto di larghezza e il margine, e si rifanno come colonne —
   la prima e' il margine di pagina, e serve a tenere il titolo incolonnato
   con tutte le altre sezioni. */
@media (min-width: 60.0625rem) {
	/* Un minimo perche' le aperture non si accorcino sulle pagine dal titolo
	   breve: senza, la stessa fascia passava da 563 pixel su «Il disciplinare»
	   a 488 su «Simone Sampo», e la differenza si vede passando dall'una
	   all'altra. Il tetto in svh e' lo stesso ragionamento dell'apertura della
	   home: su una finestra bassa una fascia alta 35rem sarebbe quasi tutta la
	   prima schermata. */
	.elic-hero--pagina {
		min-height: min(64svh, 35rem);
	}

	.elic-hero--pagina .elic-hero__interno {
		max-width: none;
		padding-inline: 0;
		gap: 0;
		grid-template-columns:
			minmax(
				var(--elic-margine-laterale),
				calc((100% - var(--elic-larghezza-larga)) / 2 + var(--elic-margine-laterale))
			)
			minmax(0, 1fr)
			55%;
	}

	.elic-hero--pagina .elic-hero__contenuto {
		grid-column: 2;
		grid-row: 1;
		padding-inline-end: var(--elic-sp-5);
	}

	/* Il riquadro prende le proporzioni della maschera, non quelle della
	   fotografia ne' quelle del testo. Sono le due cose che cambiano da una
	   pagina all'altra, e tutte e due deformerebbero la sagoma: una foto
	   verticale gonfiava l'apertura da 529 a 992 pixel — e' quello che si
	   vedeva su «Chi siamo» — mentre un testo corto la schiacciava fino a
	   tagliare la chiocciola sopra e sotto.
	   Con la proporzione della maschera la sagoma esce identica ovunque, e la
	   fotografia dentro si adatta con object-fit.

	   Il riquadro e' relativo perche' la fotografia possa staccarsi dal
	   flusso: finche' e' lei un elemento della griglia, e' la sua altezza
	   naturale a dettare legge. */
	.elic-hero--pagina .elic-hero__figura {
		grid-column: 3;
		grid-row: 1;
		/* Appoggiata al fondo della fascia, non centrata: e' il bordo con la
		   sezione che segue, e la sagoma che ci si posa sopra dice dove
		   finisce l'apertura. Centrata galleggiava, e con testi di lunghezza
		   diversa galleggiava a un'altezza diversa da una pagina all'altra. */
		align-self: end;
		aspect-ratio: 807.8 / 496.4;
		position: relative;
		min-height: 0;
	}

	.elic-hero--pagina .elic-hero__figura-immagine {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

/* La sagoma riempie il riquadro e si lascia tagliare dal bordo: in questa
   fascia e' un ritaglio che entra in pagina, non un disegno da guardare per
   intero. Sotto la soglia a due colonne torna intera, perche' li' la figura
   sta sopra il testo e un ritaglio a meta' non si capirebbe.

   Il prefisso -webkit- serve ancora per Safari sotto la 15.4; da li' in su, e
   su Chrome e Firefox, vale la proprieta' senza prefisso. */
.elic-hero--pagina .elic-hero__figura-immagine {
	max-height: none;
	object-fit: cover;
	-webkit-mask-image: var(--elic-maschera-hero, none);
	mask-image: var(--elic-maschera-hero, none);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: cover;
	mask-size: cover;
}

/* Sul telefono la sagoma non si stringe al centro come farebbe una figura
   qualunque: prende tutta la riga e si appoggia al fondo della fascia, che e'
   il bordo con la sezione successiva. Sopra le si toglie aria — il respiro che
   separa il testo dalla figura basta molto piu' corto di quello che separa due
   sezioni. */
@media (max-width: 60rem) {
	.elic-hero--pagina .elic-hero__contenuto {
		padding-block: var(--elic-sp-4) var(--elic-sp-2);
	}

	/* Da bordo a bordo: la figura esce dai margini del contenitore con un
	   margine negativo pari a quello di pagina. Il testo resta incolonnato,
	   la fotografia no — e' la stessa idea del taglio al vivo che sopra la
	   soglia porta la sagoma fino al bordo destro. */
	.elic-hero--pagina .elic-hero__figura {
		justify-self: stretch;
		align-self: end;
		margin-inline: calc(var(--elic-margine-laterale) * -1);
	}

	/* La proporzione e' quella della maschera anche qui: e' la sagoma a dover
	   restare intera, non la fotografia, che dentro si adatta con object-fit. */
	.elic-hero--pagina .elic-hero__figura-immagine {
		max-width: none;
		max-height: none;
		width: 100%;
		height: auto;
		aspect-ratio: 807.8 / 496.4;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}
}

/* Il titolo dell'apertura e' l'unico che va su due righe piene: la crenatura
   scende di un punto rispetto alla norma. */
.elic-hero h1 {
	font-size: var(--elic-dim-display);
	letter-spacing: -0.035em;
}

/* Nella fascia a due colonne piu' stretta — dai 960px ai 1300 circa — la
   colonna del testo non arriva ancora a tenere in riga la seconda meta' del
   titolo. Li' il corpo scende con la finestra invece di lasciarla spezzare;
   sopra torna pieno, e sotto i 960 comanda di nuovo la scala generale, dove
   il titolo ha tutta la riga per se'.

   La misura e' tarata sul titolo della home: cambiandolo con uno piu' lungo
   va rifatta, perche' non c'e' modo di farla dipendere dal testo. */
@media (min-width: 60.0625rem) {
	.elic-hero--campagna h1 {
		font-size: min(4.3vw, 3.5rem);
	}
}

.elic-hero__sommario {
	margin-block: var(--elic-sp-3) var(--elic-sp-4);
	font-size: var(--elic-dim-medio);
	color: var(--elic-testo-tenue);
}

/* Sotto la soglia a due colonne la figura scende sotto il testo, piu'
   piccola: sopra ruberebbe tutta la prima schermata. */
@media (max-width: 60rem) {
	.elic-hero__interno {
		grid-template-columns: 1fr;
		gap: var(--elic-sp-2);
	}

	.elic-hero__contenuto {
		padding-block: var(--elic-sp-5) var(--elic-sp-2);
	}

	.elic-hero__figura {
		justify-self: center;
		align-self: end;
	}

	.elic-hero__figura-immagine {
		max-width: 22rem;
	}
}

/* Sotto i 409.6px il minimo della clamp smette di bastare: la colonna e' tutta
   la finestra meno i margini, e la seconda riga del titolo non ci sta piu'.

   La soglia non e' tonda perche' e' il punto in cui le due formule danno lo
   stesso corpo: spostarla a un valore piu' bello aprirebbe un salto di
   dimensione proprio li'. */
@media (max-width: 25.6rem) {
	.elic-hero h1 {
		font-size: calc(9.4vw - 2.5px);
	}
}

/* ── Testo e cifre ──────────────────────────────────────── */

/* Racconto a sinistra, cifre a destra. Nel primo giro le cifre stavano su una
   riga sola sotto un diagramma: erano staccate dal testo che le spiega, e il
   diagramma raccontava una seconda volta quello che il paragrafo dice gia'.
   Affiancate al testo e disposte in quadrato, si leggono come il suo
   risultato. */
.elic-testo-cifre__interno {
	display: grid;
	gap: var(--elic-sp-5);
	align-items: center;
}

@media (min-width: 60.0625rem) {
	/* La stessa divisione di passi, video e FAQ mantiene un'unica guida per
	   tutti i contenuti editoriali della pagina. */
	.elic-testo-cifre__interno {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
		align-items: start;
	}
}

/* Il sottotitolo continua il titolo, non lo commenta: sta attaccato, in corpo
   grande e peso da testo, cosi' si legge come la riga che chiude il blocco
   del titolo e non come l'inizio del paragrafo. */
.elic-testo-cifre__sottotitolo {
	margin-top: var(--elic-sp-2);
	font-size: var(--elic-dim-grande);
	font-weight: var(--elic-peso-testo);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--elic-testo-tenue);
}

/* La colonna di destra puo' portare due cose: il quadrato delle cifre e,
   sotto, l'invito d'oro. La distanza la mette la colonna, cosi' l'invito non
   deve sapere che cosa ha sopra e resta usabile anche da solo. */
.elic-testo-cifre__dati {
	display: grid;
	gap: var(--elic-sp-4);
	align-content: start;
}

.elic-testo-cifre__figura {
	display: block;
	width: 100%;
	height: auto;
}

/* Due per due, non quattro in fila. In una mezza colonna quattro cifre si
   spezzerebbero comunque, e un quadrato di dati si guarda tutto insieme
   mentre una fila si legge da sinistra a destra come una frase: qui sono
   fatti indipendenti, non una sequenza.

   Colonne fisse e non auto-fit: l'adattamento automatico, in una colonna di
   questa misura, ne metterebbe tre e lascerebbe la quarta sola. */
.elic-testo-cifre__griglia {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--elic-sp-4) var(--elic-sp-3);
}

/* Il filo d'oro sopra ogni cifra la intesta. Con la griglia a due file il filo
   si ripete su quattro celle e diventa una trama, che e' esattamente cio' che
   tiene insieme il quadrato. */
.elic-testo-cifre__griglia > *,
.elic-cifre__griglia > * {
	padding-top: var(--elic-sp-2);
	border-top: 2px solid var(--elic-oro);
}

/* Sotto i 400px due colonne stringono "5 mesi" fino a spezzarlo. */
@media (max-width: 25rem) {
	.elic-testo-cifre__griglia {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Cifre ──────────────────────────────────────────────── */

/* Autonoma, quindi in fila e non in quadrato: qui non c'e' un testo accanto
   che detti la larghezza, e la fascia prende tutto il contenitore. */
.elic-cifre__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--elic-sp-4) var(--elic-sp-3);
}

/* ── Confronto prodotti ─────────────────────────────────── */

.elic-confronto__testata {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--elic-sp-5);
	align-items: start;
}

.elic-confronto__testata p {
	max-width: 58ch;
}

/* auto-fit e non un numero fisso di colonne: il blocco confronta due o tre
   prodotti, e le colonne le detta il ripetitore. */
.elic-confronto__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--elic-sp-5);
	margin-top: var(--elic-sp-5);
}

.elic-confronto__modello {
	min-width: 0;
}

.elic-confronto__immagine {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	background: var(--elic-bianco);
}

.elic-confronto__nome {
	padding-block: var(--elic-sp-3) var(--elic-sp-2);
	font-size: var(--elic-dim-titolo);
}

/* Una riga per dato, e la voce sopra al valore. In colonna non entrano su una
   riga sola: «Consigliato per» e «Metodo» sono frasi, non cifre. */
.elic-confronto__specifiche {
	margin: 0;
	border-top: 1px solid var(--elic-bordo-scuro);
}

.elic-confronto__specifiche div {
	padding-block: var(--elic-sp-2);
	border-bottom: 1px solid var(--elic-bordo-scuro);
}

.elic-confronto__specifiche dt {
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--elic-su-scuro-tenue);
}

.elic-confronto__specifiche dd {
	margin: 0.3rem 0 0;
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	line-height: 1.3;
	text-wrap: balance;
}

.elic-confronto > .elic-container > .elic-azioni {
	margin-top: var(--elic-sp-4);
}

@media (max-width: 60rem) {
	.elic-confronto__testata {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--elic-sp-2);
	}

	.elic-confronto__testata p {
		justify-self: start;
	}
}

@media (max-width: 48rem) {
	.elic-confronto__griglia {
		margin-top: var(--elic-sp-4);
	}
}

/* ── Vetrina ────────────────────────────────────────────────

   La fotografia non sta dentro il contenitore: corre fino al bordo della
   finestra e riempie la fascia in altezza, senza respiro sopra e sotto. Il
   respiro verticale lo porta la colonna del testo, non la sezione,
   altrimenti lo stesso padding staccherebbe anche la figura — che e' il
   contrario di quello che questa fascia serve a fare. Per questo la vetrina
   NON porta la classe .elic-sezione.

   Tre colonne e non due. La prima e' il margine che il contenitore lascia
   sulla pagina, e serve a tenere il testo incolonnato con tutte le altre
   sezioni: se partisse da un padding suo, questa fascia sarebbe allineata a
   qualcosa che non esiste altrove.

   Quel margine si calcola su 100%, cioe' sulla larghezza della sezione, e non
   su 100vw: 100vw comprende la barra di scorrimento, e il testo risulterebbe
   spostato di mezza barra rispetto al resto della pagina. */
.elic-vetrina {
	display: grid;
	align-items: center;
	/* Il riquadro della figura, che qui e' fuori flusso, si misura sull'area
	   di griglia solo se il blocco di contenimento e' la sezione. */
	position: relative;
	/* Un pavimento, non un'altezza: la figura al vivo ha bisogno di respiro
	   per non leggersi come una striscia, ma la fascia resta sotto la piega. */
	min-height: min(62svh, 34rem);
	/* Il taglio cade sempre al 40% della fascia: qui la figura sta a destra e
	   si prende il 60%. Il margine di pagina e la colonna del testo si
	   dividono il 40% che resta, cosi' il testo parte incolonnato con le
	   altre sezioni e il taglio non si sposta con la larghezza. */
	grid-template-columns:
		minmax(
			var(--elic-margine-laterale),
			calc((100% - var(--elic-larghezza-larga)) / 2 + var(--elic-margine-laterale))
		)
		minmax(0, 1fr)
		60%;
}

/* Le colonne sono assegnate a mano e non lasciate al posizionamento
   automatico. Nel markup l'ordine e' sempre lo stesso, testo e poi figura,
   perche' e' quello giusto da leggere e da ascoltare. */
.elic-vetrina__testo {
	grid-column: 2;
	grid-row: 1;
	padding-block: var(--elic-sp-5);
	padding-inline-end: var(--elic-sp-5);
}

/* La riga e' dichiarata e non dedotta. Nella variante invertita la figura sta
   nella colonna 1, cioe' dietro al punto in cui il posizionamento automatico
   e' gia' arrivato: non potendo tornare indietro, la griglia aprirebbe una
   riga nuova e nessuna delle due colonne sarebbe a tutta altezza. */
/* Fuori flusso, dentro la sua area di griglia. In flusso l'altezza della
   fascia la decideva la fotografia — una verticale da 675x900 su una colonna
   larga il 60% faceva una fascia da milleduecento pixel, cioe' piu' di una
   schermata — mentre deve deciderla il testo. Un elemento posizionato non
   partecipa al calcolo della riga, e con le proprieta' di posizionamento
   nella griglia il suo riquadro resta la colonna che gli spetta. */
.elic-vetrina__media {
	/* Le due linee, e non solo quella d'inizio: per un elemento posizionato la
	   linea di fine lasciata ad auto e' il bordo della sezione, non la corsia
	   dopo, e la figura si prenderebbe tutta la larghezza. */
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Invertita: la figura passa a sinistra e il margine di pagina alla destra.
   Il markup non cambia, cambiano le corsie.

   Il taglio resta al 40%, ma da quella parte adesso c'e' la fotografia: la
   figura prende il 40% e il testo il 60% meno il margine di pagina. */
.elic-vetrina--invertita {
	grid-template-columns:
		40%
		minmax(0, 1fr)
		minmax(
			var(--elic-margine-laterale),
			calc((100% - var(--elic-larghezza-larga)) / 2 + var(--elic-margine-laterale))
		);
}

.elic-vetrina--invertita .elic-vetrina__media {
	grid-column: 1 / 2;
}

.elic-vetrina--invertita .elic-vetrina__testo {
	grid-column: 2;
	padding-inline: var(--elic-sp-5) 0;
}

/* In colonna singola la figura resta al vivo in larghezza — e' il punto di
   questa fascia — ma torna alle sue proporzioni in altezza: stirata su una
   riga alta quanto il testo diventerebbe un ritaglio senza soggetto.

   E va sempre sopra, dritte o invertite: impilate, destra e sinistra non
   vogliono piu' dire niente, e una fotografia al vivo che apre la fascia e'
   cio' che la fa leggere come una fascia. */
@media (max-width: 60rem) {
	.elic-vetrina,
	.elic-vetrina--invertita {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.elic-vetrina__media,
	.elic-vetrina--invertita .elic-vetrina__media {
		grid-column: 1;
		grid-row: 1;
		/* Impilata la figura torna in flusso: qui la riga la deve fare lei. */
		position: static;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	/* La variante invertita va nominata anche qui: la sua regola di padding
	   sul desktop ha una classe in piu' e vincerebbe per specificita' anche
	   dentro questa media query, lasciando il testo con settantadue pixel da
	   una parte e zero dall'altra. */
	.elic-vetrina__testo,
	.elic-vetrina--invertita .elic-vetrina__testo {
		grid-column: 1;
		grid-row: 2;
		padding-block: var(--elic-sp-5);
		padding-inline: var(--elic-margine-laterale);
	}
}

/* ── Scheda tecnica ─────────────────────────────────────────

   Una lista di definizioni, non una tabella: sono coppie voce-valore, e una
   tabella prometterebbe righe e colonne che qui non ci sono. I fili sopra
   ogni riga sono gli stessi delle cifre: stessa grammatica per la stessa
   cosa, un dato che si dichiara.

   Due colonne fisse e non auto-fit: la scheda vive in mezza vetrina, e li'
   l'adattamento automatico ne fa stare tre, lasciando la quarta voce sola su
   una riga sua. Quattro dati in due file da due si leggono come una scheda;
   tre piu' uno si leggono come un errore. */
.elic-scheda {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--elic-sp-2) var(--elic-sp-3);
	/* Lo stacco sopra e' quello di un blocco, non di una sezione: la scheda e'
	   il dettaglio della frase che la precede, non un capitolo nuovo. */
	margin-block: var(--elic-sp-3);
}

@media (max-width: 25rem) {
	.elic-scheda {
		grid-template-columns: minmax(0, 1fr);
	}
}

.elic-scheda > div {
	display: grid;
	gap: 0.3rem;
	padding-top: var(--elic-sp-1);
	/* Un pixel, non due. Sopra una voce breve e un valore corto il filo a due
	   pixel pesava quanto il dato che doveva introdurre. */
	border-top: 1px solid var(--elic-oro);
}

.elic-scheda dt {
	font-family: var(--elic-font-testo);
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elic-testo-tenue);
}

.elic-sezione--scura .elic-scheda dt {
	color: var(--elic-su-scuro-tenue);
}

.elic-scheda dd {
	margin: 0;
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* ── Passi numerati ─────────────────────────────────────── */

.elic-passi__interno {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
	gap: var(--elic-sp-5);
	align-items: center;
}

/* Senza una figura, testata ed elenco diventano le due colonne del blocco.
   Le proporzioni riprendono video e FAQ, così la pagina conserva le stesse
   guide verticali anche nel racconto del processo. */
.elic-passi__interno--senza-figura {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	align-items: start;
}

.elic-passi__interno--senza-figura .elic-passi__contenuto {
	display: contents;
}

.elic-passi__interno--senza-figura .elic-passi__elenco {
	margin-top: 0;
}

.elic-passi__media {
	width: 100%;
	height: auto;
}

/* La colonna dei passi e' molto piu' alta della figura: centrata lascerebbe
   un vuoto identico sopra e sotto, e si leggerebbe come un ritaglio che
   galleggia. Appiccicata in alto accompagna invece la lettura, e il
   dislivello fra le due colonne smette di essere spazio morto. */
@media (min-width: 60.0625rem) {
	.elic-passi__interno {
		align-items: stretch;
	}

	.elic-passi__media {
		position: sticky;
		top: var(--elic-sp-3);
		align-self: start;
	}
}

@media (max-width: 60rem) {
	.elic-passi__interno {
		grid-template-columns: 1fr;
		gap: var(--elic-sp-3);
	}

	/* In colonna singola una figura verticale a tutta larghezza diventa un
	   muro da scavalcare prima di arrivare ai passi: si stringe e si centra. */
	.elic-passi__media {
		order: -1;
		max-width: 20rem;
		justify-self: center;
	}
}

.elic-passi__elenco {
	display: grid;
	margin-top: var(--elic-sp-4);
	counter-reset: passo;
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--elic-bordo-chiaro);
}

.elic-passo {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: var(--elic-sp-3);
	align-items: baseline;
	padding-block: var(--elic-sp-3);
	border-bottom: 1px solid var(--elic-bordo-chiaro);
}

/* La cifra e' un numero scritto, non un numero dentro a un pallino: il
   pallino colorato e' il segno che si trova su ogni pagina di ogni sito. Qui
   il passo si conta con la stessa grafia dei titoli, in oro, e a fare da
   elenco e' l'incolonnamento.

   La conta e' del foglio di stile e non del contenuto: togliendo un passo dal
   mezzo la numerazione si richiude da sola, che e' esattamente l'errore che
   il redattore farebbe se i numeri fossero scritti a mano. */
.elic-passo::before {
	counter-increment: passo;
	content: counter(passo, decimal-leading-zero);
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-grande);
	font-weight: var(--elic-peso-display);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--elic-oro-scuro);
	font-variant-numeric: tabular-nums;
}

.elic-sezione--scura .elic-passo::before {
	color: var(--elic-oro-chiaro);
}

/* Senza numeri la corsia della cifra sparisce e le righe diventano titolo e
   spiegazione separati da un filo. Il contatore non si incrementa nemmeno: e'
   piu' economico non contare che contare e nascondere. */
.elic-passi__elenco--senza-numeri .elic-passo {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.elic-passi__elenco--senza-numeri .elic-passo::before {
	content: none;
}

.elic-passo h3 {
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
}

.elic-passo p {
	margin-top: 0.35rem;
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

/* Su telefono la corsia della cifra costa troppo: due caratteri si portano
   via un terzo della riga e il titolo del passo va a capo a meta' parola. La
   cifra resta incolonnata — e' quello il punto — ma alla sua misura. */
@media (max-width: 48rem) {
	.elic-passo {
		grid-template-columns: 2.75rem 1fr;
		gap: var(--elic-sp-2);
	}
}

/* ── Passi a card ─────────────────────────────────────────

   Qui il blocco cambia forma, non solo misura: niente figura, il testo in
   testa a tutta riga con il bottone al suo fianco, e i passi in fila sotto.
   Serve dove il percorso e' un'anteprima e non il contenuto della pagina —
   sulla home, dove i passi per intero stanno su una pagina loro.

   La sezione sta in fondo a quella dei passi e non in mezzo: le regole qui
   annullano quelle di base a parita' di selettore, e a parita' di selettore
   decide l'ordine. */

.elic-passi__interno--card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--elic-sp-4);
	align-items: start;
}

/* La testata e l'elenco devono diventare le due righe del blocco: senza
   questo resterebbero annidati nei contenitori intermedi, che nella griglia
   contano come una cella sola. */
.elic-passi__interno--card .elic-passi__contenuto,
.elic-passi__interno--card .elic-passi__corpo {
	display: contents;
}

/* Il bottone sta a destra del testo e appoggiato al suo fondo: allineato in
   alto galleggerebbe accanto al titolo, mentre cosi' chiude la riga insieme
   all'introduzione. */
.elic-passi__interno--card .elic-passi__testata {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--elic-sp-2) var(--elic-sp-5);
	align-items: end;
}

.elic-passi__interno--card .elic-passi__testata .elic-azioni {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: end;
}

/* Il filo che intestava l'elenco qui non serve: a separare i passi ci pensa
   lo stacco fra una card e l'altra. */
.elic-passi__elenco--card {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--elic-sp-3);
	margin-top: 0;
	border-top: 0;
}

/* La card e' un riquadro vero e non un filo, perche' qui i passi non si
   leggono in sequenza dall'alto in basso ma si guardano affiancati: senza un
   bordo che li chiuda, quattro colonne di testo si leggerebbero per righe. */
.elic-passi__elenco--card .elic-passo {
	/* In colonna flessibile e non a griglia: e' quello che permette al
	   bottone di scendere sul fondo della card invece di stare attaccato al
	   testo, e quindi di incolonnarsi con quello delle card accanto anche
	   quando le spiegazioni sono lunghe diverse. */
	display: flex;
	flex-direction: column;
	/* Esplicito: la regola base incolonna i passi sulla linea di base del
	   testo, e in colonna quell'allineamento stringe ogni riga sul proprio
	   contenuto — il bottone a tutta card diventava largo quanto la sua
	   etichetta. */
	align-items: stretch;
	gap: var(--elic-sp-1);
	padding: var(--elic-sp-3);
	border: 1px solid var(--elic-bordo-chiaro);
	border-radius: 0.5rem;
	background: var(--elic-superficie);
}

.elic-passi__elenco--card .elic-passo .elic-azioni {
	margin-top: auto;
	padding-top: var(--elic-sp-2);
}

/* A tutta card: quattro bottoni larghi quanto il loro riquadro si leggono
   come il fondo della card, mentre quattro bottoni di larghezze diverse si
   leggono come quattro oggetti sparsi. */
.elic-passi__elenco--card .elic-passo .elic-bottone {
	width: 100%;
}

.elic-sezione--scura .elic-passi__elenco--card .elic-passo {
	border-color: var(--elic-bordo-scuro);
	background: transparent;
}

/* La cifra sta sopra il titolo invece che a fianco: nella larghezza di una
   card su quattro, la corsia da 3.5rem si porterebbe via un terzo della
   riga. */
.elic-passi__elenco--card .elic-passo::before {
	margin-bottom: var(--elic-sp-1);
}

/* Nella card titolo e spiegazione vanno tutti e due in bruno, e non nel grigio
   tenue del resto del sito: li' il grigio e' il secondo piano di un testo che
   continua, qui la card e' tutta la cosa da leggere e non ha un primo piano da
   cui staccarsi. */
.elic-passi__elenco--card .elic-passo h3,
.elic-passi__elenco--card .elic-passo p {
	color: var(--elic-bruno);
}

.elic-sezione--scura .elic-passi__elenco--card .elic-passo h3,
.elic-sezione--scura .elic-passi__elenco--card .elic-passo p {
	color: var(--elic-su-scuro);
}

/* Due per riga sul tablet, quattro sul desktop: la soglia larga e' la stessa
   a cui tutto il resto del sito passa a due colonne. */
@media (min-width: 36rem) {
	.elic-passi__elenco--card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60.0625rem) {
	.elic-passi__elenco--card {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Sotto la soglia il bottone scende sotto il testo invece di stringerlo. */
@media (max-width: 48rem) {
	.elic-passi__interno--card .elic-passi__testata {
		grid-template-columns: minmax(0, 1fr);
	}

	.elic-passi__interno--card .elic-passi__testata .elic-azioni {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ── Domande e risposte ─────────────────────────────────── */

.elic-faq__interno {
	display: grid;
	gap: var(--elic-sp-4) var(--elic-sp-5);
	align-items: start;
}

@media (min-width: 60.0625rem) {
	/* Il titolo in una colonna stretta a sinistra, le domande in una larga a
	   destra: il titolo diventa un'intestazione di margine, e l'elenco
	   comincia subito invece di stare sotto a un titolo a tutta pagina. */
	.elic-faq__interno {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	}
}

.elic-faq__elenco {
	border-top: 1px solid var(--elic-bordo-chiaro);
}

.elic-faq__elenco details {
	border-bottom: 1px solid var(--elic-bordo-chiaro);
}

.elic-faq__elenco summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--elic-sp-3);
	padding-block: var(--elic-sp-3);
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-grande);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.025em;
	line-height: 1.2;
	cursor: pointer;
	list-style: none;
	transition: color var(--elic-transizione);
}

.elic-faq__elenco summary:hover {
	color: var(--elic-oro-scuro);
}

.elic-faq__elenco summary::-webkit-details-marker {
	display: none;
}

/* Il piu' e il meno sono due filetti incrociati disegnati con due gradienti,
   non un carattere e non un'icona: a un carattere servirebbe un font, a
   un'icona un file, e qui bastano due righe di un pixel. */
.elic-faq__elenco summary::after {
	content: "";
	position: relative;
	top: -0.15em;
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	background:
		linear-gradient(currentcolor, currentcolor) center / 100% 1px no-repeat,
		linear-gradient(currentcolor, currentcolor) center / 1px 100% no-repeat;
	color: var(--elic-oro-scuro);
	transition: transform var(--elic-transizione);
}

.elic-faq__elenco details[open] summary::after {
	transform: rotate(90deg);
	background: linear-gradient(currentcolor, currentcolor) center / 100% 1px no-repeat;
}

.elic-faq__elenco details p {
	max-width: 62ch;
	padding-bottom: var(--elic-sp-3);
	color: var(--elic-testo-tenue);
}

.elic-sezione--scura .elic-faq__elenco summary::after {
	color: var(--elic-oro-chiaro);
}

/* ── Firma ──────────────────────────────────────────────── */

.elic-firma {
	display: flex;
	align-items: center;
	gap: var(--elic-sp-2);
	margin-top: var(--elic-sp-4);
	padding-top: var(--elic-sp-3);
	border-top: 1px solid var(--elic-bordo-chiaro);
}

.elic-sezione--scura .elic-firma {
	border-top-color: var(--elic-bordo-scuro);
}

.elic-firma__ritratto {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.elic-firma__testo {
	margin: 0;
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

.elic-sezione--scura .elic-firma__testo {
	color: var(--elic-su-scuro-tenue);
}

.elic-firma__nome {
	display: block;
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
	color: var(--elic-testo);
}

.elic-sezione--scura .elic-firma__nome {
	color: var(--elic-su-scuro);
}

/* ── Citazione ──────────────────────────────────────────── */

.elic-citazione__blocco {
	margin: 0;
}

/* Nessuna virgoletta disegnata e nessun filo verticale: e' il corpo grande a
   dire che si sta citando, e il resto sarebbe decorazione. */
.elic-citazione__testo {
	margin: 0;
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-grande);
	font-weight: var(--elic-peso-testo);
	line-height: 1.35;
	letter-spacing: -0.02em;
}

/* Dentro una citazione la firma non ha bisogno del suo filo: il blocco l'ha
   gia' chiusa. */
.elic-citazione__blocco .elic-firma {
	border-top: 0;
	padding-top: 0;
	margin-top: var(--elic-sp-3);
}

/* ── Loghi ──────────────────────────────────────────────── */

.elic-loghi__elenco {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--elic-sp-4) var(--elic-sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* I loghi arrivano da fonti diverse e con proporzioni diverse: si pareggiano
   sull'altezza e non sulla larghezza, perche' e' l'altezza che l'occhio legge
   come "stessa importanza". */
.elic-loghi__immagine {
	display: block;
	width: auto;
	height: 3rem;
	max-width: 12rem;
	object-fit: contain;
}

/* ── Economia Elicoidale ────────────────────────────────── */

/* La fascia della visione respira piu' delle altre: e' il fulcro del racconto
   e la spirale ha bisogno di spazio verticale per leggersi. */
.elic-spirale__interno {
	display: grid;
	gap: var(--elic-sp-4);
	align-items: center;
}

/* Sopra la soglia a due colonne la sezione prende la finestra intera: e' il
   perno del racconto, e un disegno che spiega un modello ha bisogno di non
   dividere lo schermo con la sezione precedente e la successiva. Sotto la
   soglia la spirale non c'e' — resta l'elenco — e un'altezza piena sarebbe
   soltanto un vuoto da scorrere. */
@media (min-width: 48.0625rem) {
	.elic-spirale {
		display: grid;
		align-content: center;
		/* Meno l'ingombro della barra appiccicosa: con 100svh pieni la
		   sezione sborda di quella misura e il fondo della spirale resta
		   sotto la piega. */
		min-height: calc(100svh - var(--elic-ingombro-barra));
		/* A finestra piena la distanza dai bordi la fa align-content: il
		   respiro da sei gradini servirebbe solo a stringere la spirale. */
		padding-block: var(--elic-sp-5);
	}

	/* La colonna del disegno pesa piu' di quella del testo: e' il disegno il
	   motivo per cui questa sezione esiste, e il testo che lo accompagna sta
	   comodo anche stretto. La misura pero' e' quella condivisa da hero,
	   testo-cifre, passi, video e FAQ: la direzione era gia' questa, e restare
	   due punti e mezzo fuori scala non la diceva meglio. */
	.elic-spirale__interno {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	}

	/* Testo e azioni incolonnati a sinistra su due righe, il disegno a destra
	   su entrambe: cosi' resta centrato rispetto al blocco intero e non solo
	   rispetto al testo. */
	.elic-spirale__colonna {
		grid-column: 1;
		grid-row: 1;
	}

	.elic-spirale__azioni {
		grid-column: 1;
		grid-row: 2;
	}

	.elic-spirale__grafico {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* Il sottotitolo continua il titolo, non lo commenta: stessa famiglia e in
   oro, cosi' si legge come la seconda meta' di una frase sola e non si
   confonde con il paragrafo che segue. */
.elic-spirale__sottotitolo {
	margin-top: var(--elic-sp-1);
	font-family: var(--elic-font-display);
	font-weight: var(--elic-peso-testo);
	font-size: var(--elic-dim-grande);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--elic-oro-chiaro);
}

.elic-spirale__grafico {
	width: 100%;
	height: auto;
	/* Il tetto lo detta la finestra, non una misura fissa: su uno schermo alto
	   il disegno cresce fino a riempire la fascia, su uno basso si ritira
	   invece di spingere fuori il testo. */
	max-height: min(64svh, 42rem);
	margin-inline: auto;
}

/* La velatura della linea e' tarata sul fondo: l'oro pieno peserebbe quanto
   gli anelli, e la linea accompagna le stazioni, non compete con loro. */
.elic-spirale__percorso {
	fill: none;
	stroke: var(--elic-oro);
	stroke-opacity: 0.65;
	stroke-width: 2.2;
	stroke-linecap: round;
	/* Il tratteggio c'e' da subito, anche a spirale ferma e anche mentre si
	   compone: i vuoti sono come la linea e' fatta, non un effetto che
	   sopraggiunge. */
	stroke-dasharray:
		calc((1px - var(--elic-spirale-vuoti) * var(--elic-spirale-vuoto)) / var(--elic-spirale-vuoti))
		var(--elic-spirale-vuoto);
}

/* La tendina dentro la maschera. Piu' spessa della linea perche' non ne mangi
   i bordi ne' i capicorda tondi: e' un rivelatore, non un contorno. */
.elic-spirale__rivelatore {
	fill: none;
	stroke: #fff;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 1;
	/* A riposo e' tutta aperta: se il JavaScript non parte, o se il sistema
	   chiede meno movimento, la spirale si vede intera invece di restare
	   nascosta da una tendina che nessuno aprira'. */
	stroke-dashoffset: 0;
}

.elic-spirale__anello {
	fill: none;
	stroke: var(--elic-oro);
	stroke-width: 2.2;
	transition: stroke var(--elic-transizione), stroke-width var(--elic-transizione);
}

.elic-spirale__nodo:hover .elic-spirale__anello {
	stroke: var(--elic-oro-chiaro);
	stroke-width: 4;
}

.elic-spirale__etichetta {
	font-family: var(--elic-font-testo);
	font-size: 12px;
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--elic-su-scuro);
}

.elic-spirale__etichetta--tenue {
	fill: var(--elic-su-scuro-tenue);
}

.elic-spirale__nucleo {
	font-family: var(--elic-font-display);
	font-size: 12px;
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: var(--elic-oro-chiaro);
}

/* Su schermo stretto la spirale diventa una sequenza verticale: un grafico di
   settecento pixel non si legge su un telefono. L'elenco pero' esiste sempre
   nel documento — e' l'equivalente testuale del disegno, quello che leggono i
   motori di ricerca e chi usa un lettore di schermo. */
.elic-spirale__elenco {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.elic-spirale__voce {
	display: flex;
	align-items: center;
	gap: var(--elic-sp-2);
	padding-block: 0.55rem;
}

.elic-spirale__voce img,
.elic-spirale__glifo {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
}

.elic-spirale__voce img {
	border: 1px solid var(--elic-oro);
}

.elic-spirale__glifo {
	color: var(--elic-oro);
}

.elic-spirale__voce span {
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--elic-su-scuro);
}

/* Su schermo stretto il disegno resta, le etichette no: a quella larghezza
   sette scritte disposte in cerchio si sovrappongono, e allargare il riquadro
   per farcele stare rimpicciolirebbe la spirale fino a renderla un ghirigoro.
   I nomi li porta l'elenco, che diventa la legenda del disegno. */
@media (max-width: 48rem) {
	.elic-spirale__etichetta,
	.elic-spirale__nucleo {
		display: none;
	}

	/* Due colonne: sette voci in colonna singola sono una lista lunga quanto
	   lo schermo, e una legenda si guarda, non si legge riga per riga. */
	.elic-spirale__elenco {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--elic-sp-2);
		align-items: start;
	}
}

/* Sotto i 360px le due colonne non ci stanno piu'. Non e' questione di
   larghezza disponibile ma di parole: "Ristorazione" e "Sostenibilita'" sono
   lunghe, in maiuscoletto spaziato non si spezzano, e una voce in flex non
   scende sotto la sua misura minima — quindi invece di stringersi sborda. */
@media (max-width: 22.5rem) {
	.elic-spirale__elenco {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Respiro della spirale ──────────────────────────────────

   L'unico movimento del sito, e sta qui per una ragione precisa: il modello
   che il disegno illustra e' un percorso che si sviluppa, quindi vederlo
   svilupparsi dice qualcosa che il disegno fermo non dice. Altrove sarebbe
   decorazione, e il sito infatti non ne ha.

   Due movimenti diversi, e la differenza e' voluta. Le stazioni si accendono
   una volta sola, quando la sezione entra in vista, e poi restano: sono i
   posti dove il percorso passa, e i posti stanno fermi. La linea invece si
   compone una volta e poi scorre e basta: un vuoto corto che viaggia dal
   centro verso l'esterno, esce dalla punta e rientra dal centro.

   Prima era un ciclo — si componeva, restava, si scomponeva, ricominciava — e
   raccontava qualcosa che riparte da capo. Il modello dice il contrario: e' un
   processo che continua, e ora il movimento lo dice.

   Che sia sopportabile dipende da due cose. La prima e' la lentezza: nove
   secondi per un giro intero sono una deriva, non un lampeggio. La seconda e'
   che a muoversi e' un buco corto e non tutta la linea, quindi il disegno
   resta fermo e leggibile mentre una sola parte cambia.

   Lo stato di partenza lo scrive il JavaScript con data-animabile, non questo
   foglio: se lo script non gira, o se il sistema chiede meno movimento, la
   spirale e' semplicemente li', gia' disegnata. Nessuna scommessa sul fatto
   che qualcosa arrivi a togliere un opacity: 0. */

.elic-spirale__grafico {
	/* Le durate stanno qui e non nel JavaScript perche' il JavaScript le legge
	   da qui: e' lui a far scattare le due fasi, ma i numeri restano nel foglio
	   di stile insieme al resto della messa in scena. */
	--elic-spirale-disegno: 2200ms;
	--elic-spirale-nodo: 380ms;

	/* Quanto ci mette il vuoto a percorrere tutta la spirale. Nove secondi su
	   un tracciato lungo due giri e' una deriva lenta: si nota guardandola e
	   non si nota leggendo il testo accanto, che e' esattamente il punto. */
	--elic-spirale-scorrimento: 9000ms;

	/* Quanti vuoti girano lungo la spirale, e quanto e' largo ciascuno in
	   frazione del tracciato. Il tratto fra un vuoto e l'altro si calcola: e'
	   quello che avanza, diviso per il numero di vuoti.

	   Che il conto torni esatto non e' un vezzo. Il motivo del tratteggio si
	   ripete all'infinito, e se la sua lunghezza non divide esattamente il
	   percorso l'ultimo giro resta monco: si vede un salto nel punto in cui
	   l'animazione ricomincia. Con tre vuoti da 0,0333 il tratto viene 0,3, il
	   motivo misura un terzo esatto e il giro non ha cuciture.

	   Le misure portano px perche' il tracciato dichiara pathLength="1": li'
	   un px vale tutto il percorso. Mescolare px e numeri nudi dentro un calc
	   lo rende invalido, e una proprieta' invalida non fallisce rumorosamente:
	   sparisce. */
	--elic-spirale-vuoti: 4;
	--elic-spirale-vuoto: 0.04px;
}

.elic-spirale__grafico[data-animabile] .elic-spirale__rivelatore {
	stroke-dashoffset: 1;
}

.elic-spirale__grafico[data-animabile] .elic-spirale__centro,
.elic-spirale__grafico[data-animabile] .elic-spirale__nodo {
	opacity: 0;
	/* Il riquadro di riferimento e' quello del gruppo: senza, la scala
	   prenderebbe l'origine dell'intero SVG e i nodi entrerebbero di traverso
	   invece che da se stessi. */
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.92);
}

/* Fotogrammi e non transizioni. Una transizione dichiarata soltanto nello
   stato di arrivo non parte: al cambio di attributo il valore salta alla fine
   e non si vede niente. Un'animazione invece parte quando viene applicata, e
   con fill-mode both tiene il primo fotogramma durante il ritardo e l'ultimo
   dopo la fine — ed e' quest'ultima proprieta' che, finita la composizione,
   lascia la linea disegnata mentre si passa allo scorrimento. */

@keyframes elic-traccia {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

/* Il verso lo decide il SEGNO dello scostamento, non il valore. Andando verso
   -1 il motivo scivola in avanti lungo il tracciato: i vuoti viaggiano dal
   centro verso l'esterno, escono dalla punta e rientrano dal centro. Verso +1
   andrebbero al contrario, e sarebbe un carattere.

   Lo scostamento percorre l'intero tracciato in una passata, ma il motivo si
   ripete tre volte: quello che si vede e' quindi un giro ogni terzo di durata.
   Cambiare il numero dei vuoti cambia il ritmo senza toccare la velocita' con
   cui ciascuno si muove, che resta quella. */
@keyframes elic-scorre {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -1; }
}

@keyframes elic-entra {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: none; }
}

.elic-spirale__grafico[data-fase="entra"] .elic-spirale__rivelatore {
	animation-name: elic-traccia;
	/* Andatura costante, non ease-out: i ritardi delle stazioni sono la
	   frazione di tracciato a cui ciascuna si trova, e con un'andatura
	   variabile la linea le scavalcherebbe a meta' strada. */
	animation-timing-function: linear;
	animation-duration: var(--elic-spirale-disegno);
	animation-fill-mode: both;
}

/* Le stazioni si accendono al primo passaggio della linea e poi restano. Non
   seguono il ciclo: un pallino che si spegne e si riaccende ogni undici
   secondi diventa un semaforo, e sono sette.

   Il ritardo e' la posizione della stazione sul tracciato per la durata del
   disegno: si accende quando la linea la raggiunge. La posizione arriva dal
   PHP come custom property sul gruppo — nel prototipo era un elenco di sette
   numeri scritti a mano, e con un nodo in piu' sarebbero diventati sbagliati
   in silenzio. */
.elic-spirale__grafico[data-animata] .elic-spirale__centro,
.elic-spirale__grafico[data-animata] .elic-spirale__nodo {
	animation-name: elic-entra;
	animation-timing-function: ease-out;
	animation-duration: var(--elic-spirale-nodo);
	animation-fill-mode: both;
	animation-delay: calc(var(--elic-spirale-punto, 0) * var(--elic-spirale-disegno));
}

/* Finita la composizione la linea non sparisce piu': si apre un vuoto corto e
   comincia a scorrere, e da li' non si ferma. E' il movimento che il modello
   descrive — un processo che continua — mentre il ciclo di prima, che si
   componeva e si scomponeva, raccontava qualcosa che ricomincia da capo.

   Il tratteggio si dichiara solo qui, in questa fase. Durante la composizione
   il tratto e' lungo quanto tutto il percorso, perche' li' serve una linea che
   si disegna, non una linea con un buco. */
/* I vuoti girano da subito, gia' durante la composizione: cosi' quello che la
   tendina scopre e' una linea gia' viva, e fra le due fasi non c'e' nessuno
   scarto da vedere. */
.elic-spirale__grafico[data-fase] .elic-spirale__percorso {
	animation-name: elic-scorre;
	animation-timing-function: linear;
	animation-duration: var(--elic-spirale-scorrimento);
	animation-iteration-count: infinite;
}

/* A composizione finita la tendina resta aperta per dichiarazione e non per
   fill-mode: l'animazione qui non e' piu' applicata, e senza questa riga il
   rivelatore tornerebbe allo stato di partenza — cioe' la spirale sparirebbe
   di colpo. */
.elic-spirale__grafico[data-fase="scorre"] .elic-spirale__rivelatore {
	stroke-dashoffset: 0;
	animation: none;
}

/* In stampa non c'e' scorrimento, quindi l'osservatore non scatta mai e la
   spirale resterebbe allo stato di partenza: un riquadro vuoto al posto del
   disegno che regge la sezione. */
@media print {
	.elic-spirale__grafico[data-animabile] .elic-spirale__rivelatore {
		stroke-dashoffset: 0;
	}

	.elic-spirale__grafico[data-animabile] .elic-spirale__centro,
	.elic-spirale__grafico[data-animabile] .elic-spirale__nodo {
		opacity: 1;
		transform: none;
	}
}

/* ── Elenco di contenuti ────────────────────────────────── */

/* Righe e non card: in un calendario quello che si cerca e' "quando", e una
   fila con la data in evidenza si scorre in verticale come un'agenda. Le card
   si guardano una per volta, ed e' la forma giusta per le forniture, dove si
   cerca "cosa". */
.elic-elenco__voci {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--elic-bordo-chiaro);
}

.elic-elenco__voce {
	display: grid;
	grid-template-columns: 10rem 1fr auto;
	gap: var(--elic-sp-3);
	align-items: baseline;
	padding-block: var(--elic-sp-3);
	border-bottom: 1px solid var(--elic-bordo-chiaro);
}

.elic-elenco__data {
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
	color: var(--elic-oro-scuro);
}

.elic-sezione--scura .elic-elenco__data {
	color: var(--elic-oro-chiaro);
}

.elic-elenco__titolo {
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
}

/* Il collegamento prende tutta la riga: su un elenco di date, un bersaglio
   grande quanto il titolo e' scomodo su un telefono. Lo pseudo-elemento
   copre la riga senza annidare un link attorno a tutto, che porterebbe dentro
   anche il testo dello stato. */
.elic-elenco__titolo a {
	color: inherit;
	text-decoration: none;
}

.elic-elenco__titolo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.elic-elenco__voce {
	position: relative;
}

.elic-elenco__titolo a:hover {
	color: var(--elic-oro-scuro);
}

.elic-elenco__dettaglio {
	margin-top: 0.25rem;
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

/* La modalità è un'etichetta, non un titolo né una sezione. */
.elic-elenco__modalita {
	justify-self: start;
	width: fit-content;
	margin-top: 0.5rem;
	padding: 0.2em 0.6em;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elic-oro-scuro);
}

.elic-sezione--scura .elic-elenco__modalita {
	color: var(--elic-oro-chiaro);
}

.elic-elenco__fatti {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

.elic-elenco__fatti li:not(:last-child)::after {
	content: "·";
	margin-inline: 0.5em;
}

.elic-elenco__corpo .elic-elenco__stato {
	margin-top: 0.5rem;
}

/* Sopra al collegamento che copre la riga, altrimenti il clic va al titolo. */
.elic-elenco__azione {
	position: relative;
	z-index: 1;
	align-self: center;
}

.elic-elenco__stato {
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elic-testo-tenue);
}

.elic-elenco__vuoto {
	max-width: 52ch;
	color: var(--elic-testo-tenue);
}

/* Su telefono la corsia della data costa troppo: dieci rem si portano via
   piu' di meta' riga. La data resta, ma sopra il titolo. */
@media (max-width: 48rem) {
	.elic-elenco__voce {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--elic-sp-1);
	}
}

/* ── Galleria ───────────────────────────────────────────── */

.elic-galleria__griglia {
	display: grid;
	grid-template-columns: repeat(var(--elic-galleria-colonne, 3), minmax(0, 1fr));
	gap: var(--elic-sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

/* Un bottone e non un link: non porta a una pagina, apre un riquadro sulla
   stessa. Il fuoco e la chiusura con Esc li gestisce il dialog. */
.elic-galleria__scatto {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.elic-galleria__scatto img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity var(--elic-transizione);
}

.elic-galleria__scatto:hover img {
	opacity: 0.86;
}

.elic-galleria__riquadro {
	max-width: 92vw;
	max-height: 92vh;
	padding: 0;
	border: 0;
	background: none;
}

.elic-galleria__riquadro::backdrop {
	background: rgb(25 20 16 / 0.88);
}

.elic-galleria__riquadro img {
	display: block;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
}

/* ── Video ──────────────────────────────────────────────── */

.elic-video__facciata {
	margin: 0;
}

.elic-video__interno {
	display: grid;
	/* La stessa griglia della FAQ mantiene titolo e contenuto sulle medesime
	   guide verticali quando i due blocchi si susseguono nella pagina. */
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	gap: var(--elic-sp-5);
	align-items: start;
}

/* Niente titolo appiccicato: accanto c'e' un video, cioe' un elemento solo e
   alto quanto e' alto. Il titolo non ha nulla da accompagnare e resterebbe
   fermo mentre sotto di se' non scorre niente. */
.elic-video__titolo {
	position: static;
}

.elic-video__avvio {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: var(--elic-bruno-2);
	cursor: pointer;
	overflow: hidden;
}

.elic-video__copertina {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Il triangolo e' disegnato con un bordo, non con un carattere e non con un
   file: un carattere richiederebbe un font, un file una richiesta in piu'. */
.elic-video__triangolo {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.15rem 0 1.15rem 1.9rem;
	border-color: transparent transparent transparent var(--elic-bianco);
	filter: drop-shadow(0 1px 6px rgb(25 20 16 / 0.5));
	transition: transform var(--elic-transizione);
}

.elic-video__avvio:hover .elic-video__triangolo {
	transform: scale(1.1);
}

.elic-video__riquadro {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.elic-video__didascalia {
	margin-top: var(--elic-sp-2);
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

@media (max-width: 60rem) {
	.elic-video__interno {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--elic-sp-3);
	}

	.elic-video__titolo {
		position: static;
	}
}

/* ── Modulo ─────────────────────────────────────────────── */

.elic-modulo__campi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--elic-sp-3);
	margin-top: var(--elic-sp-4);
}

.elic-modulo__campo--piena,
.elic-modulo__campo--consenso {
	grid-column: 1 / -1;
}

@media (max-width: 40rem) {
	.elic-modulo__campi {
		grid-template-columns: minmax(0, 1fr);
	}
}

.elic-modulo__campo label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elic-testo-tenue);
}

/* "facoltativo" invece dell'asterisco sugli obbligatori. L'asterisco va
   spiegato in una legenda che nessuno legge, e su un modulo in cui quasi
   tutto e' obbligatorio segnalare le eccezioni e' meno rumoroso. */
.elic-modulo__facoltativo {
	margin-left: 0.4em;
	font-weight: var(--elic-peso-testo);
	letter-spacing: 0.06em;
	text-transform: none;
	opacity: 0.75;
}

.elic-modulo__campo input,
.elic-modulo__campo select,
.elic-modulo__campo textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--elic-bordo-chiaro);
	border-radius: var(--elic-raggio);
	background: var(--elic-bianco);
	color: var(--elic-testo);
	font: inherit;
	/* Sedici pixel sui campi: sotto quella misura Safari su iPhone ingrandisce
	   la pagina appena si tocca un campo, e non torna piu' indietro. */
	font-size: max(1rem, var(--elic-dim-normale));
	transition: border-color var(--elic-transizione);
}

.elic-modulo__campo textarea {
	resize: vertical;
}

/* La select ha l'aspetto degli input: senza quello nativo, stessa altezza e una
   freccia disegnata nei colori del sito. line-height fissa perché la select
   non eredita l'interlinea del testo e resterebbe più bassa degli input. */
.elic-modulo__campo input,
.elic-modulo__campo select {
	min-height: 3.25rem;
	line-height: 1.5;
}

.elic-modulo__campo select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233B2C1D' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem auto;
	text-overflow: ellipsis;
	cursor: pointer;
}

/* L'opzione vuota «Scegli…» si legge come un suggerimento, non come una risposta. */
.elic-modulo__campo select:has(option[value=""]:checked) {
	color: var(--elic-testo-tenue);
}

.elic-sezione--scura .elic-modulo__campo select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F7F6F3' stroke-width='1.6'/%3E%3C/svg%3E");
}

.elic-sezione--scura .elic-modulo__campo select:has(option[value=""]:checked) {
	color: var(--elic-su-scuro-tenue);
}

/* Le voci della tendina tornano del colore normale, anche quando la select
   mostra ancora il suggerimento. */
.elic-modulo__campo select option {
	color: var(--elic-testo);
}

.elic-modulo__campo input:focus-visible,
.elic-modulo__campo select:focus-visible,
.elic-modulo__campo textarea:focus-visible {
	border-color: var(--elic-oro-scuro);
}

.elic-sezione--scura .elic-modulo__campo input,
.elic-sezione--scura .elic-modulo__campo select,
.elic-sezione--scura .elic-modulo__campo textarea {
	border-color: var(--elic-bordo-scuro);
	background: var(--elic-bruno-2);
	color: var(--elic-su-scuro);
}

.elic-modulo__campo--consenso {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.elic-modulo__campo--consenso input {
	width: auto;
	margin-top: 0.15rem;
	flex: none;
}

/* Il consenso e' l'unica etichetta che si legge come una frase e non come
   un'intestazione di campo: in maiuscoletto spaziato sarebbe illeggibile, e
   una frase che nessuno legge non e' un consenso. */
.elic-modulo__campo--consenso label {
	margin: 0;
	font-size: var(--elic-dim-piccolo);
	font-weight: var(--elic-peso-testo);
	letter-spacing: 0;
	text-transform: none;
	color: var(--elic-testo-tenue);
}

.elic-modulo__aiuto {
	margin-top: 0.35rem;
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

/* L'esca. Fuori dal flusso e non display: none: parte degli automi salta i
   campi nascosti con display, e questo deve sembrare un campo qualunque. */
.elic-modulo__esca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.elic-modulo__conferma {
	margin-top: var(--elic-sp-3);
	padding: var(--elic-sp-3);
	border-left: 3px solid var(--elic-oro);
	background: var(--elic-bianco);
	font-size: var(--elic-dim-medio);
}

.elic-modulo__errori {
	margin-top: var(--elic-sp-3);
	padding: var(--elic-sp-2) var(--elic-sp-3);
	border-left: 3px solid var(--elic-oro-scuro);
	background: var(--elic-bianco);
	font-size: var(--elic-dim-piccolo);
}

.elic-modulo__errori ul {
	margin: 0.4rem 0 0;
	padding-left: 1.2rem;
}

/* ── Test del terreno ───────────────────────────────────── */

.elic-test__form {
	margin-top: var(--elic-sp-4);
}

.elic-test__domanda {
	margin: 0;
	padding: var(--elic-sp-3) 0;
	border: 0;
	border-top: 1px solid var(--elic-bordo-chiaro);
}

.elic-test__domanda legend {
	display: flex;
	align-items: baseline;
	gap: var(--elic-sp-2);
	padding: 0;
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
}

/* La stessa cifra dei passi numerati: e' lo stesso gesto — contare — e usare
   due segni diversi per la stessa cosa fa sembrare due sistemi. */
.elic-test__numero {
	font-size: var(--elic-dim-grande);
	font-weight: var(--elic-peso-display);
	line-height: 1;
	color: var(--elic-oro-scuro);
	font-variant-numeric: tabular-nums;
}

.elic-test__risposte {
	display: grid;
	gap: 0.4rem;
	margin-top: var(--elic-sp-2);
}

.elic-test__risposta {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.elic-test__risposta input {
	margin-top: 0.3rem;
	flex: none;
	accent-color: var(--elic-oro-scuro);
}

.elic-test__risposta label {
	font-size: var(--elic-dim-normale);
	color: var(--elic-testo-tenue);
	cursor: pointer;
}

.elic-test__risposta input:checked + label {
	color: var(--elic-testo);
}

.elic-test__esito {
	margin-top: var(--elic-sp-4);
	padding: var(--elic-sp-3);
	border-left: 3px solid var(--elic-oro);
	background: var(--elic-bianco);
}

/* Il fuoco ci arriva per programma, non per tabulazione: il contorno
   servirebbe a segnalare dove si e' arrivati navigando, e qui non si e'
   navigati. Il responso si vede da solo, e' comparso adesso. */
.elic-test__esito:focus {
	outline: none;
}

.elic-test__esito-titolo {
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-grande);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
}

.elic-test__avvertenza {
	margin-top: var(--elic-sp-3);
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}