/* =============================================================================
   MiCCard — SITO PUBBLICO
   =============================================================================

   Porta di docs/design/E4/site-pages/assets/site.css con due differenze
   deliberate rispetto all'handoff:

   1. NESSUN VALORE GRAFICO. Tutto passa dai token semantici di tokens.css, che
      è l'unico file in cui i colori esistono davvero.
   2. CLASSI SEMANTICHE. Nell'handoff i bottoni si chiamavano .btn-gold e
      .btn-dark: nomi che descrivono il colore, quindi da riscrivere a ogni
      cambio di veste. Qui sono .btn--primary e .btn--secondary. I nomi vecchi
      restano in fondo come alias deprecati, così il markup dell'handoff si
      incolla senza rompersi.

   Vale solo per il sito pubblico: area riservata e backoffice avranno il
   proprio foglio, sopra gli stessi token.
   ============================================================================= */

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

* { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; }

/* M4.11: il menu porta a sezioni della home («/#vantaggi»), e lo scorrimento
   morbido lo fa il CSS — niente script. Solo per chi non ha chiesto meno
   animazioni. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	font-family: var(--font-body);
	background: var(--color-surface-page);
	color: var(--color-text);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

a {
	color: var(--color-accent);
	text-decoration: none;
}

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

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

/* Il focus visibile non è un dettaglio estetico: senza, il sito non è
   navigabile da tastiera. Requisito di accessibilità per la PA. */
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* Salto al contenuto: prima voce raggiungibile da tastiera. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--color-surface);
	color: var(--color-text);
	padding: 12px 18px;
	font-weight: 700;
}

.skip-link:focus { left: 0; }

/* -------------------------------------------------------------- Header ---- */

.site-header { width: 100%; }

.site-topbar {
	background: var(--color-topbar);
	color: var(--color-on-topbar);
	height: var(--layout-topbar-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

/* Il logo di Roma Capitale (M4.11). Il bianco e' nel file: e' il logo
   istituzionale per fondo scuro, vedi img/PROVENIENZA.md. */
.site-topbar__roma {
	height: 22px;
	width: auto;
}

.site-topbar .account {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 11px;
	letter-spacing: .4px;
}

.site-topbar .account a { color: var(--color-on-topbar); }

.site-topbar .avatar {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-topbar);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
}

/* ⚠️ «.account .logout» e non «.logout», e questa riga vale un difetto.

   `.site-topbar .account a` (specificità 0,2,1) qui sopra colora di BIANCO
   tutti i link della barra. Con il solo `.site-topbar .logout` (0,2,0) quella
   regola vinceva sul colore, e siccome il fondo qui è bianco il risultato era
   «ACCEDI» BIANCO SU BIANCO — cioè l'unico punto d'accesso del sito pubblico
   INVISIBILE, su ogni pagina anonima, home compresa. Vivo da M3.2 e trovato
   in M4.2 misurando i colori calcolati, perché a occhio è un rettangolo bianco
   che sembra un elemento decorativo.

   ⚠️ È la TERZA occorrenza dello stesso schema in questa EPIC: prima la voce
   di sidebar oro-su-ambra (M5.0), poi il link della briciola arancione-su-oro
   (M5.0), ora questa. La regola da ricordare: in public.css le regole generiche
   discendenti (`a`, `a:hover`, `.account a`) BATTONO le classi di componente, e
   un componente che dichiara un colore deve vincerle di proposito — con una
   specificità più alta, non sperando nell'ordine. */
.site-topbar .account .logout {
	background: var(--color-surface);
	color: var(--color-topbar);
	font-weight: 700;
	padding: 2px 7px;
	border-radius: var(--radius-sm);
	font-size: 10px;
}

/* Le icone social (M4.11): l'icona e' una MASCHERA e il colore e' il fondo
   dell'elemento, cosi' viene da tokens.css. Un SVG in <img> ignorerebbe
   currentColor, e scrivere il bianco nel file sarebbe un valore grafico fuori
   dai token. Area di tocco di 24px attorno a un'icona di 16. */
.site-topbar .socials {
	display: flex;
	align-items: center;
	gap: 6px;
}

.site-topbar .account .social {
	width: 24px;
	height: 24px;
	display: inline-flex;
	opacity: .85;
	background: var(--color-on-topbar);
	-webkit-mask: var(--icona) center / 16px 16px no-repeat;
	mask: var(--icona) center / 16px 16px no-repeat;
}

.site-topbar .account .social:hover,
.site-topbar .account .social:focus-visible { opacity: 1; }

.social--facebook  { --icona: url("../img/clean-facebook.svg"); }
.social--x         { --icona: url("../img/clean-x.svg"); }
.social--instagram { --icona: url("../img/clean-instagram.svg"); }
.social--youtube   { --icona: url("../img/clean-youtube.svg"); }

.site-nav-wrap {
	background: var(--color-surface);
	min-height: var(--layout-nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px var(--layout-gutter);
	border-bottom: 1px solid var(--color-border-soft);
	gap: 16px;
}

/* Marchio: il logo ufficiale da M4.11 (era una «M» disegnata in CSS). */
.site-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.site-logo__img {
	height: 64px;
	width: auto;
}

.site-nav {
	display: flex;
	gap: 24px;
	align-items: center;
}

.site-nav a {
	position: relative;
	color: var(--color-text);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .4px;
	padding: 8px 0;
	white-space: nowrap;
}

/* Sottolineatura della voce corrente. Nell'handoff era uno <span> vuoto:
   qui è uno pseudo-elemento, così il markup non porta decorazione. */
.site-nav a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--color-accent);
	border-radius: 2px;
}

.hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	/* Target touch ≥ 44px, come richiesto dall'handoff §4. */
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text);
}

/* -------------------------------------------------------------- Footer ---- */

.site-footer {
	font-family: var(--font-body);
	background: var(--color-surface-alt);
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
}

.site-footer .inner {
	max-width: var(--layout-maxw-wide);
	margin: 0 auto;
	padding: 46px var(--layout-gutter);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 36px;
}

.site-footer h4 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
}

/* Solo il logo a sinistra e i contatti a destra (committente, 2026-10-08):
   le due colonne non si allargano, lo spazio fra loro lo da' `space-between`. */
.site-footer .col-brand { flex: none; }

.site-footer .col { flex: none; }

.site-footer p { margin: 0 0 14px; }

.site-footer .footer-logo {
	height: 92px;
	width: auto;
	flex: none;
}

.site-footer .link-strong {
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.5;
}

.site-footer .contact-note {
	font-size: 13.5px;
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* La banda in fondo: Privacy e Cookie Policy e copyright, come nell'as-is. */
.site-footer__fondo {
	border-top: 1px solid var(--color-border);
}

.site-footer .site-footer__legale {
	max-width: var(--layout-maxw-wide);
	margin: 0 auto;
	padding: 16px var(--layout-gutter);
	font-size: 12.5px;
	color: var(--color-text-muted);
	text-align: center;
}

.site-footer .site-footer__legale a {
	color: inherit;
	font-weight: 600;
}

/* -------------------------------------------------- Banner di pagina ------ */

.page-banner {
	background: var(--color-banner);
	color: var(--color-on-banner);
	padding: 44px var(--layout-gutter);
	text-align: center;
}

.page-banner h1 {
	margin: 0;
	font-weight: 300;
	font-size: clamp(30px, 9vw, 52px);
	letter-spacing: .5px;
}

.page-banner .crumb {
	margin: 14px 0 0;
	font-size: 12px;
	letter-spacing: 1.5px;
	color: var(--color-on-banner-muted);
	text-transform: uppercase;
}

/* «Home» e' un link da M5.0: la briciola era testo non cliccabile, cioe'
   decorativa. ⚠️ Il colore va DICHIARATO, e per la stessa ragione che ha morso
   la sidebar dell'area riservata: le regole generiche `a` e `a:hover` di questo
   file sono piu' specifiche (0,0,1 e 0,1,1) e renderebbero il link ARANCIONE
   SU ORO, dentro un banner dove il testo attorno e' bruno. Sottolineato perche'
   su fondo colorato il solo cambio di tinta non basta a dire «qui si clicca». */
.page-banner .crumb a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-banner .crumb a:hover,
.page-banner .crumb a:focus-visible {
	color: var(--color-on-banner);
}

/* ------------------------------------------------- Sezioni e utility ------ */

.section {
	max-width: var(--layout-maxw);
	margin: 0 auto;
	padding: 44px var(--layout-gutter);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.eyebrow .rule {
	width: 34px;
	height: 2px;
	background: var(--color-action-primary);
}

.eyebrow .label {
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 12px;
	color: var(--color-text-muted);
}

/* Parola evidenziata nei titoli, es. «LA MIC IN UN CLICK» */
.hl { color: var(--color-accent); }

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

.btn {
	display: inline-block;
	font-family: inherit;
	font-weight: 700;
	font-size: 12.5px;
	text-decoration: none;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	line-height: 1.2;
	/* Target touch ≥ 44px */
	padding: 14px 24px;
}

.btn:hover {
	text-decoration: none;
	filter: brightness(.92);
}

/* ⚠️ GLI STATI SI DICHIARANO. Su un `<a class="btn btn--primary">` la regola
   generica `a:hover` (0,1,1) batte la classe da sola (0,1,0): all'hover il
   testo diventava oro scuro sul fondo oro, cioè «si impasta tutto» (2026-10-05).
   Con `:hover` / `:focus-visible` la variante sale a 0,2,0 e il testo tiene il
   suo colore; cambia solo il fondo, col filtro di `.btn:hover`. */
.btn--primary,
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-action-primary);
	color: var(--color-on-action-primary);
}

.btn--secondary,
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--color-action-secondary);
	color: var(--color-on-action-secondary);
}

.btn--tertiary,
.btn--tertiary:hover,
.btn--tertiary:focus-visible {
	background: var(--color-action-tertiary);
	color: var(--color-on-action-tertiary);
}

.btn--danger,
.btn--danger:hover,
.btn--danger:focus-visible {
	background: var(--color-action-danger);
	color: var(--color-on-action-danger);
}

.btn--pill { border-radius: var(--radius-pill); }

/* ---------------------------------------------------------- Responsive ---- */

/* 760px: soglia oltre la quale la navigazione torna orizzontale.
   Ripetuta come letterale perché le custom properties non sono ammesse nelle
   media query; il valore di riferimento è --layout-nav-breakpoint. */
@media (max-width: 760px) {

	.site-nav {
		position: fixed;
		inset: 0 0 auto 0;
		top: calc(var(--layout-topbar-h) + var(--layout-nav-h));
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--color-surface);
		border-bottom: 1px solid var(--color-border-soft);
		box-shadow: var(--shadow-nav);
		padding: 8px 0;
		transform: translateY(-140%);
		transition: transform .25s ease;
		z-index: 50;
	}

	.site-nav.open { transform: translateY(0); }

	.site-nav a {
		padding: 14px 24px;
		border-bottom: 1px solid var(--color-border-soft);
	}

	.site-nav a.is-active::after { display: none; }

	.site-logo__img { height: 54px; }

	.site-topbar__roma { height: 19px; }

	.hamburger { display: flex; }
}

/* Chi ha chiesto meno animazioni non deve subire lo scorrimento del menu. */
@media (prefers-reduced-motion: reduce) {
	.site-nav { transition: none; }
}

/* ================================================================================
   COMPONENTI DI PAGINA

   Nel wireframe il contenuto delle pagine era interamente a stili inline: si
   contavano centinaia di style="" con colori e misure scritti dentro il markup.
   Qui diventano classi. È la differenza fra un cambio di veste che costa
   tokens.css e uno che costa la riapertura di ogni pagina.
   ================================================================================ */

.section--narrow { max-width: 900px; }

.section--tight { padding-top: 20px; }

/* Fascia a fondo grigio che alterna il ritmo delle sezioni */
.band {
	background: var(--color-surface-bar);
	padding: 40px var(--layout-gutter);
}

.band__inner {
	max-width: var(--layout-maxw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	align-items: center;
}

.section-title {
	margin: 0 0 12px;
	font-weight: 800;
	font-size: 32px;
	text-transform: uppercase;
	line-height: 1.15;
}

.section-title--sm { font-size: 28px; }

.section-title--lg { font-size: 34px; }

.subtitle {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 21px;
}

.lead {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--color-text-body);
	line-height: 1.6;
	max-width: 840px;
}

/* Enfasi nel testo corrente (Home, «La card per vivere i luoghi della cultura»):
   sottolineato SENZA essere un link, e la nota fra parentesi in corsivo e piu'
   piccola. Classi e non `style=`, che la guardia dei template vieta. */
.sottolineato {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nota-piccola {
	font-style: italic;
	font-size: .85em;
}

/* Sottotitolo sotto il titolo di sezione: corpo del .lead che gli sta sotto, ma
   in grassetto (2026-10-16, era 13,5px a peso 500). Oggi lo usa solo
   shared/fragments/testi-prodotto :: sottotitolo, cioè le schede di prodotto
   delle due aree. Introdotta da M5.0 per la scheda di prodotto dell'area
   riservata, e vive qui perche' public.css e' il VOCABOLARIO COMUNE alle due
   aree (decisione D1): riservata.css contiene il solo guscio, e una classe
   tipografica dentro un foglio che si dichiara «solo la sidebar» sarebbe il
   primo passo per ricostruire public.css un pezzo per volta. */
.section-sub {
	margin: -4px 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text-strong);
	line-height: 1.5;
	max-width: 840px;
}

.prose {
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text-body);
}

.muted { color: var(--color-text-disabled); }

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Bottoni al centro: le pagine di esito, in attesa dei loro nuovi design. */
.cta-row--centrata { justify-content: center; }

.grid {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	align-items: flex-start;
}

.grid--center { align-items: center; }

.grid--wide { gap: 40px; }

.grid__col { flex: 1 1 320px; }

.grid__col--media {
	flex: 1 1 300px;
	max-width: 440px;
}

/* LA SCHEDA DI PRODOTTO a tre aree (2026-10-16): tessera, testa (prezzo,
   occhiello, titolo, sottotitolo) e corpo (testo, form, bottone), figlie
   dirette nell'ordine del DOM.
   - `.scheda`: la tessera a sinistra su due righe, testa e corpo a destra.
     È l'aspetto della scheda pubblica del regalo.
   - `.scheda--compatta`: per la colonna dell'area riservata, larga la metà.
     Accanto alla tessera resta solo la testa, che è corta, e il corpo va
     sotto a tutta larghezza: prima il testo diventava un trafiletto lungo e
     stretto accanto a una tessera che galleggiava nel vuoto.
   Sotto i 640 px una colonna sola, in quell'ordine. */
.scheda {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	grid-template-areas:
		"media testa"
		"media corpo";
	gap: 0 40px;
	align-items: start;
}

.scheda__media { grid-area: media; }
.scheda__testa { grid-area: testa; }
.scheda__corpo { grid-area: corpo; }

.scheda--compatta {
	grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
	grid-template-areas:
		"media testa"
		"corpo corpo";
	gap: 22px 28px;
	/* In ALTO e non sul fondo della tessera (2026-10-16): con titoli lunghi
	   e corti l'occhiello cadeva ogni volta a un'altezza diversa, e le quattro
	   schede dell'area riservata sembravano quattro pagine diverse. La tessera
	   ha la stessa altezza ovunque, quindi così occhiello e titolo partono
	   dallo stesso punto. */
	align-items: start;
}

.scheda--compatta .scheda__testa > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.scheda,
	.scheda--compatta {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"testa"
			"corpo";
		gap: 20px;
	}

	.scheda__media { max-width: 440px; }
}

/* --------------------------------------------------------------- Hero ----- */

/* L'oro e' il fondo della SEZIONE: una slide senza sfondo e' trasparente e lo
   lascia vedere (M4.13: «senza immagini di background, lo sfondo oro come
   adesso»). Il resto del carosello sta nel blocco CAROSELLO, piu' sotto. */
.hero {
	background: linear-gradient(180deg, var(--color-hero-from), var(--color-hero-to));
	color: var(--color-on-hero);
}

/* ------------------------------------------------------- Tessera MIC ------ */
/* L'artwork ufficiale, un'immagine per scheda (shared/fragments/tessera.html).
   Bollino e rotazione sono dentro i file. La card CON I DATI sta in
   riservata.css. */

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

/* ------------------------------------------------- Schede di azione ------- */

.action-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

/* Colonna flex col bottone a `margin-top: auto`, come nell'handoff (P1 Home,
   p-home-d): i testi hanno altezze diverse, e senza questo i tre bottoni
   stavano ciascuno alla sua altezza. */
.action-card {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--color-card-action);
	padding: 28px 22px;
	text-align: center;
}

.action-card--alt { background: var(--color-card-action-alt); }

.action-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--color-card-action-ring);
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.action-card__title {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 19px;
}

.action-card__text {
	margin: 0 0 16px;
	font-size: 12.5px;
	color: var(--color-on-card-action);
	line-height: 1.5;
}

.action-card .btn {
	margin-top: auto;
	background: var(--color-surface);
	color: var(--color-text);
	padding: 9px 20px;
	font-size: 12px;
}

/* ---------------------------------------------- Riquadro di richiamo ------ */

/* Fondo BIANCO, su richiesta del committente (2026-10-05): l'handoff lo dà
   crema, e sul grigio della pagina si leggeva «giallastro». Il bordo crema
   resta, e lo stacca dal fondo. */
.notice {
	background: var(--color-surface);
	border: 1px solid var(--color-notice-border);
	border-radius: 8px;
	margin-top: 14px;
	padding: 22px;
	text-align: center;
}

.notice__title {
	margin: 0 0 6px;
	color: var(--color-heading-gold);
	font-weight: 700;
	font-size: 17px;
}

.notice__text {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* ------------------------------------------------------------- Liste ----- */

.list-note {
	margin: 14px 0 0;
	font-size: 11.5px;
	color: var(--color-text-hint);
}

.claim-centered {
	text-align: center;
	color: var(--color-heading-gold);
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 26px;
}

.price {
	margin: 0 0 16px;
	font-weight: 700;
	font-size: 18px;
}

/* ----------------------------------------------- Documenti scaricabili ---- */

.doc-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--color-action-secondary);
	color: var(--color-on-action-secondary);
	font-weight: 700;
	padding: 15px 22px;
	text-decoration: none;
	font-size: 12.5px;
	text-transform: uppercase;
	border-radius: 2px;
}

.doc-link:hover {
	color: var(--color-on-action-secondary);
	text-decoration: none;
	filter: brightness(1.15);
}

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

.faq-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	margin-bottom: 12px;
	padding: 16px 20px;
}

.faq-item summary {
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	color: var(--color-text);
}

/* La risposta è HTML della redazione (M6.16): paragrafi, elenchi, grassetti
   e link. ⚠️ Le regole hanno due classi DI PROPOSITO (D15): le generiche
   di questo foglio, `a` e `a:hover` comprese, hanno già reso illeggibili tre
   componenti, e qui il componente deve vincere per specificità, non per
   ordine. I link sono sottolineati: dentro un testo il colore da solo non
   basta a riconoscerli. */
.faq-item .faq-item__risposta {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--color-text-soft);
	line-height: 1.6;
}

.faq-item .faq-item__risposta p { margin: 0 0 10px; }

.faq-item .faq-item__risposta ul,
.faq-item .faq-item__risposta ol { margin: 0 0 10px; padding-left: 20px; }

.faq-item .faq-item__risposta li { margin-bottom: 4px; }

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

.faq-item .faq-item__risposta strong { color: var(--color-text); }

.faq-item .faq-item__risposta a {
	color: var(--color-accent);
	text-decoration: underline;
}

.faq-item .faq-item__risposta a:hover { color: var(--color-accent-hover); }

.faq-contact {
	margin: 24px 0 0;
	font-size: 13.5px;
	color: var(--color-text-muted);
}

/* ------------------------------------------------- Alias deprecati -------- */

/* Nomi cromatici dell'handoff, mantenuti SOLO perché il markup del wireframe si
   possa incollare senza rompersi. Nei template non vanno usati: il guard di
   build (TemplatesGuardTest) li rifiuta, perché a ogni cambio di
   veste costringerebbero a rinominare le classi in tutte le pagine.
   Da rimuovere quando tutte le pagine saranno portate. */

.btn-gold { /* usare .btn .btn--primary */
	display: inline-block;
	background: var(--color-action-primary);
	color: var(--color-on-action-primary);
	font-weight: 700;
	padding: 11px 24px;
	border-radius: var(--radius-sm);
	font-size: 12.5px;
	text-decoration: none;
}

.btn-dark { /* usare .btn .btn--secondary */
	display: inline-block;
	background: var(--color-action-secondary);
	color: var(--color-on-action-secondary);
	font-weight: 700;
	padding: 14px 24px;
	text-decoration: none;
	font-size: 12.5px;
}

/* ============================================================================
   ACCESSO E PASSWORD (M3.2)

   Le prime pagine con un form del sito pubblico. Nel prototipo dell'handoff
   erano tutte inline style: qui sono classi, e i valori stanno in tokens.css
   (decisione 28) — la guardia TemplatesGuardTest fa fallire il build se
   qualcuno li riporta nel markup.
   ========================================================================== */

.auth {
	max-width: 460px;
	margin: 0 auto;
}

.auth-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 28px;
}

.auth-card + .auth-card { margin-top: 20px; }

.auth-card__title {
	margin: 0 0 18px;
	font-weight: 700;
	font-size: 20px;
}

.auth-card__text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.auth-note {
	max-width: 460px;
	margin: 20px auto 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.auth-link {
	font-size: 13px;
	color: var(--color-accent);
	text-decoration: none;
}

.auth-link:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* --- campi ---------------------------------------------------------------- */

.field { margin-bottom: 16px; }

.field__label {
	display: block;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-field-label);
	margin-bottom: 7px;
}

.field__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-family: inherit;
	background: var(--color-field-surface);
	color: var(--color-text);
}

.field__input:focus {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 1px;
	border-color: var(--color-field-focus);
}

/*
 * ⚠️ Un campo in sola lettura si deve VEDERE (M5.3): nel profilo, con una card,
 * i dati identitari sono `disabled`, e senza questa regola erano identici a
 * quelli modificabili — si provava a scriverci. Lo sfondo cambia, il TESTO NO:
 * sono i dati della persona, e devono restare leggibili quanto gli altri.
 */
.field__input:disabled {
	/* Il token dei controlli disabilitati: `--color-surface-alt` era misurato
	   a 247,246,244 su bianco, cioè indistinguibile a occhio. */
	background: var(--color-form-disabled);
	border-color: var(--color-form-disabled-line);
	color: var(--color-text);
	cursor: not-allowed;
}

.field__input--errato { border-color: var(--color-error); }

.field__errore {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--color-error);
}

.field--check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 20px;
}

/* --- esiti ---------------------------------------------------------------- */

.esito {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	line-height: 1.55;
}

.esito--errore {
	background: var(--color-error-surface);
	border: 1px solid var(--color-error-border);
	color: var(--color-error);
}

.esito--conferma {
	background: var(--color-confirm-surface);
	border: 1px solid var(--color-confirm-border);
	color: var(--color-text);
}

.esito__titolo { font-weight: 700; }

.esito__elenco { margin: 6px 0 0; padding-left: 18px; }

/* --- area riservata provvisoria ------------------------------------------- */

.area-provvisoria dt {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-top: 12px;
}

.area-provvisoria dd { margin: 4px 0 0; font-size: 15px; }

/* Logout: un form che deve sembrare un link (M3.2). Il POST e' obbligatorio —
   un logout in GET lo fa scattare un <img src>. */
.logout-form { display: inline; margin: 0; }

button.logout {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}


/* =========================================================================
   CAROSELLO DI COPERTINA (M6.5; rifatto in M4.13 sull'handoff «Nuovo slider
   rosa», `_incoming/20261001_LAST_MIC FRONT END SLIDER-handoff`)
   =========================================================================

   ⚠️ LA DEGRADAZIONE E' NELLA STRUTTURA, NON IN UNA CLASSE.

   Il track e' largo N*100% dentro una finestra con `overflow:hidden` e parte
   a translateX(0): senza JavaScript si vede la PRIMA SLIDE, intera, e le altre
   sono fuori campo. I comandi compaiono solo con lo script: senza, sarebbero
   comandi che non comandano.

   ⚠️ DA M4.13 LA SLIDE E' A TUTTA LARGHEZZA, perche' porta il suo sfondo: la
   larghezza massima (1120) e' del contenuto, `.hero__inner`, non della
   finestra. Misure dall'handoff §3-4: desktop alto 560, mobile 640.

   ⚠️ IL COLORE DEI TESTI E' `--hero-testo`, scritto per slide da un <style> col
   nonce nella Home (M4.13 D2). Quando la slide non ne ha uno valgono i token. */

.hero { position: relative; overflow: hidden; }

.hero__finestra { overflow: hidden; }

/* ⚠️ Il track non ha una larghezza propria: gliela danno le slide, che sono
   larghe quanto la finestra. Cosi' il numero di slide non entra nel CSS e non
   entra nel markup — e lo spostamento e' sempre di un multiplo tondo di 100%. */
.hero__track {
	display: flex;
	transition: transform .45s ease;
	/* Prepara il layer del track PRIMA che l'animazione parta: senza, il primo
	   scorrimento paga la promozione a layer nel momento sbagliato. */
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	/* Chi ha chiesto meno movimento non lo riceve: la slide cambia, ma senza
	   scorrimento (e lo script parte in pausa). */
	.hero__track { transition: none; }
}

.hero__slide {
	flex: 0 0 100%;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	color: var(--hero-testo, var(--color-on-hero));
}

/* ---- Lo sfondo: un <picture> a tutta area ------------------------------ */

.hero__sfondo {
	position: absolute;
	inset: 0;
}

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

/* ---- Il contenuto: testo a sinistra, card a destra --------------------- */

/* Il fondo di 96px lascia il posto alla barra dei comandi, che sta in basso al
   centro e non deve coprire la CTA. */
.hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	/* 1120 di CONTENUTO (handoff §3), piu' il margine laterale: a 1440 il testo
	   comincia a 160px, come nel render. */
	max-width: calc(1120px + 2 * var(--layout-gutter));
	margin: 0 auto;
	padding: 48px var(--layout-gutter) 96px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.hero__text { min-width: 0; }

.hero__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 12px;
	text-transform: uppercase;
	/* ⚠️ Lo stesso ripiego del titolo, non il bruno di M6.5: col colore
	   predefinito i due si vedevano diversi, e l'occhiello sembrava
	   «impastato» (seconda tornata di M4.13). */
	color: var(--hero-testo, var(--color-on-hero));
}

.hero__kicker-rule {
	flex: none;
	width: 44px;
	height: 2px;
	background: currentColor;
}

/* ⚠️ `.hero__slide` davanti: le regole generiche di public.css sui titoli e sui
   link battono una classe sola, e il testo invisibile in questa EPIC e'
   successo tre volte. Qui il colore si eredita dalla slide, di proposito.

   `white-space: pre-line` non e' cosmetica: il titolo e' UN CAMPO SOLO
   (decisione 67) e gli a-capo del redattore sono contenuto.

   ⚠️ NESSUN `line-clamp` (utente, 2026-10-05): il limite di righe e' quello
   degli a-capo, e lo impone il BACKOFFICE (3 per il titolo, 5 per il
   sottotitolo). Qui il testo non si tronca mai con «…». */
.hero__slide .hero__title {
	margin: 0 0 20px;
	font-weight: 800;
	font-size: 48px;
	line-height: 1.08;
	color: inherit;
	white-space: pre-line;
}

.hero__slide .hero__testo {
	max-width: 470px;
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.6;
	color: inherit;
	white-space: pre-line;
}

.hero__slide .hero__cta,
.hero__slide .hero__cta:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 15px 28px;
	border-radius: var(--radius-hero-cta);
	background: var(--color-hero-cta);
	color: var(--color-on-hero-cta);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.hero__slide .hero__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.hero__cta-icona { flex: none; }

/* ---- L'immagine in primo piano (handoff §4) --------------------------- */

/* ⚠️ NESSUNA ROTAZIONE (seconda tornata di M4.13, utente): la PNG e' gia'
   disegnata in prospettiva, e la rotazione CSS la storceva due volte. Resta
   lo spostamento verso l'alto.
   ⚠️ NESSUNA OMBRA (2026-10-05, utente): ne' la doppia ombra portata ne'
   l'ellisse a terra del §4 dell'handoff. L'immagine la sceglie il redattore,
   e un'ombra pensata per la card non sta bene su qualunque PNG: se serve, va
   disegnata nel file.
   `translateZ(0)` mette l'immagine su un layer suo, cosi' non trema mentre il
   track scorre. */
.hero__primo-piano {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 440px;
}

.hero__primo-piano-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: translateY(-14px) translateZ(0);
}


/* ---- I comandi: esistono solo se lo script c'e' ------------------------ */

.hero__comandi { display: none; }

.is-carosello-attivo .hero__comandi {
	position: absolute;
	left: 50%;
	bottom: 24px;
	z-index: 3;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
}

.hero__comando {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-hero-comando);
	color: var(--color-on-hero-comando);
	cursor: pointer;
}

.hero__comando svg { display: block; }

.hero__comando:focus-visible {
	outline: 2px solid var(--color-on-hero-comando);
	outline-offset: -5px;
}

/* Pausa o riproduci: lo stato lo scrive lo script, l'icona lo segue.
   ⚠️ Due classi davanti a ogni icona, e non una: `.hero__comando svg` (0,1,1)
   batteva `.hero__icona-riproduci` (0,1,0), e durante lo scorrimento si
   vedevano tutte e due (seconda tornata di M4.13). */
.hero__comando .hero__icona-riproduci { display: none; }
.hero__comando--pausa.is-in-pausa .hero__icona-pausa { display: none; }
.hero__comando--pausa.is-in-pausa .hero__icona-riproduci { display: block; }

.hero__pallini {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Il bottone e' piu' grande del pallino: e' il bersaglio del dito. Il pallino
   e' un anello, pieno quando la slide e' quella visibile (handoff §6), e ha il
   colore dei testi della slide. */
.hero__pallino {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	background: none;
	color: var(--hero-testo, var(--color-hero-pallino));
	cursor: pointer;
}

.hero__pallino::before {
	content: "";
	box-sizing: border-box;
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.hero__pallino.is-attivo::before { background: currentColor; }

.hero__pallino:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	border-radius: 50%;
}

/* Fra tablet e desktop stretto il titolo da 48px non sta in mezza colonna. */
@media (max-width: 960px) {
	.hero__slide .hero__title { font-size: 38px; }
}

/* ---- Telefono (handoff §3: alto 640, card in alto, CTA a tutta larghezza) */
@media (max-width: 640px) {
	.hero__slide {
		align-items: stretch;
		min-height: 640px;
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 0;
		padding: 20px 24px 92px;
	}

	.hero__primo-piano {
		order: -1;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: none;
		height: 250px;
		margin-bottom: 20px;
	}

	/* L'immagine sta nella fascia da 250px senza tagliarsi, larga l'86 %. */
	.hero__primo-piano-img {
		width: 86%;
		height: 100%;
		max-height: 250px;
		transform: translateY(-8px) translateZ(0);
	}


	.hero__slide .hero__title {
		margin-bottom: 12px;
		font-size: 28px;
		line-height: 1.12;
	}

	.hero__slide .hero__testo {
		margin-bottom: 20px;
		font-size: 16px;
		line-height: 1.5;
	}

	.hero__slide .hero__cta,
	.hero__slide .hero__cta:hover {
		display: flex;
		width: 100%;
	}

	/* Target da 44x44 (handoff §6). */
	.is-carosello-attivo .hero__comandi { bottom: 20px; gap: 6px; }
	.hero__comando { width: 44px; height: 44px; }
	.hero__pallini { gap: 0; }
	.hero__pallino { width: 44px; height: 44px; }

}


/* =========================================================================
   HOME SU UNA PAGINA SOLA (M4.11)
   =========================================================================

   Vantaggi, Card, Convenzioni e Documenti sono sezioni della home con
   un'ancora, e il menu le raggiunge con link veri («/#vantaggi»): lo
   scorrimento morbido e' qui sopra, in «Base». Testi e misure dalla frame
   `p-home-d` dell'handoff del 2026-09-22; le convenzioni dal layout «Enti»
   dell'handoff Luoghi e Convenzioni del 2026-09-25. */

/* Un po' d'aria sopra la sezione raggiunta da un'ancora: l'header non e'
   fisso, quindi non c'e' una barra da scavalcare, ma il titolo incollato al
   bordo della finestra si legge male. */
.home-sezione { scroll-margin-top: 12px; }

/* ---- Icone --------------------------------------------------------------

   ⚠️ L'icona e' una MASCHERA e il colore e' il fondo dell'elemento, preso
   dal `color` del contenitore: cosi' una sola icona serve fondi diversi, e il
   colore resta in tokens.css. Un SVG in <img> ignorerebbe currentColor
   (vedi img/PROVENIENZA.md). */
.icona {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icona) center / contain no-repeat;
	mask: var(--icona) center / contain no-repeat;
}

/* Le tre azioni della Home (sito e /app): le icone dell'app as-is, quelle del suo
   tutorial (2026-10-26). Sono PNG di un colore solo, e come maschera valgono quanto un SVG. */
.icona--ticket     { --icona: url("../img/ticket_icon.png"); }
.icona--clessidra  { --icona: url("../img/renew_icon.png"); }
.icona--regalo     { --icona: url("../img/gift_icon.png"); }
/* I PNG hanno un margine trasparente (il disegno è l'80 % del file), gli SVG no: a 25 px
   il disegno torna grande quanto quello di prima a 20. */
.icona--ticket, .icona--clessidra, .icona--regalo { width: 25px; height: 25px; }
.icona--persone    { --icona: url("../img/people-fill.svg"); }
.icona--borsa      { --icona: url("../img/bag-fill.svg"); }
.icona--segnalibri { --icona: url("../img/bookmarks-fill.svg"); }
.icona--pdf        { --icona: url("../img/file-pdf-fill.svg"); }

/* Il cerchio delle schede di azione aveva un glifo da 22px: ora un'icona. */
.action-card__icon { color: var(--color-on-card-action); }

/* ---- Bottone chiaro: «Prenota ora!» --------------------------------------

   Fondo bianco e testo arancione, come nel prototipo. ⚠️ Gli stati vanno
   dichiarati: `a:hover` (0,1,1) batte la classe da sola. L'hover è quello
   dell'handoff (P1 Home, r. 121): crema chiaro, bordo oro, testo oro scuro —
   senza il filtro di `.btn:hover`, che sul bianco darebbe un grigio. */
.btn--chiaro {
	background: var(--color-surface);
	color: var(--color-accent);
	border: 1px solid var(--color-border);
}

.btn--chiaro:hover,
.btn--chiaro:focus-visible {
	filter: none;
	background: var(--color-chiaro-hover);
	border-color: var(--color-chiaro-hover-line);
	color: var(--color-heading-gold);
}

.notice .btn--chiaro { font-size: 13px; }

/* ---- «La MIC in un click» (#vantaggi) ------------------------------------ */

.home-sezione .lead { max-width: 900px; }

.home-click {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
	margin-top: 22px;
}

/* Alla sua proporzione, mai ritagliata: l'immagine ha del testo dentro. */
.home-click__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.home-click__vantaggi h2 { font-size: 21px; font-weight: 700; }

/* ---- «Acquistala online» -------------------------------------------------- */

.home-online { align-items: center; }

.home-online__testo { font-size: 17px; line-height: 1.7; }

/* La frase in chiusura, che nell'as-is e' un titoletto (h4). */
.home-online__slogan {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

/* Come nell'as-is: l'immagine intera, alla sua proporzione (la danno
   `width`/`height` del tag), con gli angoli morbidi. Fino al 2026-10-08 era un
   riquadro basso ritagliato, dal prototipo. */
.home-online__img {
	flex: 1 1 320px;
	min-width: 0;
	width: 100%;
	height: auto;
	border-radius: var(--radius-foto);
}

/* ---- «La MIC Card» (#card) ----------------------------------------------- */

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

.riquadro {
	display: flex;
	/* Va a capo solo la nota (`.riquadro__nota`, 100 %): il corpo ha base 0
	   (`flex: 1`), quindi resta accanto all'icona. */
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
}

.riquadro__icona {
	width: 102px;
	height: 102px;
	flex: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface-bar);
	color: var(--color-text);
}

.riquadro__icona .icona { width: 56px; height: 56px; }

.riquadro__corpo { flex: 1; min-width: 0; }

.riquadro__titolo {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
}

.riquadro__elenco {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.7;
}

.riquadro__elenco li + li { margin-top: 6px; }

/* La nota con l'asterisco sotto l'elenco (2026-10-19). Non è `.list-note`:
   quel grigio (#999) sul bianco del riquadro fa 2,85:1, sotto il 4,5 che
   serve a un testo così piccolo. Il grigio attenuato fa più di 5:1.
   È figlia diretta del riquadro e prende la riga intera, così parte dal bordo
   sinistro dell'icona e non dalla colonna del testo. */
.riquadro__nota {
	flex: 0 0 100%;
	align-self: stretch;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

/* ---- La mappa dei luoghi (#dove, M4.12) -----------------------------

   Misure dall'handoff Luoghi e Convenzioni del 2026-09-25: mappa al 62% e
   elenco al 38%, alti 520 px; su mobile mappa alta 320 px e foglio che risale.
   ⚠️ Gli elementi che lo script mostra e nasconde hanno un `display` proprio,
   che batterebbe quello di [hidden]: la regola qui sotto lo rimette in testa,
   solo dentro la sezione e i suoi due dialog. */

.luoghi [hidden],
.luogo-dettaglio [hidden] { display: none !important; }

/* Fondo bianco: la stacca dalla pagina grigia e dalle Convenzioni (handoff). */
.luoghi { padding: 56px var(--layout-gutter); background: var(--color-surface); }

.luoghi__inner {
	max-width: var(--layout-maxw);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.luoghi__testa {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.luoghi__intro { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.6; }

.luoghi__posizione {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	letter-spacing: .5px;
}

.luoghi__posizione .icona { width: 15px; height: 15px; }

.luoghi__messaggio {
	margin: 0;
	max-width: 520px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.luoghi__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.luoghi__corpo {
	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	gap: 24px;
	align-items: start;
}

.luoghi__colonna-mappa {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.luoghi__mappa {
	position: relative;
	height: 520px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-luoghi-mappa);
	overflow: hidden;
}

.luoghi__canvas { position: absolute; inset: 0; }

.luoghi__riquadro {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 32px;
	text-align: center;
	background: var(--color-luoghi-riquadro);
	color: var(--color-text);
}

.luoghi__riquadro p { margin: 0; max-width: 340px; font-size: 14.5px; line-height: 1.6; }

.luoghi__riquadro .luoghi__riquadro-nota { font-size: 13px; color: var(--color-text-muted); }

.luoghi__termini {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.luoghi__revoca {
	margin-left: 6px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--color-accent);
	text-decoration: underline;
	cursor: pointer;
}

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

/* --- l'elenco --- */

.luoghi__colonna-elenco {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 520px;
	min-width: 0;
}

.luoghi__ricerca { position: relative; }

.luoghi__campo {
	width: 100%;
	min-height: 44px;
	padding: 12px 40px 12px 14px;
	border: 1px solid var(--color-luoghi-campo);
	border-radius: var(--radius-sm);
	background: var(--color-field-surface);
	font: inherit;
	font-size: 14px;
	color: var(--color-text);
}

/* Il bottone «×» e' nostro: quello del browser sui campi search si toglie. */
.luoghi__campo::-webkit-search-cancel-button { display: none; }

.luoghi__campo:focus-visible,
.luoghi__ordine:focus-visible {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 1px;
}

.luoghi__svuota {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	background: none;
	border: 0;
	font-size: 18px;
	color: var(--color-text-muted);
	cursor: pointer;
}

.luoghi__barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.luoghi__conteggio { margin: 0; font-size: 15px; color: var(--color-text-muted); }

.luoghi__ordine {
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--color-luoghi-campo);
	border-radius: var(--radius-sm);
	background: var(--color-field-surface);
	font: inherit;
	font-size: 12.5px;
	color: var(--color-text);
}

.luoghi__elenco {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 4px 4px 4px 0;
	list-style: none;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.luoghi__vuoto { padding: 24px 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.luoghi__vuoto p,
p.luoghi__vuoto { margin: 0; font-size: 14px; color: var(--color-text-muted); }

.luoghi__azzera {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-accent);
	cursor: pointer;
}

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

/* Una card dell'elenco: tutta la card e' il bottone. */
.luogo-card {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font: inherit;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

.luogo-card:hover { border-color: var(--color-luoghi-piu-hover-line); }

.luogo-card.is-scelto { border: 2px solid var(--color-luoghi-scelto); padding: 17px 19px; }

.luogo-card:focus-visible {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 2px;
}

.luogo-card__testo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.luogo-card__nome { font-weight: 600; font-size: 18px; color: var(--color-luoghi-nome); }

.luogo-card__distanza { font-size: 13px; color: var(--color-text-muted); }

.luogo-card__simbolo {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-luoghi-simbolo);
	color: var(--color-luoghi-icona);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* La categoria: pallino + icona + testo (§2: tutti uguali fino alla tassonomia). */
.luogo-categoria {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

.luogo-categoria .icona { width: 14px; height: 14px; }

.luogo-categoria__pallino {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-pin);
}

/* --- il popup del pin, e il foglio mobile --- */

.luogo-popup {
	display: flex;
	flex-direction: column;
	max-height: 440px;
	width: 300px;
	max-width: 100%;
	font-family: var(--font-body);
	color: var(--color-text);
}

.luogo-popup__testa {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	padding: 4px 0 8px;
}

.luogo-popup__titolo { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.25; }

.luogo-popup__chiudi {
	flex: none;
	width: 32px;
	height: 32px;
	margin: -6px -8px 0 0;
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
}

.luogo-popup__corpo {
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.luogo-popup .luogo-categoria { font-size: 13px; }

.luogo-sito,
.luogo-sito:hover {
	align-self: flex-start;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-accent);
}

.luogo-sito:hover { color: var(--color-accent-hover); }

.luogo-popup__indirizzo { margin: 0; font-size: 13px; color: var(--color-text-muted); }

/* «Troncato con …» a tre righe (§2): il testo intero e' nel dettaglio. */
.luogo-popup__info,
.luogo-popup__convenzione-testo {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.luogo-popup__convenzione-testo > * { margin: 0; }

.luogo-popup__distanza { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }

.luogo-popup__convenzione {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--color-luoghi-separatore);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.luogo-popup__convenzione-titolo { margin: 0; font-weight: 700; font-size: 13px; }

/* «Mostra di più»: il bottone secondario del portale. Stati DICHIARATI. */
.luogo-piu {
	align-self: flex-start;
	margin-top: 6px;
	min-height: 40px;
	padding: 10px 18px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	font: inherit;
	font-weight: 700;
	font-size: 12.5px;
	color: var(--color-accent);
	cursor: pointer;
}

.luogo-piu:hover {
	background: var(--color-luoghi-piu-hover);
	border-color: var(--color-luoghi-piu-hover-line);
	color: var(--color-accent-hover);
}

.luogo-piu:active { background: var(--color-luoghi-piu-active); }

.luogo-piu:focus-visible,
.luogo-popup__chiudi:focus-visible {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 2px;
}

.luoghi__foglio {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	max-height: 55%;
	overflow-y: auto;
	padding: 18px 20px 22px;
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	border-radius: 14px 14px 0 0;
	box-shadow: var(--shadow-lg);
}

/* La maniglia del foglio: solo un segno, il foglio si chiude con «×». */
.luoghi__foglio::before {
	content: "";
	display: block;
	width: 36px;
	height: 4px;
	margin: -8px auto 10px;
	border-radius: 2px;
	background: var(--color-luoghi-maniglia);
}

.luoghi__foglio .luogo-popup { width: auto; max-height: none; }

/* La posizione dell'utente: cerchio blu con alone, senza simbolo (spec §8). */
.luoghi__utente {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-luoghi-utente);
	border: 2px solid var(--color-pin-bordo);
	box-shadow: 0 0 0 7px var(--color-luoghi-utente-alone);
}

/* --- il dettaglio e il livello «Orari e accesso» (D6) --- */

.luogo-dettaglio {
	width: 720px;
	max-width: calc(100% - 48px);
	max-height: calc(100% - 96px);
	margin: 48px auto auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.luogo-dettaglio[open] { display: flex; flex-direction: column; }

.luogo-dettaglio::backdrop { background: var(--color-veil); }

body:has(.luogo-dettaglio[open]) { overflow: hidden; }

.luogo-dettaglio__testa {
	flex: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 26px 32px 18px;
	border-bottom: 1px solid var(--color-luoghi-separatore);
}

.luogo-dettaglio__titolo { margin: 0; font-weight: 700; font-size: 26px; line-height: 1.25; }

.luogo-dettaglio__chiudi {
	flex: none;
	width: 44px;
	height: 44px;
	margin: -8px -10px 0 auto;
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--color-text);
	cursor: pointer;
}

.luogo-dettaglio__chiudi:hover { color: var(--color-accent); }

.luogo-dettaglio__chiudi:focus-visible,
.luogo-indietro:focus-visible,
.luogo-link:focus-visible {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 2px;
}

.luogo-dettaglio__corpo {
	min-height: 0;
	overflow-y: auto;
	padding: 4px 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.luogo-righe { margin: 0; padding: 0; list-style: none; }

.luogo-riga {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-luoghi-separatore);
	font-size: 14.5px;
	line-height: 1.55;
}

.luogo-riga > .icona {
	justify-self: center;
	margin-top: 2px;
	color: var(--color-luoghi-icona);
}

.luogo-link,
.luogo-link:hover {
	justify-self: start;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: var(--color-accent);
	text-align: left;
	cursor: pointer;
}

.luogo-link:hover { color: var(--color-accent-hover); }

/* Un'email lunga su una riga sola, coi puntini: l'indirizzo intero e' nel link. */
.luogo-link--lungo {
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.luogo-social { display: flex; flex-wrap: wrap; gap: 10px; }

.luogo-social__voce {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-luoghi-social);
	position: relative;
}

/* Il glifo e' una maschera sopra il cerchio: il colore lo da' il token. */
.luogo-social__voce::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-on-luoghi-social);
	-webkit-mask: var(--icona) center / 16px 16px no-repeat;
	mask: var(--icona) center / 16px 16px no-repeat;
}

.luogo-social__voce:hover,
.luogo-social__voce:focus-visible { background: var(--color-luoghi-social-hover); }

.luogo-social__voce:focus-visible {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 2px;
}

.luogo-convenzione {
	padding: 18px 20px;
	border-radius: var(--radius);
	background: var(--color-luoghi-convenzione);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14.5px;
	line-height: 1.6;
}

.luogo-convenzione__titolo { margin: 0; font-weight: 700; }

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

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

.luogo-dettaglio__info {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	white-space: pre-line;
	text-wrap: pretty;
}

.luogo-indietro {
	min-height: 44px;
	margin: -8px 0 0 -8px;
	padding: 0 8px;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--color-accent);
	cursor: pointer;
}

.luogo-indietro:hover { color: var(--color-accent-hover); }

.luogo-orari__luogo { margin: -14px 0 0; font-size: 14.5px; color: var(--color-text-muted); }

.luogo-orari__tabella {
	margin: 0;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	font-size: 14.5px;
	line-height: 1.55;
}

.luogo-orari__tabella dt,
.luogo-orari__tabella dd {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-luoghi-separatore);
}

/* Lo spazio fra giorno e orari e' un padding, non un column-gap: il bordo
   della riga deve correre continuo sotto le due colonne. */
.luogo-orari__tabella dt { padding-right: 24px; font-weight: 600; }

.luogo-orari__sottotitolo { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; }

/* Gli a capo della redazione restano, e un URL lungo va a capo dove serve. */
.luogo-orari__accesso-testo {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* Le icone della sezione (Bootstrap Icons, MIT: vedi img/PROVENIENZA.md). */
.icona--cartella { --icona: url("../img/folder2.svg"); }
.icona--pin      { --icona: url("../img/geo-alt.svg"); }
.icona--orologio { --icona: url("../img/clock.svg"); }
.icona--telefono { --icona: url("../img/telephone.svg"); }
.icona--busta    { --icona: url("../img/envelope.svg"); }
.icona--globo    { --icona: url("../img/globe.svg"); }
.icona--mirino   { --icona: url("../img/crosshair.svg"); }

.social--tiktok  { --icona: url("../img/tiktok.svg"); }

/* L'interruttore Mappa | Elenco esiste solo su mobile. */
.luoghi__interruttore { display: none; }

/* 760px come la navigazione: vedi --layout-nav-breakpoint. */
@media (max-width: 760px) {

	.luoghi { padding: 34px 16px; }

	.luoghi__intro { font-size: 14px; }

	.luoghi__posizione { align-self: stretch; justify-content: center; min-height: 44px; }

	.luoghi__interruttore {
		display: flex;
		border: 1px solid var(--color-luoghi-campo);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	.luoghi__vista {
		flex: 1;
		min-height: 44px;
		background: var(--color-surface);
		border: 0;
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		color: var(--color-text);
		cursor: pointer;
	}

	.luoghi__vista + .luoghi__vista { border-left: 1px solid var(--color-luoghi-campo); }

	.luoghi__vista[aria-pressed="true"] {
		background: var(--color-form-selected);
		box-shadow: inset 0 0 0 1px var(--color-form-selected-line);
	}

	.luoghi__corpo { display: block; }

	.luoghi__corpo.is-vista-mappa .luoghi__colonna-elenco,
	.luoghi__corpo.is-vista-elenco .luoghi__colonna-mappa { display: none; }

	.luoghi__mappa { height: 320px; }

	/* Vista Elenco: scorre la pagina, non la colonna (spec §10). */
	.luoghi__colonna-elenco { height: auto; }

	.luoghi__elenco { overflow: visible; }

	.luogo-card { padding: 16px 18px; }

	.luogo-card.is-scelto { padding: 15px 17px; }

	.luogo-card__nome { font-size: 17px; }

	/* Il dettaglio a schermo intero, senza velo (handoff §3). */
	.luogo-dettaglio {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border-radius: 0;
	}

	.luogo-dettaglio__testa { padding: 18px 16px 14px; }

	.luogo-dettaglio__titolo { font-size: 21px; line-height: 1.3; }

	.luogo-dettaglio__corpo { padding: 4px 16px 28px; gap: 20px; }

	.luogo-riga { gap: 12px; padding: 13px 0; font-size: 14px; }

	.luogo-social__voce { width: 44px; height: 44px; }
}

/* ---- Convenzioni in accordion (#convenzioni) ------------------------------ */

.convenzioni-home {
	background: var(--color-convenzioni);
	padding: 56px var(--layout-gutter) 60px;
}

.convenzioni-home__inner {
	max-width: var(--layout-maxw);
	margin: 0 auto;
}

/* Il titolo che era della mappa (2026-10-16): stile da .section-title. */
.convenzioni-home__titolo { margin: 0 0 20px; font-size: 34px; }

.convenzioni-home__intro,
.convenzioni-home__istruzione {
	margin: 0 0 14px;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.7;
}

.convenzioni-home__istruzione { font-style: italic; margin-bottom: 26px; }

.accordion { border-top: 1px solid var(--color-accordion-line); }

.accordion__voce { border-bottom: 1px solid var(--color-accordion-line); }

.accordion__intestazione { margin: 0; }

.accordion__testata {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	background: none;
	border: none;
	font-family: inherit;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

/* Senza JS il bottone non comanda niente: non deve sembrare cliccabile. */
.accordion:not(.is-attivo) .accordion__testata { cursor: default; }

.accordion__testata:focus-visible {
	outline: 2px solid var(--color-action-primary);
	outline-offset: 2px;
}

.accordion__linea {
	width: 24px;
	height: 2px;
	flex: none;
	background: var(--color-text);
}

.accordion__titolo {
	flex: 1;
	font-weight: 400;
	font-size: 19px;
	letter-spacing: .8px;
	text-transform: uppercase;
}

/* Il chevron e' un bordo ruotato: nessun glifo, nessuna immagine. */
.accordion__chevron {
	width: 10px;
	height: 10px;
	flex: none;
	margin: 0 6px 4px;
	border-right: 2px solid var(--color-text);
	border-bottom: 2px solid var(--color-text);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.accordion__testata[aria-expanded="true"] .accordion__linea { background: var(--color-accent); }

.accordion__testata[aria-expanded="true"] .accordion__chevron {
	transform: translateY(4px) rotate(225deg);
}

/* Senza JS non c'e' niente da indicare: il chevron sparisce. */
.accordion:not(.is-attivo) .accordion__chevron { display: none; }

/* Il pannello e' un contenitore: dentro, l'elenco e (M6.15) la nota del blocco. */
.accordion__pannello {
	margin: 0;
	padding: 0 0 26px 58px;
}

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

.accordion__pannello[hidden] { display: none; }

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

.convenzione-voce__titolo { font-weight: 700; }

/* Il link su una riga sua, sotto il titolo; la descrizione sotto il link. */
.convenzione-voce .convenzione-voce__link {
	display: block;
	width: fit-content;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent);
}

.convenzione-voce .convenzione-voce__link:hover { color: var(--color-accent-hover); }

.convenzione-voce__descrizione { color: var(--color-text-soft); }

.convenzione-voce__descrizione p,
.convenzione-voce__descrizione li { font-size: 14.5px; }

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

/* La nota del blocco, in fondo al suo elenco (M6.15). */
.accordion__pannello .list-note { margin-top: 18px; }

/* ---- Documenti ------------------------------------------------------------ */

.doc-link .icona { width: 22px; height: 22px; }

/* ---- Telefono ------------------------------------------------------------- */

@media (max-width: 768px) {
	.home-click { grid-template-columns: minmax(0, 1fr); }

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

	.convenzioni-home { padding: 34px 16px 38px; }

	.convenzioni-home__titolo { font-size: 24px; line-height: 1.2; }

	.convenzioni-home__intro,
	.convenzioni-home__istruzione { font-size: 14px; }

	.accordion__testata { min-height: 56px; padding: 14px 0; gap: 12px; }

	.accordion__titolo { font-size: 15.5px; letter-spacing: .6px; line-height: 1.4; }

	.accordion__pannello { padding-left: 40px; }

	.convenzione-voce { font-size: 14px; }

	.convenzione-voce .convenzione-voce__link { min-height: 32px; display: flex; align-items: center; }
}

@media (max-width: 480px) {
	.riquadro { flex-direction: column; flex-wrap: nowrap; align-items: center; text-align: left; }

	/* In colonna la nota è già sotto: con `wrap` e base 100 % aprirebbe una
	   seconda colonna a destra, fuori dallo schermo (visto a 375 px). */
	.riquadro__nota { flex: none; }
}

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


/* Contenuto redazionale reso con th:utext: la veste la mettono questi
   selettori di discendenza, perché il contenuto arriva senza classi
   (RichTextSanitizer le rimuove tutte). */
.prose-ricco h2 {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 800;
	color: var(--color-text);
}

.prose-ricco h3 {
	margin: 20px 0 10px;
	font-size: 16px;
	font-weight: 800;
	color: var(--color-text);
}

.prose-ricco p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }

.prose-ricco ul,
.prose-ricco ol { margin: 0 0 14px; padding-left: 20px; }

.prose-ricco li { margin-bottom: 6px; font-size: 15px; line-height: 1.6; }

.prose-ricco a { color: var(--color-accent); }

/* ============================================================ M4.2 ========
   Acquisto e checkout
   ==========================================================================

   Nessun valore cromatico: i colori stanno in tokens.css, come impone la
   regola 4 di templates/README.md. */

/* ------------------------------------------- Scheda di prodotto ----------- */

.acquista__tessera {
	position: relative;
}

/* ------------------------------------------------- Checkout --------------- */

.checkout__tessera {
	flex: none;
	width: 200px;
	max-width: 100%;
}

.checkout__riepilogo {
	flex: 1 1 380px;
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-border);
	font-size: 13.5px;
}

.checkout__riepilogo th {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-heading-gold);
	font-size: 11px;
	letter-spacing: 1px;
}

.checkout__riepilogo td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border-soft);
}

.checkout__voce {
	font-weight: 700;
}

/* La pre-vendita si distingue: nel wireframe è la sola riga colorata, e
   ⚠️ è anche la sola che l'utente non si aspetta — un euro in più di quanto
   dice il prezzo. Nasconderla sarebbe scorretto. */
.checkout__prevendita {
	color: var(--color-heading-gold);
	font-weight: 600;
}

.checkout__quantita {
	color: var(--color-text-muted);
}

/* ---- Il box del codice promozionale (M4.6 §3.3) ---- */

/* Sta sotto il carrello e sopra i campi anagrafici: è la posizione
   dell'handoff (`checkout-free.html`). */
.checkout__codice {
	margin: 0 0 30px 0;
}

.checkout__codice-invito {
	margin: 0 0 12px 0;
	font-weight: 700;
	font-size: 14px;
}

/* Lo stato APPLICATO: il codice e l'«Elimina» sulla stessa riga. */
.checkout__codice-riga {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}

/* ⚠️ `color` DICHIARATO DI PROPOSITO e non ereditato: in questo foglio le
   regole generiche discendenti battono le classi di componente, ed è il
   difetto che in questa EPIC ha prodotto tre volte del testo illeggibile —
   l'ultima volta «ACCEDI» bianco su bianco. Una classe che dichiara un colore
   deve vincerle apposta. */
.checkout__codice .checkout__codice-valore {
	/* Nessun token per il monospazio: e' una famiglia generica, non un valore
	   di marca, quindi non ha niente da fare in `tokens.css`. */
	font-family: monospace;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--color-heading-gold);
}

/* ---- I due percorsi, come pannelli apribili ---- */

.checkout__strada {
	margin: 22px 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

.checkout__strada-testa {
	padding: 18px 22px;
	cursor: pointer;
	font-size: 14px;
	list-style: none;
}

/* Il triangolino nativo di <summary> si toglie su tutti i motori: WebKit ha
   un suo pseudo-elemento, gli altri seguono list-style. */
.checkout__strada-testa::-webkit-details-marker {
	display: none;
}

.checkout__strada-testa--accedi {
	background: var(--color-banner);
	color: var(--color-on-banner);
}

.checkout__strada-testa--registra {
	background: var(--color-action-primary);
	color: var(--color-on-action-primary);
}

.checkout__strada-testa:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: -3px;
}

.checkout__form {
	padding: 22px;
}

/* Coppie di campi affiancate, che si impilano da sé su schermo stretto:
   ⚠️ 25 campi a 375px vanno guardati, ed è il punto che P4 di M5.1 aveva
   insegnato sul codice della card. */
.checkout__coppia {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.checkout__coppia > .field,
.checkout__coppia > .cta-row {
	flex: 1 1 220px;
	min-width: 0;
}

.checkout__gruppo,
.checkout__consenso,
.checkout__pagamento {
	margin: 22px 0;
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.checkout__consenso {
	background: var(--color-surface-alt);
}

.checkout__gruppo legend,
.checkout__consenso legend,
.checkout__pagamento legend {
	padding: 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--color-heading-gold);
}

.checkout__radio,
.checkout__spunta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 10px 0;
	font-size: 13.5px;
	line-height: 1.5;
	cursor: pointer;
}

.checkout__nota {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* Suggerimento sotto un campo: lo usa l'avviso che il CAP non è ancora
   validato per davvero, e la nota del codice fiscale. */
.field__nota {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.checkout__avviso {
	margin: 18px 0;
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	background: var(--color-confirm-surface);
	border: 1px solid var(--color-confirm-border);
	font-size: 13.5px;
}

/* Il gate quando blocca: si vede, perché è la ragione per cui non si procede. */
.checkout__bloccato {
	margin: 18px 0;
	padding: 16px 20px;
	border-radius: var(--radius-sm);
	background: var(--color-error-surface);
	border: 1px solid var(--color-error-border);
	font-size: 13.5px;
	line-height: 1.6;
}

/* ---- L'avvertenza della pagina d'esito ----
   ⚠️ Classe sua e non le `dash-attesa` dell'area riservata: quelle vivono in
   riservata.css, che questa pagina non carica. Due riquadri quasi uguali in
   due aree costano meno di uno condiviso con due padroni (regola 1 di
   templates/README.md). */
.checkout__avvertenza {
	margin: 22px 0;
	padding: 26px 24px;
	border-radius: var(--radius);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	text-align: center;
}

.checkout__avvertenza-titolo {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--color-heading-gold);
}

.checkout__avvertenza-testo {
	margin: 0 auto;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* L'intestatario nello stato autenticato: si mostra, non si modifica. */
.checkout__intestatario {
	margin: 0 0 18px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	font-size: 13.5px;
}

.checkout__intestatario dt {
	font-weight: 700;
	color: var(--color-text-muted);
}

.checkout__intestatario dd {
	margin: 0;
}

/* ------------------------------------------------------- Gift Card (M4.4) ---- */

/* La fascia «Regala la Gift Card», l'unico punto del sito con l'oro tenue.

   ⚠️ IL COLORE DEL TESTO SI DICHIARA SUGLI ELEMENTI, NON SU `a`. Scrivere
   `.band--gift a { color: … }` (specificità 0,1,1) batterebbe `.btn--primary`
   (0,1,0) e renderebbe il bottone dentro la fascia del colore del testo: è
   letteralmente il difetto che in questa EPIC si è presentato tre volte, l'ultima
   come «ACCEDI» bianco su bianco. Qui i `<p>` e il titolo prendono il colore, il
   bottone tiene il suo. */
.band--gift { background: var(--color-band-gift); }

.band--gift p,
.band--gift .band__titolo { color: var(--color-on-band-gift); }

.band__titolo {
	margin: 0 0 16px;
	font-weight: 400;
	font-size: 22px;
}

/* --- la scheda del regalo, condivisa fra pubblico e area riservata -------- */

.gift-form { margin: 0; }

.field__textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-family: inherit;
	background: var(--color-field-surface);
	color: var(--color-text);
	min-height: 78px;
	resize: vertical;
}

.field__textarea:focus {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 1px;
	border-color: var(--color-field-focus);
}

/* Il contatore dei caratteri del messaggio.

   ⚠️ Il numero lo aggiorna gift.js, NON un `oninput=` nel template: la CSP di
   M3.3 non ha `unsafe-inline` e TemplatesGuardTest fa fallire il build su un
   gestore inline. E il valore iniziale è reso dal server, così la pagina è
   corretta anche prima che lo script parta — o se non parte affatto. */
.gift-form__contatore {
	margin: 6px 0 22px;
	font-size: 12px;
	color: var(--color-text-faint);
}

/* ==========================================================================
   Tabelle, pill di stato, paginazione e dialog dell'AREA RISERVATA (M5.2)
   ==========================================================================

   Stanno qui e non in riservata.css per la regola del README dell'area: le
   classi di COMPONENTE vanno nel vocabolario comune, il guscio no. Nessun
   valore cromatico: i colori arrivano da tokens.css.

   Le regole generiche discendenti di questo foglio (a, a:hover) battono le
   classi di componente: dove un componente dichiara un colore lo fa con una
   specificita' PIU' ALTA, di proposito — e' il difetto del testo invisibile,
   visto tre volte in EPIC 5. */

/* --- la tabella ------------------------------------------------------------ */

/* Su mobile la tabella scorre DENTRO il suo contenitore: la colonna del guscio
   ha min-width:0 apposta, e cinque colonne a 375px non ci stanno per intero. */
.tabella-scorrevole {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tabella {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 13.5px;
}

.tabella--stretta { min-width: 420px; }

.tabella th {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-heading-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
}

.tabella td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--color-border-soft);
	vertical-align: top;
}

.tabella td .tabella__link {
	color: var(--color-text);
	font-weight: 700;
	text-decoration: none;
}

.tabella td .tabella__link:hover,
.tabella td .tabella__link:focus-visible {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

/* Il tipo di ordine sotto il numero: quello che un dettaglio direbbe per primo. */
.tabella__sotto {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--color-text-muted);
}

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

/* Un form attorno a un solo bottone non deve portare margini ne' rompere la riga. */
.tabella__form {
	display: inline;
	margin: 0;
}

.btn--mini {
	padding: 7px 12px;
	font-size: 11px;
}

/* --- la pill di stato ------------------------------------------------------ */

.stato-pill {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	white-space: nowrap;
}

.stato-pill--ok {
	background: var(--color-confirm-surface);
	border-color: var(--color-confirm-border);
	color: var(--color-confirm);
}

.stato-pill--attesa {
	background: var(--color-notice);
	border-color: var(--color-notice-border);
	color: var(--color-text-strong);
}

.stato-pill--errore {
	background: var(--color-error-surface);
	border-color: var(--color-error-border);
	color: var(--color-error);
}

.stato-pill--neutro {
	background: var(--color-surface-alt);
	border-color: var(--color-border);
	color: var(--color-text-muted);
}

.acquisto__frase .stato-pill { vertical-align: middle; }

/* --- la paginazione -------------------------------------------------------- */

.paginazione {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	font-size: 13px;
}

.paginazione .paginazione__link {
	font-weight: 600;
	color: var(--color-accent);
}

.paginazione .paginazione__link:hover,
.paginazione .paginazione__link:focus-visible {
	color: var(--color-accent-hover);
}

/* Il posto resta occupato quando il link non c'e', cosi' il centro non salta. */
.paginazione__vuoto { visibility: hidden; }

.paginazione__dove { color: var(--color-text-muted); }

/* --- il dialog di conferma ------------------------------------------------- */

.dialogo {
	width: calc(100% - 32px);
	max-width: 32rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--shadow-lg);
}

.dialogo::backdrop { background: var(--color-veil); }

.dialogo__corpo {
	margin: 0;
	padding: 26px 28px;
}

.dialogo__titolo {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 20px;
}

.dialogo__testo {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* --- il dettaglio dell'ordine --------------------------------------------- */

.acquisto__dettagli {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.acquisto__dettagli div {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.acquisto__dettagli dt { font-weight: 700; }

.acquisto__dettagli dd { margin: 0; }

.acquisto__indirizzo {
	font-style: normal;
	line-height: 1.7;
}

.acquisto__blocco-lavorazioni { margin-top: 32px; }

.acquisto__lavorazioni {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

/* M5.3 D13: una voce per lavorazione, l'etichetta e il suo stato. */
.acquisto__lavorazioni li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
}

.acquisto__nota {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--color-text-muted);
}

.acquisto__azioni { align-items: center; }

/* ⚠️ Sotto i 700px la tabella NON scorre: diventa un elenco di schede, una
   per riga, con l'etichetta di colonna accanto a ogni valore (data-etichetta
   sulla cella). Con lo scorrimento orizzontale le AZIONI — i bottoni che
   contano — restavano fuori vista a 375px, dove nessuno le vede. Misurato,
   non supposto: la tabella scorreva di 235px dentro il suo contenitore. */
@media (max-width: 700px) {
	.tabella,
	.tabella--stretta {
		min-width: 0;
	}

	.tabella thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.tabella tr {
		display: block;
		padding: 10px 0 12px;
		border-bottom: 1px solid var(--color-border-soft);
	}

	.tabella td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 4px 0;
		border: 0;
	}

	.tabella td[data-etichetta]::before {
		content: attr(data-etichetta);
		flex: 0 0 auto;
		color: var(--color-heading-gold);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 1px;
	}

	.tabella td .tabella__sotto {
		display: inline;
		margin-left: 6px;
	}

	.tabella__cella-azioni {
		display: block;
		padding-top: 8px;
	}

	.tabella__azioni {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.tabella__azioni .btn,
	.tabella__azioni .tabella__form {
		flex: 1 1 auto;
	}

	.tabella__azioni .btn { text-align: center; }
}

/* ------------------------------------------- Checkout in due passi (M4.8) ---- */

/* La card bianca che ospita i form del checkout: «Crea il tuo account», il
   codice a sei cifre, «Email verificata», e il riquadro dell'autenticato.
   Bordo `mic-line`, raggio 6, NESSUNA ombra (Blocco 0-P §7). */
.checkout__card {
	margin: 22px 0;
	padding: 38px 42px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	/* ⚠️ Un indirizzo email è una parola sola: senza, a 375px quello lungo
	   usciva dalla card e faceva scorrere la pagina (M5.3, cambio email). */
	overflow-wrap: break-word;
}

.checkout__card--stretta {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.checkout__card--centrata { text-align: center; }

/* Il titolo della card: 600, 26px, senza maiuscole (è un invito, non una
   sezione di sito). ⚠️ `text-transform: none` DI PROPOSITO: `.section-title`
   è uppercase, e qui il frame dice «Crea il tuo account». */
.checkout__card-titolo {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	text-transform: none;
	color: var(--color-text);
}

.checkout__card--stretta .checkout__card-titolo { font-size: 24px; }

.checkout__card-testo {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-body);
}

.checkout__obbligatori {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--color-text-muted);
}

/* L'asterisco dei campi obbligatori: oro, 600 (Blocco 0-P §7). */
.checkout__req {
	color: var(--color-required);
	font-weight: 600;
	margin-left: 2px;
}

/* --- le sezioni del form --- */

/* Otto <fieldset>, sempre visibili, separati da un filetto con 30px sopra e
   26px sotto. ⚠️ Nessun bordo: il vecchio `.checkout__gruppo` incorniciava
   ogni gruppo, la Scheda P5 li separa con una riga. */
.checkout__registrazione .checkout__sezione {
	margin: 30px 0 0;
	padding: 26px 0 0;
	border: 0;
	border-top: 1px solid var(--color-border);
	min-width: 0;
}

.checkout__sezione-titolo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	padding: 0;
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text);
}

.checkout__sezione-testo {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--color-text-muted);
}

/* La griglia a due colonne dei campi; su schermo stretto una colonna. */
.checkout__griglia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
	align-items: start;
}

.checkout__griglia--indirizzo { grid-template-columns: 2.4fr 1fr; }

/* --- M4.9: la ricerca dell'indirizzo (combobox) --- */

.indirizzo-ricerca { margin-bottom: 18px; }

/* La tendina si apre SOTTO la casella e copre i campi, senza spostarli. */
.indirizzo-ricerca__campo { position: relative; }

.indirizzo-ricerca__tendina {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--color-field-surface);
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
}

.indirizzo-ricerca__elenco {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	max-height: 280px;
	overflow-y: auto;
}

.indirizzo-ricerca__voce {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	cursor: pointer;
}

/* Il colore del testo è dichiarato qui, e non ereditato: le regole generiche
   di questo foglio battono le classi di componente (tre volte, testo
   illeggibile). */
.indirizzo-ricerca__voce,
.indirizzo-ricerca__voce:hover,
.indirizzo-ricerca__voce.is-attiva { color: var(--color-text); }

.indirizzo-ricerca__voce:hover,
.indirizzo-ricerca__voce.is-attiva { background: var(--color-form-selected); }

.indirizzo-ricerca__principale { font-size: 14px; font-weight: 700; }

.indirizzo-ricerca__secondario { font-size: 12.5px; color: var(--color-text-muted); }

/* Il logo «Google Maps» che la policy di Places chiede senza una mappa Google
   (P5). Le misure sono le sue: altezza fra 16 e 19 px, spazio libero di almeno
   10 px sopra e ai lati e 5 sotto. Il bordo è la separazione dal resto, che la
   policy chiede anch'essa. Il logo non si ricolora: vedi il suo PROVENIENZA.md. */
.indirizzo-ricerca__attribuzione {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 10px 14px 5px;
	border-top: 1px solid var(--color-border-soft);
}

.indirizzo-ricerca__attribuzione img {
	display: block;
	width: auto;
	height: 18px;
}

.indirizzo-ricerca__stato:empty { display: none; }

.indirizzo-ricerca__stato {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--color-text-body);
}

/* I campi compilati dalla ricerca: si vede che non si scrivono, e il testo
   resta leggibile quanto gli altri (come i dati identitari bloccati di M5.3). */
.field__input[readonly] {
	background: var(--color-form-disabled);
	border-color: var(--color-form-disabled-line);
	color: var(--color-text);
	cursor: default;
}

/* Durante un guasto la ricerca non serve: resta visibile, ma spenta. */
.indirizzo-ricerca.is-manuale .field__input[readonly] { cursor: not-allowed; }

/* …e la nota «scegli fra i suggerimenti» direbbe il contrario dell'avviso. */
.indirizzo-ricerca.is-manuale .indirizzo-ricerca__aiuto { display: none; }

.checkout__griglia--tre { grid-template-columns: 1fr 1fr 1fr; }

.checkout__griglia > .field { margin: 0; min-width: 0; }

.checkout__campo--intera { grid-column: 1 / -1; }

.checkout__campo--cf { max-width: 420px; }

.checkout__campo--telefono { max-width: 320px; }

.checkout__campo--cf .field__input { letter-spacing: 1px; }

/* M4.10: il campo e «Genera CF» sulla stessa riga; il campo prende lo spazio che
   resta. Sotto i 380 px il bottone va a capo invece di schiacciare il campo. */
.checkout__cf-riga {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

.checkout__cf-riga .field__input {
	flex: 1 1 220px;
	min-width: 0;
}

.checkout__cf-riga .btn { flex: 0 0 auto; }

/* ⚠️ `.btn` dichiara display: inline-block, che batte l'attributo `hidden`: senza
   questa regola «Genera CF» si vedrebbe anche senza JavaScript, cioè senza funzionare. */
.checkout__cf-riga .btn[hidden] { display: none; }

/* Lo stesso per l'errore del server sotto il CF, che nascita.js nasconde quando il
   valore torna buono: `.field__errore` dichiara display: block. */
.checkout__sezione .field__errore[hidden] { display: none; }

.checkout__cf-riga .btn:disabled {
	cursor: not-allowed;
	opacity: .55;
}

/* Un avviso sotto un campo: non un errore (non blocca l'invio), ma deve vedersi.
   Lo usano l'incoerenza del codice fiscale e il luogo di nascita fuori elenco (M4.10 D8). */
.field__nota.is-avviso {
	color: var(--color-form-error-dark);
	font-weight: 600;
}

/* --- la riga radio del requisito --- */

/* Intera riga cliccabile, raggio 6, bordo trasparente a riposo; selezionata:
   fondo oro tenue e bordo oro. Il `:has()` NON ha fallback perché è solo
   decorazione: senza, la riga resta una riga con la sua radio. */
.checkout__registrazione .checkout__radio {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 6px 0;
	padding: 11px 13px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.checkout__registrazione .checkout__radio:has(input:checked) {
	background: var(--color-form-selected);
	border-color: var(--color-form-selected-line);
}

.checkout__registrazione .checkout__radio input { margin-top: 3px; flex: none; }

/* --- i consensi --- */

.checkout__consenso-box {
	display: block;
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
}

.checkout__consenso-box--obbligatorio {
	background: var(--color-form-selected);
	border-color: var(--color-form-selected-line);
}

.checkout__consenso-box.is-errore {
	background: var(--color-form-error-surface);
	border: 2px solid var(--color-error);
}

.checkout__consenso-riga {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 8px 12px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--color-text);
}

.checkout__consenso-riga input { margin-top: 3px; flex: none; }

.checkout__consenso-sotto {
	margin: 6px 0 0 28px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--color-text-muted);
}

/* Il collegamento all'informativa: `color` dichiarato apposta contro le
   regole discendenti di questo foglio (memoria: tre volte testo illeggibile). */
.checkout__consenso-sotto .checkout__consenso-link {
	color: var(--color-accent);
	text-decoration: underline;
}

.checkout__badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: var(--radius-sm);
	background: var(--color-form-badge);
	color: var(--color-on-form-badge);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	vertical-align: middle;
}

.checkout__gruppo-etichetta {
	margin: 18px 0 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* --- il callout informativo (solo Gift Card) --- */

.checkout__callout {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--color-form-callout);
	border-left: 3px solid var(--color-form-callout-line);
	font-size: 13px;
	line-height: 1.55;
	color: var(--color-text-body);
}

/* --- gli errori: campo, riepilogo, contatore di sezione --- */

/* Il campo in errore: bordo 2px, sfondo tenue e padding ridotto di 1px per
   lato, così il layout non si sposta (Blocco 0-P §7). */
.checkout__registrazione .field__input.is-errato {
	border: 2px solid var(--color-error);
	background: var(--color-form-error-field);
	padding: 11px 13px;
}

/* «Il colore non è mai l'unico segnale»: pallino «!» prima del messaggio. */
.checkout__registrazione .field__errore::before,
.checkout__contatore::before,
.checkout__errori-titolo::before,
.checkout__esito.is-errore::before {
	content: "!";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--color-error);
	color: var(--color-on-action-danger);
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	vertical-align: -2px;
}

.checkout__errori {
	margin: 16px 0 0;
	padding: 16px 18px;
	background: var(--color-form-error-surface);
	border: 1px solid var(--color-form-error-line);
	border-left: 5px solid var(--color-error);
	border-radius: var(--radius);
}

.checkout__errori-titolo {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 16px;
	color: var(--color-form-error-dark);
}

.checkout__errori-sotto {
	margin: 0 0 8px 21px;
	font-size: 13.5px;
	color: var(--color-text-body);
}

.checkout__errori-elenco {
	margin: 0 0 0 21px;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.7;
}

/* `color` DICHIARATO, e con specificità: il link del riepilogo è rosso scuro
   sottolineato, e `a:hover` di questo foglio lo cambierebbe. */
.checkout__errori .checkout__errori-link,
.checkout__errori .checkout__errori-link:hover {
	color: var(--color-form-error-dark);
	text-decoration: underline;
}

.checkout__contatore {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--color-error);
}

/* --- gli esiti sulla pagina del codice --- */

.checkout__esito {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
}

.checkout__card .checkout__esito.is-ok { color: var(--color-form-success); font-weight: 600; }

.checkout__card .checkout__esito.is-errore { color: var(--color-error); }

/* --- il codice a sei cifre: UN input, e basta (decisione 117, rivista) ---
   La prima stesura disegnava sei celle sullo sfondo di un campo solo, con
   `letter-spacing` a portare ogni cifra al centro della sua. ⚠️ A sei cifre
   digitate il campo SCORREVA: lo spazio dopo l'ultima cifra sfondava la
   larghezza e la prima usciva a sinistra (misurato con Playwright). L'utente
   ha scelto il campo intero con lo stile invece di un altro giro di tuning:
   cifre grandi, spaziate, centrate; in errore il bordo rosso di `.is-errato`. */
.checkout__card .checkout__otp {
	display: block;
	max-width: 320px;
	margin: 0 0 18px;
	padding: 12px 14px;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 8px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--color-text);
	caret-color: var(--color-field-focus);
}

.checkout__card .checkout__otp.is-errato {
	border: 2px solid var(--color-error);
	background: var(--color-form-error-field);
	padding: 11px 13px;
}

.checkout__verifica-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin: 14px 0 0;
}

/* Il bottone secondario del reinvio: bordo oro chiaro su fondo bianco, che è
   il «secondario» dei frame REG_* e non il nero di `.btn--secondary`. */
.checkout__card .btn--contorno {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-form-secondary-line);
	padding: 13px 22px;
}

.checkout__card .btn--contorno:disabled {
	color: var(--color-form-disabled-text);
	border-color: var(--color-form-disabled-line);
	cursor: default;
	filter: none;
}

/* Il primario disabilitato (finché le cifre non sono sei). */
.checkout__card .btn--primary:disabled {
	background: var(--color-form-disabled);
	color: var(--color-on-form-disabled);
	cursor: default;
	filter: none;
}

/* Il bottone in invio (stato della tavola componenti). */
.checkout__card .btn--in-invio {
	background: var(--color-form-loading);
	color: var(--color-on-action-primary);
	cursor: progress;
}

/* Il link «Modifica indirizzo email»: `color` dichiarato apposta. */
.checkout__card .checkout__link,
.checkout__card .checkout__link:hover {
	font-size: 14px;
	color: var(--color-accent);
	text-decoration: underline;
}

/* --- il passo 3 --- */

.checkout__verificato-segno {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--color-form-success-surface);
	color: var(--color-form-success);
	font-size: 26px;
	font-weight: 700;
}

.checkout__card--centrata .checkout__card-testo {
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}

.checkout__card--centrata .cta-row { justify-content: center; }

/* --- i condizionali via CSS `:has()`, zero JavaScript (D-a) ---
   Studente ⇒ università e matricola; titolo Residenza / Domicilio e «Città di
   domicilio» per il solo domiciliato; «Professione e università». ⚠️ «Solo
   Gift Card» resta su Residenza come gli altri (decisione 121). I campi
   restano nel DOM per il round-trip di th:field, e `ripulisciCondizionali` fa
   il suo lato server.
   ⚠️ Dentro `@supports`: un browser senza `:has()` mostra i due campi dello
   studente sempre — cioè il comportamento di prima — e il solo titolo
   «Residenza». */
.checkout__se-domicilio,
.checkout__se-studente { display: none; }

@supports selector(:has(input)) {
	.checkout__solo-studente { display: none; }

	.checkout__registrazione:has(input[name="requisito"][value="STUDENTE"]:checked) .checkout__solo-studente {
		display: grid;
	}

	.checkout__registrazione:has(input[name="requisito"][value="STUDENTE"]:checked) .checkout__se-studente {
		display: inline;
	}

	.checkout__registrazione:has(input[name="requisito"][value="DOMICILIATO"]:checked) .checkout__se-residenza {
		display: none;
	}

	.checkout__registrazione:has(input[name="requisito"][value="DOMICILIATO"]:checked) .checkout__se-domicilio {
		display: inline;
	}
}

/* --- l'intestatario dell'autenticato, nella card (frame 15–18, decisione 112) --- */

.checkout__card .checkout__intestatario { margin: 0 0 12px; }

.checkout__card .checkout__pagamento {
	margin: 0;
	padding: 0;
	border: 0;
}

/* --- responsive --- */

@media (max-width: 760px) {
	.checkout__card { padding: 22px 18px; }

	.checkout__griglia,
	.checkout__griglia--indirizzo,
	.checkout__griglia--tre { grid-template-columns: 1fr; }

	.checkout__campo--cf,
	.checkout__campo--telefono { max-width: none; }

	.checkout__registrazione .cta-row .btn { display: block; width: 100%; text-align: center; }


	.checkout__verifica-azioni { flex-direction: column; align-items: stretch; }

	.checkout__verifica-azioni .btn { text-align: center; }
}

/* Dentro la card il form non ha un suo padding: ce l'ha la card. */
.checkout__card .checkout__form { padding: 0; }

.checkout__consenso-sotto { display: block; }

/* «Modifica il regalo» è un BOTTONE che sembra un link: invia il form del
   checkout da fuori (attributo `form=`), quindi non può essere un <a>. Reset
   del bottone e lo stesso colore del link, DICHIARATO. */
.checkout__nota .checkout__link--bottone {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 14px;
	color: var(--color-accent);
	text-decoration: underline;
	cursor: pointer;
}

.checkout__nota .checkout__link--bottone:hover { color: var(--color-accent-hover); }

.checkout__nota .checkout__link--bottone:focus-visible {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 2px;
}

/* ================================================================================
   LA PAGINA D'ESITO DEL PAGAMENTO (M4.14, materiale del 2026-10-08)

   Una card centrata: icona in un cerchio, titolo maiuscolo, testo, il riquadro
   del numero d'ordine con «Copia», il riquadro dei contatti dove serve, due
   bottoni. Il primario è il nero di `.btn--secondary`, come nel materiale; il
   secondario è a contorno.
   ⚠️ Link e bottoni DICHIARANO i loro stati: le regole generiche `a` / `a:hover`
   di questo file battono una classe da sola (testo illeggibile, tre volte).
   ================================================================================ */

.esito-pagamento {
	max-width: 834px;
	margin: 22px auto;
	padding: 44px 56px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	text-align: center;
	overflow-wrap: break-word;
}

.esito-pagamento__icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: 0 auto 26px;
	border: 2px solid var(--color-text-muted);
	border-radius: 50%;
	color: var(--color-text-muted);
}

.esito-pagamento__titolo {
	margin: 0 0 22px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text);
}

.esito-pagamento__testo {
	max-width: 56ch;
	margin: 0 auto 14px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-text-body);
}

.esito-pagamento__testo--nota { font-size: 14px; color: var(--color-text-muted); }

.esito-pagamento__ordine {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 0;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-page);
	text-align: left;
}

.esito-pagamento__ordine-etichetta {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.esito-pagamento__ordine-numero {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	color: var(--color-text);
}

/* `.btn` è inline-block, e batterebbe `[hidden]`: lo si rimette in testa. */
.esito-pagamento__copia[hidden] { display: none; }

.esito-pagamento__copia,
.esito-pagamento__copia:hover,
.esito-pagamento__copia:focus-visible,
.esito-pagamento__contorno,
.esito-pagamento__contorno:hover,
.esito-pagamento__contorno:focus-visible {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-text);
}

/* Nel materiale i bottoni della card sono maiuscoli e spaziati. */
.esito-pagamento .btn {
	text-transform: uppercase;
	letter-spacing: .06em;
}

.esito-pagamento__copia { padding: 12px 22px; flex-shrink: 0; }

.esito-pagamento__contatti {
	margin: 22px 0 0;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	text-align: left;
}

.esito-pagamento__contatti-testo {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--color-text);
}

.esito-pagamento__contatti-recapiti {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 28px;
	margin: 0;
	font-size: 14px;
	color: var(--color-text-muted);
}

.esito-pagamento__contatti-recapiti a,
.esito-pagamento__contatti-recapiti a:hover,
.esito-pagamento__contatti-recapiti a:focus-visible {
	font-weight: 600;
	color: var(--color-text);
	text-decoration: underline;
}

.esito-pagamento__azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 28px 0 0;
}

.esito-pagamento__azioni .btn { min-width: 180px; text-align: center; }

@media (max-width: 760px) {
	.esito-pagamento { padding: 32px 22px; }

	.esito-pagamento__ordine { padding: 18px; }

	.esito-pagamento__contatti-recapiti { flex-direction: column; gap: 12px; }

	.esito-pagamento__azioni { flex-direction: column; }

	.esito-pagamento__azioni .btn { display: block; width: 100%; }
}

/* ---------------------------------------------------- App mobile (M8.1) --- */

/* Nell'app la cornice la disegna il guscio: header e footer non ci sono, e
   `in-app` sta sul <body> (AppMobile). Del footer resta la sola banda legale. */

.in-app .site-footer { border-top: 0; }

/* Senza header e footer pieni, su una pagina corta la banda legale finiva a
   metà schermo: il contenuto prende lo spazio che resta e la spinge in fondo. */
.in-app #contenuto { flex: 1 0 auto; }

/* Il banner col titolo e la briciola (2026-10-22): nell'app il titolo lo
   scrive la top bar del guscio, da document.title, e la briciola «Home » …»
   ripeteva una navigazione che il guscio ha già. Il banner esce dallo schermo,
   ma l'<h1> resta per TalkBack e VoiceOver; la briciola si toglie del tutto,
   così i suoi link non restano raggiungibili. Vale per tutte le pagine col
   banner, pubbliche e dell'area riservata, senza toccare i template. */
.in-app .page-banner .crumb { display: none; }

.in-app .page-banner {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Nell'app niente lampo azzurro al tocco (2026-10-27): è il riquadro che la
   WebView di Android disegna su ciò che si preme, e in un'app sembra un
   difetto. La conferma del tocco la danno i componenti, dove serve (la card
   della Home si rimpicciolisce). Il fuoco da tastiera resta. */
.in-app a,
.in-app button,
.in-app summary,
.in-app label {
	-webkit-tap-highlight-color: transparent;
}

/* La Home dell'app (/app): logo, tre azioni su una riga, card sotto. Il frame
   `a-home` del prototipo dell'app, con i colori del sito (E8 P12). */
.app-home__logo {
	display: flex;
	justify-content: center;
	padding: 28px var(--layout-gutter) 24px;
}

.app-home__logo img {
	height: 100px;
	width: auto;
}

.app-azioni {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* Ogni riquadro e' tutto un link: il bersaglio da toccare e' grande. */
.app-azione {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 8px;
	background: var(--color-card-action);
	color: var(--color-text);
	text-align: center;
}

.app-azione--alt { background: var(--color-card-action-alt); }

/* La card della Home e i tre riquadri sono bottoni, non testo (2026-10-27):
   un tocco lungo non deve selezionarne la scritta in azzurro, né aprire
   l'anteprima del link su iPhone. Solo qui: il resto del testo, il codice della
   MIC Card compreso, resta selezionabile. */
.app-azione,
.app-home__card-link {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.app-azione:hover,
.app-azione:focus-visible { color: var(--color-text); }

.app-azione__icona {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid var(--color-card-action-ring);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.app-azione__nome {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

/* Su uno schermo molto stretto: due sopra e uno sotto, a tutta larghezza. */
@media (max-width: 339px) {
	.app-azioni { grid-template-columns: repeat(2, 1fr); }

	.app-azione:last-child { grid-column: 1 / -1; }
}

.app-home__card {
	display: flex;
	justify-content: center;
	padding: 28px var(--layout-gutter);
}

.app-home__card img {
	display: block;
	width: 100%;
	height: auto;
}

/* La card porta alla dashboard (2026-10-27): il link ha la larghezza della
   card, e l'anello del fuoco la segue. Sotto la card la scritta che dice che si
   può toccare; al tocco la card si rimpicciolisce appena, per confermarlo.
   ⚠️ La scritta ha un colore suo, quindi `a:hover` (che colora il link) non la
   tocca: lo stato si ridichiara qui sotto. */
.app-home__card-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 340px;
	border-radius: var(--radius-card);
}

.app-home__card-link img {
	transition: transform .12s ease-out;
}

.app-home__card-link:active img {
	transform: scale(.97);
}

.app-home__card-invito {
	display: inline-flex;
	gap: 6px;
	font-weight: 600;
	font-size: 16px;
	color: var(--color-accent);
}

/* Il colore scuro di «mouse sopra» solo dove il mouse c'è (2026-10-27): sui
   telefoni :hover resta attivo dopo il tocco, finché non si tocca altrove, e la
   scritta restava scura tornando alla Home. Mentre si preme vale :active. */
@media (hover: hover) {
	.app-home__card-link:hover .app-home__card-invito {
		color: var(--color-accent-hover);
	}
}

.app-home__card-link:active .app-home__card-invito {
	color: var(--color-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
	.app-home__card-link img {
		transition: none;
	}
}

.app-home__card-link:focus-visible {
	outline: 2px solid var(--color-field-focus);
	outline-offset: 4px;
}

/* I contatti dell'app (/app/contatti): quelli del footer, che nell'app non c'è. */
.app-contatti__elenco { margin: 24px 0 0; }

.app-contatti__elenco dt {
	margin: 18px 0 0;
	font-weight: 600;
	color: var(--color-text-muted);
}

.app-contatti__elenco dd {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
}

.app-contatti .contact-note {
	margin: 24px 0 0;
	color: var(--color-text-muted);
	line-height: 1.5;
}