/* ==========================================================================
   RADAR.casa — L'OSSATURA
   La lingua del disegno applicata alle pagine che il disegno non ha.

   ┌──────────────────────────────────────────────────────────────────────┐
   │ PERCHÉ QUESTO FILE ESISTE                                            │
   │                                                                      │
   │ `/la-mia-scheda/` e `/la-tua-scheda/` sono nate la notte del 14/8    │
   │ come **tubi**: costruite per funzionare, mai disegnate. Cadevano su  │
   │ `singular.php`, che è un `<h1>` e il contenuto — nessuna fascia,     │
   │ nessuna griglia, nessun respiro. Parole di Gabriele: «orribile».     │
   │ → PROTOCOLLO-AGENTI §5.                                              │
   │                                                                      │
   │ Le due pagine nel disegno non ci sono e non ci saranno mai. Quindi   │
   │ qui non si copia una schermata: si copiano **le ricette** —          │
   │ `_disegno/token.css` e `_disegno/schermate/*.html` — e si vestono le │
   │ classi che il PHP stampa già.                                        │
   └──────────────────────────────────────────────────────────────────────┘

   LE TRE REGOLE DI QUESTO FILE

   1. **I colori li possiede `radar.css`.** Qui non si ridefinisce nemmeno un
      token suo: `--fondo`, `--testo`, `--azione`, i sei pin restano dove
      sono. Si aggiungono solo i token che `radar.css` non ha — quelli delle
      superfici scure del racconto e delle misure del disegno — verificato
      uno per uno, il 15/8/2026: nessuno dei nomi qui sotto compare in
      `radar.css`.
   2. **Il markup dei due moduli non è nostro**: lo stampa
      `inc/scheda-professionista.php` (il modulo da 42 campi) e
      `radar-core/includes/class-radar-richieste.php` (le tre porte). Si
      veste quello che c'è, con i selettori di discendenza dove le classi
      mancano. Nessuna classe nuova chiesta al PHP di qualcun altro.
   3. **Zero JavaScript in questo foglio.** Dal 16/8/2026 il commutatore del
      tema in testata c'è — lo vestono `marchio.css` §5 e `assets/js/tema.js` —
      ma qui dentro non entra nemmeno una riga di script: senza JS lo scuro
      segue il sistema come prima, e queste due pagine non se ne accorgono.

   MISURA                              DA DOVE VIENE
   ---------------------------------   -----------------------------------
   fascia  clamp(60px,9vh,120px)/…      token.css §misure ricorrenti
   bersaglio 44px · CTA 56px            token.css `--tocco`
   raggi   9 · 11 · 16 · 18 · 999       token.css, conteggiati sul disegno
   occhiello 500 14px mono ls .14em     cerca.html r.25 · partner.html r.4
   titolo  400 clamp(...) serif -.02em  partner.html r.108 (il piede)
   sommario 400 clamp(16,1.19vw,18.8)   partner.html r.6
   scheda  1px --bordo · r18 · --superficie   partner.html r.23
   ========================================================================== */


/* ==========================================================================
   1 · I token che a `radar.css` mancano
   ========================================================================== */

:root {
	/* --- La griglia ------------------------------------------------------
	   🚨 Riscala il 28/8/2026, casella 8.6: prima di oggi `--colonna-larga`
	   era 1500px, un numero suo, scollegato da `--colonna` (72rem = 1152,
	   la testata) — lo scarto era il difetto. Ora è lo stesso token:
	   `--colonna-larga` NON ha più un valore proprio, eredita
	   `var(--colonna)` (120rem = 1920) da `radar.css`. Impianto, non prosa:
	   testata e corpo stanno sulla stessa misura ovunque questo token arriva
	   (`.fascia__interno`, `.annuncio__testa`, `.annuncio__corpo`).
	   `--colonna-modulo` invece resta un numero suo, apposta: un testo o un
	   modulo largo 1920px non si legge (l'occhio perde la riga), quindi il
	   modulo da 42 campi e la richiesta a un'impresa restano alla loro misura
	   di lavoro — non più sull'involucro esterno (`.fascia__interno--modulo`,
	   che ora è largo come la testata), ma sul contenuto vero
	   (`.modulo`, `.radar-richiesta`, §7-8 qui sotto), centrato dentro. */
	--colonna-larga:    var(--colonna);
	--colonna-modulo:   56rem;    /* 896px: il modulo da 42 campi, misura di lavoro */
	--colonna-lead:     38em;     /* il sommario sotto il titolo */
	--colonna-stretta:  27em;     /* token.css: «i paragrafi non superano ~27em» */

	/* --- Le fasce ----------------------------------------------------------
	   🚨 Il valore è quello del disegno, **verbatim** da `_disegno/token.css`
	   §misure ricorrenti: `--fascia: clamp(60px,9vh,120px) clamp(20px,4vw,60px)`.
	   Fino al 15/8/2026 qui c'era `clamp(44px,6vh,92px)`, inventato da me e più
	   stretto di un terzo: su una finestra da 900px il disegno dà 81px di
	   respiro sopra e sotto ogni fascia, e il reso ne dava 54. È la ragione per
	   cui la pagina respirava meno del disegno — misurato da `ui-qa-expert`.
	   👉 Un token del disegno non si riscrive a occhio: si copia. */
	--fascia-y:         clamp(60px, 9vh, 120px);
	--fascia-x:         clamp(20px, 4vw, 60px);
	--fascia:           var(--fascia-y) var(--fascia-x);

	/* Lo stacco fra il capo e il corpo. Non è la fascia intera perché le due
	   fasce sono **una pagina sola**, non due sezioni: il disegno, dentro una
	   sezione, stacca di `clamp(34px,5vh,56px)` → `partner.html` r.3. Anche
	   questo è un suo numero, non uno mio. */
	--fascia-stacco:    clamp(34px, 5vh, 56px);

	/* --- I bersagli ------------------------------------------------------- */
	--tocco:            44px;     /* minimo, 19 usi nel disegno */
	--tocco-medio:      50px;     /* pulsante secondario */
	--cta:              56px;     /* l'azione principale */

	/* --- L'altezza della testata, ed è pubblica -----------------------------
	   Serve a chi deve mettere qualcosa **sotto** una testata che non ha
	   misurato: `cerca.css` la legge come `var(--testata-h, 77px)`.

	   👉 **77px da 1440 fino a 342px di finestra.** Non è un'aspirazione: è
	   misurata a 1440 · 900 · 600 · 599 · 375 · 360 · 344 · 342, ed è 77 in
	   tutti e otto. Regge perché sotto i 600 la testata **si stringe invece di
	   andare a capo** — il bottone del tema perde la parola e diventa un tondo
	   di 44, «Diventa partner» diventa «Partner» → `marchio.css` §6.

	   🚨 E NON È UNA COSTANTE, quindi non è dichiarata come tale. Sotto i 342px
	   il conto non torna più: dentro la riga servono 310px (marchio 127 + gap 16
	   + tema 44 + gap 9 + azione 114) e con i 32 di margine laterale la finestra
	   minima è **342**. A 341 misurati la riga va a capo e la testata diventa
	   **137px**. Misurato anche il gradino: 342 → 77, 341 → 137.
	   Il valore qui sotto segue quel gradino, così `var(--testata-h)` dice il
	   vero a ogni larghezza. Un token che mente costa più di un token con due
	   valori. Per farla costante davvero dovrebbe cedere il marchio (127px, e
	   quelli sono il glifo 27 del disegno più il suo testo): decisione di
	   Gabriele, non mia.

	   🚨 **E tutto il conto qui sopra vale con la testata VUOTA in mezzo.** Le
	   nove larghezze erano state misurate su un banco con **zero menù
	   registrati**, perché sul banco non ce n'era nessuno. Appena il menù è
	   comparso — due voci sole, «Mappa» e «Artigiani» — il gradino si è spostato
	   di più di trecento pixel: misurato il 17/8/2026, **680px → 77, 670px →
	   137**.
	   👉 È lo stesso difetto di misura che stanotte si è ripetuto tre volte:
	   *si misura la cosa, non l'intermediario*. Una testata misurata senza il
	   suo contenuto non è la testata.
	   Il numero qui sotto resta 77 perché è vero **quando il menù non c'è**, ed
	   è il caso del sito vivo oggi; il caso col menù lo corregge la regola più
	   sotto, che sa del menù perché `functions.php` mette `testata-con-menu`
	   sul corpo. */
	--testata-h:        77px;

	/* --- I raggi, come li conta il disegno -------------------------------- */
	--raggio-piccolo:   9px;
	--raggio-medio:     11px;
	--raggio-scheda:    16px;
	--raggio-pannello:  18px;
	--raggio-pillola:   999px;

	/* --- Le quattro elevazioni -------------------------------------------- */
	--elev-1:           0 4px 18px rgba(31, 27, 24, .10);
	--elev-2:           0 6px 20px rgba(31, 27, 24, .09);
	--elev-3:           0 14px 34px rgba(31, 27, 24, .12);
	--elev-4:           0 24px 60px rgba(31, 27, 24, .13);

	/* --- L'oro: **solo filetti e superfici**, mai testo --------------------
	   🚨 Misurato il 15/8/2026: `--oro` #C9A227 su `--fondo` fa **2,26:1**.
	   Il disegno lo usa per il trattino da 24×1px dell'occhiello, dove è
	   decorazione pura — ma un filetto a 2,26 semplicemente non si vede.
	   👉 Qui il trattino è `currentColor`, cioè lo stesso `--marchio`
	      dell'occhiello: **5,10:1** in chiaro, **6,26:1** in scuro. Stessa
	      forma del disegno, un filetto che esiste davvero.
	   L'oro resta, e si usa dove il disegno lo usa davvero e dove passa:
	   sulle fasce d'inchiostro, dove `--oro-vivo` fa 11,02:1. */
	--oro:              #C9A227;
	--oro-vivo:         #E3C46A;
	--oro-soft:         rgba(201, 162, 39, .38);

	/* --- L'inchiostro: la fascia scura del disegno, il piede ---------------
	   Non sta in `radar.css` perché `radar.css` descrive l'interfaccia; questa
	   è una superficie del racconto → `_disegno/token.css` §superfici. */
	--inchiostro:       #17110E;
	--su-inchiostro:    #F7F2EB;   /* 16,79:1 */
	--su-inchiostro-soft: #B3A69B; /* 7,88:1 */
	--inchiostro-bordo: rgba(247, 242, 235, .16);
	--azione-scuro:     #2FA07C;   /* 5,74:1 sull'inchiostro */
}

/* L'altezza della testata QUANDO IL MENÙ C'È.
   `functions.php` mette `testata-con-menu` sul corpo se la posizione
   «principale» ha un menù: il CSS da solo non può chiederlo, e senza saperlo
   `--testata-h` direbbe 77 dove la testata è alta 137.

   La soglia è **misurata**, non scelta: 680px → 77, 670px → 137, col menù di
   due voci del banco. ⚠ E resta **approssimata**, e va detto: dipende da quanto
   sono lunghe le etichette, che sono contenuto e cambiano. Il token dice il
   vero nei due casi che contano — con menù e senza — e non promette di
   indovinare ogni etichetta.
   👉 Chi aggiunge la terza voce del disegno («Come verifichiamo») **rimisura
   questo gradino**: sarà più in alto. */
@media (max-width: 679px) {
	body.testata-con-menu { --testata-h: 137px; }
}

/* Il gradino di `--testata-h`, e sta attaccato alla sua dichiarazione apposta:
   341px è la prima larghezza in cui la riga va a capo (misurata, §1). */
@media (max-width: 341px) {
	:root { --testata-h: 137px; }
}

/* Lo scuro di questo foglio. Era un `@media (prefers-color-scheme: dark)` fino
   al 16/8/2026: adesso la coppia chiaro/scuro di ogni token sta su una riga
   sola, come in `radar.css` §tema, e i tre stati li decide il `color-scheme`
   che quel foglio mette su `:root`.

   ⚠ Il cancello è `@supports` e non la doppia dichiarazione: dentro una custom
   property una funzione ignota **vince** invece di essere scartata, e chi la usa
   perde il valore invece di tornare al chiaro. Misurato → `radar.css` §tema.
   Un browser senza `light-dark()` non entra qui e resta col `:root` chiaro. */
@supports (color: light-dark(#000, #fff)) {
	:root {
		/* ⚠ Un'ombra non è un colore: la coppia sta sul colore **dentro**. */
		--elev-1: 0 4px 18px  light-dark(rgba(31, 27, 24, .10), rgba(0, 0, 0, .44));
		--elev-2: 0 6px 20px  light-dark(rgba(31, 27, 24, .09), rgba(0, 0, 0, .40));
		--elev-3: 0 14px 34px light-dark(rgba(31, 27, 24, .12), rgba(0, 0, 0, .48));
		--elev-4: 0 24px 60px light-dark(rgba(31, 27, 24, .13), rgba(0, 0, 0, .52));

		--oro:      light-dark(#C9A227, #E3C46A);
		--oro-vivo: light-dark(#E3C46A, #F0DCA0);
		--oro-soft: light-dark(rgba(201, 162, 39, .38), rgba(227, 196, 106, .32));

		--inchiostro:         light-dark(#17110E, #0A0807);
		--su-inchiostro:      light-dark(#F7F2EB, #F4EFE9);   /* 16,79:1 · 17,48:1 */
		--su-inchiostro-soft: light-dark(#B3A69B, #A2958B);   /*  7,88:1 ·  6,86:1 */
		--inchiostro-bordo:   light-dark(rgba(247, 242, 235, .16), rgba(247, 242, 235, .12));
		--azione-scuro:       light-dark(#2FA07C, #3EB791);   /*  5,74:1 sull'inchiostro */
	}
}


/* ==========================================================================
   2 · Le fasce e la griglia

   ⚠ `header.php` apre `<main id="contenuto" class="contenitore">`, e quel
   contenitore serve a tutte le altre pagine del tema (la mappa ci si appoggia
   → `radar.css` §mappa-attiva). Non si tocca: si **disinnesca sulle sole due
   pagine vestite**, con le classi che WordPress mette da sé sul `<body>` a
   partire dal nome del modello. Zero PHP condiviso toccato.
   ========================================================================== */

body.page-template-scheda-professionista #contenuto.contenitore,
body.page-template-tre-porte #contenuto.contenitore {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.fascia {
	padding: var(--fascia);
}

.fascia--capo {
	padding-bottom: var(--fascia-stacco);
}

/* La fascia calma: il fondo di pagina, un gradino sotto la superficie. */
.fascia--quieta { background: var(--superficie-alt); }

/* La fascia d'inchiostro: il registro scuro del disegno. */
.fascia--inchiostro {
	background: var(--inchiostro);
	color: var(--su-inchiostro);
}

/* Il filetto fra due fasce dello stesso colore: senza, si incollano. */
.fascia + .fascia--quieta,
.fascia--quieta + .fascia { border-top: 1px solid var(--bordo); }

/* 28/8/2026, casella 8.6: `.fascia__interno` vive dentro `.fascia`, che
   toglie di suo `var(--fascia-x)` per lato (`padding: var(--fascia)`, §2 qui
   sotto) prima che questo box esista. Un `max-width: var(--colonna-larga)`
   nudo, ora che `--colonna-larga` vale 1920, non lega mai (la fascia lo
   restringe prima), e il box resta largo quanto la fascia concede — 1800 a
   1920px, misurato, contro 1888 della testata. Si ricostruisce `100vw -
   2rem` (il tetto della testata) dal box già ristretto:
   `100% + 2×fascia-x - 2rem`.

   🚨 E dev'essere `width`, non `max-width`. Provato prima con `max-width`:
   restava 1800 anche con la formula giusta, perché un `max-width` più
   grande del riempimento naturale del box non alza niente — può solo
   restringere, mai allargare oltre quanto il genitore dà da sé. `width`
   invece è un valore imposto, e il box esce apposta dal riquadro che il
   padding gli lascerebbe — la stessa mossa di `.cerca__colonna`
   (`cerca.css` §4) sullo stesso difetto.

   🚨 E `margin-inline: auto` non basta con un `width` più largo del box che
   lo contiene: Chrome non lo spacca in due margini uguali, lo mette **tutto
   a destra** (`margin-right` negativo, `margin-left: 0`) — misurato,
   `right: 1948` a una finestra da 1920, **28px fuori dallo schermo**, e la
   stessa cosa a 1440 (26px). Sotto i 1152px l'eccesso resta dentro il
   padding e non si vedeva, per questo il primo giro sembrava a posto. Si
   spacca a mano, metà e metà, con un margine negativo esplicito: il box
   torna centrato **sullo stesso asse della testata**, non solo largo uguale.
   Verificato alle quattro larghezze del collaudo su `/la-tua-scheda/`:
   1888/1408/736/343, zero scorrimento, e il bordo sinistro coincide con
   quello della testata a ognuna. */
.fascia__interno {
	--f-eccesso: max(0px, calc(2 * var(--fascia-x) - 2rem));
	width: min(calc(100% + var(--f-eccesso)), var(--colonna-larga));
	margin-inline: calc(var(--f-eccesso) / -2);
}

/* Fino al 27/8/2026 `--modulo` restringeva questo INVOLUCRO a 896px: la
   testata restava a 1152 e il corpo a 896, 256px di scarto → casella 8.6.
   `--colonna-larga` ora vale come `--colonna` (1920, testata), quindi
   l'involucro non si restringe più qui: il modulo (`.modulo`,
   `.radar-richiesta`) resta stretto DENTRO, alla sua misura di lavoro,
   centrato con `margin-inline: auto`. La classe resta nel markup — segna
   «qui c'è un modulo» — ma non porta più una larghezza sua. */
.fascia__interno--testo  { max-width: var(--colonna-lead); }


/* ==========================================================================
   3 · La voce: occhiello, titolo, sommario
   ========================================================================== */

/* L'occhiello — `500 14px/1 mono`, maiuscoletto, `letter-spacing .14em`, col
   filetto da 24×1px davanti. È la firma tipografica del disegno: sta in cima
   a ogni sezione di `cerca.html`, `fiducia.html`, `partner.html`. */
.occhiello {
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: none;
	margin: 0 0 14px;
	font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: .875rem;          /* 14px — è un'etichetta, non corpo */
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--marchio);       /* 5,10:1 su --fondo · 6,26:1 in scuro */
}

/* Il filetto. `currentColor` e non `--oro`: vedi §1. */
.occhiello::before {
	content: "";
	flex: 0 0 24px;
	height: 1px;
	background: currentColor;
}

.fascia--inchiostro .occhiello { color: var(--oro-vivo); }   /* 11,02:1 */

/* Il titolo — serif, fluido, `letter-spacing -.02em`. La misura è quella del
   titolo di piede del disegno (`partner.html`), non quella dell'apertura:
   una pagina di lavoro non è una copertina. */
.titolone {
	max-width: 15em;
	margin: 0 0 18px;
	font-family: var(--font-titolo);
	font-size: clamp(2.106rem, 3.96vw, 3.963rem);   /* 33,7 → 63,4 px */
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--testo);
}

.fascia--inchiostro .titolone { color: var(--su-inchiostro); }

/* Il taglio in corsivo dentro il titolo: è la sola cosa colorata del disegno
   in un titolo, e porta la parola che conta. */
.titolone em {
	font-style: italic;
	color: var(--marchio);
}

.fascia--inchiostro .titolone em { color: var(--marchio-chiaro); }

.titoletto {
	max-width: 18em;
	margin: 0 0 14px;
	font-family: var(--font-titolo);
	font-size: clamp(1.606rem, 2.57vw, 2.35rem);    /* 25,7 → 37,6 px */
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--testo);
}

/* Il sommario sotto il titolo. */
.sommario {
	max-width: var(--colonna-lead);
	margin: 0 0 4px;
	font-size: clamp(1rem, 1.19vw, 1.175rem);       /* 16 → 18,8 px */
	line-height: 1.65;
	color: var(--testo-2);                          /* 5,57:1 su --fondo */
}

.fascia--inchiostro .sommario { color: var(--su-inchiostro-soft); }   /* 7,88:1 */

/* Ogni cifra confrontabile porta le cifre a larghezza fissa → token.css. */
.cifra,
.cifre,
.cifre * { font-variant-numeric: tabular-nums; }

.cifra {
	font-family: var(--font-titolo);
	font-size: clamp(1.73rem, 2.97vw, 2.6rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
}


/* ==========================================================================
   4 · La testata

   Il marchio resta **testo in CSS** — `radar.css` §marchio lo ha misurato e
   ha ragione lui: `--marchio-chiaro` su avorio fa 2,76:1 e non ci va. Qui si
   aggiunge solo quello che il disegno ha e la testata non aveva: la riga a
   tre parti (marchio · menù · azione) e i bersagli da 44px.
   ========================================================================== */

.testata__riga { min-height: var(--tocco); }

.marchio {
	display: inline-flex;
	align-items: center;
	min-height: var(--tocco);
}

/* Il menù: pillole da 44px, come ogni bersaglio del disegno. */
.testata .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.testata .menu li { margin: 0; }

.testata .menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tocco);
	padding: 0 14px;
	border-radius: var(--raggio-pillola);
	color: var(--testo);
	font-size: .9375rem;         /* 15px — la misura più usata del disegno */
	font-weight: 500;
	text-decoration: none;
}

.testata .menu a:hover,
.testata .menu a:focus-visible { background: var(--superficie-alt); color: var(--testo); }

.testata .menu [aria-current] {
	background: var(--superficie-alt);
	font-weight: 600;
}

/* L'azione in testata: la pillola contornata del disegno (`cerca.html` r.17),
   col segno del pin davanti disegnato in CSS.

   S41 3/9 — era `border`/`color: var(--marchio)`: viola DESIGN.md §3, «il
   colore del marchio non è mai il colore del pulsante» — e «Accedi» è
   un'azione, non il logo. `--azione` è a sua volta riservato al SOLO
   pulsante primario (stesso §3): niente verde qui, o due pulsanti primari in
   testata. Resta il neutro, gli stessi token già usati da `.pulsante--quieto`
   (radar.css §9/ossatura.css §9) per ogni azione secondaria del tema. */
.testata__azione {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--tocco);
	padding: 0 18px;
	border: 1px solid var(--testo-2);
	border-radius: var(--raggio-pillola);
	color: var(--testo);                    /* 17,1:1 su --superficie */
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.testata__azione:hover,
.testata__azione:focus-visible { background: var(--superficie-alt); color: var(--testo); }

.testata__azione::before {
	content: "";
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	border: 1.5px solid currentColor;
	border-radius: 50% 50% 50% 2px;
	transform: rotate(-45deg);
}


/* ==========================================================================
   5 · Il piede — quattro colonne, P2.9 (6/9/2026)

   Rifatto da zero sul piede deciso da Gabriele il 5/9 («poco elegante, poco
   utile, buttato lì»): `PIRAMIDE-2.md` P2.9 +
   `DISEGNO-REDESIGN-5-9.md` §1 «Nastro e piede» (il nastro/marquee resta
   fuori: Prometeo §10, decorazione pura che costa LCP). Quattro colonne a
   ≥60rem (marchio · Esplora · Per chi lavora · Fiducia), una colonna sola
   impilata sotto — niente scorrimento orizzontale a 390. La riga finale
   sottile porta solo i dati di legge che non sono già nella prima colonna
   (art. 7, D.Lgs. 70/2003).

   👉 Il piede di prima (menù `piede` libero + blocco legale a righe che
   vanno a capo) è sostituito: qui il markup di `footer.php` è fisso, non
   più un menù personalizzabile da pannello — la struttura la decide questo
   file, come il resto del sito.
   ========================================================================== */

.pieDiPagina {
	background: var(--inchiostro);
	border-top: 0;
	color: var(--su-inchiostro-soft);
	font-size: 1rem;             /* era 14px: il corpo non scende sotto i 16 */
	line-height: 1.6;
}

.pieDiPagina a {
	color: var(--su-inchiostro);            /* 16,79:1 */
	text-underline-offset: .2em;
}

.pieDiPagina a:hover { color: var(--oro-vivo); }

/* La griglia a quattro colonne. `1.4fr` sulla prima: porta il marchio, lo
   slogan e due righe di dati — le altre tre portano solo un titolo e 2-4
   link, e a peso uguale restava vuota a destra dello slogan. */
.pieDiPagina__griglia {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vh, 40px) 24px;
	padding-block: clamp(40px, 6vh, 64px) clamp(28px, 4vh, 40px);
}

@media (min-width: 60rem) {
	.pieDiPagina__griglia {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: clamp(24px, 3vw, 48px);
	}
}

.pieDiPagina__colonna { min-width: 0; }

/* Il marchio nel piede: stesso testo in CSS, ma qui il fondo è scuro e la
   coda **può** prendere `--marchio-chiaro` — 6,34:1 sull'inchiostro. È lo
   stesso valore che `radar.css` rifiuta in testata, e per la stessa ragione:
   il contrasto si misura sulla coppia che si usa. */
.pieDiPagina .marchio {
	color: var(--su-inchiostro);
	/* ⚠ Il `font-size` non si ridefinisce qui: la regola 1 in testa a questo
	   file dice che la tipografia del marchio non è di questo foglio —
	   `marchio.css` §3 porta già i 17px del piede via `.marchio--piede`.
	   Qui resta il solo colore, proprietà del **posto** (l'inchiostro) e non
	   del marchio.
	   🚨 Nota per chi tocca questa regola: il 17/8 una graffa mancante qui ha
	   fatto perdere al parser TUTTE le regole del piede che venivano dopo —
	   niente errore, niente riga rossa, solo `.marchio__coda` che perdeva la
	   sua regola e tornava a `--marchio` (3,43:1 sull'inchiostro). Si
	   rimisura il contrasto dopo ogni modifica a questo blocco, anche
	   quando «è solo un commento». */
}

.pieDiPagina .marchio__coda { color: var(--marchio-chiaro); }

.pieDiPagina__slogan {
	margin: 14px 0 0;
	max-width: 20em;
	font: 400 1.05rem/1.4 var(--font-titolo);
	color: var(--su-inchiostro);
}

/* Nome e sede del titolare, piccoli, sotto lo slogan — gli altri dati
   dell'art. 7 (P.IVA, REA, PEC) stanno nella riga finale: non si ripetono
   due volte nello stesso piede. */
.pieDiPagina__mini {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 14px 0 0;
	max-width: 22em;
	font-size: .875rem;
	color: var(--su-inchiostro-soft);
}

.pieDiPagina__titolo-colonna {
	margin: 0 0 14px;
	font: 500 .8125rem/1 var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--su-inchiostro-soft);
}

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

/* Tocco ≥44px anche su un link di testo: il bersaglio cresce in altezza,
   non il carattere — stessa regola di `--tocco` usata nel resto del sito. */
.pieDiPagina__lista a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tocco);
	text-decoration: none;
}

.pieDiPagina__lista a:hover { text-decoration: underline; color: var(--oro-vivo); }

/* La targhetta societaria — 8/9/2026, al posto della riga unica di prima.
   Era un periodo solo con sei campi in fila separati da puntini, centrato
   sotto un marchio anch'esso centrato, con metà riga vuota. Ora tre gruppi
   su un rigo: chi siamo · i registri · come si scrive; il marchio a
   sinistra, sullo stesso asse di tutto il resto, e l'anno con la firma in
   coda. Stessi sei campi di prima, nessuno in meno. */
.pieDiPagina__targa {
	display: grid;
	gap: 10px 32px;
	padding-block: 20px;
	border-top: 1px solid rgba(247, 242, 235, .12);
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--su-inchiostro-soft);
}

@media (min-width: 60rem) {
	.pieDiPagina__targa {
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
	}
}

.pieDiPagina__targaDati {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 24px;
}

.pieDiPagina__targaChi,
.pieDiPagina__targaRecapiti {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
}

.pieDiPagina__targaChi strong {
	font-weight: 600;
	color: var(--su-inchiostro);
}

.pieDiPagina__targaRegistri {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pieDiPagina__targaFirma {
	margin: 0;
}

.pieDiPagina__targa a {
	color: inherit;
	text-underline-offset: .25em;
}

.pieDiPagina__targa a:hover,
.pieDiPagina__targa a:focus-visible {
	color: var(--su-inchiostro);
}

/* ==========================================================================
   6 · Le schede e i pannelli

   ⛔ **VUOTO, E VOLUTO.** `.scheda` e `.griglia` esistono già in `radar.css`
   (§Schede) e li usa mezzo sito: `index.php`, la mappa, la scheda del
   professionista che un'altra squadra sta vestendo **adesso**. Qui c'erano
   due regole che li ridefinivano — raggio 18 invece del suo, `auto-fit`
   invece di `auto-fill` — e non servivano a nessuna delle due pagine di
   questo turno: `/la-mia-scheda/` usa `.fascia` e `.modulo__*`,
   `/la-tua-scheda/` usa `.fascia` e `.porta`.

   👉 Regola: **non si ridisegna una classe condivisa per un guadagno che non
   si usa.** Se un giorno servisse, si cambia in `radar.css`, che è la sua
   casa, e si guarda cosa si è mosso altrove.
   ========================================================================== */


/* ==========================================================================
   7 · `/la-tua-scheda/` — le tre porte

   Chi apre questa pagina ci arriva perché ha trovato una scheda che non ha
   chiesto. Il tono lo porta il testo, che c'era già; qui si porta il resto:
   le tre porte hanno lo stesso peso, nessuna è più invitante dell'altra, e
   quella aperta si riconosce dal contorno pieno e non da un colore d'allarme.
   ========================================================================== */

.porte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(12px, 1.6vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.porte li { max-width: none; margin: 0; }

.porta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	height: 100%;
	min-height: var(--cta);
	padding: 18px 20px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-scheda);
	color: var(--testo);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.porta:hover,
.porta:focus-visible {
	color: var(--testo);
	border-color: var(--testo-2);
	box-shadow: var(--elev-1);
}

.porta__nome {
	font-size: 1.0625rem;        /* 17px */
	font-weight: 600;
	line-height: 1.35;
}

.porta__segno {
	font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--testo-2);       /* 5,95:1 su --superficie */
}

/* La porta aperta. Il segno è il **peso**, non la tinta: le tre porte
   restano tre porte, e nessuna delle tre è una brutta notizia. */
.porta[aria-current] {
	border-color: var(--testo);
	border-width: 2px;
	padding: 17px 19px;          /* il bordo cresce di 1: il testo non si muove */
	background: var(--superficie-alt);
	cursor: default;
}

.porta[aria-current] .porta__segno { color: var(--testo); font-weight: 600; }

/* --- Il modulo che stampa `radar-core` -----------------------------------
   ⚠ `Radar_Richieste::modulo()` stampa `<p><label>…</label><br><input>`:
   niente classi sui campi, e un `<br>` fra etichetta e casella. Non si tocca
   — è di un'altra squadra. Si veste per discendenza, e il `<br>` si spegne
   perché l'etichetta è già `display:block`.
   Le classi che ci sono: `.radar-richiesta`, `__esito`, `__nota`, `__trappola`.
   ------------------------------------------------------------------------ */

/* 🚨 COMPONENTE CONDIVISO — questo blocco veste DUE moduli.
   Le tre porte (Radar_Richieste) e la richiesta a una impresa
   (Radar_Richiesta_Impresa) stampano la stessa classe, ed è voluto:
   è lo stesso modulo di radar.casa, e due vestiti divergerebbero.
   ⚠ Chi tocca qui cambia tutte e due le pagine, e le guarda tutte e due:
      /la-tua-scheda/?tipo=rimuovi  e  /professionista/<una-scheda>/
   Il 15/8/2026 il campo `tel` è rimasto nudo proprio per questo. */
.radar-richiesta {
	max-width: var(--colonna-modulo);
	margin: 0 auto;    /* 28/8: l'involucro (`.fascia__interno--modulo`) è
	                      largo quanto la testata da oggi — qui si centra */
}

.radar-richiesta > h2 {
	margin: 0 0 14px;
	font-family: var(--font-titolo);
	font-size: clamp(1.606rem, 2.57vw, 2.35rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.radar-richiesta > p {
	max-width: var(--colonna-lead);
	font-size: 1.0625rem;        /* 17px */
	line-height: 1.6;
	color: var(--testo-2);
}

.radar-richiesta > p strong { color: var(--testo); }

.radar-richiesta__esito {
	max-width: none !important;
	padding: 18px 20px;
	background: var(--verificato-velo);
	border: 1px solid var(--verificato);
	border-radius: var(--raggio-scheda);
	color: var(--testo) !important;
}

.radar-richiesta form {
	margin: clamp(20px, 3vh, 30px) 0 0;
	padding: clamp(20px, 2.4vw, 30px);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-pannello);
	box-shadow: var(--elev-1);
}

.radar-richiesta form > p {
	max-width: none;
	margin: 0 0 1.375rem;
}

.radar-richiesta form > p:last-child { margin-bottom: 0; }

/* Il `<br>` del markup: l'etichetta è già un blocco, quella riga vuota no. */
.radar-richiesta form br { display: none; }

.radar-richiesta form label {
	display: block;
	margin-bottom: .5rem;
	font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--testo);
}

/* 🚨 QUI C'ERA UN ELENCO SCRITTO A MANO, E HA LASCIATO FUORI UN CAMPO.
 *
 * Fino al 15/8/2026 queste righe dicevano `input[type="email"], input[type=
 * "text"]`. Ma `.radar-richiesta` **non è solo la pagina delle tre porte**:
 * `Radar_Richiesta_Impresa` (radar-core) usa lo stesso nome di classe sulla
 * scheda del professionista, e lì c'è un `input type="tel"`. Risultato
 * misurato da `ui-qa-expert`: il campo del telefono veniva **21px di altezza,
 * 13,33px di corpo, raggio 0, bordo del browser, fondo bianco** — in tema
 * scuro, un rettangolo bianco dentro un modulo #211C18 — accanto a due
 * fratelli da 55,2px. `scheda.css` non veste nessun campo (solo la CTA),
 * quindi non c'era nessun altro a raccoglierlo.
 *
 * 👉 La correzione non è «aggiungi anche tel»: è **rovesciare l'elenco**.
 *    Adesso si vestono tutti gli `input` tranne quelli che hanno una forma
 *    loro — spunte, pallini, file, pulsanti, cursori, colore, nascosti.
 *    Un tipo nuovo domani entra vestito da solo: `url`, `number`, `search`,
 *    `date`, `password`, `time`, `week`, `month`, `datetime-local`.
 *
 * ⚠ Il `:not()` prende una **lista** apposta: dieci `:not()` in fila
 *    farebbero 0,11,2 di peso e schiaccerebbero i fogli di chiunque; con la
 *    lista il peso è quello dell'argomento più pesante, cioè 0,2,2.
 */
.radar-richiesta form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]),
.radar-richiesta form textarea {
	display: block;
	width: 100%;
	min-height: var(--tocco);
	padding: .75rem 1rem;
	font: inherit;
	font-size: 1.0625rem;        /* 17px: sotto i 16 iOS ingrandisce da solo */
	line-height: 1.6;
	color: var(--testo);
	background: var(--superficie);
	/* Non `--bordo`: contro `--superficie` fa 1,30:1, e per il contorno di un
	   campo ne servono 3 (WCAG 1.4.11). `--testo-2` fa 5,95:1 → `radar.css`. */
	border: 2px solid var(--testo-2);
	border-radius: var(--raggio-medio);
}

/* I campi a una riga: 48px, area di tocco oltre i 44. Stesso elenco rovesciato
   della regola sopra — se i due elenchi divergono torna il difetto di prima. */
.radar-richiesta form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]) { min-height: 3rem; }

.radar-richiesta form textarea {
	min-height: 10rem;
	resize: vertical;
}

/* La CTA: 56px, il raggio 12 del disegno, il verde dell'azione.
 *
 * ⚠ `:not(.scheda *)` per la stessa ragione di `.fiducia__azione` §9, e l'ho
 *    trovata misurando: dentro `.scheda` questo pulsante è
 *    `.radar-richiesta__invia`, e `scheda.css` §CTA lo veste per intero — 56px
 *    col **loro** `--raggio-interno`. Il mio selettore pesa 0,2,1 contro il
 *    loro 0,2,0 e `ossatura.css` si stampa dopo: senza il `:not` gli
 *    riscrivevo il raggio in casa loro (misurato: 12px al posto del suo).
 *    Fuori da `.scheda` non c'è nessun altro, e comando io.
 */
.radar-richiesta form button[type="submit"]:not(.scheda *) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--cta);
	padding: 0 24px;
	background: var(--azione);
	color: var(--azione-testo);             /* 7,92:1 */
	border: 0;
	border-radius: 12px;
	font: inherit;
	font-size: 1.125rem;                    /* 18px */
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease;
}

.radar-richiesta form button[type="submit"]:not(.scheda *):hover { background: var(--azione-hover); }

.radar-richiesta__nota {
	max-width: var(--colonna-lead);
	margin: 1.25rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--testo-2);
}


/* ==========================================================================
   8 · `/la-mia-scheda/` — il modulo da 42 campi

   Le classi le stampa `inc/scheda-professionista.php` e `radar.css` le veste
   già in parte. Qui si porta quello che manca: i raggi del disegno, le
   elevazioni, i bersagli, e le etichette in maiuscoletto mono.
   ========================================================================== */

.scheda-mia__intro {
	max-width: var(--colonna-lead);
	font-size: clamp(1rem, 1.19vw, 1.175rem);
	line-height: 1.65;
	color: var(--testo-2);
}

.modulo { max-width: var(--colonna-modulo); margin-inline: auto; }    /* 28/8: idem, l'involucro è largo quanto la testata */

/* --- Lo stato in cima: la pillola del disegno --------------------------- */

.modulo__stato {
	gap: 12px;
	padding: 14px 18px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-scheda);
	font-size: 1rem;
}

.modulo__stato-segno {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 12px;
	font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: .875rem;
	letter-spacing: .09em;
}

/* --- Gli avvisi ---------------------------------------------------------- */

.modulo__esito,
.modulo__sommario {
	border-radius: var(--raggio-scheda);
	box-shadow: var(--elev-1);
}

.modulo__esito { font-size: 1.0625rem; line-height: 1.6; }

/* --- I gruppi: la scheda del disegno ------------------------------------- */

.modulo__gruppo {
	margin-bottom: clamp(18px, 2.4vw, 26px);
	padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 28px) clamp(6px, 1vw, 12px);
	border-radius: var(--raggio-pannello);
	box-shadow: var(--elev-1);
}

.modulo__legenda {
	padding: 0;
	margin-left: 0;
	margin-bottom: 2px;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -.01em;
}

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

/* L'etichetta in maiuscoletto mono: è la lingua dei campi del disegno
   (`cerca.html` r.31 «DOVE», r.35 «COSA CERCHI»). Il disegno la scrive a
   13px; qui 14px, che è la misura del suo occhiello — 13px tracciato a .09em
   su un modulo lungo 42 campi è una lettura in salita. */
.modulo__etichetta {
	font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .09em;
	text-transform: uppercase;
	margin-bottom: .5rem;
}

/* L'aiuto e la nota salgono a 16px: sono corpo, e il corpo non scende sotto
   i 16 → il vincolo del progetto. Erano `--t-5`, 14px. */
.modulo__aiuto,
.modulo__nota {
	font-size: 1rem;
	line-height: 1.6;
}

.modulo__aiuto { max-width: var(--colonna-lead); }
.modulo__nota  { max-width: var(--colonna-lead); }

.modulo__casella { border-radius: var(--raggio-medio); }

.modulo__casella--file {
	min-height: var(--tocco);
	border-radius: var(--raggio-medio);
}

.modulo__errore {
	display: flex;
	gap: 8px;
	margin-top: .5rem;
	font-size: 1rem;
}

/* Il rosso non porta il significato da solo: davanti c'è un segno.
   → WCAG 1.4.1, ed è la regola che `radar.css` si è già data. */
.modulo__errore::before {
	content: "!";
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--errore);
	color: var(--superficie);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1;
}

/* --- Le spunte: bersagli da 44px pieni ----------------------------------- */

.modulo__casella-riga {
	min-height: var(--tocco);
	padding: 0 10px 0 0;
	border-radius: var(--raggio-piccolo);
}

.modulo__casella-riga:hover { background: var(--superficie-alt); }

.modulo__casella-riga label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: var(--tocco);
	padding: .5rem 0;
	line-height: 1.5;
}

/* Il quadratino era 22px, e 22 non basta: WCAG 2.5.8 vuole 24×24 per un
   bersaglio, e il quadratino **è** cliccabile anche se il bersaglio vero è
   tutta l'etichetta. Misurato sul banco il 15/8/2026. */
.modulo__spunta {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 10px;
}

.modulo__dove { line-height: 1.5; }

.modulo__proposte {
	border-radius: var(--raggio-scheda);
	padding: 1rem 1.125rem;
}

.modulo__caselle { gap: 2px 1rem; }

/* --- Le foto ------------------------------------------------------------- */

.modulo__foto-voce img { border-radius: var(--raggio-medio); }

/* --- Il fondo: la CTA da 56px --------------------------------------------
   ⚠ Il selettore è doppio apposta: il pulsante porta `class="pulsante
   modulo__invia"`, e `.pulsante` §9 sta più in basso in questo foglio — a
   parità di peso vincerebbe lui e la CTA tornerebbe una pillola da 44px.
   Misurato sul banco: 52,8px e raggio 999 prima di questa riga. */
.pulsante.modulo__invia {
	min-height: var(--cta);
	padding-inline: 24px;
	border-radius: 12px;
	font-size: 1.125rem;
	font-weight: 700;
}

.modulo__uscita { font-size: 1rem; }

.modulo__uscita a { color: var(--testo-2); }

/* L'invito a entrare, per chi arriva slegato: è la prima cosa che vede chi
   non ha ancora un account, ed era due paragrafi nudi. */
.modulo--invito {
	max-width: var(--colonna-lead);
	padding: clamp(24px, 3vw, 36px);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-pannello);
	box-shadow: var(--elev-1);
}

.modulo--invito p { font-size: 1.0625rem; line-height: 1.6; }
.modulo--invito p:last-child { margin-bottom: 0; }

.modulo--invito .pulsante { min-height: var(--cta); font-size: 1.0625rem; }


/* ==========================================================================
   9 · I comandi, portati alle misure del disegno
   ========================================================================== */

.pulsante {
	min-height: var(--tocco);
	border-radius: var(--raggio-pillola);
}

.pulsante--quieto { border-color: var(--testo-2); }   /* 5,95:1: un contorno che si vede */

.pulsante--grande {
	min-height: var(--cta);
	padding-inline: 24px;
	border-radius: 12px;
	font-size: 1.125rem;
	font-weight: 700;
}

/* --- La CTA della scheda immobile, che veniva 50px invece di 56 -----------
 *
 * `inc/fiducia.php` stampa `class="pulsante fiducia__azione"`. Sulla scheda
 * del **professionista** la veste `scheda.css` §CTA e viene 56px giusti — ma
 * `scheda.css` lo accoda `single-professionista.php`, e sulla scheda
 * dell'**immobile** quel foglio non c'è: il pulsante ricade su `.pulsante` e
 * viene 50px (padding .75rem × 2 + interlinea 1,6 × 16px). Misurato da
 * `ui-qa-expert`, e nasce da una riga mia: `.pulsante` §9.
 *
 * ⚠ `:not(.scheda *)` non è un vezzo: `ossatura.css` si stampa **dopo**
 *    `scheda.css` (riga 20 contro riga 18 del documento reso), quindi a pari
 *    peso vincerei io e riscriverei il raggio di un'altra squadra dentro casa
 *    loro. Con il `:not` questa riga semplicemente **non entra** in `.scheda`:
 *    lì comanda `scheda.css`, qui comando io. Il peso resta 0,3,0 e il
 *    comportamento è esplicito invece che fortunato.
 *
 * 📌 Non tocco `scheda.css` né `inc/fiducia.php`: sono di un'altra squadra.
 */
.pulsante.fiducia__azione:not(.scheda *) {
	min-height: var(--cta);
	border-radius: 12px;
	font-size: 1.125rem;
}


/* ==========================================================================
   10 · La pagina che non c'è — «C · fuori carta»

   Seconda mano sulla stessa pagina, stessa sostanza. La prima riscrittura di
   stasera (modulo + sei pastiglie, sotto) non si tocca: si riveste secondo
   `_disegno/404/Mappa.dc.html` — la carta come sfondo di tutta la fascia, un
   pannello chiaro semitrasparente sopra con dentro tutto quello che c'era.

   `radar.css` §«Pagina non trovata» porta ancora `.smarrito`,
   `.smarrito__codice`, `.smarrito__azioni`: sono la veste nuda di prima di
   stanotte. `functions.php` mette in coda `radar.css` prima di `ossatura.css`,
   quindi a parità di selettore vinco io — quelle regole restano scritte e
   inerti, non le cancello perché `radar.css` non è mio in questo giro.
   `.smarrito__codice` non si stampa più: il numero grande lascia il posto
   all'occhiello «404 — Fuori carta» del disegno (riusa `.occhiello` §3, non
   un nuovo blocco di stile).

   La carta è un SVG scritto a mano qui sotto: zero tessere, zero MapLibre,
   zero richieste di rete. I sei pin e la tinta "verde" pescano dai token già
   in `radar.css` (`--pin-*`), non da un colore nuovo scritto a mano.
   ========================================================================== */

.smarrito {
	max-width: 64rem;
	margin-inline: auto;
}

.smarrito__scena {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--raggio-pannello);
}

/* Sotto i 701px la fascia resta dentro la colonna (banda contenuta, non a
   tutta pagina) — `overflow: hidden` la tiene negli angoli arrotondati. */
@media (max-width: 700px) {
	.smarrito__scena { overflow: hidden; }
}

/* Mobile-first: sotto i 701px la carta è una fascia piatta sopra il
   pannello — misurato a 375px, vedi rapporto.
   ⚠ `max-width: none` non è decorativo: `radar.css` porta la riga generica
   `img, svg, video { max-width: 100%; height: auto; }`. Sul mio `<svg>`
   assoluto quel `100%` si risolve sulla larghezza di `.smarrito__scena`
   (il contenitore posizionato, dentro la colonna), e blocca `width: 100vw`
   qui sotto a 1024px — misurato: la carta restava chiusa nella colonna
   anche col resto della regola giusto. `radar.css` non è mio in questo giro,
   quindi la riga si scavalca da qui, non si tocca là. */
.smarrito__mappa {
	display: block;
	width: 100%;
	max-width: none;
	height: 140px;
}

.smarrito__mappa-terra { fill: var(--bordo); }

.smarrito__mappa-strada {
	fill: none;
	stroke: var(--superficie);
	stroke-width: 12;
	opacity: .8;
}

/* La chiazza verde riusa il token del pin «terreni»: niente verde nuovo. */
.smarrito__mappa-verde { fill: var(--pin-terreni); opacity: .16; }

.smarrito__mappa-pin {
	r: 9px;
	stroke: var(--superficie);
	stroke-width: 2.5;
}

.smarrito__mappa-pin--affitto { fill: var(--pin-affitto); }
.smarrito__mappa-pin--vendita { fill: var(--pin-vendita); }
.smarrito__mappa-pin--vacanza { fill: var(--pin-vacanza); }
.smarrito__mappa-pin--terreni { fill: var(--pin-terreni); }
.smarrito__mappa-pin--servizi { fill: var(--pin-servizi); }
.smarrito__mappa-pin--lavoro  { fill: var(--pin-lavoro); }

/* Il punto che non c'è: un cerchio tratteggiato terracotta con una croce
   dentro, a sinistra dei sei pin — l'unico segno "rotto" sulla carta. */
.smarrito__mappa-assente {
	r: 30px;
	fill: none;
	stroke: var(--marchio);
	stroke-width: 2.5;
	stroke-dasharray: 7 8;
}

.smarrito__mappa-assente-segno {
	stroke: var(--marchio);
	stroke-width: 2.5;
	stroke-linecap: round;
}

.smarrito__pannello {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(22px, 5vw, 40px);
	text-align: left;
	background: rgba(253, 251, 249, .94);   /* misurato ≥ 4,5:1, vedi rapporto */
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-pannello);
	box-shadow: var(--elev-4);
}

/* Il vecchio `.smarrito` centrava tutto; qui il pannello è allineato a
   sinistra come nel disegno — si azzerano margini e larghezze ereditate. */
.smarrito__pannello .titolone,
.smarrito__pannello p,
.smarrito__pannello .smarrito__cerca,
.smarrito__pannello .smarrito__categorie,
.smarrito__pannello .smarrito__azioni,
.smarrito__pannello .smarrito__contatto {
	max-width: none;
	margin: 0;
}

.smarrito__pannello .smarrito__azioni,
.smarrito__pannello .smarrito__categorie {
	justify-content: flex-start;
}

/* Dai 701px in su la carta torna sfondo di tutta la fascia e il pannello si
   stacca largo circa 560px, come in `Mappa.dc.html`. */
@media (min-width: 701px) {
	.smarrito__scena {
		flex-direction: row;
		align-items: center;
		min-height: 32rem;
		padding: clamp(28px, 4vw, 56px);
	}

	/* La carta rompe la colonna: `.smarrito__scena` sta dentro `.contenitore`
	   (largo `--colonna`, 120rem = 1920 dal 28/8/2026), ma la fascia deve
	   toccare i due bordi della
	   finestra come la testata. `left: 50%; transform: translateX(-50%)`
	   ricentra sul VIEWPORT e non sulla colonna, perché `.contenitore` è
	   centrato con `margin-inline: auto`: il suo punto medio coincide sempre
	   col punto medio della finestra, qualunque sia la sua larghezza. Il
	   pannello non si muove — resta figlio della colonna. */
	.smarrito__mappa {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 100vw;
		height: 100%;
		transform: translateX(-50%);
		z-index: 0;
	}

	.smarrito__pannello { max-width: 35rem; }
}

/* Rete di sicurezza: `100vw` sopra conta anche la barra di scorrimento
   verticale su Windows/Chrome (qualche pixel in più della finestra visibile).
   Scoperto misurando, non ipotizzando — vedi rapporto. Scope alla sola 404
   (`body.error404`, la classe che WordPress mette da solo su `is_404()`): non
   tocca nessun'altra pagina del sito. */
body.error404 { overflow-x: hidden; }

/* --- Il modulo di ricerca, nato il 27/8/2026: la cosa che mancava --------- */

.smarrito__cerca {
	padding: clamp(18px, 2.4vw, 26px);
	text-align: left;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-pannello);
	box-shadow: var(--elev-1);
}

.smarrito__campi {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.smarrito__campo {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1 1 11rem;
	min-width: 0;
}

/* Bordo 2px in `--testo-2` e non nel `--bordo` più chiaro del disegno: è lo
   stesso scarto, con la stessa ragione, di `.radar-richiesta form input` più
   sopra — 3:1 minimo (WCAG 1.4.11) sul contorno di un campo. */
.smarrito__valore {
	display: block;
	width: 100%;
	min-height: var(--tocco);
	padding: .6rem 1rem;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--testo);
	background: var(--fondo);
	border: 2px solid var(--testo-2);
	border-radius: var(--raggio-medio);
}

.smarrito__vai {
	flex: 0 1 auto;
	white-space: nowrap;
}

.smarrito__categorie { justify-content: center; }

/* `:not(.occhiello)` — senza, questa regola (classe+elemento, più specifica
   di `.occhiello` da sola) vince sempre sul `<p class="occhiello">` del
   pannello e gli spegne il terracotta. Trovato misurando col DOM reso, non
   leggendo il CSS: `.occhiello` sembrava a posto sulla carta. */
.smarrito p:not(.occhiello) { font-size: 1.0625rem; line-height: 1.65; color: var(--testo-2); }

.smarrito__contatto {
	font-size: 1rem;
	color: var(--testo-2);
}

.smarrito__contatto a { color: var(--marchio); }


/* ==========================================================================
   11 · `singular.php` — il modello su cui cade tutto il resto

   Era la causa tecnica di quello che Gabriele ha visto: una pagina senza
   modello suo finiva qui, e qui non c'era una griglia. Adesso c'è.
   ========================================================================== */

.pagina {
	padding-block: clamp(32px, 5vh, 64px);
}

.pagina__capo { margin-bottom: clamp(20px, 3vh, 32px); }

.pagina__corpo { max-width: var(--colonna-lead); }

.pagina__corpo > * { max-width: 100%; }

.pagina__corpo p,
.pagina__corpo li { font-size: 1.0625rem; line-height: 1.7; }

.pagina__corpo img {
	max-width: 100%;
	height: auto;
	border-radius: var(--raggio-pannello);
}


/* ==========================================================================
   12 · Quello che il vincolo pretende

   · corpo ≥ 16px · interlinea ≥ 1,5 · contrasto ≥ 4,5:1 (misurati e scritti
     accanto a ogni coppia) · bersagli ≥ 44px · 200% di zoom
   · `letter-spacing .12em` senza perdere contenuto → WCAG 1.4.12
   ========================================================================== */

/* WCAG 1.4.12: chi si impone la spaziatura non deve perdere niente. Le
   pillole e i bersagli crescono invece di tagliare. */
.occhiello,
.porta__nome,
.modulo__etichetta,
.testata .menu a,
.testata__azione,
.modulo__stato-segno { overflow-wrap: break-word; }

.testata .menu,
.porte,
.smarrito__azioni,
.pieDiPagina > .contenitore { min-width: 0; }

/* Al 200% di zoom una finestra da 1280 vale 640px: le fasce si stringono, le
   griglie collassano da sole (`auto-fit` + `min(100%, …)`), e il piede va in
   colonna. */
@media (max-width: 46rem) {
	.titolone { max-width: none; }
	.modulo__gruppo { padding-inline: 16px; }
	.radar-richiesta form { padding: 18px 16px; }
}

/* Chi ha chiesto meno movimento non ne riceve. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Su carta l'inchiostro non serve a nessuno. */
@media print {
	.fascia--inchiostro,
	.pieDiPagina { background: none; color: #000; }
	.pieDiPagina a { color: #000; }
}


/* ==========================================================================
   La firma di NeXeN nel piede — 17/8/2026

   Ordine di Gabriele: «rimpicciolire la scritta NeXeN lasciando la X in rosso».

   🚨 Il rosso è **`#FD303C`**, e la scelta l'ha decisa una misura, non un gusto.
   La wiki ne porta due: `#E23440` è quello della **firma sui siti**
   ([[DECISIONI]] 2/8, già in pagina su cimiteri.online e La Pesca), `#FD303C` è
   il **rosso dell'identità**, campionato dai file del logo
   (`04 Brand/Design Lab/IDENTITA-VISIVA`).
   Misurati tutti e due sull'inchiostro di questo piede (`#17110E`):
   **`#E23440` fa 4,27:1** — sotto i 4,5 di un testo — e **`#FD303C` fa 5,04:1**.
   👉 Quindi qui vince l'identità, e non per gerarchia: perché è quella che si
   legge. Non ho inventato una terza tinta schiarendo la prima, che era la strada
   facile: fra due valori che il marchio ha già, si prende quello giusto.
   ⚠ **E lascia una cosa da guardare fuori da qui**: se `#E23440` fa 4,27 su
   questo fondo, vale la pena misurarlo **sui piedi di cimiteri.online e de La
   Pesca**, dove quel rosso è in pagina da agosto. Il loro fondo è un altro e
   potrebbe passare — ma nessuno l'ha contato.

   ⚠ E il rosso sta **solo sulla X**, non su «Ne» e «N»: è quello che chiede
   l'ordine, ed è anche l'unica versione che regge il contrasto — il rosso pieno
   su tre lettere di seguito, a corpo piccolo, si legge peggio del testo intorno.
   ========================================================================== */

.pieDiPagina .firma {
	color: var(--su-inchiostro);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Più piccolo del testo intorno, non minuscolo: sotto gli 0,8em una firma
   diventa una cosa che si nasconde, e questa non si nasconde. */
.firma__nome {
	font-size: .88em;
	font-weight: 600;
	letter-spacing: .01em;
}

/* 5,04:1 sull'inchiostro del piede, misurato. Vedi il riquadro qui sopra. */
.firma__x { color: #FD303C; }

/* 6/9/2026, cancello S-RIMISURA-5: il link di credito «NeXeN Web» nella riga
   legale era alto 15 px, sotto i 44 px che P2.9 chiede a ogni bersaglio del
   piede. Padding verticale con margine negativo: stessa riga a vista, tocco
   da 44 px. */
.pieDiPagina .firma,
footer .firma {
	display: inline-block;
	padding: .85rem .15rem;
	margin: -.85rem 0;
}

/* ==========================================================================
   99 · PIEDE-7-9 — S-PIEDE, 7/9/2026, blocco in coda
   ==========================================================================

   Il piede torna alla forma del disegno (`_disegno/sezioni/leggibili/
   partner.txt` righe 126-240): vetrina (titolo, capoverso, due bottoni) +
   tre colonne (Cerca · Artigiani · Sicurezza) in home, le tre colonne da
   sole sulle altre pagine, il nastro dei comuni solo in home. Il markup è
   in `footer.php`; qui solo l'aspetto — e SOLO qui, in coda: il resto di
   questo file non si tocca (regola del fronte, non di questo file).

   I colori sono quelli già misurati sopra, non nuovi:
   `--su-inchiostro` 16,79:1 · `--su-inchiostro-soft` 7,88:1 · `--inchiostro`
   su `--azione-scuro` 5,74:1 (righe 162-166, 209-216) — riusarli vuol dire
   che questo blocco non deve rimisurare nulla da zero, l'ha già fatto chi
   li ha dichiarati.

   ⚠ `var(--sans)` del disegno non esiste in questo tema: qui il sans è
   `var(--font)` (`radar.css` r.399) — nome diverso, stesso ruolo. Non è un
   refuso: il disegno ha il suo vocabolario di token, il tema il suo.
   ========================================================================== */

/* La vetrina — titolo, capoverso, bottoni a sinistra; le tre colonne a
   destra. Centrato come nel disegno (righe 127-136: `text-align:center`,
   `justify-items:center`), non un'interpretazione: è quello che il markup
   catturato dice davvero. `.contenitore` porta già larghezza e margini
   (radar.css §Impianto): qui solo la griglia. */
/* 🚨 8/9/2026 — UN ASSE SOLO.
   Il piede aveva il titolo a bandiera e il capoverso, i bottoni, le tre
   colonne e la riga legale **centrati**: due assi nello stesso blocco, che
   è la ragione per cui Gabriele lo sentiva «non ancora centrato» pur
   essendo, letteralmente, centrato. Codex (8/9): «la parte promozionale e
   la parte di servizio sembrano due piedi diversi appoggiati nello stesso
   contenitore: serve un unico asse comune».
   ⚠ E la vetrina passa da 1fr 1fr a 5/7: metà e metà lasciava le tre
   colonne strette e spinte a destra, con un vuoto in mezzo. */
.pieDiPagina__vetrina {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vh, 56px);
	padding-block: clamp(40px, 6vh, 64px) clamp(28px, 4vh, 40px);
	text-align: start;
}

@media (min-width: 60rem) {
	.pieDiPagina__vetrina {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

.pieDiPagina__presentazione { min-width: 0; }

.pieDiPagina__titolo {
	margin: 0 0 18px;
	max-width: 14em;
	font: 400 clamp(1.9rem, 3.2vw + 1rem, 3.6rem)/1.08 var(--font-titolo);
	letter-spacing: -.02em;
	color: var(--su-inchiostro);
}

.pieDiPagina__testo {
	margin: 0 0 24px;
	max-width: 26em;
	font: 400 1.0625rem/1.65 var(--font);
	color: var(--su-inchiostro-soft);
}

.pieDiPagina__azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
}

/* Bottoni — 54px come nel disegno (righe 132-133), sopra i 44px di
   `--tocco` comunque. `a.pieDiPagina__cta` pareggia la specificità di
   `.pieDiPagina a` (riga ~510 di questo file) e vince per ordine: niente
   sottolineatura ereditata su un bottone. */
a.pieDiPagina__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding-inline: 24px;
	border-radius: 12px;
	font: 700 1.0625rem/1 var(--font);
	text-decoration: none;
	transition: transform .18s;
}

a.pieDiPagina__cta:hover { transform: translateY(-1px); }

a.pieDiPagina__cta--piena {
	background: var(--azione-scuro);
	color: var(--inchiostro);   /* 5,74:1 sull'azione-scuro, già misurato sopra */
}

a.pieDiPagina__cta--piena:hover { color: var(--inchiostro); }

a.pieDiPagina__cta--contorno {
	border: 1px solid var(--inchiostro-bordo);
	color: var(--su-inchiostro);   /* 16,79:1 */
}

/* Le tre colonne — Cerca · Artigiani · Sicurezza. Da sole (fuori home,
   dentro un `.contenitore` semplice) portano il proprio padding-block;
   dentro la vetrina (home) quel padding lo dà già `.pieDiPagina__vetrina`,
   quindi qui si azzera per non sommare i due. */
.pieDiPagina__colonne {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding-block: clamp(40px, 6vh, 64px) clamp(28px, 4vh, 40px);
	text-align: start;
}

.pieDiPagina__vetrina .pieDiPagina__colonne { padding-block: 0; }

@media (min-width: 60rem) {
	.pieDiPagina__colonne {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(24px, 3vw, 48px);
	}
}

/* Il nastro dei comuni — solo in home (`footer.php` lo stampa dietro
   `is_front_page()`). Cornice con bordo sopra/sotto come nel disegno
   (righe 166), `overflow:hidden` sui DUE livelli: qui e sulla pista. Un
   solo overflow non basta a garantire zero scorrimento orizzontale della
   PAGINA se qualcosa nel mezzo cambia — due tagli, zero rischio. */
.pieDiPagina__nastroCornice {
	overflow: hidden;
	border-block: 1px solid var(--inchiostro-bordo);
	padding-block: 20px 18px;
}

/* L'intestazione del nastro — 8/9/2026. Senza, era un fregio di nomi che
   scorreva e nessuno sapeva perché; con, è una via per entrare nella mappa
   da una provincia. La riga corta color marchio sopra il titolo è lo stesso
   segno editoriale delle fasce di sezione: un filo, non un ornamento. */
.pieDiPagina__nastroTesta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.pieDiPagina__nastroTitolo {
	position: relative;
	margin: 0;
	padding-top: 12px;
	font: 700 .78rem/1 var(--font);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--su-inchiostro-soft);
}

.pieDiPagina__nastroTitolo::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 34px;
	height: 2px;
	background: var(--marchio-chiaro, var(--marchio));
}

.pieDiPagina__nastroTutte {
	color: var(--su-inchiostro-soft);
	font-size: .9rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.pieDiPagina__nastroTutte:hover,
.pieDiPagina__nastroTutte:focus-visible {
	color: var(--su-inchiostro);
	border-bottom-color: var(--marchio-chiaro, var(--marchio));
}

/* ⚠ 64 secondi, non 46: con l'intestazione sopra il nastro si legge invece
   di essere solo guardato, e un nome che passa troppo in fretta non si fa
   leggere né cliccare. Consigliato da Codex (8/9): «una traversata completa
   dovrebbe durare almeno 50-70 secondi». */
.pieDiPagina__nastro {
	display: flex;
	width: max-content;
	overflow: hidden;
	animation: pieDiPagina-nastro 64s linear infinite;
}

/* Si ferma col mouse sopra e col fuoco dentro: un collegamento che scappa
   sotto il puntatore non è un collegamento. `focus-within` è la metà che
   conta per chi va a tastiera — senza, il nome che ha appena preso il fuoco
   continuerebbe a scorrere via. */
.pieDiPagina__nastroCornice:hover .pieDiPagina__nastro,
.pieDiPagina__nastroCornice:focus-within .pieDiPagina__nastro {
	animation-play-state: paused;
}

.pieDiPagina__nastroGiro {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-inline-end: 10px;
	font: 400 clamp(1.1rem, 1vw + .9rem, 1.6rem)/1 var(--font-titolo);
	color: var(--su-inchiostro-soft);
	white-space: nowrap;
}

.pieDiPagina__nastro a {
	color: inherit;
	text-decoration: none;
}

.pieDiPagina__nastro a:hover { color: var(--oro-vivo); }

.pieDiPagina__nastroPunto { opacity: .55; }

/* La pista è due giri uguali di fila: traslare del 50% del suo totale è
   traslare di un giro intero, quindi il taglio non si vede — tecnica nota,
   non quella (non catturata) del disegno. */
@keyframes pieDiPagina-nastro {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ⛔ Ferma qui, non altrove: chi ha un vestibolare che reagisce al
   movimento non deve vedere il nastro scorrere, punto — non «più piano».
   La pista torna a un elenco statico, a capo, un giro solo (il secondo,
   doppione per il loop, si nasconde: senza non aggiunge niente da fermo). */
@media (prefers-reduced-motion: reduce) {
	.pieDiPagina__nastro {
		width: auto;
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
	.pieDiPagina__nastroGiro:nth-of-type(2) { display: none; }
}

/* La targhetta col marchio, sopra la riga legale — stessa posizione del
   disegno (la coda del footer). `.marchio.marchio--piede` è già stilato
   altrove (marchio.css): qui solo la riga che lo contiene. */
.pieDiPagina__marchietta {
	display: flex;
	justify-content: flex-start;
	margin: 0;
}

/* --------------------------------------------------------------------------
   🚨 8/9/2026 — LA TESTATA PIÙ LEGGERA.

   Gabriele: «il chiaro/scuro lo farei attivare con un'icona, e non quel tasto
   enorme; la voce accedi la renderei più delicata con un'icona utente».

   Misurato: il bottone del tema era una pastiglia con dentro «Tema: automatico»
   — 150 px su una barra dove il marchio ne prende 170. Un comando di servizio
   che pesava quanto l'identità del sito.

   👉 Il tema diventa un tondo con il suo segno. Le parole **restano nel
   markup** e restano il nome accessibile del bottone («Tema: scuro»): si
   nascondono alla vista, non alla lettura — toglierle avrebbe lasciato un
   bottone senza nome, che per chi legge con le orecchie è un bottone muto.
   ⚠ 44 px netti di bersaglio anche da tondo: è il minimo che il resto del
   sito rispetta ovunque.
   -------------------------------------------------------------------------- */
/* ⚠ Selettore aggiornato il 9/9/2026 (lotto C, voce 64 di
   `DETTO-DA-GABRIELE.md`): `.tema` è diventato l'involucro del menù a
   tendina in `marchio.css` §5 (`position:relative`, non più la pillola).
   La pillola vestita qui — quella che questo commento del 8/9 chiama
   «tondo» — è `.tema__bottone`; il tondo si preme e apre le tre voci, non
   fa più girare lo stato da solo. */
:root[data-js] .testata .tema__bottone {
	gap: 0;
	width: var(--tocco, 44px);
	padding: 0;
	justify-content: center;
	border-color: var(--bordo);
}

.testata .tema__bottone .tema__detto,
.testata .tema__bottone .tema__stato {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* «Accedi»: contorno tenue invece del bordo pieno, e l'icona davanti. */
.testata__azione--accedi {
	gap: 8px;
	padding: 0 14px;
	border-color: var(--bordo);
	font-weight: 500;
}

.testata__azione--accedi:hover,
.testata__azione--accedi:focus-visible {
	border-color: var(--testo-2);
}

.testata__azione-segno { flex: none; }

/* ⚠ 8/9/2026 — `.testata__azione::before` disegna già un segno a goccia
   (riga ~473). Con l'icona utente vera dentro il markup ne comparivano DUE,
   uno accanto all'altro: misurato guardando la cattura, non il codice. Qui
   resta l'icona vera e sparisce il segno generico — su questo bottone, non
   sugli altri che usano la stessa classe. */
.testata__azione--accedi::before { content: none; }

/* «Registrati», 9/9/2026 — stessa pillola tenue di «Accedi» qui sopra: stessa
   famiglia di `.testata__azione`, nessuna classe nuova inventata. Sta sempre
   ACCANTO ad «Accedi» (mai al suo posto): due gesti diversi, «entra» e
   «iscriviti», non un sinonimo dell'altro. → `header.php`, voci 60-61 di
   DETTO-DA-GABRIELE.md. */
.testata__azione--registrati {
	gap: 8px;
	padding: 0 14px;
	border-color: var(--bordo);
	font-weight: 500;
}

.testata__azione--registrati:hover,
.testata__azione--registrati:focus-visible {
	border-color: var(--testo-2);
}

.testata__azione--registrati::before { content: none; }

/* ⚠ 8/9/2026 — le colonne del piede sono QUATTRO da oggi («Per chi lavora»,
   con listino, rivendica, gestisci e registrati: pagine che esistevano e non
   erano linkate da nessuna parte). A ≥60rem stavano su `repeat(3, …)` e la
   quarta andava a capo da sola, larga quanto tutta la riga. */
@media (min-width: 60rem) {
	.pieDiPagina__colonne {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 40rem) and (max-width: 59.999rem) {
	.pieDiPagina__colonne {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}