/* ===========================================================================
   L'Ambrosiana Immobiliare — foglio di stile unico

   SISTEMA GRAFICO: «Concept blu», consegna FP Studios di settembre 2026
   (modifiche/Desing System sito Ambrosina.pdf). Il prototipo navigabile della
   consegna e' dichiarato fonte di verita': ogni valore qui sotto viene dal suo
   CSS, e i nomi delle classi sono i suoi (.prop-card, .side-card, .valori,
   .quadranti…) cosi' che la revisione grafica possa confrontare le due cose
   riga per riga. Dove il sito reale ha dovuto fare diversamente — dati veri al
   posto dei sei annunci d'esempio, form che funzionano senza JavaScript,
   gallery con piu' di quattro fotografie — lo dice il commento sul posto e lo
   motiva DECISIONI §5.3.

   PERCHE' UN SOLO FILE, E BLOCCANTE. Il CSS critico inline piu' un foglio
   differito ha prodotto tre volte pagine senza stili (vedi la storia in
   DECISIONI §2.19). Un solo file con cache di un anno: una richiesta, poi mai
   piu'.

   MISURA: da rimisurare a ogni ritocco, non da stimare:
     wc -c public/assets/css/site.css && gzip -c public/assets/css/site.css | wc -c

   ORDINE: token e base prima, componenti dopo. Ogni @media sta in fondo alla
   propria sezione: a parita' di specificita' vince l'ultima dichiarazione, e una
   regola di base scritta dopo un @media lo annulla (vedi bin/check-css.py).

   SOGLIE: sette, a larghezze massime, come nella consegna (slide 16):
   1300 · 1150 · 940 (tablet) · 900 · 820 · 620 · 560. Nessun contenuto viene
   nascosto passando al mobile: cambia solo la composizione.
   =========================================================================== */

/* --- Font self-hosted, subset latino ------------------------------------
   Due famiglie, come da consegna: Cormorant Garamond (display) e Manrope
   (testo). La consegna prevede un <link> a Google Fonts; qui sono servite dal
   nostro dominio, che la consegna stessa ammette («con l'autohosting servire
   solo questi tagli in woff2»). Le ragioni: la CSP dichiara font-src 'self', e
   una richiesta a fonts.gstatic.com trasmette a Google l'IP di ogni
   visitatore prima di qualsiasi consenso.
   I file sono i variabili di Google Fonts, sottoinsieme latino: 38 + 37 + 24 kB.
   format('woff2') e non 'woff2-variations', che non esiste nella specifica e fa
   scartare l'intera regola. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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;
}
/* Il corsivo e' un disegno a se', non un'inclinazione del tondo: serve alla
   parola chiave dei titoli, ai numeri romani dei servizi e a «Trattativa
   riservata», che per la consegna e' parte dell'identita' dell'agenzia. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-latin-italic.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* --- Token -------------------------------------------------------------- */
:root {
  /* Una sola famiglia cromatica: il blu aziendale #4655AD e le sue
     declinazioni. Nessun colore fuori da questa lista (consegna, slide 4).
     Massimo due fondi per pagina: stone o bianco per il contenuto, blu per le
     fasce istituzionali. */
  --stone: #F4F6FB;          /* fondo pagina, campi form */
  --white: #FFFFFF;          /* card, header, sezioni */
  --ink: #1B1E2A;            /* testo corrente */
  --blu: #232B5C;            /* bottoni primari, prezzi, numeri */
  --blu-scuro: #1A2046;      /* footer, fascia CTA, marchio su fondo chiaro */
  --accento: #4655AD;        /* etichette, link, focus, corsivi nei titoli */
  --accento-chiaro: #AEB7E5; /* etichette su fondi blu, mai #4655AD li' */
  --grigio: #5D6275;         /* testo secondario */
  --linea: #E1E4F0;          /* bordi e divisori */

  /* Le quattro tipologie. Gli stessi colori identificano le categorie
     ovunque: quadranti della pagina Ricerca, pallini della lista, badge.
     Due profondi con testo bianco, due tenui con testo blu notte. */
  --q1: #2A3574;             /* di Prestigio */
  --q2: #A6A8DD;             /* Residenziali */
  --q3: #3575A7;             /* Commerciali */
  --q4: #DDE8F3;             /* Locazioni */

  /* Squadrato: raggio 2 px, un'unica ombra, divisori a 1 px. La barra di
     ricerca dell'hero ha l'unica ombra piu' marcata. */
  --raggio: 2px;
  --ombra: 0 18px 45px rgba(28, 32, 60, .10);
  --ombra-ricerca: 0 12px 38px rgba(8, 10, 20, .26);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  /* Altezza minima della testata: costante, non misurata. Le fasce
     fotografiche risalgono sotto la testata di esattamente questa misura.
     Il prototipo la misurava in JavaScript (--headoff); qui e' fissa perche'
     la testata ha min-height fissa, e cosi' l'impaginazione non aspetta uno
     script. */
  --head-h: 84px;

  /* Compatibilita': la scala del foglio precedente, usata ancora dagli style
     in linea del pannello di gestione e di due form (una ventina di
     occorrenze). Stessi valori di prima, cosi' quelle impaginazioni non
     cambiano; il sito pubblico non li usa. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 17px;
  --fs-xl: clamp(24px, 1.2rem + 1.5vw, 38px);
  --ink-soft: var(--grigio);
  --font-ui: var(--font-body);
}

/* --- Reset selettivo ---------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--stone);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
[hidden] { display: none !important; }

/* Focus visibile su ogni elemento interattivo: outline 2 px blu accento con
   scarto di 3 px. La consegna lo segna «da non rimuovere». */
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--blu); color: var(--white);
  padding: 10px 16px; font-weight: 700; font-size: 14px;
}
.skip-link:focus { top: 12px; }

/* --- Impaginazione ------------------------------------------------------ */
/* .wrap resta come sinonimo: la usano il pannello e le pagine legali, che non
   hanno ragione di cambiare markup per un cambio di nome. */
.container, .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* Le pagine legali: colonna di lettura stretta, con il ritmo verticale di una
   sezione compatta sotto l'intestazione. */
.wrap--narrow { max-width: 820px; padding-top: 72px; padding-bottom: 96px; }
.section { padding: 96px 0; }
.section.tight { padding: 72px 0; }
.section.flush-top { padding-top: 0; }

@media (max-width: 620px) {
  .section { padding: 72px 0; }
  .section.tight { padding: 56px 0; }
}

/* --- Tipografia --------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}
h2 { font-size: clamp(32px, 4vw, 46px); letter-spacing: .01em; }
h1 em, h2 em { font-style: italic; color: var(--accento); }
p { text-wrap: pretty; }
.lead { font-size: 18px; color: var(--grigio); max-width: 640px; }

/* Occhiello di sezione: trattino a sinistra, che scompare quando la testata
   e' centrata. */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accento);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--accento); flex: none; }

.section-head { margin-bottom: 52px; }
/* Testata con il link «Tutti gli…» a destra, sulla stessa linea di base del
   titolo. Nel prototipo era uno style inline ripetuto in quattro punti. */
.section-head--split {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap;
}
.section-head.center { text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head.center .lead { margin: 16px auto 0; }

/* --- Bottoni ------------------------------------------------------------
   Padding 14×28, testo 13 px 700 maiuscolo, spaziatura .14em, raggio 2 px.
   `.btn` da solo e' il blu pieno: il pannello e la pagina di revoca usano la
   classe nuda e devono restare leggibili senza toccare il loro markup. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.3;
  border: 1px solid transparent; border-radius: var(--raggio);
  background: var(--blu); color: var(--white);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--blu-scuro); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-blu { background: var(--blu); color: var(--white); }
.btn-blu:hover { background: var(--blu-scuro); }
.btn-accento { background: var(--accento); color: var(--white); }
.btn-accento:hover { background: #37438C; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: var(--white); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-outline, .btn--ghost { background: transparent; border-color: var(--blu); color: var(--blu); }
.btn-outline:hover, .btn--ghost:hover { background: var(--blu); color: var(--white); }
.btn--small { padding: 9px 16px; font-size: 11.5px; }
.btn--block { width: 100%; }

/* «Scopri →»: in hover lo spazio fra testo e freccia passa da 8 a 12 px. */
.link-arrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blu);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .2s ease, color .2s ease;
}
a.link-arrow:hover, .prop-card:hover .link-arrow { gap: 12px; color: var(--accento); }

/* --- Testata -------------------------------------------------------------
   Sticky, bianca al 94% con sfocatura. Sopra le fotografie a tutta larghezza
   (hero della home, intestazione delle pagine interne) e' trasparente e tutto
   passa in bianco: lo stato lo porta `.hero-overlay` sul <body>, che il server
   stampa gia' sulle pagine con fotografia e site.js toglie appena la
   fotografia e' scorsa sotto la testata. Senza JavaScript un <noscript> nel
   layout annulla lo stato trasparente, altrimenti scorrendo il testo della
   pagina passerebbe sotto una testata trasparente con le voci in bianco. */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--head-h); gap: 24px;
}

/* Marchio: simbolo 50×50 in blu notte, lettering Cormorant 25 px maiuscolo
   con il ® in apice, sottotitolo corsivo 12,5 px centrato sotto. Distanza
   simbolo–testo 13 px. Transizione colore 0,3 s, sincronizzata con la testata. */
.logo { display: inline-flex; align-items: center; gap: 13px; color: var(--blu-scuro); flex: none; }
.logo-mark { flex: none; width: 50px; height: 50px; transition: color .35s ease; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-word {
  font-family: var(--font-display); font-size: 25px; font-weight: 500;
  letter-spacing: .055em; text-transform: uppercase; white-space: nowrap;
  color: var(--blu-scuro); transition: color .3s ease;
}
.logo-word sup { font-size: .34em; letter-spacing: 0; vertical-align: super; }
.logo-tag {
  align-self: center; margin-top: 2px;
  font-family: var(--font-display); font-style: italic; font-size: 12.5px; letter-spacing: .015em;
  color: var(--grigio); white-space: nowrap; transition: color .3s ease;
}
.logo--inverse, .logo--inverse .logo-word { color: var(--white); }
/* Il simbolo in testata prende il colore della tipologia della pagina sulla
   testata BIANCA: sulle quattro sezioni e sulla scheda di un immobile il
   <body> porta sezione-q1…q4, che imposta --logo-solid con lo STESSO colore
   dei quadranti della pagina Ricerca. Sopra la fotografia il simbolo resta
   bianco come il lettering, e il colore compare quando la testata diventa
   bianca allo scroll. Scelte del committente del 28 settembre 2026: il
   prototipo lo colorava anche sopra la foto, e sul bianco usava tinte
   abbassate (--q1s…--q4s) che si distinguevano appena dal blu del marchio.
   Altrove la variabile non c'e' e il simbolo resta blu notte. Solo il
   simbolo: il lettering non cambia. */
.site-header .logo-mark { color: var(--logo-solid, var(--blu-scuro)); }
.sezione-q1 { --logo-solid: var(--q1); }
.sezione-q2 { --logo-solid: var(--q2); }
.sezione-q3 { --logo-solid: var(--q3); }
.sezione-q4 { --logo-solid: var(--q4); }
.logo--inverse .logo-tag { color: rgba(255, 255, 255, .82); }

.nav-main { display: flex; align-items: center; gap: 34px; }
.nav-main a {
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink); position: relative; padding: 6px 0;
}
/* Sottolineatura che cresce da 0 a 100% in 0,25 s. */
.nav-main a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--accento);
  transition: width .25s ease;
}
.nav-main a:hover::after, .nav-main a[aria-current="page"]::after { width: 100%; }
.nav-main a[aria-current="page"] { color: var(--blu); }
.header-cta { white-space: nowrap; }
/* «L’ Ambrosiana»: nel Manrope l'apostrofo si incolla alla A. Lo stacco e' un
   margine e non uno spazio, cosi' la voce non va mai a capo in mezzo. Come
   nel prototipo (.stacco). */
.stacco { margin-left: .2em; }

/* Menu mobile: un <details>, cosi' si apre anche senza JavaScript. Il
   <summary> e' l'hamburger, che si trasforma in croce quando e' aperto.
   Il pannello si apre sotto la testata, a piena larghezza, con divisori: e'
   posizionato rispetto alla testata (sticky, quindi contenitore), non al
   <details>, che resta statico. */
.menu-mobile { display: none; }
.burger {
  list-style: none; width: 44px; height: 44px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  cursor: pointer;
}
.burger::-webkit-details-marker { display: none; }
.burger span { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform .25s ease, opacity .25s ease, background-color .3s ease; }
.menu-mobile[open] .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-mobile[open] .burger span:nth-child(2) { opacity: 0; }
.menu-mobile[open] .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 1px solid var(--linea);
  box-shadow: var(--ombra);
}
.mobile-nav a {
  display: block; padding: 16px 24px; min-height: 44px;
  font-weight: 600; color: var(--ink); border-top: 1px solid var(--linea);
}
.mobile-nav a[aria-current="page"] { color: var(--accento); }

/* Stato sopra la fotografia. */
.hero-overlay .site-header {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero-overlay .site-header .logo,
.hero-overlay .site-header .logo-word { color: var(--white); }
.hero-overlay .site-header .logo-tag { color: rgba(255, 255, 255, .85); }
.hero-overlay .site-header .logo-mark { color: var(--white); }
.hero-overlay .nav-main a,
.hero-overlay .nav-main a[aria-current="page"] { color: var(--white); }
.hero-overlay .nav-main a::after { background: var(--white); }
.hero-overlay .header-cta { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--white); }
.hero-overlay .header-cta:hover { background: rgba(255, 255, 255, .16); }
.hero-overlay .burger span { background: var(--white); }
/* Col menu aperto la testata torna bianca: il pannello e' bianco, e una
   testata trasparente sopra la fotografia con un pannello bianco sotto si
   leggerebbe come due oggetti staccati. */
.hero-overlay .site-header:has(.menu-mobile[open]) { background: var(--white); }
.hero-overlay .site-header:has(.menu-mobile[open]) .logo,
.hero-overlay .site-header:has(.menu-mobile[open]) .logo-word { color: var(--blu-scuro); }
.hero-overlay .site-header:has(.menu-mobile[open]) .logo-tag { color: var(--grigio); }
.hero-overlay .site-header:has(.menu-mobile[open]) .logo-mark { color: var(--logo-solid, var(--blu-scuro)); }
.hero-overlay .site-header:has(.menu-mobile[open]) .burger span { background: var(--ink); }

@media (max-width: 1300px) { .nav-main { gap: 24px; } }
@media (max-width: 1150px) { .header-cta { display: none; } }
@media (max-width: 940px) {
  .nav-main { display: none; }
  .menu-mobile { display: block; }
}
@media (max-width: 560px) {
  .logo { gap: 10px; }
  .logo-mark { width: 44px; height: 44px; }
  .logo-word { font-size: 21px; }
  .logo-tag { font-size: 11px; }
}

/* --- Fasce fotografiche --------------------------------------------------
   Hero della home e intestazione delle pagine interne cominciano dal bordo
   alto del documento e scorrono sotto la testata: risalgono di --head-h con
   un margine negativo e restituiscono lo spazio col padding.
   La fotografia e' un <img> con srcset e non un background-image: il browser
   sceglie la larghezza che serve, e su telefono scarica 90 kB invece di 230.
   La leggibilita' dei testi dipende dai gradienti sovrapposti: vanno
   mantenuti anche cambiando fotografia (consegna, slide 9). */
.photo-bg { position: absolute; inset: 0; z-index: 0; }
.photo-bg img { width: 100%; height: 100%; object-fit: cover; }

/* --- Hero della home ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  margin-top: calc(var(--head-h) * -1);
  padding-top: var(--head-h);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--white); overflow: hidden;
}
.hero .photo-bg img { object-position: center bottom; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,10,20,.76) 0%, rgba(8,10,20,.60) 24%, rgba(8,10,20,.32) 45%, rgba(8,10,20,.08) 66%, rgba(8,10,20,0) 85%),
    linear-gradient(to top, rgba(8,10,20,.26) 0%, rgba(8,10,20,0) 24%),
    linear-gradient(to bottom, rgba(8,10,20,.58) 0%, rgba(8,10,20,.20) 11%, rgba(8,10,20,0) 19%);
}
.hero__content { position: relative; z-index: 2; width: 100%; padding-top: 50px; padding-bottom: 140px; }
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--white); opacity: .9; margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(8,10,20,.6), 0 2px 16px rgba(8,10,20,.7);
}
.hero h1 {
  font-size: clamp(40px, 5.2vw, 64px); max-width: 560px;
  text-shadow: 0 1px 3px rgba(8,10,20,.5), 0 3px 30px rgba(8,10,20,.6);
}
.hero h1 em { color: var(--accento); }
.hero__sub {
  margin-top: 20px; font-size: 17px; max-width: 480px;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 2px rgba(8,10,20,.55), 0 2px 20px rgba(8,10,20,.6);
}
.hero__sub + .hero__sub { margin-top: 10px; }
.hero-search { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; }

@media (max-width: 940px) {
  .hero__content { padding-bottom: 36px; }
  .hero-search { position: relative; bottom: auto; }
}

/* --- Barra di ricerca della home ----------------------------------------
   Categoria, zona e budget compongono la ricerca verso /immobili/. Sotto i
   940 px esce dalla sovrapposizione e si dispone in flusso su due colonne. */
.searchbar {
  background: rgba(255, 255, 255, .97);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-ricerca);
  padding: 4px;
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 6px;
  color: var(--ink);
}
.searchbar__field { padding: 3px 14px; border-right: 1px solid var(--linea); min-width: 0; }
.searchbar__field:last-of-type { border-right: none; }
.searchbar label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accento);
}
.searchbar select {
  width: 100%; border: none; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding: 0; outline-offset: 2px; cursor: pointer;
}
.searchbar .btn { align-self: stretch; padding: 0 26px; font-size: 11.5px; }

@media (max-width: 940px) {
  .searchbar { grid-template-columns: 1fr 1fr; margin-bottom: 34px; }
  .searchbar__field { border-right: none; border-bottom: 1px solid var(--linea); padding: 8px 14px; }
  .searchbar .btn { grid-column: 1 / -1; min-height: 44px; }
}
@media (max-width: 560px) {
  .searchbar { grid-template-columns: 1fr; }
  /* 16 px: sotto quella misura iOS Safari ingrandisce la pagina al tocco. */
  .searchbar select { font-size: 16px; }
}

/* --- Fascia valori -------------------------------------------------------
   Tre celle separate da bordi verticali. Sotto gli 820 px una colonna con
   divisori orizzontali: e' l'unico caso in cui i bordi cambiano orientamento.
   Sotto i 560 torna su tre colonne strette, senza il testo. */
.valori { background: var(--white); border-bottom: 1px solid var(--linea); }
.valori--bordered { border-top: 1px solid var(--linea); }
.valori__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.valori__cell { padding: 44px 54px; border-left: 1px solid var(--linea); }
.valori__cell:first-child { border-left: none; }
.valori__num { font-family: var(--font-display); font-size: 44px; color: var(--blu); line-height: 1; }
.valori__lbl {
  margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accento);
}
.valori__txt { margin-top: 6px; font-size: 14px; color: var(--grigio); }
.valori--home .valori__cell { padding: 26px 36px; }
.valori--home .valori__num { font-size: 32px; }
.valori--home .valori__lbl { font-size: 11.5px; margin-top: 6px; }
.valori--home .valori__txt { font-size: 13px; }

@media (max-width: 820px) {
  .valori__grid { grid-template-columns: 1fr; }
  .valori__cell, .valori--home .valori__cell { border-left: none; border-top: 1px solid var(--linea); padding: 28px 24px; }
  .valori__cell:first-child { border-top: none; }
}
@media (max-width: 560px) {
  .valori__grid { grid-template-columns: repeat(3, 1fr); }
  .valori__cell, .valori--home .valori__cell { border-top: none; border-left: 1px solid var(--linea); padding: 20px 10px; }
  .valori__cell:first-child { border-left: none; }
  .valori__num, .valori--home .valori__num { font-size: 25px; }
  .valori__lbl, .valori--home .valori__lbl { font-size: 9.5px; letter-spacing: .06em; margin-top: 6px; }
  .valori__txt, .valori--home .valori__txt { display: none; }
}

/* --- Card immobile -------------------------------------------------------
   Copertina 4:3, badge in alto a sinistra, poi zona · contratto, titolo,
   metadati, filetto, prezzo e «Scopri». In hover la card si solleva di 5 px
   con l'ombra e l'immagine si ingrandisce a 1.06.
   Il link e' il titolo, allargato a tutta la card col suo ::after: un solo <a>
   per card, cioe' una sola fermata da tastiera. Il prototipo faceva della card
   intera un <a>, che per un lettore di schermo legge tutto il contenuto come
   testo del link. */
.prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.prop-card {
  position: relative;
  background: var(--white); border: 1px solid var(--linea); border-radius: var(--raggio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.prop-card:hover { transform: translateY(-5px); box-shadow: var(--ombra); }
.prop-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--blu-scuro); }
.prop-media picture, .prop-media img { width: 100%; height: 100%; }
.prop-media img { object-fit: cover; transition: transform .5s ease; }
.prop-card:hover .prop-media img { transform: scale(1.06); }
.prop-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prop-zona {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accento);
}
/* La card regge tre righe di titolo: oltre, si accorcia il titolo, non si
   riduce il corpo (consegna, slide 17). Il taglio lo fa il CSS e il titolo
   intero resta nel markup. */
.prop-title {
  font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prop-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prop-title a:focus-visible { outline: none; }
.prop-card:has(.prop-title a:focus-visible) { outline: 2px solid var(--accento); outline-offset: 3px; }
.prop-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--grigio); margin-top: 2px; }
.prop-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.prop-price { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--blu); line-height: 1.2; }
.prop-price small, .prezzo small { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--grigio); }
/* Prezzo assente o riservato: mai un prezzo indicativo. La dicitura in
   corsivo blu e' parte dell'identita' dell'agenzia. */
.prop-price.riservata { font-size: 16px; font-style: italic; font-weight: 500; color: var(--accento); }

/* Segnaposto quando un immobile non ha fotografie (images.php). */
.ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: #EFF1F8; color: var(--grigio);
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  padding: 16px;
}

@media (max-width: 940px) { .prop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .prop-grid { grid-template-columns: 1fr; } }

/* --- Badge di categoria -------------------------------------------------- */
.badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--raggio);
  background: rgba(255, 255, 255, .92); color: var(--blu);
}
.badge.q1 { background: var(--q1); color: var(--white); }
.badge.q2 { background: var(--q2); color: var(--blu-scuro); }
.badge.q3 { background: var(--q3); color: var(--white); }
.badge.q4 { background: var(--q4); color: var(--blu-scuro); }
.badge.riservato { position: static; background: var(--blu); color: var(--accento-chiaro); border: 1px solid var(--accento); }

/* --- Tessere categoria (home) ------------------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-tile {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--raggio); overflow: hidden;
  display: flex; align-items: flex-end; color: var(--white); background: var(--blu-scuro);
}
.cat-tile picture, .cat-tile .ph { position: absolute; inset: 0; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,27,58,.9) 0%, rgba(22,27,58,.25) 55%, rgba(22,27,58,.08) 100%);
}
.cat-tile:hover img { transform: scale(1.07); }
.cat-tile__inner { position: relative; z-index: 2; padding: 26px; }
.cat-tile__sub { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accento-chiaro); }
.cat-tile h3 { font-size: 27px; margin-top: 6px; }
.cat-tile__cnt { font-size: 12.5px; margin-top: 8px; color: rgba(255, 255, 255, .75); }

@media (max-width: 940px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

/* --- Pagina Ricerca: quadranti e voci -----------------------------------
   Quadrante e voce sono la stessa scelta mostrata due volte: passando sulla
   voce si illumina il quadrante corrispondente, e viceversa. La sincronia usa
   :has(); dove non c'e', resta l'hover di ciascun elemento su se stesso (la
   variante di ripiego chiesta dalla consegna), e il JavaScript di site.js
   aggiunge la classe .is-hot che accende la coppia anche li'. */
.ricerca-split {
  display: grid; grid-template-columns: minmax(270px, 400px) 1fr;
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
.quadranti {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  aspect-ratio: 1 / 1; border-radius: var(--raggio); overflow: hidden;
}
.quadrante { position: relative; display: flex; align-items: flex-end; min-width: 0; }
.quadrante::after { content: ""; position: absolute; inset: 0; background: rgba(26, 32, 70, 0); transition: background-color .3s ease; }
.quadrante:hover::after, .quadrante.is-hot::after { background: rgba(26, 32, 70, .08); }
.quadrante.q1:hover::after, .quadrante.q3:hover::after,
.quadrante.q1.is-hot::after, .quadrante.q3.is-hot::after { background: rgba(255, 255, 255, .12); }
.quadrante__nome {
  position: relative; z-index: 2;
  padding: clamp(15px, 2vw, 22px);
  font-family: var(--font-display); font-size: clamp(17px, 1.8vw, 23px); line-height: 1.14;
  overflow-wrap: break-word; hyphens: auto;
}
.quadrante.q1 { background: var(--q1); color: var(--white); }
.quadrante.q2 { background: var(--q2); color: var(--blu-scuro); }
.quadrante.q3 { background: var(--q3); color: var(--white); }
.quadrante.q4 { background: var(--q4); color: var(--blu-scuro); }
.voci { display: flex; flex-direction: column; }
.voce {
  display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start;
  padding: 17px 0; border-bottom: 1px solid var(--linea);
}
.voce:first-child { padding-top: 0; }
.voce__chip { width: 14px; height: 14px; border-radius: 3px; margin-top: 6px; box-shadow: inset 0 0 0 1px rgba(26, 32, 70, .16); }
.voce.q1 .voce__chip { background: var(--q1); }
.voce.q2 .voce__chip { background: var(--q2); }
.voce.q3 .voce__chip { background: var(--q3); }
.voce.q4 .voce__chip { background: var(--q4); }
.voce__sub { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accento); }
.voce__nome {
  display: block; font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 28px); line-height: 1.14;
  color: var(--blu); margin-top: 4px; transition: color .25s ease;
}
.voce__cnt { display: block; font-size: 12.5px; color: var(--grigio); margin-top: 2px; }
.voce:hover .voce__nome, .voce.is-hot .voce__nome { color: var(--accento); }
.voci .link-arrow { margin-top: 26px; }
.ricerca-split:has(.voce.q2:hover) .quadrante.q2::after,
.ricerca-split:has(.voce.q4:hover) .quadrante.q4::after { background: rgba(26, 32, 70, .08); }
.ricerca-split:has(.voce.q1:hover) .quadrante.q1::after,
.ricerca-split:has(.voce.q3:hover) .quadrante.q3::after { background: rgba(255, 255, 255, .12); }
.ricerca-split:has(.quadrante.q1:hover) .voce.q1 .voce__nome,
.ricerca-split:has(.quadrante.q2:hover) .voce.q2 .voce__nome,
.ricerca-split:has(.quadrante.q3:hover) .voce.q3 .voce__nome,
.ricerca-split:has(.quadrante.q4:hover) .voce.q4 .voce__nome { color: var(--accento); }

@media (max-width: 820px) {
  .ricerca-split { grid-template-columns: minmax(150px, 220px) 1fr; gap: 26px; align-items: start; }
}
@media (max-width: 560px) {
  .ricerca-split { grid-template-columns: 112px 1fr; gap: 16px; }
  .quadrante__nome { padding: 7px; font-size: 10px; line-height: 1.15; }
  .voce { padding: 12px 0; gap: 10px; min-height: 44px; }
  .voce__chip { width: 10px; height: 10px; margin-top: 4px; }
  .voce__sub { font-size: 9px; }
  .voce__nome { font-size: 16px; }
  .voci .link-arrow { margin-top: 16px; font-size: 11px; }
}

/* --- Servizi: griglia della home e pagina Servizi ------------------------ */
.mini-serv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.mini-serv__item { border-top: 1px solid var(--linea); padding-top: 18px; }
.mini-serv h3 { font-size: 19px; }
.mini-serv p { font-size: 13.5px; color: var(--grigio); margin-top: 8px; line-height: 1.6; }

@media (max-width: 940px) { .mini-serv { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mini-serv { grid-template-columns: 1fr; } }

/* Tre colonne senza gap, separate da bordi a 1 px; hover con fondo #FAFBFE.
   Numerazione in numeri romani, Cormorant corsivo blu: nessuna icona. */
.serv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
}
.serv {
  padding: 36px 32px; background: var(--white);
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  transition: background-color .25s ease;
}
.serv:hover { background: #FAFBFE; }
.serv__num { font-family: var(--font-display); font-style: italic; font-size: 30px; color: var(--accento); line-height: 1; }
.serv h3 { font-size: 21px; margin-top: 14px; }
.serv p { font-size: 14px; color: var(--grigio); margin-top: 10px; }

@media (max-width: 940px) { .serv-grid { grid-template-columns: repeat(2, 1fr); } }
/* Sotto i 620 px la variante a righe: numero a sinistra, testo a destra. */
@media (max-width: 620px) {
  .serv-grid { grid-template-columns: 1fr; border-left: none; }
  .serv {
    display: grid; grid-template-columns: 34px 1fr;
    grid-template-areas: "num title" "num text";
    column-gap: 16px; row-gap: 4px; align-items: start;
    padding: 20px 4px; border-right: none;
  }
  .serv__num { grid-area: num; font-size: 19px; }
  .serv h3 { grid-area: title; margin-top: 0; font-size: 17px; }
  .serv p { grid-area: text; margin-top: 0; }
}

/* --- Blocchi a due colonne: L'Ambrosiana, Servizi ------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split--top { align-items: start; }
.split__foto { position: relative; }
/* height: auto e' necessario: l'attributo height dell'<img> (che serve a
   riservare lo spazio) diventa un'altezza CSS e vincerebbe su aspect-ratio. */
.split__foto img { width: 100%; height: auto; border-radius: var(--raggio); aspect-ratio: 4 / 5; object-fit: cover; }
.split__foto--4-3 img { aspect-ratio: 4 / 3; }
/* Targa blu sporgente sul lato della foto, con il filetto accento. */
.targa {
  position: absolute; left: -18px; bottom: 34px;
  background: var(--blu); color: var(--white);
  padding: 20px 26px; border-left: 3px solid var(--accento);
}
.targa__n { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.targa__l { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accento-chiaro); margin-top: 4px; }
.split__testo p { color: var(--grigio); margin-top: 16px; }
/* La frase che chiude un racconto: Cormorant corsivo blu, come la «firma» del
   prototipo. La specificita' la mette sopra .split__testo p. */
.split__testo .firma { margin-top: 28px; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.35; color: var(--blu); }
.split__testo .btn { margin-top: 26px; }

@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .targa { left: 12px; } }

/* --- Fascia CTA ----------------------------------------------------------
   Blu notte, centrata. E' l'elemento che da' ritmo alle pagine. */
.cta-band { background: var(--blu-scuro); color: var(--white); text-align: center; }
.cta-band h2 { color: var(--white); max-width: 700px; margin: 0 auto; }
.cta-band p { color: rgba(255, 255, 255, .75); margin: 18px auto 0; max-width: 520px; }
.cta-band__actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- Footer: quattro colonne su blu notte -------------------------------- */
.site-footer { background: var(--blu-scuro); color: rgba(255, 255, 255, .78); font-size: 14px; }
.site-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; padding: 72px 0 56px; }
.site-footer .logo { margin-bottom: 22px; }
.site-footer h2 {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accento-chiaro); margin-bottom: 18px; line-height: 1.4;
}
.site-footer li { margin-bottom: 10px; }
.site-footer a:hover { color: var(--white); }
/* Il marchio FIAIP e' scuro: sul blu notte serve una placca bianca sotto. Il
   file si mostra a dimensione nativa (96×38), mai scalato. */
.fiaip-plate { display: inline-block; margin-top: 18px; background: var(--white); padding: 6px; border-radius: var(--raggio); }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255, 255, 255, .55);
}
.site-footer__bottom nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }

@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; } }

/* --- Intestazione delle pagine interne ------------------------------------
   Fotografia panoramica con zona alta e sinistra libera, filigrana «A» in
   corsivo, occhiello e titolo con ombra del testo. */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--blu); color: var(--white);
  margin-top: calc(var(--head-h) * -1);
  padding: calc(var(--head-h) + 16px) 0 22px;
}
.page-hero .photo-bg img { object-position: center 58%; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 26%, rgba(0,0,0,0) 44%),
    linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.06) 64%, rgba(0,0,0,0) 84%);
}
.page-hero .container { position: relative; z-index: 3; }
.page-hero__filigrana {
  position: absolute; right: -18px; bottom: -42px; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-size: 132px; line-height: 1;
  color: rgba(255, 255, 255, .08); user-select: none; pointer-events: none;
}
.page-hero .kicker { font-size: 10.5px; letter-spacing: .24em; margin-bottom: 6px; opacity: 1; }
.page-hero h1 {
  font-size: clamp(27px, 3.1vw, 40px);
  text-shadow: 0 1px 3px rgba(10,14,30,.6), 0 3px 26px rgba(10,14,30,.6);
}
.page-hero h1 em { color: var(--white); }

/* --- Barra filtri della lista immobili ----------------------------------
   Bianca, sollevata sul bordo della fotografia. Tre filtri — categoria, zona,
   budget — applicati subito al cambio di una select (search.js); il pulsante
   «Filtra» e' la via senza JavaScript. */
.filtri {
  position: relative; z-index: 5;
  margin-top: -8px;
  background: var(--white); border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 18px;
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14px; align-items: end;
}
.filtri__f label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accento); margin-bottom: 6px;
}
.filtri select {
  width: 100%; padding: 12px 14px; min-height: 44px;
  border: 1px solid var(--linea); border-radius: var(--raggio);
  font-size: 14px; font-weight: 600; color: var(--ink); background: var(--white);
}
.filtri .btn { min-height: 46px; }
.risultati-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 34px 0 26px;
}
.risultati-head__n { font-size: 14px; color: var(--grigio); }
.risultati-head__n b { color: var(--blu); }
/* Mentre search.js aspetta il frammento, i risultati restano leggibili e si
   attenuano: nessuno spinner al centro della pagina (consegna, slide 18). */
[data-results][aria-busy="true"] { opacity: .45; transition: opacity .2s ease; }

@media (max-width: 940px) { .filtri { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .filtri { grid-template-columns: 1fr; }
  .filtri select { font-size: 16px; }
}

/* Lista vuota: cornice tratteggiata, titolo in Cormorant, invito a raccontare
   cosa si cerca. Vale anche per «immobile non trovato» e per la 404. */
.vuoto {
  background: var(--white); border: 1px dashed var(--accento-chiaro); border-radius: var(--raggio);
  padding: 60px 30px; text-align: center; color: var(--grigio);
}
.vuoto__big { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin-bottom: 8px; line-height: 1.2; }
.vuoto a:not(.btn) { color: var(--accento); font-weight: 700; }
.vuoto__actions { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Paginazione nello stile del link freccia. */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px 22px; flex-wrap: wrap; margin-top: 52px; }
.pager__pages { display: flex; gap: 6px; }
.pager__pages a, .pager__pages span {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--blu);
  border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--white);
}
.pager__pages a:hover { border-color: var(--accento); color: var(--accento); }
.pager__pages [aria-current="page"] { background: var(--blu); color: var(--white); border-color: var(--blu); }
.pager__pages .pager__gap { border: 0; background: none; min-width: 20px; }

/* --- Scheda immobile ------------------------------------------------------
   Due colonne: galleria, specifiche, descrizione e caratteristiche a
   sinistra; side card sticky con prezzo, modulo e recapito a destra. Sotto i
   940 px l'ordine diventa galleria → side card → informazioni, e la side card
   perde lo sticky. L'ordine nel markup e' gia' quello del telefono: le aree
   della griglia lo ricompongono su desktop. */
.breadcrumb { font-size: 12.5px; color: var(--grigio); margin-bottom: 26px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; }
.breadcrumb a { color: var(--accento); font-weight: 600; }

.dettaglio {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
  grid-template-areas: "gal side" "info side";
  column-gap: 44px; align-items: start;
}
.dettaglio__galleria { grid-area: gal; min-width: 0; }
.dettaglio__info { grid-area: info; min-width: 0; }
.side-card { grid-area: side; }

/* Sotto i 940 px: intestazione (titolo, prezzo) → fotografie → informazioni
   → modulo di richiesta. La side card si scioglie in due elementi della
   griglia, vedi il commento in pages/listing.php. */
@media (max-width: 940px) {
  .dettaglio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gal" "info" "form"; }
}

/* Galleria. La meccanica e' quella di sempre (listing.js): uno scorrevole con
   scroll-snap, swipe e tastiera senza librerie, e senza JavaScript si vedono
   tutte le fotografie scorrendo. L'aspetto e' quello della consegna:
   immagine principale 16:10 ritagliata al centro, miniature 4:3 in fila, la
   selezionata con il bordo blu. Il prototipo ne mostra quattro; gli annunci
   veri ne hanno fino a trenta, quindi la fila ne mostra quattro alla volta e
   scorre. Il ritaglio al centro e' quello chiesto dalla consegna per le
   immagini non gia' in formato; la fotografia intera resta a un clic, nello
   zoom. */
.gallery { position: relative; }
.gallery__frame { position: relative; }
.gallery__stage {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  aspect-ratio: 16 / 10; border-radius: var(--raggio);
  background: var(--blu-scuro);
}
.gallery__stage::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: center; position: relative; }
.gallery__slide picture, .gallery__slide img { width: 100%; height: 100%; }
.gallery__slide img { object-fit: cover; cursor: zoom-in; }
.gallery__nav {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 14px; pointer-events: none;
}
.gallery__btn {
  pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: var(--raggio);
  background: rgba(255, 255, 255, .92); color: var(--blu);
  display: grid; place-items: center;
}
.gallery__btn:hover { background: var(--white); }
.gallery__btn svg { width: 18px; height: 18px; }
.gallery__counter {
  position: absolute; right: 14px; bottom: 14px;
  background: rgba(26, 32, 70, .84); color: var(--white);
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--raggio);
  font-variant-numeric: tabular-nums;
}
.gallery__zoom {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .92); color: var(--blu);
  border: 0; border-radius: var(--raggio);
  padding: 8px 12px; font-size: 12px; font-weight: 700;
  cursor: zoom-in;
}
.gallery__zoom:hover { background: var(--white); }
.gallery__zoom svg { width: 14px; height: 14px; }
.gallery__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4);
  gap: 12px; margin-top: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  padding-bottom: 4px;
}
.gallery__thumbs button {
  aspect-ratio: 4 / 3; border-radius: var(--raggio); overflow: hidden;
  border: 2px solid transparent; padding: 0; background: var(--linea);
  scroll-snap-align: start; min-height: 44px;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--accento); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 560px) {
  /* Miniature piu' grandi e toccabili. */
  .gallery__thumbs { grid-auto-columns: calc((100% - 24px) / 3); }
}

/* Zoom: sovrapposizione costruita da listing.js, fotografia intera. */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(26, 32, 70, .95);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 32px 24px;
}
.lightbox__figure { display: grid; place-items: center; gap: 14px; max-height: 100%; min-width: 0; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; object-fit: contain; }
.lightbox__caption { color: var(--accento-chiaro); font-size: 12px; font-variant-numeric: tabular-nums; }
.lightbox__close, .lightbox__nav {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--white); border: 0; border-radius: var(--raggio);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close { position: absolute; top: 20px; right: 20px; }
.lightbox__close svg, .lightbox__nav svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox__figure { grid-row: 1; }
  .lightbox__nav--prev { grid-row: 2; justify-self: start; }
  .lightbox__nav--next { grid-row: 2; justify-self: end; }
}

/* Tabella specifiche: quattro colonne separate da bordi, due sotto i 560 px.
   Le celle sono quelle che l'annuncio ha davvero — la consegna vuole omesso
   un dato mancante, non un trattino — quindi il numero non e' sempre multiplo
   di quattro: i bordi stanno a destra e sotto di ogni cella e il contorno lo
   chiude il contenitore, cosi' una riga incompleta resta pulita. */
.specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 34px; background: var(--white);
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
  border-radius: var(--raggio); overflow: hidden;
}
.specs__s { padding: 20px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); min-width: 0; }
.specs__k { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); }
.specs__v { font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--blu); margin-top: 4px; overflow-wrap: anywhere; min-height: 1.2em; }

@media (max-width: 560px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .specs__s { padding: 16px; }
}

.descrizione { margin-top: 34px; }
.descrizione h2, .dettaglio__info h2 { font-size: 26px; margin-bottom: 14px; }
.descrizione p { color: var(--grigio); margin-bottom: 14px; }
.descrizione p:last-child { margin-bottom: 0; }
.blocco { margin-top: 40px; }

/* Caratteristiche: etichette rettangolari, col raggio di 2 px del resto del
   sito. La consegna le voleva a pillola; il committente le ha chieste
   squadrate il 28 settembre 2026, e cosi' nel sito non resta nessun elemento
   arrotondato. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; padding: 7px 14px;
  background: var(--white); border: 1px solid var(--linea); border-radius: var(--raggio);
  font-size: 13px; font-weight: 600; color: var(--blu);
}

/* Le altre voci della scheda MioGest, oltre alle otto della tabella: righe a
   due colonne con i filetti, stesse etichette maiuscole. */
.dati { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 34px; }
.dati__r { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.dati__r dt { color: var(--grigio); }
.dati__r dd { font-weight: 600; color: var(--ink); text-align: right; overflow-wrap: anywhere; }

@media (max-width: 620px) { .dati { grid-template-columns: 1fr; } }

.planimetrie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.planimetrie figure { background: var(--white); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; }
.planimetrie img { width: 100%; height: auto; }
.planimetrie figcaption { padding: 8px 12px; border-top: 1px solid var(--linea); font-size: 12.5px; color: var(--grigio); }
.doc-list li { border-bottom: 1px solid var(--linea); }
.doc-list a { display: flex; justify-content: space-between; padding: 12px 0; font-weight: 600; color: var(--accento); }
.doc-list__ext { font-size: 11px; letter-spacing: .12em; color: var(--grigio); }

@media (max-width: 560px) { .planimetrie { grid-template-columns: 1fr; } }

/* Side card: bordo superiore blu accento 3 px, sticky a 110 px dall'alto. */
.side-card {
  position: sticky; top: 110px;
  background: var(--white); border: 1px solid var(--linea); border-top: 3px solid var(--accento);
  border-radius: var(--raggio); padding: 30px;
}
.side-card__etichette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.side-card__etichette .badge { position: static; padding: 5px 10px; }
.side-card__zona { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accento); }
.side-card h1 { font-size: 26px; margin-top: 10px; line-height: 1.2; }
.prezzo { font-family: var(--font-display); font-size: 36px; color: var(--blu); margin-top: 8px; line-height: 1.2; }
.prezzo.riservata { font-size: 24px; font-style: italic; color: var(--accento); }
.side-card__nota { font-size: 13px; color: var(--grigio); margin-top: 10px; }
.side-card__nota b { color: var(--blu); letter-spacing: .04em; }
.side-card__form > .btn { width: 100%; margin-top: 18px; }
.avviso-riservato {
  margin-top: 18px; background: var(--stone); border-left: 3px solid var(--accento);
  padding: 14px 16px; font-size: 13px; color: var(--grigio);
}
.richiesta { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--linea); }
.richiesta h2 {
  display: flex; align-items: center; gap: 14px;
  font-size: 24px; color: var(--blu); margin-bottom: 18px;
}
.richiesta h2::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.richiesta input:not([type="checkbox"]), .richiesta textarea {
  width: 100%; margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: var(--raggio);
  font-size: 14.5px; color: var(--ink); background: var(--white);
}
.richiesta textarea { min-height: 96px; resize: vertical; display: block; }
.richiesta ::placeholder { color: #8A8FA3; opacity: 1; }
.richiesta input:focus, .richiesta textarea:focus { outline: 2px solid var(--accento); outline-offset: 0; border-color: var(--accento); }
.richiesta .btn { width: 100%; margin-top: 6px; }
.richiesta .consenso { margin: 4px 0 12px; }
.luogo { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; }
.luogo svg { flex: none; width: 22px; height: 22px; fill: var(--accento); margin-top: 3px; }
.luogo b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--blu); line-height: 1.2; }
.luogo span, .luogo a { font-size: 13.5px; color: var(--grigio); }
.luogo a { color: var(--accento); font-weight: 700; }

@media (max-width: 940px) {
  .side-card { display: contents; }
  .side-card__head { grid-area: head; margin-bottom: 26px; }
  .side-card__form {
    grid-area: form; margin-top: 40px;
    background: var(--white); border: 1px solid var(--linea); border-top: 3px solid var(--accento);
    border-radius: var(--raggio); padding: 30px;
  }
  .side-card__form > .btn { margin-top: 0; }
  .side-card__form .richiesta { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .side-card__form { padding: 24px 20px; }
  .richiesta input:not([type="checkbox"]), .richiesta textarea { font-size: 16px; }
}

/* --- Contatti ------------------------------------------------------------ */
.contatti-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.form-card {
  background: var(--white); border: 1px solid var(--linea); border-top: 3px solid var(--blu);
  border-radius: var(--raggio); padding: 38px;
}
.form-card h2 { font-size: 26px; margin-bottom: 8px; }
.form-card__sotto { font-size: 14px; color: var(--grigio); margin-bottom: 26px; }
.campo { margin-bottom: 18px; }
.campo label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accento); margin-bottom: 7px;
}
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--linea); border-radius: var(--raggio);
  font-size: 15px; color: var(--ink); background: var(--stone);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 2px solid var(--accento); outline-offset: 0; border-color: var(--accento); }
.campo textarea { min-height: 130px; resize: vertical; }
.campo__hint { font-size: 12.5px; color: var(--grigio); margin-top: 6px; }
/* Errore di campo: bordo e testo in blu accento sotto il campo. Il blu e non
   il rosso, perche' la palette non ha un rosso (consegna, slide 18); il
   bordo pieno a 2 px e il testo in grassetto lo distinguono dal focus. */
.campo [aria-invalid="true"], .richiesta [aria-invalid="true"] { border: 2px solid var(--accento); }
.campo__err, .form__error { color: var(--accento); font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--grigio); margin-bottom: 22px; }
.consenso input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--accento); }
.consenso a { color: var(--accento); font-weight: 700; }
/* Invio riuscito: messaggio in linea sotto il modulo, senza cambio pagina. */
.ok-msg {
  background: #EEF0FA; border: 1px solid #C6CDEB; color: #2C3573;
  padding: 16px; border-radius: var(--raggio); font-size: 14px; margin-top: 18px;
}
.ok-msg--errore { background: var(--white); border: 2px solid var(--accento); color: var(--blu); }
.ok-msg p + p { margin-top: 6px; }
.info-blocco { margin-bottom: 30px; }
.info-blocco h2 {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accento); margin-bottom: 10px; line-height: 1.4;
}
.info-blocco p { color: var(--grigio); }
.info-blocco p b, .info-blocco p a { color: var(--ink); font-weight: 700; }
.mappa { border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; margin-top: 10px; }
.mappa__nota { font-size: 12.5px; color: var(--grigio); margin-top: 8px; }
.mappa__nota a { color: var(--accento); font-weight: 700; }

@media (max-width: 900px) { .contatti-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .form-card { padding: 26px 20px; }
  .campo input, .campo textarea, .campo select { font-size: 16px; }
}

/* --- Form generici: revoca consensi, pannello ---------------------------- */
.form { display: grid; gap: 18px; max-width: 560px; }
.form__row { display: grid; gap: 6px; }
.form__row label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="password"], .form textarea, .form select {
  width: 100%; min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--stone); font-size: 15px;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--accento); outline-offset: 0; border-color: var(--accento); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border: 2px solid var(--accento); }
.form__hint { color: var(--grigio); font-size: 12.5px; }
/* Honeypot: fuori dallo schermo e non display:none, che i bot riconoscono.
   Deve restare `position: absolute`: se diventasse visibile un utente vero
   lo compilerebbe, e il suo messaggio verrebbe scartato in silenzio. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice {
  border-left: 3px solid var(--accento); background: var(--white);
  padding: 16px 18px; font-size: 14px; color: var(--grigio); border-radius: 0 var(--raggio) var(--raggio) 0;
}
.notice--ok { background: #EEF0FA; color: #2C3573; }
.notice--error { border-left-width: 4px; color: var(--blu); }
.notice p + p { margin-top: 8px; }
.notice a { color: var(--accento); font-weight: 700; }

/* --- Mappa e contenuti esterni dietro consenso -----------------------------
   Leaflet dichiara z-index fino a 1000: il contesto di impilamento li
   racchiude, altrimenti la testata sticky finirebbe sotto la mappa. */
.consent-frame {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center; text-align: center;
  padding: 24px; background: #EFF1F8;
}
.consent-frame__inner { max-width: 440px; display: grid; gap: 14px; justify-items: center; }
.consent-frame p { font-size: 14px; color: var(--grigio); }
.consent-frame p a { color: var(--accento); font-weight: 700; }
.consent-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.consent-frame > * { position: relative; z-index: 1; }
.consent-frame + .consent-frame { margin-top: 16px; }
.map, .leaflet-container { position: relative; z-index: 0; isolation: isolate; }
.map { aspect-ratio: 16 / 10; }
.leaflet-container { font: inherit; }
/* Il sito e' squadrato: anche i controlli della mappa. L'override sta qui e
   non nel file di Leaflet, che e' codice di terzi da aggiornare intero. */
.leaflet-bar, .leaflet-control-layers, .leaflet-popup-content-wrapper, .leaflet-tooltip { border-radius: var(--raggio); }
.map__approx { font-size: 12.5px; color: var(--grigio); margin-top: 8px; }
.map__approx a { color: var(--accento); font-weight: 700; }

/* --- Pagine di testo: privacy, revoca, errori ------------------------------ */
.legal { font-size: 16px; color: var(--ink); }
.legal .lead { margin-bottom: 26px; }
.legal h2 { font-size: 28px; margin: 40px 0 12px; }
.legal h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin: 26px 0 8px; }
.legal p { margin-bottom: 14px; color: var(--grigio); }
.legal ul { display: grid; gap: 8px; margin-bottom: 16px; padding-left: 22px; }
.legal li { list-style: disc; color: var(--grigio); }
.legal dl { display: grid; gap: 12px; margin-bottom: 22px; }
.legal dt { font-weight: 700; }
.legal dd { color: var(--grigio); }
.legal a { color: var(--accento); font-weight: 600; }

/* --- Banner consensi ------------------------------------------------------ */
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--blu-scuro); color: rgba(255, 255, 255, .85);
  padding: 16px 0; border-top: 3px solid var(--accento);
}
.cookiebar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cookiebar p { font-size: 13.5px; }
.cookiebar a { color: var(--white); text-decoration: underline; }
.cookiebar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookiebar .btn { background: transparent; border-color: rgba(255, 255, 255, .45); color: var(--white); }
.cookiebar .btn:hover { background: rgba(255, 255, 255, .12); }
.cookiebar .btn--accept { background: var(--white); border-color: var(--white); color: var(--blu); }
.cookiebar .btn--accept:hover { background: var(--accento-chiaro); }

@media (max-width: 767px) { .cookiebar__inner { grid-template-columns: 1fr; gap: 12px; } }

/* --- Pannello di gestione --------------------------------------------------
   Riusa questo foglio: nessun asset in piu'. Testata semplice, bianca. */
.admin-head { background: var(--white); border-bottom: 1px solid var(--linea); }
.admin-head__bar { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.admin-head__name { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--blu-scuro); line-height: 1; }
.admin-head__note { font-size: 12.5px; color: var(--grigio); }
.admin { padding: 40px 0 96px; }
.admin h1 { font-size: 36px; margin-bottom: 16px; }
.admin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-card { background: var(--white); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 28px; }
.admin-card h2 { font-size: 26px; margin-bottom: 12px; }
/* Schede del pannello: link veri (?tab=), sottolineatura sulla corrente come
   nel menu del sito. */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid var(--linea); margin-bottom: 24px; }
.admin-tabs a { padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--ink); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a:hover { color: var(--accento); }
.admin-tabs a[aria-current="page"] { color: var(--blu); border-bottom-color: var(--accento); }
.admin-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.admin-subtabs a { padding: 6px 12px; border: 1px solid var(--linea); border-radius: var(--raggio); font-size: 13px; font-weight: 600; background: var(--white); }
.admin-subtabs a[aria-current="page"] { background: var(--blu); border-color: var(--blu); color: var(--white); }
.admin-subtabs a[aria-current="page"] .form__hint { color: var(--accento-chiaro); }
.admin-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.admin-search input[type="search"] { flex: 1 1 280px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--stone); }
.admin-search select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--white); }
.admin-search a { font-size: 13px; color: var(--accento); font-weight: 700; }
.admin-pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.admin-msg { white-space: pre-line; overflow-wrap: anywhere; }
.admin-msg-more summary { cursor: pointer; }
.admin-msg-more[open] summary { display: none; }
.admin-status { font-size: 14px; }
.admin-status tr { border-bottom: 1px solid var(--linea); }
.admin-status th { text-align: left; font-weight: 500; color: var(--grigio); padding: 8px 16px 8px 0; }
.admin-status td { padding: 8px 0; font-variant-numeric: tabular-nums; }
.admin-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.55;
  background: var(--blu-scuro); color: #D5D8EA; padding: 16px;
  overflow: auto; max-height: 22rem;
}
.admin-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.admin-hero { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 24px; margin-top: 16px; align-items: start; }
.admin-hero__preview img { width: 100%; height: auto; border: 1px solid var(--linea); }
.admin-hero__preview figcaption { font-size: 12.5px; color: var(--grigio); margin-top: 8px; line-height: 1.5; }
.admin-hero__preview figcaption .pill { margin-right: 8px; }
.admin-hero__preview .ph { aspect-ratio: 3 / 2; height: auto; }
.admin-hero .form { max-width: none; }
.admin-export {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  background: var(--stone); border: 1px solid var(--linea); padding: 16px; margin-top: 16px;
}
.admin-export__title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.admin-export__warn { border-left: 3px solid var(--accento); padding-left: 12px; margin-top: 12px; max-width: 46rem; }
.admin-table-scroll { overflow-x: auto; margin-top: 16px; }
.admin-leads { min-width: 44rem; font-size: 12.5px; }
.admin-leads th, .admin-leads td { text-align: left; padding: 8px 12px 8px 0; vertical-align: top; }
.admin-leads thead th {
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grigio);
  border-bottom: 2px solid var(--blu); white-space: nowrap;
}
.admin-leads tbody tr { border-bottom: 1px solid var(--linea); }
.admin-leads tbody tr:hover { background: var(--stone); }
.admin-leads__when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-leads__contact { overflow-wrap: anywhere; }
.admin-leads__msg { max-width: 22rem; color: var(--grigio); }
.pill { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; border-radius: var(--raggio); }
.pill--ok { background: #E3EEE8; color: #1C4034; }
.pill--warn { background: #F4E9D2; color: #6B4A12; }
.pill--error { background: #F2DCD9; color: #7D251F; }

@media (max-width: 900px) {
  .admin__grid { grid-template-columns: 1fr; }
  .admin-hero { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .admin-export { grid-template-columns: 1fr; } }

/* --- Ingresso dei blocchi allo scroll -------------------------------------
   Opacita' 0→1 e translateY 26px→0 in 0,7 s. Parte solo allo scroll: nessuna
   animazione al caricamento che ritardi la lettura.
   Nasconde solo sotto .js-motion, che site.js mette dopo aver verificato di
   poter anche riaccendere: senza JavaScript, o con un errore nello script, i
   blocchi si vedono tutti, fermi. */
.js-motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js-motion .reveal.in { opacity: 1; transform: none; }

/* --- Meno movimento --------------------------------------------------------
   In fondo al foglio, dopo le regole che deve annullare: disattiva reveal,
   hover animati e scorrimento morbido. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .prop-card, .prop-media img, .cat-tile img, .nav-main a::after, .link-arrow { transition: none; }
  .prop-card:hover { transform: none; }
  .prop-card:hover .prop-media img, .cat-tile:hover img { transform: none; }
  .gallery__stage { scroll-behavior: auto; }
}