/* ==========================================================================
   RADAR.casa — LA SCHERMATA `cerca`
   Il foglio della sola pagina che usa `templates/cerca.php`.
   Sorgente del disegno: `_disegno/schermate/cerca.html` (64 righe, stili in
   linea) + `_disegno/schermate/_regole.css` §1 e §2 + `_disegno/token.css`.

   ┌──────────────────────────────────────────────────────────────────────┐
   │ 🚨 LA HERO NON REGGE SENZA LA FOTO, E I TOKEN SI PRENDONO IN COPPIA  │
   │                                                                      │
   │ Il disegno scrive `color: var(--su-vetro)` sul testo della hero. In  │
   │ tema chiaro `--su-vetro` è #1F1B18 sopra `--inchiostro` #17110E:     │
   │ **nero su nero**. Si legge solo perché fra i due c'è la foto e, sopra│
   │ la foto, `--velo-hero`, che in chiaro è un velo bianco al 62%.       │
   │                                                                      │
   │ 👉 Quindi qui il velo, il testo, il vetro e il bordo si dichiarano   │
   │    **insieme**, nello stesso blocco, e si misurano **sulla coppia    │
   │    che si usa** — cioè sopra la foto composita, non sopra un colore  │
   │    piatto. → `radar.css` §verificato, stessa lezione.                │
   └──────────────────────────────────────────────────────────────────────┘

   PERCHÉ I TOKEN STANNO QUI E NON IN `ossatura.css`
   Il 16/8/2026 un'altra squadra sta riscrivendo l'architettura chiaro/scuro
   del tema (`ossatura.css`, `radar.css`, `tema.js`). Aggiungere token là
   dentro mentre la si riscrive è come scrivere sullo stesso rigo in due.
   Tutti i token nuovi sono **prefissati `--cerca-`** e **ambientati alla
   sezione**: non escono da qui, non ombreggiano niente del tema, e il giorno
   in cui l'architettura nuova li porta si cancellano senza cercarli.

   ⚠ NON si ridichiara qui: `--inchiostro`, `--su-inchiostro`,
   `--su-inchiostro-soft`, `--inchiostro-bordo`, `--azione-scuro`, `--oro`,
   `--oro-vivo`, `--oro-soft`, `--tocco`, `--cta`, i raggi e le elevazioni.
   Ci sono già tutti in `ossatura.css` §1, **anche in variante scura**:
   verificato uno per uno il 16/8/2026.

   COME SI ACCENDE IL CHIARO
   `tema.js` scrive `data-tema-eff="chiaro"|"scuro"` sull'elemento radice
   (→ `_regole.css` §2). Qui il **predefinito è scuro**: senza attributo si
   vede la foto di notte, col velo scuro e il testo chiaro — la coppia giusta
   anche prima che il JavaScript esista. Un solo interruttore, un solo posto.

   IL CONTRASTO, MISURATO IL 16/8/2026 SOPRA LA FOTO VERA
   Peggior pixel dell'intera foto (1920×1085), filtro `--cerca-foto`
   applicato, velo composto sopra, formula WCAG 2.x:

     coppia                                    chiaro   scuro   soglia
     testo `--cerca-su` sul velo                 6,21    6,56     4,5
     testo `--cerca-su` sul vetro               11,02   16,65     4,5
     bordo `--cerca-bordo` sul velo              3,10    3,06     3,0
     bordo `--cerca-bordo` sul vetro             4,06    5,19     3,0
     accento `--cerca-accento` sul velo          4,52    4,56     3,0 (testo grande)
     etichetta CTA su riempimento                7,92    5,25     4,5
     bordo della CTA contro il velo              4,86    3,91     3,0

   🚨 Due valori del disegno **non passano** e sono stati rifatti, non copiati:
   1. `--vetro-bordo` del disegno (nero al 20% in chiaro, avorio al 24% in
      scuro) sopra la foto fa **1,39** e **1,75**. È il bordo che, da solo,
      dice «questa pillola è un pulsante»: il riempimento `--vetro-alt` contro
      il velo fa **1,01** in chiaro, cioè non si vede. Qui l'opacità sale a
      **62%** e **52%**, che è il minimo per cui il peggior pixel arriva a 3:1.
   2. `--marchio-fascia` sull'`<em>` del titolo (#B5452E / #E07A5F) fa **1,98**
      e **2,48**. Qui diventa #5A2217 e #F1C2B5 — stessa tinta, portata al
      punto in cui si legge (4,52 e 4,56).
   E uno si prende dall'`ossatura`, che l'aveva già risolto: il filetto
   dell'occhiello è `currentColor` e non `--oro`, perché l'oro sul velo chiaro
   fa **1,00** → `ossatura.css` §1.
   ========================================================================== */


/* ==========================================================================
   1 · I token della hero — dichiarati in coppia, ambientati alla sezione

   Il blocco di base è **scuro**: è quello che si vede quando `data-tema-eff`
   non c'è ancora. Il blocco chiaro è più sotto e cambia gli stessi nomi.
   ========================================================================== */

.cerca {
	/* --- La coppia velo + testo, la ragione per cui la hero si legge ----- */
	--cerca-velo:      rgba(10, 8, 6, .58);          /* token.css `--velo-hero` scuro */
	--cerca-su:        #F7F2EB;                      /* token.css `--su-vetro` scuro */
	--cerca-vetro:     rgba(10, 8, 6, .86);          /* token.css `--vetro-alt` scuro */

	/* --- Il fondo sotto la foto, e perché non è quello del disegno -------
	   🚨 Il disegno mette `background: var(--inchiostro)` in tutti e due i
	   temi. In scuro è giusto. In **chiaro** vuol dire #17110E sotto un testo
	   #1F1B18: se la foto non arriva — 404, rete lenta, immagini spente —
	   la hero diventa **1,09:1**, cioè nero su nero, e non c'è più niente da
	   leggere. Misurato dal cancello visivo il 16/8/2026, che la foto non la
	   vede e legge esattamente questa coppia.
	   👉 Sotto la foto ci va il colore **della sua stessa famiglia**: in
	      chiaro l'avorio del velo. Con la foto non si vede (è opaca e copre
	      tutto); senza, la hero resta leggibile a 15,3:1 invece di 1,09.
	      Un fondo che regge da solo non costa un byte in più. */
	--cerca-fondo:     var(--inchiostro);

	/* --- Il bordo: valore nostro, non del disegno. Vedi la testata. ------ */
	--cerca-bordo:     rgba(247, 242, 235, .52);

	/* --- L'accento del titolo: `--marchio-fascia` portato a contrasto ---- */
	--cerca-accento:   #F1C2B5;

	/* --- L'azione. Dichiarata qui e non presa da `radar.css` perché là
	       cambia con `prefers-color-scheme`, mentre la hero cambia con
	       `data-tema-eff`: due interruttori diversi darebbero, su una
	       macchina con preferenza chiara e tema scelto scuro, un pulsante
	       verde bosco sopra un velo notturno. La coppia si tiene. -------- */
	--cerca-azione:    #35997A;
	--cerca-su-azione: #08170F;

	/* --- Il filtro sulle due foto → token.css `--foto` ------------------- */
	--cerca-foto:      saturate(.78) contrast(.95) brightness(.78);

	/* --- I sei pin non sono qui, ed è voluto ---------------------------
	   Colore chiaro, colore scuro, colore della lettera e misura di ogni
	   pastiglia stanno in **`radar-core/data/pin.php`**, che di sé dice:
	   *«questa è la sorgente, e non ci sono copie — un ripiego letterale
	   che duplica uno di questi valori è la seconda copia, e la seconda
	   copia è quella che qualcuno leggerà»*. `cerca.php` li legge da lì con
	   `radar_mappa_categorie()` e li appende alla pillola come proprietà in
	   linea. Qui sotto c'è solo **come si disegna una forma con quel nome**,
	   che è l'altra metà della divisione che quel file stesso descrive.

	   👉 Le due coppie che il disegno sbagliava le ha già corrette la
	   tabella, il 16/8: `vendita` e `terreni` avevano la lettera bianca a
	   3,87 e 3,42. Prendendole da lì arrivano qui già giuste.

	   Il rapporto fra la pastiglia della pillola e il pin sulla mappa: il
	   disegno fa i sei badge a 24 · 28 · 21 · 24×25 · 34×22 · 24, la
	   tabella fa i sei pin a 30 · 28 · 26 · 29×31 · 40×27 · 28. È lo stesso
	   oggetto più piccolo: **0,82**. Un moltiplicatore invece di sei misure
	   ricopiate. */
	--cerca-scala:     .82;

	/* Il monospazio delle etichette: `radar.css` non ha `--mono`. */
	--cerca-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Quanto toglie la testata del tema all'altezza della hero.
	   👉 `header.php` è di un'altra squadra e in questo momento cambia: il
	      valore vero lo dichiarerà chi possiede la testata, con
	      `--testata-h`. Finché non arriva vale il ripiego: **77px**, che è
	      l'altezza vera di `.testata` misurata a 1440 sul banco il
	      16/8/2026 (a 375 la testata va a capo e arriva a 137, ma lì la
	      hero è già più alta del minimo e il ripiego non morde). */
	--cerca-testata:   var(--testata-h, 77px);
}

:root[data-tema-eff="chiaro"] .cerca {
	/*
	 * 🟠 TURNO 10, VERIFICA INDIPENDENTE (guardata, non solo misurata) — il
	 * paragrafo sopra la foto di giorno si legge male a 1440: il velo bianco
	 * al 62% sta sopra un cielo già chiaro e case illuminate, e la differenza
	 * di luminosità non basta, anche se il cancello visivo dà 6,21:1 (misura
	 * contro IL VELO, non contro la foto sotto — lo stesso limite già
	 * segnato: lo script risale al primo antenato OPACO, e un velo
	 * semitrasparente non lo è). 62% → 74%: più bianco sopra la foto, stessa
	 * tinta, nessun altro token toccato. ⛔ Non si è alzato il peso del
	 * carattere: sarebbe stato aggiustare un metro che qui non misura la cosa
	 * giusta, non il testo vero.
	 */
	--cerca-velo:      rgba(253, 251, 249, .74);     /* era .62 — token.css `--velo-hero` chiaro */
	--cerca-su:        #1F1B18;                      /* token.css `--su-vetro` chiaro */
	--cerca-vetro:     rgba(255, 255, 255, .52);     /* token.css `--vetro-alt` chiaro */
	--cerca-fondo:     #FDFBF9;                      /* la tinta del velo chiaro, senza alfa */
	--cerca-bordo:     rgba(31, 27, 24, .62);
	--cerca-accento:   #5A2217;
	--cerca-azione:    #1E5B4A;
	--cerca-su-azione: #FFFFFF;
	--cerca-foto:      saturate(1.03) contrast(1.02);
}


/* ==========================================================================
   2 · La sezione: piena finestra, piena larghezza

   `header.php` apre `<main id="contenuto" class="contenitore">`, che è largo
   `min(100% - 2rem, var(--colonna))` (120rem = 1920, dal 28/8/2026). La hero
   del disegno è al vivo. Si disinnesca il
   contenitore **sulla sola pagina che usa questo modello**, con la classe che
   WordPress mette da sé sul `<body>`: nessun PHP condiviso toccato.
   → è la stessa mossa di `ossatura.css` §2.
   ========================================================================== */

/* 🚨 P2.1, 4/9/2026 — IL DISINNESCO SI SCRIVE UNA VOLTA SOLA, PER TUTTE E DUE
   LE PAGINE CHE MOSTRANO QUESTO MODELLO.
   Fino a oggi questa stessa regola stava in DUE copie con due agganci: qui
   (`body.page-template-cerca`, per la Pagina «Cerca») e in `home.css`
   (`body.home`, per la home vera). Sulla home la classe `page-template-cerca`
   non c'è mai (`radar-vetrina` scambia il FILE con `template_include`, non la
   Pagina assegnata a `page_on_front` — resta `page-template-attesa`, → nota
   di testa di `home.css`): quindi sulla home vinceva SOLO la copia di
   `home.css`, e ogni volta che quella copia e questa divergevano anche di un
   pixel — o non veniva accodata insieme in tempo — la sezione restava dentro
   `.contenitore` (largo `min(100% - 2rem, var(--colonna))`) mentre
   `.cerca__colonna` qui sotto calcolava la propria larghezza **assumendo**
   che il contenitore fosse già disinnescato: due letture diverse della stessa
   domanda, e il conto tornava sbagliato solo su una delle due pagine.
   👉 Un'unica regola, con la stessa specificità di prima (una classe sul
   `body`, un id, una classe), per i due agganci insieme: non può più
   divergere perché è la stessa riga. `home.css` non ridichiara più niente
   qui, → la sua nota di testa. */
body.page-template-cerca #contenuto.contenitore,
body.home #contenuto.contenitore {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.cerca {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	/* 🚨 7/9/2026 — L'APERTURA È 100svh PIENI, e prima non lo era.
	   Ordine di Gabriele, schermata alla mano: «l'hero deve essere 100vh».
	   Misurato: era **804 px su una finestra di 900** — perché qui si toglieva
	   `--cerca-testata`, e toglierla era giusto **finché la testata stava sopra
	   la sezione** e occupava spazio nel flusso. Da stamattina la testata è
	   trasparente e **sovrapposta** (`body.testata-sul-velo`, §0-bis): non
	   occupa più niente, e continuare a sottrarla lasciava una striscia di
	   pagina sotto la piega senza motivo. È un difetto che ho introdotto io
	   rendendo trasparente la testata, e che si vedeva solo guardando.
	   ⚠ `svh` e non `vh`: su un telefono `100vh` conta anche la barra del
	   browser che sparisce scorrendo, e la prima schermata esce più alta dello
	   schermo. `100vh` resta come ripiego per chi non conosce `svh`. */
	min-height: 100vh;                                    /* ripiego */
	min-height: 100svh;
	background: var(--cerca-fondo);
	color: var(--cerca-su);
}


/* ==========================================================================
   3 · Le due foto e il velo
   → `_regole.css` §2, verbatim nella logica: il predefinito è **notte**, e la
   foto del giorno si accende solo quando il tema risolto è chiaro.
   Senza queste tre righe si vedono le due foto una sopra l'altra.
   ========================================================================== */

.cerca__foto {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	filter: var(--cerca-foto);
	animation: cerca-kb 40s ease-in-out infinite alternate;
	will-change: transform;
}

/* 🔴 Prometeo, 4/9/2026, rilievo 1 — riscritta da zero.
   L'immagine INIZIALE del `<picture>` (`#radar-cerca-foto-eroe`,
   → `templates/cerca.php`) NON ha `data-foto` e NON ha una regola qui:
   resta sempre a `opacity: 1` (il valore di base di `.cerca__foto`, sopra),
   perché il suo contenuto lo decide `<source media="(prefers-color-scheme:
   dark)">` AL MOMENTO DEL FETCH — un'etichetta statica non può descrivere
   in anticipo quale foto porta, quindi non gliene si dà una da nascondere
   per errore (era esattamente il difetto: `[data-foto="giorno"]{opacity:0}`
   incondizionato nascondeva l'immagine vera ogni volta che il JS non
   girava o la scelta esplicita divergeva dal sistema).

   `data-foto` esiste SOLO sulla seconda immagine, quella che
   `templates/cerca.php` inietta via JS — o SUBITO, per correggere un
   disallineamento fra scelta esplicita e sistema (`vuoleScuro !==
   sistemaScuro`), o dopo `load`, in sordina, pronta per un cambio tema
   futuro. Lì l'etichetta è vera per costruzione (lo script la sceglie), e
   la base + l'override sotto rispecchiano la stessa domanda del
   `<source media>`: preferenza di sistema quando il JS non ha ancora
   deciso altro, `data-tema-eff` quando ha deciso. */
.cerca__foto[data-foto="notte"]  { opacity: 0; }
.cerca__foto[data-foto="giorno"] { opacity: 0; }

@media (prefers-color-scheme: dark) {
	.cerca__foto[data-foto="notte"]  { opacity: 1; }
}

:root[data-tema-eff="scuro"]  .cerca__foto[data-foto="notte"]  { opacity: 1; }
:root[data-tema-eff="scuro"]  .cerca__foto[data-foto="giorno"] { opacity: 0; }
:root[data-tema-eff="chiaro"] .cerca__foto[data-foto="notte"]  { opacity: 0; }
:root[data-tema-eff="chiaro"] .cerca__foto[data-foto="giorno"] { opacity: 1; }

/* La dissolvenza — P2.1, 4/9/2026. `templates/cerca.php` mette la classe
   `.cerca--foto-vera` SOLO quando esistono `eroe-giorno` ED `eroe-notte`
   (→ nota di testa lì): finché sono segnaposto lo scambio resta uno scatto
   secco, com'è oggi. `prefers-reduced-motion` vince sempre, come il ken
   burns qui sopra (§verificato più giù nel file). */
@media (prefers-reduced-motion: no-preference) {
	.cerca--foto-vera .cerca__foto {
		transition: opacity 1.1s ease;
	}
}

/* Il ken burns del disegno (`_regole.css` §3, `@keyframes kb`). Il nome è
   prefissato: un `@keyframes` è globale, e `kb` è troppo corto per esserlo. */
@keyframes cerca-kb {
	0%   { transform: scale(1.04) translate3d(0, 0, 0); }
	100% { transform: scale(1.19) translate3d(-1.5%, -1.2%, 0); }
}

/* 🚨 Chi non vuole il movimento non lo riceve — e la regola vale **solo su
   queste due immagini**. `_disegno/marchio-animato.css` è stato ritirato il
   16/8 proprio per aver portato in giro un `*{animation-duration:.001s}`
   strappato dalla sua media query: copiato così avrebbe spento ogni
   animazione del sito, sempre, per tutti. → `_regole.css`, testata. */
@media (prefers-reduced-motion: reduce) {
	.cerca__foto {
		animation: none;
		will-change: auto;
		transform: scale(1.04);
	}
}

.cerca__velo {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--cerca-velo);
	pointer-events: none;
}


/* ==========================================================================
   4 · Il centro: occhiello, titolo, sommario
   ========================================================================== */

.cerca__centro {
	position: relative;
	z-index: 3;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 2.2vh, 26px);
	/* 🚨 P2.1, 4/9/2026 — NIENTE PIÙ GUTTER ORIZZONTALE QUI: si scrive una
	   volta sola, su `.cerca__colonna`. Prima questo padding-inline (16→40px,
	   responsive) e la larghezza calcolata di `.cerca__colonna` qui sotto
	   erano DUE gutter per lo stesso bordo: uno vero (questo) e uno che lo
	   annullava e ne rimetteva un altro fisso (2rem), per allinearsi alla
	   testata. Due gutter sovrapposti sono la formula fragile che Prometeo ha
	   trovato — dipendeva dal disinnesco del contenitore per tornare giusta,
	   e quando il disinnesco non vinceva (sopra) il conto sbagliava. */
	padding-block: clamp(24px, 4vh, 50px) clamp(28px, 4vh, 52px);
	text-align: center;
}

/* 🚨 I DUE BINARI DIVENTANO UNO — turno 12, ordine di Gabriele del 19/8.
   Il contenuto prende la larghezza della testata: `var(--colonna)` è lo
   stesso token di `.contenitore` (`radar.css` §2), e lo stesso `2rem` fisso
   che toglie lei. Non è più un valore ricostruito: `.cerca__centro` qui
   sopra non ha più un suo padding orizzontale, quindi il suo `100%` è la
   larghezza intera della sezione (disinnescata, → sopra) — la STESSA identica
   domanda che si fa `.contenitore`, con la STESSA formula.

   🚨 Riscritta il 4/9/2026, P2.1: prima c'era
   `min(calc(100% + 2 * clamp(16px, 3vw, 40px) - 2rem), var(--colonna))` — un
   gutter tolto e rimesso via calc, che valeva solo se il disinnesco del
   contenitore era attivo (sopra, unificato). Un solo gutter, scritto una
   volta, non ha più quella dipendenza nascosta: a 390 fa min(390-32,1920) =
   358px = esattamente il vecchio risultato quando il disinnesco vinceva,
   ma ora vince sempre, essendo una sola regola. Verificato: 1888/1408/736/343
   alle quattro larghezze del collaudo, uguale a prima. */
.cerca__colonna {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100% - 2rem, var(--colonna));
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 40px);
}

/*
 * S-HOME-1, 5/9/2026 — L'OCCHIELLO DIVENTA UNA PILLOLA CON PALLINO.
 *
 * Il filetto orizzontale del primo disegno lascia il posto al pallino con
 * il punto del secondo disegno (`RADAR.casa-redesign-5-9.html` §apertura:
 * «occhiello in pillola con pallino»). Il testo dentro non cambia — resta
 * il numero vero delle categorie, → `templates/cerca.php`.
 */
.cerca__occhiello {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 clamp(10px, 1.4vh, 16px);
	padding: 7px 16px 7px 12px;
	border: 1px solid var(--cerca-bordo);
	border-radius: 999px;
	font: 500 13px/1.2 var(--cerca-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cerca-su);
	background: var(--cerca-vetro);
}

.cerca__pallino {
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cerca-azione);
}

.cerca__titolo {
	max-width: 14em;
	margin: 0 auto clamp(10px, 1.4vh, 16px);
	font: 400 clamp(2.375rem, 4.4vw, 4.25rem)/1.02 var(--font-titolo);  /* 38 → 68 px */
	letter-spacing: -.02em;
	color: var(--cerca-su);
}

.cerca__titolo em {
	font-style: italic;
	color: var(--cerca-accento);
}

.cerca__sommario {
	max-width: 38em;
	margin: 0 auto clamp(18px, 2.4vh, 26px);
	font: 400 clamp(1.05rem, 1.15vw, 1.175rem)/1.6 var(--font);          /* 16,8 → 18,8 px */
	color: var(--cerca-su);
}

/* P2.1 PEZZO B, 4/9/2026 — due frasi sotto i 680px, una sola stampata alla
   volta (→ nota di testa in `templates/cerca.php`): `display:none` toglie
   anche dall'albero di accessibilità, quindi non si legge mai due volte. */
.cerca__sommario--corta { display: none; }

@media (max-width: 679px) {
	.cerca__sommario--intera { display: none; }
	.cerca__sommario--corta  { display: block; }
}

/* 5/9 sera, cancello S-RIMISURA-2: a 390 il bottone con la parola restava
   largo 225 px dentro una capsula da 326: sulla terza riga prende tutta la
   larghezza, come nel render del primo disegno a 390. */
@media (max-width: 679px) {
	.cerca__vai { width: 100%; }
}


/* ==========================================================================
   5 · La scatola di ricerca
   ========================================================================== */

/*
 * S-HOME-1, 5/9/2026 — LA CAPSULA TORNA STRETTA.
 *
 * `CONFRONTO-HOME.md` §1: il disegno è una capsula di ~700px, non una
 * scatola larga quanto la colonna (1.330px misurati sulla home costruita).
 * Il coordinatore, dopo il secondo disegno, ha stretto ancora: **640px**
 * (`DISEGNO-REDESIGN-5-9.md` §3.1, «capsula compatta ~640 px») — criterio
 * aggiornato di conseguenza in `_prove/esito-scala/HOME-DISEGNO-1.md`.
 */
.cerca__forma {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.cerca__scatola {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 700px  /* 5/9 sera: 640 tagliava «Tutte le categorie» col bottone a parola; il primo disegno misura ~700 */;
	margin-inline: auto;
	padding: 8px;
	border: 1px solid var(--cerca-bordo);
	border-radius: 16px;
	background: transparent;
}

.cerca__riga {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

.cerca__riga--campi { justify-content: center; }

.cerca__campo {
	flex: 1 1 170px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: var(--tocco, 44px);
	padding: 10px 15px;
	border-radius: 11px;
	background: var(--cerca-vetro);
	text-align: left;
	cursor: text;
}

.cerca__etichetta {
	font: 600 13px/1.2 var(--cerca-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cerca-su);
}

/* Il bersaglio vero è la `<label>` — 64px a 1440, 63 a 375 — perché un clic
   sull'etichetta arriva al controllo che avvolge. La scatola del controllo in
   sé sarebbe 23px: `min-height` la porta a 24, che è il minimo di WCAG 2.5.8
   anche per chi la misura da sola. Il conto sta nel rapporto F1. */
.cerca__valore {
	width: 100%;
	min-height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cerca-su);
	font: 600 1.1125rem/1.3 var(--font);   /* 17,8 px */
	outline: none;
	appearance: none;
}

/*
 * 🟠 TURNO 10, VERIFICA INDIPENDENTE — «un rettangolo pallido dentro il campo
 * DOVE, a 1440, assente a 390». `appearance: none` sopra spegne la
 * decorazione dell'elemento `<input>` in sé, ma NON gli pseudo-elementi
 * `-webkit-search-*` che Chrome disegna dentro un `type="search"` — restano
 * un pulsante di cancellazione e un bordo interno nativi, invisibili sulla
 * tastiera del telefono ma visibili su desktop dove il campo è più largo:
 * combacia con «parte a metà campo, arriva quasi al bordo destro» e con
 * «a 390 non c'è». ⚠ Diagnosi da codice, non da uno screenshot vero (non
 * disponibile in questa sessione): correzione difensiva e sicura — non
 * tocca niente che già funzioni — da confermare con `misura-dom.py`.
 */
.cerca__valore::-webkit-search-decoration,
.cerca__valore::-webkit-search-cancel-button,
.cerca__valore::-webkit-search-results-button,
.cerca__valore::-webkit-search-results-decoration {
	appearance: none;
	display: none;
}

/* Il segnaposto è testo, e va misurato come testo: `--cerca-su` pieno, non
   una sua sbiadita. `--su-vetro-soft` sopra il velo chiaro fa **2,64**. */
.cerca__valore::placeholder { color: var(--cerca-su); opacity: .72; }

.cerca__valore:focus-visible,
.cerca__campo:focus-within {
	outline: 3px solid var(--cerca-su);
	outline-offset: 2px;
}

.cerca__valore:focus-visible { outline: none; }

/* `appearance: none` toglie al `<select>` la sua freccia, e senza freccia i
   due campi sono identici: uno si scrive e l'altro si apre, e niente lo dice.
   La punta si ridisegna qui — due lati di un quadrato ruotato, quindi **CSS e
   non un'immagine**: nessuna richiesta a nessuno → INFORMATIVA §7. */
.cerca__campo--scelta { position: relative; cursor: pointer; }
.cerca__campo--scelta .cerca__valore { cursor: pointer; padding-right: 26px; }

.cerca__campo--scelta::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 18px;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}

/* Il menù a tendina lo disegna il sistema operativo, non noi: le sue voci
   vanno lasciate ai suoi colori, o su un tema si perdono. */
.cerca__valore option { color: CanvasText; background: Canvas; }

/*
 * S-HOME-1, 5/9/2026 — LA CTA DIVENTA TONDA.
 *
 * Il secondo disegno vuole «UN bottone d'azione tondo/pieno, nel nostro
 * colore azione, non arancio» (`DISEGNO-REDESIGN-5-9.md` §3.1). 64px resta
 * il diametro (era già l'altezza qui): sopra il minimo di casa `--cta`
 * 56px (`ossatura.css` §1). Il bordo non è decorazione — stesso motivo di
 * prima: il riempimento `--cerca-azione` contro il velo fa 2,88 in chiaro e
 * 2,08 in scuro, sotto il 3:1 che un componente pretende; col bordo il
 * margine arriva a 4,86 e 3,91.
 *
 * L'etichetta non sparisce: `.cerca__vai-testo` va fuori dallo schermo con
 * la stessa ricetta di `.cerca__casella` qui sotto (clip, non `display:
 * none`, per restare nell'albero di accessibilità); resta solo la freccia
 * a vista, e il bottone porta comunque `aria-label` come rete di sicurezza
 * per chi legge senza DOM (→ `templates/cerca.php`).
 */
/* 5/9/2026, coordinatore, dopo lo sguardo: il primo disegno di Gabriele ha il
   bottone con la PAROLA («Cerca sulla mappa →», verde, 246×64): il cerchio con
   la sola freccia veniva dal secondo disegno ed era ambiguo. Torna la parola. */
.cerca__vai {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 64px;
	padding: 0 1.5rem;
	border: 1px solid var(--cerca-bordo);
	border-radius: 16px;
	background: var(--cerca-azione);
	color: var(--cerca-su-azione);
	font: 600 1.05rem/1 var(--font);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .18s ease;
}

.cerca__vai-testo { display: inline; }

.cerca__vai-freccia {
	font: 400 1.35rem/1 var(--font);
}

.cerca__vai:hover { transform: translateY(-2px); }
.cerca__vai:focus-visible { outline: 3px solid var(--cerca-su); outline-offset: 3px; }

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


/* ==========================================================================
   6 · Le sei pillole e «Tutte e sei»

   🚨 **44px, e questo numero chiude una voce aperta.** Il turno 6 ha lasciato
   «le pillole a 37px»: quelle sono `.pillola` di `radar.css`, che ha
   `padding: .4rem .9rem` su un carattere da 14px. Qui il disegno dice
   `min-height: 44px` (`cerca.html`, sette pillole su sette) e 44px sono.
   ========================================================================== */

/*
 * S-HOME-1, 5/9/2026 — UNA RIGA SOLA, CENTRATA, STACCATA DALLA CAPSULA.
 *
 * P2.8 (i due gruppi «Immobili»/«Servizi», il filetto verticale) è
 * annullata da `CONFRONTO-HOME.md` §3 — non era il disegno, era un'altra
 * strada. Le regole `.cerca__gruppo*`/`.cerca__filetto` sono tolte con lei:
 * il markup di `templates/cerca.php` non le stampa più.
 */
/*
 * Larghezza: il disegno tiene la fila delle pillole un po' più larga della
 * capsula (806px contro 703 — rapporto ~1,15), non quanto la colonna
 * intera. 740px tiene lo stesso rapporto con la capsula stretta a 640
 * (`.cerca__scatola`, sopra): misurato, non a occhio, in
 * `_prove/esito-scala/HOME-DISEGNO-1.md`.
 */
.cerca__riga--pillole {
	justify-content: center;
	width: 100%;
	max-width: 940px;
	margin: clamp(12px, 2vh, 18px) auto 0;
}

.cerca__pillole {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Le pillole diventano scuse (`--inchiostro`), come nel secondo disegno —
 * «i bottoni di categoria dentro la capsula possono essere scuri
 * (--inchiostro)» (`DISEGNO-REDESIGN-5-9.md` §3.1): qui restano fuori dalla
 * capsula (→ nota sopra), ma prendono la stessa veste scura. Il quadretto
 * colorato della categoria (`.cerca__segno`) resta identico: è il secondo
 * canale di riconoscimento (WCAG 1.4.1), non decorazione.
 */
.cerca__pillola {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tocco, 44px);
	padding: 0 16px 0 8px;
	border: 1px solid var(--inchiostro);
	border-radius: 999px;
	background: var(--inchiostro);
	color: var(--su-inchiostro, #F7F2EB);
	font: 500 .9375rem/1.2 var(--font);   /* 15 px */
	cursor: pointer;
	transition: transform .16s ease;
}

.cerca__pillola--tutte {
	background: transparent;
	border: 1px dashed var(--cerca-bordo);
	color: var(--cerca-su);
	padding: 0 16px;
}

.cerca__pillola:hover { transform: translateY(-2px); }

/* La casella si ritaglia, non si sbiadisce: `opacity: 0` toglie l'elemento
   dall'albero di accessibilità di Chrome — verificato sul banco l'8/8/2026,
   → `radar.css` §pillole. */
.cerca__casella {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.cerca__pillola:has(.cerca__casella:checked) {
	border-color: var(--cerca-su);
	box-shadow: inset 0 0 0 1px var(--cerca-su);
	font-weight: 700;
}

.cerca__pillola:has(.cerca__casella:focus-visible) {
	outline: 3px solid var(--cerca-su);
	outline-offset: 2px;
}

/* La pastiglia colorata con la lettera.

   Tinta, lettera, colore della lettera e misura arrivano **in linea** da
   `radar-core/data/pin.php` attraverso `radar_mappa_categorie()`: qui non c'è
   nessun esadecimale e nessun pixel di quella tabella. Le due coppie —
   chiaro e scuro — arrivano tutte e due, e a scegliere è `data-tema-eff`,
   come per tutto il resto della hero.

   Qui sotto c'è solo *com'è fatta* una forma con quel nome, che è l'altra
   metà della divisione descritta da `pin.php`. Sono le sei forme di
   `token.css` §LE SEI FORME DEI PIN — «la cosa che vale di più».

   WCAG 1.4.1: forma e lettera sono il secondo e il terzo canale dopo il
   colore. `aria-hidden` sulla pastiglia perché il nome della categoria è
   scritto per esteso accanto: farlo leggere due volte — «A Affitto» — è
   rumore, non accessibilità. → `inc/mappa.php` §pastiglia, stessa scelta. */
.cerca__segno {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width:  calc(var(--cerca-pl, 30px) * var(--cerca-scala));
	height: calc(var(--cerca-pa, 30px) * var(--cerca-scala));
	background: var(--cerca-tinta-scuro, var(--cerca-tinta, var(--cerca-su)));
	color: var(--cerca-su-pin-scuro, var(--cerca-su-pin, var(--inchiostro)));
	font: 700 .8125rem/1 var(--font);   /* 13 px */
}

:root[data-tema-eff="chiaro"] .cerca__segno {
	background: var(--cerca-tinta, var(--cerca-su));
	color: var(--cerca-su-pin, var(--inchiostro));
}

.cerca__segno[data-forma="cerchio"]   { border-radius: 50%; }
.cerca__segno[data-forma="quadrato"]  { border-radius: 6px; }
.cerca__segno[data-forma="rombo"]     { border-radius: 5px; transform: rotate(45deg); }
.cerca__segno[data-forma="rombo"] > * { display: block; transform: rotate(-45deg); }
.cerca__segno[data-forma="esagono"]   { clip-path: polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%); }
.cerca__segno[data-forma="pastiglia"] { border-radius: 999px; }
.cerca__segno[data-forma="goccia"]    { border-radius: 13px 5px 13px 5px; }

/* «Tutte e sei» è tornato il 5/9/2026 (S-HOME-1): il disegno lo vuole
   (`CONFRONTO-HOME.md` §3), e con JS deseleziona le sei caselle invece di
   limitarsi a ripetere «nessuna spuntata = tutte» — → `templates/cerca.php`. */


/* ==========================================================================
   7 · La riga «live», e la riga che dice perché un numero manca
   ========================================================================== */

/*
 * 🚨 RADAR-4, 6/9/2026 — LA CAPSULA DEL DISEGNO DEL 9/8, RIMESSA.
 *
 * Il 5/9 S-HOME-1 aveva sostituito la capsula con una riga piccola, presa
 * dal SECONDO disegno (`DISEGNO-REDESIGN-5-9.md` §3.1). Gabriele il 6/9
 * alle 16:35 ha detto quale disegno comanda: quello del 9/8. Lì i numeri
 * stanno in una **pillola bordata** (`border-radius: 999px`, bordo
 * `--vetro-bordo`), tre celle separate da due filetti verticali alti 24px,
 * la cifra in **serif grande** e l'etichetta a 15px accanto, allineate
 * sulla linea di base.
 *
 * Misure prese dal DOM del disegno (`_disegno/sezioni/leggibili/cerca.txt`):
 * gap `clamp(14px, 2.2vw, 30px)`, padding `clamp(12px,1.5vw,17px)
 * clamp(18px,2.4vw,30px)`, filetto `1px × 24px`, etichetta `400 15px/1.35`,
 * cella `display:flex; align-items:baseline; gap:9px`.
 */
.cerca__capsula {
	/* Nel disegno le tre celle stanno su UNA riga: senza `max-content` il
	   `<p>` prende la larghezza di riga del blocco di testo che lo precede
	   (misurato: 666px contro i ~760 che gli servono) e va a capo da solo. */
	width: max-content;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2.2vw, 30px);
	margin: 0;
	padding: clamp(12px, 1.5vw, 17px) clamp(18px, 2.4vw, 30px);
	border: 1px solid var(--cerca-bordo);
	border-radius: 999px;
	color: var(--cerca-su);
}

.cerca__conto {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0;
}

.cerca__numero {
	font: 400 clamp(1.5rem, 2.1vw, 2rem)/1 var(--font-titolo);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -.01em;
	color: var(--cerca-su);
}

.cerca__etichetta-conto {
	font: 400 .9375rem/1.35 var(--font);
	color: var(--cerca-su);
}

/* Il filetto fra una cella e l'altra: nel disegno è un rettangolo di 1px,
   non un carattere — un `·` non tiene l'altezza quando la cifra cresce. */
.cerca__divisorio {
	flex: 0 0 auto;
	width: 1px;
	height: 24px;
	background: var(--cerca-bordo);
}

/* 👉 Un blocco assente dice perché. Qui ci finisce ogni numero che il
   database dà a zero: la riga non si stampa, e questa riga spiega quale e
   per quale ragione. */
.cerca__nota {
	max-width: 42em;
	margin: 0;
	font: 400 .9375rem/1.5 var(--font);
	color: var(--cerca-su);
}

/* Il collegamento all'articolo 22 c. 4-bis. Non si stampa a vuoto: lo stampa
   `cerca.php` solo se la pagina di destinazione esiste davvero. */
.cerca__legge {
	color: var(--cerca-su);
	font: 500 .9375rem/1.5 var(--font);
	text-underline-offset: 3px;
}

.cerca__legge:focus-visible { outline: 3px solid var(--cerca-su); outline-offset: 3px; }

/* 🚨 9/9/2026 — «PUBBLICA UN ANNUNCIO» SOTTO IL MODULO DI RICERCA, visibile
   senza scorrere, connesso o no (→ nota in `templates/cerca.php`; NON
   sostituisce la voce omonima di `.azioni` più sotto in pagina).

   🔴 9/9/2026 sera, rilievo del coordinatore dopo aver aperto le catture:
   col bordo sottile e neutro di prima (`--cerca-bordo`, lo stesso di
   `.cerca__pillola--tutte`) leggeva come la SETTIMA voce della fila di
   filtri, non come un tasto — Gabriele aveva chiesto un tasto (voce 61 di
   DETTO-DA-GABRIELE.md). Tre correzioni insieme, non una sola:

     1. RIGA SUA: margine sopra portato da un soffio (8px) a una spaziatura
        vera (`clamp(24px, 3.5vh, 36px)`, l'ordine di grandezza delle altre
        pause di questa colonna, es. `.cerca__sommario`), staccata dalla
        fila delle pillole invece di seguirla in coda.
     2. PESO DIVERSO DALLA PILLOLA-FILTRO: non più trasparente col bordo
        sottile neutro (quella veste resta di `.cerca__pillola--tutte`, ed
        è giusto che uno «svuota filtri» sia leggero). Qui: fondo
        `--cerca-vetro` (la stessa veste opaca dei campi di ricerca, non
        dei filtri), bordo 2px nel colore del marchio (`--cerca-accento` —
        la tinta di `--marchio-fascia` già portata a contrasto per questa
        foto, → riquadro di testa) e testo più pesante (700, non 600).
        NON il verde di `--cerca-azione`: quello resta SOLO di «Cerca sulla
        mappa» (ordine di Gabriele: «non si tocca e non si imita»).
     3. UN «+» DAVANTI, non più una freccia in coda: dice «aggiungi una cosa
        tua», non «apri/scorri» come le frecce dei filtri e dei link a
        elenco (`.azioni__freccia`, `.cerca__vai-freccia`).

   Il contrasto è misurato sul caso peggiore VERO, non su uno scatto: script
   `_prove/lotto-b/contrasto-secondaria.py` (compone lo stesso filtro
   `--cerca-foto` + lo stesso `--cerca-velo` del tema sopra ognuna delle
   foto reali dell'eroe — giorno-1/2/3 e i due segnaposto — poi il mio vetro,
   bordo e testo sopra). Peggior pixel su tutte le foto, misurato il
   9/9/2026:
     bordo `--cerca-accento` sul MIO vetro:  9,30 (chiaro) · 11,59 (scuro) — soglia 3,0
     testo `--cerca-su` sul MIO vetro:      12,69 (chiaro) · 16,65 (scuro) — soglia 4,5
   Margini ampi in tutti e due i temi, su tutte le foto disponibili oggi:
   il vetro toglie la varianza della foto sotto (è quasi lo stesso colore
   del velo, → script, `vetro/velo≈1,0`: è un fondo che appiattisce, non un
   contrasto che dipende da cosa c'è nella foto).

   🚨 N2, 10/9/2026 — VOCE 69 DI `DETTO-DA-GABRIELE.md`: «SECONDARIO FORTE,
   NON PRIMARIO».

   Il markup si è spostato (→ `templates/cerca.php`): non più dentro
   `.cerca__colonna`, dopo le pillole, ma fratello suo, nello stesso
   contenitore di `.cerca__capsula` (`.cerca__centro`, flex column, `gap:
   clamp(16px, 2.2vh, 26px)`) — è lì, al posto della capsula, che sulla
   home si libera spazio. Per questo il margine sopra non è più suo
   (`clamp(24px, 3.5vh, 36px)`, pensato per staccarlo dalle pillole DENTRO
   la colonna): lo spazio dal resto lo dà il `gap` del genitore, uguale a
   quello con cui prima ci stava la capsula, e basta.

   «Bordo e peso maggiori»: bordo 2px → 3px, testo 700 → 800, tocco 44px →
   52px, padding orizzontale 22px → 28px — tutti e quattro più grandi di
   prima, nessuno grande quanto `.cerca__vai` (64px, → sotto: «resta sotto
   "Cerca sulla mappa"»). Colore INVARIATO — `--cerca-accento` per il
   bordo, `--cerca-vetro` per il fondo, `--cerca-su` per il testo, mai
   `--cerca-azione`: i contrasti misurati qui sopra dipendono dal colore,
   non dallo spessore o dal padding, e restano validi tali e quali.

   🚨 N2-bis, 10/9/2026, GIRO 2 — IL MARKUP SI SPOSTA DI UN LIVELLO, NON SI
   SMONTA NIENTE.
   Il primo tentativo di N2-bis rendeva `.cerca__colonna` e `.cerca__forma`
   `display: contents` per far funzionare un `order` fra il tasto e le
   pillole: RESPINTO dal coordinatore, aperta la cattura — quelle due
   scatole non portavano solo flex, portavano anche il fondo che regge il
   contrasto, il gutter laterale e la colonna dei due campi (→ nota di
   fondo in `templates/cerca.php`, dove sta la correzione vera). Qui si
   torna al valore di prima con una sola differenza: il blocco non è più
   fratello di `.cerca__colonna` dentro `.cerca__centro` (`gap:
   clamp(16px, 2.2vh, 26px)`, → sopra), è sceso dentro `<form
   class="cerca__forma">`, fratello vero di `.cerca__scatola` e
   `.cerca__riga--pillole` — è per questo che serviva spostarlo: le
   pillole non possono uscire dal `<form>` (un solo invio, → nota di
   `cerca.php` sulla scatola), quindi è il tasto a scendere al loro
   livello, non viceversa. Il gap del genitore non lo raggiunge più:
   questo margine lo sostituisce, stesso valore, perché a schermo largo
   l'immagine deve restare quella di sempre — verificato, non supposto,
   → misure del cancello. */
.cerca__secondaria-riga {
	margin: clamp(16px, 2.2vh, 26px) 0 0;
}

.cerca__secondaria {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 28px;
	border: 3px solid var(--cerca-accento);
	border-radius: var(--raggio-pillola, 999px);
	background: var(--cerca-vetro);
	color: var(--cerca-su);
	font: 800 1rem/1 var(--font);
	text-decoration: none;
	white-space: nowrap;
	transition: transform .16s ease, background .18s ease;
}

.cerca__secondaria:hover,
.cerca__secondaria:focus-visible { transform: translateY(-2px); }

.cerca__secondaria:focus-visible {
	outline: 3px solid var(--cerca-su);
	outline-offset: 3px;
}

/* Il «+»: disegnato in CSS come `.menu-attiva__segno` disegna l'hamburger,
   niente glifo di font da tenere allineato fra temi e famiglie tipografiche. */
.cerca__secondaria-segno {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.cerca__secondaria-segno::before,
.cerca__secondaria-segno::after {
	content: "";
	position: absolute;
	background: var(--cerca-accento);
}

.cerca__secondaria-segno::before { top: 6px; left: 0; width: 14px; height: 2px; }
.cerca__secondaria-segno::after  { top: 0; left: 6px; width: 2px; height: 14px; }

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


/* ==========================================================================
   8 · Il telefono — sotto i 900px

   La soglia è quella della centralina del disegno (`_regole.css` §1).
   ⚠ Dei sei interruttori `data-m*` `cerca.html` **non ne usa nemmeno uno**:
   contati il 16/8/2026 sul suo markup, zero occorrenze. Le sei regole di
   `_regole.css` §1 qui non servono, e copiarle sarebbe peso morto.
   ========================================================================== */

@media (max-width: 900px) {
	/*
	 * S-HOME-1, 5/9/2026 — il bottone tondo non forza più la riga intera:
	 * a 64px di diametro è già sopra il minimo di tocco, e il disegno lo
	 * vuole rotondo anche stretto. `.cerca__riga--campi` (flex-wrap, sopra)
	 * lo manda comunque a capo da solo quando Dove/Cosa-cerchi non ci
	 * stanno più a fianco — è così che a 390 la capsula fa tre righe
	 * (criterio del referto).
	 */

	/* Sotto i 900 la capsula si impila: tre celle in colonna, i filetti
	   spariscono (un filetto verticale fra due righe non separa niente) e
	   la pillola smette di essere una pillola — a 999px di raggio su un
	   blocco alto tre righe i bordi si incurvano dentro il testo. */
	.cerca__capsula {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		border-radius: 18px;
		text-align: center;
	}

	.cerca__divisorio { display: none; }

	.cerca__nota { text-align: left; }
}

/*
 * 🔴 N5, 10/9/2026 — L'`order` È SPARITO: IL DOM SALE, NON PIÙ IL CSS.
 *
 * Codex ha trovato il difetto dopo due cancelli verdi: `order` qui sotto
 * cambiava l'ordine VISIVO (tasto fra scatola e pillole, sotto i 600px) ma
 * non quello di TABULAZIONE, che restava quello del documento — scatola,
 * pillole, tasto. Chi naviga da tastiera scendeva alle pillole e solo dopo
 * risaliva al tasto; uno screen reader annunciava le pillole prima del
 * link. WCAG 1.3.2 (sequenza significativa), e di riflesso 2.4.3.
 *
 * 👉 L'unica riparazione giusta: il DOM adesso coincide col visivo a ogni
 * larghezza. Il markup del tasto (`.cerca__secondaria-riga`) è salito
 * PRIMA di `.cerca__riga--pillole` in `templates/cerca.php` (fratello suo
 * e di `.cerca__scatola`, stesso genitore di sempre) — niente più `order`
 * da scrivere qui, in nessuna delle due regole: sotto i 600px il tasto è
 * secondo nel documento quanto lo è a schermo, senza bisogno di CSS che
 * lo sposti. A schermo largo (1440) questo fa salire il tasto fra la
 * scatola e le pillole — accettato (voce 69 di Gabriele): resta comunque
 * SOTTO «Cerca sulla mappa» e più piccolo (64px contro 52), senza il suo
 * colore (`--cerca-azione` non è mai usato qui, → regole sopra).
 *
 * Resta solo lo scarto verticale dal blocco sopra, non più un `order`:
 * sotto i 600px il margine si stringe rispetto al `clamp(16px, 2.2vh,
 * 26px)` di schermo largo (→ regola sopra), perché lì il tasto stacca
 * dalla scatola invece che dalle pillole.
 */
@media (max-width: 600px) {
	.cerca__secondaria-riga {
		margin-top: clamp(12px, 2vh, 18px);
	}
}

@media (max-width: 560px) {
	/* Sotto i 560 il titolo del disegno (38px su 14em) manda «veri.» da solo
	   sull'ultima riga. 34px lo tiene insieme. */
	.cerca__titolo { font-size: 2.125rem; }
}

/* ==========================================================================
   9 · LA BARRA E LA RIGA DI RICERCA SULLA MAPPA — turno 10

   Due pezzi nuovi, e nessuno dei due sta sopra la foto della hero: vivono su
   `templates/mappa.php`, accodati da `radar_mappa_risorse()` dietro lo stesso
   interruttore di tutto il resto di quella pagina (`radar_mappa_e_la_pagina()`).
   Per questo NON usano i token `--cerca-*` — quelli sono misurati sopra la
   foto composita della hero (vedi il riquadro in testa a questo file) e
   sarebbe un contrasto inventato usarli su un fondo che non è quello. Qui
   sotto solo i token generali di `radar.css` §1, già verificati in chiaro e
   in scuro.

   Il campo `.mappa__campo-dove` sta nello stesso `<form>` delle pillole
   (`templates/mappa.php`, `mappa__comandi`): un solo invio, un solo giro di
   rete, come chiede MAPPA.md — non un secondo modulo.

   🚨 TURNO 10, VERIFICA INDIPENDENTE — su `templates/mappa.php` questo
   foglio pesava 28.148 byte scaricati e ne usava 2.983: il 90% morto, sulla
   pagina più pesante del sito. `radar_mappa_risorse()` non accoda più
   l'intero file lì: legge SOLO il testo fra i due segnaposto qui sotto e lo
   accoda inline (`wp_add_inline_style()`). Fonte unica comunque — questa —
   quindi non spostare né duplicare le regole di questa sezione altrove, e non
   spostare i segnaposto senza aggiornare la regex che li legge.
   ========================================================================== */

/* === S2-MAPPA-INIZIO === */

/*
 * 🔴 TURNO 10, VERIFICA INDIPENDENTE (guardata, non solo misurata) — il campo
 * partiva da x=0, appiccicato al bordo della finestra. `.mappa__comandi` (il
 * `<form>` che lo contiene, `radar.css`, letto non toccato) non porta un
 * padding suo: ogni figlio si apre il proprio gutter da sé — `.pillole` lo fa
 * con `padding: .6rem var(--passo)`, `.foglio__testa` lo stesso — ed è
 * esattamente il gutter che mancava qui: misurato via DOM, non a occhio,
 * `.pillole .pillola` e `.risultato__titolo` partono entrambi a 16px dal
 * bordo (`var(--passo)`), il campo «dove» partiva a 0. Stessa misura dei
 * vicini, non una nuova: un contenitore in più, non un valore inventato.
 */
.mappa__campo-dove {
	display: block;
	width: min(22rem, 100%);
	padding: 0 var(--passo);
	margin: .6rem 0 .5rem;
}

.mappa__valore-dove {
	/* 🚨 Misurato col cancello visivo il 19/8/2026: con solo `padding` il
	   bersaglio usciva 41px, sotto i 44px (WCAG 2.5.5) — la stessa soglia che
	   `.pillole .pillola` già rispetta in `radar.css`. `min-height` lo
	   garantisce indipendentemente dai metrici del font. */
	min-height: 44px;
	width: 100%;
	box-sizing: border-box;
	padding: .55rem .75rem;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
	color: var(--testo);
	font: 400 .9375rem/1.4 var(--font);
}

.mappa__valore-dove::placeholder { color: var(--testo-2); }

.mappa__valore-dove:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 1px;
}

/*
 * 🟠 TURNO 10, VERIFICA INDIPENDENTE — un rettangolo più chiaro dentro il
 * campo, a 1440. Diagnosi via DOM (niente sfondo o pseudo-elemento
 * indesiderato su `.mappa__valore-dove` — `background` è già
 * `var(--superficie)` su tutta la casella): il sospetto più concreto è la
 * decorazione NATIVA di Chrome/WebKit per `input[type="search"]`, che non è
 * coperta dal semplice `appearance: none` sull'input — serve spegnere anche
 * gli pseudo-elementi `-webkit-search-*`, o Chrome disegna la sua «X» di
 * cancellazione e il suo bordo interno sopra lo stile dichiarato qui.
 * ⚠ Non potendo aprire uno screenshot vero in questa sessione, è una
 * correzione difensiva, non una certezza confermata a occhio: sicura da
 * applicare (non toglie né sposta niente che già funzioni), ma da
 * riguardare con `misura-dom.py` prima di darla per chiusa.
 */
.mappa__valore-dove::-webkit-search-decoration,
.mappa__valore-dove::-webkit-search-cancel-button,
.mappa__valore-dove::-webkit-search-results-button,
.mappa__valore-dove::-webkit-search-results-decoration {
	appearance: none;
	display: none;
}

/*
 * La riga «Cercavi…?» / la conferma / «niente si avvicina» / «niente qui,
 * guarda sopra» / «testo scartato». Un bordo a sinistra invece di uno
 * sfondo pieno: su cinque stati insieme uno sfondo saturo per ciascuno
 * sarebbe la stessa regola dei sei pin (un colore = un'informazione) usata
 * per qualcosa che non è mai stato disegnato — qui basta il minimo che
 * serve a farla notare senza inventare una palette. Possono comparire
 * INSIEME (`Radar_Suggerimenti` + il conteggio zero non si escludono), quindi
 * `.mappa__ricerca-esito` porta più di una `.mappa__ricerca-riga`: il
 * margine sta sulla riga, non sul contenitore, per non raddoppiare lo spazio
 * fra due righe vicine.
 */
.mappa__ricerca-esito {
	padding: 0 var(--fascia-x);
	margin: 0 0 .5rem;
}

.mappa__ricerca-riga {
	margin: 0 0 .5rem;
	max-width: 42em;
	padding: .5rem .75rem;
	border-left: 3px solid var(--testo-2);
	background: var(--superficie-alt);
	border-radius: 0 var(--raggio) var(--raggio) 0;
	font: 400 .9375rem/1.5 var(--font);
	color: var(--testo);
}

.mappa__ricerca-riga:last-child { margin-bottom: 0; }

.mappa__ricerca-riga a {
	color: var(--testo);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* «Non trovo niente»: il tono resta neutro, non è un errore — il brief lo
   vieta esplicitamente («non è un errore e non è una pagina vuota»). */
.mappa__ricerca-riga--niente { border-left-color: var(--testo-2); }

/* «Cercavi…?»: match esatto, i risultati sono già quelli giusti — il bordo
   usa lo stesso verde del pulsante primario, la stessa tinta con cui il
   tema dice «azione disponibile». */
.mappa__ricerca-riga--vicini { border-left-color: var(--azione); }

/* La conferma («è quello che cercavi?») usa il semantico dell'attenzione:
   non è un errore, ma è una scelta fatta AL POSTO dell'utente e la riga
   deve distinguersi dalle altre due a colpo d'occhio, non solo per il testo. */
.mappa__ricerca-riga--conferma { border-left-color: var(--attenzione); }

/* TURNO 10, «il ramo muto» — il luogo esiste, i risultati sono zero: non è
   un errore (`--testo-2`, stesso tono di «niente si avvicina») ma porta un
   collegamento vero, quindi lo stile del link sopra vale anche qui. */
.mappa__ricerca-riga--vuoto { border-left-color: var(--testo-2); }

/* TURNO 10, verifica indipendente — il testo scartato da sanitize_text_field()
   (0 XSS, ma silenzioso senza questa riga). Stesso semantico dell'errore:
   qui la barra è tornata vuota senza che l'utente l'abbia svuotata lui. */
.mappa__ricerca-riga--scartato { border-left-color: var(--errore); }

@media (max-width: 900px) {
	.mappa__campo-dove { width: 100%; }
}

/* === S2-MAPPA-FINE === */
/* ==========================================================================
   P2.1 PEZZO B, 4/9/2026 — SOTTO LA PIEGA
   Tre sezioni sotto la hero, sulla stessa pagina (→ nota di testa): sei
   categorie, «come funziona», il perimetro. `templates/cerca.php` le stampa
   dentro `#contenuto.contenitore`, che su questa pagina è disinnescato
   (§1 qui sopra) — quindi ognuna riprende il centraggio con `.contenitore`
   (`radar.css` §impianto), lo stesso token `--colonna` della testata: non
   una misura nuova.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2 · LE SEI CATEGORIE — le regole della vecchia griglia 3×2 sono state
   TOLTE il 7/9/2026 (RADAR-4), non commentate: la zona è diventata il
   carosello a foto piena del disegno del 9/8, che si veste da
   `assets/css/home-categorie.css` con classi sue (`.carosello__*`).
   Verificato prima di togliere: `.categorie`, `.categorie__griglia` e
   `.categoria*` non compaiono più in nessun PHP né JS del tema, dei plugin
   o di radar-core. Erano 186 righe, e questo foglio viene **messo in linea
   dentro `/mappa/`** (`inc/mappa.php`): peso morto sulla pagina più pesante
   del sito.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   2-BIS · LA MAPPA IN HOME, VIVA — S-MAPPA-HOME, 6/9/2026.
   Revoca S-HOME-2 (5/9, immagine `.webp` ferma): ordine diretto di Gabriele,
   con cattura. Una card sola: la tela di MapLibre (caricata pigra, →
   `templates/cerca.php` zona 3 e `assets/js/mappa-home.js`), un bottone di
   ripiego sempre presente che porta a `/mappa/`. Niente più pillole in
   vetro sopra un'immagine: qui sotto c'è una mappa vera da toccare, non una
   foto da guardare.
   -------------------------------------------------------------------------- */

.mappa-home {
	padding-block: clamp(48px, 7vh, 88px);
}

.mappa-home__card {
	position: relative;
	overflow: hidden;
	/* Stesso token di prima (→ S-RIMISURA-3, RIMISURA-3.md §6.3): non un
	   secondo raggio inventato per questa card. */
	border-radius: var(--raggio-pannello, 14px);
	border: 1px solid var(--bordo);
	background: var(--superficie-alt);
	aspect-ratio: 4 / 3;
}

@media (min-width: 680px) {
	.mappa-home__card { aspect-ratio: 2 / 1; }
}

/* La tela: vuota (colore del fondo) finché `mappa-home.js` non è arrivato —
   niente CLS, niente byte in più prima che l'osservatore la svegli. */
.mappa-home__tela {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Il bottone di ripiego: sempre nel DOM (→ MAPPA.md, la stessa regola di
   `/mappa/` — «funziona anche senza JavaScript»), sopra la tela in basso a
   sinistra — mai sopra i comandi +/- (in alto a sinistra) né sopra
   l'attribuzione (in basso a destra, di MapLibre). Un velo dietro il testo:
   la carta sotto non è mai un colore fisso, e senza velo il contrasto non è
   garantito su ogni stile. */
.mappa-home__apri {
	position: absolute;
	left: clamp(12px, 2vw, 20px);
	bottom: clamp(12px, 2vw, 20px);
	z-index: 1;
	background: rgba(23, 17, 14, .78);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(247, 242, 235, .3);
	color: #F7F2EB;
}

.mappa-home__apri:hover,
.mappa-home__apri:focus-visible {
	background: rgba(23, 17, 14, .92);
}

/* I comandi +/- di MapLibre: 44px, il bersaglio minimo di questo progetto
   (→ interfaccia.md), non i 29px di serie della libreria. Scoperto SOLO a
   `.mappa-home`: `/mappa/` (mappa.css, di un'altra squadra) non si tocca. */
.mappa-home .maplibregl-ctrl-group button {
	width: 44px;
	height: 44px;
}

.mappa-home .maplibregl-ctrl-top-left {
	top: clamp(8px, 1.5vw, 14px);
	left: clamp(8px, 1.5vw, 14px);
}

/* L'attribuzione di MapLibre resta leggibile sopra qualunque stile. */
.mappa-home .maplibregl-ctrl-attrib {
	background: rgba(247, 242, 235, .82);
	border-radius: 6px 0 0 0;
}

:root[data-tema-eff="scuro"] .mappa-home .maplibregl-ctrl-attrib {
	background: rgba(23, 17, 14, .82);
}

:root[data-tema-eff="scuro"] .mappa-home .maplibregl-ctrl-attrib a {
	color: #F7F2EB;
}

/* --------------------------------------------------------------------------
   3 · COME FUNZIONA
   Tre colonne a 1440, in pila a 390 — stessa soglia di sopra.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   🚨 7/9/2026 — LE FASCE DI COLORE FRA LE SEZIONI.

   Ordine di Gabriele: *«nelle sezioni devi giocare un po' con i colori, per
   creare delle separazioni»*.

   Il fatto misurato: delle otto sezioni della home **due sole** avevano un
   fondo proprio (`cerca` quasi bianca, `categorie` quasi nera). Le altre sei
   erano trasparenti, cioè tutte sullo stesso avorio: fra la mappa, i passi,
   la fiducia, gli artigiani, l'annuncio e i partner **non c'era nessuno
   stacco** — milleseicento pixel di pagina senza un confine.

   👉 Un ritmo, non una zebratura: chiaro · SCURO · chiaro · **tinta** ·
   chiaro · **tinta** · chiaro · **tinta**. Le tre fasce tinte sono i passi,
   gli artigiani e i partner. Il filetto sopra e sotto rende il passaggio
   netto: due tinte vicine senza bordo si impastano.

   ⚠ `--tinta-fascia` è un token a sé (`radar.css`) e **non**
   `var(--superficie-alt)`:
   dentro la fascia i pezzi che usavano `--superficie-alt` salgono a
   `--superficie`, e un token che rimanda a un token riscritto sotto di sé
   girerebbe a vuoto. I due pezzi sono `.passi__cerchio` (qui sotto) e
   `.partner__perimetro` (`home-partner.css`): su fondo uguale sparirebbero,
   ed è lo stesso avvertimento già scritto il 4/9 per il cerchio.
   -------------------------------------------------------------------------- */
.fascia-tinta {
	position: relative;
	background: var(--tinta-fascia);
	border-block: 1px solid var(--bordo);
}

/* Il filo. Un segmento corto color marchio appoggiato sul bordo alto della
   fascia: dice che il cambio di tinta è voluto, non un caso. Codex (8/9):
   «evita onde SVG, maschere e separatori ornamentali — una linea corta
   decentrata rende il cambio intenzionale». Costo: zero animazioni, zero
   livelli. È lo stesso segno dell'occhiello dei partner e dell'intestazione
   del nastro nel piede: tre posti, un segno solo.
   ⚠ Sempre a **sinistra**, dove comincia la lettura. Codex proponeva di
   alternare il lato con `:nth-of-type(even)`: provato, e non alterna niente
   — le tre fasce sono la quarta, la sesta e l'ottava `<section>` della
   home, quindi tutte pari, e il filo finiva a destra su tutte e tre. Un
   codice che dice «alterna» e non alterna è peggio di uno che non ci prova:
   il giorno che qualcuno aggiunge una sezione, il disegno cambia da solo
   senza che nessuno l'abbia deciso.
   ⚠ E il colore non si alterna mai: il saturo resta una spesa contata. */
.fascia-tinta::before {
	content: "";
	position: absolute;
	top: -1px;
	/* Allineato al bordo sinistro di `.contenitore`, che è
	   `min(100% - 2rem, var(--colonna))` centrato: lo stesso calcolo, non
	   un numero copiato che un giorno smette di combaciare. */
	left: max(1rem, calc((100% - var(--colonna)) / 2));
	width: clamp(48px, 7vw, 96px);
	height: 2px;
	background: var(--marchio);
}


.fascia-tinta .passi__cerchio {
	background: var(--tinta-fascia-sopra);
}

.passi {
	/* Rifinitura del coordinatore, 4/9/2026: 96px fissi sopra e sotto (non
	   un `clamp`). Il fondo ora è quello della fascia (sopra). */
	padding-block: 96px;
}

/* Il titolo che mancava, e la riga sotto. → il riquadro in `templates/cerca.php`
   sopra la sezione: senza, si passava dall'h2 della mappa ai tre h3 dei passi. */
.passi__titolo-sezione {
	margin: 0 0 6px;
	font: 400 clamp(1.75rem, 3.2vw, 2.5rem)/1.2 var(--font-titolo);
	color: var(--testo);
}

.passi__sommario {
	margin: 0 0 clamp(28px, 4vh, 44px);
	font-size: 1.0625rem;
	color: var(--testo-2);
}

.passi__lista {
	/* I passi si contano. È già un `<ol>`: il numero lo mette il contatore,
	   senza aggiungere un solo elemento al markup. Senza, i tre riquadri si
	   leggevano come tre cose alternative invece che come una sequenza. */
	counter-reset: passo;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 679px) {
	.passi__lista { grid-template-columns: 1fr; gap: 28px; }
}

.passi__passo {
	counter-increment: passo;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* Il cerchio: rifinitura del coordinatore — l'icona non galleggiava più
   sola sopra il titolo, adesso sta dentro un cerchio da 56px in
   `--superficie-alt` (il fondo che prima aveva la sezione, → sopra). */
.passi__cerchio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 6px;
	background: var(--superficie-alt);
	border-radius: 50%;
}

.passi__segno {
	width: 32px;
	height: 32px;
	color: var(--testo);
}

.passi__titolo {
	margin: 0;
	font: 400 1.5rem/1.3 var(--font-titolo);
	color: var(--testo);
}

.passi__titolo::before {
	content: counter(passo) ". ";
	color: var(--testo-2);
	font-variant-numeric: tabular-nums;
}

.passi__testo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--testo-2);
}


/* --------------------------------------------------------------------------
   0-bis · LA TESTATA SULLA FOTO — 7/9/2026.

   Nel disegno la testata sta **dentro** l'apertura, sopra la foto, senza fondo
   e senza bordo. Qui la testata è un elemento di tutto il sito che sta prima
   della sezione: la si toglie dal flusso e la si appoggia sopra, e la sezione
   si riprende lo spazio che le serve in cima.

   ⚠ Il testo della testata diventa `--cerca-su` (l'avorio già misurato sul
   velo: 6,21:1 in chiaro, 6,56 in scuro — §1 di questo foglio), perché sotto
   non c'è più `--superficie` ma la foto. È la stessa coppia che regge il
   titolo e le pillole a due dita di distanza: non un colore nuovo.
   ⚠ Vale **solo** dove c'è la foto (`body.testata-sul-velo`, messa dal
   template dell'apertura): su `/mappa/`, sulle schede e su `/prezzi/` la
   testata resta quella di sempre.
   -------------------------------------------------------------------------- */

body.testata-sul-velo .testata {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 6;
	background: transparent;
	border-bottom: 0;
}

/* La sezione si riprende l'altezza che la testata non occupa più. Il valore è
   la stessa formula che la testata usa per il suo `padding` più l'altezza di
   una riga di comandi: si dichiara qui una volta, e i due lo leggono. */
body.testata-sul-velo .cerca {
	--cerca-testata: clamp(4.5rem, 7vw, 6rem);

	padding-top: var(--cerca-testata);
}

/* 🚨 IL COLORE DEL TESTO NON SI FORZA, E LA RAGIONE È UNA MISURA.
   La prima versione di questa regola riscriveva il testo della testata in
   `--cerca-su` (l'avorio del velo). Misurato: **non si applicava** — le voci
   tengono il colore del tema — e per fortuna, perché il tema misura meglio:
   13,07-14,72:1 in chiaro e 15,63-16,83:1 in scuro, contro la foto vera.
   Funziona perché il testo del tema e la cima della foto vanno **nella stessa
   direzione**: chiaro su chiaro non capita, dato che in tema chiaro il testo è
   scuro e la foto del giorno ha il cielo chiaro.

   ⚠ Ma è una coincidenza di QUESTA foto, e una coincidenza non è un
   contratto: basta una foto d'apertura scura in tema chiaro e la testata
   sparisce. Quindi il colore resta quello del tema — che misura meglio — e
   sotto ci va una **velatura** che tiene il patto qualunque sia la foto: un
   po' del fondo della pagina in cima, che sfuma a niente prima del titolo.
   Non si vede, e non deve vedersi: serve al caso che non è ancora successo. */
body.testata-sul-velo .testata::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, var(--fondo) 0%, transparent 100%);
	opacity: .55;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   3-bis · LA COMPOSIZIONE DELLA ZONA MAPPA — RADAR-4, 6/9/2026.

   Prima qui c'era solo `.mappa-home__card` (la carta a tutta larghezza). Nel
   disegno del 9/8 la carta è **metà** della zona: sopra testa e pillole,
   sotto due colonne — elenco a sinistra, carta a destra. Le regole della
   card restano dove stavano, qui c'è solo quello che le sta intorno.
   -------------------------------------------------------------------------- */

.mappa-home__testa {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(20px, 4vw, 64px);
	align-items: end;
	margin-bottom: clamp(18px, 2.6vh, 28px);
}

@media (max-width: 899px) {
	.mappa-home__testa { grid-template-columns: 1fr; align-items: start; }
}

.mappa-home__occhiello {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 12px;
	font: 500 .8125rem/1 var(--font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--marchio);
}

.mappa-home__filetto {
	width: 24px;
	height: 1px;
	background: currentColor;
}

.mappa-home__titolo {
	margin: 0;
	max-width: 12em;
	font: 400 clamp(1.875rem, 3.4vw, 3rem)/1.08 var(--font-titolo);
	letter-spacing: -.02em;
	color: var(--testo);
}

.mappa-home__titolo em {
	font-style: italic;
	color: var(--marchio);
}

.mappa-home__intro {
	margin: 0;
	max-width: 34em;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--testo-2);
}

/* Le pillole delle categorie: qui sono LINK a `/mappa/?cat[]=`, non caselle
   di un modulo come nell'apertura — chi è arrivato fin qui ha già scorso
   mezza pagina e vuole andare, non compilare. Stessa forma, altro gesto. */
.mappa-home__pillole {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 clamp(16px, 2.4vh, 24px);
	padding: 0;
	list-style: none;
}

.mappa-home__pillola {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px 0 8px;
	border: 1px solid var(--bordo);
	border-radius: 999px;
	background: var(--superficie);
	color: var(--testo);
	font: 500 .9375rem/1 var(--font);
	text-decoration: none;
}

.mappa-home__pillola:hover,
.mappa-home__pillola:focus-visible {
	border-color: var(--pin, var(--testo-2));
}

.mappa-home__pin {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--pin, var(--bordo));
	color: #FFF;
	font: 700 .8125rem/1 var(--font);
}

.mappa-home__corpo {
	display: grid;
	/* 🚨 7/9 — «o allarghi la mappa o stringi il box», parole di Gabriele.
	   Misurato: non è un buco di impaginazione (la tela riempie la card a 2 px
	   di scarto), è che l'Italia è ALTA e la card era LARGA — 4fr/7fr fa 1,34:1
	   a 1440, e `fitBounds` riempie l'altezza lasciando mare e Francia ai lati.
	   Con 5fr/6fr la carta si stringe a ~1,07:1, che è vicino alla forma vera
	   dell'Italia in proiezione: il vuoto laterale si dimezza e l'elenco accanto
	   guadagna spazio, che è la seconda cosa che serviva. */
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(16px, 2vw, 28px);
	align-items: stretch;
}

/* Oltre i 1500 px la card continuerebbe a crescere in larghezza mentre la sua
   altezza resta ferma (la decide l'elenco accanto): a 1900 tornava 1,53:1, cioè
   di nuovo mare ai lati. Da lì in su lo spazio in più va all'ELENCO, che se ne
   serve, e la carta resta della forma dell'Italia. */
@media (min-width: 1500px) {
	.mappa-home__corpo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

@media (max-width: 899px) {
	/* Sotto i 900 la carta va SOPRA l'elenco: è lei che dice «guarda, c'è
	   qualcosa dalle tue parti», e su un telefono l'elenco da solo in cima
	   sembra una pagina di risultati senza avercelo chiesto. */
	.mappa-home__corpo { grid-template-columns: 1fr; }
	.mappa-home__card { order: -1; }
}

/* 🚨 7/9/2026 — LA CARD NON PRENDE PIÙ LA LARGHEZZA DALLA SUA ALTEZZA.
   `.mappa-home__card` ha `aspect-ratio: 2/1`, giusto quando la carta era da
   sola a tutta larghezza. Dentro le due colonne è un elemento di griglia
   **stirato** dall'elenco accanto: presa l'altezza della riga (493 px),
   l'aspetto le calcolava la LARGHEZZA — 2×493 = 985 dentro una colonna di
   878, e la pagina scorreva di 91 px in orizzontale. Compariva solo dopo che
   la mappa si era disegnata, cioè dopo che l'elenco si era riempito: per
   questo le prime misure erano pulite.
   👉 Nelle due colonne la card riempie la sua colonna e si allunga con la
   riga; l'aspetto resta dov'è utile, cioè sotto i 900 px, dove la carta torna
   sola e senza un'altezza da cui copiare. */
@media (min-width: 900px) {
	.mappa-home__corpo > .mappa-home__card {
		aspect-ratio: auto;
		min-width: 0;
		max-width: 100%;
		/* 🚨 7/9/2026, quarto cancello — E UN'ALTEZZA MINIMA, CHE NON È
		   COSMESI. Senza, la card **nasce alta 147 px**: la riga della griglia
		   la fa l'elenco accanto, che si riempie dopo, con la risposta della
		   rotta. MapLibre inquadra su quei 147 px e il `ResizeObserver` deve
		   poi rimettere tutto a posto — misurato dal cancello: **1-3,6 s più
		   tardi**, cioè con i grappoli già cliccabili, e la carta che salta
		   sotto il dito di chi stava per premerne uno. 28rem è sotto
		   l'altezza vera a ogni larghezza (493 px a 1440, 514 a 900), quindi
		   non comanda mai la riga: serve solo a far nascere la carta vicina
		   alla misura che avrà. */
		min-height: 28rem;
	}
}

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

.mappa-home__conteggio {
	margin: 0;
	font: 600 .9375rem/1.4 var(--font);
	color: var(--testo);
}

.mappa-home__elenco {
	flex: 1 1 auto;
	/* 🚨 7/9/2026 — PIÙ ALTA, E NON È UNA SCELTA DI GUSTO.
	   Gabriele: «la mappa dovrebbe essere zoommata sull'Italia». La carta era
	   inquadrata sull'Italia già prima (lat 36,3-47,3, misurato) ma **sembrava
	   lontana**, e la ragione è geometrica: l'Italia è alta e stretta, la card
	   era larga 878 e alta 493 (1,78:1), e `fitBounds` riempie l'altezza
	   lasciando mare e Francia ai lati. Alzando l'elenco cresce la riga della
	   griglia, quindi cresce la card, quindi la carta si stringe sull'Italia —
	   e nello stesso gesto si vedono più comuni, che è la cosa per cui
	   l'elenco esiste. */
	max-height: clamp(320px, 62vh, 640px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	border: 1px solid var(--bordo);
	border-radius: 14px;
	background: var(--superficie);
}

/* Le righe arrivano già rese da `radar-tema/v1/lista` con la classe
   `.risultato--comune` — la stessa di `/mappa/`. Qui si vestono per stare
   in una colonna stretta, non si riscrivono. */
.mappa-home__elenco .risultato--comune {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-top: 1px solid var(--bordo);
	font-size: .9375rem;
	line-height: 1.35;
	color: var(--testo);
	cursor: pointer;
}

.mappa-home__elenco .risultato--comune:first-child {
	border-top: 0;
}

.mappa-home__elenco .risultato--comune:hover,
.mappa-home__elenco .risultato--comune:focus-visible {
	background: var(--superficie-alt);
}

.mappa-home__elenco .risultato--comune b {
	font-variant-numeric: tabular-nums;
	color: var(--testo-2);
	font-weight: 600;
}

.mappa-home__attesa {
	padding: 14px;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--testo-2);
}

/* Il bottone «Apri la mappa» nasceva appiccicato in basso a sinistra SOPRA la
   carta (`position: absolute` col velo dietro, per stare leggibile su una
   carta che cambia colore). Nella composizione nuova sta in fondo alla
   colonna di sinistra, dove non ha niente sotto di sé: torna un pulsante
   normale del tema, altrimenti `position:absolute` lo aggancia al primo
   antenato posizionato e sparisce dalla pagina. */
.mappa-home__colonna .mappa-home__apri {
	position: static;
	align-self: flex-start;
	background: var(--azione);
	border-color: var(--azione);
	color: var(--azione-testo);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.mappa-home__colonna .mappa-home__apri:hover,
.mappa-home__colonna .mappa-home__apri:focus-visible {
	background: var(--azione-hover);
}

/* --------------------------------------------------------------------------
   4 · LA FIDUCIA: PERCHÉ ESISTIAMO — rifatta sul disegno del 9/8
   (RADAR-4, 6/9/2026; prima versione S-HOME-2, 5/9).

   Nel disegno questa zona **non è una fascia scura a quattro colonne**: è
   chiara, sul fondo della pagina, e sta su DUE colonne — a sinistra
   occhiello + titolo serif + due cifre, a destra i quattro badge in scala
   di peso e i tre riquadri. Il fondo scuro era una scelta nostra del 5/9,
   e il 6/9 Gabriele ha detto quale disegno comanda.

   ⚠ Il verde «verificato» qui torna a seguire il tema (`--verificato`,
   `light-dark()`): il fondo di questa sezione ora **cambia** col tema, e la
   variante scura fissata a mano che serviva sul fondo notte sarebbe
   illeggibile in chiaro.
   -------------------------------------------------------------------------- */

.fiducia-perche {
	padding-block: clamp(60px, 9vh, 120px);
}

.fiducia-perche__griglia {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 76px);
	align-items: start;
}

@media (max-width: 899px) {
	.fiducia-perche__griglia { grid-template-columns: 1fr; }
}

.fiducia-perche__testa {
	/* «appiccicata mentre si scorre», come nel disegno (`data-msticky`): la
	   colonna destra è più alta, e un titolo che se ne va lascia i badge
	   senza la domanda a cui rispondono. */
	position: sticky;
	top: clamp(16px, 8vh, 96px);
}

@media (max-width: 899px) {
	.fiducia-perche__testa { position: static; }
}

.fiducia-perche__occhiello {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 14px;
	font: 500 .8125rem/1 var(--font);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--marchio);
}

.fiducia-perche__filetto {
	width: 24px;
	height: 1px;
	background: currentColor;
}

.fiducia-perche__titolo {
	margin: 0 0 18px;
	max-width: 13em;
	font: 400 clamp(1.875rem, 3.4vw, 3rem)/1.08 var(--font-titolo);
	letter-spacing: -.02em;
	color: var(--testo);
}

/* La parte in corsivo del titolo prende il colore del marchio, come nel
   disegno e come già fa l'h1 dell'apertura: una sola idea di enfasi. */
.fiducia-perche__titolo em {
	font-style: italic;
	color: var(--marchio);
}

.fiducia-perche__intro {
	margin: 0;
	max-width: 32em;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--testo-2);
}

.fiducia-perche__intro em { font-style: italic; }

/* Le due cifre, sotto un filetto: nel disegno stanno alla base della colonna
   sinistra e sono l'unico numero della sezione. */
.fiducia-perche__cifre {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 48px);
	margin-top: clamp(28px, 4vh, 44px);
	padding-top: clamp(20px, 3vh, 30px);
	border-top: 1px solid var(--bordo);
}

.fiducia-perche__cifra {
	flex: 1 1 11rem;
	display: block;
	max-width: 15rem;
}

.fiducia-perche__numero {
	display: block;
	font: 400 clamp(1.75rem, 2.6vw, 2.375rem)/1 var(--font-titolo);
	font-variant-numeric: tabular-nums;
	color: var(--testo);
}

.fiducia-perche__didascalia {
	display: block;
	margin-top: 8px;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--testo-2);
}

.fiducia-perche__premessa {
	margin: 0 0 clamp(18px, 2.4vh, 26px);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--testo-2);
}

/* I QUATTRO BADGE, IN SCALA DI PESO.
   È il pezzo che nel disegno porta il senso: «un badge che non significa
   niente insegna a ignorare anche quelli veri». Il peso cresce col livello
   — contorno sottile al primo, pieno al quarto — e la scala si scrive con
   `data-livello`, non con quattro classi a mano. */
.fiducia-perche__lista {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fiducia-perche__livello {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 10px;
	align-items: center;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--bordo);
	border-radius: 14px;
	background: transparent;
}

.fiducia-perche__livello[data-livello="2"] {
	border-color: color-mix(in srgb, var(--verificato) 34%, transparent);
	background: color-mix(in srgb, var(--verificato) 6%, transparent);
}

.fiducia-perche__livello[data-livello="3"] {
	border-color: color-mix(in srgb, var(--verificato) 55%, transparent);
	background: color-mix(in srgb, var(--verificato) 12%, transparent);
}

.fiducia-perche__livello[data-livello="4"] {
	border-color: var(--azione);
	background: var(--azione);
	color: var(--azione-testo);
}

.fiducia-perche__spia {
	grid-row: 1;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bordo);
}

/* 🚨 RADAR-4 — LA SCALA DEL DISEGNO SI FERMA DOVE INIZIA LA BUGIA.
   Nel disegno il peso cresce col livello, e il quarto e' pieno di verde: li'
   tutti e quattro erano accesi. Da noi ne e' acceso UNO, ed e' il primo —
   quindi un quarto badge pieno, grande e verde e' la cosa piu' vistosa della
   sezione e dice il contrario di quello che c'e' scritto dentro («in arrivo,
   nessuna scheda lo ha ricevuto»). La scala resta (il contorno cresce col
   livello: e' l'informazione «i livelli salgono»), ma il **pieno** e' solo di
   chi e' acceso davvero. Stessa regola di `DESIGN.md` §3: il verde si spende
   solo dove c'e' stata una verifica vera. */
.fiducia-perche__livello--non-attivo[data-livello="4"] {
	background: transparent;
	color: inherit;
	border-color: color-mix(in srgb, var(--azione) 70%, transparent);
}

.fiducia-perche__livello--attivo {
	border-color: var(--verificato);
	background: var(--verificato-velo);
}

.fiducia-perche__livello--attivo .fiducia-perche__spia { background: var(--verificato); }

.fiducia-perche__livello[data-livello="4"] .fiducia-perche__spia {
	background: color-mix(in srgb, var(--azione-testo) 70%, transparent);
}

.fiducia-perche__nome {
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 9px;
	margin: 0;
	font: 600 1rem/1.3 var(--font);
	color: inherit;
}

/* «livello 1…4»: nel disegno è una pastiglia piccola accanto al nome, e dice
   l'ordine — l'informazione che il badge da solo non dà. */
.fiducia-perche__grado {
	font: 500 .6875rem/1 var(--font);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .72;
}

.fiducia-perche__cosa,
.fiducia-perche__stato,
.fiducia-perche__tag,
.fiducia-perche__ragione {
	grid-column: 2;
	margin: 0;
}

.fiducia-perche__cosa {
	font-size: .9375rem;
	line-height: 1.55;
	color: inherit;
	opacity: .82;
}

/* Lo stato del livello acceso è l'unica riga verde della sezione: verificato
   per davvero (`DESIGN.md` §3, «solo dove c'è stata una verifica vera»). */
.fiducia-perche__stato {
	margin-top: 4px;
	font: 600 .8125rem/1.4 var(--font);
	color: var(--verificato);
}

/* «In arrivo» — la ragione vera resta una riga sotto, mai tolta
   (S-RIMISURA-3 §10.4: leggersi come un percorso, non un elenco di
   mancanze). */
.fiducia-perche__tag {
	margin-top: 4px;
	font: 600 .75rem/1 var(--font);
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}

.fiducia-perche__ragione {
	margin-top: 2px;
	font-size: .9375rem;
	line-height: 1.5;
	opacity: .78;
}

.fiducia-perche__nota {
	margin: clamp(14px, 2vh, 20px) 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--superficie-alt);
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--testo-2);
}

/* I TRE RIQUADRI — nel disegno stanno in fondo alla colonna destra, divisi da
   filetti sottili. Qui ci arrivano solo le difese che il codice esegue
   davvero (→ la nota nel PHP dice quali sono state tolte e perché). */
.fiducia-perche__difese {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(20px, 3vh, 30px);
	border: 1px solid var(--bordo);
	border-radius: 14px;
	overflow: hidden;
}

@media (max-width: 679px) {
	.fiducia-perche__difese { grid-template-columns: 1fr; }
}

.fiducia-perche__difesa {
	padding: 16px 18px;
	border-inline-start: 1px solid var(--bordo);
}

.fiducia-perche__difesa:first-child { border-inline-start: 0; }

@media (max-width: 679px) {
	.fiducia-perche__difesa {
		border-inline-start: 0;
		border-block-start: 1px solid var(--bordo);
	}
	.fiducia-perche__difesa:first-child { border-block-start: 0; }
}

.fiducia-perche__difesa-titolo {
	margin: 0 0 6px;
	font: 600 .9375rem/1.3 var(--font);
	color: var(--testo);
}

.fiducia-perche__difesa-testo {
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--testo-2);
}

/* --------------------------------------------------------------------------
   5 · IL PERIMETRO
   Una fascia sola, niente cifre — → nota di testa del blocco P2.1 PEZZO B:
   nessun listino qui, i pacchetti restano fuori dal pubblico.
   -------------------------------------------------------------------------- */

.perimetro {
	padding-block: clamp(48px, 7vh, 88px);
}

.perimetro__riquadro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 44rem;
	padding: clamp(28px, 4vw, 48px);
	text-align: center;
	background: var(--superficie-alt);
	border-radius: var(--raggio-pannello, 14px);
}

.perimetro__titolo {
	margin: 0;
	font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--font-titolo);
	color: var(--testo);
}

.perimetro__testo {
	margin: 0;
	max-width: 34rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--testo-2);
}

/* --------------------------------------------------------------------------
   LE TRE AZIONI — 8/9/2026 (→ il riquadro in `templates/cerca.php`).

   Tre voci in fila, ognuna un titolo che è il gesto, una riga che dice cosa
   succede, e la freccia. Non tre bottoni: un bottone dice «premi», un titolo
   dice «questo è quello che puoi fare» — e sono tre cose diverse, non tre
   varianti della stessa.
   ⚠ Il collegamento si stende su tutta la voce (stessa tecnica del carosello),
   così il bersaglio è la scheda intera e non le tre parole del titolo. Resta
   UN solo collegamento nell'albero di accessibilità.
   -------------------------------------------------------------------------- */
.azioni {
	padding-block: clamp(40px, 6vh, 72px);
}

.azioni__titolo {
	margin: 0 0 clamp(20px, 3vh, 32px);
	font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.15 var(--font-titolo);
	letter-spacing: -.02em;
}

.azioni__elenco {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.azioni__elenco {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.azioni__voce {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(18px, 2.4vw, 26px);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande, 18px);
	transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

.azioni__voce:hover { transform: translateY(-3px); }

.azioni__nome {
	margin: 0;
	font: 600 1.125rem/1.3 var(--font);
	color: var(--testo);
}

.azioni__link {
	color: inherit;
	text-decoration: none;
}

.azioni__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.azioni__voce:has(.azioni__link:focus-visible) {
	outline: 3px solid var(--azione);
	outline-offset: 2px;
}

.azioni__testo {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--testo-2);
}

.azioni__freccia {
	margin-top: auto;
	padding-top: 6px;
	color: var(--marchio);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

.azioni__voce:hover .azioni__freccia { transform: translateX(.3em); }

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

	.azioni__voce:hover { transform: none; }
	.azioni__voce:hover .azioni__freccia { transform: none; }
}