/*
Theme Name: Dimora Lo Scalzo — Proposta 2
Theme URI: https://dimoraloscalzo.it
Description: Seconda direzione grafica per Dimora Lo Scalzo, Accettura (MT). Tema figlio di Twenty Twenty-Five. Progetto PNRR Bando Borghi — Imprese, Prot. BRG002830.
Author: Raffaele Vitulano
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
License: GPL-2.0-or-later
Text Domain: dimoraloscalzo-2

Il font in assets/fonts/ NON e' GPL: Instrument Sans (c) 2022 The Instrument Sans Project Authors, SIL Open Font License 1.1.
Il testo integrale della licenza sta accanto al woff2, in assets/fonts/OFL-instrument-sans.txt: la OFL obbliga a distribuirlo insieme al file.
Il woff2 e' il sottoinsieme `latin` della variante VARIABILE ufficiale, asse dei pesi 400-700, cioe' esattamente quelli usati. Nessuna richiesta a Google Fonts.
*/

/* ====================================================================
   SECONDA PROPOSTA GRAFICA
   ====================================================================

   Il corpo di questo foglio arriva DALLA DEMO APPROVATA, verbatim.
   Non e' pigrizia: il cliente ha approvato quel rendering, e riscriverlo
   piu' ordinato significherebbe reintrodurre in silenzio i difetti che
   sono gia' stati trovati e pagati una volta — l'auto-margine su un
   elemento di griglia, i due veli sovrapposti, la regola generica che
   cattura un elemento nuovo. Le differenze fra sito e demo si verificano
   per confronto misurato, non a memoria.

   Sopra al corpo sta solo cio' che la demo non aveva bisogno di avere:
   il font ospitato sul dominio invece che su Google, e la cucitura con
   gli involucri che mette WordPress. Sotto, l'adattamento del modulo
   vero, che lo genera dls-core e ha un markup diverso da quello finto
   della demo.
   ==================================================================== */

/* ---------- 1. il font sta sul dominio, non su Google ---------- */
/* La demo lo prendeva da fonts.googleapis.com. Qui no: una richiesta a
   Google da una pagina pubblica e' un trasferimento di indirizzo IP a un
   terzo, e su un progetto finanziato dall'Unione e' esattamente il genere
   di dettaglio che non si vuole dover spiegare. Il sito 1 ha zero host di
   terze parti ed e' una proprieta' verificata dalla sua suite: questo
   deve valere lo stesso. */
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;   /* variabile: un file solo per quattro pesi */
	font-display: swap;
	src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. gli involucri di WordPress non devono stringere ---------- */
/* La demo era un documento nudo. Qui il markup vive dentro .wp-site-blocks
   e dentro il contenitore di post-content, che con il layout `constrained`
   imporrebbe una larghezza massima e un padding laterale: le fasce a tutta
   pagina — hero, sezione del Maggio, pie' di pagina — si ritroverebbero
   incassate in una colonna. Il layout e' gia' `default` nel modello; queste
   righe sono la seconda rete, per il giorno in cui qualcuno lo cambia. */
.wp-site-blocks,
.wp-site-blocks > *,
.wp-block-post-content,
.wp-block-group,
main.wp-block-group {
	max-width: none;
	margin-block: 0;
	padding-inline: 0;
}
.wp-site-blocks > * + * { margin-block-start: 0; }

/* La barra fissa e la barra di amministrazione non devono sovrapporsi.
   Vale solo per chi ha fatto l'accesso: al visitatore non cambia nulla. */
body.admin-bar .top { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .top { top: 46px; } }

:root{
  --paper:#F4F2ED; --paper-2:#EAE7E0; --pine:#0E2E2B; --pine-2:#0A2320;
  --ink:#0F1213; --ink-2:#2E3436; --ink-3:#6B7274;
  --on-pine:#F0EFEA; --on-pine-2:#A8BFBA;
  /* L'ottone e' uscito: crema calda piu' oro spento e' la combinazione che si
     vede ovunque, e per giunta #8A6B33 misurava 4,44 sulla carta, sotto la
     soglia di 4,5 per il testo piccolo. La gamma resta sul verde, che regge
     da sola perche' e' scura abbastanza da fare accento. */
  --brass:#2A5E52; --verde-chiaro:#A9CBBF;
  --rule:rgba(15,18,19,.18); --rule-soft:rgba(15,18,19,.10);
  --f:"Instrument Sans",system-ui,sans-serif; --wh:600; --ls:-.026em;
  --gut:clamp(20px,4.6vw,64px);
  --sec:clamp(64px,8.5vh,116px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--f);font-weight:400;
  font-size:clamp(16px,1.06vw,17.5px);line-height:1.62;-webkit-font-smoothing:antialiased;
  font-synthesis:none}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--f);color:var(--ink);line-height:1.02;
  letter-spacing:var(--ls);font-weight:var(--wh);text-wrap:balance}
p{margin:0}
a{color:inherit}
.wrap{max-width:1300px;margin:0 auto;padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px}

/* ---------- testata ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding:15px var(--gut);background:rgba(244,242,237,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)}
.mark{font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
.lang{display:flex;gap:12px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.lang a{text-decoration:none;color:var(--ink-3)} .lang a[aria-current]{color:var(--ink)}

/* ---------- hero: fotografia piena, targa dei dati sotto ---------- */
.hero{position:relative;background:var(--pine)}
.hero img{width:100%;aspect-ratio:16/7;object-fit:cover;min-height:340px;opacity:.86}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,35,32,.88) 0,rgba(10,35,32,.24) 46%,rgba(10,35,32,.04) 72%)}
.hero-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(24px,4.4vh,56px);
  color:var(--on-pine)}
/* Il titolo respira: da -.034em a -.006em. A corpo 5,4rem una crenatura
   stretta impasta le lettere, e «Dimora Lo Scalzo» ha tre parole da separare. */
.hero-in h1{color:var(--on-pine);font-size:clamp(2.5rem,6.4vw,5.4rem);font-weight:calc(var(--wh) + 100);
  letter-spacing:calc(var(--ls) + .02em)}
/* L'occhiello e i numeri di sezione erano troppo piccoli per reggere il corpo
   dei titoli accanto: la crenatura scende quando il corpo sale, altrimenti a
   .3em una riga in maiuscoletto diventa larghissima e si sfilaccia. */
.kicker{font-size:clamp(.8rem,1.05vw,.92rem);letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--verde-chiaro);margin-bottom:16px}

/* targa: la riga di dati sotto l'immagine, come in una monografia */
.targa{background:var(--pine-2);color:var(--on-pine)}
.targa-in{display:grid;gap:0;border-top:1px solid rgba(240,239,234,.16)}
@media(min-width:820px){.targa-in{grid-template-columns:repeat(4,1fr)}}
.targa-c{padding:22px 0;border-bottom:1px solid rgba(240,239,234,.16)}
@media(min-width:820px){.targa-c+.targa-c{border-left:1px solid rgba(240,239,234,.16);padding-left:24px}}
.targa-c b{display:block;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:var(--wh);letter-spacing:var(--ls);
  font-variant-numeric:tabular-nums;line-height:1}
.targa-c b i{font-style:normal;font-size:.46em;margin-left:.16em;font-weight:500}
.targa-c span{display:block;margin-top:7px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-pine-2);font-weight:600}

/* ---------- apertura ---------- */
.apertura{padding-block:clamp(44px,6.5vh,86px)}
.apertura-g{display:grid;gap:clamp(20px,3vw,58px)}
@media(min-width:900px){.apertura-g{grid-template-columns:.9fr 1.1fr;align-items:end}}
.claim{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:var(--wh);letter-spacing:var(--ls);line-height:1.08;
  color:var(--ink)}
.lead{font-size:clamp(1.02rem,1.28vw,1.16rem);color:var(--ink-2);max-width:56ch}
.azioni{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:24px}
.btn{background:var(--pine);color:var(--on-pine);text-decoration:none;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;font-size:.72rem;padding:15px 28px}
.btn:hover{background:var(--pine-2)}
.btn2{border:1px solid var(--rule);padding:14px 24px;text-decoration:none;font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.mini{font-size:.82rem;color:var(--ink-3);margin-top:14px}

/* ---------- sezioni numerate: la struttura si vede ---------- */
.sez{border-top:1px solid var(--rule);padding-block:var(--sec)}
.sez-testa{display:grid;gap:16px;margin-bottom:clamp(26px,4vh,52px)}
@media(min-width:900px){.sez-testa{grid-template-columns:150px 1fr;gap:0 40px;align-items:start}}
.num{font-size:clamp(.8rem,.95vw,.9rem);font-weight:700;letter-spacing:.12em;color:var(--brass);
  font-variant-numeric:tabular-nums;padding-top:.45em}
.sez-testa h2{font-size:clamp(1.9rem,3.9vw,3.2rem)}
.sez-corpo{display:grid;gap:clamp(22px,3vw,56px)}
@media(min-width:900px){.sez-corpo{grid-template-columns:150px 1fr;gap:0 40px}}
.sez-corpo>.col{display:grid;gap:18px}

/* lastra fotografica: cornice, didascalia, mai fluttuante */
.lastra{margin:0}
.lastra img{width:100%;object-fit:cover;border:1px solid var(--rule-soft)}
.lastra figcaption{margin-top:10px;padding-top:9px;border-top:1px solid var(--rule-soft);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.r32 img{aspect-ratio:3/2} .r45 img{aspect-ratio:4/5} .r169 img{aspect-ratio:16/9}

.duetto{display:grid;gap:clamp(20px,2.6vw,40px);align-items:start}
@media(min-width:900px){.duetto{grid-template-columns:1.08fr .92fr}}

.elenco{display:grid;gap:0;margin-top:8px}
.elenco div{padding:19px 0;border-top:1px solid var(--rule-soft);display:grid;gap:5px}
.elenco div:last-child{border-bottom:1px solid var(--rule-soft)}
.elenco dt{font-size:1.02rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.elenco dd{margin:0;color:var(--ink-2);font-size:.96rem}

/* ---------- il Maggio: sezione intera in pino ---------- */
.maggio{background:var(--pine);color:var(--on-pine);padding-block:var(--sec)}
.maggio h2,.maggio h3{color:var(--on-pine)}
.maggio .num{color:var(--verde-chiaro)}
.maggio p{color:var(--on-pine-2)}
.maggio strong{color:var(--on-pine);font-weight:600}
.maggio .lastra img{border-color:rgba(240,239,234,.18)}
.maggio .lastra figcaption{color:var(--on-pine-2);border-top-color:rgba(240,239,234,.18)}
.maggio .btn{background:var(--verde-chiaro);color:var(--pine);
  border:1px solid var(--verde-chiaro)}
.due-col{display:grid;gap:clamp(18px,2.6vw,44px)}
@media(min-width:760px){.due-col{grid-template-columns:1fr 1fr}}
.due-col p+p{margin-top:13px}

/* ---------- dintorni ---------- */
.voci{display:grid;gap:0}
.voce{display:grid;gap:6px 26px;padding:24px 0;border-top:1px solid var(--rule-soft)}
@media(min-width:760px){.voce{grid-template-columns:52px 1fr 1.4fr;align-items:baseline}}
.voce:last-child{border-bottom:1px solid var(--rule-soft)}
.voce .v-num{font-size:.78rem;font-weight:700;color:var(--brass);letter-spacing:.12em}
.voce h3{font-size:1.12rem;font-weight:600}
.voce p{color:var(--ink-2);font-size:.95rem}
.coppia-maggio{display:grid;gap:clamp(14px,2vw,26px)}
@media(min-width:760px){.coppia-maggio{grid-template-columns:1fr 1fr}}
.coppia-foto{display:grid;gap:clamp(14px,2vw,28px);margin-top:clamp(26px,4vh,48px)}
@media(min-width:760px){.coppia-foto{grid-template-columns:1fr 1fr}}

/* ---------- modulo ---------- */
.modulo{background:var(--paper-2);border-top:1px solid var(--rule);padding-block:var(--sec)}
.modulo-g{display:grid;gap:clamp(24px,3.4vw,60px)}
@media(min-width:960px){.modulo-g{grid-template-columns:.82fr 1.18fr;align-items:start}}
form{display:grid;gap:12px}
.r2{display:grid;gap:12px}
@media(min-width:620px){.r2{grid-template-columns:1fr 1fr}}
label{display:block;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:6px;font-weight:700}
input,textarea{width:100%;background:#fff;border:1px solid var(--rule);color:var(--ink);font:inherit;
  font-size:.94rem;padding:12px 14px;border-radius:0}
input:focus,textarea:focus{outline:2px solid var(--pine);border-color:transparent}
.check{display:block;position:relative;padding-left:28px;font-size:.86rem;color:var(--ink-2);
  line-height:1.5;text-transform:none;letter-spacing:0;font-weight:400}
.check input{position:absolute;left:0;top:.26em;width:16px;height:16px;margin:0;accent-color:var(--pine)}
.check a{color:var(--brass)}
button.send{justify-self:start;background:var(--pine);color:var(--on-pine);border:0;font:inherit;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;font-size:.72rem;padding:15px 32px;
  cursor:pointer}

.contatti address{font-style:normal;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.9;
  color:var(--ink);font-weight:500}
footer{background:#fff;border-top:1px solid var(--rule);padding-block:clamp(38px,5.5vh,70px)}
.loghi{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(10px,3vw,34px);margin-bottom:24px}
.loghi img{height:clamp(28px,calc(12vw - 11px),72px);width:auto}
@media(min-width:700px){.loghi img{height:72px}}
.piede-g{display:grid;gap:24px}
@media(min-width:900px){.piede-g{grid-template-columns:1.25fr .75fr}}
.piede-g p{margin-bottom:10px;font-size:.85rem;color:var(--ink-2);max-width:68ch}
.codici{font-size:.76rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nota{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule-soft);font-size:.75rem;
  color:var(--ink-3)}

/* ---------- barra fissa con indice delle sezioni ---------- */
/* display:block e padding:0 sono obbligatori, non pleonastici: la regola .top
   della versione precedente resta in cascata con display:flex e un padding
   proprio, e senza azzerarli il pannello si affiancava alla riga invece di
   aprirsi sotto — finiva mezzo fuori schermo. */
.top{position:sticky;top:0;z-index:60;display:block;padding:0;
  background:rgba(244,242,237,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px var(--gut);max-width:1300px;margin:0 auto}
.mark{font-size:.88rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.indice{display:none}
@media(min-width:1400px){
  .indice{display:flex;align-items:center;gap:20px}
  .indice a{text-decoration:none;color:var(--ink-3);font-size:.68rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;
    white-space:nowrap;transition:color .18s,border-color .18s}
  .indice a:hover{color:var(--ink)}
  .indice a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--brass)}
  .indice a .n{color:var(--brass);margin-right:.45em;font-variant-numeric:tabular-nums}
}
.coda{display:flex;align-items:center;gap:14px;flex:0 0 auto}

/* Sotto i 440px la riga fissa non ci stava: wordmark 172px + comandi 154px +
   margini = 386px, cioe' 64px di sbordo orizzontale su uno schermo da 320.
   Il marchio si restringe, i comandi si stringono, l'etichetta dell'indice
   sparisce e restano le due barre — che con 44px di lato restano un bersaglio
   tocabile. */
@media(max-width:439px){
  .top-in{gap:10px;padding-inline:16px}
  .mark{font-size:.72rem;letter-spacing:.08em;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .coda{gap:8px}
  .lang{gap:7px;font-size:.64rem}
  .apri .barre{width:16px;height:11px}
}
/* Le lingue stanno in una zona loro, staccata dall'indice da un filetto: sono
   un interruttore di stato, non una voce di navigazione, e confonderle costa
   click sbagliati. La bandiera accompagna il nome, non lo sostituisce — una
   bandiera e' un paese, non una lingua, e l'inglese di questo sito parla anche
   a tedeschi, olandesi e americani. */
.lang{display:flex;align-items:center;gap:4px}
.lang a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink-3);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:8px 10px;border-radius:2px}
.lang a:hover{color:var(--ink);background:rgba(15,18,19,.05)}
.lang a[aria-current]{color:var(--ink);background:rgba(15,18,19,.07)}
.lang .bnd{width:19px;height:13px;flex:0 0 auto;border:1px solid rgba(15,18,19,.22);
  object-fit:cover;display:block}
@media(min-width:1400px){
  .lang{position:relative;padding-left:20px;margin-left:4px}
  .lang::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:26px;background:var(--rule)}
}
/* Sotto i 440px resta la sola bandiera. Il nome NON si toglie con display:none:
   sparirebbe anche per i lettori di schermo, e le bandiere sono aria-hidden,
   quindi la voce resterebbe senza nome. Si nasconde alla vista e basta. */
@media(max-width:439px){
  .lang a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .lang a{padding:9px 7px}
}
.btn-top{background:var(--pine);color:var(--on-pine);text-decoration:none;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;padding:11px 18px;white-space:nowrap}
.btn-top:hover{background:var(--pine-2)}
@media(max-width:640px){.btn-top{display:none}}

/* interruttore del pannello: compare solo dove l'indice non ci sta */
.apri{display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--rule);
  font:inherit;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);padding:10px 14px;cursor:pointer}
@media(min-width:1400px){.apri{display:none}}
/* Hamburger tradizionale a tre barre. L'etichetta «Menu» resta nel markup per
   chi usa un lettore di schermo, ma a schermo si vede solo il simbolo: e' un
   segno che tutti riconoscono e non ha bisogno di essere spiegato. */
.apri .barre{display:inline-block;width:18px;height:12px;position:relative}
.apri .barre::before,.apri .barre::after{content:"";position:absolute;left:0;right:0;height:1.6px;
  background:var(--ink)}
.apri .barre::before{top:0} .apri .barre::after{bottom:0}
.apri .barre i{position:absolute;top:50%;left:0;right:0;height:1.6px;background:var(--ink);
  transform:translateY(-50%)}
.apri .testo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.apri{padding:11px 12px;min-height:44px;min-width:44px;justify-content:center;gap:0}

#pannello{display:none;border-top:1px solid var(--rule);background:var(--paper)}
#pannello.aperto{display:block}
.pannello-in{max-width:1300px;margin:0 auto;padding:6px var(--gut) 18px}
.pannello-in a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:var(--ink);
  font-weight:600;letter-spacing:-.01em}
.pannello-in a .n{font-size:.68rem;font-weight:700;color:var(--brass);letter-spacing:.13em}
.pannello-in a[aria-current="true"] .t{text-decoration:underline;text-underline-offset:4px}
/* Il pulsante non deve ereditare la griglia a due colonne delle voci: con
   quella la scritta veniva tagliata a meta'. Regola propria, blocco pieno. */
.pannello-in .pannello-cta{display:block;margin-top:18px;border-bottom:0;text-align:center;
  padding:16px 18px;color:var(--on-pine);font-weight:700;letter-spacing:.11em}

/* le ancore non devono finire sotto la barra */
/* Lo scarto delle ancore NON e' un numero indovinato: la barra e' alta 94px a
   1440, 105px sotto i 1060 (l'indice va a capo) e cambia ancora sul telefono.
   Lo misura lo script e lo scrive qui, aggiornandolo al ridimensionamento. */
[id]{scroll-margin-top:calc(var(--barra, 94px) + 12px)}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- contatti con la sagoma della regione ---------- */
/* La mappa parte dall'alto della sezione, non sotto il corpo del testo: il suo
   bordo superiore si allinea al titolo. Prima galleggiava in basso a destra con
   un vuoto sopra — lo stesso difetto che questa direzione voleva togliere alle
   fotografie. Qui le due colonne cominciano insieme. */
.contatti-layout{display:grid;gap:clamp(24px,3.4vw,56px);align-items:start}
@media(min-width:900px){.contatti-layout{grid-template-columns:1fr .68fr}}
.contatti-sx .sez-testa{margin-bottom:clamp(20px,3vh,38px)}
.contatti .sez-corpo{gap:0}
.mappa{margin:0;color:var(--pine)}
.mappa svg{width:100%;height:auto;display:block}
.mappa figcaption{margin-top:10px;padding-top:9px;border-top:1px solid var(--rule-soft);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
/* il cerchio esterno pulsa piano: e' l'unico movimento della pagina, e serve a
   far trovare il segnaposto senza cercarlo */
@keyframes eco{0%{r:26;opacity:.55}70%{r:44;opacity:0}100%{r:44;opacity:0}}
.mappa .eco{animation:eco 2.8s ease-out infinite}
@media(prefers-reduced-motion:reduce){.mappa .eco{animation:none}}

/* ---------- 3. passaggio del mouse: misurato, non spettacolare ---------- */
.btn,.btn2,.btn-top,button.send,.pannello-cta{
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .12s ease}
.btn:hover,.btn-top:hover,button.send:hover,.pannello-cta:hover{transform:translateY(-1px)}
.btn:active,.btn-top:active,button.send:active{transform:translateY(0)}
.btn2:hover{background:rgba(15,18,19,.045);border-color:var(--ink-3)}
.maggio .btn:hover{background:#CFE3DA}
/* le lastre: un respiro appena, dentro la cornice che resta ferma */
.lastra{overflow:hidden}
.lastra img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.lastra:hover img{transform:scale(1.018)}
/* le voci dei dintorni si accendono al passaggio */
.voce{transition:background-color .18s ease}
.voce:hover{background:rgba(15,18,19,.028)}
address a{text-underline-offset:3px;transition:color .18s ease}
address a:hover{color:var(--brass)}

/* ---------- comparsa allo scorrimento ---------- */
/* Senza JavaScript non si nasconde niente: la classe .js la mette lo script,
   quindi un errore o un blocco non lascia mai la pagina vuota. */
.js .rivela{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.js .rivela.dentro{opacity:1;transform:none}
/* In stampa e in lettura semplificata nulla puo' restare trasparente: la
   comparsa e' un effetto di scorrimento, e su carta non si scorre. */
@media print{
  .js .rivela{opacity:1!important;transform:none!important;transition:none!important}
  .su,.top{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .js .rivela{opacity:1;transform:none;transition:none}
  .lastra img{transition:none}
  .btn,.btn2,.btn-top,button.send{transition:none}
}


/* ---------- contatori e contrasti al passaggio ---------- */
/* Le cifre non devono far ballare la riga mentre salgono: cifre a larghezza
   fissa e uno spazio minimo riservato per la piu' lunga. */
/* La regola .targa-c span esiste per l'ETICHETTA sotto il numero ed e'
   display:block: senza alzare la specificita' catturerebbe anche questo span,
   che diventerebbe largo quanto la colonna e spingerebbe «km» a capo. */
.targa-c b .cifra{display:inline;font-size:inherit;letter-spacing:inherit;color:inherit;
  margin:0;text-transform:none;font-weight:inherit;font-variant-numeric:tabular-nums}

/* Il passaggio del mouse INVERTE, non schiarisce: e' il modo elegante di
   essere evidenti. Ogni stato e' stato misurato, nessuno scende sotto 4,5:1. */
.btn:hover,.btn-top:hover,button.send:hover,.pannello-cta:hover{
  background:var(--brass);color:var(--on-pine)}
/* Il secondario resta un contorno anche al passaggio, non si riempie: riempirlo
   di pino lo rendeva identico al primario a riposo, che gli sta accanto. */
.btn2:hover{background:rgba(14,46,43,.06);color:var(--pine);border-color:var(--pine);
  box-shadow:inset 0 0 0 1px var(--pine)}
/* Sul fondo pino l'inversione e' vera: il pieno menta diventa vuoto col bordo
   menta. Il bordo c'e' anche a riposo, cosi' la casella non cambia misura. */
.maggio .btn:hover{background:var(--pine-2);color:var(--verde-chiaro)}
.voce:hover{background:rgba(14,46,43,.055)}
.voce:hover .v-num{color:var(--pine)}
.voce .v-num{transition:color .18s ease}
.indice a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.lang a:hover{background:rgba(14,46,43,.09);color:var(--ink)}
.mappa{transition:color .25s ease}

/* ---------- 4. ritorno in alto, con anello di avanzamento ---------- */
.su{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:70;
  width:56px;height:56px;border:0;padding:0;background:var(--paper);border-radius:50%;
  cursor:pointer;display:grid;place-items:center;color:var(--pine);
  box-shadow:0 6px 22px rgba(15,18,19,.16);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s}
.su.vista{opacity:1;visibility:visible;transform:none}
.su svg{position:absolute;inset:0;width:56px;height:56px;transform:rotate(-90deg)}
.su .pista{fill:none;stroke:rgba(15,18,19,.14);stroke-width:2.5}
.su .quota{fill:none;stroke:var(--brass);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:150.8;stroke-dashoffset:150.8}
.su .punta{position:relative;width:13px;height:13px;border-left:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);margin-top:3px}
@media(prefers-reduced-motion:reduce){.su{transition:none}}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ====================================================================
   3. IL MODULO VERO
   ====================================================================
   Nella demo il modulo era finto e lo scriveva la pagina. Qui lo genera
   dls_form_render() in dls-core/form.php, che porta con se' il nonce, il
   campo trappola, la marcatura temporale, i due consensi e il link
   all'informativa NELLA LINGUA GIUSTA. Quel markup non si tocca: e' logica
   e sopravvive al cambio di tema. Si veste, e basta.
   ==================================================================== */

.dls-form { display: grid; gap: 12px; grid-template-columns: 1fr; }
.dls-form p { margin: 0; }

/* Su schermo largo i campi corti stanno in mezza colonna. Chi decide quali
   sono corti e' dls_form_render(), che li marca con .dls-campo-breve: qui
   non si conta la posizione dei campi, perche' quel conteggio si romperebbe
   in silenzio il giorno in cui i campi cambiano numero. */
@media (min-width: 620px) {
	.dls-form { grid-template-columns: 1fr 1fr; }
	.dls-form > p { grid-column: 1 / -1; }
	.dls-form > p.dls-campo-breve { grid-column: auto; }
}

.dls-form label {
	display: block; font-size: .65rem; letter-spacing: .18em;
	text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
	font-weight: 700;
}
.dls-form input,
.dls-form textarea {
	width: 100%; background: #fff; border: 1px solid var(--rule);
	color: var(--ink); font: inherit; font-size: .94rem; padding: 12px 14px;
	border-radius: 0;
}
.dls-form textarea { resize: vertical; }
.dls-form input:focus,
.dls-form textarea:focus { outline: 2px solid var(--pine); border-color: transparent; }

/* Il campo trappola sparisce alla vista ma NON al lettore di schermo con
   display:none: va tolto dal flusso, non dall'albero. aria-hidden lo mette
   gia' dls-core. */
.dls-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* CONSENSO — niente display:grid.
   dls_form_render() NON avvolge il testo in uno <span>: la casella e il
   testo sono figli diretti della <label>, e con una griglia il link
   all'informativa diventerebbe un elemento a se', che finisce sotto la
   casella su una riga sua. Rientro sporgente: la casella esce a sinistra
   e il testo scorre a capo allineato. E' un difetto gia' pagato una volta
   sul sito 1. */
.dls-consenso label {
	display: block; position: relative; padding-left: 28px;
	font-size: .86rem; line-height: 1.5; color: var(--ink-2);
	text-transform: none; letter-spacing: 0; font-weight: 400;
	margin-bottom: 0;
}
.dls-consenso input[type="checkbox"] {
	position: absolute; left: 0; top: .26em; width: 16px; height: 16px;
	margin: 0; accent-color: var(--pine);
}
.dls-consenso a { color: var(--brass); }

.dls-form button[type="submit"] {
	justify-self: start; background: var(--pine); color: var(--on-pine);
	border: 0; font: inherit; font-weight: 700; letter-spacing: .11em;
	text-transform: uppercase; font-size: .72rem; padding: 15px 32px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
/* Stesso comportamento del primario altrove: resta pieno e si accende, non
   schiarisce fino a smaterializzarsi. */
.dls-form button[type="submit"]:hover { background: var(--brass); transform: translateY(-1px); }
.dls-form button[type="submit"]:active { transform: translateY(0); }

.dls-form-micro { font-size: .82rem; color: var(--ink-3); margin-top: 4px !important; }

/* Esito dell'invio, reso da dls_form_esito(). */
.dls-esito { padding: 14px 18px; border: 1px solid var(--rule); background: #fff; margin-bottom: 16px; }
.dls-esito-ok { border-left: 3px solid var(--pine); }
.dls-esito-err { border-left: 3px solid #8A2B22; }
.dls-errori { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
	.dls-form button[type="submit"] { transition: none; }
}

/* ---------- 4. la CTA WhatsApp di dls-core ---------- */
/* Nella demo era <a class="btn2">. Qui la disegna dls_cta_whatsapp_html(),
   che decide da sola la classe e — finche' il numero manca — emette uno
   <span> INERTE invece di un <a href="#">: un'ancora finta sarebbe un link
   rotto travestito da pulsante. Lo span va vestito come il secondario,
   altrimenti resta testo nudo accanto a un bottone pieno. */
.azioni .dls-cta-2 {
	border: 1px solid var(--rule); padding: 14px 24px; text-decoration: none;
	font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
	font-weight: 700; color: var(--ink); display: inline-block;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
/* Il contorno resta contorno al passaggio, come .btn2: riempirlo di pino lo
   renderebbe identico al primario a riposo che gli sta accanto. */
.azioni a.dls-cta-2:hover {
	background: rgba(14,46,43,.06); color: var(--pine); border-color: var(--pine);
	box-shadow: inset 0 0 0 1px var(--pine);
}
/* Inerte: ha l'aspetto del pulsante e sta al suo posto nella riga, ma non
   promette un'azione che non puo' mantenere. */
.azioni .dls-cta-2-inerte { cursor: default; color: var(--ink-3); border-style: dashed; }

/* ---------- 5. pagine di lettura ---------- */
.sez-lettura { max-width: 78ch; }
.sez-lettura h1 { font-size: clamp(1.9rem,3.9vw,3rem); margin-bottom: clamp(20px,3vh,36px); }
.sez-lettura h2 { font-size: clamp(1.2rem,2vw,1.5rem); margin: 2em 0 .6em; }
.sez-lettura h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.sez-lettura p { margin-bottom: 1em; }
.sez-lettura ul, .sez-lettura ol { margin: 0 0 1em; padding-left: 1.3em; }
.sez-lettura li { margin-bottom: .4em; }
.sez-lettura table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: .93rem; }
.sez-lettura th, .sez-lettura td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.sez-lettura th { font-weight: 600; color: var(--ink); }

/* Lo slot vuoto di dls_valore_html(): il campo esiste, il dato no. Non e'
   invisibile — un trattino basso appena accennato dice che li' manca
   qualcosa, senza scrivere «TODO» in faccia al cliente. */
.dls-vuoto { display: inline-block; min-width: 4.5em; border-bottom: 1px solid var(--rule); }

/* ---------- 6. la piastra bianca sotto l'emblema ---------- */
/* Il piede e' gia' bianco, quindi oggi questa regola non sposta un pixel.
   Serve lo stesso: il PNG dell'emblema e' TRASPARENTE, e la regola d'uso
   vieta di appoggiare la bandiera su un fondo colorato — o fondo bianco, o
   un bordo bianco di 1/25 dell'altezza resa. Senza la piastra, la garanzia
   dipenderebbe dal fatto che nessuno cambi mai `footer{background:#fff}`, e
   quella e' una decisione grafica che qualcuno prima o poi prendera'.

   L'altezza resa dell'emblema e' 72px oltre i 700px di viewport: 1/25 fa
   2,88px. 1rem per lato ne da' 16, cioe' cinque volte il minimo, anche
   quando l'emblema scende a 28px sui telefoni (1,12px richiesti).

   #ffffff per esteso e non una variabile della palette: e' un obbligo
   d'uso dell'emblema, non un colore del progetto, e una revisione della
   gamma non deve poterlo cambiare. */
.loghi.piastra-emblema {
	background: #ffffff;
	padding: 1rem;
	/* Il padding non deve spostare l'emblema rispetto al margine della
	   colonna: lo si recupera a sinistra, cosi' il logo resta allineato al
	   testo sotto. */
	margin-left: -1rem;
	width: fit-content;
}

/* ---------- 7. la targa torna attaccata all'hero ---------- */
/* Il layout `flow` di WordPress mette --wp--style--block-gap fra i figli
   diretti del contenitore del contenuto. Il blocco core/html non ha un
   involucro proprio: le sue sezioni diventano figli diretti di quel
   contenitore, e si prendevano 19,2px di margine a testa. Sull'hero si
   vedeva: una striscia di carta fra la fotografia e la fascia dei numeri,
   che nella demo erano attaccate.

   La spaziatura di questa pagina la governa il foglio della proposta —
   .sez ha il suo padding-block, le fasce il loro — quindi il gap del core
   qui e' solo un residuo. Azzerato SOLO sulla home: le pagine di lettura
   usano lo stesso contenitore ma con contenuto a blocchi vero, e li' il
   margine fra un paragrafo e l'altro serve. */
body.home .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- 8. il marchio nella barra ---------- */
/* Il wordmark tipografico ha lasciato il posto al logo del committente.
   .mark resta un collegamento e non un blocco di testo: il ritorno in alto
   gli da' il fuoco dopo lo scorrimento, e un <a> e' focalizzabile. */
.mark { display: inline-flex; align-items: center; line-height: 0; }
.mark img {
	/* Piu' grande di prima, per due ragioni sommate: il file sorgente aveva
	   il 32% di margine trasparente — 149px solo in basso — e quel vuoto
	   contava come altezza, quindi il marchio rendeva molto piu' piccolo
	   della scatola che occupava. Tolto il margine, la stessa altezza
	   restituisce un marchio piu' grande di un terzo; alzata anche la
	   misura, la riga «DIMORA» torna leggibile. */
	height: clamp(34px, 3.6vw, 52px);
	width: auto;
	/* `max-width: 100%` arriva dalla regola di base su tutte le immagini, ed
	   e' giusta ovunque tranne qui: il contenitore .mark si dimensiona sul
	   contenuto, quindi la percentuale si risolve contro una larghezza che
	   dipende dall'immagine stessa. I due si mordono la coda e il logo
	   usciva a 113px invece dei 138 che gli spettano a 46px di altezza,
	   cioe' schiacciato di un quinto. Qui comanda l'altezza. */
	max-width: none;
	/* Le proporzioni sono 3:1 esatte: dichiarate width/height nel markup
	   riservano lo spazio prima che l'immagine arrivi, cosi' la barra non
	   sussulta al caricamento. */
}

/* ---------- 9. le due CTA hanno la stessa larghezza ---------- */
/* Erano larghe quanto il loro testo, e «Richiedi disponibilità» e «Scrivici
   su WhatsApp» non sono lunghi uguali. Griglia a colonne uguali: entrambe
   prendono la misura della piu' larga, e il contenitore si stringe sul
   contenuto invece di allargarsi a tutta la colonna.
   `1fr` con `width: fit-content` risolve ogni colonna alla stessa misura,
   quella del testo piu' lungo — nessun numero magico da ritoccare il giorno
   che il copy cambia. */
.azioni {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	justify-content: start;
	align-items: stretch;
	width: fit-content;
	gap: 14px;
}
/* Con le due caselle uguali il testo va centrato: allineato a sinistra,
   quello corto lascerebbe un vuoto a destra che si legge come un errore. */
.azioni > .btn,
.azioni > .btn2,
.azioni > .dls-cta-2 {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* Sotto i 560px si impilano e prendono tutta la larghezza: affiancate
   sarebbero due colonne troppo strette per due etichette di quella
   lunghezza. */
@media (max-width: 560px) {
	.azioni { grid-auto-flow: row; width: 100%; }
}

/* ---------- 10. il menu senza numeri ---------- */
/* I numeri non si stampano piu' nel menu — restano nella pagina, dove
   aprono ogni sezione. La regola del pannello aveva una prima colonna da
   44px riservata al numero: senza il numero, il TESTO ci finirebbe dentro e
   andrebbe a capo dentro una colonna larga 44px. Colonna sola. */
.pannello-in a {
	grid-template-columns: 1fr;
	gap: 0;
}
/* Nell'indice largo la spaziatura era in parte affidata al margine destro
   del numero. Tolto quello, le voci respirano col gap del contenitore, che
   sale un poco per compensare. */
@media (min-width: 1400px) {
	.indice { gap: 26px; }
}