/*
Theme Name: Naturalis Gelato
Theme URI: https://naturalisgelato.com.au
Author: Progetto Naturalis
Description: Tema su misura per Naturalis Gelato Italiano — gelateria artigianale a servizio eventi, Melbourne. Nessun page builder, nessuna dipendenza commerciale. Contenuti strutturati, layout controllato dal template.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietario
Text Domain: naturalis
*/

/* =========================================================================
   1. Sistema di design
   ====================================================================== */

/* -------------------------------------------------------------------------
 * I caratteri.
 *
 * Sono file nostri, serviti dal nostro server: nessuna chiamata a Google
 * Fonts (che è anche un problema di privacy in Europa), nessun canone,
 * nessuna licenza che scade. Entrambi con licenza SIL Open Font — le
 * licenze stanno in /font accanto ai file, come l'OFL richiede.
 *
 * Fraunces per i titoli: è un serif "wonky", morbido e un po' fuori squadra,
 * disegnato per avere carattere invece che neutralità. È l'opposto di
 * Georgia, che era la ragione principale dell'anonimato del tema.
 * Figtree per il testo: grottesco caldo, geometrico ma non freddo.
 * Sono due file variabili: un solo download copre tutti i pesi.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "Fraunces";
	src: url("font/fraunces-latin.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-display: swap;   /* il testo si legge subito, il font arriva dopo */
	font-style: normal;
}
@font-face {
	font-family: "Figtree";
	src: url("font/figtree-latin.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-display: swap;
	font-style: normal;
}

:root {
	/* ---------------------------------------------------------------------
	 * I colori vengono dai gusti, non da un'idea astratta di "premium".
	 *
	 * Sono volutamente PASTELLO e un po' smorti: il gelato artigianale vero
	 * ha questi colori: senza coloranti il pistacchio è kaki chiaro e la
	 * fragola è rosa pallido, non fucsia. La palette è quindi essa stessa
	 * un'affermazione sul prodotto — un sito a colori saturi direbbe
	 * l'opposto di quello che vendiamo.
	 *
	 * Nota: il verde era #4C6B4F, che è verde bosco, non pistacchio.
	 * Corretto il 2026-07-21.
	 * ------------------------------------------------------------------ */

	/* I SETTE GUSTI CLASSICI — sono la tavolozza, tutta qui.
	   Nessun colore del sito sta fuori da questa vaschetta. */
	--panna:        #FDFBF6;   /* PANNA — il bianco. Fondo di riposo della pagina */
	--panna-scura:  #F6F1E6;   /* panna in ombra, per separare senza cambiare gusto */
	--crema:        #F7E4B0;   /* CREMA — giallo tuorlo, caldo. È un gusto, non un fondo neutro */
	--pistacchio:   #C6D3A0;   /* PISTACCHIO — kaki chiaro. Il gusto della casa */
	--fragola:      #F4C6C9;   /* FRAGOLA — rosa pallido, quello vero senza coloranti */
	--limone:       #F2EFA9;   /* LIMONE — giallo freddo, si distingue dalla crema */
	--amarena:      #93293D;   /* AMARENA — rosso scuro. Fondo pieno, testo chiaro sopra */
	--cioccolato:   #59392A;   /* CIOCCOLATO — l'altro fondo scuro, il più caldo */
	--superficie:   #FFFFFF;

	/* Versioni sature degli stessi gusti, per pulsanti e accenti: sui
	   pastelli il testo scuro sta comodo, ma un pulsante deve staccare. */
	--pistacchio-f: #6F8A3C;
	/* Verde scuro per il TESTO chiaro sopra: #6F8A3C col bianco dà 3,78:1,
	   sotto la soglia AA di 4,5. Questo dà 5,14:1 — verificato, non stimato.
	   Serve ai badge e al bottone finale del configuratore. */
	--pistacchio-scuro: #5C7330;
	--fragola-f:    #C2596A;
	--amarena-f:    #7A1F30;
	--cioccolato-f: #3F2619;

	/* Inchiostri — bruno caldo, mai nero puro: il nero su una palette
	   pastello sembra stampa a laser su carta da forno. */
	--inchiostro:   #2A211B;
	--inchiostro-2: #5A4A3E;
	--inchiostro-3: #6E5C4E;   /* verificato sopra 4.5:1 sui fondi chiari */
	--bordo:        #E5D9C6;

	/* Due ori. Il primo è decorativo (nastri, focus) e non deve superare
	   alcuna soglia; il secondo è l'unico ammesso per il TESTO:
	   #A8873E su crema dava ~3.1:1, sotto AA. Rilievo design-reviewer. */
	--oro:          #C9A227;
	--oro-testo:    #7A5F28;

	/*
	 * ⚠️ LE OMBRE COLORATE VANNO QUI, non scritte nelle regole.
	 *
	 * Erano `rgba(147,41,61,.20)` sparse in quattro punti: è l'amarena in
	 * chiaro, e in una tavolozza diversa sarebbero rimaste rosse mentre tutto
	 * il resto cambiava colore. Un tema alternativo si prova cambiando il
	 * :root, e ciò che non sta nel :root non cambia.
	 */
	--alone-scelto: rgb(147 41 61 / .12);   /* l'alone della scheda scelta */
	--ombra-forte:  rgba(147,41,61,.20);
	--ombra-media:  rgba(147,41,61,.14);
	--bordo-tenue:  rgba(244, 198, 201, .55);
	--su-scuro:     #FBF3E8;                /* testo chiaro sui fondi pieni */

	/* ---------------------------------------------------------------------
	 * LA SCALA TIPOGRAFICA — sette gradini, e nient'altro.
	 *
	 * 🔴 Perché è nata. Il foglio aveva 110 dichiarazioni `font-size` e
	 * ~35 valori DISTINTI fra 0,60 e 0,95rem — trentacinque misure diverse
	 * dentro un intervallo di sei pixel. Non era una scala: era mano
	 * libera, ogni numero deciso a occhio nel momento in cui veniva
	 * scritto. Quarantadue dichiarazioni rendevano sotto i 15px e
	 * ventiquattro sotto i 14.
	 *
	 * Il committente lo ha segnalato TRE VOLTE su ventisei note ("i
	 * caratteri sono troppo piccoli", "i titoli sono sempre troppo
	 * piccoli"), ed è il rilievo più insistito che abbia fatto. Non si
	 * risolve ritoccando i punti che ha citato: se ne sistemano tre e ne
	 * restano trentanove.
	 *
	 * 🔴 E c'era un difetto meccanico sotto. `body` era a 17px ma `html`
	 * non è mai stato dichiarato, quindi 1rem valeva 16px: TUTTE le misure
	 * in rem si calcolavano su una base che non era il corpo del testo.
	 * Testo principale e testo secondario erano due sistemi che non si
	 * parlavano, e niente nel foglio usava davvero i 17px.
	 *
	 * ⚠️ La radice resta a 16px di proposito. Portarla a 18 avrebbe
	 * ingrandito il testo in una riga sola — ma anche tutta la scala di
	 * spaziatura qui sotto, che è in rem: margini, respiri e gutter
	 * gonfiati del 12% ovunque. Il corpo si alza con il suo token, non
	 * spostando il pavimento sotto ogni altra misura del tema.
	 *
	 * I gradini sono in rem e non in px perché chi ingrandisce il testo
	 * dalle impostazioni del browser deve continuare a poterlo fare.
	 * ------------------------------------------------------------------ */

	--t-etichetta: 0.8125rem;  /* 13px — SOLO maiuscolo spaziato: occhielli,
	                              nastri, contatori. Mai una frase da leggere.
	                              È il pavimento assoluto del tema. */
	--t-minuto:    0.9375rem;  /* 15px — note, avvertenze, didascalie: testo
	                              breve ma che qualcuno deve poter leggere */
	--t-piccolo:   1rem;       /* 16px — testo secondario nelle schede, voci
	                              di elenco, navigazione, pulsanti */
	--t-corpo:     1.125rem;   /* 18px — il corpo. Era 17, e su mobile
	                              scendeva addirittura a 16 */
	--t-guida:     1.25rem;    /* 20px — sommari, intestazioni di scheda */
	--t-medio:     1.5rem;     /* 24px — h3 e nomi di pacchetto. Era 21,6 */
	/* Le CIFRE. Due gradini, perché i prezzi hanno due ruoli diversi:
	 * uno solo in mezzo a una scheda, oppure cinque affiancati da
	 * confrontare. Il primo può gridare, i secondi devono allinearsi.
	 *
	 * ⚠️ `--t-forte` è nato a 30px e per mezza giornata non l'ha usato
	 * nessuno: rilievo del `design-reviewer`, verificato — il token
	 * esisteva «per le cifre che devono gridare» e i prezzi erano rimasti
	 * fuori dalla scala con quattro misure scritte a mano. Portato ai 32px
	 * che i prezzi usavano davvero: si tokenizza quello che c'è, non si
	 * cambia la dimensione di nascosto mentre si sistema un token. */
	--t-forte:     2rem;       /* 32px — prezzi in listino e totale del conto */
	--t-cifra:     3rem;       /* 48px — il prezzo grande di una scheda sola */

	--t-titolo-fascia: clamp(1.5rem, 2.6vw, 2rem);

	/* ---------------------------------------------------------------------
	 * LA RESA DELLE FOTOGRAFIE — un numero solo, in un posto solo.
	 *
	 * Le fotografie del sito sono generate, e il prompt che le ha fatte
	 * chiede «natural muted colours»: misurate una per una stanno fra il
	 * 16% e il 35% di saturazione, dove una fotografia normale sta fra il
	 * 45% e il 60%. Era la scelta giusta per il PRODOTTO — il gelato senza
	 * coloranti ha davvero colori spenti — applicata per sbaglio anche
	 * alle fotografie d'ambiente, dove diventa soltanto tristezza. È il
	 * rilievo del committente: «le foto sono troppo grigie».
	 *
	 * Sta qui e non nelle singole regole perché i sistemi di fotografia
	 * sono TRE (apertura, tessere delle occasioni, carosello) e vivono in
	 * tre sezioni lontane del foglio: scritto tre volte, il giorno che si
	 * ritocca se ne aggiorna due e nessuno se ne accorge.
	 *
	 * ⚠️ Non tocca i file: è resa, non modifica. Il giorno in cui arrivano
	 * le fotografie VERE del cliente — scattate, non generate — questo
	 * valore va probabilmente riportato a `none`, non alzato ancora.
	 *
	 * ✅ Verificato che non costa contrasto: `saturate()` usa una matrice
	 * che preserva la luminanza, e il testo bianco sull'apertura misura
	 * 5,69:1 identico a 1,00x, 1,15x, 1,30x e 1,45x
	 * (`strumenti/misura-velo-apertura.py`).
	 * ------------------------------------------------------------------ */
	--resa-foto: saturate(1.28) contrast(1.04);

	/* Scala di spaziatura (base 4) */
	--s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
	--s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
	--s9: 6rem;

	/* Angoli tondi, non squadrati: una pallina di gelato non ha spigoli. */
	--raggio:   10px;
	--raggio-l: 22px;

	--serif: "Fraunces", Georgia, "Iowan Old Style", Palatino, serif;
	--sans:  "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--contenuto: 1180px;
	--testo:     680px;
}

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

/* `hidden` deve vincere sempre.
   Il browser lo applica con `[hidden] { display: none }`, che ha la stessa
   specificità di una classe: qualunque nostra regola con un `display`
   esplicito lo annulla, e l'elemento resta visibile pur essendo nascosto per
   il DOM. È costato un difetto vero — la scritta "Not enough for your
   numbers" compariva su tutte e tre le schede dei carretti anche quando
   l'attributo era correttamente impostato. Va dichiarato una volta, qui. */
[hidden] { display: none !important; }

body {
	margin: 0;
	background: var(--panna);
	color: var(--inchiostro);
	font-family: var(--sans);
	font-size: var(--t-corpo);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* I titoli usano gli assi variabili di Fraunces:
   SOFT arrotonda i terminali (meno lama, più cucchiaio),
   WONK sblocca le forme "storte" disegnate apposta dall'autore.

   🔴 WONK ORA È SPENTO DI PARTENZA, e si accende solo sui titoli grandi.
   Prima era acceso su tutti e otto i punti in cui il tema tocca gli assi,
   compresi quelli a `opsz 18` e `opsz 24`. WONK è letteralmente l'asse che
   rende irregolari le lettere: a 48px quella irregolarità si legge come
   caratteri; a 21px si legge come sfocato. Sui titoli piccoli avevamo
   acceso l'imprecisione e poi li avevamo rimpiccioliti — ed è la
   spiegazione più probabile di «il font va rivisto, è poco chiaro»
   (nota 19), che nella stessa frase parla di titoli troppo piccoli.

   ⚠️ È un'IPOTESI, e va verificata prima di cambiare carattere: si
   ingrandisce, si spegne WONK, si rimanda al committente. Se lo ridice,
   allora è Fraunces e si cambia sapendo perché. Al contrario non si
   scoprirebbe più niente: un font nuovo e grande sembra meglio anche
   quando il problema era solo la misura.

   Acceso in via esplicita, non spento in via esplicita: così un titolo
   nuovo nasce leggibile, e la personalità è una scelta che qualcuno fa. */
h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 600;
	font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 100;
	line-height: 1.08;
	margin: 0 0 var(--s4);
	letter-spacing: -0.02em;
}
h1 {
	font-size: clamp(2.9rem, 6.6vw, 5rem);
	font-weight: 700;
	font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
}
h2 {
	font-size: clamp(2.15rem, 4.2vw, 3.3rem);
	font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100;
}
h3 { font-size: var(--t-medio); font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 24; }

p { margin: 0 0 var(--s4); }
/* I link di testo: amarena scuro, non verde. Il verde dava 2.46:1 sulla
   sezione pistacchio — invisibile. Sottolineati sempre: il colore da solo
   non basta mai a segnalare un link. */
a {
	color: var(--amarena-f);
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

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

.contenitore {
	max-width: var(--contenuto);
	margin-inline: auto;
	padding-inline: var(--s5);
}

/* Occhiello: piccola etichetta sopra i titoli */
.occhiello {
	font-family: var(--sans);
	font-size: var(--t-etichetta);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oro-testo);
	margin: 0 0 var(--s3);
}

/* =========================================================================
   2. Pulsanti
   ====================================================================== */

/* L'azione primaria è AMARENA: è l'unico gusto abbastanza scuro e saturo da
   staccare su tutti i pastelli, quindi il pulsante resta riconoscibile in
   ogni sezione senza dover cambiare colore ogni volta. Bianco su amarena
   dà circa 8:1, molto sopra la soglia AA. */
.bottone {
	display: inline-block;
	padding: var(--s3) var(--s6);
	background: var(--amarena);
	color: #fff;
	text-decoration: none;
	font-family: var(--sans);
	font-size: var(--t-piccolo);
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 100px;   /* pillola: le forme tonde sono il tema */
	border: 2px solid var(--amarena);
	transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.bottone:hover {
	background: var(--amarena-f);
	border-color: var(--amarena-f);
	transform: translateY(-1px);
}
.bottone:focus-visible { outline: 3px solid var(--cioccolato); outline-offset: 3px; }

.bottone--vuoto {
	background: transparent;
	color: var(--cioccolato);
	border-color: var(--cioccolato);
}
.bottone--vuoto:hover {
	background: var(--cioccolato);
	color: var(--panna);
	border-color: var(--cioccolato);
}

/* =========================================================================
   3. Testata e piè di pagina
   ====================================================================== */

/* Testata su fondo amarena: la barra è essa stessa marchio. Logo e voci in
   panna; il pulsante CTA passa a crema per staccare dal rosso. */
.testata {
	background: var(--amarena);
	border-bottom: 1px solid rgba(0,0,0,.18);
	position: sticky;
	top: 0;
	z-index: 50;
}
.testata__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	padding-block: var(--s4);
	flex-wrap: wrap;
}
.marchio {
	display: flex;
	align-items: center;
	gap: var(--s3);
	font-family: var(--serif);
	font-size: 1.65rem;
	text-decoration: none;
	color: var(--panna);
	line-height: 1.1;
}
.marchio__segno { flex: none; }
.marchio__parola span {
	display: block;
	font-family: var(--sans);
	font-size: var(--t-etichetta);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
	margin-top: 2px;
}
.navigazione ul {
	display: flex;
	gap: var(--s5);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
/* ⚠️ Il selettore comprende ANCHE lo <span> della voce disattivata.
   Prima riguardava solo gli <a>, quindi «Order online» perdeva corpo del
   carattere, spaziatura e allineamento: sembrava un'altra cosa invece della
   stessa voce spenta. Dell'aspetto deve cambiare **solo il colore**. */
.navigazione a,
.navigazione .menu-item--presto > span {
	text-decoration: none;
	color: rgba(255,255,255,.88);
	font-size: var(--t-piccolo);
	padding-block: var(--s3);   /* 44px di bersaglio: si naviga col pollice */
	border-bottom: 2px solid transparent;
}
.navigazione a:hover { color: var(--panna); border-bottom-color: var(--crema); }

/* 🔴 LA PAGINA IN CUI TI TROVI, SEGNATA ANCHE PER CHI VEDE.
   Rilievo del `design-reviewer` (2026-08-07): nessuna pagina diceva dove fossi.
   Mancava l'attributo `aria-current` — aggiunto in `header.php` — ma mancava
   anche qualunque segno visivo, e su un menu a scomparsa da telefono, senza il
   contesto della pagina intera, l'orientamento si perde.
   ⚠️ Il selettore è l'attributo, non una classe: così vale sia per il menu
   scritto nel codice sia per quello di `wp_nav_menu()`, che l'attributo lo
   mette da sé. Una regola sola invece di due che divergono. */
.navigazione a[aria-current="page"] {
	color: var(--panna);
	border-bottom-color: var(--panna);
}
/* Il CTA in testata sul rosso: crema con testo scuro, come i pulsanti su
   fondo scuro dell'hero. */
.testata .bottone {
	background: var(--crema);
	color: var(--cioccolato);
	border-color: var(--crema);
}
.testata .bottone:hover { background: #fff; border-color: #fff; }

/* --- Hamburger: nascosto su schermo largo, compare sotto 860px --------- */
.menu-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--panna);
}
.menu-toggle__barre,
.menu-toggle__barre::before,
.menu-toggle__barre::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 24px;
	height: 2px;
	margin-left: -12px;
	background: currentColor;
	border-radius: 2px;
}
.menu-toggle__barre { top: 50%; margin-top: -1px; }
.menu-toggle__barre::before { top: -7px; }
.menu-toggle__barre::after  { top: 7px; }

/* Sotto 860px otto voci non stanno in una barra: compare l'hamburger e le
   voci diventano un pannello a tendina a piena larghezza. */
@media (max-width: 860px) {
	.menu-toggle  { display: block; }
	.testata__cta { display: none; }   /* "Request a quote" è già voce di menu */
	.navigazione {
		flex-basis: 100%;
		display: none;
	}
	.navigazione.is-open { display: block; }
	.navigazione ul {
		flex-direction: column;
		gap: 0;
		padding-top: var(--s2);
	}
	.navigazione li { border-top: 1px solid rgba(255,255,255,.16); }
	.navigazione a,
	.navigazione .menu-item--presto > span {
		display: block;
		padding: var(--s4) var(--s1);
		border-bottom: 0;
	}
}

.piede {
	background: var(--cioccolato);
	color: #E9E4DA;
	margin-top: 0;
	padding-block: var(--s7) var(--s5);
	font-size: var(--t-piccolo);
}
.piede a { color: #fff; }
.piede__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--s6);
	padding-bottom: var(--s6);
	border-bottom: 1px solid rgba(255,255,255,.16);
}
.piede h4 { color: #fff; font-size: var(--t-corpo); margin-bottom: var(--s3); }
.piede__coda {
	padding-top: var(--s4);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s4);
	flex-wrap: wrap;
	color: rgba(255,255,255,.65);
	font-size: var(--t-minuto);
}

/* I link della coda — social e privacy. Sottolineati: su un fondo marrone a
   opacità ridotta, il solo cambio di colore non basta a dire «è un link».
   Misurati: 7,95:1 sul marrone, 10,28:1 in hover — oltre AAA.

   ⚠️ Il `padding-block` con margine negativo che lo compensa serve al DITO,
   non all'occhio: senza, il bersaglio era alto quanto la riga di testo —
   24,75px misurati — su un sito il cui pubblico arriva in larga parte da
   Instagram, cioè da telefono. Lo spazio visivo resta identico.
   Rilievo `design-reviewer`, 2026-08-05. */
.piede__coda a {
	color: rgba(255,255,255,.85);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-block: .45rem;
	margin-block: -.45rem;
}
.piede__coda a:hover { color: #fff; }

.piede__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }

/* Icona e nome sulla stessa riga, allineati per l'occhio e non per il
   bordo: un'icona quadrata accanto a una parola sta bene solo se il suo
   centro è all'altezza del centro delle lettere. */
.piede__social { display: inline-flex; align-items: center; gap: .4rem; }
.piede__social svg { flex: none; display: block; }

/* Contatto sempre disponibile (D007) */
.contatto-diretto {
	display: flex;
	gap: var(--s3);
	flex-wrap: wrap;
	margin-top: var(--s4);
}
.contatto-diretto a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s3) var(--s5);   /* idem: bersaglio da pollice */
	border: 1px solid rgba(255,255,255,.3);
	border-radius: var(--raggio);
	text-decoration: none;
	font-size: var(--t-piccolo);
}
.contatto-diretto a:hover { background: rgba(255,255,255,.1); }

/* =========================================================================
   4. Intestazione di pagina
   ====================================================================== */

.intestazione {
	padding-block: var(--s8) var(--s7);
	text-align: center;
	max-width: var(--testo);
	margin-inline: auto;
}
.intestazione p { color: var(--inchiostro-2); font-size: var(--t-guida); }

/* =========================================================================
   5. Griglia dei pacchetti — la pagina che converte
   ====================================================================== */

.pacchetti {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: var(--s4);
	align-items: start;
	padding-bottom: var(--s7);
}

.pacchetto {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-l);
	padding: var(--s6) var(--s5) var(--s5);
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	transition: box-shadow .2s ease, transform .2s ease;
}
/*
 * ⚠️ La scheda sotto il puntatore deve VEDERSI.
 *
 * Prima si alzava di tre pixel e basta: un movimento così piccolo si nota
 * quando lo si cerca, non mentre si sceglie fra cinque schede affiancate.
 * Ora prende un contorno pieno in amarena.
 *
 * Il contorno è un `box-shadow`, non un bordo più spesso: cambiare la
 * larghezza del bordo da 1px a 2px sposterebbe di un pixel tutto il contenuto
 * della scheda, e cinque schede che sussultano al passaggio del mouse sono
 * peggio di nessun segnale.
 *
 * `:focus-within` insieme a `:hover`: la scheda contiene un collegamento,
 * quindi chi naviga da tastiera riceve lo stesso segnale invece di doverlo
 * indovinare dal solo anello di fuoco del pulsante.
 */
.pacchetto:hover,
.pacchetto:focus-within {
	border-color: var(--amarena);
	box-shadow: 0 0 0 2px var(--amarena), 0 12px 34px rgba(34,30,26,.12);
	transform: translateY(-3px);
}

/* La scheda in evidenza ha già il bordo amarena: sotto il puntatore le si
   ispessisce l'anello, altrimenti sarebbe l'unica a non rispondere. */
.pacchetto--evidenza:hover,
.pacchetto--evidenza:focus-within {
	box-shadow: 0 0 0 3px var(--amarena), 0 12px 34px var(--ombra-forte);
}

.pacchetto--evidenza {
	border-color: var(--amarena);
	border-width: 2px;
	box-shadow: 0 10px 30px var(--ombra-media);
}
.pacchetto__nastro {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--amarena);
	color: #fff;
	font-size: var(--t-etichetta);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: var(--s1) var(--s3);
	border-radius: 100px;
	white-space: nowrap;
}

.pacchetto__nome {
	font-family: var(--serif);
	font-size: var(--t-medio);
	margin: 0 0 var(--s1);
}
.pacchetto__sottotitolo {
	font-size: var(--t-minuto);
	color: var(--inchiostro-3);
	margin: 0 0 var(--s5);
	min-height: 2.4em;
}

.pacchetto__prezzo {
	font-family: var(--serif);
	font-size: var(--t-cifra);
	line-height: 1;
	color: var(--cioccolato);
	font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 144;
	margin-bottom: var(--s1);
}
.pacchetto__prezzo sup {
	font-size: var(--t-piccolo);
	top: -1.1em;
	margin-right: 1px;
}
.pacchetto__nota {
	font-size: var(--t-minuto);
	color: var(--inchiostro-3);
	margin-bottom: var(--s5);
}

/* La riga di descrizione, oggi solo sul MINI. Colore pieno e non tenue:
   non è una nota a margine del prezzo, è un argomento di vendita. */
.pacchetto__descrizione {
	margin: calc(var(--s2) * -1) 0 var(--s4);
	font-size: var(--t-piccolo);
	color: var(--inchiostro-2);
}

/* Le specifiche: stesse righe, stesso ordine, su ogni pacchetto.
   È così che il visitatore confronta una riga alla volta. */
.specifiche {
	list-style: none;
	margin: 0 0 var(--s5);
	padding: var(--s4) 0;
	border-block: 1px solid var(--bordo);
	font-size: var(--t-piccolo);
}
.specifiche li {
	display: flex;
	justify-content: space-between;
	gap: var(--s3);
	padding-block: var(--s2);
}
.specifiche dt, .specifiche .etichetta { color: var(--inchiostro-3); }
.specifiche .valore { font-weight: 600; text-align: right; }

.incluse {
	list-style: none;
	margin: 0 0 var(--s5);
	padding: 0;
	font-size: var(--t-piccolo);
	color: var(--inchiostro-2);
	flex-grow: 1;
}
.incluse li {
	padding-left: var(--s5);
	position: relative;
	margin-bottom: var(--s2);
}
.incluse li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--pistacchio);
	border-bottom: 2px solid var(--pistacchio);
	transform: rotate(-45deg);
}

.pacchetto .bottone { width: 100%; text-align: center; margin-top: auto; }

/* =========================================================================
   6. Blocchi di contenuto
   ====================================================================== */

/* -------------------------------------------------------------------------
 * Un gusto per sezione.
 *
 * È qui che si rompe la monotonia: prima ogni sezione aveva la stessa forma
 * e lo stesso fondo, e dopo la terza l'occhio smetteva di guardare. Ora il
 * ritmo lo dà il cambio di gusto, e la pagina si scorre come una vaschetta.
 *
 * Regola d'uso: due sezioni adiacenti non hanno mai lo stesso gusto, e fra
 * due gusti pieni ci va sempre una panna a fare respiro.
 * ---------------------------------------------------------------------- */

.sezione { padding-block: var(--s8); }

.sezione--panna      { background: var(--panna); }
.sezione--panna-2    { background: var(--panna-scura); }
.sezione--crema      { background: var(--crema); }
.sezione--pistacchio { background: var(--pistacchio); }
.sezione--fragola    { background: var(--fragola); }
.sezione--limone     { background: var(--limone); }

/* I due gusti scuri: qui il testo si ribalta in chiaro. */
.sezione--amarena,
.sezione--cioccolato {
	color: var(--su-scuro);
}
.sezione--amarena    { background: var(--amarena); }
.sezione--cioccolato { background: var(--cioccolato); }

.sezione--amarena h1, .sezione--amarena h2, .sezione--amarena h3,
.sezione--cioccolato h1, .sezione--cioccolato h2, .sezione--cioccolato h3 { color: #fff; }

.sezione--amarena .occhiello,
.sezione--cioccolato .occhiello { color: var(--crema); }

.sezione--amarena p, .sezione--cioccolato p { color: rgba(255,255,255,.86); }

/* Sui fondi scuri il primario non può restare amarena su amarena. */
.sezione--amarena .bottone,
.sezione--cioccolato .bottone {
	background: var(--crema);
	border-color: var(--crema);
	color: var(--cioccolato);
}
.sezione--amarena .bottone:hover,
.sezione--cioccolato .bottone:hover { background: #fff; border-color: #fff; }

.sezione--amarena .bottone--vuoto,
.sezione--cioccolato .bottone--vuoto {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.6);
}
.sezione--amarena .bottone--vuoto:hover,
.sezione--cioccolato .bottone--vuoto:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Sui pastelli l'occhiello dorato sbiadisce: serve un bruno che tenga. */
.sezione--pistacchio .occhiello,
.sezione--fragola .occhiello,
.sezione--limone .occhiello,
.sezione--crema .occhiello { color: var(--cioccolato); }

/* Contrasti misurati sulla palette (rapporto su testo normale, soglia AA 4.5):
 *
 *              inchiostro  inchiostro-2  inchiostro-3  oro-testo  bianco
 *   panna         15.25        8.18          6.15        5.81      1.03
 *   crema         12.52        6.72          5.05        4.77      1.26
 *   limone        13.29        7.12          5.36        5.06      1.19
 *   pistacchio     9.93        5.33          4.00 ✗      3.78 ✗    1.59
 *   fragola       10.34        5.54          4.17 ✗      3.94 ✗    1.53
 *   amarena        1.97 ✗      1.06 ✗        1.26 ✗      1.33 ✗    8.00
 *   cioccolato     1.53 ✗      1.22 ✗        1.62 ✗      1.71 ✗   10.28
 *
 * Le due caselle ✗ sui pastelli: oggi non capitano, perché quei testi stanno
 * dentro schede bianche. Questa regola è una difesa perché non capitino
 * domani per distrazione — su pistacchio e fragola il grigio si scurisce. */
.sezione--pistacchio,
.sezione--fragola { --inchiostro-3: var(--inchiostro-2); }

.nota-riquadro {
	background: var(--pistacchio);
	border-left: 3px solid var(--pistacchio);
	padding: var(--s5);
	border-radius: 0 var(--raggio) var(--raggio) 0;
	margin-block: var(--s6);
}
.nota-riquadro p:last-child { margin-bottom: 0; }

.esclusivi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s5);
}
.esclusivo {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-l);
	padding: var(--s6) var(--s5);
}
.esclusivo h3 { margin-bottom: var(--s2); }
.esclusivo p { font-size: var(--t-piccolo); color: var(--inchiostro-2); margin-bottom: 0; }

/* Fascia stretta, non una sezione a sé: è una riga di credenziali, e con
   il padding pieno di .sezione sembrava una stanza vuota con tre scritte. */
.riconoscimento {
	text-align: center;
	flex: 0 1 230px;
}
/* Il titolo occupa comunque due righe: così i sottotitoli restano allineati
   fra loro anche quando uno solo dei premi va a capo. */
/* Una regola sola: erano due, e la seconda annullava colore e allineamento
   della prima. Il titolo occupa comunque due righe, così i sottotitoli
   restano allineati anche quando uno solo dei premi va a capo. */
.riconoscimento strong {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5em;   /* tre righe: il titolo più lungo ne occupa tre,
	                        e senza questo i sottotitoli si scalano */
	margin-bottom: var(--s2);
	font-family: var(--serif);
	font-size: var(--t-guida);
	font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 24;
	color: var(--cioccolato);
}
.riconoscimento span { font-size: var(--t-minuto); color: var(--inchiostro-2); }

/* Avviso segnaposto — visibile solo nel prototipo */
.segnaposto {
	background: #FFF4D6;
	border: 1px dashed #C9A227;
	color: #6B5410;
	padding: var(--s4) var(--s5);
	border-radius: var(--raggio);
	font-size: var(--t-minuto);
	margin-block: var(--s5);
}
.segnaposto strong { color: #4A3A0B; }
/* Nelle sezioni scure il testo è chiaro: l'avviso ha fondo giallo e va
   riportato a scuro, altrimenti sparisce. */
.sezione--amarena .segnaposto,
.sezione--amarena .segnaposto p,
.sezione--cioccolato .segnaposto,
.sezione--cioccolato .segnaposto p,
.apertura .segnaposto { color: #6B5410; }

/* =========================================================================
   7. Home page
   ====================================================================== */

/* Intro di sezione: occhiello + titolo + una riga. Sempre la stessa forma,
   così le sezioni si leggono come un ritmo e non come blocchi scollegati. */
.sezione__intro {
	max-width: var(--testo);
	margin: 0 auto var(--s6);
	text-align: center;
}
.sezione__intro p:last-child {
	color: var(--inchiostro-2);
	margin-bottom: 0;
}
/* Variante asimmetrica dell'intro: titolo a sinistra, testo a destra.
   Serve a spezzare lo schema "occhiello + titolo centrato" che si ripeteva
   in quattro sezioni su sei — il colore dava ritmo, la forma no. */
.sezione__intro--largo {
	max-width: none;
	text-align: left;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s7);
	align-items: end;
}
.sezione__intro--largo h2 { margin-bottom: 0; }
.sezione__intro--largo p:last-child { padding-bottom: var(--s2); }

@media (max-width: 860px) {
	.sezione__intro--largo { grid-template-columns: 1fr; gap: var(--s4); }
}

.sezione__coda {
	text-align: center;
	margin-top: var(--s6);
	margin-bottom: 0;
	font-size: var(--t-piccolo);
}
.sezione__coda a { font-weight: 600; }

/* Segnaposto fotografico: mostra la forma dell'immagine e dichiara lo scatto
   che serve. Sparisce quando arrivano le foto vere del cliente. */
.foto-da-fare {
	display: block;
	padding: var(--s3) var(--s4);
	background: rgba(34,30,26,.55);
	color: #fff;
	font-size: var(--t-etichetta);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	border-radius: var(--raggio);
	/* min() e non 32em secco: su telefono 32em sono 512px dentro un riquadro
	   da 350, e l'intera pagina finiva per scorrere in orizzontale. */
	max-width: min(32em, 100%);
}

/* --- 7.1 Apertura ----------------------------------------------------- */

/* Il testo sta SOPRA l'immagine, non sotto: l'apertura deve leggersi come una
   schermata sola. La prima versione impilava una fascia immagine e un blocco
   di testo, e a schermo sembravano due sezioni diverse — mezza schermata
   spesa senza dire nulla. */
.apertura {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(460px, 76vh, 720px);
	isolation: isolate;
}
.apertura__sfondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--cioccolato);
	background-size: cover;
	background-position: center 58%;   /* il carretto sta poco sotto il centro */
	/* Quando arriva la foto vera: background-image + questo velo che tiene
	   il testo leggibile qualunque cosa ci sia sotto. */
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: var(--s5);
}
/* IL VELO — una fascia scura in mezzo, non una coperta su tutto.
 *
 * Prima era un velo PIATTO da .62 a .78: la fotografia si vedeva al 25%
 * e il committente ha detto, giustamente, che le foto sono troppo grigie.
 *
 * 🔴 Ma alleggerirlo e basta non si poteva, ed è stato misurato invece che
 * discusso (`strumenti/misura-velo-apertura.py`): un velo piatto è tarato
 * sul punto peggiore e poi applicato ovunque, quindi ogni punto di velo in
 * meno lo paga direttamente il testo. Portandolo a .52/.68 il contrasto
 * del sommario scendeva a 4,09:1, sotto la soglia AA di 4,5.
 *
 * La via d'uscita è smettere di far fare due lavori a un attrezzo solo. Il
 * velo serviva a proteggere il testo — che sta AL CENTRO — e nel farlo
 * spegneva anche i bordi, dove testo non ce n'è. Quindi: scuro in mezzo,
 * quasi pulito sopra e sotto.
 *
 * ⚠️ Fascia orizzontale e non alone ellittico, che sarebbe più elegante:
 * su un telefono il titolo è largo quanto lo schermo ed ESCE dall'ellisse.
 * Misurato: l'alone crollava a 1,89:1. La fascia tiene tutta la larghezza
 * e quindi regge a ogni dimensione di finestra.
 *
 * Le tappe qui sotto sono quelle misurate, non stimate:
 *   contrasto peggiore sul testo  5,21:1  (soglia 4,5 · era 7,93)
 *   fotografia visibile           41%     (era 25%) — 1,7 volte più presente
 * Chi le cambia rilancia lo strumento: sono numeri, non gusti. */
.apertura__sfondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(38,24,16,.30)   0%,
		rgba(38,24,16,.52)  18%,
		rgba(38,24,16,.74)  38%,
		rgba(38,24,16,.82)  50%,
		rgba(38,24,16,.74)  62%,
		rgba(38,24,16,.52)  82%,
		rgba(38,24,16,.30) 100%);
}
.apertura__sfondo .foto-da-fare {
	position: relative;
	z-index: 1;
	background: rgba(20,26,20,.62);
	max-width: 22em;
}

.apertura__testo {
	position: relative;
	padding-block: var(--s8);
	max-width: 860px;
	text-align: center;
	color: #fff;
}
.apertura__testo h1 {
	color: #fff;
	margin-bottom: var(--s5);
	text-shadow: 0 1px 24px rgba(20,26,20,.45);
	/* Scala propria dell'hero: il minimo globale (2.6rem) tagliava
	   "Gelato. Not ice cream." fuori dallo schermo sotto i 400px. Questa
	   scende fino a stare dentro un telefono da 320px. */
	font-size: clamp(2.2rem, 7.8vw, 5rem);
}
.apertura__testo .occhiello { color: var(--crema); }
/* Il marchio in apertura. Oggi è tipografia; quando ci sarà il logo
   ridisegnato prenderà il suo posto senza toccare il resto del blocco. */
/* Marchio animato: SVG inline, trasparente, direttamente sull'hero scuro.
   Le animazioni partono una volta (fill-mode both) e restano sul logo finito;
   il kill globale di prefers-reduced-motion (in fondo al file) le spegne e
   lascia l'SVG nel suo stato finale. Fonte: marchio/animazione/marchio-animato.html. */
.apertura__logo { display: block; margin: 0 auto var(--s5); line-height: 0; }
.apertura__logo svg { display: block; width: 108px; height: auto; margin: 0 auto; overflow: visible; }

.apertura__logo .foglia,
.apertura__logo .pallina { transform-box: fill-box; }
.apertura__logo mask .foglia,
.apertura__logo mask .pallina { transform-box: border-box; transform: none; }

/* Le foglie crescono dal proprio attacco, non dal centro. */
.apertura__logo .foglia { animation: cresce 1.05s cubic-bezier(.16,.84,.28,1) both; }
.apertura__logo .foglia--sx { transform-origin: 100% 100%; animation-delay: 0s;   --chiusa: 26deg;  --aperta: -1.5deg; }
.apertura__logo .foglia--dx { transform-origin: 0 100%;    animation-delay: .22s; --chiusa: -26deg; --aperta: 1.5deg; }
@keyframes cresce {
	0%   { transform: scale(.08) rotate(var(--chiusa)); opacity: 0; }
	40%  { opacity: 1; }
	62%  { transform: scale(1.012) rotate(var(--aperta)); }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Le tre palline scendono dietro le foglie, una dopo l'altra, con un rimbalzo. */
.apertura__logo .pallina { transform-origin: center; animation: cade .85s cubic-bezier(.28,1.15,.35,1) both; }
.apertura__logo .pallina--alta { animation-delay: .70s; }
.apertura__logo .pallina--sx   { animation-delay: .88s; }
.apertura__logo .pallina--dx   { animation-delay: 1.06s; }
@keyframes cade {
	0%   { transform: translateY(-165px) scale(.74); opacity: 0; }
	28%  { opacity: 1; }
	58%  { transform: translateY(5px) scale(1.045,.955); }
	76%  { transform: translateY(-2.5px) scale(.99,1.015); }
	100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Lo spazio-cono si apre a fine caduta: le maschere restano ferme in posizione
   finale e crescono di spessore da zero solo quando la forma è atterrata. */
.apertura__logo mask .pallina { animation: apre-pallina .26s ease-out both; }
.apertura__logo mask .foglia  { animation: apre-foglia  .26s ease-out both; }
@keyframes apre-pallina { 0% { opacity: 0; r: 27; }       8% { opacity: 1; r: 27; }       100% { opacity: 1; r: 29.5; } }
@keyframes apre-foglia  { 0% { opacity: 0; stroke-width: 0; } 8% { opacity: 1; stroke-width: 0; } 100% { opacity: 1; stroke-width: 5; } }
.apertura__logo mask .foglia--sx    { animation-delay: 1.05s; }
.apertura__logo mask .foglia--dx    { animation-delay: 1.27s; }
.apertura__logo mask .pallina--alta { animation-delay: 1.55s; }
.apertura__logo mask .pallina--sx   { animation-delay: 1.73s; }
.apertura__logo mask .pallina--dx   { animation-delay: 1.91s; }

.apertura__marchio {
	margin: 0 0 var(--s6);
	line-height: 1;
}
.apertura__marchio-nome {
	display: block;
	font-family: var(--serif);
	font-size: clamp(2.2rem, 3.9vw, 3rem);
	font-weight: 600;
	font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 72;
	color: var(--crema);
	letter-spacing: -0.015em;
}
.apertura__marchio-coda {
	display: block;
	margin-top: var(--s2);
	font-family: var(--sans);
	font-size: clamp(0.85rem, 1.2vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: rgba(255,255,255,.72);
	text-indent: 0.42em;   /* compensa lo spazio finale della spaziatura */
}


.apertura__sommario {
	font-size: clamp(1.2rem, 1.8vw, 1.45rem);
	color: rgba(255,255,255,.93);
	max-width: var(--testo);
	margin-inline: auto;
	text-shadow: 0 1px 16px rgba(20,26,20,.5);
}
/* Regola del sistema: su fondo scuro il pulsante primario è ORO con testo
   scuro, il secondario è un contorno bianco. Il verde su verde non si stacca
   abbastanza per essere l'azione principale. Vale qui e nella chiusura. */
.apertura .bottone {
	background: var(--crema);
	border-color: var(--crema);
	color: var(--cioccolato);
}
.apertura .bottone:hover { background: #fff; border-color: #fff; }
.apertura .bottone--vuoto {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.55);
}
.apertura .bottone--vuoto:hover { background: rgba(255,255,255,.14); }
.apertura__sommario em { font-style: italic; }

/* --- 7.1b Le tre porte del prodotto (hero) ---------------------------
   Modello Biancolatte: il visitatore sceglie subito cosa vuole. Tre
   tessere invece di due bottoni generici. Gerarchia per colore, non per
   dimensione: l'azione principale (Book a cart) è amarena, la regola di
   marca per la CTA primaria; "Order online" è spenta perché non esiste
   ancora (tappa 3, delivery). */
.porte {
	display: flex;
	gap: var(--s4);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--s6);
}
.porta {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 220px;
	max-width: 270px;
	border-radius: var(--raggio-l);
	overflow: hidden;
	background: var(--panna);
	color: var(--cioccolato);
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(20,26,20,.26);
	transition: transform .15s ease, box-shadow .15s ease;
}
a.porta:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(20,26,20,.34);
}
.porta__foto {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
}
.porta__corpo {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s4) var(--s5);
	text-align: left;
	/* Il corpo riempie tutta l'altezza rimasta della card: le tre card sono
	   alte uguali (flex row), e senza questo la card più corta lasciava
	   scoperta una striscia del fondo panna sotto la banda colorata. */
	flex: 1 1 auto;
}
.porta__icona {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}
.porta__icona svg { width: 100%; height: 100%; display: block; }
.porta__testo { display: flex; flex-direction: column; gap: 2px; }
.porta__titolo {
	font-family: var(--serif);
	font-size: var(--t-medio);
	font-weight: 600;
	line-height: 1.05;
}
.porta__sotto {
	font-family: var(--sans);
	font-size: var(--t-piccolo);
	color: var(--inchiostro-2);
}
/* Un colore per ogni card, armonico sulla palette dei gusti. Solo "Book a
   cart" è amarena — è l'azione principale e resta l'unico rosso. */
.porta--primaria .porta__corpo { background: var(--amarena);    color: var(--panna); }
.porta--primaria .porta__sotto  { color: rgba(255,255,255,.85); }
.porta--classe   .porta__corpo { background: var(--pistacchio); color: var(--cioccolato); }
.porta--presto   .porta__corpo { background: var(--crema);      color: var(--cioccolato); }

/* "Order online": tappa 3, non ancora attiva. Resta a colori pieni come le
   altre — a dirlo basta il nastro "coming soon"; è solo non cliccabile. */
.porta--presto { cursor: default; }
/* Badge "Coming soon". Fondo cioccolato, non foglia: il verde chiaro con
   testo bianco a questa dimensione (~10px) restava a ~2,65:1, sotto AA
   (rilievo dei gate 2026-07-23). Cioccolato + panna sta sopra 9:1. */
.porta__nastro {
	position: absolute;
	top: var(--s3);
	left: var(--s3);
	z-index: 2;
	font-family: var(--sans);
	font-size: var(--t-etichetta);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cioccolato);
	color: var(--panna);
}

/* --- 7.1c Pagine editoriali (About) ----------------------------------
   Fascia colorata col titolo + corpo a larghezza di lettura su panna.
   Le pagine non devono essere lastre bianche. */
.pagina__testata { text-align: center; }
.pagina__corpo {
	max-width: var(--testo);
	margin-inline: auto;
}

/* --- 7.2 Occasioni ---------------------------------------------------- */

/* Non sono quattro percorsi: sono quattro esempi che atterrano sullo stesso
   listino. Nessuna di queste tessere è un link a una pagina dedicata. */
.occasioni {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--s5);
}
.occasione h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-guida); }
.occasione p {
	font-size: var(--t-piccolo);
	color: var(--inchiostro-2);
	margin-bottom: 0;
}
.occasione__foto {
	aspect-ratio: 4 / 3;
	background: var(--panna-scura);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-l);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s4);
}
.occasione__foto .foto-da-fare { background: rgba(34,30,26,.42); }

/* Tessere con foto vera: la foto riempie il riquadro, il segnaposto sparisce. */
.occasione__foto--reale,
.doppia__figura--reale {
	background-size: cover;
	background-position: center;
	border: 0;
}
.doppia__figura--reale {
	aspect-ratio: 4 / 5;
	position: relative;
	overflow: hidden;
	background-image: none !important;   /* le foto le portano gli scatti */
}

/* --- 7.3 Blocco a due colonne (corsi) --------------------------------- */

.doppia {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s7);
	align-items: center;
}
.doppia__figura {
	aspect-ratio: 4 / 5;
	background: var(--pistacchio);
	border-radius: var(--raggio-l);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s5);
}
.doppia__figura .foto-da-fare { background: rgba(56,80,59,.72); }
.doppia__testo p { color: var(--inchiostro-2); }
.doppia__testo .bottone { margin-top: var(--s3); }
/* Due percorsi per la classe: add-on all'evento / workshop pubblico (D027). */
.doppia__azioni { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); }
.doppia__azioni .bottone { margin-top: 0; }

/* --- 7.4 Prodotto ----------------------------------------------------- */

.esclusivo__nota {
	font-size: var(--t-minuto) !important;
	color: var(--inchiostro-3) !important;
	margin-top: var(--s3);
}

/* --- 7.5 Recensioni --------------------------------------------------- */


/* --- 7.6 Chiusura ----------------------------------------------------- */

/* Il colore della chiusura lo dà .sezione--amarena: qui resta
   solo l'impaginazione, così il gusto si cambia in un posto solo. */
.chiusura { margin-top: 0; }
.chiusura__interno {
	max-width: var(--testo);
	text-align: center;
}
.chiusura__azioni {
	display: flex;
	gap: var(--s4);
	justify-content: center;
	flex-wrap: wrap;
	margin-block: var(--s6) var(--s7);
}
.chiusura__umano {
	font-size: var(--t-piccolo);
	color: rgba(255,255,255,.72);
	margin-bottom: 0;
}
.contatto-diretto--chiaro { justify-content: center; }
.contatto-diretto--chiaro a { color: #fff; }

/* =========================================================================
   8. Accessibilità e schermi piccoli
   ====================================================================== */

a:focus-visible, button:focus-visible {
	outline: 3px solid var(--oro);
	outline-offset: 2px;
}

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

@media (max-width: 720px) {
	body { font-size: var(--t-corpo); }
	.pacchetti { grid-template-columns: 1fr; }
	.pacchetto__sottotitolo { min-height: 0; }

	/* Su telefono le due colonne dei corsi si impilano e la foto si abbassa:
	   un ritratto 4/5 a piena larghezza spingerebbe il testo sotto la piega. */
	.doppia { grid-template-columns: 1fr; gap: var(--s5); }
	.doppia__figura { aspect-ratio: 3 / 2; }

	.apertura { min-height: 88vh; }
	.apertura__testo { padding-block: var(--s7) var(--s8); }
	.apertura__sfondo { justify-content: center; }
	.porte { flex-direction: column; align-items: stretch; }
	.porta { max-width: none; }
	/* Su telefono la foto 4/3 a piena larghezza, dentro la card in flex-column,
	   poteva far collassare la banda colorata sottostante — e con essa sparivano
	   le scritte (Book gelato / Book a class / Order online). Le si dà un'altezza
	   fissa e le si toglie la crescita flex, così la banda con l'etichetta resta
	   sempre a piena altezza e visibile. */
	.porta__foto  { aspect-ratio: auto; height: 150px; flex: 0 0 auto; }
	.porta__corpo { flex: 0 0 auto; }
	.chiusura__azioni .bottone { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.pacchetto:hover { transform: none; }
}

/* =========================================================================
   9. La pagina dei gusti
   ====================================================================== */

/* Ogni scheda porta il colore della sua famiglia: messe insieme, le
   quattordici schede sono la vaschetta. È il motivo per cui qui non
   servono fotografie — il colore distingue meglio, e non pesa. */
.gusti {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: var(--s4);
}

.gusto {
	background: var(--fondo);
	color: var(--testo);
	border-radius: var(--raggio-l);
	padding: var(--s5);
	display: flex;
	flex-direction: column;
	min-height: 216px;
	position: relative;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.gusto:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(42,33,27,.14);
}

/* La pallina: un cerchio grande che esce dall'angolo, nello stesso colore
   ma più intenso. Dà profondità senza aggiungere un'immagine. */
.gusto__pallina {
	position: absolute;
	top: -52px;
	right: -52px;
	width: 148px;
	height: 148px;
	border-radius: 50%;
	background: currentColor;
	opacity: .09;
	pointer-events: none;
}

.gusto__nome {
	font-family: var(--serif);
	font-size: var(--t-medio);
	font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 24;
	margin: 0 0 var(--s2);
	color: inherit;
	position: relative;
}
.gusto__riga {
	font-size: var(--t-piccolo);
	line-height: 1.5;
	opacity: .86;
	margin: 0 0 var(--s4);
	flex-grow: 1;
}

.gusto__etichette {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin: 0 0 var(--s3);
}
.etichetta {
	font-size: var(--t-etichetta);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 3px var(--s3);
	border-radius: 100px;
	border: 1px solid currentColor;
	opacity: .62;
}
/* L'etichetta piena va in negativo: testo del colore del fondo della
   scheda, così resta leggibile su qualunque famiglia di colore. */
/* Colore esplicito, non currentColor: in `background` currentColor si
   risolve con il `color` FINALE dell'elemento — che qui è il colore del
   fondo della scheda. Risultato: etichetta invisibile. Errore trovato
   confrontando l'HTML renderizzato con quello che si vedeva a schermo. */
.etichetta--forte {
	opacity: 1;
	background: var(--testo);
	color: var(--fondo);
	border-color: transparent;
}

/* Gli allergeni sotto al nome del gusto.
 *
 * 🔴 Era `opacity: .58` con tutto in maiuscolo: il trattamento MENO
 * leggibile del foglio applicato all'unica informazione sanitaria della
 * pagina. Nato quando la riga diceva sempre e solo «Allergen list on
 * request» ed era davvero un ritornello da smorzare; da quando dice cosa
 * c'è dentro, smorzarla è esattamente il contrario di quello che serve.
 *
 * Ora la gerarchia la fa il colore, non la trasparenza — un testo al 58%
 * non è "meno importante", è più difficile da leggere per tutti e
 * illeggibile per qualcuno. E il maiuscolo resta solo sull'etichetta:
 * «MILK, TREE NUTS» tutto maiuscolo si legge peggio di «milk, tree nuts»,
 * e qui la cosa da leggere sono le parole, non il titoletto. */
/* L'origine dell'ingrediente, sotto la descrizione del gusto.
 *
 * Deve leggersi come un'ETICHETTA, non come una seconda frase: è un dato di
 * provenienza, e il lettore lo scansiona invece di leggerlo. Da qui il corpo
 * più piccolo e il filetto laterale, che lo separa dalla descrizione senza
 * bisogno di uno spazio bianco che allungherebbe ventidue schede.
 *
 * ⚠️ Il colore viene dal `--testo` della scheda, come tutto il resto qui
 * dentro: due famiglie hanno il fondo scuro e un inchiostro globale
 * sparirebbe (D051). Stessa miscela della riga «può contenere». */
.gusto__origine {
	font-size: var(--t-minuto);
	line-height: 1.35;
	color: color-mix(in srgb, var(--testo) 80%, var(--fondo));
	padding-inline-start: var(--s3);
	border-inline-start: 2px solid color-mix(in srgb, var(--testo) 34%, var(--fondo));
	margin: 0 0 var(--s3);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.gusto__origine { border-inline-start-color: currentColor; }
}

/* 🔴 IL COLORE QUI NON PUÒ VENIRE DALLA TAVOLOZZA GLOBALE.
 *
 * Difetto segnalato dal committente — «gli allergeni non si leggono bene,
 * problemi di colore dei font» — e la causa è precisa: ogni scheda gusto
 * dichiara il PROPRIO fondo e il proprio testo (`--fondo` / `--testo`,
 * poco sopra), e due famiglie hanno il fondo SCURO: cioccolato #59392A e
 * amarena #93293D. Scrivendo `color: var(--inchiostro-2)` — un bruno
 * scuro — su quelle due schede si ottiene scuro su scuro: illeggibile.
 *
 * L'errore di ragionamento è stato assumere «schede pastello» perché lo
 * sono venti su ventidue. Un colore scritto a mano dentro un componente
 * che si ricolora è sbagliato per costruzione: funziona finché non
 * incontra la variante che non avevi in mente.
 *
 * `color-mix` risolve la classe intera invece del caso: il testo parte
 * SEMPRE dal `--testo` della scheda e ci si mescola un po' del suo
 * `--fondo` per smorzarlo. Su fondo chiaro schiarisce un inchiostro
 * scuro, su fondo scuro scurisce un testo chiaro — la polarità è giusta
 * da sola, e resterà giusta anche per la famiglia che qualcuno aggiungerà
 * senza leggere questo commento.
 *
 * ⚠️ Niente `opacity`: era la soluzione di prima ed è quella che il
 * committente ha bocciato. Un testo trasparente non è «meno importante»,
 * è più faticoso per tutti — e questa è l'informazione sanitaria. */
.gusto__allergeni {
	font-size: var(--t-minuto);
	color: color-mix(in srgb, var(--testo) 82%, var(--fondo));
	margin: var(--s2) 0 0;
	line-height: 1.4;
}
.gusto__allergeni strong {
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--t-etichetta);
	color: var(--testo);
}

/* Dichiarato e pulito: si può dire, ma non deve gridare.
   ⚠️ 62% sembrava un bel grigio e NON passava: misurato nel browser dava
   3,79:1 su mango, 3,81 su fragola, 3,92 su amarena e 4,25 su limone —
   quattro schede su otto sotto la soglia AA. Gli otto fondi sono troppo
   diversi perché un'unica percentuale «a occhio» funzioni su tutti.
   A 80% passano tutte, e resta comunque più tenue delle righe sopra. */
.gusto__allergeni--nessuno {
	color: color-mix(in srgb, var(--testo) 80%, var(--fondo));
}

/* 🔴 NON DICHIARATO. È l'unico stato in cui la pagina ammette di non
   sapere, e deve staccarsi da «non ne contiene»: in pagina i due si
   somigliano pericolosamente, perché nessuno dei due elenca niente.

   ⚠️ Qui NON si usa l'amarena: sulla scheda amarena sparirebbe, ed è
   proprio la riga che non può sparire. Si inverte invece il contrasto —
   fondo del colore del testo, testo del colore del fondo — che è
   leggibile su qualunque scheda perché usa i due colori che quella
   scheda ha già dichiarato compatibili fra loro. */
.gusto__allergeni--ignoto {
	display: inline-block;
	color: var(--fondo);
	background: var(--testo);
	padding: 2px var(--s2);
	border-radius: var(--raggio);
	font-weight: 700;
}

/* «Può contenere»: c'è, ma non è «contiene». Il rientro e il filetto lo
   dicono prima delle parole — chi scorre in fretta deve capire dal
   colpo d'occhio quale delle due righe sta guardando. Anche il filetto
   viene dal testo della scheda: `--bordo` è un beige, e su fondo
   cioccolato spariva. */
.gusto__allergeni--tracce {
	/* ⚠️ 80%, non 68%. A 68 il contrasto sarebbe ~4,44:1 su mango e ~4,49
	   su fragola — sotto AA. Oggi quelle combinazioni NON esistono (la riga
	   «May contain» compare solo su cinque gusti, tutti crema e cioccolato,
	   misurati a 4,94:1 e 5,59:1), quindi il rilievo del `design-reviewer`
	   era un falso positivo sul presente. Ma è vero sul futuro: basta che
	   un gusto mango riceva delle tracce perché la riga nasca illeggibile,
	   senza che nessuno tocchi questo file. Allineato all'80% di
	   `--nessuno` — la stessa percentuale già misurata su tutte e otto le
	   famiglie. Costava un numero e toglie un difetto che aspettava. */
	color: color-mix(in srgb, var(--testo) 80%, var(--fondo));
	padding-inline-start: var(--s3);
	border-inline-start: 2px solid color-mix(in srgb, var(--testo) 34%, var(--fondo));
	margin-top: var(--s1);
}

/* Senza `color-mix` — Safari sotto la 16.2, Firefox sotto la 113 — l'intera
   dichiarazione viene scartata dal parser e il testo eredita `--testo` in
   tinta piena: leggibile, solo meno smorzato. Degradazione accettabile per
   il colore, NON per il filetto di `--tracce`, che è il segnale con cui si
   distingue «può contenere» da «contiene» a colpo d'occhio: quello va
   ripristinato con un colore che qualunque browser capisce.
   ⚠️ Lo stesso foglio già usa `@supports` per `color-mix` più sotto: qui
   mancava, ed è il rilievo del `wp-code-reviewer`. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.gusto__allergeni--tracce { border-inline-start-color: currentColor; }
}

.gusti__coda {
	max-width: var(--testo);
	margin: var(--s8) auto 0;
	text-align: center;
	padding: var(--s6);
	background: var(--panna-scura);
	border-radius: var(--raggio-l);
}
.gusti__coda p { margin-bottom: var(--s5); }

/* Scheda con foto: l'immagine sta in alto e il testo sotto, sullo stesso
   colore di famiglia — così le schede con e senza foto restano parenti.

   Le immagini sono fotografie piene della superficie del gelato (macro
   dall'alto, generate): riempiono la testa della scheda come una foto vera,
   `cover`. Prima erano le palline trasparenti da contenere — di qui il
   cambio da `contain` a `cover`. La foto va a filo dei bordi superiori
   della scheda, il testo sotto sullo stesso colore di famiglia. */
.gusto__foto {
	position: relative;   /* regge il bollino "senza latte" nell'angolo */
	margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--raggio-l) var(--raggio-l) 0 0;
}
.gusto__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 🔴 IL BOLLINO "DF" NON SI È MAI VISTO SU QUESTA PAGINA, ed è questa
   riga il motivo. Segnalato dal committente, poi misurato nel browser:
   il bollino stava a 16px SOPRA il bordo della scheda, e `.gusto` ha
   `overflow: hidden`.

   Il conto: `.gusto__foto` ha `margin-top: -1.5rem` per sfondare il
   padding della scheda e arrivare a filo. Quando è stata aggiunta
   `.gusto--con-foto { padding-top: 0 }`, quel padding non c'era più —
   ma il margine negativo è rimasto, e ha continuato a tirare la foto
   24px oltre il bordo. Due correzioni giuste in momenti diversi che
   insieme fanno un difetto: nessuna delle due, da sola, sembra sbagliata.

   ⚠️ Il bollino era solo la parte che si notava. Venivano tagliati anche
   i primi 24px di OGNI fotografia dei gusti, su tutte e ventidue le
   schede — una cimatura che non si vede perché una foto tagliata in cima
   sembra semplicemente una foto inquadrata così.

   Con `padding-top: 0` il margine negativo non serve più: è zero. */
.gusto--con-foto { padding-top: 0; }
.gusto--con-foto .gusto__foto { margin-top: 0; }

@media (max-width: 720px) {
	.gusti { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); }
	.gusto { min-height: 0; padding: var(--s4); }
	.gusto__nome { font-size: var(--t-guida); }
	/* ⚠️ Stessa trappola del desktop: la scorciatoia `margin` riscrive
	   anche il lato ALTO, quindi rimetterebbe il margine negativo che la
	   regola qui sopra ha appena azzerato — e su telefono, che è dove il
	   committente guarda, il bollino tornerebbe invisibile da solo. */
	.gusto__foto { margin: 0 calc(var(--s4) * -1) var(--s3); border-radius: var(--raggio-l) var(--raggio-l) 0 0; }
}

/* Il prezzo unitario sotto il totale: è l'informazione che rende
   comprensibile la cifra grande, e va vista da tutti — non era nel
   prototipo per caso, ci era finita solo nel blocco di debug. */
.pacchetto__unitario {
	display: inline-block;
	margin-top: var(--s1);
	font-weight: 700;
	color: var(--cioccolato);
}

/* --- I colori delle famiglie di gusto ---------------------------------
   Sono QUI e solo qui: il PHP stampa una classe, il CSS decide il colore.
   Prima gli esadecimali stavano anche in functions.php e le due liste
   erano già divergenti (nocciola e mango esistevano solo nel PHP).
   Ogni famiglia definisce due variabili: il fondo della scheda e il
   colore del testo che ci sta sopra, verificato sopra 4.5:1. */
.gusto--crema      { --fondo:#F7E4B0; --testo:#2A211B }
.gusto--cioccolato { --fondo:#59392A; --testo:#FDFBF6 }
.gusto--nocciola   { --fondo:#C9A87C; --testo:#2A211B }
.gusto--pistacchio { --fondo:#C6D3A0; --testo:#2A211B }
.gusto--fragola    { --fondo:#F4C6C9; --testo:#2A211B }
.gusto--limone     { --fondo:#F2EFA9; --testo:#2A211B }
.gusto--mango      { --fondo:#F5C97B; --testo:#2A211B }
.gusto--amarena    { --fondo:#93293D; --testo:#FDFBF6 }

/* =========================================================================
   I PREMI E LE CREDENZIALI
   ⚠️ L'intestazione di questa sezione era stata troncata dalla rimozione del
   CSS morto del 2026-07-30: il commento restava aperto e si mangiava la
   regola `.premi`, che è viva e usata dalla home. Le graffe risultavano
   sbilanciate, ed è così che il difetto è saltato fuori.
   ====================================================================== */

.premi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Erano tre fisse. Con l'aggiunta della verifica WWCC sono quattro, e
	   `auto-fit` evita di dover ritoccare il numero ogni volta che se ne
	   aggiunge una. */
	grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
	gap: var(--s4);
}

/* La card senza foto di consegna: non tutte le credenziali hanno una
   cerimonia, e inventarne una sarebbe falso. Al posto della fotografia sta
   il marchio, su fondo chiaro e con aria attorno — non ritagliato a pieno
   riquadro come una foto, che lo deformerebbe. */
.premio--marchio .premio__foto--marchio {
	display: grid;
	place-items: center;
	padding: var(--s5);
	background: var(--panna);
}

.premio--marchio .premio__foto--marchio img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 100%;
	object-fit: contain;
}

.premio {
	display: flex;
	/* Verticale, non orizzontale.
	   Erano tre card e la foto stava in una colonna al 38%: con l'aggiunta
	   della quarta (WWCC) quella colonna è scesa sotto i 90px e le fotografie
	   — che sono ritratti di consegna, non icone — diventavano illeggibili.
	   Impilate, la foto prende tutta la larghezza della card. */
	flex-direction: column;
	gap: 0;
	background: var(--panna);
	border-radius: var(--raggio-l);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(42,33,27,.07);
}

/* La foto prende tutta la larghezza, con un rapporto dichiarato: così le
   quattro card restano alte uguali anche con foto di proporzioni diverse. */
.premio__foto {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
	background: var(--panna-scura);
}
.premio__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.premio__testo {
	flex: 1 1 auto;
	padding: var(--s4) var(--s4) var(--s3);
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.premio__chi {
	font-size: var(--t-etichetta);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--amarena-f);
}
.premio__testo strong {
	font-family: var(--serif);
	font-size: var(--t-corpo);
	line-height: 1.15;
	font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 18;
	color: var(--cioccolato);
}
.premio__ente {
	font-size: var(--t-minuto);
	line-height: 1.35;
	color: var(--inchiostro-2);
}
.premio__data {
	font-size: var(--t-etichetta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--inchiostro-3);
}
/* Il logo dell'ente chiude la card in basso: dice chi firma. */
.premio__logo {
	height: 30px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	object-position: left center;
	margin-top: auto;
	padding-top: var(--s3);
}

@media (max-width: 980px) {
	.premi { grid-template-columns: 1fr; max-width: 34em; margin-inline: auto; }
}

/* =========================================================================
   11. La fascia dei clienti
   ====================================================================== */

/* ⚠️ Questa fascia è stata vestita e mai indossata: il CSS stava qui dal
   primo commit, il markup non è mai esistito, e per mesi l'export ha
   spedito tredici PNG che nessuna pagina richiamava. Vedi inc/clienti.php.

   Ventinove loghi di ventinove mondi diversi. Restano a COLORI PIENI: la
   desaturazione li pareggerebbe fra loro, ma spegnerebbe proprio i marchi
   che il visitatore deve riconoscere al volo — ed è tutto il senso della
   fascia. Niente effetto al passaggio del mouse: sembrava un invito a
   cliccare che non porta da nessuna parte. */
.clienti {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--s5) var(--s6);
}

/* 🔴 Le misure NON stanno qui.
   Ogni logo esce dal template con i suoi width/height, scritti in
   inc/dati-clienti.php dallo stesso strumento che ha ritagliato il PNG.
   Un'altezza uguale per tutti in CSS era la vecchia regola, e produceva
   quello che produce sempre: una striscia 5:1 alta come un logo quadrato
   diventa un manifesto e il quadrato accanto sembra un francobollo. Da lì
   erano nate tre pezze per-logo (`:has(img[alt="Opal"])`), cioè la
   correzione a mano di un difetto di taratura. Ora la forma decide
   l'altezza — tabella ALTEZZE in strumenti/normalizza-loghi.py — e le
   pezze non servono più.

   Qui resta solo il tetto: nessun logo può sfondare su schermo stretto. */
.clienti li { flex: 0 0 auto; display: flex; }
.clienti img {
	max-width: 100%;
	height: auto;                 /* l'attributo height dell'<img> comanda */
	object-fit: contain;          /* mai stirati: proporzioni sempre rispettate */
}

.clienti__titolo {
	text-align: center;
	font-size: var(--t-titolo-fascia);
	max-width: 20em;
	margin-inline: auto;
	margin-bottom: var(--s6);
}

/* --- La fascia su telefono: dodici loghi, il resto a testo ------------
 *
 * 🔴 Misurato a 375px: ventinove loghi fanno **774px** di altezza — più di
 * uno schermo intero di soli marchi prima delle recensioni. Chi scorre non
 * li guarda, li supera: una prova che nessuno legge non è una prova.
 *
 * Sotto i 620px si mostrano i primi dodici — ordinati per riconoscibilità,
 * non per alfabeto (vedi `dati-clienti.php`) — e i restanti sedici passano
 * nella riga di testo, per nome. Nessuno sparisce: cambia il modo in cui è
 * detto.
 *
 * ⚠️ `display: none` sui `<li>` in eccesso e non `visibility`/`opacity`:
 * serve che escano dal flusso E che il browser **non scarichi** le loro
 * immagini. Con `loading="lazy"` un'immagine dentro un elemento non
 * visualizzato non parte, e sono sedici richieste risparmiate su una rete
 * mobile — che è metà del motivo per cui si taglia.
 * ------------------------------------------------------------------- */

/* Su schermo largo la riga di testo non serve: ci sono tutti i loghi. */
.clienti__altri { display: none; }

@media (max-width: 620px) {
	.clienti__oltre { display: none; }

	.clienti__altri {
		display: block;
		text-align: center;
		max-width: 34em;
		margin: var(--s5) auto 0;
		font-size: var(--t-minuto);
		line-height: 1.5;
		color: var(--inchiostro-2);
	}
}

.occhiello--centrato { text-align: center; }

.clienti__coda {
	text-align: center;
	max-width: 40em;
	margin: var(--s6) auto 0;
	font-size: var(--t-piccolo);
	color: var(--inchiostro-2);
}



/* =========================================================================
   12. Le fotografie che si alternano
   ====================================================================== */

/* Tre immagini sovrapposte per contenitore, con la stessa animazione e
   ritardi negativi sfalsati di un terzo: nessun JavaScript, nessuna
   libreria, e il browser fa tutto in composito senza ridisegnare.
   Cinque secondi per fotografia: abbastanza per guardarla, non tanto da
   accorgersi che sta aspettando. Le quattro tessere partono da punti
   diversi del ciclo (vedi naturalis_scatti_occasione) così la riga non
   cambia tutta insieme. */

.apertura__scatto,
.occasione__scatto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	/* ⚠️ Nessun ciclo scritto qui: `naturalis_stampa_scatti_da()` stampa
	   `animation-name` e `animation-duration` in linea, calcolati sul numero di
	   fotografie (D089). Un ciclo scritto anche qui sarebbe sempre perdente — lo
	   stile in linea vince — e farebbe credere a qualcuno di poterlo cambiare da
	   qui. Restano modo e durata, che il PHP non ripete. */
	animation: none 15s linear infinite;
	filter: var(--resa-foto);   /* vedi :root — le foto nascono smorte */
	will-change: opacity;
}

/* 🔴 QUI NON C'È PIÙ NESSUN CICLO — 2026-08-06 (D089, ripulito D095).

   C'erano `.apertura__scatto { animation-name: alterna-sette }` e un commento
   lungo che spiegava come tenere d'accordo il numero di fotografie e il nome
   del ciclo. Quella regola era **irraggiungibile** dal giorno in cui il PHP ha
   cominciato a stampare l'animazione in linea: lo stile in linea vince sempre
   su un selettore di classe.

   ⚠️ Il commento però continuava a descrivere il vecchio meccanismo come
   attivo, e rimandava a un controllo di `verifica-percorsi.php` che nel
   frattempo dichiarava di aver smesso di farlo. Rilievo `wp-code-reviewer`,
   2026-08-06: codice morto è un problema, codice morto con le istruzioni per
   l'uso è peggio — qualcuno prima o poi lo «corregge».

   Il numero e il ciclo non possono più divergere perché sono diventati la
   stessa cosa: `alterna-nN` lo sceglie il PHP contando. */




/* ═══════════════════════════════════════════════════════════════════════
   I CICLI PER OGNI NUMERO DI FOTOGRAFIE — 2026-08-06 (D089)

   🔴 PERCHÉ ESISTONO TUTTI E OTTO.

   Fino a oggi c'erano solo `alterna` (tre) e `alterna-sette`, perché le
   rotazioni le componevamo noi e sapevamo quante foto erano. Da oggi le
   cambia il committente dal pannello — e una quarta fotografia dentro un
   ciclo tarato su tre non dà errore: **resta invisibile**, e al suo posto
   compare un buco nero che dura cinque secondi. Nessuno lo collega alla
   foto aggiunta.

   ⚠️ Le percentuali NON sono a occhio: escono da una formula, e la formula
   riproduce esattamente i due cicli scritti a mano prima —
   `alterna` (28/33,4/94,5) e `alterna-sette` (12,3/14,29/98).

     visibile fino a  (100/n − 15/n)%
     sparita a        (100/n)%
     ricompare da     (100 − 15/n)%

   Il 15/n è la dissolvenza: ~0,75 secondi su un ciclo di 5 secondi a
   fotografia, cioè la stessa a qualunque numero. È il motivo per cui la
   riga si legge sempre uguale, che siano tre foto o otto.

   ⚠️ Il numero massimo è OTTO, e non per eleganza: oltre, ogni fotografia
   torna una volta ogni quaranta secondi, cioè più a lungo di quanto
   chiunque resti su quella sezione. Sarebbero foto pagate e mai viste.
   `naturalis_gallerie_ripulisci()` taglia lì, e lo dice.

   `alterna-n1` non c'è: con una fotografia sola non si anima niente, e il
   PHP non stampa nessuna animazione.
   ══════════════════════════════════════════════════════════════════ */
@keyframes alterna-n2 {
	0%        { opacity: 1 }
	42.50%    { opacity: 1 }
	50.00%    { opacity: 0 }
	92.50%    { opacity: 0 }
	100%      { opacity: 1 }
}
@keyframes alterna-n3 {
	0%        { opacity: 1 }
	28.33%    { opacity: 1 }
	33.33%    { opacity: 0 }
	95.00%    { opacity: 0 }
	100%      { opacity: 1 }
}
@keyframes alterna-n4 {
	0%        { opacity: 1 }
	21.25%    { opacity: 1 }
	25.00%    { opacity: 0 }
	96.25%    { opacity: 0 }
	100%      { opacity: 1 }
}
@keyframes alterna-n5 {
	0%        { opacity: 1 }
	17.00%    { opacity: 1 }
	20.00%    { opacity: 0 }
	97.00%    { opacity: 0 }
	100%      { opacity: 1 }
}
@keyframes alterna-n6 {
	0%        { opacity: 1 }
	14.17%    { opacity: 1 }
	16.67%    { opacity: 0 }
	97.50%    { opacity: 0 }
	100%      { opacity: 1 }
}
@keyframes alterna-n7 {
	0%        { opacity: 1 }
	12.14%    { opacity: 1 }
	14.29%    { opacity: 0 }
	97.86%    { opacity: 0 }
	100%      { opacity: 1 }
}
@keyframes alterna-n8 {
	0%        { opacity: 1 }
	10.62%    { opacity: 1 }
	12.50%    { opacity: 0 }
	98.12%    { opacity: 0 }
	100%      { opacity: 1 }
}

/* I contenitori diventano il piano su cui scorrono gli scatti. */
.occasione__foto--reale {
	position: relative;
	overflow: hidden;
	background-image: none !important;   /* la foto la portano gli scatti */
}

/* Chi ha chiesto meno animazioni vede la prima fotografia, ferma. */
@media (prefers-reduced-motion: reduce) {
	.apertura__scatto,
	.occasione__scatto { animation: none; opacity: 0 }
	.apertura__scatto:first-child,
	.occasione__scatto:first-child { opacity: 1 }
}

/* -------------------------------------------------------------------------
 * Avviso prezzi provvisori (D013).
 * Fascia dichiarata, stampata da naturalis_avviso_prezzi() in cima all'archivio
 * pacchetti e sulla singola scheda finché i prezzi restano segnaposto. Sparisce
 * da sola quando si definisce NATURALIS_PREZZI_REALI (Fase 3).
 * ---------------------------------------------------------------------- */
.avviso-prezzi {
	max-width: var(--contenuto);
	margin: 0 auto var(--s6);
	padding: var(--s3) var(--s5);
	background: var(--crema);
	border: 1px solid var(--oro);
	border-radius: var(--raggio);
	color: var(--oro-testo);
	font-family: var(--sans);
	font-size: var(--t-piccolo);
	line-height: 1.5;
	text-align: center;
}

/* =========================================================================
   16. IL CONFIGURATORE DI PREVENTIVO
   =========================================================================
   Il configuratore ha bisogno di respiro: dentro i 680px del corpo pagina
   i tre formati e la griglia dei gusti si strozzavano e il conto scappava
   fuori. Qui esce dalla colonna editoriale e si prende tutta la larghezza
   utile, restando dentro il contenitore.

   La griglia dei gusti riusa le stesse variabili --fondo/--testo delle
   schede di /flavours/. È la pagina Flavours in piccolo: si clicca e si
   sceglie. Nessun colore nuovo entra da qui.
   ====================================================================== */

/* Uscita dalla colonna del testo. Il 50% è calcolato sul genitore stretto:
   sottraendo metà della larghezza voluta si ottiene lo scarto per lato. */
.pagina__corpo .preventivo {
	--largo: min( var(--contenuto), calc( 100vw - 2 * var(--s5) ) );
	inline-size: var(--largo);
	max-inline-size: none;
	margin-inline: calc( 50% - var(--largo) / 2 );
}

.preventivo {
	max-width: var(--contenuto);
	margin-inline: auto;
}

.preventivo__offerta {
	margin: 0 0 var(--s4);
	padding: var(--s3) var(--s4);
	border-radius: var(--raggio);
	background: var(--crema);
	color: var(--inchiostro);
	font-weight: 600;
	text-align: center;
}

.preventivo__passo {
	margin: 0 0 var(--s6);
	padding: 0;
	border: 0;
	min-inline-size: 0;   /* i fieldset non si restringono senza questo */
}

.preventivo__titolo {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin: 0 0 var(--s3);
	padding: 0;
	font-family: var(--serif);
	font-size: clamp(1.4rem, 2.6vw, 1.75rem);
	line-height: 1.2;
}

.preventivo__numero {
	display: grid;
	place-items: center;
	inline-size: 1.9em;
	block-size: 1.9em;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--amarena);
	color: var(--panna);
	font-family: var(--sans);
	font-size: 0.62em;
	font-weight: 700;
}

.preventivo__contatore {
	margin-inline-start: auto;
	font-family: var(--sans);
	font-size: var(--t-minuto);
	font-weight: 600;
	color: var(--inchiostro-3);
}

.preventivo__aiuto {
	margin: 0 0 var(--s3);
	color: var(--inchiostro-2);
	font-size: var(--t-piccolo);
}

/* --- Passo 1: i tre formati ------------------------------------------
   Due soli valori per scheda — quanti gusti e fino a quante persone —
   perché sono gli unici due che servono per scegliere. Tutto il resto
   (ore, prezzo) arriva dopo, nel conto. */

.formati {
	display: grid;
	/* Colonne strette e schede alte: il carretto è un oggetto verticale e in
	   una scheda larga galleggiava in mezzo al vuoto. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 232px));
	justify-content: center;
	gap: var(--s4);
}

.formato { cursor: pointer; }
.formato input { position: absolute; opacity: 0; pointer-events: none; }

.formato__corpo {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;              /* è ciò che tiene la foto dentro il riquadro */
	border: 2px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
	text-align: center;
	transition: border-color .15s, box-shadow .15s, opacity .15s;
}

/* La foto occupa SOLO la fascia alta, come nelle schede dei gusti.
   Prima l'immagine era dichiarata `auto` con un `max-height` percentuale che
   il browser non applicava: usciva dal riquadro da 120px e finiva sotto le
   scritte. Qui la dimensione è imposta, non suggerita. */
.formato__foto {
	display: block;
	block-size: 196px;
	flex: 0 0 auto;
	background: var(--fondo, var(--panna-scura));
}

.formato__foto img {
	inline-size: 100%;
	block-size: 100%;
	/* `contain` per i due Cube: sono ritagli su fondo trasparente, e tagliarli
	   significherebbe mozzare il carretto. */
	object-fit: contain;
	object-position: center bottom;
	padding: var(--s2);
}

/* Il Deluxe usa un primo piano fotografico con un fondo suo, non un ritaglio:
   `contain` lo lascerebbe in mezzo a due bande di colore. Qui riempie. */
.formato--deluxe6 .formato__foto img {
	object-fit: cover;
	object-position: center;
	padding: 0;
}

/* 🔴 Stessa ragione, ma per una fotografia SCELTA DAL PANNELLO (D103).
   Fino al 2026-08-06 la regola del Deluxe era scritta sul nome del pacchetto:
   valeva per l'unico caso che esisteva allora. Da quando il committente può
   caricare una sua fotografia su qualunque pacchetto, il caso non è più uno —
   e la sua foto usciva rimpicciolita in mezzo a due fasce, come il Deluxe prima
   della riga qui sopra. Il segnale ora è cosa c'è dentro, non come si chiama.
   L'`object-position` in linea sull'immagine vince su questo `center`. */
.formato__foto--scatto img {
	object-fit: cover;
	object-position: center;
	padding: 0;
}

/* Il codice colore non può dipendere dall'immagine.
   I due Cube sono ritagli su fondo trasparente, quindi il colore si vede
   attraverso; il Deluxe è una fotografia con un fondo bianco suo, che con
   `cover` lo copriva — la scheda rosa era diventata bianca. Il colore vive
   quindi in due punti che l'immagine non può nascondere: una fascia sotto la
   foto e una velatura sul corpo della scheda. */
.formato__foto { border-block-end: 5px solid var(--fondo, var(--bordo)); }

.formato__testo { background: var(--superficie); }

@supports (background: color-mix(in srgb, red 50%, blue)) {
	.formato__testo { background: color-mix(in srgb, var(--fondo, transparent) 32%, var(--superficie)); }
}

.formato__testo {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	flex: 1 1 auto;
	padding: var(--s3) var(--s4) var(--s4);
}

/* Codice colore, uno per formato: si riconoscono a colpo d'occhio prima
   ancora di leggere il numero di gusti. Sono tre gusti della tavolozza, non
   colori nuovi. */
.formato--cube2   { --fondo: var(--limone);     --testo: var(--inchiostro); }
.formato--cube4   { --fondo: var(--pistacchio); --testo: var(--inchiostro); }
.formato--deluxe6 { --fondo: var(--fragola);    --testo: var(--inchiostro); }

.formato:hover .formato__corpo { border-color: var(--pistacchio-f); }

.formato input:checked + .formato__corpo {
	border-color: var(--amarena);
	box-shadow: 0 0 0 3px var(--alone-scelto);
}

.formato input:focus-visible + .formato__corpo {
	outline: 3px solid var(--oro);
	outline-offset: 2px;
}

.formato__gusti {
	display: block;
	font-family: var(--serif);
	font-size: var(--t-corpo);
	line-height: 1.1;
	color: var(--inchiostro);
}

/* 🔴 ERA 2.3rem (36,8px), E LA MOTIVAZIONE ERA SCRITTA SU UNA PREMESSA FALSA.
 *
 * Il commento precedente diceva che questo numero «deve reggere il confronto
 * col prezzo lì accanto senza pareggiarlo». Era ragionevole e sbagliato:
 * quando l'ho scritto il prezzo accanto NON ERA STILATO AFFATTO — 18px di
 * peso normale, perché `.formato__prezzo` non aveva una riga di CSS. Il
 * confronto che credevo di regolare non esisteva, e questo numero non
 * «reggeva» un bel niente: vinceva a mani basse.
 *
 * Vestito il prezzo (32px), restavano 36,8 contro 32 — cioè il numero dei
 * gusti ancora più grande del prezzo, sulla pagina dove si sceglie in base
 * al prezzo. Sceso a `--t-medio`: ora la gerarchia è quella vera, prezzo 32
 * e gusti 24, e non c'è più nessun valore scritto a mano da giustificare.
 *
 * ⚠️ Nota di metodo: il `design-reviewer` aveva ACCETTATO la vecchia
 * eccezione al secondo giro. L'accettazione era corretta rispetto a quello
 * che vedeva, e superata dalla correzione fatta nello stesso giro — due
 * rilievi veri che si toccavano, giudicati separatamente. */
.formato__gusti strong {
	display: block;
	font-size: var(--t-medio);
	color: var(--amarena);
}

.formato__ospiti {
	display: block;
	font-size: var(--t-piccolo);
	color: var(--inchiostro-2);
}

/* 🔴 QUESTA CLASSE NON AVEVA UNA RIGA DI CSS.
 *
 * `.formato__prezzo` è stampata da DUE template — `inc/preventivo-modulo.php`
 * e `inc/classi-preventivo.php` — e non era mai stata vestita: cadeva sui
 * valori ereditati, 18px di peso normale in inchiostro piatto. Accanto,
 * sulla stessa scheda, `.formato__gusti strong` sta a 36,8px in grassetto
 * amarena.
 *
 * Il risultato: sulle due pagine dove si sceglie IN BASE AL PREZZO, il
 * prezzo era il terzo elemento per peso visivo, dopo il numero dei gusti e
 * alla pari di «up to 60 guests». Rilievo del `design-reviewer` al secondo
 * giro, verificato: `grep` di `formato__prezzo` in style.css dava zero.
 *
 * ⚠️ È la stessa famiglia di difetto della fascia clienti — markup e CSS
 * che non si sono mai incontrati — ma nell'altra direzione: lì il foglio
 * vestiva il vuoto, qui il markup usciva nudo. La sezione 10 del banco
 * trova solo il primo verso: una classe stampata e mai stilata non è
 * distinguibile, per una macchina, da una che eredita di proposito.
 *
 * Ora usa gli stessi token dei prezzi di listino: chi passa da /carts/ a
 * /build/ deve riconoscere la stessa cifra, non impararla due volte. */
.formato__prezzo {
	display: block;
	font-family: var(--serif);
	font-size: var(--t-forte);
	font-weight: 700;
	line-height: 1.1;
	color: var(--amarena);
	margin-block-start: var(--s2);
}

.formato__nota {
	display: inline-block;
	align-self: center;
	margin-block-start: var(--s2);
	padding: 2px var(--s2);
	border-radius: 999px;
	background: var(--pistacchio-f);
	color: var(--panna);
	font-size: var(--t-minuto);
	font-weight: 600;
}

/* Il formato che non regge gli ospiti dichiarati. Spento, non nascosto:
   sparire lascerebbe il dubbio che l'opzione non esista; spento dice
   "esiste, ma non per voi", che è l'informazione vera. */



/* --- La scheda unica e la sua barra ---------------------------------
   Tutti i passi vivono dentro la stessa scheda, e la barra sta subito
   sotto il contenuto del passo che si sta guardando.

   🔴 L'ALTEZZA FISSA È STATA TOLTA il 2026-08-05, ed era la causa del
   difetto che il committente ha segnalato due volte: «seleziono una
   classe e non accade nulla».

   Non accadeva nulla di VISIBILE. Il riquadro era alto 640px fissi
   qualunque cosa contenesse: il primo passo delle classi ha tre schede
   e ne occupa meno della metà, quindi sotto restava mezzo schermo
   bianco — e la barra con «Next», che sta sotto il riquadro, finiva
   fuori dallo schermo. Si sceglieva, e il pulsante da premere non era
   nemmeno in pagina.

   ⚠️ L'altezza fissa era stata messa per una ragione vera: senza,
   passando da un passo all'altro la barra si spostava su e giù e
   l'occhio doveva ricercarla. Ma è il rimedio sbagliato per quel male:
   un pulsante che si muove di sessanta pixel si ritrova, uno che non è
   sullo schermo no. La priorità è vederlo. */

.preventivo__scheda {
	display: flex;
	flex-direction: column;
	padding: var(--s5);
	border: 2px solid var(--bordo);
	border-radius: var(--raggio-l);
	background: var(--superficie);
}

/* L'area del contenuto è alta quanto il contenuto. Niente `block-size`
   fissa: vedi la nota sopra. Il tetto serve solo al passo dei ventidue
   gusti, che senza un limite diventerebbe una pagina dentro la pagina —
   e quello scorre al proprio interno. */
.preventivo__passi {
	flex: 0 0 auto;
	max-block-size: min(72vh, 640px);
}

.preventivo__passo {
	margin-block-end: 0;
	/* ⚠️ `max-` e non `block-size: 100%`: con l'altezza al cento per cento di
	   un contenitore ormai libero, un passo corto si stirava a riempirlo e la
	   barra tornava lontana — lo stesso difetto da un'altra porta. */
	max-block-size: min(72vh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* spazio per la barra di scorrimento, così il contenuto non ci finisce sotto */
	padding-inline-end: var(--s2);
}

/* 🔴 LA BARRA RESTA ATTACCATA AL FONDO DELLO SCHERMO.
   Committente, 2026-08-05: «gli step e i tasti back e next sono sempre
   fuori dallo schermo e bisogna scorrere giù».

   Togliere l'altezza fissa ha dimezzato il problema — il riquadro del
   primo passo è passato da 640 a 296px — ma non lo ha chiuso: sopra la
   scheda ci sono comunque intestazione e titolo, e su un telefono da
   667px la barra resta sotto la piega. Con `sticky` il pulsante da
   premere è **sempre** in fondo allo schermo, su qualunque schermo.

   ⚠️ Il fondo pieno non è decorazione: senza, il contenuto del passo
   scorrerebbe sotto i pulsanti e si leggerebbero due cose sovrapposte. */
.passi-nav {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--s4);
	margin-block-start: var(--s5);
	padding-block: var(--s4);
	border-block-start: 2px solid var(--bordo);
	background: var(--superficie);
}

/* I due pulsanti hanno la stessa larghezza minima: così lo stepper resta
   centrato davvero, invece di ballare a seconda della lunghezza del testo. */
.passi-nav__lato {
	flex: 0 0 auto;
	min-inline-size: 8.5rem;
	text-align: center;
}

.passi-nav__lato[disabled] {
	opacity: .35;
	cursor: not-allowed;
}

.bottone--finale { background: var(--pistacchio-scuro); }

/* Lo stepper: dove sono, quanto manca. */
.stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stepper__passo {
	display: flex;
	align-items: center;
	gap: var(--s1);
	color: var(--inchiostro-3);
	font-size: var(--t-etichetta);
}

/* La freccia fra un passo e l'altro: decorativa, quindi generata dal CSS
   e non scritta nel testo, dove uno screen reader la leggerebbe. */
.stepper__passo + .stepper__passo::before {
	content: "";
	inline-size: 14px;
	block-size: 2px;
	margin-inline-end: var(--s1);
	background: var(--bordo);
}

.stepper__pallino {
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 2px solid var(--bordo);
	background: var(--superficie);
	font-weight: 700;
	font-size: var(--t-minuto);
	line-height: 1;
}

.stepper__nome { display: none; }

.stepper__passo--fatto .stepper__pallino {
	border-color: var(--pistacchio-scuro);
	background: var(--pistacchio-scuro);
	color: var(--panna);
}

/* Un passo SALTATO non è un passo fatto. Oltre i 150 ospiti si va dritti al
   riepilogo: segnare Cart/Flavours/Where come completati con la spunta verde
   direbbe una bugia a chi non li ha mai aperti. */
.stepper__passo--saltato .stepper__pallino {
	border-style: dashed;
	border-color: var(--inchiostro-3);
	background: var(--superficie);
	color: var(--inchiostro-3);
}

.stepper__passo--attivo .stepper__pallino {
	border-color: var(--amarena);
	background: var(--amarena);
	color: var(--panna);
}

.stepper__passo--attivo { color: var(--inchiostro); font-weight: 700; }
.stepper__passo--attivo .stepper__nome { display: inline; }

.passi-nav__stato {
	margin: var(--s3) 0 0;
	text-align: center;
	color: var(--inchiostro-3);
	font-size: var(--t-minuto);
}

.passi-nav__avviso {
	margin-block-start: var(--s3);
	padding: var(--s3) var(--s4);
	border-radius: var(--raggio);
	border-inline-start: 4px solid var(--amarena);
	background: var(--panna-scura);
	color: var(--inchiostro);
	font-weight: 600;
}

.preventivo__diverso-riga {
	margin: var(--s2) 0 0;
	text-align: center;
}

/* Un passo non deve avere il contorno del focus quando lo riceve via
   script: il bordo su un intero blocco confonde. */
.preventivo__passo:focus { outline: none; }

@media (max-width: 620px) {
	.preventivo__scheda { padding: var(--s4); }
	.preventivo__passi { block-size: clamp(360px, 66vh, 520px); }

	/*
	 * Su schermo stretto i tre pezzi non stanno su una riga: due pulsanti da
	 * 136px più cinque pallini con i trattini in mezzo fanno ~470px contro i
	 * ~343 disponibili a 375px, e la barra sfondava fuori dallo schermo
	 * (rilievo `qa-gate`, riprodotto su due motori di rendering).
	 *
	 * Lo stepper va su una riga sua, sopra i pulsanti: nessuno dei tre deve
	 * rimpicciolirsi fino a diventare illeggibile.
	 */
	.passi-nav {
		flex-wrap: wrap;
		gap: var(--s3) var(--s2);
	}

	.stepper {
		order: -1;
		flex-basis: 100%;
	}

	.passi-nav__lato {
		flex: 1 1 auto;
		min-inline-size: 0;
		padding-inline: var(--s3);
	}

	.stepper__nome { display: none !important; }
}

/* Sotto i 400px anche i trattini fra un pallino e l'altro sono di troppo. */
@media (max-width: 400px) {
	.stepper { gap: var(--s1); }
	.stepper__passo + .stepper__passo::before { display: none; }
	.stepper__pallino { inline-size: 22px; block-size: 22px; font-size: var(--t-etichetta); }
}

/* --- Passi 2 e 4: i campi -------------------------------------------- */

.preventivo__campi {
	display: grid;
	/* Due colonne al massimo. Con `auto-fit` i quattro campi del passo 4
	   finivano su una riga sola da 268px l'uno — stretti, e con 338px di
	   vuoto sotto. Su due righe respirano e riempiono la scheda. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s5) var(--s4);
	align-items: start;
	max-inline-size: 640px;
}

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

.campo {
	margin: 0;
	min-inline-size: 0;
	/* Etichetta, campo e nota su tre righe fisse: così campi con etichette di
	   lunghezza diversa restano allineati fra loro invece di scalare. */
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--s1);
	align-content: start;
}
.campo--stretto { max-inline-size: 16rem; }
.campo > label { display: block; font-weight: 600; }

.campo input[type="number"],
.campo select {
	inline-size: 100%;
	padding: var(--s3);
	border: 2px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
	font: inherit;
	color: inherit;
	/* La select nativa arrivava alta la metà del campo accanto e con un bordo
	   di sistema: dentro una riga di campi allineati stonava. Si azzera
	   l'aspetto nativo e si ridisegna la freccia. */
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A4A3E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--s3) center;
	padding-inline-end: var(--s6);
}

.campo input[type="number"]:focus-visible,
.campo select:focus-visible {
	outline: 3px solid var(--oro);
	outline-offset: 1px;
	border-color: var(--amarena);
}

.campo__nota {
	display: block;
	font-size: var(--t-minuto);
	color: var(--inchiostro-3);
}

/* Una casella di scelta dentro una griglia di campi: il riquadro le dà la
   stessa altezza degli altri controlli, così la riga resta allineata. */
.scelta-si-no {
	display: flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s3);
	border: 2px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
}

.scelta-si-no:focus-within {
	outline: 3px solid var(--oro);
	outline-offset: 1px;
	border-color: var(--amarena);
}

.scelta-si-no__testo { font-weight: 400; cursor: pointer; }

.scelta-si-no input[disabled] + .scelta-si-no__testo { opacity: .6; }

.campo--interruttore label { font-weight: 400; }
.campo--interruttore input { margin-inline-end: var(--s2); }

/* --- Passo 3: la scelta dei gusti ------------------------------------
   La foto non è più una pallina di lato: occupa **metà scheda, a vivo**,
   fino ai bordi. Un gusto si sceglie con gli occhi, e una foto grande di
   gelato vende più di un nome scritto.

   Sotto, il nome e — sempre visibili, mai in fondo o in un'altra pagina —
   le informazioni dietetiche. Chi sceglie i gusti per una festa lo fa qui:
   è qui che deve leggere cosa contengono.
   ------------------------------------------------------------------ */

.avviso-allergeni {
	margin: 0 0 var(--s3);
	padding: var(--s2) var(--s3);
	border-radius: var(--raggio);
	border-inline-start: 4px solid var(--amarena);
	background: var(--panna-scura);
	color: var(--inchiostro);
	font-size: var(--t-minuto);
	line-height: 1.45;
}

/* La frase sul laboratorio: stesso riquadro, bordo più tenue.
   Non è un'avvertenza di pari grado — la prima dice cosa fare, questa
   dice com'è fatto il prodotto — ma nemmeno una nota a piè di pagina:
   contiene l'unica riga che un allergico deve leggere per forza, ed è
   in grassetto dentro il testo apposta. */
.avviso-allergeni--laboratorio {
	border-inline-start-color: var(--pistacchio-f);
	margin-bottom: var(--s5);
}

/* «Not ice cream» — il blocco che spiega la differenza (REVISIONE 2).
   Fondo crema e non panna: sta fra due avvisi e una lista di schede, e
   senza uno stacco di colore diventa un terzo avviso. */
.non-gelato {
	/* ⚠️ `margin-inline: auto`, o su schermo largo il riquadro resta
	   incollato a sinistra sotto un titolo centrato: il contenitore è largo
	   1180px e questo blocco 62ch. Rilievo `design-reviewer`, 2026-08-04. */
	margin: 0 auto var(--s6);
	padding: var(--s5);
	border-radius: var(--raggio-l);
	background: var(--crema);
	max-inline-size: 62ch;
}
.non-gelato__titolo {
	margin: 0 0 var(--s3);
	font-size: var(--t-medio);
	line-height: 1.08;
}
.non-gelato p { margin: 0 0 var(--s3); }
.non-gelato p:last-child { margin-bottom: 0; }

.non-gelato__punti {
	margin: 0 0 var(--s3);
	padding-inline-start: var(--s4);
	font-weight: 600;
}
.non-gelato__punti li { margin-block-end: var(--s1); }

/* Il filtro dei gusti: tre voci, quella attiva in evidenza. */
.filtro-gusti {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-block-end: var(--s2);
}

.filtro-gusti__voce {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s3) var(--s4);
	border: 2px solid var(--bordo);
	border-radius: 999px;
	background: var(--superficie);
	font: inherit;
	font-size: var(--t-piccolo);
	font-weight: 600;
	color: var(--inchiostro-2);
	cursor: pointer;
	transition: border-color .12s, background .12s, color .12s;
}

.filtro-gusti__voce:hover { border-color: var(--pistacchio-f); }

.filtro-gusti__voce--attivo {
	border-color: var(--amarena);
	background: var(--amarena);
	color: var(--panna);
}

.filtro-gusti__quanti {
	font-weight: 400;
	font-size: var(--t-etichetta);
	opacity: .75;
}

.filtro-gusti__nota {
	margin: 0 0 var(--s3);
	font-size: var(--t-minuto);
	color: var(--inchiostro-3);
}

.scelta-gusti {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
	gap: var(--s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pallina {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;              /* è ciò che rende la foto "a vivo" */
	border: 2px solid transparent;
	border-radius: var(--raggio);
	background: var(--fondo, var(--panna-scura));
	color: var(--testo, var(--inchiostro));
	cursor: pointer;
	transition: transform .12s, border-color .12s, opacity .12s;
}

.pallina input { position: absolute; opacity: 0; pointer-events: none; }
.pallina:hover { transform: translateY(-2px); }

/* Metà scheda, o quasi.
   Altezza fissa e non `aspect-ratio`: con un rapporto, su colonne larghe la
   foto cresceva fino a prendersi il 72% della scheda e il nome finiva
   schiacciato in fondo. Un'altezza legata al viewport tiene la proporzione
   attorno alla metà su qualunque larghezza, e accorcia le schede — quindi
   si scorre meno. */
.pallina__foto {
	position: relative;
	display: block;
	block-size: clamp(74px, 6vw, 88px);
	flex: 0 0 auto;
	background: rgb(255 255 255 / .35);
}

.pallina__foto img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* La spunta sta sulla foto, non accanto al nome: si vede subito quali sono
   già scelti anche scorrendo in fretta. */
.pallina__spunta {
	position: absolute;
	inset-block-start: var(--s2);
	inset-inline-start: var(--s2);
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	background: var(--amarena);
	color: var(--panna);
	font-size: var(--t-minuto);
	font-weight: 700;
	opacity: 0;
	transform: scale(.7);
	transition: opacity .12s, transform .12s;
}

.pallina--scelta { border-color: var(--amarena); }
.pallina--scelta .pallina__spunta { opacity: 1; transform: scale(1); }

.pallina__corpo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	padding: var(--s2) var(--s3) var(--s3);
}

.pallina__nome {
	font-weight: 700;
	font-size: var(--t-piccolo);
	line-height: 1.2;
}

/* --- Gli allergeni sulla scheda del configuratore ---------------------
 *
 * ⚠️ Queste classi erano SCRITTE IN PHP E MAI VESTITE: `.dieta` esisteva
 * nel markup da settimane e non aveva una riga di CSS. Non si è visto per
 * la stessa ragione per cui non si vedeva la fascia clienti — il campo
 * allergeni era vuoto su tutti i gusti, quindi il markup non veniva mai
 * stampato e nessuno si accorgeva che sotto non c'era niente. Le due
 * facce dello stesso difetto: CSS senza markup, e markup senza CSS.
 *
 * Qui l'informazione è più compressa che su /flavours/ — ventidue schede
 * affiancate, non un elenco — quindi si scrive corto e si distingue col
 * colore invece che con la lunghezza.
 * ------------------------------------------------------------------- */
.dieta {
	display: block;
	font-size: var(--t-etichetta);
	line-height: 1.35;
	margin-top: 2px;
	color: var(--inchiostro-2);
}

/* Contiene: è un fatto, e sta in tono normale. */
.dieta--allergeni { color: var(--inchiostro-2); }

/* Può contenere: rientrato, per distinguersi dal precedente
   senza doverlo rileggere. */
.dieta--tracce {
	color: var(--inchiostro-3);
	padding-inline-start: var(--s2);
	border-inline-start: 2px solid var(--bordo);
}

/* 🔴 Non dichiarato: l'unico che deve farsi notare, perché è l'unico che
   il silenzio farebbe passare per «sicuro». */
.dieta--ignoto {
	color: var(--amarena-f);
	font-weight: 700;
}

/* --- Il bollino "senza latte" -----------------------------------------
   Prima erano due etichette di testo sotto il nome: "Dairy-free" e
   "Allergens on request". La seconda si ripeteva identica su tutte e 22 le
   schede senza dire niente che il disclaimer in cima non dicesse già, e
   costava una riga a ogni scheda. Tolta.
   La prima è diventata un bollino nell'angolo della foto: si legge a colpo
   d'occhio scorrendo la griglia, non occupa una riga, e il verde scuro
   dedicato passa il contrasto (5,14:1) che quello chiaro non passava.
   ------------------------------------------------------------------ */

/* 🔴 ERA UN CERCHIO DA 24px, e la sigla ci usciva.
 *
 * Difetto segnalato dal committente — «"dairy free" viene tagliato dalla
 * card» — ed è una REGRESSIONE della scala tipografica: «DF» stava a
 * 9,9px, dove misura ~14px di larghezza e in un cerchio da 24 ci sta
 * comodo. Portato al pavimento leggibile di 13px misura ~18px, e il
 * quadrato inscritto in un cerchio da 24 ne ospita 17. Il testo era
 * giusto; il contenitore no.
 *
 * La correzione non è rimpicciolire la sigla — quella era la vecchia
 * scelta, ed è per questo che il committente non riusciva a leggerla.
 * È rendere il bollino una PILLOLA che si adatta al suo contenuto:
 * larghezza automatica e padding, invece di un lato fisso. Così non può
 * più tagliare né oggi né con un'etichetta più lunga, e chi un domani
 * scrivesse «DF/GF» non deve sapere che qui c'era una trappola. */
.senza-latte {
	position: absolute;
	inset-block-start: var(--s2);
	inset-inline-end: var(--s2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 26px;
	padding: 3px var(--s2);
	border-radius: 100px;
	background: var(--pistacchio-scuro);
	color: var(--panna);
	font-size: var(--t-etichetta);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;   /* mai a capo dentro un bollino */
}

/* Il testo per chi non vede il bollino. */
.solo-lettori {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Esaurite le scelte, le altre si spengono: il limite si vede prima di
   sbatterci contro, invece di comparire come errore dopo. */
.pallina--spenta { opacity: .35; cursor: not-allowed; }
.pallina--spenta:hover { transform: none; }

.pallina:focus-visible { outline: 3px solid var(--amarena); outline-offset: 3px; }
.pallina input:focus-visible + .pallina__foto {
	outline: 3px solid var(--oro);
	outline-offset: -3px;
}

/* --- Il conto -------------------------------------------------------- */

.conto {
	margin-block: var(--s5);
	padding: var(--s5);
	border-radius: var(--raggio-l);
	background: var(--panna-scura);
	border: 2px solid var(--bordo);
}

.conto__intestazione {
	margin: 0 0 var(--s3);
	font-family: var(--serif);
	font-size: var(--t-guida);
}

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

.conto__voce {
	display: flex;
	justify-content: space-between;
	gap: var(--s3);
	padding-block: var(--s2);
	border-block-end: 1px solid var(--bordo);
	font-size: var(--t-piccolo);
}

.conto__voce span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.conto__voce--sconto { color: var(--pistacchio-f); font-weight: 600; }

.conto__totale {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s2) var(--s4);
	margin-block: var(--s4) var(--s2);
	font-family: var(--serif);
	font-size: var(--t-corpo);
}

/* Il totale non deve mai andare a capo dentro sé stesso. */
.conto__totale strong {
	font-size: var(--t-forte);
	line-height: 1.1;
	color: var(--amarena);
	white-space: nowrap;
}

.conto__nota, .conto__attesa {
	margin: 0;
	color: var(--inchiostro-3);
	font-size: var(--t-minuto);
}

.conto__attesa-titolo {
	margin: 0 0 var(--s2);
	font-family: var(--serif);
	font-size: var(--t-guida);
	color: var(--inchiostro);
}

/* Fuori scala: è un invito, non un errore. Niente rosso, niente allarme —
   il ramo manuale è una porta, non un muro (D030). */
.conto__manuale, .conto__cambia {
	display: grid;
	gap: var(--s3);
	justify-items: start;
}

.conto__manuale-titolo {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--t-guida);
}

.preventivo__azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
}

.preventivo__diverso {
	color: var(--inchiostro-2);
	font-size: var(--t-piccolo);
}

/* Il conto era una colonna sticky accanto ai passi. Con il modulo a passi
   è diventato l'ultimo passo: niente due colonne, niente sticky, e su mobile
   sparisce il problema del prezzo che finiva sotto il pulsante d'invio. */
.conto { margin-block: 0 var(--s5); }

@media (prefers-reduced-motion: reduce) {
	.pallina, .formato__corpo { transition: none; }
	.pallina:hover { transform: none; }
}

/* =========================================================================
   17. LE DUE CLASSI
   =========================================================================
   Due schede affiancate, stessa struttura, prezzi con unità diverse — a
   bambino e a giornata (D028). Sono anche gli unici due prezzi confermati
   dal cliente su tutto il sito: non portano la fascia "indicative", che qui
   sarebbe falsa.
   ====================================================================== */

.classi {
	display: grid;
	/* `min(300px, 100%)` e non `300px`: a 320px di schermo una traccia minima
	   fissa da 300px più il padding della pagina sforava di 4px. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--s5);
	margin-block-end: var(--s7);
}


/* Un colore per pubblico: bambini e aziende non sono la stessa offerta e
   non devono sembrarlo. Stessi gusti della tavolozza, nessun colore nuovo. */








/* Il pulsante sta in fondo su entrambe, anche se un testo è più lungo. */

/* --- Dentro la scheda di una classe ---------------------------------- */


/* Lo svolgimento è numerato di proposito: sono momenti in sequenza, non un
   elenco di caratteristiche, e una scuola vuole sapere come passa l'ora. */
.svolgimento {
	counter-reset: momento;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svolgimento li {
	position: relative;
	counter-increment: momento;
	padding-inline-start: 2.2rem;
	padding-block: var(--s2);
	border-block-end: 1px solid var(--bordo);
	line-height: 1.45;
}

.svolgimento li:last-child { border-block-end: 0; }

.svolgimento li::before {
	content: counter(momento);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--s2);
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--amarena);
	color: var(--panna);
	font-size: var(--t-etichetta);
	font-weight: 700;
}

/* Il sorbetto senza latte e senza glutine risolve la prima obiezione di una
   scuola prima che venga posta: sta in evidenza, non in fondo. */




/* L'uscita volontaria è un <button> perché apre WhatsApp, non naviga: ma
   resta un link agli occhi, che è quello che l'utente si aspetta lì. */
button.preventivo__diverso {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--inchiostro-2);
	text-decoration: underline;
	cursor: pointer;
}

button.preventivo__diverso:hover { color: var(--amarena); }

/* --- Il ritratto del fondatore, su About ----------------------------- */

.ritratto {
	margin: 0 0 var(--s6);
	max-inline-size: 420px;
}

.ritratto img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--raggio-l);
	display: block;
	/* Il ritratto del fondatore è al 14% di saturazione, il più spento di
	   tutte le fotografie del sito — ed è la faccia di chi vende. */
	filter: var(--resa-foto);
}

.ritratto figcaption {
	margin-block-start: var(--s3);
	color: var(--inchiostro-2);
	font-size: var(--t-minuto);
	line-height: 1.5;
}

/* Su schermo largo il ritratto affianca l'apertura invece di spingerla in
   basso: la storia comincia accanto alla faccia di chi la racconta. */
@media (min-width: 780px) {
	.ritratto {
		float: inline-end;
		margin-inline-start: var(--s6);
		margin-block-start: var(--s2);
		max-inline-size: 340px;
	}
}

/* La CTA che chiude una pagina editoriale. Serve soprattutto su schermo
   stretto, dove la CTA di testata è nascosta di proposito e l'unica altra
   via sarebbe il menu hamburger, chiuso. */
.pagina__chiusura {
	margin-block: var(--s7) var(--s5);
	text-align: center;
}


/* ---------------------------------------------------------------------
   I POZZETTI DEL CARRETTO
   I gusti di un pacchetto non sono "quanti gusti diversi", sono i pozzetti:
   lo stesso gusto può occuparne più d'uno. La fila li mostra com'è fatto il
   carretto, invece di lasciarlo dedurre da un contatore.
   ------------------------------------------------------------------ */
.slot-gusti {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.slot-gusti__voce {
	min-height: 2.5rem;
	display: flex;
}

.slot-gusti__voce > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0 .75rem;
	border: 2px dashed var(--bordo, #d8cfc6);
	border-radius: 999px;
	color: var(--testo-tenue, #8a7f75);
	font-size: var(--t-piccolo);
}

.slot-gusti__voce--pieno > button {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: 0 .55rem 0 .9rem;
	border: 2px solid var(--amarena);
	border-radius: 999px;
	background: var(--amarena);
	color: #fff;
	font: inherit;
	font-size: var(--t-piccolo);
	cursor: pointer;
}

.slot-gusti__voce--pieno > button span { font-size: var(--t-guida); line-height: 1; opacity: .8; }
.slot-gusti__voce--pieno > button:hover span { opacity: 1; }
.slot-gusti__voce--pieno > button:focus-visible { outline: 3px solid var(--amarena); outline-offset: 3px; }

/* Il numero compare solo dal secondo in poi: un "1" su un gusto scelto una
   volta sola è rumore. */
.pallina__quante {
	position: absolute;
	top: .4rem;
	left: .4rem;
	z-index: 2;
	min-width: 1.6rem;
	padding: .1rem .35rem;
	border-radius: 999px;
	background: var(--amarena);
	color: #fff;
	font-size: var(--t-etichetta);
	font-weight: 700;
	text-align: center;
}

/* Il bottone eredita il riquadro della vecchia label: niente sfondo, niente
   bordo di sistema, allineamento del testo come nel resto della scheda. */
button.pallina {
	appearance: none;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	width: 100%;
}

/* ---------------------------------------------------------------------
   L'ANTEPRIMA NEL RIEPILOGO
   Quello che il cliente ha costruito è una cosa che si guarda — un carretto
   con dentro dei gusti. Vederla prima del totale è ciò che rende il prezzo
   comprensibile invece che soltanto esatto.
   ------------------------------------------------------------------ */
.conto__anteprima {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--bordo, #e5ded7);
}

.conto__carretto {
	width: 140px;
	height: auto;
	flex: 0 0 auto;
}

.conto__anteprima-testo { flex: 1 1 12rem; min-width: 0; }

.conto__gusti {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
}

/* Il pallino del gusto riusa il codice colore della pagina Flavours: si
   riconoscono dal colore prima che dal nome. */
.conto__gusto {
	padding: .2rem .6rem;
	border-radius: 999px;
	background: var(--gusto-colore, #efe7df);
	color: var(--gusto-testo, #3a3129);
	font-size: var(--t-minuto);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.conto__carretto { width: 96px; }
}

/* ---------------------------------------------------------------------
   IL MODULO «REQUEST A QUOTE»
   Riusa la scheda a passi del configuratore. Le uniche cose sue sono la
   scelta del servizio, la nota di privacy, i due pulsanti d'invio e i
   campi facoltativi.
   ------------------------------------------------------------------ */

/* La scelta del servizio: quattro schede larghe, una per riga da mobile.
   Sono schede e non un menu a tendina perché ciascuna ha bisogno di una riga
   di spiegazione — «Gelato class» e «Gelato class for schools» dal solo nome
   non si distinguono, e un `<option>` quella riga non la può portare.

   Lo stato scelto usa lo stesso segno delle schede carretto (bordo amarena
   più alone): due modi diversi di dire «questa» nello stesso modulo si
   leggerebbero come due cose diverse. */
.scelta-servizio {
	display: grid;
	gap: .75rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 40rem) {
	.scelta-servizio { grid-template-columns: repeat(2, 1fr); }
}

.scelta-servizio__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.scelta-servizio__scheda {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	height: 100%;
	padding: .9rem 1.05rem;
	border: 2px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}

.scelta-servizio__scheda:hover { border-color: var(--pistacchio-f); }

.scelta-servizio__radio:checked + .scelta-servizio__scheda {
	border-color: var(--amarena);
	box-shadow: 0 0 0 3px var(--alone-scelto);
}

.scelta-servizio__radio:focus-visible + .scelta-servizio__scheda {
	outline: 3px solid var(--oro);
	outline-offset: 2px;
}

.scelta-servizio__nome {
	font-family: var(--serif);
	font-size: var(--t-corpo);
	line-height: 1.2;
	color: var(--inchiostro);
}

.scelta-servizio__dettaglio {
	font-size: var(--t-piccolo);
	line-height: 1.35;
	color: var(--inchiostro-2);
}

/*
 * La nota su cosa succede ai dati. ⚠️ Si chiamava `.richiesta__privacy` perché
 * stava su un modulo solo; dal 2026-08-08 la stampa `naturalis_nota_privacy()`
 * su tutti e tre — il vecchio nome resta come alias, perché una regola CSS che
 * smette di agganciare non dà nessun errore: la nota resterebbe in pagina,
 * senza riquadro, e sembrerebbe un capoverso qualunque.
 */
.modulo__privacy,
.richiesta__privacy {
	margin-top: 1.25rem;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--pistacchio, #7f9c6a);
	background: var(--crema, #faf6f1);
	font-size: var(--t-minuto);
	line-height: 1.5;
}

.modulo__privacy a,
.richiesta__privacy a {
	white-space: nowrap;
}

.richiesta__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.25rem 0 .5rem;
}

.campo__facolt {
	font-weight: 400;
	font-size: var(--t-etichetta);
	opacity: .65;
	text-transform: none;
	letter-spacing: 0;
}

.campo--largo { grid-column: 1 / -1; }
.richiesta__riepilogo { margin-bottom: .5rem; }

/* La firma nel piè di pagina: una riga sola, sopra il copyright, nel corpo
   del testo e non in piccolo — è un'affermazione, non una nota legale. */
.piede__firma {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: var(--t-corpo);
	font-style: italic;
	text-align: center;
	opacity: .92;
}

/* ---------------------------------------------------------------------
   VOCE DI MENU DISATTIVATA
   Uguale alle altre nella forma, spenta nel colore: si legge come parte
   della barra, non come un ripensamento in coda.
   ------------------------------------------------------------------ */
/* Solo il colore cambia: forma, corpo e spaziatura li eredita dalla regola
   condivisa con gli <a> qui sopra. */
.menu-item--presto > span {
	display: inline-block;
	color: rgba(255,255,255,.42);
	cursor: default;
}

/* ---------------------------------------------------------------------
   LE TRE AZIONI, COL LORO COLORE
   Palette dei gusti (D014): crema al carretto, pistacchio alla classe,
   fragola a ciò che non è ancora disponibile.
   Contrasti misurati sul fondo amarena #93293D:
     crema      testo 8,16:1 · bottone/fondo 6,35:1
     pistacchio testo 6,47:1 · bottone/fondo 5,04:1
     fragola    testo 5,24:1 (a contorno)
   ------------------------------------------------------------------ */
.bottone--verde {
	background: var(--pistacchio);
	border-color: var(--pistacchio);
	color: var(--cioccolato);
}
.bottone--verde:hover {
	background: var(--panna);
	border-color: var(--panna);
	color: var(--cioccolato);
}

/*
 * Un pulsante che non è un pulsante.
 *
 * ⚠️ NIENTE `opacity`. Spegneva fondo e testo insieme e portava il contrasto a
 * 3,12:1, sotto il minimo di 4,5 — è il motivo per cui «Order online» si
 * leggeva male. Qui il colore è dichiarato, non ottenuto smorzando.
 *
 * A contorno e non pieno: due bottoni pieni dicono «due cose che puoi fare»,
 * e questa non lo è.
 */
.bottone--presto {
	background: transparent;
	border-color: var(--bordo-tenue);
	color: var(--fragola);
	cursor: default;
	pointer-events: none;
}

.bottone--presto em {
	font-style: normal;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ---------------------------------------------------------------------
   LE CARD DEL PRODOTTO, CON LA FOTO
   Una sezione che parla di com'è fatto il gelato non può essere di solo
   testo: la cosa di cui si parla non si vedeva.
   ------------------------------------------------------------------ */
.esclusivo { position: relative; }

.esclusivo__foto {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	margin-bottom: 1rem;
}

.esclusivo--presto .esclusivo__foto { opacity: .72; }

.esclusivo__nastro {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--amarena, #8e1f2f);
	color: #fff;
	font-size: var(--t-etichetta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.sezione__coda--azione { margin-top: 2rem; text-align: center; }

/* =========================================================================
   LE SCHEDE DEI PACCHETTI — versione compatta con il disegno del carretto
   =========================================================================
   ⚠️ Il problema di larghezza: `.pagina__corpo` è largo `--testo` (680px),
   che è giusto per il testo e sbagliato per una griglia di cinque schede —
   ce ne entravano due. La griglia esce dalla colonna editoriale con la
   stessa tecnica già usata dal configuratore, e si prende una larghezza
   sua: cinque schede da ~230px stanno in 1360px.
   ====================================================================== */
/* ⚠️ Vale per Carts E per Classes: sono due listini della stessa casa, e la
   pagina deve avere la stessa misura in entrambi. */
.pagina__corpo .pacchetti,
.pagina__corpo .pacchetti__coda,
.pagina__corpo .pacchetti__fuori-misura,
.pagina__corpo .carosello {
	--largo: min( 1360px, calc( 100vw - 2 * var(--s5) ) );
	inline-size: var(--largo);
	max-inline-size: none;
	margin-inline: calc( 50% - var(--largo) / 2 );
}

.pacchetti--cinque {
	/* 196px come minimo: sotto, la lista «cosa comprende» va a capo ovunque
	   e la scheda diventa più alta che larga. */
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: var(--s3);
}

.pacchetti--cinque .pacchetto {
	padding: var(--s4) var(--s4) var(--s4);
	text-align: center;
}

/* 🔴 IL RIQUADRO DEVE TAGLIARE — D103.
   Da quando l'inquadratura può ingrandire una fotografia (`transform: scale()`),
   un riquadro che non taglia lascia uscire l'immagine ingrandita sopra il testo
   accanto. Non è un caso di scuola: è quello che succede alla prima fotografia
   che il committente porta al 150%.
   ⚠️ Verificato prima di aggiungerlo che nessun bollino sporga da questi
   riquadri — le spunte, il "DF" e i nastri stanno tutti dentro. L'unico che
   sporge davvero è `.pacchetto__nastro` (top: -11px), ed è per questo che la
   fotografia della vetrina ha una cornice sua invece di far tagliare la scheda. */
.premio__foto,
.formato__foto,
.pallina__foto,
.carosello__voce,
.esclusivo { overflow: hidden; }

.pacchetto__foto {
	width: 100%;
	max-width: 190px;
	height: auto;
	margin: 0 auto var(--s2);
}

/* Una fotografia scelta dal pannello, non un disegno (D103).
   ⚠️ `height: auto` va bene per i disegni, che sono tutti della stessa forma:
   cinque schede affiancate restano allineate. Con fotografie di formati diversi
   le cinque schede si sfalsavano — ed è la cosa che il committente ha visto
   caricando le sue. Qui la forma è imposta, e dove tagliare lo decide
   l'inquadratura sulla fotografia. */
.pacchetto__cornice {
	display: block;
	width: 100%;
	/* ⚠️ La stessa larghezza dei disegni, non tutta la scheda.
	   A piena larghezza una fotografia rendeva la sua scheda diversa dalle
	   altre quattro — e le cinque devono leggersi come una famiglia, è tutto
	   il senso di un listino a scaglioni. Trovato dal `design-reviewer`. */
	max-width: 190px;
	/* 1:1 e non 4:3: è uno dei tre formati che l'anteprima mostra davvero
	   (i disegni stanno a 190×177, tredici pixel più bassi — meno del gap). */
	aspect-ratio: 1 / 1;
	overflow: hidden;   /* ⚠️ qui e non sulla scheda: il nastro «most booked» sporge di 11px */
	border-radius: var(--raggio);
	margin: 0 auto var(--s2);
}

.pacchetto__foto--scatto {
	max-width: none;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.pacchetti--cinque .pacchetto__nome {
	font-size: var(--t-guida);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 var(--s2);
}

.pacchetti--cinque .pacchetto__prezzo {
	font-size: var(--t-forte);
	margin: 0 0 var(--s3);
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--bordo);
}

/* La lista di cosa comprende: una spunta per riga, come la legge il mercato. */
.comprende {
	list-style: none;
	margin: 0 0 var(--s4);
	padding: 0;
	text-align: left;
	font-size: var(--t-piccolo);
	line-height: 1.35;
}

.comprende li {
	position: relative;
	padding: .38rem 0 .38rem 1.35rem;
	border-bottom: 1px solid var(--bordo-tenue, rgba(0,0,0,.06));
}

.comprende li:last-child { border-bottom: 0; }

.comprende li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: .34rem;
	color: var(--pistacchio-scuro, #5C7330);
	font-weight: 700;
}

/* L'uscita per chi non si riconosce in nessuna delle cinque. */
.pacchetti__fuori-misura {
	margin-top: var(--s6);
	padding: var(--s6) var(--s5);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-l);
	background: var(--panna-scura);
	text-align: center;
}

.pacchetti__fuori-misura h2 { margin-top: 0; }
.pacchetti__fuori-misura p { max-width: 46ch; margin-inline: auto; }

/* =========================================================================
   IL CAROSELLO DEGLI EVENTI
   =========================================================================
   Scorre da solo, lentamente, e non ha una riga di JavaScript: niente frecce,
   niente barre, nessuna libreria. Il nastro contiene le foto DUE volte e si
   sposta di metà della propria larghezza — a fine corsa si ritrova identico a
   com'era e riparte senza scatto.

   🔴 Un movimento che dura più di cinque secondi deve poter essere fermato
   (WCAG 2.2.2), e per chi soffre di disturbi vestibolari una striscia infinita
   è un problema fisico, non un fastidio. Qui si ferma col mouse e col fuoco da
   tastiera, e con `prefers-reduced-motion` non parte affatto — tornando
   scorrevole a mano, così le fotografie restano comunque raggiungibili.
   ====================================================================== */
.carosello { margin-top: var(--s7); }

.carosello__testata { margin-bottom: var(--s4); }
.carosello__testata h2 { margin: 0; }

.carosello__cornice {
	overflow: hidden;   /* nessuna barra: il nastro va da sé */
	/* Sei secondi a fotografia. La durata dipende da quante ce ne sono,
	   altrimenti aggiungerne una accelererebbe tutto il nastro. */
	--durata: calc( var(--foto, 9) * 6s );
}

.carosello__nastro {
	display: flex;
	gap: var(--s3);
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: carosello-scorre var(--durata) linear infinite;
}

/* La pausa: il modo per fermarlo che WCAG richiede. */
.carosello__cornice:hover .carosello__nastro,
.carosello__nastro:focus-within { animation-play-state: paused; }

@keyframes carosello-scorre {
	from { transform: translate3d( 0, 0, 0 ); }
	/* Metà nastro = una serie, perché le foto sono stampate due volte.
	   Il mezzo gap in più compensa lo spazio fra le due serie: senza, a ogni
	   giro il nastro slitterebbe di un gap e dopo dieci giri si vedrebbe. */
	to   { transform: translate3d( calc( -50% - var(--s3) / 2 ), 0, 0 ); }
}

.carosello__voce {
	flex: 0 0 auto;
	width: clamp(220px, 28vw, 320px);
}

.carosello__voce img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--raggio);
	filter: var(--resa-foto);   /* vedi :root — le foto nascono smorte */
}

@media (prefers-reduced-motion: reduce) {
	/* Niente movimento automatico: la striscia resta e si scorre a mano. */
	.carosello__nastro { animation: none; width: auto; }
	.carosello__cornice { overflow-x: auto; scroll-snap-type: x mandatory; }
	.carosello__voce { scroll-snap-align: start; }
}


/* ---------------------------------------------------------------------
   LE SCHEDE DELLE CLASSI
   Stessa famiglia delle schede dei carretti: chi passa da un listino
   all'altro deve riconoscere la stessa casa. Cambia solo ciò che nel
   prodotto è davvero diverso — tre schede invece di cinque, quindi più
   larghe, e una fotografia al posto del disegno.
   ------------------------------------------------------------------ */
.pacchetti--classi {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s4);
}

.pacchetti--classi .pacchetto { padding: 0 0 var(--s4); text-align: center; overflow: hidden; }

.pacchetto__scatto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: var(--s3);
}

.pacchetto__chi {
	margin: 0 var(--s4) var(--s1);
	font-family: var(--sans);
	font-size: var(--t-etichetta);
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .7;
}

.pacchetti--classi .pacchetto__nome {
	margin: 0 var(--s4) var(--s2);
	font-size: var(--t-guida);
}

.pacchetti--classi .pacchetto__prezzo {
	margin: 0 var(--s4) 0;
	font-size: var(--t-forte);
}

.pacchetti--classi .pacchetto__nota {
	margin: 0 var(--s4) var(--s3);
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--bordo);
	font-size: var(--t-minuto);
	opacity: .75;
}

.pacchetti--classi .comprende { margin-inline: var(--s4); }
.pacchetti--classi .bottone { margin-inline: var(--s4); width: calc(100% - 2 * var(--s4)); }

/* La nota sanitaria — il sorbetto al limone senza latte né glutine — non è un
   dettaglio decorativo: è la prima obiezione di ogni scuola, e va letta. */
.pacchetto__avvertenza {
	margin: 0 var(--s4) var(--s3);
	padding: var(--s2) var(--s3);
	border-radius: var(--raggio);
	background: var(--pistacchio);
	color: var(--cioccolato);
	font-size: var(--t-minuto);
	line-height: 1.4;
	text-align: left;
}

/* =========================================================================
   LE FAQ
   =========================================================================
   Usano `<details>`: apre e chiude senza una riga di JavaScript, si naviga
   da tastiera, e il testo resta leggibile ai motori di ricerca anche a
   fisarmonica chiusa. Un accordion scritto a mano avrebbe voluto stato,
   ARIA e tasti — tutto già dentro l'elemento nativo.
   ====================================================================== */
.faq__intro {
	max-width: var(--testo);
	margin-inline: auto;
	margin-bottom: var(--s6);
}

.faq__voce {
	max-width: var(--testo);
	margin-inline: auto;
	border-bottom: 1px solid var(--bordo);
}

.faq__voce summary {
	list-style: none;
	cursor: pointer;
	padding: var(--s3) 2rem var(--s3) 0;
	position: relative;
	font-family: var(--sans);
	font-weight: 600;
	font-size: var(--t-corpo);
	line-height: 1.4;
}

/* La freccina di sistema è diversa in ogni browser: si toglie e si rifà. */
.faq__voce summary::-webkit-details-marker { display: none; }

.faq__voce summary::after {
	content: "+";
	position: absolute;
	right: .35rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--t-medio);
	line-height: 1;
	color: var(--amarena);
	transition: transform .18s ease;
}

.faq__voce[open] summary::after { content: "−"; }
.faq__voce summary:hover { color: var(--amarena); }
.faq__voce summary:focus-visible { outline: 3px solid var(--amarena); outline-offset: 2px; }

.faq__voce p {
	margin: 0 0 var(--s4);
	padding-right: 2rem;
}

/* I gruppi: un titolo ogni tanto, per non avere venti righe uguali. */
.pagina__corpo h2 + .faq__voce { border-top: 1px solid var(--bordo); }

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

/* ---------------------------------------------------------------------
   LA BARRA DEL PACCHETTO SCELTO
   Non è un passo del modulo: è il contesto di tutti e tre. Chi arriva
   dalla pagina dei prezzi ha già scelto e vede solo questa riga; chi
   apre l'indirizzo da solo vede le cinque schede al suo posto.
   ------------------------------------------------------------------ */
.preventivo__scelto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-bottom: var(--s5);
	padding: var(--s3) var(--s4);
	border: 1px solid var(--bordo);
	border-left: 4px solid var(--amarena);
	border-radius: var(--raggio);
	background: var(--panna-scura);
}

.preventivo__scelto-testo {
	margin: 0;
	font-size: var(--t-piccolo);
	line-height: 1.4;
}

.preventivo__scelto-cambia {
	font-family: var(--sans);
	font-size: var(--t-minuto);
	white-space: nowrap;
}

.preventivo__scelta { margin-bottom: var(--s5); }

/* Il minimo di prenotazione, accanto al prezzo a persona.
   Più piccolo del prezzo ma non sbiadito: è una condizione commerciale, e
   scriverla in grigio chiaro sotto il numero grande è il modo elegante di
   nasconderla. Deve leggersi. */
.pacchetto__minimo,
.formato__minimo {
	display: block;
	margin-top: .15rem;
	font-size: var(--t-minuto);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--amarena);
}


/* Il campo trappola per i robot.
   ⚠️ NON `display:none`: alcuni riempitori automatici e alcuni robot saltano
   apposta i campi nascosti così, e la trappola non scatterebbe. Si sposta
   fuori dallo schermo restando, per il browser, un campo normale. */
.nat-nascosto {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* L'esito dopo l'invio. Sta in cima al modulo, dove l'occhio torna. */
.esito-invio {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	border-radius: var(--raggio);
	border-inline-start: 5px solid;
}
.esito-invio--ok { background: #EDF6ED; border-color: #3F7A3F; }
.esito-invio--no { background: #FBEFEF; border-color: var(--amarena); }
.esito-invio__titolo {
	margin: 0 0 .25rem;
	font-family: var(--serif);
	font-size: var(--t-guida);
	font-weight: 600;
}
.esito-invio--ok .esito-invio__titolo { color: #2E5C2E; }
.esito-invio--no .esito-invio__titolo { color: var(--amarena); }
.esito-invio__dettaglio { margin: 0; color: var(--inchiostro-2); }

/* La nota sotto il campo data quando il giorno non si può.
   Rosso perché è un no, ma un no che si risolve cambiando data — non un
   errore di compilazione. */
.campo__nota--no {
	color: var(--amarena);
	font-weight: 600;
}

/* =========================================================================
   16. LA CONSOLE — versione da guerra
   ====================================================================== */

/* Scritta MOBILE-FIRST, e non per moda: la console si usa da telefono, in
   piedi, con una mano (D043). Le regole di base sono quelle del telefono; le
   media query aggiungono spazio quando c'è, invece di toglierlo quando manca.

   ⚠️ Nessun colore nuovo: tutto esce dalla vaschetta dei gusti. Uno
   strumento interno che si inventa una tavolozza propria diventa un secondo
   sistema di design da mantenere. */

.console {
	max-width: 900px;
	margin-inline: auto;
	padding-block: var(--s5);
}

.console--chiusa {
	max-width: 26em;
	text-align: center;
	padding-block: var(--s8);
}

/* --- Le quattro viste ------------------------------------------------- */

.cviste {
	display: flex;
	gap: 2px;
	background: var(--panna-scura);
	border-radius: 100px;
	padding: 3px;
	margin-bottom: var(--s4);
}
.cviste__voce {
	flex: 1;
	text-align: center;
	padding: var(--s3) var(--s2);
	border-radius: 100px;
	font-size: var(--t-minuto);
	font-weight: 600;
	text-decoration: none;
	color: var(--inchiostro-2);
}
.cviste__voce--attiva {
	background: var(--amarena);
	color: #fff;
}

/* --- I filtri ---------------------------------------------------------
   Link e non <select>: una tendina di sistema chiede due gesti e nasconde
   lo stato. Qui ogni voce è un bersaglio da dito e si vede cosa è attivo
   senza aprire niente. */

.cfiltri {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	margin-bottom: var(--s5);
}
.cfiltro {
	display: flex;
	align-items: center;
	gap: var(--s2);
	/* 🔴 VA A CAPO, non scorre — corretto il 2026-08-09 dopo la prova su
	   iPhone.
	   Il ragionamento vecchio («quattro filtri su quattro righe mangerebbero
	   mezzo schermo») confrontava lo scorrimento con **una riga per filtro**.
	   Ma andando a capo ne bastano DUE in tutto, e la differenza è che si
	   vedono: uno scorrimento orizzontale su una barra di filtri nasconde
	   proprio le voci che non si stanno usando, cioè quelle che si sta
	   cercando. Chi non sa che si scorre crede che gli altri stati non
	   esistano. */
	flex-wrap: wrap;
	row-gap: var(--s2);
	padding-bottom: 2px;
}

.cfiltro__nome {
	/* ⚠️ Riga tutta sua, e `min-inline-size` tolto: quei 4,5em erano ~58px di
	   larghezza sottratti alle voci su uno schermo che ne ha 342. Con
	   l'etichetta sopra, i filtri si distribuiscono su due righe piene invece
	   di una riga e mezza tagliata. */
	flex: 1 0 100%;
	font-size: var(--t-etichetta);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--inchiostro-3);
}
.cfiltro__voce {
	flex: none;
	padding: var(--s2) var(--s3);
	border: 1px solid var(--bordo);
	border-radius: 100px;
	font-size: var(--t-minuto);
	text-decoration: none;
	color: var(--inchiostro-2);
	white-space: nowrap;
}
.cfiltro__voce--attiva {
	background: var(--pistacchio-scuro);
	border-color: var(--pistacchio-scuro);
	color: var(--panna);
	font-weight: 600;
}

/* --- Il pallino di stato ----------------------------------------------
   🔴 Il colore è un'ACCELERAZIONE, non l'informazione: ogni pallino porta
   il suo title e un testo per screen reader. Chi non distingue i colori
   legge lo stato, non indovina. */

.cpallino {
	display: inline-block;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--inchiostro-3);
	flex: none;
}
.cpallino--richiesta  { background: var(--oro); }            /* da guardare */
.cpallino--confermata { background: var(--pistacchio-scuro); } /* detto sì */
.cpallino--pagata     { background: var(--amarena); }        /* soldi arrivati */
.cpallino--rifiutata,
.cpallino--scaduta    { background: var(--bordo); }          /* storia */

/* --- Le righe ---------------------------------------------------------
   ⚠️ Il link è la riga intera, non il nome: su un telefono un bersaglio
   piccolo si manca una volta su tre. */

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

.criga + .criga { border-top: 1px solid var(--bordo); }

.criga a {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3) var(--s2);
	text-decoration: none;
	color: var(--inchiostro);
	min-block-size: 56px;   /* bersaglio da pollice */
}
.criga a:hover { background: var(--panna-scura); }

.criga__giorno {
	flex: none;
	inline-size: 2.6em;
	text-align: center;
	line-height: 1.05;
}
.criga__giorno strong { display: block; font-size: var(--t-guida); font-family: var(--serif); }
.criga__giorno span   { font-size: var(--t-etichetta); color: var(--inchiostro-3); text-transform: uppercase; }

.criga__corpo { flex: 1; min-inline-size: 0; }
.criga__chi   { display: block; font-weight: 600; font-size: var(--t-piccolo); }
.criga__cosa  {
	display: block;
	font-size: var(--t-minuto);
	color: var(--inchiostro-2);
	/* Un nome lungo non deve spingere fuori lo stato. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.criga__stato { flex: none; display: flex; align-items: center; gap: var(--s2); }
.criga__stato-nome {
	font-size: var(--t-etichetta);
	color: var(--inchiostro-3);
	/* Su telefono resta il solo pallino: il nome torna quando c'è spazio. */
	display: none;
}

/* --- La lista ---------------------------------------------------------- */

.cgruppo + .cgruppo { margin-top: var(--s5); }

.cgruppo__data a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s2) var(--s2);
	background: var(--panna-scura);
	border-radius: var(--raggio);
	text-decoration: none;
	color: var(--inchiostro);
	font-family: var(--serif);
	font-size: var(--t-piccolo);
}
.cgruppo__data { margin: 0 0 var(--s2); }
.cgruppo__quanti {
	font-family: var(--sans);
	font-size: var(--t-etichetta);
	background: var(--amarena);
	color: #fff;
	border-radius: 100px;
	padding: 1px var(--s2);
}

.cconto,
.cvuoto {
	text-align: center;
	font-size: var(--t-minuto);
	color: var(--inchiostro-3);
	margin-top: var(--s5);
}
.cvuoto { padding-block: var(--s7); }

/* --- Navigazione fra i periodi ---------------------------------------- */

.cnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	margin-bottom: var(--s4);
}
.cnav__titolo { font-family: var(--serif); font-size: var(--t-guida); text-align: center; flex: 1; }
.cnav__freccia {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 44px;      /* bersaglio da pollice, non una freccina */
	block-size: 44px;
	border: 1px solid var(--bordo);
	border-radius: 50%;
	text-decoration: none;
	color: var(--inchiostro);
	font-size: var(--t-piccolo);
}

.coggi { text-align: center; margin-top: var(--s6); font-size: var(--t-minuto); }

/* --- Vista giorno: le macchine ---------------------------------------- */

.cmacchine { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s2); }

.cmacchina {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s3);
	border-radius: var(--raggio);
	border-inline-start: 4px solid var(--bordo);
	background: var(--panna-scura);
}
.cmacchina__nome  { font-weight: 700; font-size: var(--t-piccolo); }
.cmacchina__stato { font-size: var(--t-minuto); color: var(--inchiostro-2); text-align: end; }

/* 🔴 DUE COLORI DIVERSI, non due rossi (D044): una circostanza e un fatto
   non si somigliano. Ambra = si può fare, guarda; rosso = non si può. */
.cmacchina--libera        { border-inline-start-color: var(--pistacchio-scuro); }
.cmacchina--occupata      { border-inline-start-color: var(--amarena); background: var(--crema); }
.cmacchina--sconsigliata  { border-inline-start-color: var(--oro); }
.cmacchina--impossibile   { border-inline-start-color: var(--amarena); }
.cmacchina--spenta        { opacity: .6; }

/* Il nome di chi occupa il carretto: è l'informazione, non un dettaglio. */
.cmacchina--occupata .cmacchina__stato { color: var(--inchiostro); font-weight: 600; }

.cavviso {
	padding: var(--s3);
	border-radius: var(--raggio);
	background: var(--crema);
	font-size: var(--t-minuto);
	margin-bottom: var(--s5);
}

/* --- Vista settimana: sette giorni in verticale ------------------------
   ⚠️ Non sette colonne: a 375px farebbero 53px per giorno, cioè un numero
   e niente. In verticale si perde il colpo d'occhio e si guadagna la
   leggibilità — ed è la versione da guerra. */

.csettimana { display: grid; gap: var(--s4); }

.cgiorno__testa { margin: 0 0 var(--s2); }
.cgiorno__testa a {
	display: flex;
	align-items: baseline;
	gap: var(--s2);
	text-decoration: none;
	color: var(--inchiostro);
}
.cgiorno__nome { font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: .08em; color: var(--inchiostro-3); }
.cgiorno__num  { font-family: var(--serif); font-size: var(--t-guida); }

.cgiorno--oggi .cgiorno__num { color: var(--amarena); }
.cgiorno--vuoto { opacity: .5; }
.cgiorno--vuoto .cgiorno__testa { margin: 0; }

/* --- Vista mese: la griglia ------------------------------------------- */

.cmese__testa,
.cmese__griglia {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.cmese__testa {
	margin-bottom: 2px;
	font-size: var(--t-etichetta);
	color: var(--inchiostro-3);
	text-align: center;
}

.ccella {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	padding: 3px;
	background: var(--panna-scura);
	border-radius: 6px;
	text-decoration: none;
	color: var(--inchiostro);
	font-size: var(--t-etichetta);
}
.ccella--fuori { opacity: .35; }
.ccella--oggi  { outline: 2px solid var(--amarena); outline-offset: -2px; }

.ccella__num     { font-weight: 600; }
.ccella__pallini { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.ccella__piu     { font-size: 9px; color: var(--inchiostro-3); }

/* --- LA SCHEDA: una prenotazione, e la decisione -----------------------
   🔴 È l'unica pagina della console in cui si SCRIVE. Tutto qui dentro è
   ordinato per come si legge decidendo: chi è → come lo chiamo → cosa vuole
   → com'è messo quel giorno → quanto costa → sì o no.

   Le due decisioni non sono affiancate, ed è una regola di sicurezza prima
   che di stile: vedi `naturalis_console_azioni()`. */

.cscheda__torna { margin: 0 0 var(--s2); font-size: var(--t-minuto); }

/* ⚠️ Bersaglio da pollice come tutto il resto della scheda: è il gesto più
   ripetuto della console — si entra e si esce da ogni prenotazione — ed era
   l'unico link qui sotto i 44px. Rilievo `design-reviewer`, 2026-08-04. */
.cscheda__torna a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline-end: var(--s3);
	color: var(--inchiostro-2);
	text-decoration: none;
}

/* L'esito di un'azione appena fatta. Verde e rosso sono già in uso per gli
   invii dei moduli: si riusano quelli, non se ne inventano altri. */
.cesito {
	display: block;
	padding: var(--s3) var(--s4);
	border-radius: var(--raggio);
	border-inline-start: 5px solid;
	margin-bottom: var(--s5);
	font-size: var(--t-minuto);
}
.cesito--si { background: #EDF6ED; border-color: #3F7A3F; }
.cesito--no { background: #FBEFEF; border-color: var(--amarena); }
.cesito strong { display: block; font-family: var(--serif); font-size: var(--t-piccolo); }
.cesito span   { color: var(--inchiostro-2); }

.cscheda__testa { margin-bottom: var(--s4); }
.cscheda__stato {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin: 0 0 var(--s2);
	font-size: var(--t-etichetta);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--inchiostro-3);
}
.cscheda__chi {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--t-medio);
	line-height: 1.15;
}
.cscheda__quando { margin: var(--s1) 0 0; font-size: var(--t-piccolo); color: var(--inchiostro-2); }
.cscheda__quando a { color: inherit; }

/* --- I contatti: bersagli da pollice, non righe di testo ---------------
   Sono il motivo per cui questa pagina esiste invece di wp-admin: si legge
   una richiesta e si richiama, senza copiare un numero a mano. */

.ccontatti { display: grid; gap: var(--s2); margin-bottom: var(--s5); }

.ccontatto {
	display: flex;
	align-items: baseline;
	gap: var(--s2);
	flex-wrap: wrap;
	min-block-size: 48px;
	padding: var(--s3);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	text-decoration: none;
	color: var(--inchiostro);
	font-weight: 600;
	font-size: var(--t-piccolo);
}
.ccontatto span {
	font-weight: 400;
	font-size: var(--t-minuto);
	color: var(--inchiostro-2);
	/* Un'email lunga non deve allargare la scheda oltre lo schermo. */
	overflow-wrap: anywhere;
}

/* --- I blocchi --------------------------------------------------------- */

.cscheda__blocco { margin-bottom: var(--s6); }

.cscheda__titolo {
	margin: 0 0 var(--s3);
	font-size: var(--t-etichetta);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--inchiostro-3);
	border-bottom: 1px solid var(--bordo);
	padding-bottom: var(--s2);
}

/* Etichetta e valore sulla stessa riga: su un telefono, una definizione per
   riga fa scorrere due schermate per leggere otto dati. */
.cdati { margin: 0; }
.cdati > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s4);
	padding: var(--s2) 0;
}
.cdati > div + div { border-top: 1px solid var(--bordo); }
.cdati dt { flex: none; font-size: var(--t-minuto); color: var(--inchiostro-3); }
.cdati dd { margin: 0; text-align: end; font-size: var(--t-piccolo); font-weight: 600; }

.cnote {
	margin: var(--s3) 0 0;
	padding: var(--s3);
	background: var(--panna-scura);
	border-radius: var(--raggio);
	font-size: var(--t-minuto);
	white-space: pre-line;   /* gli a capo di chi ha scritto restano */
}

/* --- Il conto ---------------------------------------------------------- */

.cvoci { list-style: none; margin: 0 0 var(--s3); padding: 0; font-size: var(--t-minuto); }
.cvoci li {
	display: flex;
	justify-content: space-between;
	gap: var(--s4);
	padding: var(--s1) 0;
	color: var(--inchiostro-2);
}

.cconti { margin: 0; }
.cconti > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s4);
	padding: var(--s2) 0;
	border-top: 1px solid var(--bordo);
}
.cconti dt { font-size: var(--t-minuto); color: var(--inchiostro-3); }
.cconti dd { margin: 0; font-weight: 600; }

/* 🔴 Il totale è la riga che si cerca: se pesa come le altre, si legge il
   deposito credendo di leggere il totale. */
.cconti__totale dt { color: var(--inchiostro); font-weight: 600; font-size: var(--t-piccolo); }
.cconti__totale dd { font-family: var(--serif); font-size: var(--t-medio); }
.cconti__quando { display: block; font-size: var(--t-etichetta); font-weight: 400; color: var(--inchiostro-3); }

/* L'avviso che va letto prima di premere: ambra, come le circostanze della
   vista giorno. Non è un errore — è una cosa da sapere. */
.cavviso--forte { border-inline-start: 4px solid var(--oro); }
.cavviso--forte strong { display: block; }

/* Un'email che non è arrivata: amarena come le macchine impossibili, perché
   è un guasto e non un'avvertenza. L'oro dice «attento», l'amarena dice
   «qualcosa è andato storto». Sulla scheda sta sopra i pulsanti di contatto:
   la risposta a un rimbalzo è telefonare. */
.cavviso--male { border-inline-start: 4px solid var(--amarena); }
.cavviso--male strong { display: block; margin-bottom: var(--s2); }
.cavviso--male p { margin: 0 0 var(--s2); }
.cavviso--male p:last-child { margin-bottom: 0; }

/* --- Le due decisioni --------------------------------------------------- */

.cazioni { margin-top: var(--s6); }

.cazione {
	padding: var(--s4);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--panna-scura);
}

.cazione__campi { display: grid; gap: var(--s3); margin-bottom: var(--s4); }

.ccampo { margin: 0; display: grid; gap: var(--s1); }
.ccampo label { font-size: var(--t-minuto); font-weight: 600; }
.ccampo input,
.ccampo textarea {
	inline-size: 100%;
	padding: var(--s3);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--panna);
	font: inherit;
	font-size: var(--t-piccolo);
	color: var(--inchiostro);
}
.ccampo--stretto input { max-inline-size: 8em; }
.ccampo__nota { font-size: var(--t-etichetta); color: var(--inchiostro-3); }

.cbottone {
	inline-size: 100%;
	min-block-size: 52px;       /* si preme camminando, con una mano */
	padding: var(--s3) var(--s4);
	border: 0;
	border-radius: var(--raggio);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.cbottone--si { background: var(--pistacchio-scuro); color: #fff; }
.cbottone--no { background: transparent; color: var(--amarena); border: 1px solid var(--amarena); }

.cazione__nota {
	margin: var(--s2) 0 0;
	text-align: center;
	font-size: var(--t-etichetta);
	color: var(--inchiostro-3);
}

/* ⚠️ Il rifiuto è chiuso e va aperto: un gesto in più fra il pollice e una
   prenotazione buttata via. Fondo trasparente, perché non è il gesto
   normale — è quello che si fa quando serve. */
.cazione--no {
	margin-top: var(--s4);
	background: transparent;
	border-style: dashed;
}
/* ⚠️ Dimesso NON vuol dire difficile da centrare.
   Il rifiuto è subordinato di proposito (D074) — chiuso, senza sfondo, testo
   piccolo — ma restava sotto i 44px, e un rifiuto legittimo fatto in piedi
   col pollice chiedeva più precisione degli altri gesti. La subordinazione
   la danno lo stile e il fatto che vada aperto, non la difficoltà di
   premerlo. Rilievo `design-reviewer`, 2026-08-04. */
.cazione--no summary {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: var(--t-minuto);
	color: var(--inchiostro-2);
	min-block-size: 44px;
}
.cazione--no[open] summary { margin-bottom: var(--s3); font-weight: 600; }

/* --- Quando c'è spazio ------------------------------------------------- */

@media (min-width: 560px) {
	/* I contatti in fila: da tastiera e mouse non servono tre bersagli alti. */
	.ccontatti { grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); }

	/* Il nome dello stato torna accanto al pallino: su schermo largo il
	   colore da solo è un'economia che non serve più. */
	.criga__stato-nome { display: inline; }

	.cfiltri { flex-direction: row; flex-wrap: wrap; gap: var(--s4); }
	.cfiltro { overflow: visible; }
}

@media (min-width: 700px) {
	/* La settimana diventa davvero una settimana. */
	.csettimana { grid-template-columns: repeat(7, 1fr); align-items: start; }
	.cgiorno { min-block-size: 8em; }
	.criga a { flex-direction: column; align-items: flex-start; gap: 2px; min-block-size: 0; }
	.crighe--fitte .criga__giorno { display: none; }
}

/* --- La pianificazione in console (D142, rifatta in D145) --------------

   🔴 UNA SCATOLA PER GRUPPO, non una per data.

   Prima ogni riga era una scheda con fondo e bordi propri: ventisette schede
   una sotto l'altra, e la pagina diventava un rotolo. La segnalazione del
   committente era esattamente questa, e la prima volta l'avevo letta come «un
   avviso per gruppo» — che era solo metà del problema.

   Adesso il fondo ce l'ha l'ELENCO; le righe dentro sono separate da una
   linea sottile, come le voci di una lista. */

.csetup__intro  { color: var(--seppia); margin-bottom: var(--s5); }
.csetup__titolo { margin: var(--s6) 0 var(--s1); font-size: 1.05rem; }
.csetup__nota   { color: var(--seppia); font-size: var(--t-minuto); margin: 0 0 var(--s3); }

.csetup__lista {
	background: var(--crema);
	border-radius: var(--raggio);
	padding: var(--s2) var(--s3);
	margin-bottom: var(--s3);
}

.csetup__riga {
	display: grid;
	/* 🔴 AREE ESPLICITE, non flusso automatico.
	   La prima stesura si fidava dell'auto-placement e la × finiva su una
	   riga tutta sua — il difetto che il committente ha visto sull'iPhone.
	   CSS Grid, in modalità sparsa, non torna mai indietro a riempire un buco:
	   dichiarare dove va ciascun pezzo è l'unico modo di saperlo davvero. */
	/* 🔴 La data prende quello che le serve, non tutto lo spazio.
	   Un campo data su iOS misura ~130px: dargli `1fr` significava lasciargli
	   metà riga vuota e schiacciare la × in un angolo. Ora è la colonna del
	   TESTO a espandersi — che è l'unica che ha davvero qualcosa da dire. */
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"anno  anno  anno"
		"data  a     togli"
		"testo testo testo"
		"ogni  ogni  ogni";
	align-items: center;
	gap: var(--s1) var(--s2);
	padding: var(--s2) 0;
	border-top: 1px solid var(--bordo-tenue);
}

/* ── DUE DENSITÀ, e la ragione è il mestiere di ciascuna riga ─────────────
   Le righe già salvate si **consultano**: si scorrono per trovare una data,
   e più ne stanno in schermo meglio è. La riga vuota in fondo si **compila**,
   con le dita, e lì lo spazio serve.
   Segnalazione del committente, 2026-08-09. */

.csetup__riga--salvata { padding: var(--s1) 0; }
.csetup__riga--salvata label { font-size: 0.72rem; gap: 0; }
.csetup__riga--salvata input[type="date"],
.csetup__riga--salvata input[type="text"] { padding: var(--s1) var(--s2); }
.csetup__riga--salvata .csetup__data input,
.csetup__riga--salvata .csetup__a input { inline-size: auto; min-inline-size: 8.5em; }

.csetup__riga--nuova {
	margin-top: var(--s2);
	padding-top: var(--s3);
	border-top: 2px dashed var(--bordo-tenue);
}

.csetup__riga:first-child { border-top: 0; }

.csetup__anno  { grid-area: anno; }
.csetup__data  { grid-area: data; }
.csetup__a     { grid-area: a; }
.csetup__largo { grid-area: testo; }
.csetup__ogni  { grid-area: ogni; }
.csetup__togli { grid-area: togli; align-self: center; }

.csetup__riga label {
	display: grid;
	gap: 0.15rem;
	font-size: var(--t-etichetta);
	color: var(--seppia);
}

/* 🔴 SEDICI PIXEL, e non è una scelta tipografica.
   Sotto i 16px iOS Safari ingrandisce l'intera pagina quando il focus entra
   in un campo — e il tocco successivo cade dove il dito si aspettava, non
   dove il bersaglio è finito. Su una schermata con ventisette campi data è il
   modo più diretto di far toccare la riga sbagliata. */
.csetup__riga input[type="date"],
.csetup__riga input[type="text"],
.csetup__riga input[type="number"] {
	width: 100%;
	font: inherit;
	font-size: var(--t-piccolo);
}

/* L'anno separa i gruppi: è la difesa contro «cancello questo doppione» che
   il 9 agosto è costata la stagione 2027. Deve essere il primo elemento che
   l'occhio incontra scorrendo, non una parola in mezzo ai campi. */
.csetup__anno {
	margin: 0 0 var(--s1);
	font-family: var(--serif);
	font-size: var(--t-guida);
	font-weight: 700;
	color: var(--inchiostro);
}

@media (min-width: 46rem) {
	/* Larghi: tutto su una riga sola. */
	.csetup__riga {
		grid-template-columns: auto auto minmax(0, 1fr) auto auto;
		grid-template-areas:
			"anno anno  anno  anno anno"
			"data a     testo ogni togli";
	}
}

.cbottone--tenue { background: none; border: 1px dashed var(--bordo-tenue); color: var(--seppia); }
.csetup__salva   { margin-top: var(--s6); }

/* Le spunte della disponibilità: quelle restano schede, sono poche e leggibili. */
.csetup__spunta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s2);
	align-items: start;
	padding: var(--s2) 0;
	border-top: 1px solid var(--bordo-tenue);
}
.csetup__spunta:first-child { border-top: 0; }
.csetup__spunta strong { display: block; }
.csetup__spunta em {
	display: block;
	font-style: normal;
	font-size: var(--t-minuto);
	color: var(--seppia);
}

/* L'anno del gruppo, e le righe che non fanno niente */
.csetup__gruppo {
	margin: var(--s4) 0 var(--s1);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--seppia);
}
.csetup__inutile {
	margin: 0 0 var(--s2);
	font-size: var(--t-minuto);
	color: var(--seppia);
	border-inline-start: 3px solid var(--oro);
	padding-inline-start: var(--s2);
}

.csetup__ogni {
	display: flex !important;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	white-space: nowrap;
}
.csetup__ogni input { width: auto; }

/* La × è larga come un dito e non va mai a capo. */
.csetup__togli {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px: è la misura minima di Apple, e sotto si sbaglia bersaglio. */
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
	color: var(--seppia);
	font-size: 1.4rem;
	line-height: 1;
}
.csetup__togli input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.csetup__togli input:checked + span { color: var(--amarena); }
.csetup__togli input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 3px; }

/* Marcata, non sparita: finché non si salva si torna indietro. */
.csetup__riga--via { opacity: .55; }
.csetup__riga--via input[type="date"],
.csetup__riga--via input[type="text"] { text-decoration: line-through; }

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

/* --- Due rilievi fuori dalla pianificazione (D147) ---------------------- */

/* 🔴 Cinque schede in 342px di iPhone. Senza questo, o vanno a capo su due
   righe disomogenee o si schiacciano a bersagli da 45px separati da 2px — su
   una barra che si tocca a ogni apertura della console. Stesso rimedio già
   usato per i filtri, poche righe sopra: scorre invece di comprimersi. */
.cviste {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.cviste::-webkit-scrollbar { display: none; }
.cviste__voce {
	flex: none;
	white-space: nowrap;
	padding-inline: var(--s3);
}

/* I tre pulsanti di «Send the link again» avevano i bordi attaccati: tre
   bersagli distinti che sembravano un blocco solo, nel momento in cui si sta
   rimandando un link di pagamento. Il gap c'era già sui contatti in cima alla
   scheda — mancava qui. */
.cscheda__contatti { display: grid; gap: var(--s2); }

/* --- Il riquadro dei soldi (D147) --------------------------------------
   🔴 Portava la classe `.cconto`, che è quella della NOTA a piè d'elenco:
   centrata, piccola, grigia. Gli importi di «Where the money is» e i totali
   della scheda si vedevano così, e le loro righe non avevano alcuna regola.
   Due cose diverse con lo stesso nome — trovato dal controllo che confronta
   markup e foglio di stile, non a occhio. */

.cconti { margin: 0; display: grid; gap: var(--s2); }

.cconti__riga {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
}
.cconti__riga dt { color: var(--seppia); font-size: var(--t-piccolo); }
.cconti__riga dd {
	margin: 0;
	font-variant-numeric: tabular-nums;   /* le cifre si incolonnano */
	font-weight: 600;
	white-space: nowrap;
}
.cconti__nota { font-weight: 400; color: var(--seppia); font-size: var(--t-etichetta); }

.cconti__riga--totale {
	border-top: 1px solid var(--bordo-tenue);
	padding-top: var(--s2);
}
.cconti__riga--totale dt,
.cconti__riga--totale dd { font-weight: 700; color: var(--inchiostro); }

/* --- Le cinque classi rimaste nude (D147) -------------------------------
   Trovate dal controllo che confronta markup e foglio di stile. Nessuna
   rompeva niente da sola: sono elementi che si dispongono come capita, ed è
   la somma di questi a far dire «si vede che è un sito web». */

/* L'elenco delle prenotazioni: le schede respirano invece di toccarsi. */
.clista { display: grid; gap: var(--s3); }

/* Segnare un giorno occupato non è né un sì né un no: è un gesto neutro,
   e prendeva il bordo dorato dell'avvertenza. */
.cazione--impegno { border-inline-start: 4px solid var(--bordo); }

/* I moduli dentro le azioni e la pianificazione: i campi in colonna con
   respiro, invece di attaccati al bordo del <details>. */
.cazione__modulo,
.csetup__modulo { display: grid; gap: var(--s3); }

/* Una spunta non è un campo con etichetta sopra: sta sulla stessa riga,
   e la casella è grande abbastanza da premerla camminando. */
.ccampo--spunta {
	display: flex;
	align-items: center;
	gap: var(--s2);
}
.ccampo--spunta input[type="checkbox"] {
	inline-size: 1.35rem;
	block-size: 1.35rem;
	flex: none;
}

/* Il riquadro dei ricorrenti c'è sempre — serve come bersaglio per lo
   spostamento — ma finché è vuoto non deve occupare spazio né promettere
   contenuto. `:empty` è vero solo se non c'è nemmeno uno spazio: le righe
   arrivano da PHP senza testo fra i tag, quindi funziona. */
.csetup__ricorrenti:empty { display: none; }

/* ⚠️ NIENTE `+ *` qui: nasconderebbe l'intestazione del gruppo SUCCESSIVO,
   che è l'anno — cioè la difesa contro l'errore che ha già cancellato una
   stagione. L'intestazione dei ricorrenti la precede, e la copre `:has()`. */
.csetup__gruppo:has( + .csetup__ricorrenti:empty ) { display: none; }

/* =========================================================================
   L'AVVISO DI STAGIONE (rilievo del design-reviewer, 2026-08-10)
   ========================================================================= */

/*
 * 🔴 Deve farsi leggere, NON allarmare.
 *
 * Non è un errore: è un'informazione commerciale — «torniamo a ottobre» — e
 * vestirla col rosso degli allarmi direbbe al visitatore che qualcosa è andato
 * storto. Fondo panna e filetto amarena a sinistra: si nota scorrendo e non
 * spaventa. Per dieci settimane sarà la prima cosa che si legge sotto l'hero,
 * e la stagionalità di un prodotto artigianale è un pregio, non una scusa.
 */
.avviso-stagione {
	margin: 0 0 var(--s5);
	padding: var(--s3) var(--s5);
	border-left: 4px solid var(--amarena);
	border-radius: 0 6px 6px 0;
	background: var(--panna);
	color: var(--inchiostro);
	font-size: var(--t-corpo);
	line-height: 1.55;
}

.avviso-stagione strong {
	display: block;
}

/* ⚠️ Sottolineato SEMPRE: dentro un riquadro colorato il solo cambio di tinta
   non basta a far capire che è un collegamento, e chi non distingue i colori
   non lo vedrebbe affatto. */
.avviso-stagione a {
	color: var(--amarena);
	text-decoration: underline;
}