/* ============================================================
   FAGEBA IMMOBILIARE — sistema visivo "Pietra di Trani"
   Font self-hosted (nessuna chiamata a Google = GDPR ok)

   Una sola famiglia, DM Sans variabile: titoli e testo si distinguono per peso,
   corpo e crenatura, non per famiglia. Ha l'asse «opsz», che il browser regola
   da sé in base al corpo (font-optical-sizing:auto): per questo qui non c'è
   nessun font-variation-settings scritto a mano, che lo spegnerebbe.
   ============================================================ */
@font-face{font-family:'DM Sans';src:url('/static/fonts/dm-sans-normal-latin.woff2') format('woff2-variations');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/static/fonts/dm-sans-italic-latin.woff2') format('woff2-variations');font-weight:100 1000;font-style:italic;font-display:swap}

:root{
  --pietra:#FFFFFF;      /* fondo pagina */
  --nebbia:#F6F6F4;      /* superficie alternata */
  --pietra-2:#E3E3DF;    /* bordo leggero */
  --pietra-3:#CFCFC9;    /* bordo marcato */
  --calce:#FFFFFF;       /* superficie schede */
  --inchiostro:#16212B;  /* inchiostro, testo e sezioni scure */
  --inchiostro-2:#0E1720;
  --grigio:#5A6068;      /* testo secondario, 6,3:1 su bianco */
  --grigio-2:#6B7178;    /* 4,9:1 su bianco */
  --blu:#004AAD;         /* blu marchio Fageba */
  --blu-scuro:#003A87;
  --blu-tenue:#E4EBF6;
  --rosso:#FF1616;       /* rosso marchio (solo tetto/segno) */
  --rosso-cta:#D5151A;   /* rosso azione, contrasto AA su bianco */
  --verde:#1F6B4A;
  --verde-wa:#17853F;    /* verde WhatsApp, scurito fino a 4,7:1 con il bianco */
  --verde-wa-cupo:#12692F;

  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:4.5rem; --sp-7:7rem;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --max:1280px;
  /* I raggi, scala alla apple.com. Non un valore solo ripetuto ovunque: quattro
     gradini, e la regola è che il raggio cresce col riquadro. Un contenitore che
     ne contiene un altro deve avere il raggio di quello interno più il proprio
     padding, altrimenti le due curve non sono concentriche e si vede.
     Esempio già applicato: .foto-cornice ha 28px con .55rem di padding, la foto
     dentro ne ha 18 — 28 − 8,8 ≈ 19. */
  --r-xs:6px;            /* etichette, badge, minuterie */
  --r:12px;              /* campi, riquadri interni, voci di menu */
  --r-lg:18px;           /* schede e pannelli: la misura delle tile di Apple */
  --r-xl:28px;           /* contenitori grandi: ricerca, mappa, moduli */
  --r-pill:980px;        /* pillola. È il valore letterale che usa apple.com */
  --ease:cubic-bezier(.22,1,.36,1);
  --ombra:0 1px 2px rgba(22,33,43,.06), 0 8px 24px -12px rgba(22,33,43,.22);
  --ombra-alta:0 2px 4px rgba(22,33,43,.08), 0 24px 48px -20px rgba(22,33,43,.32);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--pietra);color:var(--inchiostro);
  font-family:var(--sans);
  font-size:1.0625rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blu);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* Nessun border-radius qui dentro: forzarne uno squadrava gli angoli di ogni
   pulsante nel momento in cui prendeva il fuoco. Il contorno segue da sé il
   raggio dell'elemento. */
:focus-visible{outline:2.5px solid var(--blu);outline-offset:3px}
::selection{background:var(--blu);color:#fff}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--sans);font-weight:700;
  line-height:1;letter-spacing:-.032em;text-wrap:balance;
}
h1.display{font-size:clamp(2.45rem,5.9vw,4.7rem);margin:0}
h2.display{font-size:clamp(1.9rem,3.5vw,2.9rem);margin:0;line-height:1.04}
/* più piccolo è, meno serve stringere: sotto i 2rem la crenatura negativa chiude le lettere */
h3.display{font-size:clamp(1.3rem,2vw,1.7rem);margin:0;line-height:1.16;letter-spacing:-.016em}
.occhio{
  font-family:var(--sans);font-weight:500;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blu);margin:0 0 var(--sp-2);
  display:flex;align-items:center;gap:.6rem;
}
.occhio::before{content:"";width:1.6rem;height:2px;background:var(--rosso);flex:none}
.occhio-chiaro{color:#B9C6D8}
.occhio-chiaro::before{background:var(--rosso)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.lede{font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.55;color:var(--grigio);max-width:46ch}
.lede-chiaro{color:#C3CDD9}

/* ---------- struttura ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(3.5rem,7vw,var(--sp-7))}
.sec-scura{background:var(--inchiostro);color:#fff}
.sec-nebbia{background:var(--nebbia)}
.sec-scura a{color:#9FC0EE}
/* …ma un pulsante non è un link di testo: dentro una sezione scura si tiene il
   proprio colore, altrimenti «Parla con Fageba» esce azzurro su fondo rosso.
   Due classi battono classe+elemento, così non serve nessun !important. */
.sec-scura .btn{color:var(--fg)}

/* Fondo blu del marchio: stessa logica di .sec-nebbia, ma il testo si ribalta.
   Il segno dell'occhiello passa dal rosso al bianco — il rosso su questo blu
   vibra e perde leggibilità. La legenda della mappa non va toccata: sta dentro
   .mappa-guscio, che resta bianco. */
.sec-blu{background:var(--blu);color:#fff}
.sec-blu .occhio{color:#BBD2F2}
.sec-blu .occhio::before{background:#fff}
.sec-blu .lede{color:#D5E2F5}
.sec-blu :focus-visible{outline-color:#fff}
.sec-blu .chip{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34);color:#fff}
.sec-blu .chip:hover{background:rgba(255,255,255,.17);border-color:#fff}
.sec-blu .chip[aria-pressed="true"]{background:#fff;color:var(--blu);border-color:#fff}
.sec-blu .mappa-guscio{border-color:rgba(255,255,255,.3)}
.sec-blu .tabella{border-top-color:rgba(255,255,255,.3)}
.sec-blu .tabella-riga{border-bottom-color:rgba(255,255,255,.3)}
.sec-blu .tabella-riga dt{color:#BBD2F2}
.sec-blu .tabella-riga dd span{color:#D5E2F5}
.riga-titolo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.skip{position:absolute;left:-999px;top:0;background:var(--inchiostro);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}
[hidden]{display:none !important}

/* ---------- bottoni ----------
   Pillola piena, come i pulsanti di apple.com: in un impianto tutto smussato un
   rettangolo con gli spigoli appena arrotondati è la forma più incerta di tutte.
   La pillola vale per ciò che si preme; le etichette di stato restano rettangoli
   smussati, così si distingue a colpo d'occhio un'azione da un'informazione. */
.btn{
  --bg:var(--inchiostro);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.75rem 1.55rem;border:1px solid transparent;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);font-weight:600;font-size:.97rem;letter-spacing:.005em;
  cursor:pointer;text-decoration:none;transition:transform .18s var(--ease),background-color .18s,box-shadow .18s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--ombra)}
.btn:active{transform:translateY(0)}
.btn-rosso{--bg:var(--rosso-cta)}
.btn-rosso:hover{--bg:#B71116}
.btn-blu{--bg:var(--blu)}
.btn-blu:hover{--bg:var(--blu-scuro)}
.btn-linea{--bg:transparent;--fg:var(--inchiostro);border-color:var(--inchiostro)}
.btn-linea:hover{--bg:var(--inchiostro);--fg:#fff}
.btn-linea-chiara{--bg:transparent;--fg:var(--calce);border-color:rgba(248,245,239,.45)}
.btn-linea-chiara:hover{--bg:var(--calce);--fg:var(--inchiostro);border-color:var(--calce)}
.btn-inchiostro{--bg:var(--inchiostro)}
.btn-inchiostro:hover{--bg:var(--inchiostro-2)}
/* Verde WhatsApp: qui il colore è il modo in cui si riconosce il servizio a colpo
   d'occhio. Il verde del marchio con il testo bianco sopra sta a 2,8:1, sotto la
   soglia AA: questo è lo stesso verde portato a 4,7:1, quindi la scritta si legge. */
.btn-verde{--bg:var(--verde-wa)}
.btn-verde:hover{--bg:var(--verde-wa-cupo)}
.btn-picc{min-height:40px;padding:.45rem 1.05rem;font-size:.9rem}
.pallino{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .3rem;border-radius:var(--r-pill);background:var(--rosso-cta);color:#fff;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.link-freccia{font-weight:600;display:inline-flex;align-items:center;gap:.45rem}
.link-freccia svg{transition:transform .2s var(--ease)}
.link-freccia:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--pietra-2)}
.head-in{display:flex;align-items:center;gap:var(--sp-3);min-height:74px}
.marchio{display:flex;align-items:center;gap:.7rem;flex:none}
.marchio img{width:clamp(104px,11vw,132px)}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{
  font-size:.94rem;font-weight:500;color:var(--inchiostro);padding:.55rem .7rem;border-radius:var(--r);
  position:relative;transition:color .18s;
}
.nav a:hover{text-decoration:none;color:var(--blu)}
.nav a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.3rem;height:2px;background:var(--rosso);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- «Agenzia» e ciò che le sta sotto ----------
   Un pannello che si apre col passaggio del mouse e con :focus-within, cioè
   senza una riga di JavaScript: chi arriva col tabulatore lo apre mettendo il
   fuoco sulla voce, esattamente come chi ci passa sopra col mouse. La tendina
   attacca al bordo inferiore della voce, senza spazio in mezzo: un varco di
   pochi pixel basta a far sparire il pannello mentre ci si sta andando. */
.nav-gruppo{position:relative;display:flex;align-items:center}
.nav-capo{display:inline-flex;align-items:center;gap:.35rem}
/* il chevron-bottone serve solo al telefono: sul desktop apre il passaggio del mouse */
.nav-scatto{display:none}
.nav-freccia{flex:none;color:var(--grigio-2);transition:transform .2s var(--ease)}
.nav-gruppo:hover .nav-freccia,.nav-gruppo:focus-within .nav-freccia{transform:rotate(180deg);color:var(--blu)}
/* la voce resta segnata anche quando si è su una delle pagine figlie */
.nav a[data-ramo]::after{transform:scaleX(1)}
.nav-tendina{
  position:absolute;top:100%;left:0;z-index:60;min-width:11rem;
  background:var(--calce);border:1px solid var(--pietra-2);border-radius:var(--r-lg);
  box-shadow:var(--ombra-alta);padding:.35rem;display:grid;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.nav-gruppo:hover .nav-tendina,.nav-gruppo:focus-within .nav-tendina{opacity:1;visibility:visible;transform:none}
/* congedato con Esc: resta chiuso finché il mouse non esce o il fuoco non se ne va */
.nav-gruppo[data-chiusa] .nav-tendina{opacity:0;visibility:hidden;transform:translateY(-6px)}
.nav-tendina a{padding:.6rem .75rem;border-radius:var(--r);white-space:nowrap}
.nav-tendina a::after{display:none}   /* qui il filo rosso non serve: non c'è una riga da sottolineare */
.nav-tendina a:hover{background:var(--nebbia)}
.nav-tendina a[aria-current]{background:var(--blu-tenue);color:var(--blu)}
.nav-preferiti{display:inline-flex;align-items:center;gap:.4rem}
.nav-preferiti svg{fill:var(--rosso-cta);stroke:none}
.nav-preferiti b{font-weight:600;font-variant-numeric:tabular-nums}
.head-tel{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--inchiostro);padding:.4rem .6rem}
.head-tel:hover{color:var(--blu);text-decoration:none}
/* Interruttore lingua: due sigle dentro una pillola, lo stesso segno del filtro
   vendita/affitto. Chi è acceso si vede dal pieno, non da una sfumatura. */
.lingua{display:flex;gap:2px;padding:2px;border:1px solid var(--pietra-3);border-radius:var(--r-pill);background:var(--calce);flex:none}
.lingua button{min-width:40px;min-height:32px;padding:0 .55rem;border:0;border-radius:var(--r-pill);background:none;
  color:var(--grigio);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.07em;cursor:pointer}
.lingua button:hover{color:var(--inchiostro)}
.lingua button[aria-pressed="true"]{background:var(--inchiostro);color:#fff}
/* l'avviso sulle pagine legali: compare solo in inglese, lo accende il JavaScript */
.nota-lingua{margin:.9rem 0 0;padding:.75rem .95rem;border-left:3px solid var(--blu);background:var(--blu-tenue);
  font-size:.9rem;line-height:1.5;max-width:60ch}
@media (pointer:coarse){.lingua button{min-height:44px;min-width:44px}}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--pietra-3);border-radius:var(--r);width:48px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--inchiostro);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--inchiostro)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4);align-items:end}
.hero h1{margin-bottom:var(--sp-3);max-width:19ch}
.hero-lede{max-width:52ch}
.hero-cifre{display:flex;gap:clamp(1.25rem,3vw,2.75rem);border-left:1px solid var(--pietra-3);padding-left:clamp(1.25rem,3vw,2.5rem)}
.cifra b{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;letter-spacing:-.02em}
.cifra span{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grigio);margin-top:.45rem}
/* ---------- vetrina (la vetrina dell'agenzia, in home) ---------- */
.vetrina{margin-top:clamp(2rem,4vw,3.25rem);border-top:1px solid var(--pietra-3)}
.vetrina-cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;justify-content:space-between;
  margin:0;padding:.75rem .1rem .9rem;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--grigio);
}
/* Le tessere erano separate da un filo: fondo grigio, due pixel di gap, i riquadri
   bianchi sopra. Con gli angoli tondi quel trucco non regge — dentro una cornice
   curva restavano cinque rettangoli squadrati. Ora ognuna è una tile a sé, con il
   suo bordo e il suo raggio, distanziate. È lo stesso passaggio che ha fatto Apple
   dalle griglie a filo continuo alle tile staccate. */
.vetrina-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.5rem,1vw,.8rem)}
.tessera{
  display:block;background:var(--calce);border:1px solid var(--pietra-2);border-radius:var(--r-lg);
  overflow:hidden;color:inherit;position:relative;
  transition:transform .26s var(--ease),box-shadow .26s;
}
.tessera:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--ombra)}
.tessera-foto{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--pietra-2);clip-path:inset(0 0 0 0)}
.tessera-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tessera:hover .tessera-foto img,.tessera:focus-visible .tessera-foto img{transform:scale(1.05)}
.tessera-testo{display:block;padding:.6rem .7rem .75rem}
.tessera-via{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;color:var(--grigio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tessera-prezzo{display:block;font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:-.01em;margin-top:.15rem}

/* ---------- barra di ricerca ---------- */
/* Il pannello sta subito sotto il titolo, non in fondo alla pagina: chi arriva
   sta cercando una casa. La riga dei campi e l'interruttore vendita/affitto sono
   separati perché cambiando stato cambiano le soglie di prezzo. */
.cerca{
  position:relative;z-index:3;margin-top:clamp(1.5rem,3vw,2.4rem);background:var(--calce);
  border:1px solid var(--pietra-3);border-radius:var(--r-xl);box-shadow:var(--ombra-alta);
  padding:1rem;display:grid;gap:.8rem;
}
.cerca-riga{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:.6rem;align-items:end}
.cerca .campo-cta .btn{width:100%}
.cerca-rapide{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.9rem}
.cerca-rapide-cap{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grigio);margin-right:.2rem}
.cerca-rapide .chip{text-decoration:none}
.cerca-rapide .chip:hover{text-decoration:none;background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}

/* interruttore vendita/affitto: due radio vestiti da segmenti. Radio veri, così
   il modulo funziona anche senza JavaScript e la tastiera li scorre con le frecce */
.seg-stato{display:inline-flex;background:var(--nebbia);border:1px solid var(--pietra-2);border-radius:var(--r-pill);padding:3px;gap:2px;width:max-content;max-width:100%}
.seg-stato label{position:relative;display:inline-flex;min-width:0}
.seg-stato input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg-stato span{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 1.05rem;
  border-radius:var(--r-pill);font-size:.88rem;font-weight:500;white-space:nowrap;cursor:pointer;
  transition:background-color .16s,color .16s;
}
.seg-stato input:checked+span{background:var(--inchiostro);color:#fff}
.seg-stato input:focus-visible+span{outline:2.5px solid var(--blu);outline-offset:2px}
@media (pointer:coarse){.seg-stato span{min-height:44px}}

.campo{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.campo>label{font-family:var(--sans);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grigio);padding-left:.15rem}
.campo select,.campo input,.campo textarea{
  width:100%;min-height:48px;padding:.6rem .7rem;background:#fff;border:1px solid var(--pietra-3);
  border-radius:var(--r);font-size:.97rem;transition:border-color .16s,box-shadow .16s;
}
.campo input[type="search"]{appearance:none;-webkit-appearance:none}
.campo input[type="search"]::-webkit-search-cancel-button{appearance:none;-webkit-appearance:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6068' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/13px no-repeat;cursor:pointer}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2359524A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem;cursor:pointer}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--blu);box-shadow:0 0 0 3px var(--blu-tenue);outline:none}
.cerca-sotto{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:.9rem;font-size:.9rem;color:var(--grigio)}

/* ---------- mappa (elemento firma) ---------- */
.mappa-guscio{border:1px solid var(--pietra-2);border-radius:var(--r-xl);overflow:hidden;background:#fff}
#mappaBox{height:clamp(360px,52vh,560px);width:100%;background:var(--nebbia)}
.mappa-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;padding:.7rem .9rem;border-top:1px solid var(--pietra-2);font-size:.82rem;letter-spacing:.02em;color:var(--grigio)}
.pin-legenda{width:11px;height:11px;border-radius:50%;display:inline-block}
.pin-vendita{background:var(--inchiostro)}
.pin-affitto{background:var(--blu)}
.pin-guscio{width:0 !important;height:0 !important;overflow:visible}
/* Il guscio è l'elemento che Leaflet rende focalizzabile (tabindex 0, role
   button), ma è 0×0: il suo anello di fuoco è un puntino invisibile sull'ancora.
   L'anello si sposta sulla bolla, che è la cosa che si vede. */
.pin-guscio:focus-visible,.grappolo-guscio:focus-visible{outline:none}
.pin-guscio:focus-visible .pin,.grappolo-guscio:focus-visible .grappolo{
  outline:2.5px solid var(--blu);outline-offset:3px;
}
.pin{
  position:absolute;left:0;bottom:6px;transform:translateX(-50%);
  white-space:nowrap;font-size:.76rem;font-weight:600;letter-spacing:.01em;
  color:#fff;background:var(--inchiostro);padding:.26rem .52rem;border-radius:var(--r-pill);
  box-shadow:0 2px 7px rgba(22,33,43,.3);border:1.5px solid #fff;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s;
}
.pin::after{content:"";position:absolute;left:50%;bottom:-4px;width:6px;height:6px;background:inherit;border-radius:1px;transform:translateX(-50%) rotate(45deg)}
.pin-a{background:var(--blu)}
.pin:hover{transform:translateX(-50%) scale(1.08);background:var(--rosso-cta)}
.grappolo-guscio{width:0 !important;height:0 !important;overflow:visible}
.grappolo{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--inchiostro);color:#fff;border:2px solid #fff;
  box-shadow:0 3px 10px rgba(22,33,43,.32);font-weight:600;font-size:.9rem;
  transition:transform .18s var(--ease),background-color .18s;
}
.grappolo-lg{width:54px;height:54px;font-size:1rem}
.leaflet-marker-icon:hover .grappolo{transform:translate(-50%,-50%) scale(1.08);background:var(--blu)}
.leaflet-container{font-family:var(--sans);background:var(--nebbia)}
/* Tessere di OpenStreetMap (senza chiave CARTO): a colori pieni fanno a pugni
   con i prezzi. In grigio, e al 60% sulla nebbia del contenitore (l'opacità la
   mette fageba.js sul livello: uno stile qui la perderebbe contro quello in
   linea di Leaflet), tornano vicine al grigio chiaro di CARTO. */
.fondo-osm{filter:grayscale(1) contrast(.85)}
/* Le giunture. Contro le fessure fra tessere di Chromium, leaflet.css mette
   `mix-blend-mode: plus-lighter`: sui bordi le due tessere si sommano. Su CARTO,
   quasi bianco, la somma non si vede; su questo grigio diventa una riga chiara
   ogni 256px, ben visibile sul mare. Con la fusione normale le righe spariscono
   a densità 1, 1,5, 2 e 3, ma a 2,625 (molti Android) resta una fessura: la
   tessera larga un pixel in più la copre, e la fusione normale non la schiarisce.
   Misurato sulla home vera il 30 set 2026: scarto massimo 0 a tutte e cinque. */
.fondo-osm .leaflet-tile{mix-blend-mode:normal !important;width:257px !important;height:257px !important}
.leaflet-popup-content-wrapper{border-radius:var(--r-lg);box-shadow:var(--ombra-alta);padding:0;overflow:hidden}
.leaflet-popup-content{margin:0;width:236px !important}
.leaflet-popup-tip{box-shadow:none}
/* La crocetta galleggia sopra la foto, che è un link alla scheda: un tocco
   appena fuori bersaglio apre l'immobile invece di chiudere l'anteprima.
   Col dito il bersaglio cresce. */
.leaflet-popup-close-button{
  width:30px !important;height:30px !important;top:8px !important;right:8px !important;
  background:rgba(14,23,32,.62) !important;color:#fff !important;border-radius:50%;
  font:600 16px/30px var(--sans) !important;text-align:center;backdrop-filter:blur(3px);
}
@media (pointer:coarse){
  .leaflet-popup-close-button{width:40px !important;height:40px !important;font-size:19px !important;line-height:40px !important}
}
.leaflet-popup-close-button:hover{background:var(--inchiostro) !important}
.pop-cta{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.82rem;font-weight:600}
.pop-foto{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--nebbia)}
/* Mappa più bassa dell'anteprima: la foto esce e il testo resta. La classe la
   mette fageba.js misurando il riquadro, non una media query, perché l'altezza
   della mappa dipende da vh e dal contenitore, non dalla larghezza della finestra. */
.mappa-bassa .pop-foto{display:none}
.pop-testo{padding:.7rem .8rem .8rem}
.pop-zona{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio-2)}
.pop-tit{font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.18;margin:.2rem 0 .35rem}
.pop-tit a{color:var(--inchiostro)}
.pop-dati{font-size:.78rem;color:var(--grigio);margin:.25rem 0 0}
.mappa-guscio{position:relative}
/* La vela la accende il JavaScript con data-attiva, non una media query: il
   criterio deve essere uno solo, lo stesso che decide se disabilitare il
   trascinamento. Vedi velaSuTelefono in fageba.js. */
.mappa-vela{
  position:absolute;inset:0;z-index:500;display:none;align-items:center;justify-content:center;
  background:transparent;border:0;width:100%;padding:0;cursor:pointer;
}
.mappa-vela[data-attiva]{display:flex}
.mappa-vela span{background:var(--inchiostro);color:#fff;padding:.6rem 1rem;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;box-shadow:var(--ombra-alta)}
.mini-mappa{height:230px;border:1px solid var(--pietra-2);border-radius:var(--r-lg);overflow:hidden;margin-top:.75rem;background:var(--nebbia)}
.zone-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:var(--sp-3)}
.chip{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.04em;padding:.42rem .7rem;min-height:36px;
  display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1px solid var(--pietra-3);
  border-radius:var(--r-pill);cursor:pointer;transition:all .16s;color:var(--inchiostro);
}
@media (pointer:coarse){.chip{min-height:44px;padding-inline:.85rem}}
.chip:hover{border-color:var(--inchiostro)}
.chip[aria-pressed="true"]{background:var(--inchiostro);color:var(--calce);border-color:var(--inchiostro)}
.chip b{font-weight:500;opacity:.6}

/* ---------- schede immobile ----------
   Ordine di lettura: prezzo, poi cosa e dove, poi le misure. Il titolo scritto in
   agenzia resta ma non è più la voce più grossa: si confrontano prezzi, non titoli. */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:clamp(1.1rem,2.2vw,1.9rem)}
.scheda{
  position:relative;background:var(--calce);border:1px solid var(--pietra-2);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .26s var(--ease),box-shadow .26s;
}
.scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta)}
.scheda-foto{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--pietra-2)}

/* Le prime foto scorrono senza aprire la scheda: col dito, con le frecce, con la
   rotellina orizzontale. scroll-snap tiene l'inquadratura su una foto intera, e
   funziona anche a JavaScript spento — le frecce e i pallini sono in aggiunta. */
.scheda-slider{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.scheda-slider::-webkit-scrollbar{display:none}
.scheda-lastra{display:block;flex:0 0 100%;height:100%;scroll-snap-align:center}
.scheda-lastra img{width:100%;height:100%;object-fit:cover}
.scheda-frecce{display:none}
@media (hover:hover) and (pointer:fine){
  .scheda-frecce{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding-inline:.5rem;pointer-events:none;opacity:0;transition:opacity .2s}
  .scheda:hover .scheda-frecce{opacity:1}
  .scheda-freccia{pointer-events:auto;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.93);color:var(--inchiostro);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 5px rgba(22,33,43,.3);transition:background-color .16s,transform .16s var(--ease)}
  .scheda-freccia:hover{background:#fff;transform:scale(1.07)}
}
.scheda-punti{position:absolute;bottom:.5rem;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:.3rem;pointer-events:none}
.scheda-punti span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 3px rgba(14,23,32,.5);transition:background-color .2s,transform .2s var(--ease)}
.scheda-punti span[data-ora]{background:#fff;transform:scale(1.4)}

.etichette{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.35rem;flex-wrap:wrap;z-index:2}
.etichette-statiche{position:static;margin-bottom:.8rem}
.et{font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .5rem;border-radius:var(--r-xs);background:var(--inchiostro);color:#fff}
.et-affitto{background:var(--blu)}
.et-ribasso{background:var(--rosso-cta)}
.et-nuovo{background:var(--verde)}
.et-riservata{background:#fff;color:var(--inchiostro)}
.scheda-nfoto{position:absolute;bottom:.6rem;right:.6rem;z-index:2;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--sans);font-size:.7rem;color:#fff;background:rgba(14,23,32,.66);padding:.24rem .45rem;border-radius:var(--r-xs);backdrop-filter:blur(3px)}

/* La selezione sta nel browser di chi guarda: nessun account da fare, nessun dato
   da tenere noi. Serve a confrontare due o tre case, e a mandarcele. */
.scheda-cuore{
  position:absolute;top:.55rem;right:.55rem;z-index:3;width:38px;height:38px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--grigio-2);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(22,33,43,.24);
  transition:transform .16s var(--ease),color .16s;
}
.scheda-cuore svg{fill:none;stroke:currentColor;stroke-width:1.7}
.scheda-cuore:hover{transform:scale(1.09);color:var(--rosso-cta)}
.scheda-cuore[aria-pressed="true"]{color:var(--rosso-cta)}
.scheda-cuore[aria-pressed="true"] svg{fill:currentColor}
@media (pointer:coarse){.scheda-cuore{width:44px;height:44px}}

.scheda-corpo{padding:.9rem 1.05rem 1.05rem;display:flex;flex-direction:column;gap:.42rem;flex:1}
.scheda-prezzo{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.scheda-mq{font-size:.78rem;color:var(--grigio);white-space:nowrap;font-variant-numeric:tabular-nums}
.scheda-tit{
  font-family:var(--sans);font-weight:600;font-size:1.03rem;line-height:1.26;letter-spacing:-.008em;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.scheda-tit a{color:var(--inchiostro)}
.scheda-tit a:hover{color:var(--blu);text-decoration:none}
.scheda-ind{font-size:.86rem;color:var(--grigio);margin:0;display:flex;gap:.35rem;align-items:flex-start}
.scheda-ind .ic{flex:none;margin-top:.22rem;color:var(--grigio-2)}
.scheda-dati{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:auto;padding-top:.7rem;border-top:1px solid var(--pietra-2);font-family:var(--sans);font-size:.82rem;color:var(--grigio)}
.scheda-dati>span{display:inline-flex;align-items:center;gap:.32rem}
.scheda-dati b{color:var(--inchiostro);font-weight:600}
.scheda-dati .ic{flex:none;color:var(--grigio-2)}
.scheda-fresco{margin-left:auto;font-size:.72rem;letter-spacing:.02em;color:var(--grigio-2);white-space:nowrap}
.prezzo{font-family:var(--sans);font-weight:700;font-size:1.32rem;letter-spacing:-.015em;line-height:1}
.prezzo-riservato{font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--grigio)}
.prezzo-mese{font-family:var(--sans);font-size:.78rem;color:var(--grigio);letter-spacing:.03em}
.prezzo-blocco{display:inline-flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
/* Il ribasso: il prezzo vecchio sbarrato resta piccolo e grigio, la percentuale è
   l'unica cosa in rosso qui dentro, perché è il dato nuovo. Cifre tabellari così
   le due somme si leggono incolonnate anche affiancate. */
.prezzo-giu{display:inline-flex;align-items:baseline;gap:.4rem;font-size:.78rem;color:var(--grigio);letter-spacing:.02em}
.prezzo-giu s{font-variant-numeric:tabular-nums;text-decoration-thickness:1.5px;text-decoration-color:var(--grigio-2)}
.prezzo-giu b{color:var(--rosso-cta);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
.riga-prezzo{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.consenso span{flex:1 1 auto}

/* ---------- processo numerato (è una sequenza vera) ---------- */
.passi{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.passo{border-top:2px solid rgba(248,245,239,.28);padding-top:1rem}
.passo b{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;color:var(--rosso);display:block;margin-bottom:.5rem}
.passo h3{font-family:var(--sans);font-weight:700;font-size:1.16rem;margin:0 0 .35rem;line-height:1.2}
.passo p{margin:0;font-size:.95rem;color:#C3CDD9}

/* ---------- modulo valutazione ---------- */
.blocco-form{background:var(--calce);color:var(--inchiostro);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--ombra-alta)}
.form-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.form-griglia .campo-full{grid-column:1/-1}
.consenso{display:flex;gap:.65rem;align-items:flex-start;font-size:.84rem;color:var(--grigio);line-height:1.45;grid-column:1/-1}
.consenso input{width:20px;height:20px;min-height:0;margin-top:.15rem;flex:none;accent-color:var(--blu)}
.cf-verifica.chiede-clic{margin-bottom:.9rem}
.nota-form{font-family:var(--sans);font-size:.72rem;color:var(--grigio);letter-spacing:.03em;margin:.75rem 0 0}

/* ---------- scheda tecnica / perché ---------- */
.tabella{border-top:1px solid var(--pietra-3)}
.tabella-riga{display:grid;grid-template-columns:minmax(120px,.9fr) 2.4fr;gap:clamp(1rem,3vw,2.5rem);padding:1.15rem 0;border-bottom:1px solid var(--pietra-3);align-items:baseline}
.tabella-riga dt{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blu)}
.tabella-riga dd{margin:0}
.tabella-riga dd b{font-family:var(--sans);font-weight:600;font-size:1.16rem;display:block;margin-bottom:.2rem;letter-spacing:-.01em}
.tabella-riga dd span{color:var(--grigio);font-size:.97rem}

/* ---------- agenzia ---------- */
.due-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,4rem);align-items:start}
.foto-cornice{border:1px solid var(--pietra-3);padding:.55rem;background:var(--calce);border-radius:var(--r-xl)}
.foto-cornice img{border-radius:var(--r-lg)}
.foto-cap{font-family:var(--sans);font-size:.7rem;color:var(--grigio);letter-spacing:.05em;margin:.55rem .15rem 0}
.contatto-lista{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:grid;gap:.9rem}
.contatto-lista li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start}
.contatto-lista svg{margin-top:.28rem;color:var(--blu);flex:none}
.contatto-lista b{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio);font-weight:500}
.orari{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.88rem}
.orari li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px dotted var(--pietra-3)}
.orari li[data-oggi="1"]{color:var(--blu);font-weight:500}
.agente{display:flex;gap:1rem;align-items:center;background:var(--calce);border:1px solid var(--pietra-2);border-radius:var(--r-lg);padding:1rem}
.agente-iniziali{width:56px;height:56px;flex:none;border-radius:50%;background:var(--blu);color:#fff;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:1.3rem}

/* ---------- catalogo: la barra dei filtri ----------
   Appiccicata sotto l'intestazione: su 150 immobili il filtro serve a metà
   scorrimento, non solo all'inizio. Sul telefono diventa un pannello che sale
   dal basso, dove la mano ce l'ha già. */
.filtri{position:sticky;top:74px;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--pietra-2);padding-block:.8rem}
.filtri-corpo{display:grid;gap:.55rem}
.filtri-riga{display:grid;grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:.55rem;align-items:end}
.filtri-riga-2{grid-template-columns:repeat(4,minmax(0,1fr))}
.filtri-cerca-btn{min-height:48px;padding-inline:1.1rem}
.foglio-testa{display:none}
.filtri-piu{font-size:.85rem}
.filtri-piu>summary{
  display:inline-flex;align-items:center;gap:.42rem;width:max-content;min-height:34px;
  padding:.3rem .1rem;cursor:pointer;color:var(--blu);font-weight:600;font-size:.84rem;list-style:none;
}
.filtri-piu>summary::-webkit-details-marker{display:none}
.filtri-piu>summary::before{content:"＋";font-size:.8rem;line-height:1}
.filtri-piu[open]>summary::before{content:"－"}
.filtri-piu[open]>summary{margin-bottom:.5rem}
.filtri-azioni{display:none}          /* su schermo grande i filtri si applicano da sé */

/* ---------- catalogo: testa dei risultati ---------- */
.sec-esiti{padding-block:var(--sp-4) clamp(3.5rem,7vw,var(--sp-7))}
.esiti-testa{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);justify-content:space-between;align-items:flex-end;margin-bottom:var(--sp-2)}
.esiti-tit{font-family:var(--sans);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.06;letter-spacing:-.018em;margin:0}
.esiti-azioni{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.campo-ordine{max-width:230px}
.conteggio{font-family:var(--sans);font-size:.9rem;color:var(--grigio);margin:.4rem 0 0}
.conteggio b{font-weight:600;color:var(--inchiostro);font-variant-numeric:tabular-nums}
.vista-scelta{display:inline-flex;background:var(--nebbia);border:1px solid var(--pietra-2);border-radius:var(--r-pill);padding:3px;gap:2px}
.vista-scelta a{
  display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:0 .95rem;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:500;color:var(--inchiostro);
}
.vista-scelta a:hover{text-decoration:none;background:var(--pietra-2)}
.vista-scelta a[aria-current]{background:var(--inchiostro);color:#fff}
.vista-scelta a[aria-current]:hover{background:var(--inchiostro-2)}
@media (pointer:coarse){.vista-scelta a{min-height:44px}}

/* i filtri attivi, uno per uno: si toglie quello sbagliato senza rifare la ricerca */
.chips-attivi{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:var(--sp-3)}
.chip-x{text-decoration:none;background:var(--blu-tenue);border-color:transparent;color:var(--blu)}
.chip-x:hover{text-decoration:none;background:var(--blu);color:#fff;border-color:var(--blu)}
.chip-x svg{opacity:.7;flex:none}
.chip-azzera{font-size:.8rem;color:var(--grigio);text-decoration:underline;text-underline-offset:2px;padding:.35rem .2rem;min-height:36px;display:inline-flex;align-items:center}
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- catalogo: lista e mappa affiancate ---------- */
.esiti-mappa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--sp-3);align-items:start}
/* L'appiglio della mappa parte da sotto la barra dei filtri, che è appiccicata
   anche lei. L'altezza della barra cambia quando si apre «Affina la ricerca»,
   quindi la misura il JavaScript e la scrive in --sotto-filtri; 5,6rem è solo la
   stima di partenza per chi ha il JavaScript spento. Con un valore fisso troppo
   piccolo la fascia alta della mappa finiva sotto la barra, e lì i clic sui
   prezzi morivano contro il fondo opaco dei filtri. */
.esiti-mappa-guscio{position:sticky;top:calc(74px + var(--sotto-filtri, 5.6rem) + .5rem);border:1px solid var(--pietra-2);border-radius:var(--r-xl);overflow:hidden;background:#fff}
#mappaEsiti{height:min(74vh,720px);background:var(--nebbia)}
.esiti-elenco{display:grid;gap:var(--sp-2);max-height:none}
.esiti-elenco .scheda{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.esiti-elenco .scheda-foto{aspect-ratio:4/3;height:100%}
.esiti-elenco .scheda-corpo{padding:.85rem .95rem}
.esiti-elenco .scheda:hover{transform:none;box-shadow:var(--ombra)}

.vuoto{text-align:center;padding:var(--sp-5) var(--sp-2);border:1px dashed var(--pietra-3);border-radius:var(--r-xl)}
.vuoto .lede{margin:.6rem auto 0}
.vuoto-piste{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin:1.4rem auto 0;max-width:44rem}
.vuoto-piste .chip{text-decoration:none}
.vuoto-piste .chip:hover{text-decoration:none;background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}
.vuoto-nota{font-size:.92rem;color:var(--grigio);margin:1.5rem 0 1rem}

/* ---------- scheda immobile (dettaglio) ---------- */
.sec-dettaglio{padding-block:clamp(1.5rem,3vw,2.25rem) clamp(3rem,6vw,var(--sp-6))}
.briciole{font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;color:var(--grigio);display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:var(--sp-3)}
/* Titolo e prezzo in due colonne, non in fila: con un titolo lungo il prezzo
   andava a capo e le sue righe restavano allineate a destra sotto una cifra
   allineata a sinistra. Una griglia tiene il prezzo dov'è, sempre. */
.dett-testa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-4);align-items:end;margin-bottom:var(--sp-3)}
.dett-testa-testo{min-width:0}
.dett-tit{font-size:clamp(1.8rem,3.6vw,2.9rem);max-width:26ch}
.dett-ind{display:flex;align-items:flex-start;gap:.4rem;margin:.7rem 0 0;font-size:.98rem;color:var(--grigio)}
.dett-ind .ic{flex:none;margin-top:.28rem;color:var(--grigio-2)}
.dett-prezzo{text-align:right;flex:none}
.dett-prezzo .prezzo{font-size:clamp(1.8rem,3.2vw,2.5rem)}
/* nella testa il blocco è allineato a destra: il ribasso va sotto, non di fianco a un numero grande */
.dett-prezzo .prezzo-blocco{justify-content:flex-end}
.dett-prezzo .prezzo-giu{flex:0 0 100%;justify-content:flex-end;margin-top:.3rem;font-size:.86rem}
.dett-mq{margin:.25rem 0 0;font-size:.92rem;color:var(--grigio);font-variant-numeric:tabular-nums}
.dett-rif{font-size:.72rem;color:var(--grigio-2);margin:.5rem 0 0;letter-spacing:.06em}
.dett-h2{font-family:var(--sans);font-weight:700;font-size:1.55rem;letter-spacing:-.012em;margin:var(--sp-5) 0 .9rem}
.dett-h2:first-child{margin-top:0}

/* ─── galleria a mosaico
   Una foto grande e due di lato: si capisce subito com'è fatta la casa, e il
   riquadro in basso a destra dice quante ce ne sono. Ogni riquadro è un link
   alla foto grande: senza JavaScript si vedono tutte comunque, una per una. */
.galleria{
  display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,1fr);
  gap:.5rem;margin-bottom:var(--sp-4);aspect-ratio:16/9;
}
.gal-lastra{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:var(--pietra-2)}
.gal-lastra img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal-lastra:hover img{transform:scale(1.03)}
.gal-lastra-1{grid-row:1/3}
.gal-oltre{display:none}                 /* dalla quarta in poi stanno nella lente */
.gal-altre{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.35rem;
  background:rgba(14,23,32,.52);color:#fff;font-size:.86rem;font-weight:600;letter-spacing:.01em;
  text-align:center;padding:.5rem;transition:background-color .2s;
}
.gal-altre .ic{width:20px;height:20px}
.gal-lastra:hover .gal-altre{background:rgba(14,23,32,.62)}
.gal-conta-mobile{display:none}
.gal-nota{font-size:.85rem;color:var(--grigio);margin:-.6rem 0 var(--sp-4)}

.dett-corpo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.dett-principale{min-width:0}
.cifre-chiave{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;background:var(--pietra-3);border:1px solid var(--pietra-3);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-4)}
/* i numeri si allineano tra loro anche dove non c'è l'icona: si leggono in fila */
.cifra-box{background:var(--calce);padding:.85rem .95rem;display:flex;flex-direction:column;justify-content:flex-end}
.cifra-box .ic{color:var(--blu);margin-bottom:.4rem}
.cifra-box-testo b{font-size:1.05rem;line-height:1.18}
.cifra-box b{display:block;font-family:var(--sans);font-weight:700;font-size:1.4rem;line-height:1;letter-spacing:-.02em}
.cifra-box span{font-family:var(--sans);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grigio);display:block;margin-top:.35rem}
.testo-lungo p{margin:0 0 1rem;max-width:66ch}

/* pannello di contatto: prima chi risponde, poi come raggiungerlo, poi il modulo */
.pannello{background:var(--nebbia);border:1px solid var(--pietra-2);border-radius:var(--r-xl);padding:1.15rem;position:sticky;top:96px}
.pannello-agente{display:flex;align-items:center;gap:.8rem;padding-bottom:.9rem;border-bottom:1px solid var(--pietra-2)}
.pannello-agente b{display:block;font-family:var(--sans);font-size:1.08rem;line-height:1.2}
.pannello-agente span{display:block;font-size:.74rem;letter-spacing:.04em;color:var(--grigio);margin-top:.1rem}
.pannello-agente .agente-iniziali{width:46px;height:46px;font-size:1.05rem}
.pannello-vie{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.9rem 0 1.1rem}
.pannello-vie .btn{width:100%}
.pannello-tit{font-family:var(--sans);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;margin:0}
.pannello-nota{color:var(--grigio);font-size:.88rem;margin:.3rem 0 1rem}

/* ─── planimetria ───
   Fondo bianco e niente ritaglio: un disegno tecnico si guarda intero, e le
   planimetrie arrivano in ogni proporzione. Il riquadro ha un bordo perché
   altrimenti, su pagina bianca, il foglio non si vede dove finisce. */
.planimetrie{display:grid;gap:var(--sp-2);margin-bottom:.9rem}
.planimetria{
  display:block;position:relative;background:#fff;border:1px solid var(--pietra-2);
  border-radius:var(--r-lg);padding:.75rem;transition:border-color .18s,box-shadow .18s;
}
.planimetria:hover{border-color:var(--pietra-3);box-shadow:var(--ombra);text-decoration:none}
.planimetria img{width:100%;height:auto;max-height:70vh;object-fit:contain}
.planimetria-zoom{
  position:absolute;right:1.1rem;bottom:1.1rem;display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(14,23,32,.72);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.02em;
  padding:.34rem .6rem;border-radius:var(--r-pill);backdrop-filter:blur(3px);
}
.planimetria-nota{font-size:.85rem;color:var(--grigio);margin:0 0 var(--sp-2);max-width:60ch}
@media (pointer:coarse){.planimetria-zoom{padding:.45rem .7rem}}

/* ─── lente: le foto a schermo pieno ─── */
.lente{position:fixed;inset:0;z-index:80;background:rgba(9,14,19,.96);display:grid;grid-template-rows:auto 1fr}
.lente[hidden]{display:none}
.lente-barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem clamp(.75rem,2vw,1.25rem)}
.lente-conta{font-family:var(--sans);font-size:.86rem;color:#C3CDD9;font-variant-numeric:tabular-nums}
.lente-conta b{color:#fff;font-weight:600}
.lente-btn{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .16s}
.lente-btn:hover{background:rgba(255,255,255,.2)}
.lente-btn:focus-visible{outline:2.5px solid #fff;outline-offset:2px}
.lente-palco{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1.5rem);padding:0 clamp(.5rem,2vw,1.25rem) clamp(1rem,3vw,2rem);min-height:0}
.lente-palco img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-lg);background:#0E1720}
.lente-freccia{width:52px;height:52px}
@media (max-width:700px){
  .lente-palco{padding-bottom:4.5rem}
  .lente-freccia{position:absolute;bottom:1rem;z-index:2}
  .lente-freccia[data-lente="-1"]{left:25%}
  .lente-freccia[data-lente="1"]{right:25%}
}

/* ---------- footer ---------- */
.piede{background:var(--inchiostro-2);color:#A9B4C0;padding-block:var(--sp-5) var(--sp-3);font-size:.92rem}
.piede a{color:#D6DEE7}
.piede-griglia{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.piede h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#7E8B99;margin:0 0 .9rem;font-weight:500}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.piede img{width:128px;margin-bottom:.9rem}
.piede-basso{border-top:1px solid rgba(169,180,192,.18);padding-top:1.1rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-family:var(--sans);font-size:.72rem;letter-spacing:.03em;color:#7E8B99}

/* ---------- barra mobile ---------- */
.barra-mobile{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:.5rem;padding:.6rem;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--pietra-2)}
.barra-mobile .btn{flex:1;font-size:.92rem;padding-inline:.55rem;white-space:nowrap}
.barra-catalogo .btn{gap:.45rem}
.foglio-x{width:40px;height:40px;flex:none;border:1px solid var(--pietra-3);border-radius:50%;background:#fff;color:var(--inchiostro);display:grid;place-items:center;cursor:pointer}
.foglio-x:hover{background:var(--nebbia)}

/* ---------- la selezione di chi guarda ---------- */
.sec-preferiti h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:22ch}
.sec-preferiti .lede{margin-top:1rem}
.preferiti-azioni{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:var(--sp-3) 0 var(--sp-4)}
.griglia-preferiti{margin-top:var(--sp-2)}
.vuoto-preferiti{text-align:left;margin-top:var(--sp-3);padding:var(--sp-4)}
.vuoto-preferiti .lede{margin:0 0 1.4rem;max-width:56ch}

/* ---------- animazioni ---------- */
@keyframes su{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes parola{from{opacity:0;transform:translateY(.5em) rotate(1.2deg)}to{opacity:1;transform:none}}
@keyframes tenda{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.par{display:inline-block;animation:parola .7s var(--ease) both;animation-delay:calc(var(--i) * 55ms + 120ms)}
.entra{animation:su .6s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.tessera-foto{animation:tenda .9s var(--ease) both;animation-delay:calc(var(--i) * 90ms + 350ms)}
[data-riv]{opacity:0}
[data-riv].visto{animation:su .55s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
  [data-riv]{opacity:1}
  .scheda:hover,.tessera:hover,.scelta:hover{transform:none}
  .scheda-freccia:hover,.scheda-cuore:hover,.gal-lastra:hover img{transform:none}
  /* scorrimenti a scatto invece che animati: li fa il JavaScript, non il CSS */
  .scheda-slider,.galleria{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .filtri-riga{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto}
  .filtri-riga .seg-stato{grid-column:1/-1;justify-self:start}
}
@media (max-width:1080px){
  .cerca-riga{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cerca .campo-cta{grid-column:1/-1}
  .dett-corpo{grid-template-columns:1fr}
  .pannello{position:static}
  .piede-griglia{grid-template-columns:repeat(2,1fr)}
  /* mappa e lista non stanno più affiancate: la mappa sopra, i risultati sotto */
  .esiti-mappa{grid-template-columns:1fr}
  /* relative, non static: la vela del telefono è un figlio in posizione assoluta
     e senza un antenato posizionato si ancorerebbe alla pagina invece che alla mappa */
  .esiti-mappa-guscio{position:relative}
  /* Un pavimento, come ce l'ha già la mappa della home. Con 56vh puri, un
     telefono in orizzontale (altezza 375-430px) dava una mappa alta 210-241px,
     più bassa dell'anteprima che deve contenere: prezzo e «Vedi la scheda»
     restavano tagliati fuori, e autoPan non poteva farci niente perché non c'era
     spazio dove spostarsi. */
  #mappaEsiti{height:max(360px, min(56vh,460px))}
  .esiti-elenco{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .esiti-elenco .scheda{grid-template-columns:1fr}
  .esiti-elenco .scheda-foto{aspect-ratio:3/2}
}
@media (max-width:860px){
  .nav{display:none}
  .nav.aperto{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--calce);border-bottom:1px solid var(--pietra-2);padding:.6rem;gap:.1rem;box-shadow:var(--ombra)}
  .nav.aperto a{padding:.85rem .8rem;font-size:1.02rem}
  /* Nel menu del telefono non c'è un passaggio del mouse da intercettare, quindi
     la tendina nasce chiusa e la apre un bersaglio suo: il chevron a destra
     della voce. Così «Agenzia» resta un link che porta all'agenzia — un capo di
     menu che non va da nessuna parte è la trappola classica di questo schema.
     La voce e il bottone stanno sulla stessa riga, il rientro sotto. */
  .nav-gruppo{display:grid;grid-template-columns:1fr auto;align-items:center;position:static}
  .nav-freccia{display:none}
  .nav-scatto{
    display:flex;align-items:center;justify-content:center;
    width:44px;min-height:44px;flex:none;padding:0;margin:0;
    border:0;background:none;color:var(--grigio-2);cursor:pointer;
    border-radius:var(--r);
  }
  .nav-scatto svg{transition:transform .22s var(--ease)}
  .nav-gruppo[data-aperta] .nav-scatto{color:var(--blu)}
  .nav-gruppo[data-aperta] .nav-scatto svg{transform:rotate(180deg)}
  .nav-scatto:focus-visible{outline:2.5px solid var(--blu);outline-offset:2px}
  .nav-tendina{
    grid-column:1/-1;position:static;transform:none;
    background:none;border:0;border-left:2px solid var(--pietra-2);border-radius:0;
    box-shadow:none;padding:0;min-width:0;
    /* chiusa: alta zero e invisibile. `visibility` non è cosmesi, è ciò che
       toglie le due voci dal giro del tabulatore mentre sono ripiegate. */
    margin:0 0 0 1.35rem;max-height:0;opacity:0;visibility:hidden;overflow:hidden;
    transition:max-height .26s var(--ease),opacity .18s var(--ease),visibility .26s,margin .26s var(--ease);
  }
  /* Qui il passaggio del mouse e :focus-within non devono aprire niente: se il
     fuoco è sul chevron il gruppo è comunque «focus-within», e la regola del
     desktop rimetteva le due voci nel giro del tabulatore mentre erano
     ripiegate. Stessa specificità (0,3,0), ma più in basso nel foglio. */
  .nav-gruppo:hover .nav-tendina,.nav-gruppo:focus-within .nav-tendina{opacity:0;visibility:hidden}
  .nav-gruppo[data-aperta] .nav-tendina,
  .nav-gruppo[data-aperta]:focus-within .nav-tendina{
    max-height:9rem;opacity:1;visibility:visible;margin-bottom:.2rem;
  }
  .nav.aperto .nav-tendina a{padding-left:.9rem}
  /* Sul telefono la lingua resta fuori dal menu: è una scelta che si fa subito.
     Nel markup l'hamburger viene prima, qui si scambiano: il menu è l'ultima cosa
     a destra, dov'è sempre stato, e la lingua gli sta accanto. Senza JavaScript la
     lingua non compare e l'hamburger si tiene il suo `margin-left:auto`. */
  .burger{display:flex;order:3;margin-left:.55rem}
  .lingua{order:2;margin-left:auto}
  .head-tel{display:none}
  .head-cta{display:none}
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero-cifre{border-left:0;padding-left:0;border-top:1px solid var(--pietra-3);padding-top:1rem;width:100%}
  /* padding in basso: senza, lo scorrimento orizzontale taglia l'ombra della tile */
  .vetrina-tiles{grid-template-columns:repeat(5,minmax(180px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.35rem}
  .tessera{scroll-snap-align:start}
  .due-col{grid-template-columns:1fr}
  .dett-testa{grid-template-columns:1fr;align-items:flex-start}
  .dett-prezzo{text-align:left}
  .dett-prezzo .prezzo-blocco,.dett-prezzo .prezzo-giu{justify-content:flex-start}
  .barra-mobile{display:flex}
  body{padding-bottom:76px}
  .esiti-testa{align-items:flex-start}
  .esiti-azioni{width:100%;justify-content:space-between}
  .vista-scelta{display:none}          /* sul telefono il passaggio sta nella barra in basso */
  .campo-ordine{max-width:none;flex:1}

  /* ─── i filtri salgono dal basso ───
     Non un menù da inseguire in cima alla pagina: un pannello che arriva dove
     sta il pollice, con il numero di risultati sul pulsante che lo chiude. */
  /* backdrop-filter va spento, non solo reso invisibile: un elemento che lo usa
     diventa blocco di contenimento per i figli `fixed`, e il pannello qui sotto
     finirebbe posizionato rispetto alla barra invece che rispetto allo schermo. */
  .filtri{position:static;padding:0;border:0;background:none;backdrop-filter:none}
  .filtri-corpo{
    position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.7rem;
    background:#fff;border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:0 -14px 44px -14px rgba(22,33,43,.5);
    padding:.85rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom));
    max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
  }
  .filtri-corpo:focus{outline:none}   /* riceve il fuoco per i lettori di schermo */
  body[data-filtri="aperti"]{overflow:hidden}
  body[data-filtri="aperti"] .filtri-corpo{display:grid;animation:foglio-su .3s var(--ease) both}
  body[data-filtri="aperti"]::before{content:"";position:fixed;inset:0;z-index:69;background:rgba(14,23,32,.5)}
  .foglio-testa{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:sticky;top:0;z-index:2;background:#fff;padding:.2rem 0 .6rem;border-bottom:1px solid var(--pietra-2)}
  .foglio-testa b{font-family:var(--sans);font-size:1.15rem}
  .filtri-riga,.filtri-riga-2{grid-template-columns:1fr 1fr}
  .filtri-riga .seg-stato{grid-column:1/-1;width:100%}
  .filtri-riga .seg-stato label{flex:1}
  .filtri-riga .seg-stato span{width:100%}
  .campo-cerca,.filtri-cerca-btn{grid-column:1/-1}
  .filtri-cerca-btn{display:none}
  .filtri-piu[open]{padding-bottom:.2rem}
  .filtri-azioni{display:flex;gap:.5rem;position:sticky;bottom:0;background:#fff;padding:.55rem 0 .1rem;border-top:1px solid var(--pietra-2)}
  .filtri-azioni .btn{flex:1}
}
@media (max-width:760px){
  /* la galleria diventa una striscia che scorre col dito, da bordo a bordo */
  .galleria{
    display:flex;aspect-ratio:auto;gap:.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);margin-bottom:.6rem;
  }
  .galleria::-webkit-scrollbar{display:none}
  .gal-lastra,.gal-lastra-1{flex:0 0 86%;grid-row:auto;aspect-ratio:4/3;scroll-snap-align:center}
  .gal-oltre{display:block}
  .gal-altre{display:none}
  .gal-conta-mobile{display:block;margin:0 0 var(--sp-4);font-size:.8rem;letter-spacing:.04em;color:var(--grigio)}
  .gal-conta-mobile b{color:var(--inchiostro);font-weight:600}
  .gal-nota{margin-top:-.4rem}
  .pannello-vie{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cerca-riga{grid-template-columns:1fr}
  .vetrina-tiles{grid-template-columns:repeat(5,minmax(150px,1fr))}
  .form-griglia{grid-template-columns:1fr}
  .piede-griglia{grid-template-columns:1fr}
  .griglia{grid-template-columns:1fr}
  .esiti-elenco{grid-template-columns:1fr}
  .esiti-tit{font-size:1.4rem}
  .filtri-riga-2{grid-template-columns:1fr}
}
@keyframes foglio-su{from{transform:translateY(100%)}to{transform:none}}

/* ---------- avvisi dei moduli, stati vuoti (usati anche dal pannello) ---------- */
.avviso{border-radius:var(--r);padding:.7rem .9rem;font-size:.9rem;margin:0 0 1rem}
.avviso-ok{background:#E4F1E9;color:#14563a;border:1px solid #BFDFCC}
.avviso-ko{background:#FDE7E8;color:#8F1015;border:1px solid #F3C9CB}
.campo-esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foto-mancante{display:grid;place-items:center;height:100%;color:var(--grigio-2);font-size:.8rem;background:var(--nebbia)}
.mappa-errore{display:grid;place-items:center;height:100%;color:var(--grigio);font-size:.9rem}

/* ---------- pagine legali ---------- */
.sec-legale{padding-block:clamp(2.25rem,5vw,4rem)}
.sec-legale .lede{max-width:58ch}
.legale-data{margin:.9rem 0 0;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grigio-2)}
.legale{max-width:70ch;margin-top:var(--sp-5);font-size:1.02rem;line-height:1.72;color:var(--inchiostro)}
.legale h2{
  font-family:inherit;font-size:1.06rem;font-weight:700;letter-spacing:.005em;
  margin:var(--sp-5) 0 .7rem;padding-top:var(--sp-3);border-top:1px solid var(--pietra-2);
}
.legale h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legale p{margin:0 0 .95rem}
.legale ul{margin:0 0 1.1rem;padding-left:1.15rem}
.legale li{margin-bottom:.5rem}
.legale a{text-decoration:underline;text-underline-offset:2px}
.legale code{font-size:.92em;background:var(--nebbia);border:1px solid var(--pietra-2);border-radius:var(--r-xs);padding:.06em .34em}
.legale .nota{display:block;font-size:.78rem;color:var(--grigio-2)}
.legale-blocco{background:var(--nebbia);border-left:3px solid var(--blu);border-radius:0 var(--r) var(--r) 0;padding:1rem 1.1rem;line-height:1.62}
.legale-azioni{margin:1.1rem 0 1.3rem}
.legale-fondo{max-width:70ch;margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--pietra-2);font-size:.92rem;color:var(--grigio)}

.tabella-legale{overflow-x:auto;margin:0 0 1.2rem;border:1px solid var(--pietra-2);border-radius:var(--r-lg)}
.tabella-legale table{width:100%;min-width:540px;border-collapse:collapse;font-size:.92rem;line-height:1.55}
.tabella-legale th,.tabella-legale td{padding:.7rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--pietra-2)}
.tabella-legale th{background:var(--nebbia);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grigio);font-weight:600}
.tabella-legale tbody tr:last-child td{border-bottom:0}

/* ---------- avviso cookie ---------- */
/* Fondo inchiostro con il filo rosso del marchio in alto: il rosso resta un segno,
   l'azione è blu. I due pulsanti hanno la stessa misura e lo stesso peso visivo —
   rifiutare deve costare quanto accettare. */
.avviso-cookie{
  /* left+right invece di una larghezza con 100vw: 100vw comprende la barra di
     scorrimento e faceva sbordare la pagina in orizzontale. */
  position:fixed;z-index:60;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);max-width:54rem;
  /* Con gli angoli tondi il filo rosso in cima non regge più: seguendo la curva
     diventava un sorriso appeso nel vuoto, perché sopra una sezione scura il fondo
     dell'avviso e quello della pagina si somigliano e si vedeva solo la riga.
     Il bordo ora è neutro e chiude la scheda su qualsiasi fondo; il rosso resta,
     ma come trattino sopra il titolo — lo stesso segno degli occhielli in pagina.
     Un riquadro tutto rosso avrebbe letto «errore», che non è. */
  background:var(--inchiostro);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ombra-alta);
  animation:avviso-cookie-entra .42s var(--ease) both;
}
.avviso-cookie[hidden]{display:none}
.avviso-cookie-in{display:grid;grid-template-columns:1fr auto;gap:var(--sp-3);align-items:center;padding:1.15rem 1.35rem}
.avviso-cookie-testo p{margin:0;font-size:.9rem;line-height:1.6;color:#D9DEE4}
.avviso-cookie-tit{font-weight:700;font-size:.98rem;color:#fff !important;margin-bottom:.3rem !important}
.avviso-cookie-tit::before{content:"";display:block;width:1.6rem;height:2px;background:var(--rosso);margin-bottom:.6rem}
.avviso-cookie a{color:#9FC0EE;text-decoration:underline;text-underline-offset:2px}
.avviso-cookie-azioni{display:flex;gap:.6rem;flex-wrap:wrap}
.avviso-cookie-azioni .btn{min-width:9.5rem}
@keyframes avviso-cookie-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  /* a tutta larghezza torna una fascia: resta il filo in alto, i bordi laterali
     su uno schermo pieno non avrebbero niente da delimitare */
  .avviso-cookie{left:0;right:0;bottom:0;max-width:none;border-width:1px 0 0;border-radius:0;padding-bottom:env(safe-area-inset-bottom)}
  .avviso-cookie-in{grid-template-columns:1fr;padding:1rem var(--gutter) 1.1rem}
  .avviso-cookie-azioni .btn{flex:1 1 auto;min-width:0}
}
/* dove c'è la barra fissa in basso, l'avviso le sta sopra */
@media (max-width:860px){.barra-mobile{z-index:45}.avviso-cookie{bottom:4.6rem}}

/* ---------- mappa in attesa di consenso ---------- */
.mappa-consenso{
  display:grid;place-content:center;justify-items:center;gap:.9rem;height:100%;padding:var(--sp-4);
  text-align:center;background:var(--nebbia);border:1px dashed var(--pietra-3);border-radius:var(--r-lg);
}
.mappa-consenso p{margin:0;max-width:44ch;font-size:.92rem;line-height:1.6;color:var(--grigio)}
/* Nella scheda il riquadro sta dentro un <dd>, e `.tabella-riga dd b` fa di ogni
   grassetto un blocco a 1,16rem: il nome del fornitore andava a capo da solo e
   la frase ripartiva con «. L'indirizzo…». Qui il grassetto resta nella riga.
   Stessa forza di quella regola, e viene dopo: vince questa. */
.mappa-consenso p b{display:inline;margin:0;font:inherit;font-weight:700;letter-spacing:inherit;color:var(--inchiostro)}

/* ---------- WhatsApp sempre a portata, in basso a sinistra ---------- */
/* Verde WhatsApp: qui il colore non è decorazione, è il modo in cui si riconosce
   il servizio a colpo d'occhio — come il tetto rosso del marchio identifica Fageba.
   --sotto lo alza quando in basso c'è già qualcosa (avviso cookie, barra mobile). */
.wa-flotta{
  /* due scostamenti distinti: --barra è la barra fissa del telefono (la mette la
     media query), --avviso è l'altezza dell'avviso cookie (la misura il JS).
     Tenerli separati evita che l'uno cancelli l'altro. */
  position:fixed;z-index:55;left:var(--gutter);
  bottom:calc(var(--gutter) + var(--barra, 0px) + var(--avviso, 0px));
  display:inline-flex;align-items:center;gap:0;
  height:56px;width:56px;padding:0;border-radius:var(--r-pill);overflow:hidden;
  background:var(--verde-wa);color:#fff;box-shadow:var(--ombra-alta);
  transition:width .3s var(--ease),background-color .18s,bottom .3s var(--ease);
}
.wa-flotta svg{flex:none;width:28px;height:28px;margin-inline:14px}
.wa-etichetta{
  white-space:nowrap;font-weight:600;font-size:.94rem;opacity:0;
  padding-right:1.15rem;transition:opacity .22s var(--ease);
}
.wa-flotta:hover,.wa-flotta:focus-visible{width:15.5rem;background:var(--verde-wa-cupo);text-decoration:none}
.wa-flotta:hover .wa-etichetta,.wa-flotta:focus-visible .wa-etichetta{opacity:1}
.wa-flotta:focus-visible{outline:2.5px solid var(--inchiostro);outline-offset:3px}

/* su schermi che non hanno il passaggio del mouse la scritta non serve */
@media (pointer:coarse){
  .wa-flotta:hover{width:56px;background:var(--verde-wa)}
  .wa-flotta:hover .wa-etichetta{opacity:0}
}
/* Sul telefono non galleggia sopra la pagina: entra nella barra in basso, sempre
   a sinistra. Da fermo copriva i campi del modulo di ricerca e le misure delle
   card — un pulsante fisso su uno schermo stretto copre per definizione qualcosa.
   Dentro la barra resta nello stesso posto e non nasconde niente. */
@media (max-width:860px){
  .wa-flotta{
    height:48px;width:48px;left:.6rem;
    bottom:calc(.6rem + env(safe-area-inset-bottom));
    z-index:46;box-shadow:none;
  }
  .wa-flotta svg{width:24px;height:24px;margin-inline:12px}
  .wa-flotta:hover{width:48px}
  body[data-wa] .barra-mobile{padding-left:calc(48px + 1.1rem)}
}
@media (prefers-reduced-motion:reduce){.wa-flotta{transition:none}.wa-etichetta{transition:none}}

/* ---------- le tre strade: cerco casa, vendo, affitto ---------- */
/* Sono link, non riquadri decorativi: tutta la scheda è cliccabile, e si vede. */
.scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-2)}
.scelta{display:flex;flex-direction:column;gap:.5rem;padding:1.6rem 1.5rem 1.4rem;background:var(--calce);
  border:1px solid var(--pietra-2);border-radius:var(--r-lg);color:var(--inchiostro);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.scelta:hover{border-color:var(--pietra-3);transform:translateY(-2px);box-shadow:var(--ombra);text-decoration:none}
.scelta-occhio{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blu);margin:0}
.scelta-tit{font-family:var(--sans);font-weight:700;font-size:1.24rem;line-height:1.2;letter-spacing:-.016em;margin:0}
.scelta p{margin:0;color:var(--grigio);font-size:.95rem;line-height:1.55}
.scelta-cta{margin-top:auto;padding-top:.7rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.9rem;color:var(--blu)}
.scelta:hover .scelta-cta svg{transform:translateX(3px)}
.scelta-cta svg{transition:transform .2s var(--ease)}

/* ---------- blocco di chiusura, centrato ---------- */
.chiusura{max-width:44ch;margin-inline:auto;text-align:center}
.chiusura .lede{max-width:none;margin-top:1.1rem}
.chiusura-vie{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:var(--sp-3)}

/* Le cinque parole del metodo: si leggono come un elenco, non come una frase. */
.cadenza{font-family:var(--sans);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.6rem);
  letter-spacing:-.01em;line-height:1.5;color:var(--grigio);margin:var(--sp-3) 0 0;max-width:30ch}

/* ---------- moduli: introduzione e postilla ---------- */
.form-intro{color:var(--grigio);margin:.35rem 0 1.25rem;font-size:.95rem;line-height:1.5}
.form-micro{margin:.6rem 0 0;font-size:.76rem;letter-spacing:.04em;color:var(--grigio-2);text-align:center}
.vuoto-micro{margin:.8rem 0 0;font-size:.78rem;color:var(--grigio-2)}

/* quattro passi in fila quando c'è spazio, uno sotto l'altro quando non ce n'è */
.passi-larghi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-2) var(--sp-3)}
.passi-larghi .passo{padding:0}

/* Il titolo della home è una frase intera, non uno slogan: scende di corpo e si
   tiene una misura leggibile, altrimenti a 4,7rem occupa da solo tutto lo schermo. */
.hero-titolo{font-size:clamp(2rem,4.2vw,3.3rem);max-width:26ch;letter-spacing:-.028em}