/* Pagine interne del sito (Chi siamo, Il metodo, Vendere, Comprare, Contatti, Esperienze, Immobili, Casi).
   Si aggiunge a stile.css (testata, hero, pila di pannelli, occhielli, pulsanti, passi, schede, chiusura, piede)
   con gli stessi colori, corpi dei titoli e punti di rottura (760 px telefono, 961 px computer): nessun
   linguaggio grafico nuovo, solo le composizioni che le pagine interne hanno in comune. */

/* Hero: quella della home, con una foto o un disegno e senza pulsanti */
.hero-pagina { min-height: 600px; }
.hero-pagina .hero-testo { gap: 14px; padding-block: 64px; }
.hero-pagina h1 { margin-bottom: 8px; }
.hero-pagina .hero-testo > p.attacco { color: #fff; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; letter-spacing: -.01em; }
.hero-pagina .hero-foto { margin: 0; }
/* metà destra con un disegno a linee al posto della foto */
.hero-disegno { display: flex; align-items: center; justify-content: center; margin: 0; padding: clamp(28px, 4vw, 64px); background: var(--morbido); }
.hero-disegno svg { width: 100%; max-width: 560px; height: auto; }

/* Recapiti nella hero della pagina Contatti */
.recapiti { display: grid; gap: 14px; margin-top: 10px; padding-top: 22px; border-top: 1px solid #ffffff2e; font-style: normal; }
.recapiti .voce { display: flex; flex-direction: column; gap: 2px; color: #fff; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.01em; }
.recapiti .etichetta { color: #d9c7bf; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.recapiti a { color: #fff; text-underline-offset: 4px; overflow-wrap: anywhere; }
.hero-contatti .scena img { object-position: 50% 62%; }
.chiusura-pagina a:not(.link-testo) { text-underline-offset: 3px; }

/* Esperienze: recensioni pubbliche riformulate, una sotto l'altra */
.citazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.citazioni li { padding: 22px 24px; border: 1px solid var(--linea); border-radius: 6px; background: var(--superficie); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; letter-spacing: -.02em; }
.citazioni small { display: block; margin-top: 10px; color: var(--accento); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sezione.morbida .citazioni li { background: #f5f2ef; }
.sezione.scura .citazioni li { background: #ffffff0a; border-color: #ffffff2e; }
.sezione.scura .citazioni small { color: #e8cfae; }

/* Immobili: la mappa schematica con i segnaposto nella hero, e il numero del segnaposto sulla scheda */
.mappa-immobili { flex-direction: column; }
.disegno .anello { fill: none; stroke: #cfc8bb; stroke-width: 1.5; }
.disegno .segnaposto { fill: var(--scuro); stroke: var(--superficie); stroke-width: 3; }
.disegno a:hover .segnaposto, .disegno a:focus-visible .segnaposto { fill: var(--accento); }
.disegno a:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
.disegno .numero-segnaposto { font-size: 17px; font-weight: 700; }
.scheda { position: relative; }
.scheda:target { outline: 3px solid var(--accento); outline-offset: 3px; }
.numero-mappa { position: absolute; z-index: 1; top: 12px; left: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 3px solid var(--superficie); border-radius: 50%; background: var(--scuro); color: #fff; font-size: 15px; font-weight: 700; }
/* in «Immobili» l'etichetta dello stato accanto al numero della mappa */
.numero-mappa + .etichetta-stato { top: 18px; left: 56px; }

/* Icone comuni (sito/icone.svg, solo tratto): prendono il colore del testo */
.icona { flex: none; width: 20px; height: 20px; color: var(--accento); }

/* Immobili: schede ricche, foto a sinistra e dati a destra sul PC, una sotto l'altra sul telefono */
.schede-ricche { grid-template-columns: 1fr; gap: 22px; }
.schede-ricche .dettagli { padding: 22px; }
.schede-ricche .dettagli h3 { font-size: 21px; margin-bottom: 14px; }
.dati-chiave { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dati-chiave li { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--inchiostro); }
.in-breve { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--accento); border-radius: 0 6px 6px 0; background: var(--morbido); }
.in-breve h4, .titoletto { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); }
.in-breve ul { margin: 0; padding-left: 18px; font-size: 15px; }
.in-breve li + li { margin-top: 4px; }
.dotazioni { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dotazioni li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo); font-size: 14px; }
.dotazioni .icona { width: 18px; height: 18px; }
.dintorni { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.dintorni li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.dintorni small { display: block; color: var(--tenue); font-size: 13px; letter-spacing: 0; text-transform: none; }
@media (min-width: 900px) {
  .schede-ricche .scheda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .schede-ricche .scheda img { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .dintorni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Casi di consulenza: ognuno con il suo racconto e, i più vecchi, i suoi numeri */
.avviso-esempi { margin-top: 6px; padding: 14px 16px; border: 1px dashed #c1b4ae; border-radius: 4px; }
.avviso-esempi strong { color: #fff; }
.casi { display: grid; gap: 18px; margin-top: 8px; }
.caso-esempio { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px clamp(24px, 4vw, 56px); padding: clamp(22px, 3vw, 40px); border: 1px solid var(--linea); border-radius: 6px; background: var(--superficie); }
.sezione:not(.morbida):not(.scura) .caso-esempio { background: #f5f2ef; }
.etichetta-esempio { display: inline-block; padding: 4px 10px; border: 1px dashed var(--accento); border-radius: 4px; letter-spacing: .1em; }
.caso-esempio h3 { margin: 14px 0 12px; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
/* i casi della pratica di Pavé (richiesta di Salvo del 28 ottobre): solo il racconto, due per riga sul computer */
.casi-brevi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.caso-esempio.caso-breve { grid-template-columns: 1fr; align-content: start; }
.caso-breve h3 { margin-top: 0; }
.racconto p:not(.occhiello) { color: var(--tenue); font-size: 16px; }
.racconto p + p { margin-top: 10px; }
.racconto strong { color: var(--inchiostro); font-weight: 600; }
.numeri-caso { align-self: start; margin: 0; border-top: 1px solid #cfc8bb; }
.numeri-caso div { padding: 12px 0; border-bottom: 1px solid #cfc8bb; }
.numeri-caso dt { color: var(--tenue); font-size: 14px; }
.numeri-caso dd { margin: 2px 0 0; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.02em; line-height: 1.3; }
.sezione.scura .caso-esempio { background: #ffffff0a; border-color: #ffffff2e; color: #fff; }
.sezione.scura .racconto p:not(.occhiello) { color: #e6e0dc; }
.sezione.scura .racconto strong { color: #fff; }
.sezione.scura .etichetta-esempio { border-color: #e8cfae; }
.sezione.scura .numeri-caso, .sezione.scura .numeri-caso div { border-color: #ffffff2e; }
.sezione.scura .numeri-caso dt { color: #e6e0dc; }
@media (max-width: 960px) { .caso-esempio { grid-template-columns: 1fr; } }

/* Testi che compaiono allo scorrimento: solo con rivela.js, che li prepara se non c'è «riduci movimento».
   Senza script restano tutti visibili. */
.rivela-pronta [data-rivela] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.rivela-pronta [data-rivela].visibile { opacity: 1; transform: none; }

/* Le frasi manifesto: grandi, leggere, con l'ultima parte in risalto */
.frase-manifesto { font-weight: 500; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
/* Frase manifesto isolata: un pannello scuro tutto per lei, che resta fermo e si fa coprire */
.manifesto { display: flex; flex-direction: column; justify-content: center; gap: 28px; min-height: 70vh; padding: clamp(36px, 7vw, 120px); background: var(--scuro); color: #fff; }
.manifesto .frase-manifesto { max-width: 15em; font-size: clamp(36px, 6.4vw, 112px); }
.manifesto .seguito { max-width: 640px; color: #e6e0dc; font-size: clamp(17px, 1.5vw, 22px); }
.chiusa { color: var(--inchiostro) !important; font-weight: 600; }

/* Chiusura: quella della home, più ampia */
.chiusura-pagina { padding: clamp(36px, 6vw, 84px); }
.chiusura-pagina h2 { font-size: clamp(30px, 4vw, 64px); line-height: 1.08; margin: 10px 0 16px; }
.chiusura-pagina > div { max-width: 720px; }
.chiusura-pagina > div > p:not(.occhiello) { font-size: 17px; }
.chiusura-pagina > div > p + p { margin-top: 10px; }
.chiusura-pagina .link-testo { display: inline-block; margin-right: 20px; }

/* Sezione a due colonne: titolo e testo da una parte, disegno o elenco dall'altra.
   Fondi come in «Chi siamo»: chiaro (predefinito), morbido, scuro con la trama di linee della tecnologia */
.sezione { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(32px, 6vw, 84px); background: var(--superficie); border: 1px solid var(--linea); }
.sezione.morbida { background: var(--morbido); }
.sezione.scura { color: #fff; background-color: var(--scuro); background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 48px 48px; border-color: transparent; }
.sezione.in-alto { align-items: start; }
.sezione h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.1; margin: 8px 0 20px; text-wrap: balance; }
.sezione .testo p:not(.occhiello) { color: var(--tenue); font-size: 17px; }
.sezione .testo p + p { margin-top: 12px; }
.sezione.scura .occhiello { color: #e8cfae; }
.sezione.scura .testo p:not(.occhiello) { color: #e6e0dc; }
.sezione.scura .chiusa { color: #fff !important; }
/* una riga che occupa le due colonne */
.sezione .tutta { grid-column: 1 / -1; }

/* Elenco a righe numerate, come quello della pagina «Chi siamo» */
.righe { list-style: none; margin: 0; padding: 0; border-top: 1px solid #cfc8bb; }
.righe li { display: flex; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #cfc8bb; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.02em; line-height: 1.35; }
.righe .numero { flex: none; width: 2.2em; color: var(--accento); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.righe li span:not(.numero) { display: block; }
.righe small { display: block; margin-top: 4px; color: var(--tenue); font-size: 15px; letter-spacing: 0; line-height: 1.5; }
.sezione.scura .righe, .sezione.scura .righe li { border-color: #ffffff2e; }
.sezione.scura .righe .numero { color: #e8cfae; }
.sezione.scura .righe small { color: #e6e0dc; }

/* I passi della home, anche a quattro */
.passi.quattro { grid-template-columns: repeat(4, 1fr); }
.sezione .passi { grid-column: 1 / -1; }
.dopo-passi { grid-column: 1 / -1; color: var(--tenue); font-size: 17px; }

/* Disegni a linee: stesso tratto dello schema della rete in «Chi siamo» */
.disegno { width: 100%; height: auto; max-width: 560px; justify-self: center; overflow: visible; }
.disegno .linea { fill: none; stroke: var(--accento); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.disegno .sottile { fill: none; stroke: #cfc8bb; stroke-width: 1; stroke-dasharray: 4 6; }
.disegno .nodo { fill: var(--superficie); stroke: var(--accento); stroke-width: 1.5; }
.disegno .pieno { fill: var(--scuro); }
.disegno .tenue-pieno { fill: #e4ddd8; }
.disegno text { fill: var(--inchiostro); font: 500 18px var(--sans); letter-spacing: -.01em; }
.disegno .piccolo { fill: var(--tenue); font-size: 14px; font-weight: 500; }
.disegno .bianco { fill: #fff; }
.disegno .centro { text-anchor: middle; }
.disegno .fine { text-anchor: end; }
.sezione.scura .disegno .linea { stroke: #e8cfae; }
.sezione.scura .disegno .sottile { stroke: #ffffff40; }
.sezione.scura .disegno text { fill: #fff; }
.sezione.scura .disegno .piccolo { fill: #e6e0dc; }
.sezione.scura .disegno .nodo { fill: var(--scuro); stroke: #e8cfae; }
.sezione.scura .disegno .tenue-pieno { fill: #ffffff1f; }
.sezione.scura .disegno .pieno { fill: #e8cfae; }
/* i tratti si disegnano quando il disegno entra nello schermo */
.rivela-pronta .disegno[data-rivela] .traccia { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s ease .2s; }
.rivela-pronta .disegno[data-rivela].visibile .traccia { stroke-dashoffset: 0; }
.didascalia-disegno { margin-top: 10px; color: var(--tenue); font-size: 15px; text-align: center; }
.sezione.scura .didascalia-disegno { color: #e6e0dc; }
figure.figura-disegno { margin: 0; justify-self: center; width: 100%; max-width: 560px; }

@media (max-width: 960px) {
  .sezione { grid-template-columns: 1fr; }
  .passi.quattro { grid-template-columns: 1fr 1fr; }
  .disegno, figure.figura-disegno { max-width: 460px; }
}

@media (max-width: 760px) {
  .hero-pagina { --alto-foto: 320px; min-height: 0; }
  .hero-pagina .hero-testo { padding: 40px 7% 44px; }
  .hero-disegno { min-height: 0; padding: 28px 7%; }
  .sezione, .chiusura-pagina { padding: 34px 7%; }
  .manifesto { min-height: 0; padding: 48px 7%; }
  .passi.quattro { grid-template-columns: 1fr; }
  .righe li { gap: 14px; }
  /* i disegni si rimpiccioliscono con lo schermo: scritte più grandi perché restino leggibili */
  .disegno text { font-size: 22px; }
  .disegno .piccolo { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .rivela-pronta [data-rivela] { opacity: 1; transform: none; transition: none; }
  .rivela-pronta .disegno[data-rivela] .traccia { stroke-dashoffset: 0; transition: none; }
  [data-parallasse] { transform: none !important; }
}

/* voce madre nel menu (aria-current="true", per esempio Esperienze nella pagina dei casi): come la pagina attuale */
.menu a[aria-current="true"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
a[href^="tel:"] { white-space: nowrap; }

/* «Richiedi un colloquio» nella pagina dei contatti (spec 2026-10-25-colloquio-e-privacy-design): il modulo funziona senza
   JavaScript (POST /colloquio, poi #colloquio-inviato o #errore-colloquio, mostrati con :target); le scelte sono pulsanti
   radio veri, con l'aspetto delle schede del sito */
.chiusura-colloquio { flex-direction: column; align-items: stretch; }
.modulo-colloquio { max-width: 720px; width: 100%; }
.campo-colloquio { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.campo-colloquio label, .scelte-colloquio legend { font-weight: 600; font-size: 16px; color: var(--inchiostro); }
.campo-colloquio small { font-weight: 400; color: var(--tenue); margin-left: 6px; }
.campo-colloquio input, .campo-colloquio textarea { font: inherit; font-size: 17px; padding: 10px 12px; border: 1px solid #8f817b; border-radius: 4px; background: #fff; color: var(--inchiostro); width: 100%; }
.due-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.chiusura-pagina .nota-colloquio { color: var(--tenue); font-size: 15px; margin-top: 8px; }
.scelte-colloquio { border: 0; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scelte-colloquio legend { padding: 0; margin-bottom: 8px; width: 100%; }
.scelte-colloquio label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #8f817b; border-radius: 999px; background: #fff;
  font-size: 16px; cursor: pointer; color: var(--inchiostro); }
.scelte-colloquio input { width: 18px; height: 18px; margin: 0; accent-color: var(--scuro); }
.scelte-colloquio label:has(input:checked) { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.scelte-colloquio label:has(input:focus-visible) { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
.consenso-colloquio { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.chiusura-pagina .consenso-colloquio label { color: var(--inchiostro); }
.consenso-colloquio input { width: 22px; height: 22px; margin-top: 3px; flex: none; }
.pulsante-colloquio { font: 600 17px/1 var(--sans); padding: 14px 22px; min-height: 48px; border: 0; border-radius: 4px; background: var(--scuro); color: #fff; cursor: pointer; margin-top: 18px; }
.pulsante-colloquio:hover { background: var(--inchiostro); }
.esito-colloquio { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 4px; background: var(--morbido); color: var(--inchiostro); }
.esito-colloquio:target { display: block; }
/* la stessa forza della regola di stile.css che dà --tenue ai paragrafi della chiusura: qui viene dopo e vince */
.chiusura-pagina p.esito-colloquio, .chiusura p.esito-colloquio:not(.occhiello):not(.pulsante-futuro) { color: var(--inchiostro); }
.esito-colloquio.errore { background: #f6e3df; }
/* la trappola per i robot (come nelle schede): nascosta a chi guarda e a chi ascolta */
.modulo-colloquio .trappola { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .due-campi { grid-template-columns: 1fr; } }
/* la pagina Privacy: gli elenchi del testo */
.elenco-privacy { margin: 12px 0 0; padding-left: 20px; }
.elenco-privacy li + li { margin-top: 10px; }

/* I filtri di «Immobili» (sito/immobili-filtri.js; spec 2026-10-25-filtri-immobili-design): quattro tendine nello stile del sito,
   «N immobili» e «Togli i filtri»; sul telefono i comandi stanno dietro il pulsante «Filtri» */
.filtri-immobili { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 24px; }
/* senza JavaScript il contenitore resta vuoto e nascosto, senza il suo margine (revisione del 40°) */
.filtri-immobili[hidden] { display: none; }
/* venduti e affittati nascosti a vista finché lo script dei filtri non decide (lo stato di serie è «Disponibili»); senza
   JavaScript la classe «js» non c'è e si vedono */
.js .scheda.nascosta-di-serie { display: none; }
.filtri-comandi { display: flex; flex-wrap: wrap; gap: 12px; }
.filtri-apri { display: none; }
.tendina-filtro { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
/* «In evidenza» senza immobili in homepage: la tendina non c'è */
.tendina-filtro[hidden] { display: none; }
.tendina-etichetta { color: var(--accento); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tendina-bottone { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--linea);
  border-radius: 4px; background: var(--superficie); color: var(--inchiostro); font: 500 15px var(--sans); text-align: left; cursor: pointer; }
.tendina-bottone::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: none; }
.tendina-bottone[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.tendina-bottone:focus-visible, .tendina-voci:focus-visible, .filtri-apri:focus-visible, .filtri-togli:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
.tendina-voci { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 100%; max-height: 320px; overflow-y: auto; margin: 6px 0 0; padding: 6px 0; list-style: none;
  border: 1px solid var(--linea); border-radius: 4px; background: var(--superficie); box-shadow: 0 12px 28px #30251d1f; }
.tendina-voci [role="option"] { padding: 10px 14px; font-size: 15px; white-space: nowrap; cursor: pointer; }
.tendina-voci [role="option"].attiva, .tendina-voci [role="option"]:hover { background: var(--morbido); }
.tendina-voci [role="option"][aria-selected="true"] { font-weight: 700; }
.tendina-numero { color: var(--tenue); font-weight: 400; }
.filtri-riga { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.filtri-conta { margin: 0; color: var(--tenue); font-size: 15px; }
.filtri-togli, .togli-filtri { padding: 0; border: 0; background: none; color: var(--inchiostro); font: 600 15px var(--sans); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
  .filtri-immobili { flex-direction: column; align-items: stretch; }
  .filtri-apri { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--linea); border-radius: 4px; background: var(--superficie);
    color: var(--inchiostro); font: 600 15px var(--sans); cursor: pointer; }
  .filtri-comandi { display: none; flex-direction: column; }
  .filtri-immobili.aperti .filtri-comandi { display: flex; }
  .tendina-filtro { min-width: 0; }
  .tendina-voci [role="option"] { white-space: normal; }
}

/* La linguetta e la finestra dei filtri (aggiunte del 26 ottobre alla spec dei filtri): la linguetta fissa sul bordo destro, a
   metà altezza, stretta, con «Filtri» in verticale, l'icona e il numero dei filtri attivi; sopra la mappa (Leaflet arriva a
   1000). La finestra è un dialog del sito: un pannello che entra da destra, con le stesse tendine della barra. */
.filtri-linguetta { position: fixed; right: 0; top: 50%; z-index: 1100; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 40px; padding: 12px 0; border: 0; border-radius: 6px 0 0 6px; background: var(--scuro); color: #fff; font: 700 14px var(--sans); letter-spacing: .06em;
  box-shadow: -4px 6px 18px #30251d33; cursor: pointer; }
.filtri-linguetta:hover { background: var(--inchiostro); }
/* il contorno del fuoco dentro la linguetta (attaccata al bordo dello schermo, fuori non si vedrebbe) */
.filtri-linguetta:focus-visible { outline: 3px solid var(--superficie); outline-offset: -6px; }
/* col menu del telefono aperto la linguetta si toglie di mezzo (immobili-filtri.js guarda il menu) */
.filtri-linguetta.sotto-menu { visibility: hidden; }
@media print { .filtri-linguetta { display: none; } }
.filtri-linguetta .icona, .finestra-chiudi .icona { width: 20px; height: 20px; border: 0; color: currentColor; }
/* la scritta dal basso verso l'alto, come sul dorso di un libro */
.filtri-linguetta-testo { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; }
.filtri-linguetta-numero { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--superficie); color: var(--inchiostro); font-size: 13px; line-height: 22px; text-align: center; }
.filtri-linguetta-numero[hidden] { display: none; }
html.finestra-aperta { overflow: hidden; }
.finestra-filtri { position: fixed; inset: 0 0 0 auto; width: min(420px, calc(100vw - 48px)); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--linea); background: var(--superficie); color: var(--inchiostro); box-shadow: -16px 0 40px #30251d33; }
.finestra-filtri::backdrop { background: #39312e8c; }
.finestra-corpo { display: flex; flex-direction: column; height: 100%; }
.finestra-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--linea); }
.finestra-testa h2 { font-size: 24px; }
.finestra-chiudi { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linea); border-radius: 4px;
  background: transparent; color: var(--inchiostro); cursor: pointer; }
.finestra-chiudi:hover { background: var(--morbido); }
.finestra-tendine { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
.finestra-tendine .tendina-filtro { min-width: 0; }
/* nella finestra l'elenco delle scelte sta sotto il suo pulsante e spinge giù gli altri (niente elenchi tagliati dal bordo) */
.finestra-tendine .tendina-voci { position: static; max-height: none; box-shadow: none; }
.finestra-tendine .tendina-voci [role="option"] { white-space: normal; }
.finestra-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); }
.finestra-mostra { flex: 1 1 auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--scuro); color: #fff; font: 700 15px var(--sans); cursor: pointer; }
.finestra-mostra:hover { background: var(--inchiostro); }
.finestra-togli { padding: 0; border: 0; background: none; color: var(--inchiostro); font: 600 15px var(--sans); text-decoration: underline; cursor: pointer; }
.finestra-togli[hidden] { display: none; }
/* il numero per i lettori di schermo: dentro la finestra la riga della barra non si sente (showModal la toglie dall'albero) */
.finestra-conta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.finestra-chiudi:focus-visible, .finestra-mostra:focus-visible, .finestra-togli:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .finestra-filtri[open] { animation: finestra-entra .22s ease-out; }
  .finestra-filtri[open]::backdrop { animation: finestra-velo .22s ease-out; }
}
@keyframes finestra-entra { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes finestra-velo { from { opacity: 0; } to { opacity: 1; } }