@import url("../font/font.css");

/* ═══════════════════════════════════════════════════════════════════
   CONTESTABILE IMMOBILIARE — v6 «IL VANVITELLI», in chiaro
   Il sito sta su carta. Il buio resta solo dove serve: sotto
   l'apertura, nella fascia della Reggia, nel piede e nel lightbox.
   Ogni colore qui sotto è misurato: il testo sta a 17:1.
   Si animano solo transform e opacity. Nessuna libreria.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --carta:#F7F5F0;
  --carta-2:#EBE6DC;
  --bianco:#FFFFFF;
  --inchiostro:#14120E;
  --testo-2:#55524A;
  --notte:#101511;
  --notte-2:#0A0F0C;

  --verde:#00701F;          /* il verde del logo, scurito per la carta */
  --verde-viv:#00A83E;      /* quello del logo, per i fondi scuri */
  --pietra:#7A5E33;         /* la pietra dell'acquedotto, scurita */
  --pietra-viv:#C9A87A;
  --arancio:#FF5A1F;
  --arancio-t:#1A0A03;      /* testo sull'arancione: 6,19:1 */

  --linea:rgba(20,18,14,.13);
  --linea-2:rgba(20,18,14,.26);

  --gutter:clamp(1.15rem,4.5vw,4.5rem);
  --max:1480px;
  --r:20px;
  --r-s:12px;

  --display:"Newsreader",Georgia,serif;
  --testo:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-xs:.74rem; --t-s:.88rem; --t-b:1.06rem;
  --t-m:clamp(1.1rem,1.3vw,1.32rem);
  --t-xl:clamp(2.3rem,6vw,4.6rem);
  --t-2xl:clamp(2.6rem,7vw,6.2rem);

  --e:cubic-bezier(.22,.61,.36,1);
  --sez:clamp(4rem,8vw,7.5rem);
}

*,*::before,*::after{box-sizing:border-box}

/* la grana della carta: sta sopra tutto e non intercetta il puntatore.
   Su fondo chiaro e' quello che separa "pulito" da "finito". */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--testo);font-size:var(--t-b);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--verde);outline-offset:4px;border-radius:3px}
::selection{background:var(--arancio);color:#fff}

h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.02;
  letter-spacing:-.022em;margin:0}
.tit{font-size:var(--t-xl)}
.tit--xl{font-size:var(--t-2xl);line-height:.98;letter-spacing:-.032em}
.tit--c{text-align:center}
p{margin:0 0 1.05rem}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.salta{position:absolute;left:-9999px;top:0;z-index:100;background:var(--verde);
  color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:600}
.salta:focus{left:0}

/* ── TESTATA ─────────────────────────────────────────────────────── */
.testa{position:fixed;inset:0 0 auto;z-index:60;transition:.5s var(--e);
  transition-property:background-color,backdrop-filter,border-color,transform,box-shadow;
  border-bottom:1px solid transparent}
/* in cima sta sopra al video: al marchio serve un velo scuro */
.testa::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(10,15,12,.7),transparent);
  transition:opacity .5s var(--e)}
.testa.giu::before{opacity:0}
.testa__in{max-width:var(--max);margin-inline:auto;padding:1rem var(--gutter);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem)}
.testa.giu{background:rgba(247,245,240,.92);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--linea);box-shadow:0 2px 24px -18px rgba(20,18,14,.5)}
.testa.via{transform:translateY(-102%)}
.marchio{flex:none;display:block}
.marchio img{height:38px;width:auto}
@media (min-width:760px){.marchio img{height:46px}}

.nav{display:none;margin-left:auto;gap:clamp(1rem,2.4vw,2.4rem);font-size:var(--t-s)}
@media (min-width:1080px){.nav{display:flex}}
.nav a{position:relative;padding:.35rem 0;color:rgba(247,245,240,.88);
  transition:color .35s var(--e);display:flex;align-items:baseline;gap:.45rem}
.nav a i{font-style:normal;font-size:.66rem;letter-spacing:.1em;
  color:var(--pietra-viv);transition:color .35s var(--e)}
.testa.giu .nav a{color:var(--testo-2)}
.testa.giu .nav a i{color:var(--pietra)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e)}
.nav a:hover{color:#fff}
.testa.giu .nav a:hover{color:var(--inchiostro)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.testa .testa__cta{display:none;margin-left:auto}
@media (min-width:1080px){.testa .testa__cta{display:inline-flex;margin-left:0}}

.ham{margin-left:auto;width:46px;height:46px;border:1px solid rgba(247,245,240,.45);
  border-radius:50%;background:transparent;display:grid;place-content:center;gap:5px;
  cursor:pointer;transition:border-color .35s var(--e)}
@media (min-width:1080px){.ham{display:none}}
.ham i{display:block;width:17px;height:1.5px;background:#fff;
  transition:transform .4s var(--e),background-color .35s var(--e)}
.testa.giu .ham{border-color:var(--linea-2)}
.testa.giu .ham i{background:var(--inchiostro)}
.ham[aria-expanded=true] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.ham[aria-expanded=true] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;background:var(--carta);
  display:grid;align-content:center;padding:6rem var(--gutter) 3rem;
  animation:menuIn .45s var(--e)}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.menu nav{display:grid;gap:.1rem}
.menu nav a{font-family:var(--display);font-size:clamp(1.9rem,7vw,3.4rem);
  padding:.35rem 0;display:flex;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--linea);transition:color .35s var(--e),padding-left .4s var(--e)}
.menu nav a i{font-style:normal;font-family:var(--testo);font-size:.7rem;
  letter-spacing:.12em;color:var(--pietra)}
.menu nav a:hover{color:var(--verde);padding-left:.6rem}
.menu__c{margin:2rem 0 0;font-size:var(--t-m);color:var(--testo-2)}

/* ── PULSANTI ────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:.92rem 1.7rem;border-radius:999px;font-size:var(--t-s);font-weight:600;
  letter-spacing:.015em;overflow:hidden;isolation:isolate;cursor:pointer;border:0;
  transition:transform .45s var(--e),color .35s var(--e),box-shadow .45s var(--e);
  will-change:transform}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit}
.btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  transform:scale(0);transition:transform .5s var(--e)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}

.btn--az{color:var(--arancio-t);box-shadow:0 12px 30px -14px rgba(255,90,31,.75)}
.btn--az::before{background:var(--arancio)}
.btn--az::after{background:#FFD9C6}
.btn--az:hover{color:var(--arancio-t);box-shadow:0 18px 40px -16px rgba(255,90,31,.9)}
.btn--az:hover::after{transform:scale(1)}

.btn--gh{color:var(--inchiostro);box-shadow:inset 0 0 0 1px var(--linea-2)}
.btn--gh::after{background:var(--inchiostro)}
.btn--gh:hover{color:var(--carta)}
.btn--gh:hover::after{transform:scale(1)}
/* sopra il video il fantasma è chiaro */
.apre .btn--gh{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.apre .btn--gh::after{background:#fff}
.apre .btn--gh:hover{color:var(--inchiostro)}

.btn--wa{color:#fff;box-shadow:0 12px 30px -16px rgba(0,112,31,.7)}
.btn--wa::before{background:var(--verde)}
.btn--wa::after{background:#004E14}
.btn--wa:hover{color:#fff}
.btn--wa:hover::after{transform:scale(1)}

.azioni{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem;margin-top:1.7rem}

/* ── L'OCCHIELLO NUMERATO ────────────────────────────────────────── */
.occ{display:block;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pietra);margin-bottom:1.6rem}
/* il numero come folio di rivista: grande, in pietra, sopra l'etichetta */
.occ__n{display:block;font-family:var(--display);font-size:clamp(2rem,4vw,3.1rem);
  font-weight:500;line-height:.9;letter-spacing:-.02em;color:var(--pietra);
  opacity:.45;margin-bottom:.55rem;font-variant-numeric:tabular-nums}
.occ__l{display:block;width:clamp(28px,5vw,64px);height:2px;background:var(--pietra);
  margin-bottom:.7rem;transform-origin:left;transform:scaleX(0);
  transition:transform .9s var(--e) .1s}
.rv.in .occ__l,.in .occ__l{transform:scaleX(1)}
.occ--apre{color:var(--pietra-viv)}
.occ--apre .occ__l{background:var(--pietra-viv)}
.pronto .occ--apre .occ__l{transform:scaleX(1)}

/* ── L'APERTURA COL VIDEO ────────────────────────────────────────── */
.apre{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:7rem 0 1.6rem;overflow:hidden;isolation:isolate;
  background:var(--notte-2);color:#fff}
.apre__v{position:absolute;inset:0;z-index:0;overflow:hidden}
.apre__video{width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.06 + var(--sc,0) * .12)) translateY(calc(var(--sc,0) * 4vh));
  filter:saturate(.92) contrast(1.04)}
.apre__velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,var(--notte-2) 1%,rgba(10,15,12,.78) 24%,rgba(10,15,12,.34) 56%,rgba(10,15,12,.5) 100%),
    linear-gradient(100deg,rgba(10,15,12,.88) 0%,rgba(10,15,12,.58) 38%,rgba(10,15,12,.1) 72%,transparent 100%)}
.apre__in{position:relative;z-index:2;max-width:var(--max);width:100%;
  margin-inline:auto;padding-inline:var(--gutter)}
.apre h1{max-width:14ch;margin-bottom:1.25rem;color:#fff}
.ln{display:block;overflow:hidden;padding-bottom:.055em}
.ln>span{display:block;transform:translateY(106%);transition:transform 1.1s var(--e)}
.pronto .ln>span{transform:none}
.ln:nth-child(2)>span{transition-delay:.1s}
.ln:nth-child(3)>span{transition-delay:.2s}
.tit--xl .ln:nth-child(2)>span{color:var(--pietra-viv)}
.apre__d{font-size:var(--t-m);color:rgba(247,245,240,.92);max-width:42ch;
  opacity:0;transform:translateY(16px);transition:.95s var(--e) .42s}
.pronto .apre__d{opacity:1;transform:none}
.apre .azioni{opacity:0;transform:translateY(16px);transition:.95s var(--e) .54s}
.pronto .apre .azioni{opacity:1;transform:none}
@media (max-width:620px){.apre .azioni{gap:.6rem}.apre .azioni .btn{flex:1 1 100%}}

.cifre{position:relative;z-index:2;max-width:var(--max);width:100%;
  margin:clamp(1.8rem,4vw,3.2rem) auto 0;padding-inline:var(--gutter);
  display:flex;flex-wrap:wrap;gap:clamp(1.6rem,5vw,5rem);
  opacity:0;transform:translateY(16px);transition:.95s var(--e) .66s}
.pronto .cifre{opacity:1;transform:none}
.cifre div{position:relative;padding-top:1rem;border-top:1px solid rgba(255,255,255,.3)}
.cifre dt{font-family:var(--display);font-size:clamp(2.2rem,5.4vw,3.6rem);font-weight:600;
  line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.cifre dd{margin:.4rem 0 0;font-size:var(--t-s);color:rgba(247,245,240,.75);
  letter-spacing:.06em;text-transform:uppercase}
@media (max-width:620px){
  .cifre{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
  .cifre dt{font-size:1.75rem}
  .cifre dd{font-size:.64rem;letter-spacing:.05em;line-height:1.25}
}

.apre__giu{position:absolute;z-index:2;right:var(--gutter);bottom:2rem;margin:0;
  display:none;align-items:center;gap:.7rem;font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(247,245,240,.75)}
@media (min-width:900px){.apre__giu{display:flex}}
.apre__giu i{display:block;width:1px;height:44px;
  background:linear-gradient(var(--pietra-viv),transparent);
  animation:cala 2.2s var(--e) infinite}
@keyframes cala{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ── SEZIONI ─────────────────────────────────────────────────────── */
.sez{position:relative;padding:var(--sez) 0}
/* il filetto in cima a ogni sezione: la pagina si legge come un foglio rigato */
.sez::before{content:"";position:absolute;inset:0 var(--gutter) auto;height:1px;
  background:var(--linea);max-width:var(--max);margin-inline:auto}
.sez--chiara::before{background:rgba(20,18,14,.17)}
.sez--chiara{background:var(--carta-2)}
.sez--fine{background:var(--carta-2)}
.testa2{display:grid;gap:1.6rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
@media (min-width:980px){.testa2{grid-template-columns:1.25fr 1fr;align-items:end;gap:3rem}}
.testo{color:var(--testo-2);max-width:60ch}
.testo--forte{position:relative;font-family:var(--display);
  font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.32;color:var(--inchiostro);
  max-width:32ch;padding-left:1.4rem;margin-block:1.6rem}
.testo--forte::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;
  width:2px;background:var(--pietra)}
.lim{max-width:46ch}
.centro{text-align:center;display:grid;justify-items:center}
.centro .occ{justify-content:center}

.due{display:grid;gap:clamp(2.4rem,5vw,4.5rem)}
@media (min-width:980px){
  .due{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .due--largo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  /* la scatola segue chi legge invece di galleggiare a meta' altezza */
  .due--largo>.dove{position:sticky;top:clamp(6rem,14vh,8rem)}
  .due--sticky{align-items:start}
  .due--sticky>*:first-child{position:sticky;top:clamp(6rem,14vh,9rem)}
  .due--faq{align-items:start;margin-top:clamp(2.5rem,6vw,4.5rem)}
}

/* ── LA SCATOLA DEL COMUNE ───────────────────────────── */
.dove{position:relative}
.scatola{padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--r);background:var(--bianco);
  border:1px solid var(--linea);box-shadow:0 22px 50px -34px rgba(20,18,14,.55)}
.scatola__t{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:600;
  color:var(--inchiostro);margin-bottom:1.1rem}
.scatola__n{margin:1rem 0 0;font-size:var(--t-s);color:var(--testo-2)}
.scatola__d{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--linea)}
.scatola__d p{margin:0 0 .7rem;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--pietra)}
.scatola__l{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.scatola__l li{font-size:.8rem;padding:.34rem .7rem;border-radius:999px;
  border:1px solid var(--linea);color:var(--testo-2)}
.scatola__l li b{font-weight:600;color:var(--verde);margin-left:.3rem}
.visuallyhidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.campo{display:block}
.campo select{width:100%;min-width:0;padding:1rem 1.1rem;border-radius:var(--r-s);
  background:var(--carta);color:var(--inchiostro);border:1px solid var(--linea-2);
  font:inherit;font-size:var(--t-b);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--verde) 50%),
                   linear-gradient(135deg,var(--verde) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  transition:border-color .35s var(--e)}
.campo select:hover{border-color:var(--verde)}
.risposta{margin:1.1rem 0 0;padding:1.1rem 1.25rem;border-radius:var(--r-s);
  background:rgba(0,112,31,.08);border:1px solid rgba(0,112,31,.3);
  font-size:var(--t-b);min-height:3.9rem;display:flex;align-items:center;
  color:var(--inchiostro)}
.risposta span{animation:sfuma .5s var(--e)}
.risposta strong{color:var(--verde)}
@keyframes sfuma{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── COSA PRENDE IN CARICO ───────────────────────────────────────── */
.prende{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:720px){.prende{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.prende{grid-template-columns:1fr 1fr 1fr}}
.prende__i{position:relative;display:flex;gap:1.15rem;align-items:flex-start;
  padding:1.5rem 1.2rem 1.5rem .2rem;border-top:1px solid var(--linea);
  transition:padding-left .5s var(--e)}
.prende__i::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--verde);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e)}
.prende__i:hover{padding-left:.9rem}
.prende__i:hover::after{transform:scaleX(1)}
.prende__n{font-family:var(--display);font-size:.95rem;color:var(--pietra);
  flex:none;padding-top:.28rem;transition:color .4s var(--e)}
.prende__i:hover .prende__n{color:var(--verde)}
.prende__i h3{font-size:1.18rem;margin-bottom:.3rem}
.prende__i p{margin:0;color:var(--testo-2);font-size:var(--t-s)}

/* ── IL NASTRO CHE NON SI FERMA MAI ──────────────────────────────── */
.nastro{overflow:hidden;padding:1.6rem 0;border-block:1px solid var(--linea);
  margin-top:clamp(2rem,5vw,3.5rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nastro__p{display:flex;align-items:center;gap:2.2rem;width:max-content;
  animation:scorre 34s linear infinite}
@keyframes scorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nastro span{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2.1rem);
  color:var(--inchiostro);white-space:nowrap}
.nastro b{color:var(--pietra);font-weight:400}

/* ── I PASSI ─────────────────────────────────────────────────────── */
.passi{list-style:none;margin:0;padding:0}
.passo{position:relative;display:flex;gap:1.4rem;padding:1.8rem 0;
  border-bottom:1px solid var(--linea);opacity:.82;transition:opacity .5s var(--e)}
.passo.on{opacity:1}
.passo::before{content:"";position:absolute;left:-1.15rem;top:2rem;bottom:2rem;width:2px;
  background:var(--verde);transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--e)}
.passo.on::before{transform:scaleY(1)}
.passo__n{font-family:var(--display);font-size:1.5rem;color:var(--pietra);flex:none;
  width:2.4ch;transition:transform .5s var(--e),color .5s var(--e)}
.passo.on .passo__n{transform:scale(1.14);color:var(--verde)}
.passo h3{font-size:1.22rem;margin-bottom:.35rem}
.passo p{margin:0;color:var(--testo-2);font-size:var(--t-s)}

/* ── I FILTRI ────────────────────────────────────────────────────── */
.filtri{display:grid;gap:.8rem;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.filtri__g{display:flex;flex-wrap:wrap;gap:.5rem}
/* vendita/affitto non e' una pillola fra venti: e' la scelta principale,
   quindi diventa una linguetta col filetto sotto */
.filtri__g:first-child{gap:1.8rem;border-bottom:1px solid var(--linea);padding-bottom:0}
.filtri__g:first-child .chip{background:none;border:0;border-radius:0;
  padding:.5rem 0 .85rem;font-family:var(--display);
  font-size:clamp(1.15rem,2vw,1.45rem);font-weight:500;color:var(--testo-2);
  position:relative}
.filtri__g:first-child .chip i{font-family:var(--testo);font-size:.7rem;
  vertical-align:super;color:var(--pietra)}
.filtri__g:first-child .chip::after{content:"";position:absolute;left:0;right:0;
  bottom:-1px;height:2px;background:var(--inchiostro);transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--e)}
.filtri__g:first-child .chip:hover{color:var(--inchiostro)}
.filtri__g:first-child .chip[aria-pressed=true]{background:none;color:var(--inchiostro)}
.filtri__g:first-child .chip[aria-pressed=true]::after{transform:scaleX(1)}
.filtri__g:first-child .chip[aria-pressed=true] i{color:var(--pietra);opacity:1}
.filtri__g.scorre{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.filtri__g.scorre::-webkit-scrollbar{height:3px}
.filtri__g.scorre::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:3px}
.chip{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.52rem .95rem;border-radius:999px;background:transparent;cursor:pointer;
  border:1px solid var(--linea);color:var(--testo-2);font-size:.83rem;
  transition:.35s var(--e);transition-property:color,border-color,background-color}
.chip i{font-style:normal;font-size:.72rem;color:var(--pietra)}
.chip:hover{color:var(--inchiostro);border-color:var(--verde)}
.chip[aria-pressed=true]{background:var(--inchiostro);color:var(--carta);
  border-color:var(--inchiostro)}
.chip[aria-pressed=true] i{color:var(--carta);opacity:.6}

/* ── LE SCHEDE IMMOBILE ──────────────────────────────────────────── */
.griglia{display:grid;gap:clamp(.9rem,1.8vw,1.5rem);grid-template-columns:1fr 1fr}
@media (min-width:820px){.griglia{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1280px){.griglia{grid-template-columns:repeat(4,1fr)}}
.crd{position:relative;display:flex;flex-direction:column;border-radius:var(--r-s);
  overflow:hidden;background:var(--bianco);isolation:isolate;
  box-shadow:0 1px 2px -1px rgba(20,18,14,.10);
  transition:transform .55s var(--e),box-shadow .55s var(--e)}
.crd::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--linea);pointer-events:none;
  transition:box-shadow .5s var(--e)}
.crd:hover{box-shadow:0 4px 8px -4px rgba(20,18,14,.28),0 30px 50px -30px rgba(20,18,14,.65)}
.crd:hover::after{box-shadow:inset 0 0 0 1px rgba(0,112,31,.45)}
.crd__ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--carta-2)}
.crd__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e)}
.crd:hover .crd__ph img{transform:scale(1.07)}
.crd__ph::after{content:"";position:absolute;inset:0 0 auto;height:34%;
  background:linear-gradient(to bottom,rgba(10,15,12,.42),transparent)}
.crd__tag,.crd__n{position:absolute;top:.75rem;z-index:2;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.38rem .7rem;border-radius:999px}
.crd__tag{left:.75rem;background:var(--carta);color:var(--inchiostro);font-weight:600}
.crd__tag--red{background:var(--verde);color:#fff}
.crd__n{right:.75rem;background:rgba(10,15,12,.74);color:#fff;backdrop-filter:blur(6px)}
/* i dati su fondo pieno, non sopra la foto: lì il comune stava a 1,69:1 */
.crd__in{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;
  padding:1.05rem 1.15rem 1.15rem;border-top:1px solid var(--linea)}
.crd__com{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pietra)}
.crd__t{position:relative;display:block;font-family:var(--display);font-size:1.14rem;
  font-weight:600;line-height:1.22;margin:.34rem 0 .62rem;color:var(--inchiostro)}
.crd__t::after{content:"";position:absolute;left:0;bottom:-.3rem;width:26px;height:2px;
  background:var(--verde);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e)}
.crd:hover .crd__t::after{transform:scaleX(1)}
.crd__p{display:block;margin-top:auto;padding-top:.7rem;font-family:var(--display);
  font-size:1.55rem;font-weight:600;line-height:1;color:var(--inchiostro);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.crd__p em{font-style:normal;font-family:var(--testo);font-size:.72rem;
  font-weight:400;color:var(--testo-2);margin-left:.3rem}
.crd__go{position:absolute;right:1.15rem;bottom:1.25rem;z-index:2;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verde);
  opacity:0;transform:translateX(-8px);transition:.45s var(--e)}
.crd:hover .crd__go{opacity:1;transform:none}
.crd[hidden]{display:none}

.nulla{grid-column:1/-1;margin:2.2rem 0 0;padding:2.4rem 1.6rem;text-align:center;
  border:1px solid var(--linea);border-radius:var(--r-s);background:var(--bianco)}
.nulla p{margin:0 auto;max-width:56ch;color:var(--testo-2)}
.nulla__az{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;
  align-items:center;margin-top:1.4rem!important}

/* ── A REDDITO ───────────────────────────────────────────────────── */
.redditi{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.redditi a{position:relative;display:grid;gap:.35rem;padding:1.5rem;
  border-radius:var(--r-s);background:var(--bianco);border:1px solid var(--linea);
  overflow:hidden;box-shadow:0 12px 30px -26px rgba(20,18,14,.5);
  transition:border-color .4s var(--e),transform .4s var(--e),box-shadow .4s var(--e)}
.redditi a::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--verde);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--e)}
.redditi a:hover{border-color:rgba(0,112,31,.4);transform:translateX(4px);
  box-shadow:0 18px 36px -26px rgba(20,18,14,.6)}
.redditi a:hover::after{transform:scaleY(1)}
.redditi__l{font-size:var(--t-s);color:var(--testo-2);letter-spacing:.05em;
  text-transform:uppercase}
.redditi__c{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:600;
  line-height:1;color:var(--verde);font-variant-numeric:tabular-nums}
.redditi__c em{font-style:normal;font-family:var(--testo);font-size:.88rem;font-weight:400;
  color:var(--testo-2);margin-left:.5rem}
.redditi__s{font-size:var(--t-s);color:var(--testo-2)}

/* ── AFFITTI BREVI ───────────────────────────────────────────────── */
.incluso{list-style:none;margin:0;padding:0;display:grid;gap:0}
.incluso li{position:relative;padding:1.25rem 0 1.25rem 2.4rem;
  border-bottom:1px solid var(--linea);font-size:var(--t-m)}
.incluso li::before{content:"";position:absolute;left:0;top:1.75rem;width:14px;height:2px;
  background:var(--verde)}
.incluso li:first-child{border-top:1px solid var(--linea)}

/* ── IL CONFRONTO TRASCINABILE ───────────────────────────────────── */
.cmp{position:relative;aspect-ratio:16/10;border-radius:var(--r-s);overflow:hidden;
  cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  box-shadow:0 20px 44px -32px rgba(20,18,14,.6),inset 0 0 0 1px var(--linea)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__base{position:absolute;inset:0}
.cmp__w{position:absolute;inset:0;width:50%;overflow:hidden;will-change:width}
.cmp__w img{width:var(--cw,100%);max-width:none}
.cmp__h{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  z-index:3;cursor:ew-resize;will-change:left;box-shadow:0 0 12px rgba(0,0,0,.45)}
.cmp__h i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cmp__h i::before,.cmp__h i::after{content:"";position:absolute;top:50%;
  width:0;height:0;border-block:5px solid transparent}
.cmp__h i::before{left:13px;border-right:7px solid var(--inchiostro);transform:translateY(-50%)}
.cmp__h i::after{right:13px;border-left:7px solid var(--inchiostro);transform:translateY(-50%)}
.cmp__e{position:absolute;bottom:1rem;z-index:4;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.4rem .8rem;border-radius:999px;
  background:rgba(10,15,12,.8);backdrop-filter:blur(6px);color:#fff}
.cmp__e--l{left:1rem}
.cmp__e--r{right:1rem}
.cmp__note{margin-top:1.2rem;color:var(--testo-2);font-size:var(--t-s);max-width:70ch}
.cmp__note strong{color:var(--inchiostro)}

/* ── LA FASCIA DELLA REGGIA ──────────────────────────────────────── */
.banda{position:relative;min-height:clamp(420px,62vh,660px);display:grid;
  place-items:center;overflow:hidden;isolation:isolate;text-align:center;
  background:var(--notte-2);color:#fff}
.banda__v{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.banda__velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%,rgba(10,15,12,.42) 0%,rgba(10,15,12,.8) 72%,rgba(10,15,12,.92) 100%)}
.banda__in{position:relative;z-index:2;padding:3rem var(--gutter);max-width:60ch}
.banda__occ{font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pietra-viv);margin-bottom:1.2rem}
.banda__t{font-size:clamp(2rem,5.2vw,4rem);margin-bottom:.9rem;color:#fff}
.banda__d{margin:0;color:rgba(247,245,240,.88);font-size:var(--t-m)}

/* ── LE TRE SEDI ─────────────────────────────────────────────────── */
.tappe{list-style:none;margin:0 0 clamp(2.5rem,6vw,4rem);padding:0;display:grid;gap:0}
.tappa{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;
  align-items:start;padding:1.6rem 0;border-top:1px solid var(--linea)}
.tappa:first-child{border-top:0}
.tappa__a{font-family:var(--display);font-size:clamp(1.7rem,4vw,2.5rem);font-weight:600;
  line-height:1;height:1em;display:block;color:var(--pietra);
  font-variant-numeric:tabular-nums;min-width:4.4ch;transition:color .5s var(--e)}
.tappa h3{font-size:1.14rem;margin:.1rem 0 .3rem}
.tappa p{margin:0;color:var(--testo-2);font-size:var(--t-s);max-width:50ch}
.tappa--ora .tappa__a{color:var(--verde)}
.tappa:hover .tappa__a{color:var(--inchiostro)}
@media (min-width:900px){
  .tappe{grid-template-columns:repeat(4,1fr)}
  .tappa{border-top:1px solid var(--linea);border-left:1px solid var(--linea);
    grid-template-columns:1fr;gap:.9rem;padding:1.8rem 1.5rem 0}
  .tappa:first-child{border-top:1px solid var(--linea);border-left:0;padding-left:0}
}

/* ── LE DOMANDE ──────────────────────────────────────────────────── */
.faq__i{border-bottom:1px solid var(--linea)}
.faq__i:first-child{border-top:1px solid var(--linea)}
.faq__i h3{margin:0;font-family:var(--testo);font-weight:500}
.faq__d{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.3rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:var(--t-m);transition:color .35s var(--e)}
.faq__d:hover{color:var(--verde)}
.faq__d i{position:relative;flex:none;width:16px;height:16px}
.faq__d i::before,.faq__d i::after{content:"";position:absolute;inset:50% 0 auto;
  height:2px;background:var(--verde);transition:transform .4s var(--e)}
.faq__d i::after{transform:rotate(90deg)}
.faq__d[aria-expanded=true] i::after{transform:rotate(0)}
.faq__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e)}
.faq__r>div{overflow:hidden}
.faq__r p{margin:0 0 1.3rem;color:var(--testo-2);max-width:56ch}
.faq__i.ap .faq__r{grid-template-rows:1fr}

/* ── I CONTATTI ──────────────────────────────────────────────────── */
.rec{display:grid;gap:.9rem;margin-top:clamp(2.4rem,5vw,3.6rem)}
@media (min-width:760px){.rec{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.rec{grid-template-columns:repeat(4,1fr)}}
.rec a{position:relative;display:block;padding:1.6rem 1.4rem;border-radius:var(--r);
  background:var(--bianco);border:1px solid var(--linea);overflow:hidden;
  box-shadow:0 12px 30px -26px rgba(20,18,14,.5);
  transition:transform .4s var(--e),border-color .4s var(--e),box-shadow .4s var(--e)}
.rec a::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--verde);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.rec a:hover{transform:translateY(-4px);border-color:var(--linea-2);
  box-shadow:0 20px 40px -28px rgba(20,18,14,.6)}
.rec a:hover::after{transform:scaleX(1)}
.rec span{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--testo-2);margin-bottom:.5rem}
.rec b{font-family:var(--display);font-size:1.16rem;font-weight:600;word-break:break-word}

/* ── IL PIEDE, scuro: chiude la pagina e regge il marchio ────────── */
.piede{padding:clamp(3.5rem,8vw,6rem) 0 2rem;background:var(--notte);color:var(--carta)}
.piede__g{display:grid;gap:2.5rem}
@media (min-width:820px){.piede__g{grid-template-columns:1.6fr 1fr 1.2fr}}
.piede__logo{height:42px;width:auto;margin-bottom:1.1rem}
.piede p{color:rgba(247,245,240,.75);font-size:var(--t-s);margin-bottom:.7rem}
.piede a{transition:color .3s var(--e)}
.piede a:hover{color:var(--pietra-viv)}
.piede nav{display:grid;gap:.45rem;font-size:var(--t-s)}
.piede nav a{color:rgba(247,245,240,.75)}
.piede__t{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem}
.piede__b{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  margin-top:clamp(2.5rem,6vw,4rem);padding-top:1.5rem;
  border-top:1px solid rgba(247,245,240,.18);
  font-size:var(--t-xs);color:rgba(247,245,240,.65)}

/* ── LA SCHEDA IMMOBILE ──────────────────────────────────────────── */
.pan{width:min(1180px,94vw);max-height:92svh;padding:0;border:0;border-radius:var(--r);
  background:var(--carta);color:var(--inchiostro);overflow:auto;
  box-shadow:0 40px 90px -30px rgba(20,18,14,.6)}
.pan::backdrop{background:rgba(10,15,12,.72);backdrop-filter:blur(5px)}
.pan__x{position:sticky;float:right;top:.9rem;right:.9rem;z-index:5;width:44px;height:44px;
  border:0;border-radius:50%;background:var(--inchiostro);color:var(--carta);
  font-size:1.5rem;line-height:1;cursor:pointer;transition:background-color .3s var(--e)}
.pan__x:hover{background:var(--verde)}
.pan__b{display:grid}
@media (min-width:940px){.pan__b{grid-template-columns:1.25fr 1fr;overflow:hidden}}
.pan__foto{display:grid;gap:4px;padding:4px}
@media (min-width:940px){.pan__foto{grid-template-columns:1fr 1fr;align-content:start;
  max-height:92svh;overflow:auto}}
.pan__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;
  cursor:zoom-in;transition:opacity .3s var(--e)}
.pan__foto img:hover{opacity:.86}
.pan__foto img:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.pan__t{padding:clamp(1.6rem,3vw,2.6rem)}
.pan__com{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pietra);margin-bottom:.7rem}
.pan__t h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.6rem}
.pan__p{font-family:var(--display);font-size:1.8rem;font-weight:600;
  color:var(--inchiostro);margin-bottom:1.2rem}
.pan__d{color:var(--testo-2);font-size:var(--t-s);line-height:1.72}
.pan__red{padding:.9rem 1.1rem;border-radius:var(--r-s);background:rgba(0,112,31,.08);
  border:1px solid rgba(0,112,31,.3);font-size:var(--t-s);color:var(--inchiostro)}
.pan__idea{padding:.9rem 1.1rem;border-radius:var(--r-s);background:rgba(122,94,51,.1);
  border:1px solid rgba(122,94,51,.34);font-size:var(--t-s);color:var(--testo-2)}
.pan__idea strong{color:var(--pietra)}
.pan__c{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.pan__c li{font-size:.76rem;padding:.4rem .75rem;border-radius:999px;
  border:1px solid var(--linea-2);color:var(--testo-2)}

/* ── IL LIGHTBOX, scuro: la foto si guarda al buio ───────────────── */
.lux{position:fixed;inset:0;z-index:200;width:100%;max-width:100%;height:100%;
  max-height:100%;border:0;margin:0;padding:clamp(1rem,4vw,3rem);
  background:rgba(8,12,10,.97);color:#fff;place-items:center;
  animation:sfuma .3s var(--e)}
.lux[open]{display:grid}
.lux::backdrop{background:rgba(8,12,10,.92)}
.lux figure{margin:0;max-width:100%;display:grid;gap:.9rem;justify-items:center}
.lux img{max-width:100%;max-height:80svh;width:auto;border-radius:10px}
.lux figcaption{font-size:var(--t-s);color:rgba(247,245,240,.78)}
.lux button{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.16);
  color:#fff;border-radius:50%;width:52px;height:52px;font-size:1.6rem;line-height:1;
  backdrop-filter:blur(6px);transition:background-color .25s var(--e),color .25s var(--e)}
.lux button:hover{background:#fff;color:var(--inchiostro)}
.lux__x{top:1.1rem;right:1.1rem}
.lux__p{left:1.1rem;top:50%;transform:translateY(-50%)}
.lux__n{right:1.1rem;top:50%;transform:translateY(-50%)}

/* ── IL BANNER COOKIE ────────────────────────────────────────────── */
.cookie{position:fixed;left:50%;bottom:1rem;z-index:150;transform:translateX(-50%);
  width:min(760px,calc(100vw - 2rem));display:flex;align-items:center;gap:1rem;
  padding:.8rem 1.1rem;border-radius:999px;background:var(--inchiostro);
  color:rgba(247,245,240,.88);box-shadow:0 18px 40px -20px rgba(20,18,14,.7);
  font-size:var(--t-xs);animation:suBanner .5s var(--e)}
@keyframes suBanner{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
.cookie p{margin:0;flex:1}
.cookie a{color:var(--pietra-viv);text-decoration:underline}
.cookie button{flex:none;width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;cursor:pointer;font-size:1.1rem;line-height:1}
.cookie button:hover{background:#fff;color:var(--inchiostro)}
@media (max-width:560px){.cookie{border-radius:var(--r-s);font-size:.72rem}}

/* ── LE COMPARSE ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.crd.rv,.prende__i.rv,.tappa.rv{transition-delay:calc(var(--k,0) * 55ms)}

/* se main.js non è mai partito, dopo tre secondi si scopre tutto */
.resa .rv,.resa .cifre,.resa .apre__d,.resa .apre .azioni{opacity:1!important;transform:none!important}
.resa .ln>span{transform:none!important}
.resa .passo{opacity:1!important}
.resa .occ__l{transform:scaleX(1)!important}
.resa .dico::before{transform:none!important}
.resa .dico__v{opacity:.32!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
  .ln>span{transform:none!important}
  .apre__d,.apre .azioni,.cifre{opacity:1!important;transform:none!important}
  .passo{opacity:1!important}
  .occ__l{transform:scaleX(1)!important}
  .nastro__p{animation:none}
  .apre__video{transform:scale(1.06)!important}
}

/* ── I TITOLI ENTRANO PAROLA PER PAROLA ─────────────────────────────
   Solo i titoli. Il testo corrente non si tocca: animare parola per
   parola quello che si deve leggere rallenta la lettura, e qui la
   lettura e' il mestiere. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.w>span{display:inline-block;transform:translateY(108%);
  transition:transform .78s var(--e);transition-delay:calc(var(--i,0) * 55ms)}
.rv.in .w>span{transform:none}

/* ── LE SCHEDE HANNO SPESSORE ───────────────────────────────────────
   Una scheda immobile e' una fotografia che stai prendendo in mano:
   si inclina verso di te e la foto scivola dentro la cornice. */
.griglia{perspective:1600px;perspective-origin:50% 40%}
.crd{transform-style:preserve-3d;
  transform:translateY(var(--su,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.crd.rv{transform:translateY(26px) rotateX(7deg) scale(.985)}
.crd.rv.in{transform:translateY(var(--su,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1)}
.crd:hover{--su:-8px}
.crd__ph img{will-change:transform}
.crd:hover .crd__ph img{transform:scale(1.08) translate(var(--px,0px),var(--py,0px))}
/* il contenuto sta un filo davanti alla cornice: e' quello che da' lo spessore */
.crd__in{transform:translateZ(28px)}
.crd__tag,.crd__n{transform:translateZ(42px)}

@media (hover:none){
  .crd{transform:translateY(var(--su,0px))}
  .crd__in,.crd__tag,.crd__n{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .w>span{transform:none!important}
  .crd,.crd.rv,.crd.rv.in{transform:none!important}
  .crd__in,.crd__tag,.crd__n{transform:none!important}
  .crd:hover .crd__ph img{transform:none!important}
}
.resa .w>span{transform:none!important}

/* ── IL DETTO DEL TITOLARE ───────────────────────────────
   Carta bianca, un filetto verde che si tira sul bordo alto come il margine
   di un foglio protocollato, e la virgoletta grande in pietra dietro alle
   parole. E' l'unico punto in cui parla lui: deve pesare. */
.dico{position:relative;margin-top:clamp(2.2rem,5vw,3.6rem);background:var(--bianco);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  padding:clamp(2.4rem,5vw,3.8rem) clamp(1.4rem,4vw,3.6rem) clamp(1.8rem,3.5vw,2.6rem);
  box-shadow:0 2px 4px -2px rgba(20,18,14,.10),0 26px 48px -34px rgba(20,18,14,.55)}
.dico::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--verde);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--e) .14s}
.dico.in::before{transform:scaleX(1)}
.dico__v{position:absolute;left:clamp(.4rem,2.2vw,1.8rem);top:clamp(-.4rem,.4vw,.4rem);
  font-family:var(--display);font-size:clamp(4.6rem,15vw,12rem);line-height:.8;
  color:var(--pietra-viv);pointer-events:none;-webkit-user-select:none;user-select:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--e) .2s,transform .9s var(--e) .2s}
.dico.in .dico__v{opacity:.32;transform:none}
.dico__q{position:relative;margin:0;max-width:30ch}
.dico__q p{margin:0;font-family:var(--display);letter-spacing:-.015em;line-height:1.28;
  font-size:clamp(1.38rem,3.1vw,2.15rem);color:var(--inchiostro)}
/* da tablet in su il riquadro si apre: la frase respira su due colonne di misura */
/* da tablet in su il riquadro si apre in due: la frase a sinistra, la firma
   di fianco, separata da un filetto. Cosi' la carta bianca non resta vuota. */
@media (min-width:860px){
  .dico{display:grid;grid-template-columns:1.55fr .8fr;align-items:end;
    gap:clamp(1.8rem,3.5vw,3.6rem)}
  .dico__q{max-width:none}
  .dico__f{margin-top:0;padding-top:0;border-top:0;gap:.45rem;
    flex-direction:column;align-items:flex-start;
    padding-left:clamp(1.2rem,2vw,2.2rem);border-left:1px solid var(--linea)}
}
/* le tre parole che il titolare ha voluto in evidenza sul foglio */
.dico__q em{font-style:normal;color:var(--verde);
  box-shadow:inset 0 -.09em 0 rgba(0,112,31,.3)}
.dico__f{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1.1rem;
  margin-top:clamp(1.5rem,3vw,2.1rem);padding-top:1.1rem;border-top:1px solid var(--linea)}
.dico__n{font-family:var(--display);font-size:1.2rem;color:var(--inchiostro)}
.dico__r{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--pietra)}

/* ── L'AVVISO IN CIMA ──────────────────────────────────────
   Una riga sola, che il cliente accende e spegne dal pannello. */
.avviso{background:var(--arancio);color:var(--arancio-t);
  font-size:var(--t-s);font-weight:600;text-align:center;padding:.6rem 0}
.avviso a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── GLI IMMOBILI CHE NON CI SONO PIU' ────────────────────────
   Venduto e affittato restano in pagina, ma spenti: fanno vedere che
   dall'agenzia le cose si concludono. */
.crd__tag--via{background:var(--inchiostro);color:var(--carta)}
.crd--via .crd__ph img{filter:grayscale(1);opacity:.72}
.crd--via:hover .crd__ph img{filter:grayscale(.35);opacity:.9}
.pan__via{margin:.9rem 0;padding:.75rem .95rem;border-radius:var(--r-s);
  background:var(--carta-2);color:var(--testo-2);font-size:var(--t-s)}

[hidden]{display:none!important}