/* =============================================================================
   LA SCHEDA ANNUNCIO, VESTITA — `single-immobile.php`
   Squadra F3, turno 7 (17/8/2026). Sorgente del disegno:
   `_disegno/schermate/annuncio.html` (11.933 byte) e `_disegno/token.css`.

   Perché esiste un foglio a parte e non tre righe in `radar.css`: la scheda
   annuncio è la sola pagina del tema che apre su una **fascia**, cioè su una
   superficie del racconto invece che sul fondo dell'interfaccia. Quella
   superficie ha una famiglia di token sua — «notte» — che nessun altro foglio
   dichiara, e tenerla qui vuol dire che chi non apre l'annuncio non la scarica.

   👉 Si accoda **dopo** `radar-ossatura`, perché ne usa i token (`--fascia`,
   `--tocco`, `--cta`, i raggi, le elevazioni) e deve vincere sulle regole di
   `.galleria`, `.dati` e `.fiducia` di `radar.css`.

   ⚠ Quello che il disegno ha e questa pagina **non ha**, perché non ha il dato:
   il riquadro «prezzo sotto la media della zona (−18 %)», la mappa a cerchio da
   300 m e le pastiglie delle distanze. Non sono stati finti: quando `radar-core`
   li produrrà si vestono qui, con le classi che il PHP porterà.

   Indice
     1 · La famiglia «notte»
     2 · La fascia della testa
     3 · La voce: occhiello, titolo, luogo, prezzo
     4 · Le pillole di categoria sulla fascia
     5 · Il corpo, e la colonna larga
     6 · Le foto
     7 · I numeri, a filetto
     8 · Il pannello della fiducia
     9 · Il telefono
    10 · Chi non vuole il movimento
    11 · I pannelli dei servizi vicini (POI) — squadra S1, turno 10
   ============================================================================= */


/* ==========================================================================
   1 · LA FAMIGLIA «NOTTE»

   🚨 «Notte» **non** è «inchiostro», e le due non si scambiano. `--inchiostro`
   (`ossatura.css` §1) è una fascia scura in tutti e due i temi. `--notte` è il
   nome di una **superficie**, non di un colore: in chiaro vale **#F6F1EA**,
   cioè un avorio chiarissimo, e solo in scuro diventa #0A0807. Il disegno la
   chiama così perché è la fascia che regge il racconto, non perché sia nera.
   I valori sono copiati da `_disegno/token.css` §superfici del racconto.

   Contrasti misurati (17/8/2026, sulla coppia vera, chiaro · scuro):
     --notte-testo     su --notte   15,22:1 · 17,48:1
     --notte-soft      su --notte    5,30:1 ·  6,86:1
     --marchio-fascia  su --notte    4,85:1 ·  6,77:1

   ⚠ 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 da F0, la prova sta
   in `radar.css` §tema. Un browser senza `light-dark()` non entra qui sotto e
   resta con questo `:root`, che è il chiaro completo.
   ========================================================================== */

:root {
	--notte:          #F6F1EA;
	--notte-alt:      #FEFDFB;
	--notte-testo:    #1F1B18;
	--notte-soft:     #6B625C;
	--notte-bordo:    rgba(31, 27, 24, .14);
	--marchio-fascia: #B5452E;

	/* 🚨 L'ALONE DORATO NON PUÒ ESSERE UN `light-dark()`.
	   Il disegno mette in cima alla fascia
	   `radial-gradient(90% 70% at 82% 8%, rgba(179,122,0,.16), transparent 62%)`.
	   `light-dark()` accetta **solo colori**: su un gradiente non si applica, e
	   nemmeno su un `filter` o su un'ombra a più falde. L'altra strada è metterlo
	   dove un colore c'è davvero, cioè sulla **fermata** del gradiente: il
	   gradiente resta uno solo e cambia il suo colore.

	   ⚠ E in chiaro l'alone non è quello del disegno: a .16 su un fondo avorio
	   il punto più carico diventa #EBDEC5, e lì l'occhiello `--marchio-fascia`
	   scende a **4,09:1**, sotto AA. Misurato a scalare: .12 → 4,28 · .10 → 4,36
	   · .08 → 4,45 · **.06 → 4,56**. In chiaro sta a .06, in scuro resta il .16
	   del disegno (5,79:1 nel punto peggiore). L'alone è decorazione: quando
	   litiga con una lettera, perde l'alone. */
	--alone-oro: rgba(179, 122, 0, .06);
}

@supports (color: light-dark(#000, #fff)) {
	:root {
		--notte:          light-dark(#F6F1EA, #0A0807);
		--notte-alt:      light-dark(#FEFDFB, #141110);
		--notte-testo:    light-dark(#1F1B18, #F4EFE9);   /* 15,22:1 · 17,48:1 */
		--notte-soft:     light-dark(#6B625C, #A2958B);   /*  5,30:1 ·  6,86:1 */
		--notte-bordo:    light-dark(rgba(31, 27, 24, .14), rgba(247, 242, 235, .10));
		--marchio-fascia: light-dark(#B5452E, #E07A5F);   /*  4,85:1 ·  6,77:1 */

		--alone-oro:      light-dark(rgba(179, 122, 0, .06), rgba(179, 122, 0, .16));
	}
}


/* ==========================================================================
   2 · LA FASCIA DELLA TESTA

   ⚠ `header.php` apre `<main id="contenuto" class="contenitore">`, largo al
   massimo `--colonna` (120rem = 1920, dal 28/8/2026) e centrato. Una fascia
   dentro un contenitore non è una fascia: si ferma lì e lascia due margini di
   fondo pagina ai lati.
   `ossatura.css` §2 disinnesca il contenitore sulle due pagine che ha vestito
   lui, con la classe che WordPress mette da sé sul `<body>`. Qui si fa lo
   stesso, con la classe di questa: `body.single-immobile`. Zero PHP condiviso
   toccato, e la regola vale solo dove serve.
   ========================================================================== */

body.single-immobile #contenuto.contenitore {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* La fascia, in un blocco solo.
   · `padding`: `--fascia` di `ossatura.css` §1, cioè il valore verbatim del
     disegno — `clamp(60px,9vh,120px) clamp(20px,4vw,60px)`. Sotto va
     `--fascia-stacco` e non la fascia intera: testa e corpo sono **una pagina
     sola**, non due sezioni.
   · la griglia a una colonna sostituisce l'involucro che il disegno ha nel
     markup: larga al massimo `--colonna-larga` (= `--colonna`, 1920 dal
     28/8/2026) e centrata, fa lo stesso mestiere di un `<div>` senza
     aggiungere un nodo che il lettore di schermo attraversa.
   · il filetto in fondo serve in chiaro, dove la fascia avorio e il fondo
     avorio si incollano e la testa sparisce. */
.annuncio__testa {
	display: grid;
	/* 28/8/2026, casella 8.6: stesso conto di `.annuncio__corpo` qui sopra —
	   la banda toglie `var(--fascia-x)` di suo (`padding`, riga sotto) prima
	   che questa colonna esista, quindi si ricostruisce `100vw - 2rem` (il
	   tetto della testata) partendo dal box già ristretto: `100% + 2×fascia-x
	   - 2rem`. Senza, la colonna del titolo resta larga quanto la fascia
	   permette (1800 a 1920, misurato) invece che quanto la testata (1888).

	   🚨 E senza `minmax(0, …)`: provato, e con quel minimo a zero Chrome
	   tratta la traccia come comprimibile e la fa tornare a 1800 — la stessa
	   `1888px` **letterale**, senza `minmax`, misura 1888 giusti. `minmax(0,X)`
	   serve a non far esplodere una griglia quando il contenuto non può
	   restringersi (numeri, parole lunghe); qui il contenuto è testo che va a
	   capo da solo, quindi la traccia può essere una lunghezza diretta. */
	grid-template-columns: min(calc(100% + 2 * var(--fascia-x) - 2rem), var(--colonna-larga));
	justify-content: center;
	align-content: start;
	position: relative;
	isolation: isolate;
	padding: var(--fascia);
	padding-bottom: var(--fascia-stacco);
	background-color: var(--notte);
	color: var(--notte-testo);
	border-bottom: 1px solid var(--notte-bordo);
	overflow: hidden;
}

/* 🚨 L'alone sta su uno strato suo, e non è un vezzo: è il modo di **restare
   misurabili**. Messo come `background-image` sulla fascia, il cancello visivo
   trova un elemento con un'immagine di fondo, non sa che è un gradiente e non
   una fotografia, e dichiara «sopra una foto: il contrasto qui non vale» su
   tutte e cinque le righe della testa — misurato il 17/8, quattro ⚠ su quattro.
   Un numero che lo strumento si rifiuta di dare è un numero che nessuno
   controlla. Su un pseudo-elemento il fondo della fascia resta un colore pieno,
   il cancello risale gli antenati e trova `--notte`, e i contrasti tornano
   numeri. È anche la struttura del disegno, che l'alone lo mette in un `<div>`
   suo in `position:absolute`.
   `z-index: -1` con `isolation: isolate` sul padre: lo strato passa sopra il
   fondo della fascia e resta sotto al testo, senza dover toccare i figli. */
.annuncio__testa::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(90% 70% at 82% 8%, var(--alone-oro), transparent 62%);
	pointer-events: none;
}


/* ==========================================================================
   3 · LA VOCE — occhiello, titolo, luogo, prezzo
   ========================================================================== */

/* L'occhiello è quello di `ossatura.css` §3 — `500 14px/1 mono`, maiuscoletto,
   `letter-spacing .14em`, filetto da 24×1px davanti. Qui cambia solo il colore,
   perché il fondo è un altro: `--marchio-fascia`, che è il `--marchio` della
   famiglia notte.
   ⚠ Il filetto resta `currentColor` e **non** `--oro`: `ossatura.css` §1 lo ha
   già misurato — l'oro su fondo chiaro fa 2,26:1, cioè un filetto che non si
   vede. Su questa fascia, che in chiaro è avorio, varrebbe lo stesso. */
.annuncio__testa .occhiello { color: var(--marchio-fascia); }

.annuncio__testa h1 {
	max-width: 14em;
	margin: 0 0 10px;
	font-family: var(--font-titolo);
	font-size: clamp(2.35rem, 4.55vw, 4.7rem);   /* 37,6 → 75,2 px, dal disegno */
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--notte-testo);
}

.annuncio__luogo {
	max-width: var(--colonna-stretta);
	margin: 0 0 18px;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--notte-soft);
}

/* Il prezzo — `400 clamp(37.6px,3.37vw,51.5px)/1 serif` nel disegno, con le
   cifre tabellari.
   ⚠ `font-variant-numeric: tabular-nums` **non si ridichiara**: `.prezzo` ce
   l'ha già in `radar.css` §tabular-nums, e il perché è scritto lì — su un
   portale immobiliare il confronto fra prezzi è l'azione principale. Riscriverlo
   qui sarebbe la seconda copia, cioè quella che un giorno diverge. */
.annuncio__prezzo {
	align-items: baseline;
	gap: .55rem;
	margin: 0 0 6px;
	color: var(--notte-testo);
}

.annuncio__prezzo .prezzo {
	font-family: var(--font-titolo);
	font-size: clamp(2.35rem, 3.37vw, 3.22rem);   /* 37,6 → 51,5 px, dal disegno */
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
}

.annuncio__prezzo-nota,
.annuncio__spese {
	font-size: 1rem;
	color: var(--notte-soft);   /* 5,30:1 · 6,86:1 */
}

.annuncio__spese { margin: 0; }


/* ==========================================================================
   4 · LE PILLOLE DI CATEGORIA SULLA FASCIA

   Restano quelle di `radar.css` §pillole — pastiglia piena del colore del pin
   accanto a un testo a contrasto pieno, perché Okabe-Ito è una palette per
   superfici e non per l'inchiostro. Qui cambiano due cose sole: il bersaglio
   arriva a 44px (`--tocco`, DESIGN e WCAG 2.5.8) e il bordo prende quello della
   famiglia notte, perché `--bordo` su questa superficie è quasi invisibile.
   ========================================================================== */

.annuncio__categorie { margin-bottom: 14px; }

.annuncio__categorie .pillola {
	min-height: var(--tocco);
	padding-inline: 1rem;
	border-color: var(--notte-bordo);
	font-size: .9375rem;
}


/* ==========================================================================
   5 · IL CORPO, E LA COLONNA LARGA

   Il contenitore è disinnescato (§2), quindi il corpo si dà da sé la colonna e i
   margini laterali della fascia: così testa e corpo si incolonnano sullo stesso
   asse invece di sfalsarsi di qualche pixel.

   🚨 Riaperto il 28/8/2026, casella 8.6. La vecchia formula,
   `calc(var(--colonna-larga) + 2 * var(--fascia-x))`, dava un senso quando
   `--colonna-larga` era 1500: a una finestra vera (1920) il conto (1500+120
   =1620) restava sotto il vivo, e il margine che avanzava intorno era voluto
   — un respiro in più oltre la fascia. Da quando `--colonna-larga` vale come
   `--colonna` (1920, `ossatura.css` §1), quel conto supera **sempre** la
   finestra: il `max-width` smette di legare, il box riempie il genitore
   (`main`, disinnescato = 100vw) **senza margine**, e non è più largo quanto
   la testata (misurato: 1920 contro 1888 a 1920px — 32px di scarto, lo
   stesso 2rem che `.contenitore` toglie e qui non toglieva nessuno).
   👉 Il box prende lo stesso tetto della testata — `min(100vw - 2rem,
   --colonna)` — e non più la somma con la fascia. Verificato alle quattro
   larghezze del collaudo: 1888/1408/736/343, uguale alla testata a ognuna. */
.annuncio__corpo {
	max-width: min(calc(100vw - 2rem), var(--colonna));
	margin-inline: auto;
	padding: var(--fascia-stacco) var(--fascia-x) var(--fascia-y);
	gap: clamp(1.5rem, 2.4vw, 2.5rem);
	margin-top: 0;
}

/* La seconda colonna cresce con la fascia larga: 21rem su 1152 erano il 29%,
   su 1500 sarebbero il 22% e il pannello della decisione si assottiglia. */
@media (min-width: 75rem) {
	.annuncio__corpo { grid-template-columns: minmax(0, 1fr) 24rem; }
}


/* ==========================================================================
   6 · LE FOTO

   Il disegno dà alla prima foto tutta la larghezza e un raggio grande, e alle
   altre una fila di provini piccoli sotto. Niente carosello: `radar.css`
   §galleria ha già scritto il perché — un carosello vuole JavaScript e nasconde
   il contenuto dietro un gesto, e qui le foto **sono** il contenuto.
   ========================================================================== */

.annuncio .galleria {
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: .5rem;
	margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
}

.annuncio .galleria img {
	border-radius: var(--raggio-piccolo);
	border: 1px solid var(--bordo);
}

.annuncio .galleria__prima {
	aspect-ratio: 16 / 10;
	border-radius: var(--raggio-pannello);
	margin-bottom: .25rem;
}


/* ==========================================================================
   7 · I NUMERI, A FILETTO

   Il disegno non mette i dati in una scheda con dentro delle celle: mette le
   celle **una accanto all'altra** e lascia respirare un filetto da 1px fra
   loro — `gap:1px` su un fondo `--bordo`, la cornice dello stesso colore e
   `overflow:hidden` a tenere insieme gli angoli. Costa una regola e si legge
   come una tabella senza esserlo.

   ⚠ L'ordine visivo è quello del disegno — il numero grande sopra, l'etichetta
   piccola sotto — e nel markup è l'opposto, perché un `<dl>` scrive prima il
   `<dt>`. Si gira con `column-reverse` e **non** invertendo il markup: la
   coppia nome-valore resta nell'ordine giusto per chi legge con le orecchie,
   che è il motivo per cui `single-immobile.php` ha scelto un `<dl>`.
   ========================================================================== */

/* 🚨 Il filetto **non** è il fondo del contenitore che si vede attraverso il
   `gap`, che è la ricetta corta e quella che ho scritto per prima. Misurato al
   primo reso: l'immobile di prova ha 12 voci su una griglia da 5 colonne, cioè
   **tre celle vuote** nell'ultima riga, e lì il fondo del contenitore non è un
   filetto da 1px — è un rettangolo beige largo tre colonne. Il filetto lo fa
   ogni cella per conto suo, con un'ombra piena da 1px: le ombre di due celle
   vicine si sovrappongono dentro il `gap` e danno una riga sola, e dove le
   celle finiscono non c'è niente da vedere. */
/* 🚨 E IL 17/8/2026 LA RICETTA E' CAMBIATA DI NUOVO, perche' quella sopra
   risolveva metà del problema.

   Il cancello visivo ha misurato quello che restava: dopo l'ultima voce c'era un
   rettangolo beige **chiuso dal bordo e vuoto**. Sul bilocale, 11 voci su 5
   colonne, faceva **725×68px**; su 21 schede con dati **12 avevano la coda** a
   1440, e a 375 — due colonne — ce l'aveva ogni scheda con un numero dispari di
   voci, compreso il posto auto con **una** cella vuota da 166px.

   👉 La causa non era il filetto interno, che era già stato tolto: era il
   **contenitore**. Ogni cella disegna già il suo anello completo su tutti e
   quattro i lati (`box-shadow: 0 0 0 1px`), quindi il fondo e il bordo del
   contenitore servivano solo a chiudere l'esterno — e si vedevano **esattamente
   dove le celle finivano**.

   🚨 E la ragione di fondo va scritta, perche' vale oltre questa griglia: **il
   disegno questa tabella l'ha disegnata con quattro voci esatte**
   (`annuncio.html` r.45-50), che chiudono la riga. Con undici voci e un numero
   di colonne che cambia con la finestra, una scatola continua **non può** non
   avere una coda: non è un errore di chi l'ha costruita, è che quella forma non
   sopravvive al contenuto variabile.

   Quindi le celle diventano **tessere**: ognuna col suo bordo e il suo raggio,
   distanziate. Una riga incompleta finisce e basta — non c'è più un contenitore
   che aspetti di essere riempito. Si perde la tabella rigata continua del
   disegno, e si guadagna una scheda che si guarda con 2 voci come con 12. */
.annuncio .dati {
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	padding: 0;
	background: transparent;
	border: 0;
	margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
}

.annuncio .dato {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 3px;
	padding: 13px 15px;
	background: var(--fondo);

	/* Il bordo resta un'ombra e non un `border`: cosi' non entra nel calcolo
	   della larghezza e le tessere restano larghe uguali. Il raggio e' quello
	   piccolo del disegno (`token.css` §misure: 9px), non quello della scheda. */
	box-shadow: 0 0 0 1px var(--bordo);
	border-radius: var(--raggio-piccolo);
}

.annuncio .dato dt {
	margin: 0;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--testo-2);   /* 5,57:1 · 8,04:1 su --fondo */
}

.annuncio .dato__valore {
	font-size: 1.0625rem;    /* 17px, il numero del disegno */
	font-weight: 700;
	line-height: 1.2;
	color: var(--testo);
}


/* ==========================================================================
   8 · IL PANNELLO DELLA FIDUCIA

   `radar.css` §fiducia lo ha già costruito, e serve anche alla scheda
   professionista: qui si tocca **solo dentro l'annuncio**, con `.annuncio__corpo`
   davanti, così la scheda azienda non si muove di un pixel.

   Il disegno gli chiede tre cose che il tema non gli dà: il raggio grande dei
   pannelli, i bersagli a 44px sui badge e la CTA a 56px — che è la misura di
   `--cta`, cioè dell'azione principale, e questa lo è: è il punto della
   decisione → DESIGN.md §7.
   ========================================================================== */

.annuncio__corpo .fiducia {
	border-radius: var(--raggio-pannello);
	box-shadow: var(--elev-2);
	padding: clamp(1rem, 1.6vw, 1.375rem);
}

.annuncio__corpo .fiducia__titolo {
	margin: 0 0 14px;
	font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	font-size: .8125rem;         /* 13px — è un'etichetta, non un titolo di sezione */
	font-weight: 500;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--testo-2);
}

/* I badge di verifica: il disegno li fa crescere col livello (token.css §i
   quattro livelli). Qui si prende il minimo comune — 44px — perché sono
   `<summary>`, cioè bersagli veri che si aprono. */
.annuncio__corpo .fiducia__badge > .badge {
	display: inline-flex;
	min-height: var(--tocco);
	padding: 0 14px;
	border-radius: var(--raggio-piccolo);
}

.annuncio__corpo .fiducia__badge[open] > .badge { border-radius: var(--raggio-piccolo) var(--raggio-piccolo) 0 0; }

.annuncio__corpo .badge__nota {
	margin-top: -1px;
	padding: 14px 15px;
	border: 1px solid var(--bordo);
	border-radius: 0 var(--raggio-medio) var(--raggio-medio) var(--raggio-medio);
	background: var(--superficie-alt);
}

/* L'avviso sulla caparra: nel disegno è l'unica riga con la cornice piena
   dentro il pannello, perché è l'unica che protegge dei soldi. */
.annuncio__corpo .fiducia__caparra {
	margin: 0 0 14px;
	padding: 13px 14px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-medio);
	background: var(--superficie-alt);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--testo);
}

/* L'azione.
   📌 I 56px, il raggio 12 e i 18px del corpo **non si riscrivono qui**:
   `ossatura.css` §9 ha già `.pulsante.fiducia__azione:not(.scheda *)`, nato da
   una misura di `ui-qa-expert` — la CTA veniva 50px invece di 56 proprio su
   questa pagina. Il mio selettore peserebbe uguale e arriverebbe dopo, quindi
   riscriverei in silenzio il numero di un'altra squadra. Qui resta la sola cosa
   che lì non c'è: il sollevamento al passaggio del mouse, che è del disegno
   (`annuncio.html` r.73, `transform:translateY(-2px)`). */
.annuncio__corpo .fiducia__azione {
	align-items: center;
	transition: background .18s ease, transform .18s ease;
}

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

/* Il CIN e le altre pillole del corpo: stesso bersaglio della fascia. */
.annuncio .termini .pillola {
	min-height: var(--tocco);
	padding-inline: 1rem;
}

/* 🚨 LA PILLOLA CHE NON SI CLICCA — 17/8/2026, squadra F4.

   `radar_regole` («Animali ammessi», «Check-in H24») e `radar_durata_breve`
   («Minimo 2 giorni») hanno `'pubblica' => false` in `data/tassonomie.php`:
   `Radar_Tassonomie::argomenti()` le registra con `public => false` e
   `rewrite => false`, quindi **non hanno un archivio**. In scheda si mostrano
   — gli animali compaiono in 4 elementi su 52 letti nel gruppo di Luca, ed è
   fra le prime cose che la gente chiede — ma come testo, non come
   collegamento: un `<a>` porterebbe a una pagina che non c'è.

   `.pillola` di `radar.css` porta `cursor: pointer`, e `.termini .pillola:hover`
   cambia il fondo: su uno `<span>` sarebbero due promesse false. Qui si
   tolgono, e **nient'altro** — fondo, bordo e colore restano quelli di tutte
   le altre, perché il contrasto misurato è quello.

   ⚠ Il selettore è a tre pezzi più la pseudo-classe apposta: `.termini
   .pillola:hover` di `radar.css` ne pesa tre e arriva prima, quindi va
   scavalcato per specificità e non per ordine — è la stessa regola che questo
   foglio segue su `.fiducia__azione` qui sopra. */
/* 🚨 E A RIPOSO NON DEVE SOMIGLIARE A UN BOTTONE — 17/8/2026.

   Il cancello visivo l'ha misurato sulla stessa pagina: «Casa al mare» (che è un
   `<a href>`), «Animali non ammessi» e «Minimo 2 giorni» (che sono `<span>` muti)
   erano **identiche al pixel** — stesso fondo `rgb(255,255,255)`, stesso bordo
   `rgb(232,225,216)`, stesso raggio 999px, stesso corpo 15px, stesso colore.
   Differivano solo per il `cursor` e per l'anello di fuoco: cioè col mouse e con
   la tastiera. **Col dito, in nessun modo.**

   👉 Una pillola che sembra premibile e non lo è è una piccola bugia
   dell'interfaccia, e su un telefono è l'unica versione che conta. Quindi qui la
   forma cambia: **non ha il bordo** e ha un fondo pieno, cioè legge come
   **etichetta** e non come comando. È la stessa distinzione che il disegno fa
   fra la pillola contornata dell'azione in testata e le pastiglie piene dei pin.

   ⚠ Il colore resta `--testo`: il fondo cambia, il contrasto no. Misurato dopo,
   non prima. */
.annuncio .termini .pillola--muta {
	cursor: default;
	background: var(--superficie-alt);
	box-shadow: none;
	border: 0;
}

.annuncio .termini .pillola--muta:hover {
	background: var(--superficie);
	transform: none;
}

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

/* I titoli degli elenchi di termini: serif, come ogni titolo del disegno. */
.annuncio .elenco-termini h2 {
	font-family: var(--font-titolo);
	font-size: clamp(1.3rem, 1.68vw, 1.6rem);   /* 20,8 → 25,7 px, dal disegno */
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.01em;
}

/* 28/8/2026: `--colonna-larga` è salita a 1920 (`ossatura.css` §1, casella
   8.6). La colonna di testo di `.annuncio__corpo` (`1fr`, §5 sopra) ora può
   sfiorare i 1500px a finestra piena: un rigo così lungo l'occhio lo perde.
   Qui la descrizione (`the_content()`) resta alla misura di lettura del
   disegno — non è l'involucro a restringersi, è la prosa dentro. */
.annuncio__testo { max-width: var(--colonna-lead); margin-bottom: clamp(1.5rem, 2.4vw, 2rem); }


/* ==========================================================================
   9 · IL TELEFONO — sotto i 900px

   ⚠ I sei interruttori `data-m*` di `_disegno/schermate/_regole.css` §1 **non
   servono a questa pagina**, ed è contato: `single-immobile.php` ha **zero**
   attributi `data-m*`. Quelli reggono il markup del disegno copiato di peso;
   qui il markup è il nostro, e il telefono si tiene con una media query e le
   sue classi. Le regole restano dove sono, per chi copierà davvero.
   ========================================================================== */

@media (max-width: 900px) {
	/* La fascia si stringe da sé — `--fascia-x` è un `clamp(20px,4vw,60px)` — ma
	   il titolo no: a 375px un `clamp` al 4,55vw dà 37,6px su 14em di larghezza
	   massima, e 14em di serif a 37,6px sono 526px, cioè fuori schermo. Il
	   `max-width` in em si scioglie e la riga torna dentro. */
	.annuncio__testa h1 { max-width: none; }

	.annuncio__corpo { padding-top: clamp(1.5rem, 5vh, 2.25rem); }

	/* 📌 Qui NON c'è una riga che stacca il pannello della fiducia dallo
	   `sticky`, e l'ho scritta e tolta: `radar.css` §fiducia lo appiccica solo
	   da `min-width: 60rem`, cioè da 960px. Sotto i 900 non è mai appiccicato,
	   quindi la riga non entrava mai. Una regola che non entra mai è peggio di
	   nessuna regola: sembra che protegga qualcosa. */
}


/* ==========================================================================
   10 · CHI NON VUOLE IL MOVIMENTO
   Una sola transizione in tutto il foglio, e questa è la sua media query.
   `radar.css` ha già la regola generale; questa è la sua, esplicita, perché una
   `transform` su hover è esattamente il movimento che si chiede di spegnere.
   ========================================================================== */

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

	.annuncio__corpo .fiducia__azione:hover {
		transform: none;
	}
}


/* ==========================================================================
   11 · I PANNELLI DEI SERVIZI VICINI (POI) — squadra S1, turno 10

   Una fisarmonica per ogni gruppo che `Radar_Poi::per_scheda()` rende quando
   ha qualcosa di onesto da dire (`inc/scheda-poi.php`, sola lettura su
   `radar-core`) — N pannelli, non un numero fisso: il 19/8/2026 il motore è
   passato da 4 gruppi a 5 (si è aggiunta «la spesa») e queste regole non
   hanno dovuto cambiare di una riga, perché nessuna sa contare o nominare i
   gruppi, sanno solo vestire quelli che arrivano. Un annuncio senza POI
   calcolati non stampa questa sezione: zero pannelli, mai un pannello vuoto.

   👉 Il meccanismo dell'accordion — marker nativo nascosto, freccia disegnata
   in `::after`, contenuto sempre aperto in stampa — è quello di
   `.fiducia__badge` in `radar.css` §fiducia, riusato tal quale sul markup
   (`inc/scheda-poi.php`): zero righe nuove qui per quella parte. Le regole
   nuove sono solo l'intestazione del pannello e l'elenco delle voci dentro.

   ⛔ NON si riusa `.badge` (la pillola colorata «verificato/attenzione»): qui
   non c'è un livello di fiducia da segnalare, solo un nome di servizio e una
   fascia. `.poi__intestazione` è nuova apposta, e non prende né il colore né
   il fondo di quella pillola.

   ⛔ MAI un numero in metri qui dentro, in nessuna forma: solo la fascia già
   scritta (`voce.fascia`) che arriva pronta da `inc/scheda-poi.php` — questo
   foglio non sa nemmeno che i metri esistano.
   ========================================================================== */

.poi {
	margin-bottom: clamp(1.5rem, 2.4vw, 2rem);
}

/* Stesso trattamento tipografico dei titoli di `.elenco-termini` più sopra —
   serif, come ogni titolo di sezione del disegno — per non aprire una terza
   voce di stile per «titolo di un blocco dentro la colonna larga». */
.poi__titolo-sezione {
	margin: 0 0 .75rem;
	font-family: var(--font-titolo);
	font-size: clamp(1.3rem, 1.68vw, 1.6rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--testo);
}

/* Un filetto fra un pannello e l'altro, non un margine solo: N fisarmoniche
   una sotto l'altra senza una riga che le separi si leggono come un blocco
   solo, e non sono un blocco solo — sono N risposte diverse alla stessa
   domanda «cosa c'è vicino» (N quanti sono i gruppi resi, mai un numero
   fisso: vedi la testata del foglio). */
.poi__pannello {
	border-top: 1px solid var(--bordo);
	padding-top: .5rem;
}

.poi__pannello:first-child {
	border-top: 0;
	padding-top: 0;
}

.poi__pannello + .poi__pannello {
	margin-top: .5rem;
}

/* Marker nativo nascosto, freccia in `::after`, nota sempre aperta in stampa:
   arrivano già da `.fiducia__badge` (`radar.css` §fiducia), che
   `inc/scheda-poi.php` mette come SECONDA classe sullo stesso `<details>`
   (`class="poi__pannello fiducia__badge"`). Qui non si riscrive: si userebbe
   la stessa identica regola due volte, che è la cosa che l'istruzione di
   squadra vieta esplicitamente («si riusa, non si reinventa»). */

/* Fa il lavoro che altrove fa `.badge` — bersaglio a 44px, riga intera
   cliccabile — ma in riga piena e senza pillola: qui non c'è un livello da
   colorare, solo un titolo di gruppo da aprire. */
.poi__intestazione {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: var(--tocco);
	padding: .35rem 0;
	font-weight: 600;
	font-size: var(--t-4);
	color: var(--testo);
	cursor: pointer;
}

/* Il contenuto aperto eredita bordo, fondo, raggio e padding da
   `.annuncio__corpo .badge__nota` più sopra (§8) — qui si aggiusta solo il
   raggio: quella regola stacca l'angolo in alto a sinistra per allinearsi
   alla pillola `.badge`, e sotto un'intestazione a riga piena (non a pillola)
   quell'angolo tagliato non ha più un motivo di stare lì. Stessa specificità
   della regola che sovrascrive, due classi: vince per ordine, che è dopo. */
.poi__pannello > .badge__nota {
	border-radius: var(--raggio-medio);
}

.poi__lista {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.poi__voce {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .4rem;
	row-gap: .1rem;
	max-width: none;
}

.poi__voce-tipo {
	flex: 0 0 auto;
	font-size: var(--t-5);
	color: var(--testo-2);
}

.poi__voce-tipo::after {
	content: ":";
}

/* 🟡 CORREZIONE DEL 19/8/2026 — a valvola chiusa (`RADAR_POI_NOME_DA_FASCIA`
   senza quella `chiave`, `inc/scheda-poi.php`) il nome non stampa, ma il «:»
   sopra è cieco: usciva «Aeroporti: · fra 2 e 5 km», col due punti appiccicato
   al pallino della fascia. `.poi__voce--senza-nome` è la classe che
   `scheda-poi.php` mette sulla `<li>` quando ha già deciso di tacere il nome:
   qui si spegne il «:» che non ha più niente da introdurre, e resta
   «Aeroporti · fra 2 e 5 km» — pulita anche a valvola chiusa, non solo oggi
   che la valvola è sempre aperta. */
.poi__voce--senza-nome .poi__voce-tipo::after {
	content: none;
}

.poi__voce-nome {
	font-weight: 600;
	color: var(--testo);
}

/* La fascia non è mai un numero: è testo già pronto («meno di 500 m»), e si
   scrive come una nota accanto al nome — mai come un dato a sé, che sarebbe
   un invito a leggerci dentro una misura che non c'è. */
.poi__voce-fascia {
	font-size: var(--t-5);
	color: var(--testo-2);
}

.poi__voce-fascia::before {
	content: "· ";
}

/* La freccia (`::after` su `summary`), la sua rotazione in `[open]`, il
   `prefers-reduced-motion` e la regola di stampa che tiene il contenuto
   visibile a `<details>` chiuso: tutto questo arriva già da `.fiducia__badge`
   in `radar.css` §fiducia, per la stessa ragione spiegata sopra. Zero righe
   nuove qui — è esattamente il pattern da riusare, non reinventare. */

/* --------------------------------------------------------------------------
   LA TARGA «ESEMPIO» — 7/9/2026, ordine di Gabriele.
   Sta in cima alla scheda, prima di tutto: chi arriva deve saperlo prima di
   leggere il prezzo, non dopo. Colore d'attenzione (`--attenzione`, il
   #8C5F00 già misurato sopra i tre fondi chiari), non rosso: non è un errore,
   è una dimostrazione — e l'ultima riga è un invito, non una scusa.
   -------------------------------------------------------------------------- */

.annuncio__esempio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 14px;
	margin: 0 0 var(--passo);
	padding: 14px 18px;
	border: 1px solid color-mix(in srgb, var(--attenzione) 40%, transparent);
	border-radius: var(--raggio);
	background: color-mix(in srgb, var(--attenzione) 8%, transparent);
}

.annuncio__esempio-targa {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--attenzione);
	color: #FFF;
	font: 700 .75rem/1.4 var(--font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.annuncio__esempio-testo {
	flex: 1 1 18rem;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--testo);
}

.annuncio__esempio-testo a {
	white-space: nowrap;
	font-weight: 600;
}