/* Palette dichiarata una volta. Pagina volutamente chiara in ogni tema:
   bianco, rosso, nero. */
:root{
  --bordeaux:#8C1A21;
  --grafite:#2A2A2A;
  --bianco:#FFFFFF;
  --ground:#FFFFFF;
  --chiaro:#F5F5F4;
  --crema:#F7F3EC;
  --crema-bordo:#E6DECF;
  --nero:#111111;
  --ink:#111111;
  --ink-soft:#4A4A4A;
  --muted:#767676;
  --line:#E4E4E1;
  --line-strong:#C9C9C4;
  --rosso:#D62027;
  --rosso-scuro:#B31820;
  --shadow:0 1px 2px rgba(17,17,17,.04), 0 12px 30px -20px rgba(17,17,17,.35);
  --shadow-alta:0 20px 48px -26px rgba(17,17,17,.5);
  --radius:3px;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--rosso);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,44px)}
.eyebrow{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============ TESTATA ============ */
.site-head{position:sticky;top:0;z-index:60;background:var(--bianco);border-bottom:1px solid var(--line)}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;text-decoration:none}
.logo-lungo{display:block;height:74px;width:auto}
.logo-quadro{display:block;width:100%;height:auto}
.foot-marchio{flex:none;width:66px;padding:7px;background:#fff;border-radius:2px}

.head-contatti{display:flex;align-items:center;gap:26px}
.hc{display:flex;align-items:center;gap:9px;text-decoration:none}
.hc svg{flex:none;width:17px;height:17px;stroke:var(--rosso);fill:none;stroke-width:1.6}
.hc-testo{display:flex;flex-direction:column;line-height:1.2}
.hc-et{font-family:var(--data);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hc-val{font-size:15.5px;font-weight:500;font-variant-numeric:tabular-nums}
.hc:hover .hc-val{color:var(--rosso)}

.head-nav{border-top:1px solid var(--line)}
.head-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Lo spazio fra le voci cresce con la finestra ma si ferma prima: oltre i
   18px, a schermo largo, il menu andava a capo proprio perche' era largo. */
.nav{display:flex;flex-wrap:wrap;gap:2px clamp(10px,1.05vw,18px);min-width:0;flex:1 1 auto}
.nav::-webkit-scrollbar{display:none}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;font-size:clamp(11.5px,.92vw,13px);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;padding-block:14px;border-bottom:2px solid transparent}
.nav a.qui{color:var(--rosso);border-bottom-color:var(--rosso)}
.nav a:hover{color:var(--nero);border-bottom-color:var(--rosso)}
/* La valutazione non sta piu' nel menu: sta solo qui, e allora deve
   vedersi. Da testo rosso e' diventata un tasto pieno — e' la richiesta
   che porta gli incarichi, non una voce come le altre. */
.head-cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  text-decoration:none;color:#fff;background:var(--rosso);white-space:nowrap;
  letter-spacing:.04em;text-transform:uppercase;padding:10px 18px;border-radius:999px;
  transition:background .15s,transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.head-cta:hover{background:var(--rosso-scuro);transform:translateY(-1px)}
.head-cta:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}
@media (max-width:760px){
  .head-top{flex-wrap:wrap;gap:12px}
  .hc-et{display:none}
  .head-contatti{gap:18px}
  .hc-val{font-size:14px}
  .logo-lungo{height:44px}
  /* Sul telefono il tasto resta — se sparisse, la valutazione non sarebbe
     raggiungibile da nessuna parte, ora che non e' piu' nel menu — ma va a
     capo insieme ai preferiti, altrimenti stringe il menu al punto che ogni
     voce finisce su una riga sua. */
  .head-nav .wrap{flex-wrap:wrap;gap:0}
  .head-nav .nav{flex:1 1 100%}
  .head-nav .wrap>span{flex:1 1 100%;justify-content:space-between;
    padding-bottom:12px;gap:12px}
  .head-nav .head-cta{font-size:11.5px;padding:8px 14px;letter-spacing:.03em}
}

/* ============ APERTURA ============ */
/* Compare quando si e' scesi un po', e riporta in cima. Sul telefono
   sta in basso a destra, dove arriva il pollice. */
/* Le icone social: disegnate qui dentro, non scaricate da Facebook o
   da Google. Cosi' non pesano e non tracciano nessuno. */
/* La striscia dei portali: caselle bianche su fondo scuro, cosi' i
   marchi si leggono senza doverli ritoccare. */
.site-foot #portali{padding-block:30px 26px;border-bottom:1px solid rgba(255,255,255,.14)}
.portali-et{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 14px;text-align:center}
.portali-righe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.portali-righe a,.portali-righe .portale-fermo{display:flex;align-items:center;justify-content:center;background:#fff;
  border-radius:6px;overflow:hidden;padding:0;min-width:132px;height:58px;text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.portali-righe .con-nome{padding:12px 20px}
.portali-righe a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.portali-righe .portale-fermo{cursor:default}
.portali-righe img{height:100%;width:auto;display:block}
.portali-righe span{font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;color:inherit}
@media (max-width:620px){ .portali-righe a{min-width:104px;height:50px;padding:10px 14px} }
.social{display:flex;gap:10px;align-items:center}
.social a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.82);
  transition:all .15s}
.social a:hover{background:var(--rosso);border-color:var(--rosso);color:#fff}
.social svg{width:19px;height:19px;fill:currentColor}
.social-scuro{margin-top:22px}
.social-scuro a{border-color:var(--line-strong);color:var(--ink-soft)}
.social-scuro a:hover{background:var(--rosso);border-color:var(--rosso);color:#fff}
.site-foot{padding-bottom:calc(48px + clamp(14px,2.2vw,28px) + 18px)}
@media (max-width:620px){ .site-foot{padding-bottom:96px} }
.su{position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:60;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--bianco);color:var(--ink);cursor:pointer;display:flex;
  align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.16);
  transition:opacity .2s,transform .2s,background .14s;opacity:1}
.su svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.su:hover{background:var(--rosso);color:#fff;border-color:var(--rosso);transform:translateY(-2px)}
.su[hidden]{display:none}
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;background:var(--nero,#15171A);padding-block:clamp(78px,10vw,155px) clamp(86px,9.5vw,150px)}
.hero-foto{position:absolute;inset:0;z-index:-2;background-image:url("/casa-home.jpg");background-size:cover;background-position:center 55%}
.hero-velo{position:absolute;inset:0;z-index:-1;background:radial-gradient(62% 48% at 50% 52%, rgba(8,9,11,.27) 0%, rgba(8,9,11,.19) 60%, rgba(8,9,11,.02) 100%),linear-gradient(180deg,rgba(8,9,11,.08) 0%,rgba(8,9,11,0) 45%,rgba(8,9,11,.16) 100%)}

.foto-nota{position:absolute;right:12px;bottom:10px;z-index:2;font-family:var(--data);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.82);padding:3px 8px;border-radius:2px}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(33px,5.2vw,60px);line-height:1.08;letter-spacing:-.015em;margin-block:0}
.hero h1 em{font-style:italic;color:var(--rosso)}
.hero .lede{font-size:clamp(15.5px,1.6vw,18.5px);color:var(--ink-soft);max-width:64ch;margin-inline:auto}
.hero-testo{max-width:1180px;margin-inline:auto}
.hero h1 em{font-style:normal;color:#fff;text-shadow:inherit}

/* Sul telefono la foto viene tagliata stretta e al centro capita il
   televisore, che dietro le scritte fa una macchia nera. Sposto
   l'inquadratura sui pannelli, che sono piu' tranquilli. */
@media (max-width:700px){ .hero-foto{background-position:26% 55%} }

/* Scritte sulla foto: vanno dopo le regole qui sopra, altrimenti
   .hero .lede rimette il grigio scuro e sul velo non si legge piu'. */
.hero .eyebrow{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7),0 1px 10px rgba(0,0,0,.8)}
.hero h1{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.72),0 2px 9px rgba(0,0,0,.82),0 0 34px rgba(0,0,0,.62)}
.hero .lede{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 1px 7px rgba(0,0,0,.9),0 0 24px rgba(0,0,0,.65)}


/* ============ RICERCA ============ */
.ricerca-wrap{position:relative;z-index:5;margin-top:clamp(-72px,-4.5vw,-38px);padding-block:0 clamp(34px,4.5vw,56px)}
.ricerca{background:var(--bianco);border:1px solid var(--line-strong);border-top:3px solid var(--rosso);border-radius:var(--radius);box-shadow:var(--shadow-alta);padding:20px;text-align:left}
.ricerca-riga{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-family:var(--data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.campo select,.campo input,.campo textarea{font-family:var(--body);font-size:14.5px;background:var(--bianco);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px 11px;width:100%;height:42px}
.campo textarea{height:auto}
.campo select:hover,.campo input:hover{border-color:var(--nero)}
.btn-cerca{background:var(--rosso);color:#fff;border:0;border-radius:var(--radius);font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.03em;padding:0 30px;height:42px;cursor:pointer}
.btn-cerca:hover{background:var(--rosso-scuro)}
.avanzate{display:none;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.avanzate.aperta{display:grid}
.ricerca-sotto{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.link-avanzata{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--nero)}
.link-avanzata:hover{color:var(--rosso)}
.azzera{background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:var(--muted);text-decoration:underline}
.azzera:hover{color:var(--rosso)}
.conteggio{font-family:var(--data);font-size:12px;color:var(--muted)}
@media (max-width:1040px){ .ricerca-riga{grid-template-columns:1fr 1fr 1fr} .btn-cerca{grid-column:1/-1;height:46px} .avanzate{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .ricerca-riga{grid-template-columns:1fr 1fr} .avanzate{grid-template-columns:1fr 1fr} }

/* ============ VISURE ============ */
.visure-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.visura{display:flex;flex-direction:column;gap:10px;background:var(--bianco);
  border:1px solid var(--line);border-top:3px solid var(--rosso);padding:22px 20px}
.visura h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2}
.visura .sotto{font-size:14.5px;color:var(--ink-soft);line-height:1.45}
.visura ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}
.visura li{padding-left:16px;position:relative}
.visura li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--rosso)}
.visura .tempi{font-family:var(--data);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.visura .prezzo{font-family:var(--display);font-size:28px;margin-top:auto;padding-top:10px}
.visura .prezzo small{font-family:var(--body);font-size:13px;color:var(--muted)}
.visure-modulo{margin-top:28px;background:var(--chiaro);border:1px solid var(--line);padding:24px}
.visure-modulo[hidden]{display:none}
.visure-scelto{font-family:var(--data);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rosso);margin-bottom:16px}
.visure-campi{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.visure-fattura{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.visure-titoletto{font-family:var(--data);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.visure-avvertenza{font-size:13px;color:var(--muted);margin-top:8px}
.visure-totale{font-family:var(--display);font-size:25px;color:var(--ink);
  margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.visure-totale small{font-family:var(--body);font-size:13.5px;color:var(--muted);
  display:block;margin-top:4px;font-weight:400}
.visure-spunta{display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  font-size:13.5px;line-height:1.45;color:var(--ink-soft);cursor:pointer}
.visure-spunta input{margin-top:3px;width:17px;height:17px;accent-color:var(--rosso);flex:0 0 auto}
@media (max-width:640px){ .visure-campi{grid-template-columns:1fr} }

/* ============ SEZIONI ============ */
.sez{padding-block:clamp(42px,5.5vw,74px)}
.fascia{background:var(--chiaro);border-block:1px solid var(--line)}
.sez-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.sez h2{font-family:var(--display);font-weight:600;font-size:clamp(27px,3.6vw,40px);line-height:1.12;letter-spacing:-.01em;margin-top:8px}
.titolo-rosso{display:inline-block;border-bottom:3px solid var(--rosso);padding-bottom:6px}
.lede{font-size:16.5px;color:var(--ink-soft)}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-size:15px;font-weight:600;padding:12px 22px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;cursor:pointer;letter-spacing:.02em}
.btn-rosso{background:var(--rosso);color:#fff}
.btn-rosso:hover{background:var(--rosso-scuro)}
.btn-nero{background:var(--nero);color:#fff}
.btn-nero:hover{background:#000}
.btn-ghost{border-color:var(--line-strong);color:var(--nero);background:transparent}
.btn-ghost:hover{border-color:var(--nero)}

/* ============ SCHEDE ============ */
.carosello{position:relative}
.ev-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 15px);gap:30px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.ev-track::-webkit-scrollbar{display:none}
.ev-track>.scheda{scroll-snap-align:start}
.ev-comandi{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px}
.ev-passo{font-family:var(--data);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-right:6px}
.ev-frec{width:46px;height:46px;border:1px solid var(--line-strong);border-radius:50%;background:var(--bianco);color:var(--nero);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .2s ease,opacity .2s ease}
.ev-frec:hover:not([disabled]){border-color:var(--nero)}
.ev-frec[disabled]{opacity:.3;cursor:default}
@media (max-width:860px){ .ev-track{grid-auto-columns:86%;gap:18px} }

/* Fascia a tutta larghezza: esce dal contenitore e prende tutto lo schermo. */
.sez-foto{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(340px,48vw,560px);overflow:hidden;display:flex;align-items:center;
  justify-content:center;text-align:center;background:var(--nero,#15171A)}
.sez-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sez-foto::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 62% at 50% 50%, rgba(10,11,13,.62) 0%, rgba(10,11,13,.44) 60%, rgba(10,11,13,.22) 100%)}
.sez-foto-testo{position:relative;z-index:1;color:#fff;padding:clamp(26px,4vw,52px) clamp(20px,6vw,64px);max-width:840px;
  display:flex;flex-direction:column;align-items:center}
.sez-foto-testo .eyebrow{color:rgba(255,255,255,.72)}
.sez-foto-testo h2{font-family:var(--display);font-weight:600;line-height:1.14;
  font-size:clamp(26px,3.6vw,46px);margin:10px 0 12px;letter-spacing:-.01em;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.55)}
.sez-foto-lede{font-size:clamp(15px,1.3vw,18px);color:rgba(255,255,255,.9);margin:0;max-width:52ch;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.btn-fascia{display:inline-block;margin-top:22px;background:var(--rosso);color:#fff;text-decoration:none;
  font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 38px;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .14s,background .14s}
.btn-fascia:hover{background:var(--rosso-scuro,#A50D26);transform:translateY(-1px)}
@media (max-width:660px){ .sez-foto{height:clamp(280px,74vw,420px)} }
.sotto-head{display:flex;align-items:center;gap:18px;margin:clamp(40px,5vw,66px) 0 24px;min-width:0;flex-wrap:wrap}
/* Un'unica regola: quando erano due, il white-space:nowrap della seconda
   annullava l'overflow-wrap della prima e i titoli lunghi (il borsino li
   compone da JS) sfondavano la pagina sul telefono. */
.sotto-head h3{font-family:var(--data);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;min-width:0;overflow-wrap:break-word}
.sotto-head::after{content:"";flex:1;height:1px;background:var(--line)}

.griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1040px){ .griglia{grid-template-columns:repeat(2,1fr)} }
@media (max-width:660px){ .griglia{grid-template-columns:1fr} }
/* Le caselle di invito completano la fila quando gli immobili non bastano:
   sono inviti dell'agenzia, non finti annunci. */
.locandina-invito{display:flex;flex-direction:column;justify-content:center;gap:10px;
  border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--bianco);
  padding:26px 24px;text-decoration:none;color:inherit;min-height:220px;transition:border-color .15s}
.locandina-invito:hover{border-color:var(--rosso)}
.locandina-invito .num{font-family:var(--data);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rosso);margin:0}
.locandina-invito h3{font-family:var(--display);font-size:20px;font-weight:500;margin:0;color:var(--ink)}
.locandina-invito p{font-size:14px;color:var(--ink-soft);margin:0}
.locandina-invito span{font-family:var(--data);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rosso);margin-top:4px}

.scheda{display:flex;flex-direction:column;background:var(--bianco);border:1px solid var(--line);padding:6px;transition:border-color .2s ease}
.scheda:hover{border-color:var(--line-strong)}

.galleria{position:relative;aspect-ratio:3/2;background:var(--chiaro);overflow:hidden}
.galleria img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}

.contatore{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--data);font-size:10.5px;letter-spacing:.06em;color:#fff;background:rgba(17,17,17,.5);padding:4px 9px}
.scheda--piccola .titolo{font-size:19px;margin-top:3px;line-height:1.16}
.prezzo-base{font-family:var(--display);font-size:21px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:auto;padding-top:3px;line-height:1.15}
.scheda--piccola .prezzo-base{font-size:18px;padding-top:2px}
.scheda{position:relative;cursor:pointer}
.galleria .extra{position:absolute;left:0;right:0;bottom:0;z-index:4;background:rgba(255,255,255,.965);padding:9px 13px 10px;transform:translateY(101%);opacity:0;transition:transform .52s cubic-bezier(.22,.61,.36,1),opacity .46s ease;box-shadow:0 -14px 30px -22px rgba(17,17,17,.5)}
.scheda.aperta .galleria .extra{transform:none;opacity:1}
.galleria .extra .meta{margin-top:0;gap:2px 14px;font-size:13px}
.galleria .extra .estratto{margin-top:7px;font-size:13.5px;line-height:1.5;-webkit-line-clamp:2}
.galleria .extra .misure{margin-top:7px;padding-top:7px;gap:6px 8px}
.galleria .extra .apri{margin-top:7px;padding-top:0;font-size:13px}
@media (hover:none){
  .galleria{aspect-ratio:auto}
  .galleria img{height:auto}
  .galleria .extra{position:static;transform:none;opacity:1;background:none;box-shadow:none;padding:14px 2px 0}
}
.scheda--piccola .testo{padding:8px 5px 3px}
.scheda--piccola .misura-n{font-size:16px}
.scheda--piccola .meta{gap:4px 14px;margin-top:0;font-size:14px}
.scheda--piccola .contratto{font-size:10px;padding:5px 10px}
.scheda--piccola .occhiello .rif{font-size:14px;padding:4px 9px}
.testo{padding:8px 6px 4px;display:flex;flex-direction:column;flex:1}
.occhiello{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.contratto{font-family:var(--data);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--bordeaux);padding:5px 9px}
.contratto.azienda{background:var(--grafite)}
.ev{position:absolute;left:12px;top:12px;z-index:2;font-family:var(--data);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.95);color:var(--nero);padding:5px 9px;display:inline-flex;align-items:center;box-shadow:0 1px 6px rgba(17,17,17,.16)}
.ev::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rosso);margin-right:7px}
.occhiello .rif{margin-left:auto;font-family:var(--data);font-size:13px;font-weight:500;letter-spacing:.05em;color:var(--nero);border:1px solid var(--line-strong);padding:3px 8px}
.titolo{font-family:var(--display);font-size:23px;font-weight:400;line-height:1.14;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:12px;font-size:14.5px}
.meta span{display:flex;align-items:center;gap:8px}
.meta svg{flex:none;width:16px;height:16px;stroke:var(--rosso);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.meta .luogo{font-size:13.5px;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.meta .luogo:hover{border-bottom-color:var(--line-strong)}
.meta .prezzo{font-weight:600;font-variant-numeric:tabular-nums}
.estratto{margin-top:13px;color:var(--muted);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.apri{margin-top:13px;align-self:flex-start;font-size:13.5px;font-weight:500;color:var(--nero);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.apri:hover{color:var(--rosso);border-bottom-color:var(--rosso)}
.misure{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:7px 8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.misura{display:flex;align-items:center;gap:7px;min-width:0}
.misura svg{flex:none;width:15px;height:15px;stroke:var(--nero);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.misura-et{font-size:10px;letter-spacing:.03em;color:var(--muted);line-height:1.1}
.misura-n{font-family:var(--display);font-size:17px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.05}

/* visore a tutto schermo */
@keyframes apparsa{from{opacity:0}to{opacity:1}}
.lightbox{position:fixed;inset:0;z-index:260;background:#FBFBFA;animation:apparsa .4s ease both;display:flex;align-items:center;justify-content:center;padding:clamp(8px,1.2vw,18px)}
.lightbox[hidden]{display:none!important}
.lb-intro{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#FBFBFA;pointer-events:none}
.lb-intro img{width:min(46vw,420px);height:auto}
.lb-intro.va{animation:sipario 2.4s cubic-bezier(.33,0,.2,1) forwards}
@keyframes sipario{
  0%{opacity:0;transform:scale(.97)}
  18%{opacity:1;transform:scale(1)}
  48%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.03);visibility:hidden}}
.lb-corpo{margin:0;max-width:1600px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,20px)}
.lb-corpo.va{animation:entra 1.15s 1.2s cubic-bezier(.22,.61,.36,1) both}
@keyframes entra{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.lb-cornice{background:var(--bianco);border:1px solid var(--line);padding:clamp(6px,.5vw,8px);box-shadow:0 30px 70px -40px rgba(17,17,17,.45);max-width:100%;width:fit-content;margin-inline:auto}
.lb-cornice img{display:block;height:84vh;width:auto;max-width:100%;object-fit:contain;background:var(--chiaro)}
.lb-didascalia{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 22px;max-width:min(100%,1100px);padding-inline:8px;text-align:center}
.lb-didascalia b{font-family:var(--display);font-size:clamp(18px,2vw,25px);font-weight:400;color:var(--ink)}
.lb-dove{font-size:clamp(13px,1.4vw,15px);color:var(--ink-soft)}
.lb-prezzo{font-family:var(--display);font-size:clamp(18px,2vw,23px);font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.lb-num{font-family:var(--data);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.lb-frec,.lb-chiudi{position:absolute;z-index:3;border:1px solid var(--line-strong);background:rgba(255,255,255,.96);color:var(--nero);cursor:pointer;display:grid;place-items:center}
.lb-frec{top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;font-size:27px;line-height:1}
.lb-prec{left:clamp(6px,1.4vw,22px)}
.lb-succ{right:clamp(6px,1.4vw,22px)}
.lb-chiudi{top:clamp(8px,1.4vw,20px);right:clamp(8px,1.4vw,20px);width:46px;height:46px;border-radius:50%;font-size:25px;line-height:1}
.lb-frec:hover,.lb-chiudi:hover{border-color:var(--nero)}
@media (max-width:700px){
  .lb-cornice img{height:auto;width:100%;max-height:62vh}
  .lb-frec{width:42px;height:42px;font-size:23px;top:auto;bottom:14px;transform:none}
  .lb-intro img{width:min(70vw,300px)}
}
@media (prefers-reduced-motion:reduce){ .lb-intro.va,.lb-corpo.va{animation:none} .lb-intro{display:none} }
.invito{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px;padding-top:30px;border-top:1px solid var(--line);text-align:center}
.invito p{color:var(--muted);font-size:14.5px;max-width:52ch}
.torna{background:none;border:0;padding:0;margin-top:16px;width:100%;text-align:center;font-family:var(--body);font-size:13.5px;color:var(--muted);cursor:pointer;text-decoration:underline}
.torna:hover{color:var(--rosso)}
.paginazione{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:34px}
.pag-info{width:100%;text-align:center;font-family:var(--data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.paginazione button{min-width:40px;height:40px;padding:0 13px;border:1px solid var(--line-strong);background:var(--bianco);font-family:var(--body);font-size:14px;color:var(--ink);cursor:pointer}
.paginazione button:hover:not([disabled]){border-color:var(--nero)}
.paginazione button[aria-current="page"]{background:var(--nero);color:#fff;border-color:var(--nero)}
.paginazione button[disabled]{opacity:.3;cursor:default}
.paginazione .punti{color:var(--muted);padding:0 2px}
.vuoto{grid-column:1/-1;padding:42px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--radius)}

.avviso{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-left:3px solid var(--nero);border-radius:var(--radius);padding:14px 16px;margin-top:22px;font-size:13px;color:var(--muted);background:var(--bianco)}
.avviso b{color:var(--ink-soft);font-weight:600;white-space:nowrap}

/* ============ TRE VERIFICHE ============ */
.tre{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px}
.col{padding:0 28px;border-left:1px solid var(--line-strong)}
.col:first-child{padding-left:0;border-left:0}
.col:last-child{padding-right:0}
.col .num{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rosso)}
.col h3{font-family:var(--display);font-size:22px;font-weight:500;margin-block:10px 8px}
.col p{color:var(--ink-soft);font-size:15px}
@media (max-width:820px){
  .tre{grid-template-columns:1fr;gap:24px}
  .col,.col:first-child{padding:0 0 0 18px;border-left:2px solid var(--rosso)}
}

/* ============ VALUTATORE ============ */
.contatti-griglia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:860px){ .contatti-griglia{grid-template-columns:1fr} }
/* La mappa dell'ufficio: si carica solo quando serve e non scappa
   mai oltre il bordo del riquadro. */
.mappa-ufficio{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/10;background:var(--chiaro)}
.mappa-ufficio iframe{width:100%;height:100%;border:0;display:block}
.due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:880px){ .due{grid-template-columns:1fr} }
.form-omi{background:var(--bianco);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px;box-shadow:var(--shadow)}
@media (max-width:520px){ .form-omi{grid-template-columns:1fr} }
.esito{background:var(--nero);color:#fff;border-radius:var(--radius);padding:24px}
.esito .eyebrow{color:rgba(255,255,255,.62)}
.esito .range{font-family:var(--display);font-size:clamp(26px,3.9vw,38px);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:6px}
.esito .centrale{font-family:var(--data);font-size:13px;color:rgba(255,255,255,.72);margin-top:8px}
.barra{height:6px;background:rgba(255,255,255,.18);border-radius:3px;margin-top:16px;position:relative;overflow:hidden}
.barra span{position:absolute;top:0;bottom:0;background:var(--rosso);border-radius:3px;transition:left .35s ease,width .35s ease}
.dettaglio{margin-top:18px;border-top:1px solid rgba(255,255,255,.18);padding-top:14px;display:grid;gap:7px}
.riga{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.riga span:first-child{color:rgba(255,255,255,.72)}
.riga span:last-child{font-family:var(--data);font-variant-numeric:tabular-nums}
.note{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:14px}

/* ============ AREA RISERVATA ============ */
.profili{display:grid;margin-top:24px}
.profilo{padding:18px 0;border-top:1px solid var(--line)}
.profilo .num{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rosso)}
.profilo h3{font-family:var(--display);font-size:20px;font-weight:500;margin-block:7px 6px}
.profilo p{color:var(--ink-soft);font-size:14.5px}
.modulo{background:var(--bianco);border:1px solid var(--line);border-top:3px solid var(--nero);border-radius:var(--radius);padding:22px;display:grid;gap:13px;box-shadow:var(--shadow)}
.modulo textarea{resize:vertical;min-height:88px}
.privacy{font-size:12.5px;color:var(--muted)}

/* ============ TERRITORIO ============ */
/* Un testo lungo si legge solo se la riga e' corta: 66 caratteri, non
   tutta la larghezza dello schermo. */
/* Due colonne giustificate, divise da una riga sottile: il testo riempie
   il foglio e non resta mezza pagina bianca. La sillabazione automatica
   e' obbligatoria quando si giustifica in italiano, altrimenti fra le
   parole si aprono quei canali bianchi che rovinano la lettura. */
.racconto{column-count:2;column-gap:clamp(30px,3.6vw,56px);
  column-rule:1px solid var(--line-strong);margin-top:24px;
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.racconto p{font-size:16px;line-height:1.7;margin:0 0 15px;color:var(--ink-soft);
  orphans:2;widows:2}
.racconto p.lede{font-size:17.5px;line-height:1.6;color:var(--ink);margin-bottom:17px}
.racconto p b{color:var(--ink);font-weight:600}
.racconto p.chiusa{color:var(--ink);font-weight:500;break-inside:avoid;margin-bottom:0}
@media (max-width:820px){
  .racconto{column-count:1;column-rule:0;text-align:left;max-width:66ch}
  .racconto p{font-size:16.5px}
}
.carta-dati{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(22px,3vw,44px);
  margin-top:38px;padding:clamp(24px,3.2vw,36px);background:var(--bianco);
  border:1px solid var(--line-strong);border-left:4px solid var(--rosso);border-radius:var(--radius)}
.carta-dati h3{font-family:var(--display);font-size:22px;font-weight:500;margin:8px 0 10px;color:var(--ink)}
.carta-dati p{font-size:14.5px;line-height:1.7;margin:0;color:var(--ink-soft)}
.carta-dati a:not(.btn){color:var(--rosso)}
.carta-dati .btn{display:inline-block}
@media (max-width:760px){ .carta-dati{grid-template-columns:1fr} }
/* Le linguette del tipo di trattativa: si leggono a colpo d'occhio e
   dicono subito quanti immobili ci sono sotto ciascuna. */
/* Le puntate del podcast hanno la stessa scheda degli articoli: chi
   guarda non deve imparare due linguaggi. Cambia il segno sulla
   copertina — il triangolino — e la durata. */
.post-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.post-play span{width:56px;height:56px;border-radius:50%;background:rgba(200,16,46,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.post-play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.post-durata{position:absolute;right:10px;bottom:10px;background:rgba(10,11,13,.78);color:#fff;
  font-family:var(--data);font-size:11.5px;padding:3px 8px;border-radius:4px;
  font-variant-numeric:tabular-nums}
.post .post-foto{position:relative}
.lettore{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.lettore audio{width:100%;display:block}
.lettore iframe{width:100%;height:172px;border:0;border-radius:10px;display:block}
.podcast-vuoto{grid-column:1/-1;color:var(--muted);font-size:15px}
.mappa-tipi{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tipo-tasto{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-strong);
  background:var(--bianco);color:var(--ink-soft);border-radius:100px;padding:9px 16px;
  font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .14s}
.tipo-tasto:hover{border-color:var(--rosso);color:var(--rosso)}
.tipo-tasto b{font-family:var(--data);font-size:12.5px;font-variant-numeric:tabular-nums;
  background:var(--chiaro);color:var(--muted);border-radius:100px;padding:2px 8px}
.tipo-tasto[aria-pressed="true"]{background:var(--rosso);border-color:var(--rosso);color:#fff}
.tipo-tasto[aria-pressed="true"] b{background:rgba(255,255,255,.22);color:#fff}
#mappa-griglia .vuoto{grid-column:1/-1}
.mappa-tela{height:clamp(380px,58vh,620px);margin-top:26px;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--chiaro);position:relative;z-index:0}
.mappa-attesa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:var(--muted);font-size:14px}
.mappa-nota{font-size:13px;color:var(--muted);margin-top:12px;max-width:72ch}
.mappa-nota a{color:var(--muted)}
.segno{background:none;border:0}
.segno-punta{width:30px;height:40px;display:block}
.segno-tanti{width:42px;height:42px;border-radius:50%;background:var(--rosso);color:#fff;border:3px solid rgba(255,255,255,.9);
  box-shadow:0 3px 10px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;
  font-family:var(--data);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.leaflet-popup-content-wrapper{border-radius:var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.leaflet-popup-content{margin:0;width:262px!important;font-family:var(--f)}
.pop-tit{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rosso);padding:12px 14px 8px;margin:0}
.pop-lista{max-height:262px;overflow:auto}
.pop-im{display:flex;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer}
.pop-im:hover{background:var(--chiaro)}
.pop-im img{width:62px;height:46px;object-fit:cover;border-radius:5px;flex:0 0 auto;background:var(--chiaro)}
.pop-im b{display:block;font-weight:500;font-size:13.5px;line-height:1.3;color:var(--ink)}
.pop-im span{font-size:12.5px;color:var(--rosso);font-weight:600}
.comune{cursor:pointer}
.comune:hover{border-color:var(--rosso);color:var(--rosso)}
.comune b{font-family:var(--data);font-variant-numeric:tabular-nums;color:var(--rosso);margin-left:6px}
.comuni{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.comune{font-size:14px;padding:7px 13px;border:1px solid var(--line-strong);border-radius:100px;background:var(--bianco);color:var(--ink-soft)}
.comune b{font-family:var(--data);font-size:11.5px;color:var(--rosso);margin-left:6px}

/* ============ STUDIO ============ */
.vetrina{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.carta{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;background:var(--bianco);border:1px solid var(--line);border-top:3px solid var(--rosso);border-radius:var(--radius);padding:22px 20px 18px;transition:transform .15s,box-shadow .15s}
.carta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.07)}
.carta .num{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rosso);margin:0}
.carta h3{font-family:var(--display);font-size:21px;font-weight:500;margin:2px 0 4px;color:var(--ink)}
.carta p{font-size:14.5px;color:var(--ink-soft);margin:0}
.carta .freccia{margin-top:auto;padding-top:12px;font-family:var(--data);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--rosso)}
@media (max-width:860px){ .vetrina{grid-template-columns:1fr} }
.studio{border:1px solid var(--line-strong);border-left:4px solid var(--rosso);border-radius:var(--radius);padding:clamp(24px,3.5vw,38px);display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;background:var(--bianco)}
.studio h3{font-family:var(--display);font-size:clamp(22px,2.8vw,30px);font-weight:400;margin-top:8px}
.studio p{color:var(--ink-soft);max-width:62ch;margin-top:10px}
@media (max-width:720px){ .studio{grid-template-columns:1fr} }

/* ============ CONTATTI ============ */
.recapiti{display:grid;margin-top:22px}
.recapito{display:grid;grid-template-columns:118px 1fr;gap:14px;padding-block:12px;border-top:1px solid var(--line)}
.recapito dt{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.recapito dd{margin:0;font-size:15.5px}
.recapito a{text-decoration:none;border-bottom:1px solid var(--line-strong)}
.recapito a:hover{color:var(--rosso);border-bottom-color:var(--rosso)}

.site-foot{background:var(--nero);color:rgba(255,255,255,.7);padding-block:28px}
.foot-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.foot-row p{font-size:12.5px}


/* ============ SCHEDA IMMOBILE (pagina interna) ============ */
.sp{position:fixed;inset:0;z-index:210;background:var(--bianco);overflow-y:auto;overscroll-behavior:contain;animation:apparsa .4s ease both}
.sp[hidden]{display:none!important}
.sp-intro{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:#FBFBFA;pointer-events:none}
.sp-intro img{width:min(46vw,420px);height:auto}
.sp-intro.va{animation:sipario 2.4s cubic-bezier(.33,0,.2,1) forwards}
.sp-dentro.va{animation:entra 1.1s 1.15s cubic-bezier(.22,.61,.36,1) both}
.sp-chiudi{position:fixed;top:clamp(12px,1.6vw,22px);right:clamp(12px,1.6vw,22px);z-index:9;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.96);color:var(--nero);font-size:25px;line-height:1;cursor:pointer;display:grid;place-items:center}
.sp-chiudi:hover{border-color:var(--nero)}
.sp-hero{position:relative;height:100vh;height:100svh;background:var(--chiaro);overflow:hidden;cursor:zoom-in}
.sp-hero img{width:100%;height:100%;object-fit:cover;display:block}
.sp-frecce{position:absolute;right:clamp(14px,2vw,34px);bottom:clamp(14px,2vw,30px);display:flex;gap:12px;z-index:3}
.sp-frecce button{width:52px;height:52px;border-radius:50%;border:0;background:rgba(17,17,17,.82);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center}
.sp-frecce button:hover{background:var(--nero)}
/* Un elemento nascosto resta nascosto anche se il suo stile dice
   come dovrebbe mostrarsi. */
[hidden]{display:none !important}
.sp-video{position:absolute;left:0;top:clamp(20px,4vw,48px);z-index:3;display:inline-flex;align-items:center;gap:10px;background:var(--nero);color:#fff;border:0;padding:13px 20px;font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.sp-video:hover{background:var(--bordeaux)}
.sp-video svg{width:13px;height:13px;fill:#fff}
.sp-conta{position:absolute;left:clamp(14px,2vw,34px);bottom:clamp(14px,2vw,30px);z-index:3;font-family:var(--data);font-size:11px;letter-spacing:.08em;color:#fff;background:rgba(17,17,17,.55);padding:6px 11px}
.sp-griglia{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:clamp(22px,3vw,40px);padding-block:clamp(20px,2.4vw,30px) clamp(24px,3vw,38px)}
@media (max-width:960px){ .sp-griglia{grid-template-columns:1fr} .sp-box{position:static} }
.sp-briciole{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--muted)}
.sp-briciole span+span::before{content:"\203a";margin-right:8px;color:var(--line-strong)}
.sp h1{font-family:var(--display);font-size:clamp(27px,3.6vw,42px);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin-top:10px}
.sp-sotto{font-size:15.5px;color:var(--ink-soft);margin-top:9px;max-width:62ch}
.sp-testo{margin-top:18px;color:var(--ink-soft);line-height:1.66;font-size:14.8px;background:var(--bianco);border:1px solid var(--line);border-left:3px solid var(--bordeaux);padding:16px 20px}
.sp-testo p+p{margin-top:10px}
.sp-dati{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sp-dato{display:flex;align-items:center;gap:11px}
.sp-dato svg{flex:none;width:21px;height:21px;stroke:var(--nero);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sp-dato-et{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sp-dato-n{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums;line-height:1.1}
.sp-box{border:1px solid var(--crema-bordo);padding:20px;align-self:start;position:sticky;top:24px;background:var(--crema)}
.sp-box-alto{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.sp-rif{font-family:var(--data);font-size:15px;font-weight:500;letter-spacing:.05em}
.cuore{width:42px;height:42px;border:1px solid var(--crema-bordo);border-radius:50%;background:var(--bianco);cursor:pointer;display:grid;place-items:center;flex:none}
.cuore svg{width:19px;height:19px;fill:none;stroke:var(--nero);stroke-width:1.5}
.cuore:hover{border-color:var(--bordeaux)}
.cuore.salvato svg{fill:var(--bordeaux);stroke:var(--bordeaux)}
.sp-voci{display:grid;gap:0;margin-top:12px}
.sp-voce{display:grid;gap:1px;padding-block:9px;border-top:1px solid var(--crema-bordo)}
.sp-voce dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sp-voce dd{margin:0;font-size:16px}
.sp-voce.grande dd{font-family:var(--display);font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.sp-azioni{display:grid;gap:8px;margin-top:14px}
.sp-azioni .btn{width:100%;font-size:14px;padding:11px 16px}
.btn-bordeaux{background:var(--bordeaux);color:#fff}
.btn-condividi{background:var(--bianco);color:var(--bordeaux);border:1px solid var(--bordeaux);gap:9px}
.btn-condividi:hover{background:var(--bordeaux);color:#fff}
.btn-condividi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.btn-bordeaux:hover{filter:brightness(1.1)}
.sp-sezione{padding-bottom:clamp(22px,2.6vw,34px)}
.sp-titoletto{font-family:var(--data);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:14px;display:flex;gap:10px}
.sp-titoletto span{color:var(--line-strong)}
.sp-mappa{border:1px solid var(--crema-bordo);background:var(--crema);display:grid;place-items:center;min-height:200px;padding:22px 20px}
.sp-mappa-dentro{text-align:center;display:grid;justify-items:center;gap:8px;max-width:52ch}
.sp-mappa-dentro>svg{width:30px;height:30px;stroke:var(--bordeaux);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sp-mappa-via{font-family:var(--display);font-size:21px}
.sp-mappa-coord{font-family:var(--data);font-size:12px;color:var(--muted)}
.sp-mappa .btn{margin-top:8px}
.sp-mappa-nota{font-size:12.5px;color:var(--muted);margin-top:4px}
.sp-miniature{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:12px;overflow-x:auto;scrollbar-width:none}
.sp-miniature::-webkit-scrollbar{display:none}
.sp-miniature button{position:relative;padding:0;border:1px solid var(--line);background:none;cursor:zoom-in;aspect-ratio:4/3;overflow:hidden}
.sp-miniature button::after{content:"Ingrandisci";position:absolute;left:0;right:0;bottom:0;background:rgba(17,17,17,.62);color:#fff;font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 0;opacity:0;transition:opacity .2s ease}
.sp-miniature button:hover::after{opacity:1}
.sp-miniature button[aria-current="true"]{border-color:var(--nero)}
.sp-miniature img{width:100%;height:100%;object-fit:cover;display:block}
.sp-contatti{background:var(--chiaro);border-top:1px solid var(--line);padding-block:clamp(30px,4vw,52px);text-align:center;margin-top:clamp(10px,2vw,20px)}
.sp-c-titolo{font-family:var(--display);font-size:clamp(26px,3.2vw,38px);font-weight:500;letter-spacing:.02em}
.sp-c-sotto{color:var(--ink-soft);font-size:15.5px;margin-top:8px}
.sp-c-rif{font-family:var(--data);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.sp-c-rif b{color:var(--nero)}
.sp-c-campi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;text-align:left}
.sp-c-campi .campo label{color:var(--muted)}
.sp-c-msg{grid-column:span 2;grid-row:span 2}
.sp-c-msg textarea{height:100%;min-height:106px;resize:vertical}
.sp-c-privacy{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin-top:18px;font-size:13.5px;color:var(--ink-soft);text-align:left;max-width:64ch;margin-inline:auto}
.sp-c-privacy input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--bordeaux)}
.sp-c-invio{margin-top:18px;display:grid;justify-items:center;gap:10px}
.sp-c-invio .btn{padding:13px 34px}
.sp-c-esito{font-size:12.5px;color:var(--muted);max-width:60ch}
@media (max-width:900px){ .sp-c-campi{grid-template-columns:repeat(2,1fr)} .sp-c-msg{grid-column:span 2;grid-row:auto} }
@media (max-width:560px){ .sp-c-campi{grid-template-columns:1fr} .sp-c-msg{grid-column:span 1} }
@media (max-width:700px){ .sp-hero{height:100svh} .sp-frecce button{width:44px;height:44px} }


/* ============ PAGINE LEGALI ============ */
.leg{position:fixed;inset:0;z-index:240;background:var(--bianco);overflow-y:auto;overscroll-behavior:contain;animation:apparsa .3s ease both}
.leg[hidden]{display:none!important}
.leg-testa{position:sticky;top:0;z-index:3;background:var(--bianco);border-bottom:1px solid var(--line)}
.leg-testa .wrap{display:flex;align-items:center;gap:18px;padding-block:16px}
.leg-marchio{height:38px;width:auto}
.leg-chiudi{margin-left:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:var(--bianco);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.leg-chiudi:hover{border-color:var(--nero)}
.leg-linguette{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.leg-linguette::-webkit-scrollbar{display:none}
.leg-linguette button{background:none;border:0;border-bottom:2px solid transparent;padding:14px 0;font-family:var(--body);font-size:13.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap}
.leg-linguette button:hover{color:var(--nero)}
.leg-linguette button[aria-selected="true"]{color:var(--nero);border-bottom-color:var(--bordeaux)}
.leg-corpo{padding-block:clamp(26px,3.2vw,42px) clamp(40px,5vw,72px);max-width:none}
@media (min-width:1000px){
  .leg-corpo{column-count:2;column-gap:clamp(40px,4vw,64px)}
  .leg-corpo>h2,.leg-corpo>.leg-agg,.leg-corpo>.leg-nota{column-span:all}
}
.leg-corpo h3{break-after:avoid;break-inside:avoid}
.leg-corpo p,.leg-corpo ul{break-inside:avoid}
.leg-corpo h2{max-width:22ch}
.leg-corpo h2{font-family:var(--display);font-size:clamp(26px,3.2vw,38px);font-weight:400;line-height:1.12}
.leg-corpo h3{font-family:var(--display);font-size:20px;font-weight:500;margin-top:26px}
.leg-corpo p,.leg-corpo li{color:var(--ink-soft);font-size:15px;line-height:1.72;margin-top:10px}
.leg-corpo ul{margin:0;padding-left:20px}
.leg-corpo li{margin-top:6px}
.leg-corpo b{color:var(--ink)}
.leg-agg{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.leg-nota{border:1px dashed var(--line-strong);border-left:3px solid var(--bordeaux);padding:14px 16px;margin-top:22px;font-size:13.5px;color:var(--muted);background:var(--crema)}
.leg-tab[hidden]{display:none}
.foot-legale{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.foot-legale button{background:none;border:0;padding:0;color:rgba(255,255,255,.72);font-family:var(--body);font-size:12.5px;cursor:pointer;text-decoration:underline}
.foot-legale button:hover{color:#fff}


/* ============ BLOG E NEWSLETTER ============ */
.blog-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.post{display:flex;flex-direction:column;background:var(--bianco);border:1px solid var(--line);cursor:pointer;transition:border-color .2s ease}
.post:hover{border-color:var(--line-strong)}
.post-foto{aspect-ratio:3/2;overflow:hidden;background:var(--chiaro)}
.post-foto img{width:100%;height:100%;object-fit:cover;display:block}
.post-testo{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.post-alto{display:flex;align-items:center;gap:10px;font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.post-cat{color:#fff;background:var(--bordeaux);padding:4px 8px}
.post-data{color:var(--muted);margin-left:auto}
.post-titolo{font-family:var(--display);font-size:21px;font-weight:400;line-height:1.2;margin-top:11px}
.post-estratto{font-size:14px;color:var(--muted);line-height:1.55;margin-top:9px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-leggi{margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:500;color:var(--nero)}
.post:hover .post-leggi{color:var(--bordeaux)}

.news{margin-top:clamp(30px,4vw,48px);background:var(--crema);border:1px solid var(--crema-bordo);padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:1fr 400px;gap:clamp(20px,3vw,40px);align-items:center}
@media (max-width:860px){ .news{grid-template-columns:1fr} }
.news h3{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);font-weight:400}
.news p{color:var(--ink-soft);font-size:14.5px;margin-top:8px;max-width:56ch}
.news-form{display:grid;gap:10px}
.news-riga{display:flex;gap:10px}
.news-riga input{flex:1;font-family:var(--body);font-size:14.5px;background:var(--bianco);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);padding:11px 12px;min-width:0}
.news-riga .btn{white-space:nowrap;padding:11px 20px}
.news-ok{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-soft)}
.news-ok input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--bordeaux)}
.news-esito{font-size:12.5px;color:var(--muted)}

/* lettura dell'articolo */
.art{position:fixed;inset:0;z-index:250;background:var(--bianco);overflow-y:auto;overscroll-behavior:contain;animation:apparsa .3s ease both}
.art[hidden]{display:none!important}
.art-testa{position:sticky;top:0;z-index:3;background:var(--bianco);border-bottom:1px solid var(--line)}
.art-testa .wrap{display:flex;align-items:center;gap:16px;padding-block:14px}
.art-marchio{height:36px;width:auto}
.art-chiudi{margin-left:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:var(--bianco);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.art-chiudi:hover{border-color:var(--nero)}
.art-foto{height:100vh;height:100svh;width:100%;overflow:hidden;background:var(--chiaro)}
.art-foto img{width:100%;height:100%;object-fit:cover;display:block}
.art-corpo{max-width:70ch;margin-inline:auto;padding-block:clamp(24px,3vw,40px) clamp(40px,5vw,70px)}
.art-corpo .post-alto{margin-bottom:14px}
.art-corpo h1{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);font-weight:400;line-height:1.1}
.art-corpo h2{font-family:var(--display);font-size:23px;font-weight:500;margin-top:30px}
.art-corpo p,.art-corpo li{font-size:16px;line-height:1.78;color:var(--ink-soft);margin-top:12px}
.art-corpo ul{margin:0;padding-left:20px}
.art-corpo b{color:var(--ink)}
.art-firma{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}


/* ============ PREFERITI E CONDIVISIONE ============ */
.cuore-scheda{position:absolute;right:10px;top:10px;z-index:5;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;box-shadow:0 1px 6px rgba(17,17,17,.18)}
.cuore-scheda svg{width:17px;height:17px;fill:none;stroke:var(--nero);stroke-width:1.6}
.cuore-scheda:hover{background:#fff}
.cuore-scheda.salvato svg{fill:var(--bordeaux);stroke:var(--bordeaux)}

.head-pref{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--ink-soft);padding:0}
.head-pref:hover{color:var(--bordeaux)}
.head-pref svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.head-pref b{font-family:var(--data);font-size:11.5px;background:var(--bordeaux);color:#fff;border-radius:100px;padding:1px 7px}
.head-pref[data-n="0"] b{display:none}

.fav{position:fixed;inset:0;z-index:255;background:rgba(17,17,17,.5);display:flex;justify-content:flex-end;animation:apparsa .25s ease both}
.fav[hidden]{display:none!important}
.fav-pannello{width:min(440px,100%);background:var(--bianco);height:100%;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px}
.fav-testa{display:flex;align-items:center;gap:12px}
.fav-testa h3{font-family:var(--display);font-size:24px;font-weight:400}
.fav-chiudi{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:none;font-size:22px;line-height:1;cursor:pointer}
.fav-chiudi:hover{border-color:var(--nero)}
.fav-lista{display:grid;gap:10px}
.fav-riga{display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);padding:8px}
.fav-riga img{width:86px;height:64px;object-fit:cover;display:block;cursor:pointer}
.fav-rif{font-family:var(--data);font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.fav-tit{font-family:var(--display);font-size:16px;line-height:1.2;margin-top:2px;cursor:pointer}
.fav-prezzo{font-size:13.5px;color:var(--ink-soft);margin-top:2px}
.fav-togli{width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;background:none;cursor:pointer;font-size:16px;line-height:1}
.fav-togli:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.fav-vuoto{color:var(--muted);font-size:14.5px;line-height:1.6}
.fav-azioni{display:grid;gap:9px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.fav-nota{font-size:12px;color:var(--muted)}

.condividi{border:1px solid var(--crema-bordo);background:var(--bianco);padding:12px;margin-top:10px;display:grid;gap:8px}
.condividi[hidden]{display:none}
.condividi input{font-family:var(--data);font-size:12px;padding:9px 10px;border:1px solid var(--line-strong);background:var(--chiaro);color:var(--ink);width:100%}
.condividi-riga{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.condividi .btn{padding:9px 12px;font-size:13px}
.condividi p{font-size:11.5px;color:var(--muted)}

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

/* ---------------- borsino immobiliare ---------------- */
.bo-sommario{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media (max-width:980px){ .bo-sommario{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .bo-sommario{grid-template-columns:1fr} }
.bo-cartella{background:var(--bianco);border:1px solid var(--line);border-top:3px solid var(--rosso);
  border-radius:var(--radius);padding:18px 18px 16px}
.bo-cartella .num{font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0}
.bo-valore{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.2vw,27px);
  color:var(--ink);margin:6px 0 4px;line-height:1.1;font-variant-numeric:tabular-nums}
.bo-sotto{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.45}

.bo-tabella{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--bianco)}
.bo-riga{display:grid;grid-template-columns:1fr 118px 150px 116px;gap:14px;align-items:center;
  padding:11px 16px;border-top:1px solid var(--line);width:100%;text-align:left;
  font:inherit;background:none;border-left:0;border-right:0;border-bottom:0}
.bo-capo{border-top:0;background:var(--chiaro);font-family:var(--data);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bo-voce{cursor:pointer;transition:background .12s}
.bo-voce:hover{background:var(--chiaro)}
.bo-voce.aperta{background:var(--rosso-tenue,rgba(200,16,46,.07))}
.bo-nome{font-size:15px;color:var(--ink)}
.bo-nome em{font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rosso);font-style:normal;margin-left:6px}
.bo-n{font-family:var(--data);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink-soft);text-align:right}
.bo-barra-col{display:block;height:8px;background:var(--chiaro);border-radius:100px;overflow:hidden}
.bo-barra-col i{display:block;height:100%;background:var(--rosso);border-radius:100px}
@media (max-width:760px){
  .bo-riga{grid-template-columns:1fr 78px 82px;gap:10px;padding:10px 12px}
  .bo-barra-col{display:none}
}

.bo-scheda{margin-top:18px;background:var(--bianco);border:1px solid var(--line-strong);
  border-left:4px solid var(--rosso);border-radius:var(--radius);padding:clamp(20px,2.6vw,30px)}
.bo-scheda[hidden]{display:none}
.bo-scheda-capo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.bo-scheda-capo h3{font-family:var(--display);font-weight:600;font-size:23px;margin:0;color:var(--ink);
  min-width:0;overflow-wrap:break-word}
.bo-scheda-capo{min-width:0}
.bo-chiudi{background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.bo-chiudi:hover{color:var(--rosso)}
/* Quadro sintetico del comune: due colonne di righe etichetta/valore. */
.bo-dati{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:clamp(26px,3.4vw,40px)}
@media (max-width:760px){ .bo-dati{grid-template-columns:1fr} }
.bo-dato{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;
  background:var(--bianco);border:1px solid var(--line);border-radius:8px;padding:11px 14px}
.bo-dato-eti{display:flex;align-items:center;gap:9px;min-width:0;font-size:14.5px;color:var(--ink-soft)}
.bo-dato-eti>span{min-width:0;overflow-wrap:break-word}
.bo-dato-eti svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--rosso);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.bo-dato-eti svg path[d^="M10 3a7"]{fill:var(--rosso);stroke:none;opacity:.7}
.bo-dato-val{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;justify-content:flex-end;text-align:right;min-width:0}
.bo-dato-val b{font-family:var(--data);font-weight:600;font-size:15px;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.bo-dato-val i{font-style:normal;font-size:12px;color:var(--muted)}
@media (max-width:420px){
  .bo-dato{flex-direction:column;align-items:flex-start;gap:6px}
  .bo-dato-val{justify-content:flex-start;text-align:left}
}

.bo-scheda-due{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(22px,3vw,42px)}
@media (max-width:760px){ .bo-scheda-due{grid-template-columns:1fr} }
.bo-scheda-due .num{font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rosso);margin:0 0 12px}
.bo-fascia{display:grid;grid-template-columns:104px 1fr 54px;gap:12px;align-items:center;margin-bottom:9px;font-size:13.5px}
.bo-fascia b{font-family:var(--data);font-variant-numeric:tabular-nums;text-align:right;font-weight:500}
.bo-altro-voce{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.bo-altro-voce b{font-family:var(--data);font-variant-numeric:tabular-nums;font-weight:500}
.bo-niente,.bo-omi{font-size:13.5px;color:var(--ink-soft);margin:12px 0 0;line-height:1.55}
.bo-omi a{color:var(--rosso);font-weight:600;text-decoration:none}
.bo-altri{display:block;width:100%;padding:14px;border:0;border-top:1px solid var(--line);
  background:var(--chiaro);font:inherit;font-size:14px;font-weight:600;color:var(--rosso);cursor:pointer}
.bo-altri:hover{background:var(--rosso);color:#fff}

/* L'andamento fra due anni: verde se sale, rosso se scende, neutro se fermo.
   Il rosso e' quello del marchio, non un rosso da semaforo. */
.bo-verso{font-variant-numeric:tabular-nums}
.bo-verso.su{color:#1d7a4c}
.bo-verso.giu{color:var(--rosso)}

/* --- I tre anni in barre -------------------------------------------------
   Una serie sola, quindi un colore solo: gli anni passati in tinta tenue,
   l'anno corrente pieno. Nessuna legenda, perché non c'è niente da
   distinguere; il numero sta scritto accanto a ogni barra, così il dato si
   legge senza passarci sopra col dito. */
.bo-anni-tit{margin:26px 0 12px}
.bo-anni{display:flex;flex-direction:column;gap:9px;max-width:560px}
.bo-anno{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:12px}
.bo-anno .bo-anno-eti{font-family:var(--data);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.bo-anno .bo-barra-col{height:12px;background:var(--line);border-radius:3px;overflow:hidden}
.bo-anno .bo-barra-col i{display:block;height:100%;background:var(--rosso);opacity:.32;
  border-radius:3px;transition:width .3s}
.bo-anno.ora .bo-barra-col i{opacity:1}
.bo-anno.ora .bo-anno-eti{color:var(--ink);font-weight:600}
.bo-anno b{font-family:var(--data);font-size:13.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.bo-anno em{font-style:normal;font-size:11.5px;min-width:56px;text-align:right}
#bo-anni-prov .bo-anni{max-width:640px}
@media (max-width:520px){
  .bo-anno{grid-template-columns:38px 1fr auto;gap:9px}
  .bo-anno em{grid-column:2 / -1;text-align:left;min-width:0}
}

/* Nella riga di andamento il valore assoluto sta accanto alla percentuale,
   come nella scaletta di riferimento: prima quanto è cambiato, poi quanto è. */
.bo-unita{font-family:var(--data);font-size:12.5px;color:var(--rosso);white-space:nowrap}
.bo-dato-val b{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ============ CALCOLATORE MUTUO ============ */
.mu-tela{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:clamp(26px,3.6vw,56px);
  align-items:start;margin-top:clamp(30px,3.6vw,46px)}
@media (max-width:900px){ .mu-tela{grid-template-columns:1fr} }

.mu-modulo{display:flex;flex-direction:column;gap:14px;background:var(--bianco);
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);
  position:sticky;top:18px}
@media (max-width:900px){ .mu-modulo{position:static} }
.mu-campo{display:flex;flex-direction:column;gap:6px}
.mu-campo>span:first-child{font-size:13px;color:var(--ink-soft);display:flex;
  justify-content:space-between;align-items:baseline;gap:10px}
.mu-campo em{font-style:normal;font-family:var(--data);font-size:12px;color:var(--rosso)}
.mu-input{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);
  border-radius:7px;background:#fff;padding:0 12px;transition:border-color .15s}
.mu-input:focus-within{border-color:var(--rosso)}
.mu-input i{font-style:normal;font-family:var(--data);font-size:13px;color:var(--muted)}
.mu-input input,.mu-input select{border:0;background:none;width:100%;padding:11px 0;
  font-family:var(--data);font-size:15px;color:var(--ink);outline:none;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.mu-input input::-webkit-outer-spin-button,.mu-input input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.mu-sel{padding-right:6px}
.mu-sel select{cursor:pointer}
.mu-flag{flex-direction:row;align-items:center;gap:10px}
.mu-flag input{width:17px;height:17px;accent-color:var(--rosso);flex:0 0 auto}
.mu-flag>span{font-size:13px;color:var(--ink-soft)}

.mu-esito-riga{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-top:1px solid var(--line)}
.mu-esito-riga span{font-size:13px;color:var(--ink-soft)}
.mu-esito-riga b{font-family:var(--data);font-size:15.5px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.mu-sigla{font-family:var(--data);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.mu-nota{font-size:12px;color:var(--muted);line-height:1.5;margin:0}
.mu-attenzione{color:var(--rosso)}

.mu-tipi{margin:4px 0 2px}
.mu-indice{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;background:var(--crema);
  border-radius:7px;padding:9px 13px}
.mu-indice-eti{font-size:12.5px;color:var(--ink-soft)}
.mu-indice b{font-family:var(--data);font-size:14px;color:var(--rosso);
  font-variant-numeric:tabular-nums}
.mu-indice-data{font-size:11.5px;color:var(--muted);margin-left:auto}

.mu-spese{border-top:1px solid var(--line);padding-top:12px}
.mu-spese summary{cursor:pointer;font-size:13px;color:var(--ink-soft);padding:4px 0}
.mu-spese summary:hover{color:var(--rosso)}
.mu-spese[open] summary{color:var(--ink);margin-bottom:10px}
.mu-spese .mu-campo{margin-top:10px}

.mu-rata{border:1px solid var(--line);border-left:3px solid var(--rosso);
  border-radius:var(--radius);padding:clamp(20px,2.4vw,28px);background:var(--bianco)}
.mu-rata-num{font-family:var(--data);font-size:clamp(34px,4.6vw,52px);font-weight:600;
  color:var(--ink);margin:8px 0 4px;font-variant-numeric:tabular-nums;line-height:1}
.mu-rata-sotto{font-size:13px;color:var(--muted);margin:0}
.mu-dati{margin-top:20px}

.mu-peso{display:flex;align-items:flex-start;gap:16px;border-radius:var(--radius);
  padding:16px 18px;margin-top:6px;border:1px solid var(--line);background:var(--bianco)}
.mu-peso b{font-family:var(--data);font-size:26px;line-height:1;font-variant-numeric:tabular-nums;
  flex:0 0 auto}
.mu-peso span{font-size:13px;color:var(--ink-soft);line-height:1.55}
.mu-peso.ok{border-left:3px solid #1d7a4c} .mu-peso.ok b{color:#1d7a4c}
.mu-peso.forse{border-left:3px solid #b8860b} .mu-peso.forse b{color:#8a6508}
.mu-peso.no{border-left:3px solid var(--rosso)} .mu-peso.no b{color:var(--rosso)}

/* Il grafico: una barra per anno, due segmenti — capitale sotto, interessi
   sopra. Una scala sola. Due colori soli, perché due sono le cose. */
.mu-legenda{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;
  color:var(--muted);margin:0 0 12px}
.mu-chiave{width:11px;height:11px;border-radius:3px;display:inline-block}
.mu-chiave+.mu-chiave{margin-left:14px}
.mu-chiave.cap{background:var(--rosso)}
.mu-chiave.int{background:var(--rosso);opacity:.3}
.mu-barre{display:flex;align-items:flex-end;gap:2px;height:180px;overflow-x:auto;padding-bottom:2px}
.mu-barra{flex:1 1 0;min-width:9px;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;gap:5px}
.mu-pila{display:flex;flex-direction:column-reverse;justify-content:flex-start;height:100%;
  border-radius:3px 3px 0 0;overflow:hidden}
.mu-pila i{display:block;width:100%;background:var(--rosso)}
.mu-pila i.int{opacity:.3;margin-bottom:1px}
.mu-barra em{font-style:normal;font-family:var(--data);font-size:9.5px;color:var(--muted);
  text-align:center;min-height:12px}

.mu-piano{display:flex;flex-direction:column}
.mu-riga{display:grid;grid-template-columns:60px 1fr 1fr 1fr;gap:12px;align-items:center;
  padding:10px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.mu-riga span{font-family:var(--data);font-variant-numeric:tabular-nums;color:var(--ink)}
.mu-riga .bo-n{text-align:right}
.mu-capo{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom-width:2px}
.mu-capo span{color:var(--muted);font-weight:500}
@media (max-width:560px){
  .mu-riga{grid-template-columns:38px 1fr 1fr 1fr;gap:7px;font-size:12px}
}

.mu-avviso{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:26px;
  padding-top:18px;border-top:1px solid var(--line);max-width:70ch}

.mu-aiuto{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:center}
@media (max-width:820px){ .mu-aiuto{grid-template-columns:1fr} }
.mu-aiuto h3{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);margin:0 0 12px}
.mu-aiuto p{margin:0 0 12px;color:var(--ink-soft)}
.mu-aiuto-tasti{display:flex;flex-direction:column;gap:11px}
.mu-indice-fonte{flex:1 1 100%;font-size:11px;color:var(--muted);line-height:1.4}

/* ===================================================================
   LEGGIBILITA SUL TELEFONO
   Il sito era stato disegnato guardando lo schermo grande, e sul
   telefono i testi scendevano fino a 9,5px: illeggibili. Qui ogni
   misura sotto i 14px viene rialzata, con un pavimento a 12,5px per
   le etichette e intorno ai 16px per quello che si legge davvero.
   =================================================================== */
@media (max-width:760px){
  .contratto,
  .ev,
  .hc-et,
  .misura-et,
  .post-alto,
  .scheda--piccola .contratto{font-size:12.5px}
  .bo-capo,
  .bo-cartella .num,
  .bo-scheda-due .num,
  .campo label,
  .contatore,
  .fav-rif,
  .mu-capo,
  .mu-sigla,
  .sp-titoletto{font-size:12.8px}
  .carta .num,
  .col .num,
  .ev-passo,
  .eyebrow,
  .lb-num,
  .leg-agg,
  .locandina-invito .num,
  .mu-indice-fonte,
  .pag-info,
  .pop-tit,
  .portali-et,
  .profilo .num,
  .recapito dt,
  .sotto-head h3,
  .sp-conta,
  .sp-dato-et,
  .sp-voce dt,
  .visure-titoletto{font-size:13.4px}
  .bo-anno em,
  .comune b,
  .condividi p,
  .head-nav .head-cta,
  .head-pref b,
  .mu-indice-data,
  .post-durata,
  .sp-c-rif,
  .visura .tempi{font-size:14px}
  .bo-anno .bo-anno-eti,
  .bo-dato-val i,
  .carta .freccia,
  .condividi input,
  .conteggio,
  .fav-nota,
  .locandina-invito span,
  .mu-campo em,
  .mu-legenda,
  .mu-nota,
  .mu-riga,
  .sp-mappa-coord,
  .visure-scelto{font-size:14.6px}
  .bo-unita,
  .foot-legale button,
  .foot-row p,
  .mu-avviso,
  .mu-indice-eti,
  .news-esito,
  .news-ok,
  .note,
  .pop-im span,
  .privacy,
  .sp-briciole,
  .sp-c-esito,
  .sp-mappa-nota,
  .tipo-tasto b{font-size:15.2px}
  .avviso,
  .azzera,
  .bo-sotto,
  .btn-fascia,
  .condividi .btn,
  .esito .centrale,
  .galleria .extra .apri,
  .galleria .extra .meta,
  .head-cta,
  .mappa-nota,
  .mu-campo>span:first-child,
  .mu-esito-riga span,
  .mu-flag>span,
  .mu-input i,
  .mu-peso span,
  .mu-rata-sotto,
  .mu-spese summary,
  .occhiello .rif,
  .visura .prezzo small,
  .visure-avvertenza{font-size:15.9px}
  .apri,
  .art-firma,
  .bo-anno b,
  .bo-fascia,
  .bo-niente,.bo-omi,
  .fav-prezzo,
  .galleria .extra .estratto,
  .head-pref,
  .leg-linguette button,
  .leg-nota,
  .link-avanzata,
  .meta .luogo,
  .mu-riga,
  .pop-im b,
  .post-leggi,
  .riga,
  .sp-c-privacy,
  .sp-video,
  .torna,
  .visure-spunta,
  .visure-totale small{font-size:16.5px}

  /* Il corpo del testo e i suoi discendenti diretti. */
  body{font-size:17px;line-height:1.65}
  .lede{font-size:17.5px;line-height:1.6}
  main li{font-size:16.5px}

  /* Meno di 16px in un campo e iPhone ingrandisce la pagina da solo
     quando ci si scrive dentro, e poi resta ingrandita. */
  input,select,textarea,.mu-input input,.mu-input select{font-size:16px}

  /* La testata mangiava 248px di schermo su 844: un terzo. Il logo si
     stringe e l'email sparisce — sta nel piede e nella pagina contatti,
     mentre il telefono resta perche' da telefono si tocca e si chiama. */
  .head-top{padding-block:9px;gap:12px}
  .logo-lungo{height:48px}
  .head-contatti .hc+.hc{display:none}

  /* Il menu aveva un minimo di 11,5px: sotto la soglia di leggibilita'. */
  .nav a{font-size:13px;padding-block:11px}
  .head-nav .wrap>span{padding-bottom:10px}

  /* L'apertura era alta 271px su uno schermo da 844: una striscia. Ora
     e' una foto vera, e il titolo ci sta dentro senza essere schiacciato
     dalla testata che gli sta sopra. */
  .hero{padding-block:clamp(96px,26vw,150px) clamp(96px,26vw,150px);min-height:64svh;
    display:flex;flex-direction:column;justify-content:center}
}

/* ===================================================================
   IL MENU SUL TELEFONO
   Nove voci leggibili non stanno su uno schermo da 390px: andavano a tre
   righe, e con la testata appiccicata in cima si mangiavano un terzo
   dello schermo per tutta la durata della navigazione. Qui le voci si
   chiudono dietro un tasto, e in cima resta una barra bassa.
   =================================================================== */
.menu-tasto{display:none}
@media (max-width:760px){
  .menu-tasto{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
    cursor:pointer;padding:13px 2px;font-family:var(--data);font-size:12.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:500}
  .menu-righe{display:flex;flex-direction:column;gap:4px;width:19px}
  .menu-righe i{display:block;height:2px;background:var(--rosso);border-radius:2px;
    transition:transform .2s,opacity .15s}
  .menu-tasto[aria-expanded="true"] .menu-righe i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-tasto[aria-expanded="true"] .menu-righe i:nth-child(2){opacity:0}
  .menu-tasto[aria-expanded="true"] .menu-righe i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .head-nav .wrap{flex-wrap:wrap;gap:0;justify-content:space-between}
  .head-nav .nav{flex:1 1 100%;display:none;flex-direction:column;gap:0;
    border-top:1px solid var(--line);padding-block:6px 14px}
  .head-nav .nav.aperto{display:flex}
  .head-nav .nav a{font-size:16px;letter-spacing:.02em;text-transform:none;
    padding-block:13px;border-bottom:1px solid var(--line);border-left:2px solid transparent}
  .head-nav .nav a:last-child{border-bottom:0}
  .head-nav .nav a.qui{border-bottom-color:var(--line);border-left-color:var(--rosso);
    padding-left:11px}
  .head-nav .wrap>span{flex:0 0 auto;padding-bottom:0;gap:10px}
  .head-pref{font-size:12.5px}
}

/* ============ CONSENSO AI COOKIE ============ */
.ck-barra{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--bianco);
  border-top:2px solid var(--rosso);box-shadow:0 -6px 28px rgba(0,0,0,.14);
  animation:ck-sale .22s ease-out}
@keyframes ck-sale{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .ck-barra{animation:none} }
.ck-dentro{width:100%;max-width:1180px;margin-inline:auto;
  padding:clamp(18px,2.4vw,26px) clamp(16px,4vw,44px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,44px);align-items:center}
@media (max-width:860px){ .ck-dentro{grid-template-columns:1fr;gap:18px} }
.ck-testo h2{font-family:var(--display);font-size:clamp(19px,2vw,23px);font-weight:600;
  margin:0 0 8px;color:var(--ink)}
.ck-testo>p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 14px;max-width:72ch}
.ck-voce{display:flex;align-items:flex-start;gap:10px;margin-top:9px;font-size:13.5px;
  color:var(--ink-soft);line-height:1.5;max-width:72ch}
.ck-voce input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--rosso)}
.ck-voce b{color:var(--ink)}
.ck-fisso{opacity:.78}
.ck-tasti{display:flex;flex-direction:column;gap:10px;min-width:210px}
@media (max-width:860px){
  .ck-tasti{flex-direction:row;flex-wrap:wrap;min-width:0}
  .ck-tasti>*{flex:1 1 auto;text-align:center}
  .ck-barra{max-height:82svh;overflow-y:auto}
}
@media (max-width:420px){ .ck-tasti{flex-direction:column} }

/* Il riquadro che prende il posto della mappa finche' non la si accetta:
   deve servire comunque a qualcosa, e allora ci sta scritto l'indirizzo. */
.ck-invito{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  justify-content:center;height:100%;padding:clamp(20px,3vw,32px);
  background:var(--crema);border:1px dashed var(--line-strong);border-radius:var(--radius)}
.ck-invito p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}
.ck-invito .ck-indirizzo{font-family:var(--data);font-size:15px;color:var(--ink)}
.mappa-ufficio iframe[hidden]{display:none}

@media (max-width:760px){
  /* «capoluogo» accanto al nome del comune: e' una parola da leggere,
     non un'etichetta d'asse, e a 10px non si leggeva. */
  .bo-nome em{font-size:12px}
  /* L'attribuzione di OpenStreetMap: minuscola per scelta di Leaflet. */
  .leaflet-container .leaflet-control-attribution{font-size:12px}
}

/* La cornice della foto: i cartellini «N foto» e «In primo piano» e il
   cuore si posizionano rispetto alla fotografia, non rispetto a tutta la
   galleria. Su schermo grande non cambia niente, perche' il pannello dei
   dati scorre sopra la foto; sul telefono, dove il pannello sta sotto, e'
   quello che evita che i cartellini finiscano sui metri quadri. */
.foto-cornice{position:relative;display:block;overflow:hidden;height:100%}
@media (hover:none){ .foto-cornice{height:auto} }

/* ============ AREA RISERVATA — I CONTRATTI ============ */
.ar-contratti{display:flex;flex-direction:column;gap:10px;margin-top:clamp(24px,3vw,36px);
  max-width:760px}
.ar-contratto{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit;
  background:var(--bianco);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 18px;transition:border-color .15s,transform .15s}
.ar-contratto:hover{border-color:var(--rosso);transform:translateY(-1px)}
.ar-tipo{flex:0 0 auto;font-family:var(--data);font-size:10.5px;letter-spacing:.1em;
  color:#fff;background:var(--rosso);border-radius:3px;padding:5px 8px}
.ar-testo{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.ar-testo b{font-size:15.5px;font-weight:600;overflow-wrap:break-word}
.ar-testo span{font-size:13.5px;color:var(--muted);line-height:1.45}
.ar-data{flex:0 0 auto;font-family:var(--data);font-size:12px;color:var(--muted);white-space:nowrap}
.ar-giu{flex:0 0 auto;font-size:19px;color:var(--rosso)}
@media (max-width:620px){
  .ar-contratto{flex-wrap:wrap;gap:10px}
  .ar-testo{flex:1 1 100%;order:3}
  .ar-data{margin-left:auto}
}
#ar-dentro .sez-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap}

/* ============ DUE TASTI CHE AVEVO USATO SENZA DEFINIRLI ============
   «btn-pieno» e «btn-vuoto» comparivano in otto punti — il calcolatore
   mutuo, la barra dei cookie, l'uscita dall'area riservata — ma nel foglio
   di stile non c'erano. I <button> se la cavavano col vestito di serie del
   browser; i <a> no, e venivano fuori come testo sottolineato. Riprendono
   la forma dei tasti che il sito ha gia'. */
.btn-pieno,.btn-vuoto{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.02em;
  padding:11px 20px;border-radius:var(--radius);text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .15s;
  white-space:nowrap}
.btn-pieno{background:var(--rosso);color:#fff}
.btn-pieno:hover{background:var(--rosso-scuro);transform:translateY(-1px)}
.btn-vuoto{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-vuoto:hover{border-color:var(--rosso);color:var(--rosso)}
.btn-pieno:focus-visible,.btn-vuoto:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}

/* L'uscita dall'area riservata: accanto al titolo, non persa al margine. */
#ar-dentro .sez-head{align-items:center}
#ar-dentro .sez-head .btn-vuoto{font-size:13px;padding:8px 16px}
@media (max-width:560px){
  #ar-dentro .sez-head{align-items:flex-start;flex-direction:column;gap:14px}
}

/* La testata resta appiccicata in cima: qualunque salto dentro la pagina —
   un'ancora, un ritorno in cima, il browser che ripristina la posizione —
   deve lasciarle lo spazio, altrimenti il titolo finisce sotto la barra. */
html{scroll-padding-top:calc(var(--testata, 160px) + 12px)}
@media (max-width:760px){ html{scroll-padding-top:156px} }
.sez{scroll-margin-top:12px}

/* La planimetria nella scheda dell'immobile: c'e' solo se e' stata
   caricata, e sta dentro la scheda singola — non nella griglia pubblica. */
.sp-plan{margin-top:16px}
.sp-plan[hidden]{display:none}

/* «Il locale» nella scheda di una cessione d'azienda: una frase, quindi
   una riga sua a tutta larghezza, non una cella in mezzo ai numeri. */
.sp-locale{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sp-locale[hidden]{display:none}
.sp-locale .num{margin-bottom:6px}
.sp-locale p:last-child{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0}