/* ==========================================================================
   Artastik – main.css
   CSS puro con custom properties, mobile-first. Breakpoint principale: 768px.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Font (self-hosted, licenza SIL OFL 1.1: vedi assets/fonts/OFL.txt)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans-var-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}


/* --------------------------------------------------------------------------
   1. Token del design system
   -------------------------------------------------------------------------- */

:root {
	/* Colori */
	--c-accent: #0C08C8;        /* blu Artastik: pulsanti, link, numeri, badge, pannello CTA */
	--c-accent-hover: #06048A;
	--c-bg: #F5F5F5;            /* fondo pagina */
	--c-surface: #FFFFFF;       /* card, nav, pannelli */
	--c-ink: #141414;           /* testo */
	--c-ink-2: #3A3A3A;         /* testo secondario */
	--c-ink-3: #555555;         /* didascalie */
	--c-muted: #6B6B6B;
	--c-line: #DCDCDC;
	--c-dark: #1E1E1E;          /* footer */
	--c-lavender: #ECEBFB;      /* riquadri icone, avvisi, voce attiva */
	--c-blob-blue: #9FBCE6;     /* sfumature hero */
	--c-blob-pink: #E3A6DA;
	--c-blob-lime: #DCE39B;     /* anche spunte e hover nel footer */
	--c-panel-soft: #F3F2F6;    /* fondo del pannello sfumato tenue (3 passi) */

	/* Raggi */
	--radius-pill: 999px;
	--radius-card: 20px;
	--radius-panel: 28px;
	--radius-panel-lg: 32px;    /* pannelli grandi e pannello CTA */
	--radius-field: 12px;       /* campi del form */
	--radius-nav: 30px;         /* nav: in armonia con il pulsante Candidati */

	/* Font: unica variabile da cambiare per sostituirlo */
	--font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--ls-title: -0.02em;
	--ls-title-tight: -0.03em;

	/* Layout */
	--container-max: 1240px;
	--container-pad: 16px;      /* 24px da 768px in su */
	--touch-min: 44px;
	--field-min-height: 50px;
	/* Rientro dei contenuti allineato alla lista dei 3 passi (desktop):
	   margine sezione 24px + padding del pannello 5%. Usato dalle sezioni senza pannello. */
	--rientro-pannello: calc(24px + (100% - 48px) * 0.05);

	/* Sfondo hero */
	--blob-blur: 110px;
	--blob-opacity: 0.85;
}

@media (min-width: 768px) {
	:root {
		--container-pad: 24px;
	}
}


/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */

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

/* Scorrimento morbido verso le ancore (es. sezioni della home dal footer);
   con prefers-reduced-motion torna immediato (sezione 18). */
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* L'attributo hidden vince sempre (img, .btn ecc. hanno un display proprio) */
[hidden] {
	display: none !important;
}

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

a {
	color: var(--c-accent);
}

a:hover {
	color: var(--c-accent-hover);
}

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

.skip-link {
	position: absolute;
	left: var(--container-pad);
	top: -100px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--c-surface);
	border-radius: var(--radius-pill);
}

.skip-link:focus {
	top: 12px;
}


/* --------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */

/* Etichetta blu in maiuscolo sopra i titoli di sezione ("Come funziona", "FAQ"…) */
.etichetta {
	margin: 0;
	color: var(--c-accent);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.etichetta {
		font-size: 14px;
	}
}

h1,
h2,
h3 {
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-title);
	line-height: 1.1;
	text-wrap: balance; /* righe bilanciate, niente parola sola a capo */
}


/* --------------------------------------------------------------------------
   4. Layout (contenitore, griglie, sezioni)
   -------------------------------------------------------------------------- */

/* Contenitore di pagina. Niente overflow: hidden, bloccherebbe la nav sticky
   (le macchie dello sfondo le taglia già .sfondo-hero). */
.pagina {
	position: relative;
}

.site-main {
	position: relative;
	z-index: 1;
}

/* Sezioni a tutta larghezza: nessun max-width, solo i margini laterali.
   Le larghezze massime restano solo sui blocchi di testo (leggibilità). */
.container {
	width: 100%;
	padding-inline: var(--container-pad);
}


/* --------------------------------------------------------------------------
   5. Pulsanti e link
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-min);
	padding: 0 22px;
	border: 0; /* i <button> hanno un bordo grigio predefinito del browser */
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
	background: var(--c-accent);
	color: #FFFFFF;
}

.btn--primary:hover {
	background: var(--c-accent-hover);
	color: #FFFFFF;
}

.btn--chiaro {
	background: rgba(255, 255, 255, 0.85);
	color: var(--c-ink);
}

.btn--chiaro:hover {
	background: var(--c-surface);
	color: var(--c-ink);
}

/* Bianco pieno, testo scuro (es. "Scrivici" nelle FAQ) */
.btn--bianco {
	min-height: 48px;
	padding: 0 24px;
	background: var(--c-surface);
	color: var(--c-ink);
	font-size: 16px;
}

.btn--bianco:hover {
	background: var(--c-lavender);
	color: var(--c-accent);
}

/* Contorno grigio, fondo bianco (es. "← Indietro") */
.btn--contorno {
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	color: var(--c-ink);
}

.btn--contorno:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* Grigio chiaro (es. "Seguici su Instagram") */
.btn--grigio {
	background: var(--c-bg);
	color: var(--c-ink);
}

.btn--grigio:hover {
	background: var(--c-lavender);
	color: var(--c-accent);
}

/* Candidati nella nav */
.btn--nav {
	padding: 0 16px;
	font-size: 14px;
}

/* Pulsanti della hero: a tutta larghezza su mobile */
.btn--grande {
	width: 100%;
	min-height: 54px;
	font-size: 16px;
}

.btn--primary.btn--grande {
	font-weight: var(--fw-semibold);
}

.btn--blocco {
	width: 100%;
	min-height: 52px;
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

@media (min-width: 768px) {
	.btn--grande {
		width: auto;
		padding: 0 28px;
	}

	.btn--primary.btn--grande {
		padding: 0 32px;
		font-weight: var(--fw-medium);
	}
}

@media (min-width: 960px) {
	.btn--nav {
		padding: 0 22px;
		font-size: 15px;
	}
}


/* --------------------------------------------------------------------------
   6. Nav (desktop e mobile)
   -------------------------------------------------------------------------- */

/* La nav resta sospesa in alto scorrendo la pagina (pillola fissa, come detector.io).
   sticky invece di fixed: stesso effetto, ma l'header resta nel flusso e la hero
   non va spostata sotto la nav a mano. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 12px 12px 0;
}

/* Mobile, scorrendo (classe da main.js): velatura del colore di fondo sopra la nav, così i
   contenuti che passano nello spazio sopra la pillola (es. il pulsante blu della hero) non spuntano.
   Sale anche sotto la barra di stato di Safari. */
@media (max-width: 767px) {
	.site-header::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50%;
		height: 160px;
		background: linear-gradient(to bottom, var(--c-bg) calc(100% - 18px), rgba(245, 245, 245, 0));
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
		z-index: -1; /* dietro la pillola della nav (la testata ha già il suo z-index) */
	}

	.site-header.is-scorrendo::before {
		opacity: 1;
	}

	/* Niente vetro smerigliato su mobile: sfocare in tempo reale ciò che scorre sotto
	   (carosello, macchie) pesa troppo su Safari iOS. Fondo quasi pieno, aspetto uguale. */
	.site-header .nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(255, 255, 255, 0.97);
	}
}

/* Con la barra di amministrazione di WordPress (fissa da 601px in su) */
@media (min-width: 601px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 8px 8px 8px 16px;
	border-radius: var(--radius-nav);
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 6px 20px rgba(20, 20, 40, 0.06);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.nav__logo {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	color: var(--c-accent);
	text-decoration: none;
}

.nav__logo-nome {
	font-size: 26px;
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-title);
	line-height: 1;
}

.nav__beta {
	margin-bottom: 3px;
	padding: 1px 4px;
	border: 1px solid currentColor;
	border-radius: 5px;
	font-size: 9px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
}

/* Voci centrali: solo desktop */
.nav__menu {
	display: none;
}

.nav__azioni {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--touch-min);
	height: var(--touch-min);
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--c-accent);
	cursor: pointer;
}

.nav__icona-chiudi,
.nav__toggle[aria-expanded="true"] .nav__icona-apri {
	display: none;
}

.nav__toggle[aria-expanded="true"] .nav__icona-chiudi {
	display: block;
}

/* Selettore IT / EN */
.lingue {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: var(--fw-medium);
}

.lingue li + li::before {
	content: "/";
	color: var(--c-line);
}

.lingue a {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	padding: 0 6px;
	color: var(--c-ink-3);
	text-decoration: none;
}

.lingue a:hover,
.lingue a[aria-current="true"] {
	color: var(--c-accent);
}

.lingue a[aria-current="true"] {
	font-weight: var(--fw-semibold);
}

/* Nella barra mobile il selettore sta nel pannello */
.nav .lingue {
	display: none;
}

/* Pannello mobile */
.menu-mobile {
	max-width: var(--container-max);
	max-height: calc(100dvh - 96px);
	overflow-y: auto;
	margin: 8px auto 0;
	padding: 12px;
	background: var(--c-surface);
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(20, 20, 40, 0.14);
}

.menu-mobile[hidden] {
	display: none;
}

.menu-mobile__voci {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-mobile__voci a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 0 12px;
	border-radius: 12px;
	color: var(--c-ink);
	font-size: 20px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}

/* Chevron › */
.menu-mobile__voci a::after {
	content: "";
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.menu-mobile__voci .current-menu-item > a {
	background: var(--c-lavender);
	color: var(--c-accent);
	font-weight: var(--fw-semibold);
}

.menu-mobile__voci .current-menu-item > a::after {
	content: none;
}

.menu-mobile__fondo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
	padding: 16px 4px 4px;
	border-top: 1px solid #EDEDED;
}

.menu-mobile__nota {
	color: var(--c-muted);
	font-size: 13px;
	text-align: center;
}

.lingue--mobile {
	justify-content: center;
	font-size: 15px;
}

@media (min-width: 960px) {
	.site-header {
		padding: 20px 4.7% 0;
	}

	.nav {
		gap: 16px;
		padding: 8px 12px 8px 32px;
	}

	.nav__logo {
		gap: 6px;
	}

	.nav__logo-nome {
		font-size: 34px;
	}

	.nav__beta {
		margin-bottom: 4px;
		padding: 1px 5px;
		border-radius: 6px;
		font-size: 10px;
	}

	.nav__menu {
		display: flex;
		gap: 24px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 15px;
		font-weight: var(--fw-medium);
	}

	.nav__menu a {
		display: inline-flex;
		align-items: center;
		min-height: var(--touch-min);
		color: var(--c-ink);
		text-decoration: none;
	}

	.nav__menu a:hover,
	.nav__menu .current-menu-item > a {
		color: var(--c-accent);
	}

	.nav__azioni {
		gap: 12px;
	}

	.nav .lingue {
		display: flex;
	}

	.nav__toggle,
	.menu-mobile {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	z-index: 1;
	padding: 0 20px 28px;
	background: var(--c-dark);
	color: #FFFFFF;
}

.site-footer__interno {
	margin: 0 auto;
}

.site-footer a {
	color: #FFFFFF;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--c-blob-lime);
}

/* "Preferenze cookie": un pulsante (apre il banner) con l'aspetto dei link del footer */
.site-footer__cookie {
	padding: 0;
	border: 0;
	background: none;
	color: #FFFFFF;
	font: inherit;
	cursor: pointer;
}

.site-footer__cookie:hover {
	color: var(--c-blob-lime);
}

/* Sul fondo scuro il focus è bianco */
.site-footer :focus-visible {
	outline-color: #FFFFFF;
}

/* Newsletter */
.newsletter {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 36px 0 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

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

.newsletter__titolo {
	margin: 0;
	font-size: 18px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
}

.newsletter__testo {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
}

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

.newsletter__email {
	min-width: 0;
	min-height: 50px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
	font: inherit;
	font-size: 16px; /* 16px: niente zoom automatico su iOS */
}

.newsletter__email::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.newsletter__invia {
	min-height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius-pill);
	background: #FFFFFF;
	color: var(--c-ink);
	font: inherit;
	font-size: 15px;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.newsletter__invia:hover {
	background: var(--c-blob-lime);
}

.newsletter__messaggio {
	margin: 0;
	color: var(--c-blob-lime);
	font-size: 14px;
}

.newsletter__messaggio[hidden] {
	display: none;
}

.newsletter__messaggio--errore {
	color: var(--c-blob-pink);
}

.newsletter__invia[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.newsletter__privacy {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
}

.newsletter__privacy a {
	color: rgba(255, 255, 255, 0.8);
}

.newsletter__privacy a:hover {
	color: var(--c-blob-lime);
}

.newsletter__trappola {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Logo, tagline e colonne */
.site-footer__principale {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 28px 0;
}

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

.site-footer__logo {
	display: flex;
	align-items: flex-end;
	gap: 5px;
}

.site-footer__logo .nav__logo-nome {
	font-size: 28px;
}

.site-footer__logo .nav__beta {
	border-color: rgba(255, 255, 255, 0.6);
}

.site-footer__tagline {
	max-width: 360px;
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 15px;
	line-height: 1.6;
}

.site-footer__colonne {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}

.site-footer__colonna {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
}

.site-footer__titolo {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

.site-footer__voci {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-wrap: anywhere; /* email lunghe */
}

/* Riga finale: © e link legali */
.site-footer__fondo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 16px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
}

.site-footer__legale {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.site-footer {
		padding: 0 24px 32px;
	}

	.site-footer__interno {
		display: flex;
		flex-direction: column;
		gap: 56px;
	}

	.newsletter {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 20px 40px;
		padding: 48px 0;
	}

	.newsletter__titolo {
		font-size: 20px;
	}

	.newsletter__testo {
		font-size: 15px;
	}

	.newsletter__campo {
		flex: 0 1 460px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		padding: 6px;
		border-radius: var(--radius-pill);
		background: rgba(255, 255, 255, 0.08);
	}

	.newsletter__email {
		flex: 1 1 200px;
		min-height: 44px;
		background: transparent;
		font-size: 15px;
	}

	.newsletter__invia {
		flex: 0 0 auto;
		min-height: 44px;
		font-weight: var(--fw-medium);
	}

	.newsletter__messaggio,
	.newsletter__privacy {
		flex-basis: 100%;
		text-align: right;
	}

	/* Messaggio e nota privacy più vicini al campo */
	.newsletter__messaggio,
	.newsletter__privacy {
		margin-top: -12px;
	}

	.site-footer__principale {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 48px;
		padding: 0;
	}

	.site-footer__marchio {
		flex: 1 1 280px;
		max-width: 360px;
	}

	.site-footer__logo {
		gap: 6px;
	}

	.site-footer__logo .nav__logo-nome {
		font-size: 34px;
	}

	.site-footer__colonne {
		flex: 2 1 480px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}

	.site-footer__titolo {
		font-size: 13px;
	}

	.site-footer__fondo {
		gap: 16px;
		padding-top: 24px;
		font-size: 13px;
	}

	.site-footer__legale {
		gap: 20px;
	}
}


/* --------------------------------------------------------------------------
   8. Sfondi sfumati (hero, pannello 3 passi)
   -------------------------------------------------------------------------- */

/* Pannello sfumato tenue (3 passi): i tre colori della hero a bassa opacità */
.passi__pannello {
	background:
		radial-gradient(70% 45% at 0% 0%, rgba(159, 188, 230, 0.75) 0%, rgba(159, 188, 230, 0) 70%),
		radial-gradient(80% 40% at 50% 100%, rgba(227, 166, 218, 0.6) 0%, rgba(227, 166, 218, 0) 70%),
		radial-gradient(60% 40% at 100% 20%, rgba(220, 227, 155, 0.7) 0%, rgba(220, 227, 155, 0) 70%),
		var(--c-panel-soft);
}

@media (min-width: 768px) {
	.passi__pannello {
		background:
			radial-gradient(55% 75% at 0% 0%, rgba(159, 188, 230, 0.75) 0%, rgba(159, 188, 230, 0) 70%),
			radial-gradient(50% 70% at 55% 100%, rgba(227, 166, 218, 0.6) 0%, rgba(227, 166, 218, 0) 70%),
			radial-gradient(45% 70% at 100% 15%, rgba(220, 227, 155, 0.7) 0%, rgba(220, 227, 155, 0) 70%),
			var(--c-panel-soft);
	}
}

.sfondo-hero {
	position: absolute;
	inset: 0 0 auto;
	height: 760px;
	overflow: hidden;
	pointer-events: none;
}

.sfondo-hero__macchia {
	position: absolute;
	border-radius: 50%;
	opacity: var(--blob-opacity);
	filter: blur(70px);
	/* Movimento lento: si anima solo transform (leggero), mai il blur. */
	animation: macchia-deriva 14s ease-in-out infinite alternate;
	will-change: transform;
}

.sfondo-hero__macchia--rosa {
	animation-duration: 17s;
	animation-delay: -6s;
	animation-direction: alternate-reverse;
}

.sfondo-hero__macchia--lime {
	animation-duration: 20s;
	animation-delay: -11s;
}

@keyframes macchia-deriva {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	33% {
		transform: translate3d(16%, 10%, 0) scale(1.18);
	}
	66% {
		transform: translate3d(-10%, 14%, 0) scale(0.92);
	}
	100% {
		transform: translate3d(-14%, -8%, 0) scale(1.1);
	}
}

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

/* Mobile: macchie ferme. Animare elementi così sfocati, insieme al carosello, supera la memoria
   grafica di Safari iOS (pagina che diventa bianca, carosello che sparisce durante lo scroll). */
@media (max-width: 767px) {
	.sfondo-hero__macchia {
		animation: none;
		will-change: auto;
	}
}

.sfondo-hero__macchia--blu {
	left: -30%;
	top: 90px;
	width: 90%;
	height: 340px;
	background: var(--c-blob-blue);
}

.sfondo-hero__macchia--rosa {
	left: 10%;
	top: 300px;
	width: 90%;
	height: 320px;
	background: var(--c-blob-pink);
}

.sfondo-hero__macchia--lime {
	right: -35%;
	top: 60px;
	width: 80%;
	height: 300px;
	background: var(--c-blob-lime);
}

@media (min-width: 768px) {
	.sfondo-hero {
		height: 900px;
	}

	.sfondo-hero__macchia {
		filter: blur(var(--blob-blur));
	}

	.sfondo-hero__macchia--blu {
		left: -6%;
		top: 120px;
		width: 46%;
		height: 560px;
	}

	.sfondo-hero__macchia--rosa {
		left: 22%;
		top: 300px;
		width: 56%;
		height: 520px;
	}

	.sfondo-hero__macchia--lime {
		right: -8%;
		top: 90px;
		width: 42%;
		height: 520px;
	}
}


/* --------------------------------------------------------------------------
   9. Card (opera, artista, "Il tuo posto è qui")
   -------------------------------------------------------------------------- */

/* Card opera (anteprima: l'immagine si può ritagliare) */
.card-opera,
.card-libera {
	flex: 0 0 auto;
	width: 170px;
	text-align: left;
	transition: transform 0.35s ease;
}

.card-opera__link,
.card-libera__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--c-ink);
	text-decoration: none;
}

.card-opera__immagine {
	width: 100%;
	height: 220px;
	border-radius: 16px;
	object-fit: cover;
	background: var(--c-surface);
	box-shadow: 0 10px 24px rgba(20, 20, 40, 0.10);
	transition: box-shadow 0.35s ease;
}

.card-opera__didascalia {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 0 2px;
}

.card-opera__artista {
	font-size: 14px;
	font-weight: var(--fw-semibold);
}

.card-opera__titolo {
	color: var(--c-ink-3);
	font-size: 12px;
}

/* Card "Il tuo posto è qui" */
.card-libera__riquadro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 220px;
	padding: 12px;
	border: 2px dashed var(--c-accent);
	border-radius: 16px;
	background: var(--c-surface);
	color: var(--c-accent);
	text-align: center;
	box-shadow: 0 10px 24px rgba(20, 20, 40, 0.08);
	transition: box-shadow 0.35s ease;
}

.card-libera__piu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-accent);
	color: #FFFFFF;
}

.card-libera__piu svg {
	width: 18px;
	height: 18px;
}

.card-libera__titolo {
	color: var(--c-ink);
	font-size: 15px;
	font-weight: var(--fw-semibold);
}

.card-libera__azione {
	font-size: 13px;
	font-weight: var(--fw-medium);
}

/* Hover: la card sale e l'ombra cresce. Solo con il mouse: sui touch il tocco lascerebbe
   la card "alzata" (iOS); lì il carosello scorre e basta. */
@media (hover: hover) and (pointer: fine) {
	.card-opera:hover,
	.card-libera:hover {
		transform: translateY(-8px);
	}

	.card-opera:hover .card-opera__immagine,
	.card-libera:hover .card-libera__riquadro {
		box-shadow: 0 24px 48px rgba(20, 20, 40, 0.16);
	}
}

/* Niente riquadro grigio al tocco sulle card (Safari iOS) */
.card-opera a,
.card-libera a,
.card-opera__link {
	-webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
	/* Card da 330px (prova) */
	.card-opera,
	.card-libera {
		width: 330px;
	}

	.card-opera__link,
	.card-libera__link {
		gap: 14px;
	}

	.card-opera__immagine {
		height: auto;
		aspect-ratio: 3 / 4;
		border-radius: 18px;
		box-shadow: 0 14px 34px rgba(20, 20, 40, 0.10);
	}

	.card-opera__didascalia {
		gap: 2px;
	}

	.card-opera__artista {
		font-size: 15px;
	}

	.card-opera__titolo {
		font-size: 13px;
	}

	.card-libera__riquadro {
		gap: 14px;
		height: auto;
		aspect-ratio: 3 / 4;
		padding: 24px;
		border-radius: 18px;
		box-shadow: 0 14px 34px rgba(20, 20, 40, 0.08);
	}

	.card-libera__piu {
		width: 52px;
		height: 52px;
	}

	.card-libera__piu svg {
		width: 22px;
		height: 22px;
	}

	.card-libera__titolo {
		font-size: 18px;
	}

	.card-libera__azione {
		font-size: 14px;
	}
}


/* Card artista (archivio): mosaico di 3 opere ritagliate (anteprima) + avatar, nome, città · tecniche */
.card-artista {
	min-width: 0;
	transition: transform 0.3s ease;
}

.card-artista__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--c-ink);
	text-decoration: none;
}

.card-artista__link:hover {
	color: var(--c-ink);
}

.card-artista__mosaico {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 150px 150px;
	gap: 8px;
}

.card-artista__opera {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	object-fit: cover;
	background: var(--c-surface);
	box-shadow: 0 12px 30px rgba(20, 20, 40, 0.08);
	transition: box-shadow 0.3s ease;
}

.card-artista__opera:first-child {
	grid-row: span 2;
	border-radius: 18px;
}

/* Meno di 3 opere: due metà affiancate o una sola immagine */
.card-artista__mosaico--2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 308px;
}

.card-artista__mosaico--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 308px;
}

.card-artista__mosaico--2 .card-artista__opera,
.card-artista__mosaico--1 .card-artista__opera {
	grid-row: auto;
	border-radius: 18px;
}

.card-artista__info {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 2px;
}

.card-artista__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid #E6E6E6;
	border-radius: 50%;
	background: var(--c-surface);
	object-fit: cover;
}

.card-artista__avatar--vuoto {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--c-lavender);
	color: var(--c-accent);
	font-size: 17px;
	font-weight: var(--fw-medium);
}

.card-artista__testi {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.card-artista__nome {
	font-size: 17px;
	font-weight: var(--fw-semibold);
}

.card-artista__dettagli {
	overflow: hidden;
	color: var(--c-ink-3);
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.card-artista__freccia {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover: la card sale, l'ombra cresce, la freccia diventa blu */
.card-artista:hover {
	transform: translateY(-6px);
}

.card-artista:hover .card-artista__opera {
	box-shadow: 0 20px 40px rgba(20, 20, 40, 0.14);
}

.card-artista:hover .card-artista__freccia {
	background: var(--c-accent);
	color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   10. Contatore fondatori
   -------------------------------------------------------------------------- */

.contatore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.contatore__testo {
	margin: 0;
	font-size: 14px;
	text-align: center;
}

.contatore__testo strong {
	font-weight: var(--fw-semibold);
}

.contatore__barra {
	width: 100%;
	max-width: 420px;
	height: 8px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: #DEDEDE;
}

/* Larghezza = --riempimento, impostata dal template (minimo 1%) */
.contatore__riempimento {
	display: block;
	width: var(--riempimento, 1%);
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
}

@media (min-width: 768px) {
	.contatore {
		gap: 12px;
	}

	.contatore__testo {
		font-size: 16px;
	}
}


/* --------------------------------------------------------------------------
   11. Accordion FAQ
   -------------------------------------------------------------------------- */

.faq-accordion {
	display: flex;
	flex-direction: column;
}

.faq-voce {
	border-bottom: 1px solid var(--c-line);
}

.faq-voce__titolo {
	margin: 0;
	font-size: inherit;
	letter-spacing: 0;
}

.faq-voce__domanda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	padding: 16px 0;
	border: 0;
	background: none;
	color: var(--c-ink);
	font: inherit;
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

/* Cerchio con + / −: bianco da chiuso, blu da aperto */
.faq-voce__icona {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-ink);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-voce__icona::before,
.faq-voce__icona::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.6px;
	border-radius: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.faq-voce__icona::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq-voce__domanda[aria-expanded="true"] .faq-voce__icona {
	background: var(--c-accent);
	color: #FFFFFF;
}

.faq-voce__domanda[aria-expanded="true"] .faq-voce__icona::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.faq-voce__domanda:hover .faq-voce__icona {
	background: var(--c-lavender);
	color: var(--c-accent);
}

.faq-voce__domanda[aria-expanded="true"]:hover .faq-voce__icona {
	background: var(--c-accent-hover);
	color: #FFFFFF;
}

.faq-voce__risposta {
	padding: 0 36px 18px 0;
	color: var(--c-ink-2);
	font-size: 15px;
	line-height: 1.6;
}

.faq-voce__risposta[hidden] {
	display: none;
}

.faq-voce__risposta > :first-child {
	margin-top: 0;
}

.faq-voce__risposta > :last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.faq-voce__domanda {
		gap: 20px;
		min-height: 64px;
		padding: 20px 0;
		font-size: 19px;
	}

	.faq-voce__icona {
		width: 32px;
		height: 32px;
	}

	.faq-voce__icona::before,
	.faq-voce__icona::after {
		width: 14px;
	}

	.faq-voce__risposta {
		padding: 0 52px 24px 0;
		font-size: 16px;
	}
}


/* --------------------------------------------------------------------------
   12. Pannello CTA blu
   -------------------------------------------------------------------------- */

.cta-blu {
	padding: 0 12px 56px;
}

.cta-blu__pannello {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px 22px;
	border-radius: var(--radius-panel);
	background: var(--c-accent);
	color: #FFFFFF;
}

.cta-blu__testi {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cta-blu__testi > * {
	margin: 0;
}

.cta-blu__etichetta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cta-blu__punto {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-blob-lime);
}

.cta-blu__titolo {
	font-size: 28px;
	line-height: 1.15;
}

.cta-blu__testo {
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.5;
}

.cta-blu__azioni {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 6px;
	align-items: center;
}

.cta-blu__pulsante {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 34px;
	border-radius: var(--radius-pill);
	background: #FFFFFF;
	color: var(--c-accent);
	font-size: 16px;
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cta-blu__pulsante:hover {
	background: var(--c-blob-lime);
	color: var(--c-accent);
}

/* Sul fondo blu il focus è bianco */
.cta-blu :focus-visible {
	outline-color: #FFFFFF;
}

.cta-blu__nota {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	text-align: center;
}

/* Variante con contatore (Il Progetto): barra bianca su fondo trasparente */
.cta-blu__barra {
	width: 100%;
	max-width: 360px;
	height: 8px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.25);
}

.cta-blu__riempimento {
	display: block;
	width: var(--riempimento, 1%);
	height: 100%;
	border-radius: var(--radius-pill);
	background: #FFFFFF;
}

.cta-blu--contatore .cta-blu__testo {
	color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
	.cta-blu {
		padding: 0 24px 120px;
	}

	.cta-blu__pannello {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 40px 64px;
		padding: 72px 6%;
		border-radius: var(--radius-panel-lg);
	}

	.cta-blu__testi {
		flex: 1 1 420px;
		max-width: 600px;
	}

	.cta-blu__etichetta {
		color: rgba(255, 255, 255, 0.65);
		font-size: 13px;
	}

	.cta-blu__punto {
		width: 8px;
		height: 8px;
	}

	.cta-blu__titolo {
		font-size: 40px;
		line-height: 1.12;
	}

	.cta-blu__testo {
		color: rgba(255, 255, 255, 0.72);
		font-size: 17px;
		line-height: 1.55;
	}

	.cta-blu__azioni {
		flex: 0 1 auto;
		align-items: center;
		margin-top: 0;
	}

	.cta-blu__pulsante {
		min-height: 0;
		padding: 17px 34px;
		font-size: 17px;
	}

	.cta-blu__nota {
		text-align: left;
	}
}


/* --------------------------------------------------------------------------
   13. Galleria artista
   -------------------------------------------------------------------------- */

/* Regole: l'opera non si ritaglia mai. Riquadro ad altezza fissa (400px mobile, 560px desktop)
   senza fondo né bordi, immagine intera dentro (la pagina non si sposta cambiando opera),
   ombra solo attorno all'immagine. Miniature in riga sotto (mobile) o in colonna a sinistra. */
.galleria {
	display: grid;
	grid-template-areas:
		"vista"
		"miniature";
	gap: 14px;
	min-width: 0;
}

.galleria__vista {
	grid-area: vista;
	position: relative;
	min-width: 0;
}

.galleria__opera {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

/* Con JS le opere stanno una sopra l'altra e si passa dall'una all'altra in dissolvenza.
   L'altezza resta quella dell'opera più alta: la pagina non si sposta. Le opere nascoste
   restano fuori da clic, tastiera e screen reader (visibility). */
.galleria--js .galleria__vista {
	display: grid;
}

.galleria--js .galleria__opera {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.galleria--js .galleria__opera.is-attiva {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.galleria--js .galleria__opera,
	.galleria--js .galleria__opera.is-attiva {
		transition: none;
	}
}

.galleria__zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 400px;
	cursor: zoom-in;
}

.galleria__immagine {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 8px 22px rgba(20, 20, 40, 0.10);
}

.galleria__didascalia {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 2px;
	text-align: center;
}

.galleria__titolo {
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.galleria__dettagli {
	color: var(--c-ink-3);
	font-size: 13px;
}

/* Frecce ai lati del riquadro, centrate in altezza */
.galleria__freccia {
	position: absolute;
	top: 200px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--touch-min);
	height: var(--touch-min);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--c-ink);
	box-shadow: 0 4px 14px rgba(20, 20, 40, 0.12);
	transform: translateY(-50%);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.galleria__freccia:hover {
	background: var(--c-surface);
	color: var(--c-accent);
}

.galleria__freccia--prec {
	left: 8px;
}

.galleria__freccia--succ {
	right: 8px;
}

/* "1 / 3" sull'angolo in basso a destra del riquadro (solo mobile) */
.galleria__contatore {
	position: absolute;
	top: 360px;
	right: 12px;
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	background: rgba(20, 20, 20, 0.6);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: var(--fw-semibold);
}

.galleria__miniature {
	grid-area: miniature;
	display: flex;
	gap: 8px;
}

.galleria__miniatura {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 5px;
	border: 2px solid var(--c-line);
	border-radius: 12px;
	background: var(--c-surface);
	cursor: pointer;
}

.galleria__miniatura[aria-pressed="true"] {
	border-color: var(--c-accent);
}

.galleria__miniatura img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

@media (min-width: 768px) {
	.galleria {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "miniature vista";
		align-items: start;
	}

	.galleria__miniature {
		flex-direction: column;
		gap: 10px;
	}

	.galleria__miniatura {
		width: 72px;
		height: 72px;
		padding: 6px;
	}

	.galleria__opera {
		gap: 14px;
	}

	.galleria__zoom {
		height: 560px;
	}

	.galleria__freccia {
		top: 280px;
		width: 48px;
		height: 48px;
	}

	.galleria__freccia--prec {
		left: 12px;
	}

	.galleria__freccia--succ {
		right: 12px;
	}

	.galleria__immagine {
		box-shadow: 0 10px 28px rgba(20, 20, 40, 0.10);
	}

	.galleria__titolo {
		font-size: 17px;
	}

	.galleria__dettagli {
		font-size: 14px;
	}

	.galleria__contatore {
		display: none;
	}
}

/* Zoom a tutto schermo (GLightbox, tema "clean"): fondo scuro, didascalia bianca, pulsanti rotondi.
   Desktop: l'altezza dell'opera è 90vh meno la didascalia (data-height nel template), così
   opera + didascalia stanno al centro con un po' d'aria sopra e sotto. */
.goverlay {
	background: rgba(15, 15, 20, 0.92);
}

.glightbox-clean .gslide-description {
	background: transparent;
}

.glightbox-clean .gdesc-inner {
	padding: 12px 20px 0;
	text-align: center;
}

/* L'opera nello zoom è sempre intera: GLightbox usa object-fit: cover, che con l'altezza
   forzata (data-height) ritaglierebbe le opere orizzontali. */
.gslide-image img {
	object-fit: contain;
}

/* Mobile: l'opera lascia spazio sopra (pulsante Chiudi) e sotto (didascalia).
   Niente altezza forzata (data-height="90vh" serve al desktop): il riquadro segue l'opera. */
.glightbox-mobile .gslide-image img {
	height: auto !important;
	max-height: calc(100vh - 200px);
	max-height: calc(100dvh - 200px);
}

.glightbox-clean .gslide-title {
	margin-bottom: 2px;
	color: #FFFFFF;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.glightbox-clean .gslide-desc {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-sans);
	font-size: 14px;
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
	background-color: rgba(255, 255, 255, 0.24);
}

.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg {
	width: 18px;
}

.glightbox-container .gbtn:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   14. Form (candidatura e campi)
   -------------------------------------------------------------------------- */

/* Campi */
.campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.campo__etichetta {
	padding: 0;
	color: var(--c-ink);
	font-size: 14px;
	font-weight: var(--fw-semibold);
}

.campo__input {
	width: 100%;
	min-height: var(--field-min-height);
	padding: 12px 16px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-field);
	background: var(--c-surface);
	color: var(--c-ink);
	font: inherit;
	font-size: 16px; /* 16px: niente zoom automatico su iOS */
}

.campo__input:focus {
	border-color: var(--c-accent);
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
}

.campo__input--area {
	line-height: 1.5;
	resize: vertical;
}

.campo__aiuto {
	color: var(--c-muted);
	font-size: 13px;
}

.campo__conta {
	margin-left: 6px;
	font-variant-numeric: tabular-nums;
}

.campo__errore {
	color: #B42318;
	font-size: 13px;
	font-weight: var(--fw-medium);
}

.campo--errore .campo__input,
.campo--errore .carica__area {
	border-color: #B42318;
}

/* Caselle di scelta a pillola (tecniche) */
.scelte {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.scelta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--touch-min);
	padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: 15px;
	cursor: pointer;
}

.scelta input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--c-accent);
}

.scelta:has(input:checked) {
	border-color: var(--c-accent);
	background: var(--c-lavender);
	color: var(--c-accent);
}

.scelta:has(input:focus-visible) {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* Caricamento immagine con anteprima (l'opera si vede intera: niente ritaglio) */
.carica__area {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 200px;
	padding: 16px;
	overflow: hidden;
	border: 2px dashed #CFCFCF;
	border-radius: 16px;
	background: var(--c-surface);
	color: var(--c-accent);
	text-align: center;
	cursor: pointer;
}

.carica__area:hover {
	border-color: var(--c-accent);
	background: #F7F7FE;
}

.carica__area:focus-within {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.carica__input {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.carica__anteprima {
	position: absolute;
	inset: 8px 8px 34px;
	width: calc(100% - 16px);
	height: calc(100% - 42px);
	object-fit: contain;
}

.carica__titolo {
	color: var(--c-ink);
	font-size: 15px;
	font-weight: var(--fw-semibold);
}

.carica__testo {
	color: var(--c-muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* Con l'immagine scelta: resta l'anteprima e, in basso, il nome del file */
.carica--pieno .carica__area {
	border-style: solid;
	border-color: var(--c-line);
}

.carica--pieno .carica__icona,
.carica--pieno .carica__titolo {
	display: none;
}

.carica--pieno .carica__testo {
	position: absolute;
	right: 10px;
	bottom: 8px;
	left: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.campo--errore .carica__testo {
	color: #B42318;
}

/* Consensi */
.consensi {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border-radius: 16px;
	background: #F7F7F7;
}

.consenso {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 4px 12px;
	font-size: 15px;
	line-height: 1.5;
}

.consenso input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--c-accent);
}

.consenso label {
	cursor: pointer;
}

.consenso .campo__errore {
	grid-column: 2;
}

@media (min-width: 768px) {
	.campo {
		gap: 8px;
	}

	.consensi {
		padding: 20px 22px;
	}
}


/* --------------------------------------------------------------------------
   15. Testo libero (.prose: Privacy, Cookie, Termini)
   -------------------------------------------------------------------------- */

/* Testi scritti con Gutenberg (pagine legali, pagine di testo, risposte FAQ lunghe) */
.prose {
	color: var(--c-ink-2);
	font-size: 16px;
	line-height: 1.75;
}

.prose > :first-child {
	margin-top: 0;
}

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

.prose p,
.prose ul,
.prose ol {
	margin: 0 0 16px;
}

/* Primo paragrafo: introduzione un po' più grande */
.prose > p:first-child {
	color: #2A2A2A;
	font-size: 18px;
	line-height: 1.7;
}

.prose h2 {
	margin: 40px 0 14px;
	color: var(--c-ink);
	font-size: 24px;
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.prose h3 {
	margin: 28px 0 10px;
	color: var(--c-ink);
	font-size: 19px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: 1.3;
}

.prose ul,
.prose ol {
	padding-left: 22px;
	line-height: 1.65;
}

.prose li + li {
	margin-top: 8px;
}

.prose a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose strong {
	color: var(--c-ink);
	font-weight: var(--fw-semibold);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.prose th,
.prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}


/* --------------------------------------------------------------------------
   16. Pagine (home, profilo, archivio, candidatura, Il Progetto, FAQ, 404)
   -------------------------------------------------------------------------- */

/* Home – hero */
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 48px 20px 16px;
	text-align: center;
}

.hero > * {
	margin: 0;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	background: rgba(255, 255, 255, 0.75);
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: var(--fw-medium);
}

.hero__badge-punto {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-accent);
}

.hero__titolo {
	font-size: 38px;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.hero__testo {
	color: var(--c-ink-2);
	font-size: 17px;
	line-height: 1.55;
}

.hero__azioni {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.hero__nota {
	color: var(--c-ink-3);
	font-size: 13px;
}

@media (min-width: 768px) {
	.hero {
		gap: 24px;
		padding: 88px 24px 0;
	}

	.hero__badge {
		gap: 10px;
		padding: 7px 16px 7px 10px;
		font-size: 14px;
	}

	.hero__badge-punto {
		width: 8px;
		height: 8px;
	}

	.hero__titolo {
		max-width: 780px;
		font-size: 60px;
	}

	.hero__testo {
		max-width: 640px;
		font-size: 20px;
	}

	.hero__azioni {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		width: auto;
		margin-top: 8px;
	}

	.hero__nota {
		font-size: 14px;
	}
}



/* Home – carosello sotto la hero (marquee solo CSS) */
.hero .carosello {
	width: calc(100% + 40px);
	margin: 10px -20px 0;
	padding: 8px 0 14px;
	overflow: hidden;
}

.carosello__traccia {
	display: flex;
	gap: 14px;
	width: max-content;
	/* padding finale = gap: le due metà sono identiche e il -50% torna a capo senza scatti */
	padding-inline-end: 14px;
	animation: carosello-scorri var(--durata, 40s) linear infinite;
}

.carosello--in-pausa .carosello__traccia {
	animation-play-state: paused;
}

/* Scorre sempre: niente pausa al passaggio del mouse né al tocco. Si ferma solo con il
   pulsante pausa o quando una card ha il focus da tastiera (chi naviga con Tab). */
.carosello:has(:focus-visible) .carosello__traccia {
	animation-play-state: paused;
}

/* Pulsante pausa / riprendi: piccolo e discreto, sotto il carosello a destra */
.carosello__pausa {
	position: relative;
	z-index: 2; /* sopra la traccia animata: il tocco arriva sempre al pulsante */
	touch-action: manipulation; /* niente "doppio tocco = zoom" su iOS: ogni tocco conta */
	display: flex;
	align-self: flex-end;
	align-items: center;
	justify-content: center;
	width: var(--touch-min);
	height: var(--touch-min);
	margin-top: -8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	color: var(--c-ink-2);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Su telefoni e tablet niente pulsante: il carosello scorre e basta (con "Riduci movimento"
   è fermo e scorrevole a mano). Su desktop resta, unico modo per fermarlo. */
@media (hover: none) {
	.carosello__pausa {
		display: none;
	}
}

.carosello__pausa:hover {
	background: var(--c-surface);
	color: var(--c-accent);
}

.carosello__icona-play,
.carosello--in-pausa + .carosello__pausa .carosello__icona-pausa {
	display: none;
}

.carosello--in-pausa + .carosello__pausa .carosello__icona-play {
	display: block;
}

/* Nessuna opera: una sola card libera, centrata e ferma */
.hero .carosello--vuoto {
	display: flex;
	justify-content: center;
}

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

/* Movimento ridotto: fermo, si scorre a mano e la copia non serve */
@media (prefers-reduced-motion: reduce) {
	.carosello__traccia {
		animation: none;
	}

	.hero .carosello {
		overflow-x: auto;
	}

	.carosello__traccia > [aria-hidden="true"] {
		display: none;
	}

	/* Fermo comunque: la pausa non serve */
	.carosello__pausa {
		display: none;
	}
}

@media (min-width: 768px) {
	.hero .carosello {
		width: calc(100% + 48px);
		margin: 40px -24px 0;
		padding: 16px 0 40px;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	}

	.carosello__traccia {
		gap: 24px;
		padding-inline-end: 24px;
	}
}

/* Home – Perché diventare Fondatore */
.perche {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 8px 20px 72px;
}

.perche__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.perche__titolo {
	max-width: 680px;
	margin: 0;
	font-size: 30px;
	line-height: 1.12;
}

/* Testo introduttivo: solo desktop, come nel design */
.perche__testo {
	display: none;
	max-width: 560px;
	margin: 0;
	color: var(--c-ink-2);
	font-size: 17px;
	line-height: 1.55;
}

.perche__lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vantaggio {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border-radius: 18px;
	background: var(--c-surface);
}

/* Riquadro lilla: numero su mobile, icona su desktop */
.vantaggio__icona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #EEEDFC;
	color: var(--c-accent);
	font-size: 15px;
	font-weight: var(--fw-semibold);
}

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

.vantaggio__titolo {
	margin: 0;
	font-size: 17px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: 1.3;
}

.vantaggio__testo {
	margin: 0;
	color: var(--c-ink-2);
	font-size: 14px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.perche {
		gap: 56px;
		padding: 40px var(--rientro-pannello) 120px;
	}

	.perche__intro {
		gap: 14px;
	}

	.perche__titolo {
		font-size: 44px;
		line-height: 1.1;
	}

	.perche__testo {
		display: block;
	}

	.perche__lista {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		gap: 20px;
	}

	.vantaggio {
		flex-direction: column;
		gap: 14px;
		padding: 32px 28px;
		border-radius: var(--radius-card);
	}

	.vantaggio__icona {
		width: 48px;
		height: 48px;
		border-radius: 14px;
	}

	.vantaggio__testi {
		gap: 14px;
	}

	.vantaggio__titolo {
		font-size: 20px;
	}

	.vantaggio__testo {
		font-size: 15px;
		line-height: 1.55;
	}
}

/* Home – 3 passi */
.passi {
	padding: 0 12px;
}

/* Spazio verso il pannello CTA finché tra i due non c'è la sezione FAQ */
.passi + .cta-blu {
	padding-top: 56px;
}

.passi__pannello {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 48px 16px 32px;
	border-radius: var(--radius-panel);
}

.passi__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 8px;
	text-align: center;
}

.passi__titolo {
	margin: 0;
	font-size: 30px;
	line-height: 1.12;
}

/* Testo introduttivo: solo desktop, come nel design */
.passi__testo {
	display: none;
	margin: 0;
	color: var(--c-ink-2);
	font-size: 17px;
	line-height: 1.55;
	text-wrap: balance; /* due righe pari, niente parola sola a capo */
}

.passi__lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.passo {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 20px;
	border-radius: var(--radius-card);
	background: var(--c-surface);
}

.passo__numero {
	flex: 0 0 auto;
	width: 44px;
	color: var(--c-accent);
	font-size: 44px;
	font-weight: var(--fw-medium);
	letter-spacing: -0.05em;
	line-height: 0.9;
}

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

.passo__titolo {
	margin: 0;
	font-size: 17px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: 1.3;
}

.passo__testo {
	margin: 0;
	color: var(--c-ink-3);
	font-size: 14px;
	line-height: 1.5;
}

.passi__fondo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.passi__serve {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* "Cosa ti serve:" solo desktop; su mobile restano i chip */
.passi__serve-titolo {
	display: none;
	margin-right: 6px;
	font-size: 15px;
	font-weight: var(--fw-semibold);
}

.passi__chip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.passi__chip li {
	padding: 7px 12px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.8);
	font-size: 13px;
}

@media (min-width: 768px) {
	.passi {
		padding: 0 24px;
	}

	.passi + .cta-blu {
		padding-top: 120px;
	}

	.passi__pannello {
		align-items: center;
		gap: 56px;
		padding: 88px 5% 72px;
		border-radius: var(--radius-panel-lg);
	}

	.passi__intro {
		gap: 14px;
		max-width: 640px;
		padding: 0;
	}

	.passi__titolo {
		font-size: 48px;
		line-height: 1.08;
		letter-spacing: -0.025em;
	}

	.passi__testo {
		display: block;
	}

	.passi__lista {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 20px;
		width: 100%;
	}

	.passo {
		flex-direction: column;
		gap: 14px;
		padding: 36px 32px 34px;
		border-radius: 22px;
		box-shadow: 0 10px 30px rgba(40, 40, 120, 0.06);
	}

	.passo__numero {
		width: auto;
		font-size: 60px;
	}

	.passo__testi {
		gap: 14px;
		margin-top: 16px;
	}

	.passo__titolo {
		font-size: 21px;
	}

	.passo__testo {
		font-size: 15px;
		line-height: 1.6;
	}

	.passi__fondo {
		gap: 28px;
	}

	.passi__serve-titolo {
		display: inline;
	}

	.passi__chip {
		gap: 10px;
	}

	.passi__chip li {
		padding: 8px 14px;
		background: rgba(255, 255, 255, 0.75);
		font-size: 14px;
	}
}

/* Home – FAQ in evidenza */
.home-faq {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 72px 20px 56px;
}

.home-faq__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.home-faq__titolo {
	margin: 0;
	font-size: 30px;
}

/* Testo e "Scrivici": solo desktop, come nel design */
.home-faq__testo,
.home-faq__scrivici {
	display: none;
}

.home-faq__domande {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.home-faq__tutte {
	align-self: flex-start;
	font-size: 15px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}

/* Lo spazio verso la CTA lo dà la sezione FAQ */
.home-faq + .cta-blu {
	padding-top: 0;
}

@media (min-width: 768px) {
	.home-faq {
		gap: 48px;
		padding: 120px var(--rientro-pannello);
	}

	.home-faq__intro {
		gap: 16px;
		max-width: 560px;
	}

	.home-faq__titolo {
		font-size: 44px;
		line-height: 1.1;
	}

	.home-faq__testo {
		display: block;
		margin: 0;
		color: var(--c-ink-2);
		font-size: 17px;
		line-height: 1.55;
	}

	.home-faq__scrivici {
		display: inline-flex;
		align-self: flex-start;
		margin-top: 8px;
	}

	.home-faq__domande {
		gap: 24px;
	}

	.home-faq__tutte {
		font-size: 16px;
	}
}

/* Da 960px: due colonne 4/12 (intestazione) e 8/12 (domande) */
@media (min-width: 960px) {
	.home-faq {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: start;
		gap: 64px;
	}

	.home-faq__intro {
		max-width: 520px;
	}
}

/* 404 */
.pagina-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	min-height: 70vh;
	padding: 64px 20px 120px;
	text-align: center;
}

.pagina-404 > * {
	margin: 0;
}

.pagina-404__numero {
	color: var(--c-accent);
	font-size: 112px;
	font-weight: var(--fw-medium);
	letter-spacing: -0.05em;
	line-height: 1;
}

.pagina-404__titolo {
	max-width: 720px;
	font-size: 34px;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.pagina-404__testo {
	max-width: 560px;
	color: var(--c-ink-2);
	font-size: 17px;
	line-height: 1.55;
}

.pagina-404__azioni {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.pagina-404__candidati {
	margin-top: 8px;
	color: var(--c-ink-3);
	font-size: 15px;
}

.pagina-404__candidati a {
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

@media (min-width: 768px) {
	.pagina-404 {
		gap: 22px;
		padding: 136px 24px 200px;
	}

	.pagina-404__numero {
		font-size: 168px;
	}

	.pagina-404__titolo {
		margin-top: 8px;
		font-size: 48px;
	}

	.pagina-404__testo {
		font-size: 19px;
	}

	.pagina-404__azioni {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		width: auto;
		margin-top: 8px;
	}

	.pagina-404__candidati {
		margin-top: 12px;
	}
}

/* Pagine di testo (legali e page.php): due pannelli bianchi centrati, max 1520px.
   Il testo resta in una colonna di 720px (leggibilità) e l'intestazione è allineata a quella colonna. */
.pagina-testo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 12px 72px;
}

.pagina-testo__intestazione,
.pagina-testo__corpo {
	width: 100%;
	max-width: 1520px;
	margin: 0 auto;
	background: var(--c-surface);
}

.pagina-testo__intestazione {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 20px 28px;
	border-radius: var(--radius-panel);
}

/* Contenuti dell'intestazione nella stessa colonna di 720px del testo */
.pagina-testo .pagina-testo__intestazione > * {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}

.percorso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--c-muted);
	font-size: 14px;
}

.percorso a {
	color: var(--c-muted);
	text-decoration: none;
}

.percorso a:hover {
	color: var(--c-accent);
}

.percorso [aria-current] {
	color: var(--c-ink);
}

.pagina-testo__titolo {
	margin: 0;
	font-size: 34px;
	line-height: 1.06;
	letter-spacing: -0.025em;
}

.pagina-testo__data {
	margin: 0;
	color: var(--c-muted);
	font-size: 15px;
}

/* Pulsanti tra i documenti legali */
.documenti ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.documenti a {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	padding: 0 20px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	color: var(--c-ink);
	font-size: 15px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.documenti a:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.documenti a[aria-current="page"] {
	border-color: var(--c-accent);
	background: var(--c-accent);
	color: #FFFFFF;
}

.pagina-testo__corpo {
	padding: 32px 20px;
	border-radius: 24px;
}

.pagina-testo__corpo .prose,
.riquadro-contatti {
	max-width: 720px;
	margin-inline: auto;
}

.riquadro-contatti {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 40px;
	padding: 22px 24px;
	border-radius: 18px;
	background: var(--c-lavender);
}

.riquadro-contatti p {
	margin: 0;
}

.riquadro-contatti__titolo {
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.riquadro-contatti__testo {
	color: var(--c-ink-2);
	font-size: 15px;
	line-height: 1.55;
}

@media (min-width: 768px) {
	.pagina-testo {
		gap: 32px;
		padding: 40px 24px 120px;
	}

	.pagina-testo__intestazione {
		gap: 16px;
		padding: 64px 8% 56px;
		border-radius: var(--radius-panel-lg);
	}

	.pagina-testo__titolo {
		font-size: 56px;
	}

	.pagina-testo__data {
		font-size: 16px;
	}

	.documenti ul {
		margin-top: 16px;
	}

	.pagina-testo__corpo {
		padding: 64px 8%;
		border-radius: var(--radius-panel);
	}
}

/* Il Progetto */
.progetto {
	display: flex;
	flex-direction: column;
	padding: 16px 12px 0;
}

.progetto__h2 {
	margin: 0;
	font-size: 30px;
	line-height: 1.12;
}

.progetto-manifesto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 56px 20px 52px;
	border-radius: var(--radius-panel);
	background: var(--c-surface);
	text-align: center;
}

.progetto-manifesto > * {
	margin: 0;
}

.progetto-manifesto__titolo {
	max-width: 900px;
	font-size: 38px;
	line-height: 1.04;
	letter-spacing: var(--ls-title-tight);
}

.progetto-manifesto__testo {
	max-width: 620px;
	color: var(--c-ink-2);
	font-size: 17px;
	line-height: 1.55;
}

/* In cosa crediamo (senza pannello: allineata ai contenuti dei pannelli) */
.progetto-valori {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 72px;
	padding-inline: 8px;
}

.progetto-valori__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
}

.progetto-valori__titoli {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 620px;
}

.progetto-valori__testo {
	max-width: 400px;
	margin: 0;
	color: var(--c-ink-2);
	font-size: 16px;
	line-height: 1.55;
}

.progetto-valori__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.valore {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 20px;
	border-radius: 22px;
	background: var(--c-surface);
}

.valore__numero {
	color: var(--c-accent);
	font-size: 36px;
	font-weight: var(--fw-medium);
	letter-spacing: -0.04em;
	line-height: 1;
}

.valore__titolo {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: 1.3;
}

.valore__testo {
	margin: 0;
	color: var(--c-ink-3);
	font-size: 15px;
	line-height: 1.6;
}

/* Dove stiamo andando: timeline */
.progetto-tappe {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 72px;
	padding: 40px 20px;
	border-radius: var(--radius-panel);
	background: var(--c-surface);
}

.progetto-tappe__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.tappe {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.tappa__segno {
	display: flex;
	align-items: center;
}

.tappa__punto {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 3px solid #CFCFCF;
	border-radius: 50%;
	background: var(--c-surface);
}

.tappa__linea {
	flex: 1 1 auto;
	height: 2px;
	margin-left: 8px;
	background: #E0E0E0;
}

.tappa--fatta .tappa__punto,
.tappa--attuale .tappa__punto {
	border-color: var(--c-accent);
	background: var(--c-accent);
}

.tappa--fatta .tappa__linea,
.tappa--attuale .tappa__linea {
	background: var(--c-accent);
}

.tappa:last-child .tappa__linea {
	background: transparent;
}

.tappa__badge {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: #F3F3F3;
	color: var(--c-ink-3);
	font-size: 12px;
	font-weight: var(--fw-semibold);
}

.tappa__badge--qui {
	background: var(--c-accent);
	color: #FFFFFF;
}

.tappa__titolo {
	margin: 0;
	color: var(--c-ink-2);
	font-size: 19px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: 1.3;
}

.tappa--attuale .tappa__titolo,
.tappa--fatta .tappa__titolo {
	color: var(--c-ink);
}

.tappa__testo {
	margin: 0;
	color: var(--c-ink-3);
	font-size: 15px;
	line-height: 1.6;
}

/* Riga FAQ lavanda */
.progetto-faq {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 72px;
	padding: 28px 20px;
	border-radius: var(--radius-panel);
	background: var(--c-lavender);
}

.progetto-faq__testi {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.progetto-faq__icona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--c-surface);
	color: var(--c-accent);
	font-size: 20px;
	font-weight: var(--fw-semibold);
}

.progetto-faq__titolo {
	margin: 0;
	font-size: 22px;
	letter-spacing: -0.01em;
}

.progetto-faq__testo {
	margin: 6px 0 0;
	color: var(--c-ink-2);
	font-size: 15px;
	line-height: 1.5;
}

.progetto-faq__pulsante {
	min-height: 50px;
	padding: 0 28px;
	font-size: 16px;
}

/* Spazio prima del pannello CTA */
.progetto + .cta-blu {
	padding-top: 56px;
}

@media (min-width: 768px) {
	.progetto {
		padding: 40px 24px 0;
	}

	.progetto__h2 {
		font-size: 44px;
		line-height: 1.1;
	}

	.progetto-manifesto {
		gap: 24px;
		padding: 120px 6% 112px;
		border-radius: var(--radius-panel-lg);
	}

	.progetto-manifesto__titolo {
		font-size: 68px;
	}

	.progetto-manifesto__testo {
		font-size: 20px;
	}

	.progetto-valori {
		gap: 48px;
		margin-top: 120px;
		/* Allineata ai contenuti dei pannelli (padding 6%) */
		padding-inline: 6%;
	}

	.progetto-valori__titoli {
		gap: 14px;
	}

	.progetto-valori__testo {
		font-size: 17px;
	}

	.progetto-valori__lista {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 20px;
	}

	.valore {
		padding: 32px 28px;
	}

	.valore__numero {
		font-size: 44px;
	}

	.valore__titolo {
		margin-top: 12px;
		font-size: 20px;
	}

	.progetto-tappe {
		gap: 56px;
		margin-top: 120px;
		padding: 72px 6%;
		border-radius: var(--radius-panel-lg);
	}

	.progetto-tappe__intro {
		gap: 14px;
	}

	.tappe {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}

	.tappa__titolo {
		font-size: 21px;
	}

	.progetto-faq {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 24px 40px;
		margin-top: 120px;
		padding: 40px 5%;
	}

	.progetto-faq__testi {
		align-items: center;
		gap: 20px;
	}

	.progetto-faq__icona {
		width: 56px;
		height: 56px;
		border-radius: 16px;
		font-size: 26px;
	}

	.progetto-faq__titolo {
		font-size: 28px;
	}

	.progetto-faq__testo {
		font-size: 16px;
	}

	.progetto + .cta-blu {
		padding-top: 80px;
	}
}

/* Pagina FAQ */
.faq-pagina {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px 12px 0;
}

.faq-pagina__intestazione {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 56px 20px 52px;
	border-radius: var(--radius-panel);
	background: var(--c-surface);
	text-align: center;
}

.faq-pagina__intestazione > * {
	margin: 0;
}

.faq-pagina__titolo {
	max-width: 900px;
	font-size: 38px;
	line-height: 1.04;
	letter-spacing: var(--ls-title-tight);
}

.faq-pagina__testo {
	max-width: 620px;
	color: var(--c-ink-2);
	font-size: 17px;
	line-height: 1.55;
}

.faq-pagina__corpo {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Colonna Argomenti: su mobile una riga di pulsanti che scorre */
.faq-argomenti {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.faq-argomenti__titolo,
.faq-argomenti__contatti {
	display: none;
}

.faq-argomenti__voci {
	/* Contenitore dei testi per screen reader (posizionati in assoluto): senza,
	   sfuggono allo scorrimento della riga e allargano la pagina su mobile. */
	position: relative;
	display: flex;
	gap: 8px;
	margin: 0 -12px;
	padding: 0 12px 4px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.faq-argomenti__voci::-webkit-scrollbar {
	display: none;
}

.faq-argomenti__voci a {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: var(--touch-min);
	padding: 0 8px 0 16px;
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	color: var(--c-ink);
	font-size: 15px;
	font-weight: var(--fw-medium);
	text-decoration: none;
	white-space: nowrap;
}

.faq-argomenti__voci a[aria-current="true"] {
	background: var(--c-lavender);
	color: var(--c-accent);
	font-weight: var(--fw-semibold);
}

.faq-argomenti__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background: #F3F3F3;
	color: var(--c-muted);
	font-size: 13px;
	font-weight: var(--fw-semibold);
}

.faq-argomenti__voci a[aria-current="true"] .faq-argomenti__numero {
	background: var(--c-surface);
	color: var(--c-accent);
}

.faq-argomenti__contatti p {
	margin: 0;
}

.faq-argomenti__contatti-titolo {
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.faq-argomenti__contatti-testo {
	color: var(--c-ink-3);
	font-size: 14px;
	line-height: 1.5;
}

.faq-argomenti__email {
	font-size: 15px;
	font-weight: var(--fw-semibold);
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* Domande raggruppate in una card bianca */
.faq-gruppi {
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
	padding: 28px 20px;
	border-radius: var(--radius-panel);
	background: var(--c-surface);
}

.faq-gruppo {
	/* Lo scroll verso un argomento si ferma sotto la nav */
	scroll-margin-top: 110px;
}

.faq-gruppo__titolo {
	margin: 0 0 4px;
	font-size: 24px;
	letter-spacing: -0.01em;
}

/* Sul fondo bianco: righe più chiare e cerchio grigio da chiuso */
.faq-gruppi .faq-voce {
	border-bottom-color: #EDEDED;
}

.faq-gruppi .faq-voce__icona {
	background: #F3F3F3;
}

/* Spazio prima del pannello CTA */
.faq-pagina + .cta-blu {
	padding-top: 56px;
}

@media (min-width: 768px) {
	.faq-pagina {
		gap: 56px;
		padding: 40px 24px 0;
	}

	.faq-pagina__intestazione {
		gap: 20px;
		padding: 96px 6% 88px;
		border-radius: var(--radius-panel-lg);
	}

	.faq-pagina__titolo {
		font-size: 68px;
	}

	.faq-pagina__testo {
		font-size: 20px;
	}

	.faq-gruppi {
		gap: 48px;
		padding: 48px 5%;
	}

	.faq-gruppo__titolo {
		margin-bottom: 8px;
		font-size: 28px;
	}

	.faq-gruppi .faq-voce__domanda {
		font-size: 18px;
	}

	.faq-gruppi .faq-voce__risposta {
		line-height: 1.65;
	}

	.faq-pagina + .cta-blu {
		padding-top: 120px;
	}
}

/* Da 960px: colonna Argomenti a sinistra, fissa scorrendo */
@media (min-width: 960px) {
	.faq-pagina__corpo {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		align-items: start;
		gap: 48px;
	}

	.faq-argomenti {
		position: sticky;
		top: 100px;
		gap: 4px;
		padding: 20px;
		border-radius: var(--radius-panel);
		background: var(--c-surface);
	}

	.faq-argomenti__titolo {
		display: block;
		padding: 8px 14px 10px;
		color: var(--c-muted);
		font-size: 13px;
		font-weight: var(--fw-semibold);
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.faq-argomenti__voci {
		flex-direction: column;
		gap: 4px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.faq-argomenti__voci a {
		min-height: 48px;
		padding: 0 14px;
		border-radius: 14px;
		background: transparent;
		font-size: 16px;
		white-space: normal;
	}

	.faq-argomenti__voci a:hover {
		color: var(--c-accent);
	}

	.faq-argomenti__contatti {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 16px;
		padding: 20px 14px 8px;
		border-top: 1px solid #EDEDED;
	}
}

/* Con la barra di amministrazione la colonna scende sotto */
@media (min-width: 960px) {
	.admin-bar .faq-argomenti {
		top: 132px;
	}
}

/* Candidatura */
.candidatura-pagina {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 12px 56px;
}

.candidatura-pagina__intestazione {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 4px;
	text-align: center;
}

.candidatura-pagina__intestazione > * {
	margin: 0;
}

.candidatura-pagina__titolo {
	font-size: 34px;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.candidatura-pagina__testo {
	max-width: 600px;
	color: var(--c-ink-2);
	font-size: 15px;
	line-height: 1.5;
}

/* Card "Il percorso": solo da 960px */
.percorso-card {
	display: none;
}

.candidatura-card {
	min-width: 0;
	padding: 24px 18px 20px;
	border-radius: 24px;
	background: var(--c-surface);
}

.candidatura {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.candidatura__trappola {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.candidatura__avanzamento {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.candidatura__avanzamento[hidden] {
	display: none;
}

.candidatura__avanzamento-testi {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 13px;
}

.candidatura__passo-numero {
	color: var(--c-accent);
	font-weight: var(--fw-semibold);
}

.candidatura__passo-nome {
	color: var(--c-muted);
}

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

.candidatura__barre span {
	height: 6px;
	border-radius: var(--radius-pill);
	background: #EDEDED;
	transition: background-color 0.3s ease;
}

.candidatura__barre .attiva {
	background: var(--c-accent);
}

.candidatura__riepilogo-errori {
	padding: 14px 18px;
	border-left: 4px solid #B42318;
	border-radius: 12px;
	background: #FDECEC;
	font-size: 15px;
}

.candidatura__riepilogo-errori p {
	margin: 0;
}

.candidatura__riepilogo-errori p + p {
	margin-top: 4px;
}

.candidatura__avviso-immagini {
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--c-lavender);
	color: var(--c-ink);
	font-size: 15px;
}

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

.candidatura__passo[hidden] {
	display: none;
}

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

.candidatura__passo-titolo {
	margin: 0;
	font-size: 24px;
	letter-spacing: -0.01em;
}

.candidatura__passo-titolo:focus {
	outline: none;
}

.candidatura__passo-testo {
	margin: 0;
	color: var(--c-ink-3);
	font-size: 15px;
}

.candidatura__griglia {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.candidatura__foto {
	max-width: 240px;
}

.candidatura__foto .carica__area {
	height: 160px;
}

.candidatura__opere {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 6px;
}

.candidatura__opera {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Altezza | Larghezza affiancate */
.candidatura__misure {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.candidatura__azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid #EDEDED;
}

.candidatura__azioni .btn {
	min-height: 50px;
	padding: 0 24px;
	font-size: 16px;
}

.candidatura__avanti,
.candidatura__invia {
	margin-left: auto;
}

.candidatura__invia {
	font-weight: var(--fw-semibold);
}

.candidatura__invia.in-invio {
	opacity: 0.6;
	cursor: progress;
}

/* Avanzamento dell'invio (caricamento immagini) */
.candidatura__invio {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--c-lavender);
}

.candidatura__invio-testo {
	color: var(--c-accent);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}

.candidatura__invio-barra {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: var(--c-surface);
}

.candidatura__invio-barra span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	transition: width 0.2s linear;
}

/* Conferma dopo l'invio */
.candidatura-inviata {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 380px;
	padding: 24px 0;
	text-align: center;
}

.candidatura-inviata > * {
	margin: 0;
}

.candidatura-inviata__icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--c-accent);
	color: #FFFFFF;
}

.candidatura-inviata__titolo {
	font-size: 28px;
	letter-spacing: -0.02em;
}

.candidatura-inviata__testo {
	max-width: 460px;
	color: var(--c-ink-2);
	font-size: 16px;
	line-height: 1.55;
}

.candidatura-inviata__azioni {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 8px;
}

@media (min-width: 768px) {
	.candidatura-pagina {
		gap: 40px;
		padding: 72px 24px 120px;
	}

	.candidatura-pagina__intestazione {
		gap: 16px;
	}

	.candidatura-pagina__titolo {
		font-size: 56px;
		line-height: 1.06;
	}

	.candidatura-pagina__testo {
		font-size: 19px;
		line-height: 1.55;
	}

	.candidatura-card {
		padding: 44px 6%;
		border-radius: var(--radius-panel);
	}

	.candidatura {
		gap: 32px;
	}

	.candidatura__passo {
		gap: 24px;
	}

	.candidatura__passo-titolo {
		font-size: 28px;
	}

	/* Due campi per riga: Nome | Cognome, Email | Città */
	.candidatura__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.candidatura__opere {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 16px;
	}

	.candidatura__azioni {
		padding-top: 24px;
	}

	.candidatura__azioni .btn--primary {
		padding: 0 32px;
	}

	.candidatura-inviata {
		gap: 20px;
		min-height: 520px;
	}

	.candidatura-inviata__titolo {
		font-size: 36px;
	}

	.candidatura-inviata__testo {
		font-size: 17px;
	}

	.candidatura-inviata__azioni {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		width: auto;
	}
}

/* Da 960px: card "Il percorso" a sinistra (fissa scorrendo) e form a destra */
@media (min-width: 960px) {
	.candidatura-pagina__corpo {
		display: grid;
		grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
		align-items: start;
		gap: 32px;
	}

	.candidatura-pagina__corpo--inviata {
		grid-template-columns: minmax(0, 1fr);
	}

	.percorso-card {
		position: sticky;
		top: 100px;
		display: flex;
		flex-direction: column;
		gap: 28px;
		padding: 40px 28px;
		border: 1px solid #E6E6E6;
		border-radius: var(--radius-panel);
		background: var(--c-surface);
	}

	.percorso-card__intro {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 0 4px;
	}

	.percorso-card__titolo {
		margin: 0;
		font-size: 22px;
		font-weight: var(--fw-semibold);
		letter-spacing: 0;
	}

	.percorso-card__testo {
		margin: 0;
		color: var(--c-ink-3);
		font-size: 15px;
		line-height: 1.5;
	}

	.percorso-card__passi {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.percorso-passo {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 14px;
		border-radius: 14px;
	}

	.percorso-passo[aria-current="step"] {
		background: #F3F3FD;
	}

	.percorso-passo__segno {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 2px solid rgba(20, 20, 20, 0.2);
		border-radius: 50%;
		color: var(--c-muted);
		font-size: 15px;
		font-weight: var(--fw-semibold);
	}

	.percorso-passo[aria-current="step"] .percorso-passo__segno {
		border-color: var(--c-accent);
		background: var(--c-surface);
		color: var(--c-accent);
	}

	.percorso-passo.fatto .percorso-passo__segno {
		border-color: var(--c-accent);
		background: var(--c-accent);
		color: #FFFFFF;
	}

	.percorso-passo__testi {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.percorso-passo__titolo {
		font-size: 16px;
		font-weight: var(--fw-semibold);
	}

	.percorso-passo__sotto {
		color: var(--c-ink-3);
		font-size: 13px;
	}

	.percorso-card__punti {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 0;
		padding: 22px 4px 0;
		border-top: 1px solid #EDEDED;
		list-style: none;
		font-size: 14px;
	}

	.percorso-card__punti li {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/* Spunta blu */
	.percorso-card__punti li::before {
		content: "";
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		background: var(--c-accent);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Su desktop basta "Passo X di 3": il nome del passo è nella card a sinistra */
	.candidatura__passo-nome {
		display: none;
	}

	.candidatura__avanzamento-testi {
		font-size: 14px;
	}

	.candidatura__passo-numero {
		color: var(--c-muted);
		font-weight: var(--fw-medium);
	}

	.candidatura__barre {
		gap: 4px;
	}
}

/* Archivio Artisti */
.artisti {
	padding: 32px 16px 0;
}

.artisti__intestazione {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 32px;
}

.artisti__testi {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}

.artisti__testi > * {
	margin: 0;
}

.artisti__titolo {
	font-size: 34px;
	line-height: 1.06;
	letter-spacing: -0.025em;
}

.artisti__testo {
	color: var(--c-ink-2);
	font-size: 17px;
	line-height: 1.55;
}

/* Contatore in una card bianca, allineato a sinistra */
.artisti__contatore {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px;
	border-radius: var(--radius-card);
	background: var(--c-surface);
}

.artisti__contatore .contatore {
	align-items: stretch;
	gap: 10px;
}

.artisti__contatore .contatore__testo {
	font-size: 15px;
	text-align: left;
}

.artisti__contatore .contatore__barra {
	max-width: none;
	background: #E6E6E6;
}

.artisti__posti {
	font-size: 14px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}

/* Griglia su pannello bianco (come le altre pagine): 1 colonna, 2 da 640px, 3 da 1024px */
.artisti__griglia {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	margin-top: 32px;
	padding: 28px 20px;
	border-radius: 24px;
	background: var(--c-surface);
}

/* Sul pannello bianco la freccia ha il fondo grigio della pagina */
.artisti__griglia .card-artista__freccia {
	background: var(--c-bg);
}

/* Card "posto libero" alta come le card artista; si vede solo nelle griglie in cui completa la riga */
.card-libera--archivio {
	display: none;
	width: auto;
}

.card-libera--archivio .card-libera__link {
	gap: 16px;
}

.card-libera--archivio .card-libera__riquadro {
	height: 308px;
	aspect-ratio: auto;
	border-radius: 18px;
	box-shadow: none;
}

.card-libera--archivio .card-opera__didascalia {
	justify-content: center;
	min-height: 44px;
}

.card-libera--archivio .card-opera__artista {
	font-size: 17px;
}

.card-libera--archivio .card-opera__titolo {
	font-size: 14px;
}

.card-libera--da-1 {
	display: block;
}

/* Mobile: mosaico più basso, così l'opera grande non è stretta e lunga (vedi anche Altri pittori) */
@media (max-width: 767px) {
	.artisti__griglia .card-artista__mosaico {
		grid-template-rows: 120px 120px;
	}

	.artisti__griglia .card-libera--archivio .card-libera__riquadro {
		height: 248px;
	}
}

@media (min-width: 640px) {
	.artisti__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.card-libera--archivio {
		display: none;
	}

	.card-libera--da-2 {
		display: block;
	}
}

@media (min-width: 768px) {
	.artisti {
		padding: 64px 24px 0;
	}

	.artisti__testi {
		gap: 14px;
	}

	.artisti__titolo {
		font-size: 56px;
	}

	.artisti__testo {
		font-size: 19px;
	}

	.artisti__contatore {
		flex: 0 1 340px;
	}

	.artisti__griglia {
		margin-top: 48px;
		padding: 56px 5%;
		border-radius: var(--radius-panel);
	}

	.card-libera--archivio .card-libera__titolo {
		font-size: 20px;
	}

	.card-libera--archivio .card-libera__azione {
		font-size: 15px;
		font-weight: var(--fw-semibold);
	}
}

@media (min-width: 1024px) {
	.artisti__griglia {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.card-libera--archivio {
		display: none;
	}

	.card-libera--da-3 {
		display: block;
	}
}

.artisti + .cta-blu {
	padding-top: 56px;
}

@media (min-width: 768px) {
	.artisti + .cta-blu {
		padding-top: 96px;
	}
}

/* Profilo artista */
.profilo {
	padding: 20px 16px 0;
}

.profilo__percorso {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	padding: 0 4px;
	color: var(--c-muted);
	font-size: 13px;
}

.profilo__percorso a {
	color: var(--c-muted);
	text-decoration: none;
}

.profilo__percorso a:hover {
	color: var(--c-accent);
}

.profilo__percorso [aria-current] {
	color: var(--c-ink);
}

.profilo__testa {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.profilo__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 4px;
}

/* Foto profilo con il badge fondatore sotto */
.profilo__foto-badge {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.profilo__foto {
	width: 56px;
	height: 56px;
	border: 1px solid #E6E6E6;
	border-radius: 50%;
	background: var(--c-surface);
	object-fit: cover;
}

/* Senza foto: iniziale del nome */
.profilo__foto--vuota {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--c-lavender);
	color: var(--c-accent);
	font-size: 22px;
	font-weight: var(--fw-medium);
}

.badge-fondatore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: var(--fw-semibold);
}

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

.profilo__nome {
	margin: 0;
	font-size: 38px;
	line-height: 1.04;
	letter-spacing: var(--ls-title-tight);
}

.profilo__citta {
	margin: 0;
	color: var(--c-ink-2);
	font-size: 16px;
}

.profilo__ingresso {
	margin: 0;
	color: var(--c-muted);
	font-size: 14px;
}

.profilo__tecniche {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.profilo__tecniche li {
	padding: 7px 12px;
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	font-size: 13px;
}

.profilo__condividi .btn {
	gap: 8px;
	width: 100%;
	min-height: 50px;
	font-size: 15px;
	font-weight: var(--fw-medium);
}

/* Card biografia */
.profilo-bio {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 32px;
	padding: 28px 20px;
	border-radius: 24px;
	background: var(--c-surface);
}

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

.profilo-bio__titolo {
	margin: 0;
	font-size: 26px;
}

.profilo-bio__corpo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.profilo-bio__testo {
	color: #2A2A2A;
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.profilo-bio__testo p {
	margin: 0 0 14px;
}

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

/* Bio lunga chiusa su mobile (JS): circa 8 righe, con sfumatura */
.profilo-bio__testo.is-chiusa {
	max-height: calc(1.7em * 8);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 65%, transparent);
	mask-image: linear-gradient(#000 65%, transparent);
}

.profilo-bio__altro {
	align-self: flex-start;
	min-height: var(--touch-min);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-accent);
	font: inherit;
	font-size: 15px;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

/* Scopri altri pittori: card opera + "Il tuo posto è qui" in griglia */
.altri-pittori {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 48px 4px 56px;
}

.altri-pittori__intestazione {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
}

.altri-pittori__titolo {
	margin: 0;
	font-size: 24px;
}

.altri-pittori__tutti {
	font-size: 14px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.altri-pittori__griglia {
	/* Mobile: riga che si scorre col dito (una card e mezza visibile), card come nella pagina Artisti */
	display: flex;
	gap: 14px;
	margin: 0 -16px;
	padding: 0 16px 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 16px;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.altri-pittori__griglia::-webkit-scrollbar {
	display: none;
}

.altri-pittori__griglia > * {
	flex: 0 0 78%;
	min-width: 0;
	scroll-snap-align: start;
}

.altri-pittori__griglia .card-libera--archivio {
	display: block;
}

/* Mobile: card più strette che nella pagina Artisti, quindi mosaico più basso (l'opera grande
   non diventa stretta e lunga); il posto libero si allinea. Da tablet torna l'altezza normale. */
@media (max-width: 767px) {
	.altri-pittori__griglia .card-artista__mosaico {
		grid-template-rows: 105px 105px;
	}

	.altri-pittori__griglia .card-libera--archivio .card-libera__riquadro {
		height: 218px;
	}
}


@media (min-width: 768px) {
	.profilo {
		padding: 36px 24px 0;
	}

	.profilo__percorso {
		gap: 8px;
		margin-bottom: 24px;
		padding: 0;
		font-size: 14px;
	}

	.profilo__info {
		gap: 24px;
		padding: 8px 0;
	}

	.profilo__foto-badge {
		gap: 14px;
	}

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

	.profilo__foto--vuota {
		font-size: 28px;
	}

	.badge-fondatore {
		gap: 8px;
		padding: 8px 14px;
		font-size: 13px;
	}

	.profilo__nome-citta {
		gap: 10px;
	}

	.profilo__nome {
		font-size: 60px;
		line-height: 1.02;
	}

	.profilo__citta {
		font-size: 18px;
	}

	.profilo__ingresso {
		font-size: 15px;
	}

	.profilo__tecniche li {
		padding: 8px 14px;
		font-size: 14px;
	}

	.profilo__condividi .btn {
		width: auto;
		min-height: 48px;
		padding: 0 22px;
	}

	.profilo-bio {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 40px 64px;
		margin-top: 96px;
		padding: 64px 6%;
		border-radius: var(--radius-panel);
	}

	.profilo-bio__intestazione {
		flex: 1 1 320px;
		max-width: 420px;
		gap: 12px;
	}

	.profilo-bio__titolo {
		font-size: 36px;
	}

	.profilo-bio__corpo {
		flex: 999 1 460px;
		gap: 28px;
	}

	.profilo-bio__testo {
		font-size: 18px;
		line-height: 1.75;
	}

	.profilo-bio__testo p {
		margin-bottom: 18px;
	}

	.altri-pittori {
		gap: 32px;
		padding: 96px 0 120px;
	}

	.altri-pittori__titolo {
		font-size: 32px;
	}

	.altri-pittori__tutti {
		font-size: 15px;
	}

	/* Da tablet: griglia (2 × 2, poi una riga da 4 su desktop) */
	.altri-pittori__griglia {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.altri-pittori__griglia {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Galleria e info affiancate quando c'è spazio per entrambe */
@media (min-width: 1024px) {
	.profilo__testa {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
		gap: 48px;
	}

	.profilo__info {
		justify-content: center;
	}
}


/* Avviso in cima alla pagina (es. iscrizione alla newsletter confermata) */
.avviso-pagina {
	margin: 16px 12px 0;
	padding: 14px 20px;
	border-radius: var(--radius-card);
	background: var(--c-lavender);
	color: var(--c-accent);
	font-size: 15px;
	font-weight: var(--fw-medium);
	text-align: center;
}

@media (min-width: 768px) {
	.avviso-pagina {
		margin: 24px 24px 0;
	}
}

/* --------------------------------------------------------------------------
   17. Utility
   -------------------------------------------------------------------------- */

/* Testi diversi tra mobile e desktop (display: none li toglie anche agli screen reader) */
.solo-desktop {
	display: none;
}

@media (min-width: 768px) {
	.solo-desktop {
		display: inline;
	}

	.solo-mobile {
		display: none;
	}
}

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


/* --------------------------------------------------------------------------
   18. Movimento ridotto
   -------------------------------------------------------------------------- */

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