/*
 * Pintology · stili del tema.
 * Mobile-first: le regole di base valgono per lo smartphone (tavole a 390px),
 * i blocchi @media (min-width: 900px) per il desktop (tavole a 1440px).
 * Stesso HTML per mobile e desktop: cambiano solo griglie, direzioni e misure.
 * Misure e colori vengono dalle tavole 02–09 del design del 26/10/2026.
 */

/* ---------- Font ---------- */

@font-face {
	font-family: "Special Elite";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/special-elite-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Special Elite";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/special-elite-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Domine";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/domine-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Domine";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/domine-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Token ---------- */

:root {
	/* Frecce dei link e dei bottoni (al posto dei caratteri ↓ e ⟶), usate come maschera: prendono il colore del testo. */
	--freccia-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 0v12.6M1 8.6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
	--freccia-lunga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22.6M18.2 1l4.4 4-4.4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
	--nero: #111111;
	--bianco: #ffffff;
	--giallo: #f8e058;
	--carta: #f1f1ef;
	--viola: #684e8f;
	--rosso: #d93a40; /* mese del calendario: 4,54:1 con il testo bianco (decisione del 27/10/2026) */
	--linea: #e4e4e2;
	--bordo: #cfcfcc;
	--grigio: #555553;
	--grigio-chiaro: #6b6b68;
	--spento-testo: #9a9a97;
	--spento-sfondo: #f2f2f0;

	--font-titoli: "Special Elite", "Courier New", monospace;
	--font-testo: "Domine", Georgia, serif;

	/* Ombre piene, senza sfocatura. */
	--ombra-bottone: 3px 3px 0 var(--nero);
	--ombra-immagine: 5px 5px 0 rgba(17, 17, 17, 0.22);
	--ombra-badge: 3px 3px 0 rgba(17, 17, 17, 0.22);

	/* Mobile 390 / desktop 1440. */
	--margine: 16px;
	--fascia: 20px;
	--pila: 14px;
	--spazio: 12px;
	--titolo-linea: 20px;
}

@media (min-width: 900px) {
	:root {
		--margine: 40px;
		--fascia: 56px;
		--pila: 24px;
		--spazio: 20px;
		--titolo-linea: 30px;
	}
}

/* ---------- Base ---------- */

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

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

body {
	margin: 0;
	background: var(--bianco);
	color: var(--nero);
	font-family: var(--font-testo);
	font-size: 0.875rem;
	line-height: 1.55;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--font-titoli);
	font-weight: 400;
	text-wrap: pretty;
}

h1 {
	font-size: 1.875rem;
	line-height: 1.1;
}

h2 {
	font-size: 1.3125rem;
	line-height: 1.2;
}

h3 {
	font-size: 1.1rem;
	line-height: 1.25;
}

p {
	margin: 0;
}

b,
strong {
	font-weight: 700;
}

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* L'attributo hidden vince sempre, anche sugli elementi con un display esplicito. */
[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	body {
		font-size: 1rem;
	}

	h1 {
		font-size: 2.75rem;
	}

	h2 {
		font-size: 1.75rem;
	}

	h3 {
		font-size: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

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

.contenitore {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--margine);
}

.contenitore--stretto {
	max-width: calc(760px + 2 * var(--margine));
}

.nascosto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.salta {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--nero);
	color: var(--bianco);
	transform: translateY(-200%);
}

.salta:focus {
	transform: none;
}

/* Elementi in colonna, con la distanza standard tra titolo e contenuto (14 / 24). */
.pila,
.blocco {
	display: flex;
	flex-direction: column;
	gap: var(--pila);
	min-width: 0;
}

.pila > .link,
.blocco > .link,
.pila > .bottone:not(.bottone--cta) {
	align-self: flex-start;
}

.testo-secondario {
	color: var(--grigio);
	font-size: 0.75rem;
	line-height: 1.55;
}

@media (min-width: 900px) {
	.testo-secondario {
		font-size: 0.8125rem;
	}
}

/* ---------- Fasce ---------- */

/* Ogni fascia ha 20px sopra e sotto su mobile, 56px su desktop. */
.fascia {
	padding-block: var(--fascia);
}

/* Due fasce bianche di seguito: la seconda accorcia lo spazio sopra (32px su mobile, 56px su desktop tra le due). */
.fascia--attaccata {
	padding-top: 12px;
}

/* Linea sottile tra una fascia bianca e una colorata che la segue. */
.fascia--linea {
	border-bottom: 1px solid var(--linea);
}

/*
 * Carta strappata: un solo asset verticale 9:16 per colore.
 * Su mobile è lo sfondo della fascia; su desktop un livello ruotato di -90° (bianco a sinistra, colore a destra).
 */
.fascia--carta-verde,
.fascia--carta-viola {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--carta) url("../img/carta-verde.webp") center / cover no-repeat;
}

.fascia--carta-viola {
	background-color: var(--viola);
	background-image: url("../img/carta-viola.webp");
}

@media (min-width: 900px) {
	.fascia--attaccata {
		padding-top: 0;
	}

	.fascia--carta-verde,
	.fascia--carta-viola {
		background-image: none;
	}

	.fascia--carta-verde::before,
	.fascia--carta-viola::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		width: 56.25%;
		aspect-ratio: 9 / 16;
		background: url("../img/carta-verde.webp") center / cover no-repeat;
		transform: translate(-50%, -50%) rotate(-90deg);
		pointer-events: none;
	}

	.fascia--carta-viola::before {
		background-image: url("../img/carta-viola.webp");
	}
}

/*
 * Una fascia attaccata che si ritrova dopo la carta o la hero (perché la fascia bianca prima è vuota
 * e non viene stampata) torna al padding pieno: l'attacco vale solo tra due fasce bianche.
 */
:is(.fascia--carta-verde, .fascia--carta-viola) + .fascia--attaccata {
	padding-top: var(--fascia);
}

/* Titolo di sezione con la linea #cfcfcc a destra. */
/*
 * Titolo di sezione (Design del 7/11): h2 con la linea gialla sotto a tutta larghezza e, a destra, l'illustrazione
 * appoggiata sulla linea, che sporge sopra la riga (anche nella fascia precedente: scelta di Marco).
 * Il titolo va a capo solo se non ci sta accanto all'illustrazione (a 390px restano tutti su una riga, tranne
 * "Prima di prendere il biglietto", che va a capo prima di "il").
 */
.titolo-sezione {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--titolo-linea);
	border-bottom: 2px solid var(--giallo);
}

.titolo-sezione > h2,
.titolo-sezione > h1 {
	min-width: 0;
	padding-bottom: 1px;
}

/* Titolo di pagina (h1, Eventi FAQ Contatti): una riga, 30px su mobile e 44px su desktop. */
.titolo-sezione > h1 {
	font-size: 1.875rem;
	line-height: 1.15;
	white-space: nowrap;
}

.titolo-sezione__img {
	position: relative;
	flex: 0 0 auto;
	width: auto;
	height: 56px;
	margin-top: -33px;
	object-fit: contain;
	object-position: center bottom;
	pointer-events: none;
}

.titolo-sezione--calendario-mano .titolo-sezione__img {
	height: 53px;
	margin-top: -31px;
}

.titolo-sezione--uomo-birra .titolo-sezione__img {
	left: 4px;
}

/* Mano con la busta (Contatti): riquadro quadrato, la mano è alta e stretta; dritta, col taglio del polso sulla linea (Marco, 10/11). */
.titolo-sezione--mano-busta .titolo-sezione__img {
	width: 56px;
	height: 56px;
}

.titolo-sezione--bambina-domanda .titolo-sezione__img {
	/* Più bassa e più piccola (Marco, 11/11): su mobile non deve finire sopra il bottone d'acquisto. */
	top: 6px;
	height: 60px;
	margin-top: -44px;
}

.titolo-sezione--come-collaborare-accoglienza .titolo-sezione__img {
	left: 10px;
}

@media (max-width: 899.98px) {
	.titolo-sezione--uomo-dubbio > h2 {
		max-width: 10em;
	}
}

@media (min-width: 900px) {
	.titolo-sezione > h1 {
		font-size: 2.75rem;
	}

	.titolo-sezione__img,
	.titolo-sezione--calendario-mano .titolo-sezione__img,
	.titolo-sezione--bambina-domanda .titolo-sezione__img {
		top: 0;
		height: 75px;
		margin-top: -44px;
	}

	.titolo-sezione--mano-busta .titolo-sezione__img {
		width: 75px;
		height: 75px;
	}

	.titolo-sezione--uomo-birra .titolo-sezione__img {
		left: 5px;
	}

	.titolo-sezione--come-collaborare-accoglienza .titolo-sezione__img {
		left: 0;
	}
}

/* ---------- Illustrazioni decorative (Design del 7/11) ---------- */

/* Il <picture> delle illustrazioni solo mobile non fa da scatola: conta solo l'<img>. */
.illustrazione-picture {
	display: contents;
}

.illustrazione {
	max-width: none;
}

@media (min-width: 900px) {
	.solo-mobile {
		display: none !important;
	}
}

/* Mano con la busta accanto al titolo di newsletter e "Scrivici": arriva al bordo destro senza alzare la riga. */
.riga-busta {
	display: flex;
	align-items: center;
	gap: 20px;
}

.riga-busta > h2 {
	flex: 1 1 auto;
	min-width: 0;
}

.riga-busta__img {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	margin: -19px calc(-1 * var(--margine)) -19px 0;
	object-fit: contain;
	transform: rotate(-70deg);
}

/* ---------- Link e frecce ---------- */

/* Su mobile le frecce ⟶ e ↓ hanno il tratto più sottile (Marco, 8/11): 1 invece di 1.3; da 900px restano quelle di :root. */
@media (max-width: 899px) {
	:root {
		--freccia-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 0v12.6M1 8.6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
		--freccia-lunga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22.6M18.2 1l4.4 4-4.4 4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
	}
}

/* Grande quanto il testo su mobile, un po' più grande su desktop (Marco, 4/11). */
.freccia {
	font-size: 1em;
	font-weight: 400;
	line-height: 1;
}

@media (min-width: 900px) {
	.freccia {
		font-size: 1.2em;
	}
}

/*
 * Centrata sulla x del testo (vertical-align: middle); nei bottoni la centra il flex. Misure in em della .freccia.
 * Il disegno sta nel ::before (maschera SVG del colore del testo).
 */
.freccia--lunga,
.freccia--giu {
	position: relative;
	display: inline-block;
}

.freccia--lunga {
	width: 1.6em;
	height: 0.667em;
	vertical-align: middle;
}

/* Verso un punto della stessa pagina: alta quanto le maiuscole, appoggiata poco sotto la linea di base. */
.freccia--giu {
	width: 0.5em;
	height: 0.7em;
	vertical-align: -0.08em;
}

.freccia--lunga::before,
.freccia--giu::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: var(--freccia-lunga) center / contain no-repeat;
	mask: var(--freccia-lunga) center / contain no-repeat;
}

.freccia--giu::before {
	-webkit-mask-image: var(--freccia-giu);
	mask-image: var(--freccia-giu);
}

.link,
.link--inline,
.testo a {
	color: var(--nero);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.link:hover,
.link--inline:hover,
.testo a:hover {
	text-decoration-thickness: 2px;
}

/*
 * Sottolineatura anche sotto la freccia, come nel design (Marco, 7/11). Un elemento inline-block non riceve il text-decoration
 * del link: dopo la freccia il link stampa uno spazio di testo (::after, spazio indivisibile allargato con letter-spacing)
 * largo quanto la freccia, e la freccia, con il margine negativo, ci scorre sopra. La linea sotto la freccia è così la
 * sottolineatura vera del link: stessa altezza e stesso spessore, anche al passaggio del mouse, senza scalini.
 * 0.2545em: larghezza dello spazio indivisibile di Domine (misurata su /stage). Freccia ⟶ 1.6em e ↓ 0.5em della .freccia,
 * che su desktop è 1.2 volte il testo del link.
 */
.link > .freccia--lunga,
.link--inline > .freccia--lunga {
	margin-right: -1.6em;
}

.link > .freccia--giu,
.link--inline > .freccia--giu {
	margin-right: -0.5em;
}

.link:has(> .freccia)::after,
.link--inline:has(> .freccia)::after {
	content: "\00a0";
	letter-spacing: calc(1.6em - 0.2545em);
}

.link:has(> .freccia--giu)::after,
.link--inline:has(> .freccia--giu)::after {
	letter-spacing: calc(0.5em - 0.2545em);
}

@media (min-width: 900px) {
	.link:has(> .freccia)::after,
	.link--inline:has(> .freccia)::after {
		letter-spacing: calc(1.92em - 0.2545em);
	}

	.link:has(> .freccia--giu)::after,
	.link--inline:has(> .freccia--giu)::after {
		letter-spacing: calc(0.6em - 0.2545em);
	}
}

/* Link da solo: area di tocco di 44px senza spostare gli spazi del design. */
.link {
	display: inline-block;
	padding-block: 11px;
	margin-block: -11px;
	white-space: nowrap;
}

.link--inline {
	white-space: nowrap;
}

/* ---------- Bottoni ---------- */

.bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	position: relative;
	padding: 14px 20px;
	border: 0;
	background: var(--giallo);
	outline: 1px solid var(--nero);
	outline-offset: -1px;
	box-shadow: var(--ombra-bottone);
	color: var(--nero);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.bottone:hover {
	box-shadow: 1px 1px 0 var(--nero);
	transform: translate(2px, 2px);
}

.bottone:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 3px;
}

.bottone--cta {
	width: 100%;
}

.bottone--bianco {
	background: var(--bianco);
}

.bottone--piccolo {
	gap: 8px;
	padding: 8px 12px;
	font-size: 0.75rem;
}

/* Area di tocco di 44px anche quando il bottone è più basso. */
.bottone--piccolo::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

.bottone[aria-disabled="true"] {
	background: var(--spento-sfondo);
	outline-color: var(--linea);
	box-shadow: none;
	color: var(--spento-testo);
	cursor: default;
	transform: none;
}

/* Il foglio di Luma arriva dopo main.css e ridisegna .luma-checkout--button: qui si rimettono i valori di .bottone. */
.bottone.luma-checkout--button {
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
	background: var(--giallo);
	color: var(--nero);
	font-size: 0.875rem;
	font-weight: 600;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* "Biglietti" dell'header con il checkout di Luma (Marco, 8/11): misure di .bottone--piccolo. */
.bottone--piccolo.luma-checkout--button {
	padding: 8px 12px;
	font-size: 0.75rem;
}

.bottone.luma-checkout--button:hover {
	background: var(--giallo);
	box-shadow: 1px 1px 0 var(--nero);
	color: var(--nero);
}

/* X della sovrimpressione di Luma: focus visibile e area di tocco di 44px attorno ai 24px del bottone. */
.luma-checkout--overlay .luma-checkout--close-btn:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 2px;
}

.luma-checkout--overlay .luma-checkout--close-btn::after {
	content: "";
	position: absolute;
	inset: -10px;
}

@media (min-width: 900px) {
	.bottone,
	.bottone.luma-checkout--button {
		padding: 16px 28px;
		font-size: 1rem;
	}

	.bottone--cta {
		width: auto;
		align-self: flex-start;
	}

	.bottone--piccolo,
	.bottone--piccolo.luma-checkout--button {
		gap: 10px;
		padding: 11px 18px;
		font-size: 0.8125rem;
	}
}

/* ---------- Badge, calendario, righe con emoji ---------- */

/* Tag sull'immagine (Ultimi posti, Made): in alto a sinistra (Marco, 8/11). */
.badge-gruppo {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 6px;
}

.badge {
	display: inline-block;
	padding: 6px 12px;
	background: var(--giallo);
	outline: 1px solid var(--nero);
	outline-offset: -1px;
	box-shadow: var(--ombra-badge);
	color: var(--nero);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

@media (min-width: 900px) {
	.badge {
		padding: 8px 14px;
		font-size: 0.8125rem;
	}
}

/* Icona calendario: mese bianco su rosso, giorno sotto, bordo 1px, raggio 3px. Misura in em: segue il testo. */
.calendario {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 1.75em;
	overflow: hidden;
	border: 1px solid var(--nero);
	border-radius: 3px;
	background: var(--bianco);
	line-height: 1;
	text-align: center;
}

.calendario__mese {
	padding: 2px 0;
	background: var(--rosso);
	color: var(--bianco);
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.calendario__giorno {
	padding: 2px 0 1px;
	font-size: 0.8em;
	font-weight: 700;
}

/* Evento concluso (card e box della pagina evento): mese grigio, 5,3:1 col testo bianco, e pin desaturato. */
.is-passato .calendario__mese {
	background: var(--grigio-chiaro);
}

.is-passato .pin {
	filter: grayscale(1);
}

/* Riga della data nelle card: "▣ Gio 24 Set · 20:00 📍 Location". */
.riga-data {
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	max-width: 100%;
}

.riga-data__testo {
	min-width: 0;
}

/* Pin più vicino al nome del locale (Marco, 8/11 su mobile, 9/11 -0,3em anche su desktop): toglie parte dello spazio dopo l'emoji. */
.riga-data .pin {
	margin-right: -0.3em;
}

.riga-speaker {
	color: var(--grigio);
	text-wrap: pretty;
}

.riga-speaker strong {
	color: var(--nero);
	font-weight: 600;
	white-space: nowrap;
}

/* Liste con emoji: niente rientro, l'emoji è allineata al testo sopra. */
.lista-emoji li {
	display: flex;
	align-items: flex-start;
}

.lista-emoji li > span:first-child {
	flex: 0 0 auto;
	padding-right: 0.28em;
}

/* ---------- Tooltip del Discovery Pass ---------- */

/* A uno spazio dal testo (lo spazio è nel markup) e 2px più su della riga (Marco, 7/11). */
.tooltip {
	position: relative;
	top: -2px;
	display: inline-flex;
	align-items: center;
}

.tooltip__apri {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05em;
	height: 1.05em;
	padding: 0;
	border: 1px solid var(--nero);
	border-radius: 50%;
	background: none;
	font-size: 0.8em;
	line-height: 1;
	cursor: pointer;
}

/* Area di tocco di almeno 44px intorno alla "i" (12px + 2 × 17px su mobile). */
.tooltip__apri::after {
	content: "";
	position: absolute;
	inset: -17px;
}

/* Il fumetto si apre sopra la "i" (Marco, 7/11). */
.tooltip__testo {
	position: absolute;
	bottom: calc(100% + 8px);
	/* --tt-x lo imposta main.js per tenere il fumetto dentro lo schermo. */
	left: calc(-120px + var(--tt-x, 0px));
	z-index: 20;
	display: none;
	width: 240px;
	max-width: calc(100vw - 16px);
	padding: 12px 14px;
	/* Giallo con bordo nero, più leggibile sopra il testo (Marco, 8/11). */
	border: 1px solid var(--nero);
	background: var(--giallo);
	color: var(--nero);
	font-size: 0.875rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.tooltip:hover .tooltip__testo,
.tooltip:focus-within .tooltip__testo,
.tooltip--aperto .tooltip__testo {
	display: block;
}

@media (min-width: 900px) {
	.tooltip__testo {
		left: calc(-12px + var(--tt-x, 0px));
		width: 280px;
		font-size: 1rem;
	}
}

/* ---------- Acquisto: incluso, fasce di prezzo, CTA ---------- */

.biglietti {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.biglietti__incluso {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Il testo della voce occupa il resto della riga e va a capo, anche quando l'emoji manca ed è lui il primo span. */
.biglietti__incluso li > span.biglietti__testo {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 0;
}

.fasce-prezzo {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

/* Due sole fasce su mobile: metà larghezza ciascuna (Marco, 7/11). */
@media (max-width: 899.98px) {
	.fasce-prezzo:has(> :nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fascia-prezzo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 10px;
	border: 1px solid var(--bordo);
	background: var(--bianco);
	color: var(--nero);
}

.fascia-prezzo--spenta {
	border-color: var(--linea);
	background: var(--spento-sfondo);
	color: var(--spento-testo);
}

.fascia-prezzo__nome {
	font-family: var(--font-titoli);
	font-size: 1rem;
	line-height: 1.2;
	white-space: nowrap;
}

.fascia-prezzo__cifra {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--font-titoli);
	font-size: 2.375rem;
	line-height: 1;
}

.fascia-prezzo__euro {
	font-size: 0.62em;
}

.fascia-prezzo__nota {
	margin-top: -8px;
	color: var(--grigio);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.fascia-prezzo--spenta .fascia-prezzo__nota {
	color: var(--spento-testo);
}

/* La data della nota ("Mar 10/11") non si spezza; il testo va a capo solo se non ci sta (Marco, 7/11). */
.fascia-prezzo__data {
	white-space: nowrap;
}

@media (min-width: 900px) {
	.biglietti {
		gap: 20px;
	}

	.biglietti__incluso + .fasce-prezzo {
		margin-top: -6px;
	}

	/* Sempre 3 colonne su desktop, anche con due sole fasce (Marco, 7/11). */
	.fasce-prezzo {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.fascia-prezzo {
		padding: 12px 14px;
	}

	.fascia-prezzo__nome {
		font-size: 1.125rem;
	}

	.fascia-prezzo__cifra {
		font-size: 2.75rem;
	}

	.fascia-prezzo__nota {
		font-size: 0.875rem;
	}
}

/*
 * Evento in primo piano della Home e pagina evento, con una sola fascia di prezzo (Marco, 11/11): il prezzo a sinistra e, accanto,
 * la lista di cosa include il biglietto, sulla stessa riga, senza spazio vuoto; il bottone sotto, a tutta larghezza.
 * Mobile e desktop. Nella pagina Made e con più fasce l'acquisto resta in colonna.
 * La lista scende di quanto serve perché la sua prima riga stia sulla riga di "Standard": bordo + padding della fascia
 * più la differenza di altezza delle due righe (mobile 1 + 10 + (19,2 - 21,7) / 2, desktop 1 + 12 + (21,6 - 24,8) / 2).
 */
:is(.home .primo-piano, .box-acquisto) .biglietti:has(.biglietti__incluso):has(.fasce-prezzo > :only-child) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 16px;
}

:is(.home .primo-piano, .box-acquisto) .biglietti:has(.biglietti__incluso):has(.fasce-prezzo > :only-child) > .fasce-prezzo {
	grid-column: 1;
	grid-row: 1;
	grid-template-columns: auto;
	margin-top: 0;
}

:is(.home .primo-piano, .box-acquisto) .biglietti:has(.biglietti__incluso):has(.fasce-prezzo > :only-child) > .biglietti__incluso {
	grid-column: 2;
	grid-row: 1;
	padding-top: 10px;
}

:is(.home .primo-piano, .box-acquisto) .biglietti:has(.biglietti__incluso):has(.fasce-prezzo > :only-child) > .bottone {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	:is(.home .primo-piano, .box-acquisto) .biglietti:has(.biglietti__incluso):has(.fasce-prezzo > :only-child) {
		column-gap: 20px;
	}

	:is(.home .primo-piano, .box-acquisto) .biglietti:has(.biglietti__incluso):has(.fasce-prezzo > :only-child) > .biglietti__incluso {
		padding-top: 11px;
	}

	/* Il sommario della Home occupa tutta la colonna come titolo e bottone: stessa larghezza, niente bianchi diversi a destra. */
	.home .primo-piano__sommario {
		max-width: none;
	}
}

/* ---------- Media: foto e player video 4:3 ---------- */

.foto img,
.immagine-ombra {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--ombra-immagine);
}

/* Player: anteprima 4:3 in cornice bianca, tasto play giallo al centro. */
.player {
	min-width: 0;
	padding: 6px;
	background: var(--bianco);
	box-shadow: var(--ombra-immagine);
}

.player__schermo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nero);
}

.player__schermo img,
.player__schermo video,
.player__schermo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.media__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nero);
	text-decoration: none;
}

.media__play:focus-visible {
	outline: 3px solid var(--giallo);
	outline-offset: -6px;
}

.player__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding-left: 4px;
	border: 1px solid var(--nero);
	border-radius: 50%;
	background: var(--giallo);
}

/* Triangolo disegnato e non il carattere ▶, che iOS mostra come emoji. */
.player__play::before {
	content: "";
	width: 18px;
	height: 20px;
	background: var(--nero);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.media__play:hover .player__play {
	box-shadow: 0 0 0 3px var(--nero);
}

@media (min-width: 900px) {
	.player {
		padding: 8px;
	}

	.player__play {
		width: 72px;
		height: 72px;
	}

	.player__play::before {
		width: 21px;
		height: 24px;
	}
}

/* ---------- B01 · Header ---------- */

.testata {
	border-bottom: 1px solid var(--linea);
	background: var(--bianco);
}

.testata__interno {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	padding-block: 14px;
}

/* Area di tocco di 44px intorno al logo, senza cambiare l'altezza dell'header. */
.testata__logo {
	display: block;
	margin-block: -10px;
	margin-right: auto;
	padding-block: 10px;
}

/*
 * 30px anche su mobile (Design del 7/11). Il file ha 12px trasparenti a sinistra su 400 (3% della larghezza, 13,2% dell'altezza):
 * il margine negativo allinea il bordo visibile del logo al testo sotto (Marco, 10/11).
 */
.testata__logo img {
	width: auto;
	height: 30px;
	margin-left: -3.96px;
}

/* Su desktop il logo è alto 40px (Marco, 10/11). */
@media (min-width: 900px) {
	.testata__logo img {
		height: 40px;
		margin-left: -5.28px;
	}
}

.testata__biglietti {
	order: 2;
}

.testata__toggle {
	order: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -6px -12px -6px 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.js .testata__toggle {
	display: flex;
}

/* Tre linee disegnate e non il carattere ≡: linee da 1,5px a 0, 5,5 e 11px, su pixel interi negli schermi 2x. */
.testata__toggle-apri {
	display: block;
	width: 20px;
	height: 12.5px;
	background:
		linear-gradient(var(--nero) 0 0) top / 100% 1.5px no-repeat,
		linear-gradient(var(--nero) 0 0) center / 100% 1.5px no-repeat,
		linear-gradient(var(--nero) 0 0) bottom / 100% 1.5px no-repeat;
}

/* Menu aperto (tavola 09): × bianco in un quadrato nero da 32px, dentro l'area di tocco da 44px. */
.testata__toggle-chiudi {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--nero);
	color: var(--bianco);
	font-size: 0.875rem;
	line-height: 1;
}

/* Il quadrato sta a sinistra nell'area di tocco: resta a filo del margine e "Biglietti" non si sposta. */
.testata__toggle[aria-expanded="true"] {
	justify-content: flex-start;
}

.testata__toggle[aria-expanded="true"] .testata__toggle-apri {
	display: none;
}

.testata__toggle[aria-expanded="true"] .testata__toggle-chiudi {
	display: flex;
}

.testata__nav {
	order: 4;
	flex-basis: 100%;
	padding-top: 8px;
}

/* Senza JS il menu resta sempre visibile; con il JS si apre dal pulsante. */
.js .testata__nav {
	display: none;
}

/* Sotto l'ultima voce 24px prima del filetto dell'header (10 + i 14 dell'header). */
.js .testata--aperta .testata__nav {
	display: block;
	margin-top: 14px;
	padding-bottom: 10px;
	border-top: 1px solid var(--linea);
}

.testata__menu a {
	display: block;
	padding-block: 16px;
	border-bottom: 1px solid var(--linea);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.testata__menu a:hover,
.testata__menu .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 900px) {
	.testata__interno {
		flex-wrap: nowrap;
		gap: 28px;
		padding-block: 20px;
	}

	.testata__toggle,
	.js .testata__toggle {
		display: none;
	}

	.testata__nav,
	.js .testata__nav,
	.js .testata--aperta .testata__nav {
		display: block;
		order: 1;
		flex-basis: auto;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.testata__menu {
		display: flex;
		gap: 28px;
	}

	.testata__menu a {
		padding-block: 12px;
		border: 0;
		font-size: 0.875rem;
		font-weight: 400;
		letter-spacing: 0;
		white-space: nowrap;
	}
}

/* ---------- B02 · Newsletter e B17 · Form contatto ---------- */

.newsletter__griglia,
.newsletter__testi,
.newsletter__modulo,
.form-contatto__griglia {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/*
 * Form di contatto su mobile: tutto sulla carta bianca, qualunque sia l'altezza (anche con gli errori aperti).
 * Il verde è una striscia ancorata in fondo alla fascia, dall'immagine dello strappo: il bordo finisce al 14,53% della larghezza.
 */
@media (max-width: 899.98px) {
	.form-contatto.fascia--carta-verde {
		padding-bottom: calc(14.6vw + 44px);
		background: #f9f9f9;
	}

	.form-contatto.fascia--carta-verde::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		height: calc(14.6vw + 24px);
		background: url("../img/carta-verde-strappo.webp") center top / 100% auto no-repeat;
		pointer-events: none;
	}
}

.newsletter__nota {
	/* Nero e non grigio: sul verde della carta il #555553 del design scende sotto il contrasto AA. */
	color: var(--nero);
	font-size: 0.75rem;
	line-height: 1.4;
}

/* Spazio del modulo SureForms: senza form resta vuoto. */
.form-slot:empty {
	display: none;
}

/* Moduli SureForms (newsletter e contatto): i fogli di stile del plugin sono spenti (inc/moduli.php). */
.form-slot .srfm-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.form-slot .srfm-block,
.form-slot .srfm-block-wrap {
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* La tendina scrive l'etichetta direttamente nel legend, senza .srfm-block-label. */
.form-slot .srfm-block-label,
.form-slot .srfm-block-legend {
	display: block;
	margin-bottom: 4px;
	color: var(--nero);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
}

.form-slot .srfm-description {
	margin-bottom: 4px;
	color: var(--nero);
	font-size: 0.75rem;
	line-height: 1.4;
}

/* 16px anche su mobile: sotto questa misura iOS ingrandisce la pagina al tocco del campo. */
.form-slot .srfm-input-common {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 12px 13px;
	border: 1px solid var(--grigio);
	border-radius: 0;
	background: var(--bianco);
	color: var(--nero);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.form-slot .srfm-input-common::placeholder {
	color: var(--grigio-chiaro);
	opacity: 1;
}

.form-slot .srfm-input-common:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 2px;
}

/* Stati del plugin, che senza i suoi fogli di stile vanno nascosti e mostrati qui. */
.form-slot :is(.srfm-form-title, .srfm-error-message, .srfm-loader, .srfm-success-box, .srfm-hidden-block, .srfm-hide, .srfm-display-none, .conditional-logic, [hidden]) {
	display: none;
}

.form-slot .conditional-logic.show-element {
	display: block;
}

/* Errori e conferma su fondo bianco, leggibili qualunque sia il punto della carta: rosso (4,54:1 col bianco) e nero. */
.form-slot .srfm-error .srfm-input-common,
.form-slot .srfm-valid-email-error .srfm-input-common {
	border: 2px solid var(--rosso);
}

.form-slot :is(.srfm-error, .srfm-valid-email-error) .srfm-error-message,
.form-slot p.srfm-common-error-message:not([hidden]),
.form-slot .srfm-success-box.srfm-active {
	display: block;
	margin: 0;
	background: var(--bianco);
	color: var(--nero);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.form-slot :is(.srfm-error, .srfm-valid-email-error) .srfm-error-message {
	margin-top: 4px;
	padding: 4px 0;
	color: var(--rosso);
}

.form-slot p.srfm-common-error-message:not([hidden]) {
	flex: 0 0 100%;
	padding: 10px 0;
	color: var(--rosso);
}

.form-slot p.srfm-common-error-message svg {
	display: none;
}

.form-slot .srfm-success-box.srfm-active {
	padding: 14px 16px;
	outline: 1px solid var(--nero);
	outline-offset: -1px;
	font-size: 0.875rem;
}

.form-slot .srfm-success-box-description {
	font-weight: 400;
}

.form-slot .srfm-success-box-description a {
	color: inherit;
	text-decoration: underline;
}

/* Tendina e area di testo del modulo di contatto. Tom Select riveste la select: il suo foglio di stile resta (inc/moduli.php). */
.form-slot fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form-slot legend {
	width: 100%;
	padding: 0;
}

.form-slot textarea.srfm-input-common {
	min-height: 120px;
	resize: vertical;
}

/*
 * Casella di consenso (GDPR) e caselle singole: il plugin nasconde la casella vera (screen-reader-text) e ne disegna
 * una finta con uno span e un SVG. Qui resta la casella vera, accanto all'etichetta; tutta la riga è cliccabile e alta 44px.
 */
.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block) .srfm-block-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block) input[type="checkbox"] {
	position: static;
	flex: none;
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 0;
	padding: 0;
	clip: auto;
	clip-path: none;
	overflow: visible;
	appearance: auto;
	accent-color: var(--nero);
	cursor: pointer;
}

.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block) input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 2px;
}

.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block) .srfm-cbx {
	display: flex;
	flex: 1;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block) .srfm-cbx > .srfm-span-wrap:not(.srfm-block-label),
.form-slot .srfm-inline-svg {
	display: none;
}

.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block) .srfm-block-label {
	margin: 0;
}

.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block) .srfm-block-label a {
	color: inherit;
	text-decoration: underline;
}

.form-slot :is(.srfm-gdpr-block, .srfm-checkbox-block).srfm-error input[type="checkbox"] {
	outline: 2px solid var(--rosso);
	outline-offset: 2px;
}

.form-slot select.srfm-dropdown-common,
.form-slot .ts-wrapper.single .ts-control {
	width: 100%;
	min-height: 44px;
	padding: 12px 13px;
	border: 1px solid var(--grigio);
	border-radius: 0;
	background-color: var(--bianco);
	box-shadow: none;
	color: var(--nero);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.form-slot .ts-wrapper.single .ts-control > .item,
.form-slot .ts-wrapper.single .ts-control > input {
	color: var(--nero);
	font-size: 1rem;
}

.form-slot .ts-wrapper.single .ts-control > input::placeholder {
	color: var(--grigio-chiaro);
	opacity: 1;
}

.form-slot .ts-wrapper.focus .ts-control {
	outline: 2px solid var(--nero);
	outline-offset: 2px;
}

/*
 * Il plugin mette due X: resta solo quella per svuotare, raggiungibile da tastiera, accanto alla freccia.
 * La sua posizione nel foglio di Tom Select non è valida (max() con --ts-pr-caret a 0) e la X finirebbe sopra il testo.
 */
.form-slot .ts-wrapper.plugin-remove_button .item .remove {
	display: none;
}

.form-slot .ts-wrapper.single.plugin-clear_button .ts-control {
	padding-right: 78px;
}

.form-slot .ts-wrapper.has-items .ts-control-placeholder {
	display: none;
}

.form-slot .ts-control .ts-dropdown-icon {
	position: absolute;
	top: 50%;
	right: 13px;
	display: flex;
	transform: translateY(-50%);
	pointer-events: none;
}

.form-slot .ts-wrapper.plugin-clear_button .clear-button {
	right: 44px;
	display: flex;
}

/* Area di tocco di 44px attorno ai 16px della X. */
.form-slot .ts-wrapper.plugin-clear_button .clear-button::after {
	content: "";
	position: absolute;
	inset: -14px;
}

.form-slot .ts-wrapper.plugin-clear_button .clear-button:focus-visible {
	opacity: 1;
	outline: 2px solid var(--nero);
	outline-offset: 2px;
}

.form-slot .srfm-error .ts-wrapper.single .ts-control {
	border: 2px solid var(--rosso);
}

.form-slot .ts-wrapper .ts-dropdown {
	margin: 0;
	border: 1px solid var(--nero);
	border-radius: 0;
	box-shadow: none;
	color: var(--nero);
	font-size: 1rem;
}

.form-slot .ts-wrapper .ts-dropdown .option {
	min-height: 44px;
	padding: 12px 13px;
	line-height: 1.4;
}

.form-slot .ts-wrapper .ts-dropdown .option.active {
	background: var(--giallo);
	color: var(--nero);
}

/* Bottone come .bottone--cta. La larghezza scritta nel markup dal plugin si supera con !important. */
.form-slot .srfm-submit-container .wp-block-button {
	width: 100% !important;
}

.form-slot .srfm-submit-container button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 44px;
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
	background: var(--giallo);
	outline: 1px solid var(--nero);
	outline-offset: -1px;
	box-shadow: var(--ombra-bottone);
	color: var(--nero);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.form-slot .srfm-submit-container button:hover {
	box-shadow: 1px 1px 0 var(--nero);
	transform: translate(2px, 2px);
}

.form-slot .srfm-submit-container button:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 3px;
}

.form-slot .srfm-submit-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Stessa freccia di .freccia--lunga, misurata sul testo del bottone: 1.6em × 0.667em su mobile, × 1.2 su desktop. */
.form-slot .srfm-submit-wrap::after {
	content: "";
	flex: none;
	width: 1.6em;
	height: 0.667em;
	background: currentColor;
	-webkit-mask: var(--freccia-lunga) center / contain no-repeat;
	mask: var(--freccia-lunga) center / contain no-repeat;
}

.form-slot .srfm-loader.srfm-active {
	display: block;
	width: 1em;
	height: 1em;
	border: 2px solid var(--nero);
	border-top-color: transparent;
	border-radius: 50%;
	animation: pint-gira 0.8s linear infinite;
}

@keyframes pint-gira {
	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 900px) {
	/* Contatto: i campi larghi 50 nel form (nome, email) affiancati, gli altri a tutta riga, bottone largo quanto il testo. */
	.form-contatto .form-slot .srfm-form {
		flex-flow: row wrap;
	}

	.form-contatto .form-slot .srfm-form > .srfm-block {
		flex: 1 1 100%;
	}

	.form-contatto .form-slot .srfm-form > .srfm-block-width-50 {
		flex-basis: calc(50% - 5px);
		width: auto;
	}

	.form-contatto .form-slot .srfm-submit-container {
		flex: 1 1 100%;
	}

	.form-contatto .form-slot .srfm-submit-container .wp-block-button,
	.form-contatto .form-slot .srfm-submit-container button {
		width: auto !important;
	}

	.form-slot select.srfm-dropdown-common,
	.form-slot .ts-wrapper.single .ts-control {
		padding: 14px 15px;
	}

	/* Come in tavola: i campi di testo sopra (due affiancati, uno a tutta riga), sotto Email e bottone sulla stessa riga. */
	.newsletter .form-slot .srfm-form {
		flex-flow: row wrap;
	}

	.newsletter .form-slot .srfm-form > .srfm-block {
		flex: 1 1 100%;
	}

	.newsletter .form-slot .srfm-form > .srfm-input-block:has(+ .srfm-input-block),
	.newsletter .form-slot .srfm-form > .srfm-input-block + .srfm-input-block {
		flex-basis: calc(50% - 5px);
		width: auto;
	}

	/* L'email prende lo spazio libero; se con il bottone non ci sta, il bottone va sotto a tutta riga. */
	.newsletter .form-slot .srfm-form > .srfm-email-block {
		flex: 999 1 200px;
		width: auto;
	}

	.newsletter .form-slot .srfm-submit-container {
		flex: 1 0 auto;
		align-self: flex-end;
	}

	.form-slot .srfm-input-common {
		padding: 14px 15px;
	}

	.form-slot .srfm-submit-wrap::after {
		width: 1.92em;
		height: 0.8em;
	}

	.form-slot .srfm-submit-container button {
		padding: 15px 28px;
		font-size: 1rem;
	}

	.form-slot .srfm-success-box.srfm-active {
		font-size: 1rem;
	}
}

@media (min-width: 900px) {
	.newsletter__griglia,
	.form-contatto__griglia {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 48px;
	}

	/* Titolo e form nella colonna sinistra, tutta sulla carta bianca: il verde inizia al 48,85% della larghezza. */
	.form-contatto__griglia {
		align-items: start;
		gap: var(--pila) 64px;
	}

	.form-contatto__griglia > * {
		grid-column: 1;
	}

	.newsletter__testi {
		gap: 16px;
	}

	.newsletter__modulo {
		gap: 10px;
	}

	.newsletter__nota {
		font-size: 0.8125rem;
	}
}

/*
 * Newsletter, desktop (Marco 9/11): la mano con la busta esce da sotto il verde come il collage della Home e le mani di Made.
 * Tre livelli: `::before` la carta intera, la mano, `::after` la stessa carta con solo il verde (`carta-verde-solo-verde.webp`).
 * La fascia è bassa e la mano sta vicino al centro, quindi lo stacco cade al 49% della larghezza (calcolato sul file: 49,0-49,2%
 * da 1000 a 2560px, qualunque sia l'altezza della fascia); Marco ha scelto a occhio 50% con 4px sotto, e la mano al 30% dell'altezza.
 * left = stacco - larghezza + `--mano-sotto`. La mano è ruotata di -70°
 * come su mobile (il braccio va verso destra, sotto il verde) e supera il suo quadrato di circa 10px per lato.
 * Il testo si ferma prima della mano: larghezza massima = dallo stacco meno la mano, il margine del contenitore e 22px d'aria.
 * Nei form di contatto (Collabora e Contatti) la mano resta solo su mobile.
 */
@media (min-width: 900px) {
	.newsletter {
		--mano-larghezza: 140px;
		--mano-sotto: 4px;
		--mano-stacco: 50%;
	}

	.newsletter::before {
		z-index: -3;
	}

	.newsletter::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		width: 56.25%;
		aspect-ratio: 9 / 16;
		background: url("../img/carta-verde-solo-verde.webp") center / cover no-repeat;
		transform: translate(-50%, -50%) rotate(-90deg);
		pointer-events: none;
	}

	.newsletter .riga-busta__img {
		position: absolute;
		top: 30%;
		left: calc(var(--mano-stacco) - var(--mano-larghezza) + var(--mano-sotto));
		z-index: -2;
		width: var(--mano-larghezza);
		height: var(--mano-larghezza);
		margin: 0;
		transform: translateY(-50%) rotate(-70deg);
	}

	.newsletter__testi {
		max-width: calc(49vw - max(0px, (100vw - 1440px) / 2) - var(--margine) - var(--mano-larghezza) + var(--mano-sotto) - 22px);
	}
}

/*
 * Form di contatto (Collabora e Contatti), desktop (Marco 10/11): la mano con la busta esce da sotto il verde, come nella newsletter.
 * Stessi tre livelli. La mano sta in alto, a destra del titolo "Scrivici", sopra il primo campo: la fascia è alta 700-1000px e,
 * nelle prime righe, lo stacco cade al 52-55% della larghezza (calcolato sul file: 53,5% con la fascia di 850px, scarto fino a
 * 15px con le altre altezze). 110px di larghezza e rialzata, così non finisce dietro i campi del modulo.
 */
@media (min-width: 900px) {
	.form-contatto {
		--mano-larghezza: 110px;
		--mano-sotto: 4px;
		--mano-stacco: 53.5%;
	}

	.form-contatto::before {
		z-index: -3;
	}

	.form-contatto::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		width: 56.25%;
		aspect-ratio: 9 / 16;
		background: url("../img/carta-verde-solo-verde.webp") center / cover no-repeat;
		transform: translate(-50%, -50%) rotate(-90deg);
		pointer-events: none;
	}

	.form-contatto .riga-busta__img {
		position: absolute;
		top: 4px;
		left: calc(var(--mano-stacco) - var(--mano-larghezza) + var(--mano-sotto));
		z-index: -2;
		width: var(--mano-larghezza);
		height: var(--mano-larghezza);
		margin: 0;
		transform: rotate(-70deg);
	}
}

/*
 * Pagina Contatti (Marco, 10/11): niente carta né verde, il form sta su fondo bianco nella colonna di sinistra.
 * Dopo le regole di Collabora, che condividono la classe form-contatto.
 */
.form-contatto--semplice::before,
.form-contatto--semplice::after {
	content: none;
	display: none;
}

@media (min-width: 900px) {
	.form-contatto--semplice .form-contatto__griglia {
		grid-template-columns: minmax(0, 640px);
		justify-content: start;
	}
}

/* ---------- B07 · Barra Prossimo evento ---------- */

/* La card copre circa 150px su mobile: i link portati in vista dalla tastiera non le finiscono sotto. */
html:has(.barra-prossimo) {
	scroll-padding-bottom: calc(180px + env(safe-area-inset-bottom));
}

main:focus {
	outline: none;
}

.barra-prossimo {
	position: fixed;
	right: 9px;
	bottom: calc(4px + env(safe-area-inset-bottom));
	left: 4px;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 14px 16px;
	border: 1px solid var(--nero);
	background: var(--bianco);
	box-shadow: var(--ombra-immagine);
	color: var(--nero);
	visibility: hidden;
	transform: translateY(calc(100% + 48px + env(safe-area-inset-bottom)));
	transition: transform 180ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 180ms;
}

.barra-prossimo--visibile {
	visibility: visible;
	transform: translateY(0);
	transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.barra-prossimo,
	.barra-prossimo--visibile {
		transition: none;
	}
}

.barra-prossimo__chiudi {
	position: absolute;
	top: -10px;
	right: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nero);
	font-family: var(--font-testo);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.barra-prossimo__chiudi:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: -10px;
}

.barra-prossimo__link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.barra-prossimo__link:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 2px;
}

.barra-prossimo .calendario {
	width: 40px;
	height: 40px;
}

.barra-prossimo .calendario__mese {
	font-size: 10px;
}

.barra-prossimo .calendario__giorno {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 18px;
}

.barra-prossimo__testi {
	flex: 1;
	min-width: 0;
	margin-right: 16px;
}

.barra-prossimo__badge {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.barra-prossimo__titolo {
	display: block;
	font-family: var(--font-titoli);
	font-size: 1rem;
	line-height: 1.25;
}

.barra-prossimo .bottone:focus-visible {
	outline-offset: 4px;
}

@media (min-width: 900px) {
	html:has(.barra-prossimo) {
		scroll-padding-bottom: 24px;
	}

	.barra-prossimo {
		/* A filo del contenuto: .contenitore è largo al massimo 1440px con i margini --margine. */
		right: max(var(--margine), calc(50% - 720px + var(--margine)));
		bottom: 24px;
		left: auto;
		width: 420px;
		gap: 16px;
		padding: 18px 18px 20px;
	}

	.barra-prossimo .calendario {
		width: 44px;
		height: 50px;
	}

	.barra-prossimo .calendario__mese {
		font-size: 11px;
	}

	.barra-prossimo .calendario__giorno {
		font-size: 20px;
	}

	.barra-prossimo__titolo {
		font-size: 1.25rem;
	}

	/* Larga quanto la card, su richiesta di Marco (l'handoff la vuole larga quanto il testo). */
	.barra-prossimo .bottone--cta {
		width: 100%;
		align-self: stretch;
	}
}

/*
 * Pagina evento e Made (8/11): copia di "Acquista biglietto" fissa in basso, senza animazione. Su mobile prende il posto del bottone del box
 * appena questo, salendo, arriva alla sua altezza (il bottone del box allora si nasconde: sembra lo stesso che si aggancia).
 */
.cta-fissa {
	position: fixed;
	right: var(--margine);
	bottom: calc(6px + env(safe-area-inset-bottom));
	left: var(--margine);
	z-index: 30;
	display: flex;
	visibility: hidden;
}

.cta-fissa--visibile {
	visibility: visible;
}

/*
 * Agganciato, il bottone del box esce dal flusso (Marco, 7/11): resta meno spazio tra i prezzi e "Di cosa parliamo".
 * In quel momento è in fondo allo schermo, quindi quello che sale sta ancora sotto, fuori vista: niente salti visibili.
 */
.box-acquisto .bottone--cta.is-agganciato,
.primo-piano .bottone--cta.is-agganciato {
	display: none;
}

/*
 * Risalendo, il bottone rientra nel flusso mentre la fascia sotto, con il margine negativo di main.js, torna al suo posto con un ease:
 * per qualche istante le due si sovrappongono. Il bottone sta sopra (le illustrazioni dei titoli, come la bambina di "Di cosa parliamo",
 * sporgono sopra la fascia e finivano sopra il bottone, Marco 11/11).
 */
.box-acquisto .bottone--cta,
.primo-piano .bottone--cta {
	z-index: 1;
}

html:has(.cta-fissa) {
	scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

/* Solo su mobile (Marco, 3/11). */
@media (min-width: 900px) {
	.cta-fissa {
		display: none;
	}
}

/* Made su mobile: con la CTA fissa del laboratorio la barra Prossimo evento non compare (8/11); su desktop resta. */
@media (max-width: 899px) {
	html:has(.cta-fissa) .barra-prossimo {
		display: none;
	}
}

/* ---------- B03 · Footer ---------- */

.piede {
	padding-block: 20px;
	background: var(--bianco);
}

.piede__griglia {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.piede__invito {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.piede__etichetta {
	color: var(--grigio-chiaro);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.piede__etichetta--menu {
	display: none;
}

/*
 * Su mobile lo spazio sopra il primo link lo dà la sua area di tocco. Righe dei menu più vicine (Marco, 8/11): ogni link resta alto
 * 44px ma sale e scende di 6px sulle righe vicine (32px da una riga all'altra); il padding rimette lo spazio sopra e sotto l'elenco.
 */
.piede__liste {
	padding-block: 6px;
	border-top: 1px solid var(--linea);
}

.piede__nav {
	color: var(--grigio-chiaro);
	font-size: 0.75rem;
}

/* Note legali sotto il menu, senza sovrapporsi: le aree di tocco da 44px restano tutte cliccabili. */
.piede__nav--legale {
	position: relative;
}

.piede__menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.35em;
}

.piede__menu li {
	display: flex;
	column-gap: 0.35em;
}

/* Punto separatore decorativo: il testo alternativo vuoto lo nasconde agli screen reader. */
.piede__menu li + li::before {
	content: "·";
	content: "·" / "";
	align-self: center;
}

/* Su mobile ogni link ha un'area di tocco alta almeno 44px (righe che vanno a capo comprese): solo padding, testo invariato. */
.piede__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-block: 13px;
	margin-block: -6px;
	text-decoration: none;
}

.piede__menu a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.piede__fondo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -14px calc(-1 * var(--margine)) 0;
	padding-inline: var(--margine);
	border-top: 1px solid var(--linea);
	color: var(--grigio-chiaro);
	font-size: 0.75rem;
}

/* Icone da 20px vicine, l'ultima a filo del margine (richiesta di Marco): area di tocco 28 × 44px. */
.social {
	display: flex;
}

.social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding-left: 8px;
	color: var(--nero);
}

@media (min-width: 900px) {
	.piede {
		padding-block: 36px;
	}

	.piede__griglia {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 48px;
	}

	.piede__etichetta,
	.piede__etichetta--menu {
		display: block;
		font-size: 0.8125rem;
	}

	/* "Pintology" sulle due colonne; sotto, affiancati, menu e note legali. */
	.piede__liste {
		display: grid;
		padding-block: 0;
		grid-template-columns: max-content max-content;
		gap: 8px 56px;
		align-items: start;
		border-top: 0;
	}

	.piede__liste .piede__etichetta--menu {
		grid-column: 1 / -1;
	}

	.piede__nav {
		font-size: 0.8125rem;
	}

	.piede__menu {
		flex-direction: column;
	}

	.piede__menu li + li::before {
		content: none;
	}

	.piede__menu a {
		min-height: 0;
		padding-block: 0;
		margin-block: 0;
	}

	.piede__fondo {
		grid-column: 1 / -1;
		margin: 0;
		padding: 16px 0 0;
		font-size: 0.8125rem;
	}
}

/* ---------- B08 · Presentazione, variante Brand (apertura di Home e Made) ---------- */

.fascia-brand {
	padding: 28px 0 24px;
}

/*
 * Fascia brand su mobile (Home verde, Made viola), decisioni di Marco del 28/10/2026: la carta copre tutta la fascia,
 * senza strisce, e lo strappo cade a metà tra la fine del testo e il player.
 * - Immagini dedicate al mobile, 3:8 con lo strappo a circa il 77%: carta-verde-mob.webp, carta-viola-mob.webp.
 *   Senza player la fascia usa l'immagine intera, ancorata in basso e a copertura.
 * - Con il player lo strappo segue il player e non l'altezza del testo: la fascia mostra solo la carta bianca (parte alta
 *   dell'immagine) e il colore è un livello agganciato al player (carta-*-strappo.webp, trasparente sopra lo strappo,
 *   con il colore che continua oltre il fondo della fascia, tagliato da overflow: hidden). La linea media dello strappo
 *   cade 32px sopra il player, a metà dei 64px tra i punti chiave e il video: nel file è a 38/750 = 5.07% della larghezza
 *   dall'alto per il verde e a 42/750 = 5.6% per il viola.
 */
@media (max-width: 899.98px) {
	.fascia-brand.fascia--carta-verde,
	.fascia-brand.fascia--carta-viola {
		background-image: url("../img/carta-verde-mob.webp");
		background-position: center bottom;
		background-size: cover;
	}

	.fascia-brand.fascia--carta-viola {
		background-image: url("../img/carta-viola-mob.webp");
	}

	.fascia-brand.fascia--carta-verde:has(.fascia-brand__media),
	.fascia-brand.fascia--carta-viola:has(.fascia-brand__media) {
		/* Colore di base bianco carta e 2px in più: nessun filo di verde o viola ai bordi per arrotondamento. */
		background-color: #f9f9f9;
		background-position: center top;
		background-size: calc(100% + 2px) auto;
	}

	.fascia-brand .fascia-brand__media {
		position: relative;
	}

	.fascia-brand .fascia-brand__media::before {
		content: "";
		position: absolute;
		top: calc(-32px - 5.07vw);
		right: calc(-1 * var(--margine));
		left: calc(-1 * var(--margine));
		z-index: -1;
		height: 168vw;
		background: url("../img/carta-verde-strappo.webp") center top / 100% auto no-repeat;
		pointer-events: none;
	}

	.fascia--carta-viola .fascia-brand__media::before {
		top: calc(-32px - 5.6vw);
		background-image: url("../img/carta-viola-strappo.webp");
	}
}

/*
 * Fascia brand senza immagine né video: testo tutto sulla carta bianca. Su mobile il colore è solo una striscia in fondo,
 * dall'immagine dello strappo (il bordo finisce al 14,53% della larghezza), come nel form di contatto.
 */
@media (max-width: 899.98px) {
	.fascia-brand.fascia-brand--solo-testo {
		padding-bottom: calc(14.6vw + 44px);
		background: #f9f9f9;
	}

	.fascia-brand--solo-testo::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		height: calc(14.6vw + 12px);
		background: url("../img/carta-verde-strappo.webp") center top / 100% auto no-repeat;
		pointer-events: none;
	}

	.fascia--carta-viola.fascia-brand--solo-testo::after {
		background-image: url("../img/carta-viola-strappo.webp");
	}
}

/* Su desktop il colore inizia al 48,85% della larghezza: il testo si ferma prima. */
@media (min-width: 900px) {
	.fascia-brand--solo-testo .fascia-brand__colonna,
	.fascia-brand--foto .fascia-brand__colonna {
		max-width: min(600px, calc(48.85vw - var(--margine) - 16px));
	}
}

/*
 * Fascia brand con la foto al posto del colore (Progetto, Marco 10/11). La foto ha lo strappo della carta verde, usato come maschera:
 * - desktop: la carta intera sta sotto (bianco a sinistra), la foto copre tutta la fascia ed è mascherata da `carta-verde-maschera.webp`
 *   (il livello solo colore della carta ruotato di 90°, 1920×1080, stessa geometria di `::before`: larghezza piena, altezza 56,25%,
 *   centrata). Foto a destra e centrata in verticale (`object-position: right center`). Il testo si ferma prima dello stacco.
 * - mobile: testo sulla carta bianca e foto in fondo, larga come lo schermo, con lo strappo in alto (`carta-verde-strappo.webp` come maschera).
 */
.fascia-brand__foto {
	display: block;
	width: 100%;
	height: 80vw;
	margin-top: 16px;
	object-fit: cover;
	object-position: right center;
	-webkit-mask: url("../img/carta-verde-strappo.webp") center top / 100% auto no-repeat;
	mask: url("../img/carta-verde-strappo.webp") center top / 100% auto no-repeat;
	pointer-events: none;
}

@media (max-width: 899.98px) {
	.fascia-brand.fascia--carta-verde.fascia-brand--foto {
		padding-bottom: 0;
		background: #f9f9f9;
	}
}

@media (min-width: 900px) {
	/* Collabora: fascia alta almeno 450px (Marco 10/11), con testo e foto centrati in verticale. */
	.fascia-brand--collabora {
		display: flex;
		align-items: center;
		min-height: 450px;
	}

	.fascia-brand--foto::before {
		z-index: -2;
	}

	/*
	 * La foto occupa la parte destra della fascia (`--foto-larghezza` = frazione della larghezza, 0,6 = 60%: copre lo stacco, che cade
	 * al 49-56%), così non viene ingrandita fino a tutta la larghezza e si vede quasi tutta l'altezza della foto. La maschera resta
	 * quella dell'intera fascia: stessa larghezza (100% / frazione), allineata a destra e centrata in verticale. Frazione più piccola =
	 * foto più piccola, ma sotto circa 0,55 a 1440px la foto non coprirebbe più l'altezza della fascia e l'ingrandisce di nuovo.
	 */
	.fascia-brand__foto {
		--foto-larghezza: 0.6;
		position: absolute;
		inset: 0 0 0 auto;
		z-index: -1;
		width: calc(var(--foto-larghezza) * 100%);
		height: 100%;
		margin: 0;
		-webkit-mask: url("../img/carta-verde-maschera.webp") right center / calc(100% / var(--foto-larghezza)) auto no-repeat;
		mask: url("../img/carta-verde-maschera.webp") right center / calc(100% / var(--foto-larghezza)) auto no-repeat;
	}
}

.fascia-brand__interno,
.fascia-brand__colonna {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.fascia-brand__testi {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Linea gialla sotto l'ultima riga del titolo, leggermente inclinata. */
.fascia-brand__titolo {
	position: relative;
	isolation: isolate;
	font-size: 2.25rem;
	line-height: 1.15;
}

/* La parola sottolineata nel mini editor (U) ha la linea gialla del design, dietro al testo. */
.fascia-brand__titolo u {
	position: relative;
	text-decoration: none;
}

.fascia-brand__titolo u::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.2em;
	left: 0;
	z-index: -1;
	height: 2px;
	background: var(--giallo);
	transform: rotate(-1deg);
}

.fascia-brand__testo {
	font-size: 1rem;
	line-height: 1.5;
	text-wrap: pretty;
}

.fascia-brand__testo > p + p,
.presentazione__testo > p + p {
	margin-top: 1em;
}

.fascia-brand__punti,
.presentazione__punti {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * Decorazioni solo mobile (Design del 7/11).
 * Home: il collage nel contenitore del titolo, entra dal bordo destro dello schermo; il titolo resta sopra.
 * Made: le mani animate sono il primo figlio della fascia, sopra lo sfondo e sotto i testi.
 */
.fascia-brand__riga-titolo {
	position: relative;
	isolation: isolate;
}

.fascia-brand__collage {
	position: absolute;
	top: -14px;
	right: calc(-1 * var(--margine));
	width: 128px;
	height: 95px;
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
}

/*
 * Home, desktop (Design del 7/11, Marco 9/11): il collage esce da sotto il verde. Tre livelli nella fascia, dal fondo:
 * 1. `::before`: la carta intera (bianco a sinistra, verde a destra), come nelle altre fasce;
 * 2. il collage, con il bordo destro (la mano con il boccale) che finisce sotto il verde;
 * 3. `::after`: la stessa carta con solo il verde (`carta-verde-solo-verde.webp`, ricavata da `carta-verde.webp`: il bianco è
 *    trasparente), identica al livello 1, quindi senza differenze a vista dove sotto non c'è il collage.
 * Il testo e il player stanno sopra tutti. Lo stacco è irregolare e scende verso sinistra: il collage finisce pochi pixel
 * oltre il suo punto più a sinistra (vedi sotto). Da 900px il contenitore del titolo non è più il riferimento: l'immagine si ancora alla fascia.
 */
@media (min-width: 900px) {
	.fascia-brand__riga-titolo {
		position: static;
		isolation: auto;
	}

	.fascia-brand--collage::before {
		z-index: -3;
	}

	.fascia-brand--collage::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		width: 56.25%;
		aspect-ratio: 9 / 16;
		background: url("../img/carta-verde-solo-verde.webp") center / cover no-repeat;
		transform: translate(-50%, -50%) rotate(-90deg);
		pointer-events: none;
	}

	/*
	 * Posizione: il bordo destro del collage sta `--collage-sotto` oltre il punto più a sinistra dello stacco nelle righe
	 * del collage; il resto sporge a sinistra nel bianco. left = stacco - larghezza + parte sotto il verde.
	 * Lo stacco non è un numero fisso: la carta si ridimensiona con la larghezza e si ritaglia sull'altezza della fascia
	 * (circa 627px), quindi in percentuale slitta. Calcolato dal file `carta-verde.webp` (9/11): a 1000-1200px cade al 52%,
	 * a 1440px a 736px, a 1724px a 875px, a 1920px a 970px, a 2560px a 1283px. La retta che lo segue è 48,3% + 44px
	 * (scarto massimo 6px tra 1000 e 2560px). `--collage-sotto` è quanto ne copre il verde: pochi px, in basso un po' di più
	 * perché lo stacco scende verso sinistra. Cambiando la larghezza del collage non serve toccare lo stacco.
	 * top: il centro del collage cade a metà dell'h1 su due righe (72px di padding + 53px).
	 */
	.fascia-brand__collage {
		--collage-larghezza: 220px;
		--collage-sotto: 6px;
		--collage-stacco: calc(48.3% + 44px);
		z-index: -2;
		top: 44px;
		right: auto;
		left: calc(var(--collage-stacco) - var(--collage-larghezza) + var(--collage-sotto));
		width: var(--collage-larghezza);
		height: auto;
		object-position: left center;
	}
}

.fascia-brand__made {
	position: absolute;
	top: 16px;
	right: 0;
	z-index: 0;
	width: 80px;
	height: 80px;
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
}

.fascia-brand--made .fascia-brand__interno {
	position: relative;
	z-index: 1;
}

/*
 * Hero di Made, desktop (Marco 10/11): le mani escono da sotto il viola dello stacco, come nella fascia Made della Home
 * (stessi tre livelli: carta intera, mani, `carta-viola-solo-viola.webp` sopra). Con la hero alta circa 627px lo stacco viola
 * cade, nelle righe delle mani, a 48,7% + 42px (calcolato sul file: scarto massimo 5px da 1000 a 2560px di larghezza).
 * left = stacco - larghezza + `--mani-sotto`. top: il centro delle mani a metà dell'h1 su due righe.
 */
@media (min-width: 900px) {
	.fascia-brand--made::before {
		z-index: -3;
	}

	.fascia-brand--made::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		width: 56.25%;
		aspect-ratio: 9 / 16;
		background: url("../img/carta-viola-solo-viola.webp") center / cover no-repeat;
		transform: translate(-50%, -50%) rotate(-90deg);
		pointer-events: none;
	}

	.fascia-brand__made {
		--mani-larghezza: 160px;
		--mani-sotto: 18px;
		--mani-stacco: calc(48.7% + 42px);
		z-index: -2;
		top: 45px;
		right: auto;
		left: calc(var(--mani-stacco) - var(--mani-larghezza) + var(--mani-sotto));
		width: var(--mani-larghezza);
		height: auto;
	}
}

/* Su mobile il player sta 64px sotto i punti chiave (24 di gap + 40), come nella tavola 02. */
.fascia-brand__media {
	margin-top: 40px;
}

@media (min-width: 900px) {
	.fascia-brand {
		padding-block: 72px;
	}

	/* Testo a sinistra, player a destra in una colonna da 560px. */
	.fascia-brand__interno--media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 560px;
		align-items: center;
		gap: 120px;
	}

	.fascia-brand__colonna {
		gap: 36px;
		max-width: 600px;
	}

	.fascia-brand__testi {
		gap: 24px;
	}

	.fascia-brand__titolo {
		font-size: 2.75rem;
	}

	.fascia-brand__testo {
		font-size: 1.25rem;
	}

	.fascia-brand__punti,
	.presentazione__punti {
		gap: 24px;
	}

	.fascia-brand__media {
		margin-top: 0;
	}
}

/* ---------- B08 · Presentazione ---------- */

.presentazione__griglia,
.presentazione__testi {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.presentazione__testi > .link {
	align-self: flex-start;
}

/* "Cos'è Pintology" (Design del 7/11): su mobile il collage della Home accanto al titolo, fino al bordo destro, senza alzare la riga. */
.presentazione__riga-titolo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.presentazione__collage {
	flex: 0 0 auto;
	width: 75px;
	height: 56px;
	margin: -16px calc(-1 * var(--margine)) -16px 0;
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
}

/*
 * "Cos'è Pintology" della pagina evento, desktop (Marco 10/11): il collage esce da sotto il verde come nella hero della Home.
 * Stessi tre livelli (carta intera, collage, `carta-verde-solo-verde.webp` sopra), stesse misure e stessa posizione della hero:
 * 220px, `top: 44px`, stacco a 48,3% + 44px, 6px sotto il verde; colonne 1fr + player da 560px con gap 120px.
 * Il collage (alto ~163px) scende sul testo, quindi la colonna del testo si restringe fino a fermarsi prima del collage.
 */
@media (min-width: 900px) {
	.presentazione--collage::before {
		z-index: -3;
	}

	.presentazione--collage::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		width: 56.25%;
		aspect-ratio: 9 / 16;
		background: url("../img/carta-verde-solo-verde.webp") center / cover no-repeat;
		transform: translate(-50%, -50%) rotate(-90deg);
		pointer-events: none;
	}

	/* Come nella hero della Home (Marco 10/11): testo a sinistra, player in una colonna da 560px a destra. */
	.presentazione--collage .presentazione__griglia {
		grid-template-columns: minmax(0, 1fr) 560px;
		gap: 120px;
	}

	/* Il testo si ferma prima del collage: dallo stacco meno il collage, il margine del contenitore e 22px d'aria. */
	.presentazione--collage .presentazione__testi {
		max-width: calc(48.3vw + 44px - max(0px, (100vw - 1440px) / 2) - var(--margine) - 220px + 6px - 22px);
	}

	.presentazione__collage {
		--collage-larghezza: 220px;
		--collage-sotto: 6px;
		--collage-stacco: calc(48.3% + 44px);
		position: absolute;
		top: 44px;
		left: calc(var(--collage-stacco) - var(--collage-larghezza) + var(--collage-sotto));
		z-index: -2;
		width: var(--collage-larghezza);
		height: auto;
		margin: 0;
	}
}

/* "Pintology Made" della Home: su mobile le mani animate in alto a destra, a cavallo con la fascia sopra. */
.presentazione__made {
	position: absolute;
	top: -30px;
	right: 0;
	width: 80px;
	height: 80px;
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
}

@media (max-width: 899.98px) {
	/* La carta su mobile è solo uno sfondo: niente da tagliare, così le mani possono uscire in alto. */
	.presentazione--made {
		overflow: visible;
	}
}

/*
 * "Pintology Made" della Home, desktop (Marco 9/11): come il collage della hero, le mani escono da sotto il viola.
 * Tre livelli: `::before` la carta intera, le mani, `::after` la stessa carta con solo il viola (`carta-viola-solo-viola.webp`,
 * ricavata da `carta-viola.webp`, bianco trasparente). Il testo e la foto stanno sopra.
 * Posizione: bordo destro delle mani `--mani-sotto` oltre lo stacco (left = stacco - larghezza + sotto). Lo stacco cade circa
 * al 52% della larghezza (calcolato sul file con la fascia alta 450-570px: scarto fino a 15px sotto i 1366px e a 30px a 2560px,
 * dipende dall'altezza della fascia, cioè dalla foto). top: nella riga del titolo, sopra il primo paragrafo.
 */
@media (min-width: 900px) {
	.presentazione--made::before {
		z-index: -3;
	}

	.presentazione--made::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;
		width: 56.25%;
		aspect-ratio: 9 / 16;
		background: url("../img/carta-viola-solo-viola.webp") center / cover no-repeat;
		transform: translate(-50%, -50%) rotate(-90deg);
		pointer-events: none;
	}

	.presentazione__made {
		--mani-larghezza: 160px;
		--mani-sotto: -2px;
		--mani-stacco: 52%;
		z-index: -2;
		top: 4px;
		right: auto;
		left: calc(var(--mani-stacco) - var(--mani-larghezza) + var(--mani-sotto));
		width: var(--mani-larghezza);
		height: auto;
	}
}

@media (min-width: 900px) {
	.presentazione__griglia {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 48px;
	}

	.presentazione__griglia--solo-testo {
		grid-template-columns: minmax(0, 1fr);
	}

	.presentazione__testi {
		gap: 16px;
	}

	.presentazione__testo {
		max-width: 34em;
	}

	/* Fascia Made della Home: la foto occupa l'81% della sua colonna, allineata a destra (Design del 7/11). */
	.presentazione--made .presentazione__media {
		width: 81%;
		justify-self: end;
	}
}

/* ---------- B04 · Evento in primo piano ---------- */

.primo-piano {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.primo-piano__testa {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Il titolo dell'evento in primo piano è grande come un titolo di pagina. */
.primo-piano__titolo {
	font-size: 1.875rem;
	line-height: 1.1;
}

.primo-piano__sommario {
	text-wrap: pretty;
}

.primo-piano__media,
.box-acquisto__media,
.card-evento__media,
.scheda__media {
	position: relative;
}

.primo-piano__media img,
.box-acquisto__media img,
.card-evento__media img,
.scheda__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.scheda__media img {
	box-shadow: var(--ombra-immagine);
}

.primo-piano__link-immagine {
	display: block;
}

/* Immagine di un evento: l'ombra sta sul contenitore e prende anche la striscia di stato. */
.primo-piano__media,
.box-acquisto__media,
.card-evento__media {
	display: flex;
	flex-direction: column;
	box-shadow: var(--ombra-immagine);
}

/*
 * Evento passato: un velo spegne l'immagine, che nel pannello resta a colori.
 * Sospeso il 3/11 (Marco ci pensa): il div resta nel markup senza stile; per riattivarlo basta togliere il commento.
.card-evento__velo {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: grayscale(0.7);
	backdrop-filter: grayscale(0.7);
}
 */

/* Sold out, Evento rimandato: sotto l'immagine; nei listati su desktop sopra il suo fondo (l'altezza della card non cambia). */
.stato-striscia {
	padding: 10px 12px;
	background: var(--giallo);
	outline: 1px solid var(--nero);
	outline-offset: -1px;
	color: var(--nero);
	font-family: var(--font-titoli);
	font-size: 1rem;
	line-height: 1.25;
	text-align: center;
}

@media (min-width: 900px) {
	.stato-striscia {
		font-size: 1.25rem;
	}

	.primo-piano__media .stato-striscia,
	.card-evento__media .stato-striscia {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

@media (min-width: 900px) {
	/* Testo a sinistra, immagine nella colonna destra (stesso HTML del mobile). */
	.primo-piano {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas:
			"testa media"
			"speaker media"
			"sommario media"
			"acquisto media";
		align-items: start;
		gap: 20px 48px;
	}

	.primo-piano__testa {
		grid-area: testa;
		gap: 20px;
	}

	.primo-piano__speaker {
		grid-area: speaker;
	}

	.primo-piano__sommario {
		grid-area: sommario;
		max-width: 30em;
	}

	.primo-piano__media {
		grid-area: media;
	}

	.primo-piano__acquisto {
		grid-area: acquisto;
	}

	.primo-piano__titolo {
		font-size: 2.75rem;
	}
}

/* ---------- B09 · Griglia eventi e card ---------- */

.griglia-eventi__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

/*
 * Tra la card grande e le piccole lo stesso spazio che tra le card: 32px su mobile, 40px su desktop (con il gap della pila 14 / 24).
 * Due classi: con una sola vinceva ul[class] { margin: 0 } della base e il margine non si applicava.
 */
.griglia-eventi__lista.griglia-eventi__lista--dopo-primo-piano {
	margin-top: 18px;
}

/* Sotto l'evento in primo piano: 2 card su mobile, 3 su desktop (stesso HTML, la terza si nasconde). */
@media (max-width: 899px) {
	.griglia-eventi__lista--dopo-primo-piano > :nth-child(n + 3) {
		display: none;
	}
}

.card-evento__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	color: var(--nero);
	text-decoration: none;
}

.card-evento__link:focus-visible {
	outline-offset: 6px;
}

.card-evento__link:hover .card-evento__titolo {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.card-evento__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
}

/* La riga speaker può andare a capo: la freccia resta in basso a destra, accanto all'ultima riga. */
.card-evento__fondo {
	display: flex;
	align-items: flex-end;
	align-items: last baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.card-evento__fondo .riga-speaker {
	min-width: 0;
}

.card-evento__fondo .freccia {
	flex: none;
	margin-left: auto;
}

/* Allineata all'ultima riga: senza testo, la sua linea di base è il bordo in basso; scende per centrarsi sulla x. */
.card-evento__fondo .freccia--lunga {
	position: relative;
	top: 0.12em;
}

/* "Carica altri eventi": larga quanto la colonna su mobile, al centro su desktop (vince su .pila > .bottone). */
.griglia-eventi .pila > .griglia-eventi__carica {
	align-self: stretch;
}

.stato-vuoto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.stato-vuoto__testi {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.stato-vuoto__titolo {
	font-family: var(--font-titoli);
	font-size: 1rem;
	line-height: 1.25;
}

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

@media (min-width: 900px) {
	.griglia-eventi__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;
	}

	.griglia-eventi__lista.griglia-eventi__lista--dopo-primo-piano {
		margin-top: 16px;
	}

	.card-evento__corpo {
		gap: 12px;
	}

	.card-evento__titolo {
		font-size: 1.25rem;
	}

	.griglia-eventi .pila > .griglia-eventi__carica {
		align-self: center;
	}

	.stato-vuoto {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.stato-vuoto__titolo {
		font-size: 1.25rem;
	}
}

/* ---------- B10 · Griglia schede ---------- */

/* 24px tra le schede su mobile, 40px su desktop (32px con 4 box). */
.griglia-schede__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.scheda {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scheda__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.scheda__corpo strong {
	font-weight: 600;
}

@media (min-width: 900px) {
	.griglia-schede__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;
	}

	/* Come puoi collaborare (Collabora): 4 box in fila. */
	.griglia-schede--quattro .griglia-schede__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
	}

	.scheda__corpo {
		gap: 10px;
	}
}

/* ---------- B11 · Come funziona ---------- */

/* Mobile: foto in orizzontale, ognuna larga 3/7 del contenuto (due intere e un pezzo della terza). */
.galleria {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--margine)) -6px;
	padding: 0 var(--margine) 6px;
	overflow-x: auto;
	scroll-padding: 0 var(--margine);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.galleria::-webkit-scrollbar {
	display: none;
}

.galleria__voce {
	flex: 0 0 calc(100% * 3 / 7);
	min-width: 0;
	scroll-snap-align: start;
}

/* position: relative tiene dentro lo slider anche il testo nascosto, che altrimenti allargherebbe la pagina. */
.galleria__link {
	position: relative;
	display: block;
	cursor: zoom-in;
}

.galleria__link img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--ombra-immagine);
}

.scaletta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 720px;
}

.scaletta__riga {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: baseline;
	gap: 12px;
}

.scaletta__ora {
	min-width: 3.5em;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

@media (min-width: 900px) {
	/* Desktop: griglia a 4 colonne, anche con le 3 foto di Made (stessa misura della Home). */
	.galleria {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.scaletta {
		gap: 12px;
	}

	.scaletta__riga {
		gap: 14px;
	}

	.scaletta__ora {
		font-size: 0.8125rem;
	}

	.come-funziona > .link {
		margin-top: -7px;
	}
}

/* Come funziona e FAQ affiancati (Home e Made): 50/50 con 56px su desktop. */
.affiancate {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media (min-width: 900px) {
	.affiancate {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 56px;
	}

	.affiancate > :only-child {
		grid-column: 1 / -1;
	}
}

/* Lightbox delle foto di Come funziona. */
.lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(17, 17, 17, 0.94);
	color: var(--bianco);
}

.lightbox::backdrop {
	background: transparent;
}

.lightbox__corpo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	padding: 56px 12px;
}

.lightbox__immagine {
	max-width: 100%;
	max-height: calc(100vh - 140px);
	object-fit: contain;
}

.lightbox__contatore {
	font-size: 0.875rem;
}

.lightbox__bottone {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.6);
	color: var(--bianco);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.lightbox__bottone:focus-visible {
	outline-color: var(--bianco);
}

/* La × senza il cerchio scuro dietro (Marco, 8/11): resta l'area di tocco di 44px. */
.lightbox__chiudi {
	top: 8px;
	right: 8px;
	background: none;
}

.lightbox__prima,
.lightbox__dopo {
	top: 50%;
	transform: translateY(-50%);
}

.lightbox__prima {
	left: 4px;
}

.lightbox__dopo {
	right: 4px;
}

@media (min-width: 900px) {
	.lightbox__corpo {
		padding: 56px 72px;
	}

	.lightbox__prima {
		left: 16px;
	}

	.lightbox__dopo {
		right: 16px;
	}
}

/*
 * Telefono ruotato in orizzontale (Marco, 8/11): con 56px sopra e sotto la foto restava piccola. Margini stretti sopra e sotto,
 * frecce e × ai lati (72px), foto alta quanto lo schermo meno il contatore. dvh: l'altezza vera con le barre del browser.
 */
@media (orientation: landscape) and (max-height: 599px) {
	.lightbox {
		height: 100dvh;
	}

	.lightbox__corpo {
		gap: 4px;
		padding: 8px 72px;
	}

	.lightbox__immagine {
		max-height: calc(100vh - 44px);
		max-height: calc(100dvh - 44px);
	}

	.lightbox__contatore {
		line-height: 1.4;
	}
}

/* ---------- B16 · FAQ ---------- */

.faq__voce {
	border-bottom: 1px solid var(--linea);
}

.faq__domanda {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding-block: 13px;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

/* Nessuna linea sopra la prima domanda e nessuno spazio in più sotto il titolo. */
.faq__voce:first-child > .faq__domanda {
	position: relative;
	min-height: 31px;
	padding-top: 0;
}

/* Senza padding sopra, l'area di tocco della prima domanda sale di 13px nello spazio sotto il titolo (44px in tutto). */
.faq__voce:first-child > .faq__domanda::before {
	content: "";
	position: absolute;
	inset: -13px 0 0;
}

.faq__domanda::-webkit-details-marker {
	display: none;
}

.faq__voce[open] > .faq__domanda {
	font-weight: 600;
}

.faq__segno {
	flex: 0 0 auto;
	color: var(--grigio-chiaro);
	font-weight: 400;
}

.faq__segno::before {
	content: "+";
}

.faq__voce[open] .faq__segno::before {
	content: "−";
}

.faq__risposta {
	margin-top: -6px;
	padding-bottom: 13px;
}

@media (min-width: 900px) {
	.faq__domanda {
		padding-block: 14px;
	}

	.faq__voce:first-child > .faq__domanda {
		padding-top: 0;
	}

	.faq__risposta {
		padding-bottom: 14px;
	}
}

/* ---------- Pagina evento ---------- */

.box-acquisto {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.box-acquisto__corpo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.box-acquisto__sommario {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-wrap: pretty;
}

.box-acquisto__sommario .link {
	align-self: flex-start;
}

.dati-evento {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dati-evento__riga {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dati-evento__riga--link {
	color: var(--nero);
	text-decoration: none;
}

.dati-evento__riga--link:hover strong {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dati-evento__icona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 1.25rem;
	line-height: 1;
}

/* Nei dati dell'evento il calendario riempie il riquadro da 40/46px. */
.dati-evento__icona .calendario {
	width: 100%;
	height: 100%;
}

.dati-evento__icona .calendario__mese {
	padding: 3px 0;
	font-size: 9px;
}

.dati-evento__icona .calendario__giorno {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 0.875rem;
}

.dati-evento__testo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dati-evento__testo strong {
	font-weight: 600;
	line-height: 1.3;
}

.dati-evento__testo span:not(.nascosto) {
	color: var(--grigio);
	line-height: 1.35;
}

/* Blocchi sotto il box acquisto: uno sotto l'altro su mobile, su due colonne su desktop. */
.dettagli-evento {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* B14 e B15: due colonne 50/50 su mobile e desktop. */
.due-colonne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 16px;
}

.due-colonne--solo-testo {
	grid-template-columns: minmax(0, 1fr);
}

.dove__mappa {
	display: block;
}

.dove__mappa img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--ombra-immagine);
}

.dove__testi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.dove__nome,
.persona__nome {
	font-weight: 600;
}

/* 8px sopra e sotto il testo del link: l'area di tocco resta alta, senza allontanare le righe vicine. */
.dove__testi .link {
	margin-block: -7px;
}

/* B14 · Speaker e team: foto flottante a sinistra, il testo scorre a destra e poi sotto. */
/* Una persona sotto l'altra: 20px su mobile, 28px su desktop (tavola 06). */
.persone {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.persona {
	display: flow-root;
}

.persona__foto {
	float: left;
	width: calc(50% - 8px);
	margin: 0 16px 8px 0;
}

.persona__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--ombra-immagine);
}

.persona__ruolo {
	margin-top: 4px;
}

.persona__bio {
	margin-top: 8px;
}

.persona__link {
	margin-top: 8px;
}

.testo-lungo__corpo.e-chiuso {
	max-height: 9.5em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 40%, rgba(0, 0, 0, 0.35) 70%, transparent);
	mask-image: linear-gradient(#000 40%, rgba(0, 0, 0, 0.35) 70%, transparent);
}

/* Manifesto di Chi siamo: colonna di 38em, il titolo con la linea resta largo quanto la pagina. */
.testo-lungo--stretto .testo-lungo__corpo {
	max-width: 38em;
}

.testo-lungo__apri {
	align-self: flex-start;
	min-height: 44px;
	margin-block: -11px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nero);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/*
 * "Di cosa parliamo" della pagina evento (Marco, 8/11): "Continua a leggere" più vicino al testo sfumato, 6px su mobile e 10px su desktop
 * invece del gap della colonna (14 / 24). Ai -11px dell'area di tocco si aggiungono -8 / -14px; gli altri spazi della sezione restano.
 */
#descrizione .testo-lungo__apri {
	margin-top: -19px;
}

@media (min-width: 900px) {
	#descrizione .testo-lungo__apri {
		margin-top: -25px;
	}
}

@media (min-width: 900px) {
	.box-acquisto {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 48px;
	}

	.box-acquisto__corpo {
		gap: 20px;
	}

	.box-acquisto__sommario {
		gap: 8px;
	}

	.dati-evento__icona {
		width: 46px;
		height: 46px;
		font-size: 1.375rem;
	}

	.dati-evento__icona .calendario__giorno {
		font-size: 1rem;
	}

	.dettagli-evento {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 56px 48px;
	}

	.due-colonne {
		gap: 24px;
	}

	.persona__foto {
		width: calc(50% - 12px);
		margin: 0 24px 8px 0;
	}

	.persone {
		gap: 28px;
	}

	.persone-blocco--team .persone {
		max-width: 656px;
	}
}

/* ---------- B18 · Partner ---------- */

/* Titolo e testo della variante completa: 14px su mobile (come la pila), 12px su desktop. */
.partner__testi {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.partner__loghi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.partner__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	min-height: 44px;
	padding: 6px 8px;
	border: 1px solid var(--bordo);
	background: var(--bianco);
}

.partner__logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* Gli SVG non hanno misure: riempiono il riquadro restando proporzionati. */
.partner__logo .logo-svg {
	width: 100%;
	height: 100%;
}

.partner--evento {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.partner__etichetta {
	color: var(--grigio);
}

.partner--evento .partner__loghi {
	display: flex;
	flex-wrap: wrap;
}

.partner--evento .partner__logo {
	width: 112px;
	height: 44px;
}

@media (min-width: 900px) {
	.partner__loghi {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}

	.partner__logo {
		width: 190px;
		height: 72px;
	}

	.partner__testi {
		gap: 12px;
	}

	.partner__testo {
		max-width: 50%;
	}

	.partner--evento .partner__loghi {
		gap: 8px;
	}

	.partner--evento .partner__logo {
		width: 140px;
	}
}

/* ---------- Titolo di pagina (Eventi, FAQ, Contatti): h1 come i titoli di sezione, con la frase sotto ---------- */

.titolo-pagina {
	padding-top: var(--fascia);
}

.titolo-pagina__colonna {
	display: flex;
	flex-direction: column;
	gap: var(--pila);
}

.titolo-pagina__intro {
	max-width: 34em;
	margin: 0;
	color: var(--nero);
	font-size: 0.875rem;
	line-height: 1.55;
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.titolo-pagina__intro {
		font-size: 1rem;
	}
}

/* ---------- Testo delle pagine generiche e delle risposte ---------- */

.testo > * + * {
	margin-top: 1em;
}

.testo h2,
.testo h3 {
	margin-top: 1.6em;
}

.testo ul,
.testo ol {
	padding-left: 1.2em;
}

.contenitore--stretto > h1 {
	margin-bottom: var(--spazio);
}

/* ---------- Pagina FAQ ---------- */

.pagina-faq {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.pagina-faq .faq {
	gap: 10px;
}

.pagina-faq__contatto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.pagina-faq__contatto-titolo {
	font-family: var(--font-titoli);
	font-size: 1rem;
	line-height: 1.25;
}

.pagina-faq :target {
	scroll-margin-top: 16px;
}

@media (min-width: 900px) {
	.pagina-faq {
		gap: 40px;
	}

	.pagina-faq .faq {
		gap: 12px;
	}

	.pagina-faq__contatto-titolo {
		font-size: 1.25rem;
	}
}

.form-contatto:target,
.form-contatto :target {
	scroll-margin-top: 16px;
}