/* =====================================================================
   Immobiliare Centro Storico — foglio di stile
   Palette e caratteri derivati dal marchio storico dell'agenzia.
   ===================================================================== */

/* Geist (Vercel, SIL Open Font License): un solo carattere per titoli e testo */
@font-face{font-family:'Geist';src:url('../fonts/geist/geist-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';src:url('../fonts/geist/geist-latin-ext-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* stile piatto: fondo crema, inchiostro quasi nero, nessun colore d'accento */
  --blu:#141414;
  --blu-scuro:#000;
  --blu-chiaro:#f2ecdf;
  --inchiostro:#141414;
  --inchiostro-2:#45413a;
  --grigio:#87806f;
  --sabbia:#a88b62;
  --sabbia-chiara:#f5efe2;
  --osso:#fefbf3;
  --linea:#e6dfcf;
  --bianco:#fffdf8;
  /* colori esatti del logo ufficiale */
  --logo-blu:#2a86cb;
  --logo-blu-chiaro:#4f9fdb;
  --logo-grigio:#3d3d3e;

  --display:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --testo:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* altezza della testata fissa: la stessa in cima e scorrendo */
  --testata:72px;

  --max:1240px;
  --gutter:clamp(20px,5vw,64px);
  /* angoli appena arrotondati: sobri ma non spigolosi */
  --r:6px;
  --r-lg:10px;
  /* piatto: niente ombre, i piani si separano con linee sottili */
  --ombra:none;
  --ombra-alta:none;
  --transizione:cubic-bezier(.22,.61,.36,1);
  /* movimento: expo in uscita, morbido nel posarsi; e un ingresso-uscita simmetrico */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--osso);color:var(--inchiostro);
  font-family:var(--testo);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.025em;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px;border-radius:2px}
/* la testata è fissa: gli ancoraggi devono fermarsi sotto di essa */
[id]{scroll-margin-top:calc(var(--testata) + 16px)}

::selection{background:var(--blu);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--osso)}
::-webkit-scrollbar-thumb{background:#d5cec4;border-radius:99px;border:3px solid var(--osso)}
::-webkit-scrollbar-thumb:hover{background:#bfb6a9}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.wrap-lg{max-width:1480px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- micro-tipografia ---------- */
.sopra{
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:var(--blu);margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.sopra::before{content:'';width:26px;height:1px;background:var(--blu);opacity:.5;flex:none}
.sopra.centro{justify-content:center}
.titolo-sez{font-size:clamp(29px,4vw,46px);letter-spacing:-.02em}
.sommario{color:var(--inchiostro-2);font-size:17px;max-width:58ch}

/* =====================================================================
   Header
   ===================================================================== */
/* vetro smerigliato: un crema velato, e quello che passa sotto si sfoca e
   si scalda appena. Dove il browser non sfoca resta crema pieno. Scorrendo
   compare la linea sottile del bordo basso. */
.testata{
  position:fixed;inset:0 0 auto;z-index:90;
  background:rgba(254,251,243,.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .45s var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.testata{background:var(--osso)}}
.testata.compatta{border-bottom-color:rgba(230,223,207,.7)}
/* logo a sinistra, pagine al centro esatto, lingua a destra */
.testata-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;height:var(--testata)}

/* Lockup orizzontale in nero: il segno del logo affiancato al logotipo. I tre
   pezzi sono maschere alfa ritagliate dal logo ufficiale con la stessa
   larghezza (1121 px), quindi le due righe restano allineate come
   nell'originale; il colore arriva dal CSS. */
.marchio{display:flex;align-items:center;gap:13px;color:var(--inchiostro);justify-self:start}
.marchio-mark,.marchio-testo>span{
  display:block;background:currentColor;
  -webkit-mask:var(--maschera) center/100% 100% no-repeat;mask:var(--maschera) center/100% 100% no-repeat;
}
.marchio-mark{--maschera:url('../brand/logo-segno.png');aspect-ratio:1121/588;width:64px;flex:none}
.marchio-testo{display:block;width:120px}
.marchio-testo>span{width:100%}
.marchio-testo .riga1{--maschera:url('../brand/logo-riga1.png');aspect-ratio:1121/98}
/* distanza tra le righe come nel logo: 16 px su 1121 */
.marchio-testo .riga2{--maschera:url('../brand/logo-riga2.png');aspect-ratio:1121/96;margin-top:1.427%}
.nav{display:flex;align-items:center;gap:clamp(18px,3.2vw,56px)}
.nav a{
  display:inline-flex;flex-direction:column;align-items:center;padding:8px 0;
  font-size:clamp(14px,1.15vw,17px);font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  color:var(--inchiostro);
  /* Geist è variabile: il peso passa da 400 a 600 in modo continuo */
  transition:font-weight .55s cubic-bezier(.32,.72,0,1);
}
/* copia invisibile in grassetto: tiene la larghezza finale della voce, così
   ingrassando il testo non sposta le voci vicine */
.nav a::after{content:attr(data-testo);font-weight:600;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.nav a:hover,.nav a:focus-visible,.nav a.attivo{font-weight:600}

.testata-azioni{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.lingua{display:flex;align-items:center}
.lingua button{
  border:0;background:none;cursor:pointer;padding:4px 0;
  font-size:clamp(14px,1.15vw,17px);font-weight:400;letter-spacing:.02em;color:var(--grigio);transition:color .2s;
}
.lingua button+button::before{content:'|';margin:0 .45em;color:var(--inchiostro)}
.lingua button:hover,.lingua button.on{color:var(--inchiostro)}

/* ---------- ricerca nella testata (ricercaTestata in app.js) ----------
   La lente al tratto, nera; al passaggio il tratto si ingrossa con la curva
   delle voci del menu. Aperta la ricerca la lente esce verso il campo e al
   suo posto ruota dentro una ×. */
.testata-in{position:relative}
.testata-cerca{
  position:relative;display:grid;place-items:center;width:38px;height:38px;margin-left:6px;padding:0;
  border:0;border-radius:50%;background:none;color:var(--inchiostro);cursor:pointer;
  transition:transform .5s var(--molla),opacity .3s var(--ease),background-color .3s;
}
.testata-cerca svg{grid-area:1/1;width:20px;height:20px;transition:transform .6s var(--molla),opacity .25s var(--ease),stroke-width .55s cubic-bezier(.32,.72,0,1)}
.testata-cerca:hover svg{stroke-width:2.2}
.testata-cerca:active{transform:scale(.88);transition-duration:.12s}
.testata-cerca .ico-chiudi{opacity:0;transform:rotate(-90deg) scale(.4)}
.testata.cercando .testata-cerca .ico-lente{opacity:0;transform:translateX(-10px) scale(.5)}
.testata.cercando .testata-cerca .ico-chiudi{opacity:1;transform:none;transition-delay:.08s}

/* le voci del menu e la lingua sfumano in fila, dalla più vicina alla lente;
   chiudendo tornano dalla più lontana, mentre il campo si riavvolge */
.nav a{transition:font-weight .55s cubic-bezier(.32,.72,0,1),opacity .4s var(--ease) calc(.12s + var(--k,0) * 40ms),transform .7s var(--ease) calc(.12s + var(--k,0) * 40ms),filter .4s var(--ease) calc(.12s + var(--k,0) * 40ms)}
.lingua{transition:opacity .4s var(--ease) .3s,transform .7s var(--ease) .3s,filter .4s var(--ease) .3s}
.testata.cercando .nav a{opacity:0;transform:scale(.94);filter:blur(3px);pointer-events:none;transition-delay:0s,calc((4 - var(--k,0)) * 35ms + 40ms),calc((4 - var(--k,0)) * 35ms + 40ms),calc((4 - var(--k,0)) * 35ms + 40ms)}
.testata.cercando .testata-azioni .lingua{opacity:0;transform:scale(.94);filter:blur(3px);pointer-events:none;transition-delay:0s}

/* il campo: chiuso è un ritaglio largo zero sul bordo destro; aprendosi si
   srotola verso sinistra e la lente (--dx: lo scarto dal bottone) scivola al
   suo posto con la stessa curva */
.rs-campo{
  position:absolute;top:50%;left:0;right:0;z-index:2;
  width:min(640px,calc(100% - 2 * (var(--gutter) + 230px)));height:44px;margin:-22px auto 0;
  display:flex;align-items:center;gap:10px;padding:0 6px 0 13px;
  background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--ombra-campo);
  visibility:hidden;opacity:0;clip-path:inset(-20px -20px -20px 100% round var(--r));
  transition:clip-path .55s var(--ease-io),opacity .3s var(--ease) .25s,visibility 0s .55s,border-color .3s,box-shadow .6s var(--ease);
}
.testata.cercando .rs-campo{
  visibility:visible;opacity:1;clip-path:inset(-20px -20px -20px -20px round var(--r));
  transition:clip-path .75s var(--ease) .05s,opacity .2s var(--ease),visibility 0s,border-color .3s,box-shadow .6s var(--ease);
}
.rs-campo:focus-within{border-color:rgba(20,20,20,.4);box-shadow:var(--ombra-campo-fuoco)}
.rs-lente{position:relative;flex:none;display:grid;place-items:center;width:18px;height:18px;color:var(--inchiostro);transform:translateX(var(--dx,0));transition:transform .55s var(--ease-io)}
.testata.cercando .rs-lente{transform:none;transition:transform .75s var(--ease) .05s}
.rs-lente>svg{width:18px;height:18px;transition:opacity .25s var(--ease),transform .5s var(--molla)}
.rs-giro{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .5s var(--molla)}
.rs-giro svg{width:16px;height:16px;animation:cerca-giro .8s steps(8) infinite paused}
.rs-campo input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;outline:0;font:inherit;font-size:15.5px;color:var(--inchiostro);text-overflow:ellipsis}
.rs-campo input::placeholder{color:var(--grigio);opacity:1;transition:opacity .3s}
.rs-campo input:focus::placeholder{opacity:.75}
.rs-campo input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* la × per svuotare compare solo a campo pieno, con un piccolo rimbalzo */
.rs-pulisci{
  flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:var(--sabbia-chiara);color:var(--inchiostro-2);cursor:pointer;
  opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .2s var(--ease),transform .45s var(--molla),background-color .2s;
}
.rs-pulisci svg{width:12px;height:12px}
.rs-pulisci:hover{background:var(--linea)}
.rs-campo.pieno .rs-pulisci{opacity:1;transform:none;pointer-events:auto}
.rs-ai{cursor:help}
.rs-campo:focus-within .rs-ai{border-color:#d8d0bf}
/* mentre l'AI legge: una luce passa sulla frase, l'ombra respira, la lente
   lascia il posto alla rotella e la scintilla pulsa */
.rs-luce-testo{position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .3s}
.rs-luce-testo::before{content:'';position:absolute;top:0;bottom:0;left:0;width:42%;background:linear-gradient(100deg,rgba(255,253,248,0),rgba(255,253,248,.94) 50%,rgba(255,253,248,0));transform:translateX(-110%)}
.testata.pensa .rs-luce-testo{opacity:1}
.testata.pensa .rs-luce-testo::before{animation:cerca-luce 1.6s var(--ease-io) infinite}
.testata.pensa .rs-campo{animation:cerca-respira 1.9s var(--ease-io) infinite}
.testata.pensa .rs-ai i{animation:cerca-pulsa 1.2s var(--ease-io) infinite}
.testata.pensa .rs-lente>svg{opacity:0;transform:scale(.5)}
.testata.pensa .rs-giro{opacity:1;transform:none}
.testata.pensa .rs-giro svg{animation-play-state:running}

/* il velo: la pagina sotto si scurisce appena e si sfoca */
.rs-velo{
  position:fixed;inset:0;z-index:88;background:rgba(32,26,16,.16);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s .45s;
}
.testata.cercando~.rs-velo{visibility:visible;opacity:1;transition:opacity .5s var(--ease),visibility 0s}

/* il foglio: lo stesso vetro della testata, che a ricerca aperta si fa più
   pieno perché i due si leggano come un solo piano. L'altezza la dà app.js */
.testata.cercando{background:rgba(254,251,243,.93);border-bottom-color:transparent}
.rs-foglio{
  position:fixed;top:var(--testata);left:0;right:0;z-index:89;height:0;max-height:calc(100vh - var(--testata));overflow-y:auto;overscroll-behavior:contain;
  background:rgba(254,251,243,.93);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 30px 60px -34px rgba(40,30,15,.32),0 1px 0 rgba(230,223,207,.6);
  visibility:hidden;opacity:0;outline:0;transition:height .45s var(--ease-io),opacity .3s var(--ease) .12s,visibility 0s .45s;
}
.testata.cercando~.rs-foglio{visibility:visible;opacity:1;transition:height .7s var(--ease),opacity .15s var(--ease),visibility 0s}
.rs-foglio.muove{overflow:hidden}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rs-foglio,.testata.cercando{background:var(--osso)}}
.rs-in{position:relative;width:min(640px,calc(100% - 2 * (var(--gutter) + 230px)));margin:0 auto;padding:14px 0 28px;transition:opacity .4s var(--ease),filter .4s var(--ease)}
.rs-in:empty{padding:0}
/* chiudendo, il contenuto sfuma prima che il foglio si riavvolga */
.testata:not(.cercando)~.rs-foglio .rs-in{opacity:0;transition-duration:.2s}
/* mentre l'AI legge quello che c'era si fa da parte; con risposte immediate il ritardo evita il lampeggio */

.rs-elenco{position:static}

.rs-vuoto{display:grid;grid-template-columns:1fr 210px;gap:4px 28px}
.rs-titolo{margin:0;padding:10px 12px 6px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grigio)}
.rs-voce{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;margin:0;
  border:0;border-radius:var(--r);background:none;font:inherit;font-size:15px;line-height:1.35;text-align:left;color:var(--inchiostro);cursor:pointer;
}
.rs-luce{position:absolute;top:0;left:0;width:0;height:0;border-radius:var(--r);background:rgba(60,45,20,.055);opacity:0;pointer-events:none;transition:transform .34s var(--ease),width .34s var(--ease),height .34s var(--ease),opacity .2s}
.rs-scintilla{flex:none;width:14px;height:14px;background:var(--inchiostro-2);-webkit-mask:var(--scintilla) center/contain no-repeat;mask:var(--scintilla) center/contain no-repeat;transition:transform .5s var(--molla)}
.rs-voce.attiva .rs-scintilla{transform:scale(1.15) rotate(-12deg)}
.rs-frase span{color:var(--inchiostro-2);transition:color .25s}
.rs-frase.attiva span{color:var(--inchiostro)}
.rs-link{font-size:14.5px}
.rs-link>svg{flex:none;width:14px;height:14px;color:var(--grigio);transition:transform .45s var(--ease),color .25s}
.rs-link.attiva>svg{transform:translateX(3px);color:var(--inchiostro)}
.rs-chiedi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-voce q{font-weight:600;quotes:'«' '»'}
.rs-voce q::before{margin-right:.08em}.rs-voce q::after{margin-left:.08em}
.rs-chiedi kbd{flex:none;display:grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border:1px solid var(--linea);border-radius:4px;background:var(--bianco);font:inherit;font-size:12px;color:var(--grigio);box-shadow:0 1px 0 var(--linea);transition:transform .4s var(--molla)}
.rs-chiedi.attiva kbd{transform:translateY(-1px)}

/* un immobile: foto, nome, tipo e zona, prezzo; la freccia arriva con la luce */
.rs-imm{display:grid;grid-template-columns:72px minmax(0,1fr) auto 16px;gap:14px;padding-block:7px}
.rs-foto{width:72px;height:54px;border-radius:4px;overflow:hidden;background:var(--sabbia-chiara)}
.rs-foto img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s var(--ease),transform .7s var(--ease)}
.rs-foto img.ok{opacity:1;transform:none}
.rs-imm.attiva .rs-foto img.ok{transform:scale(1.06)}
.rs-testo b{display:block;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-testo small{display:block;margin-top:2px;font-size:13px;color:var(--grigio);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-prezzo{font-size:14px;color:var(--inchiostro-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-imm>svg{width:15px;height:15px;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .45s var(--ease)}
.rs-imm.attiva>svg{opacity:1;transform:none}

/* i risultati: quanti, per quale frase, e cosa ha capito l'AI */
.rs-capito{padding:6px 12px 14px;margin-bottom:6px;border-bottom:1px solid var(--linea)}
.rs-n{margin:0;font-size:14.5px;color:var(--grigio)}
.rs-n b{display:inline-block;color:var(--inchiostro);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.rs-n q{color:var(--inchiostro);quotes:'«' '»'}
.rs-voci{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:11px}
.rs-voci .rs-scintilla{margin-right:3px;background:var(--inchiostro)}
.rs-voci .voce{font-size:13px;padding:4px 4px 4px 10px}
.rs-vuota{margin:0;padding:10px 12px 4px;font-size:14px;color:var(--grigio);max-width:52ch}
.rs-fondo{margin-top:6px;padding-top:6px;border-top:1px solid var(--linea)}
.rs-tutti{justify-content:space-between;font-weight:500;font-size:14.5px}
.rs-tutti svg{flex:none;width:15px;height:15px;transition:transform .45s var(--ease)}
.rs-tutti.attiva svg{transform:translateX(4px)}

/* le voci nuove entrano in fila salendo appena da sfocate; le etichette con un rimbalzo */
.rs-in .entra{animation:rs-entra .6s var(--ease) both;animation-delay:calc(70ms + var(--i,0) * 32ms)}
.rs-in .voce.entra{animation:voce-entra .6s var(--molla) both;animation-delay:calc(140ms + var(--i,0) * 45ms)}
@keyframes rs-entra{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
/* mentre l'AI legge: righe finte con la forma dei risultati (la luce è quella delle schede finte) */
.rs-finta-capito{padding:10px 12px 18px;margin-bottom:6px;border-bottom:1px solid var(--linea)}
.rs-finta-capito i{display:block;width:46%;height:12px;border-radius:4px}
.rs-finta-capito i+i{width:58%;height:26px;margin-top:13px}
.rs-finta{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;gap:14px;align-items:center;padding:7px 12px;animation:finta-entra .5s var(--ease) backwards;animation-delay:calc(60ms + var(--k) * 45ms)}
.rs-finta>i:first-child{height:54px;border-radius:4px}
.rs-finta span{display:grid;gap:9px}
.rs-finta span i{width:72%;height:12px;border-radius:4px}
.rs-finta span i+i{width:44%;height:10px}
.rs-finta>i:last-child{height:12px;border-radius:4px}
.rs-carica{position:relative;overflow:hidden}
.rs-in .rs-carica.esce{animation:esce .22s var(--ease-io) forwards}
.rs-stato{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* hamburger e chiudi: sui telefoni, a ricerca aperta, l'hamburger fa da × */
.testata.cercando .hamburger span{background:transparent}
.testata.cercando .hamburger span::before{top:0;transform:rotate(45deg)}
.testata.cercando .hamburger span::after{top:0;transform:rotate(-45deg)}
.marchio{transition:opacity .4s var(--ease),transform .7s var(--ease),filter .4s var(--ease)}
@media (max-width:1100px){.rs-vuoto{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  font-size:14.5px;font-weight:500;letter-spacing:.015em;
  transition:.28s var(--transizione);white-space:nowrap;
}
.btn-primario{background:var(--blu);color:#fff}
.btn-primario:hover{background:var(--blu-scuro)}
.btn-scuro{background:var(--inchiostro);color:#fff}
.btn-scuro:hover{background:#0c1c2a}
.btn-linea{border-color:#cfd5dc;color:var(--inchiostro);background:var(--bianco)}
.btn-linea:hover{border-color:var(--inchiostro)}
.btn-chiaro{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-chiaro:hover{background:#fff;color:var(--inchiostro);border-color:#fff}
.btn-sm{padding:9px 18px;font-size:13.5px}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.6;cursor:progress}

.hamburger{display:none;width:40px;height:40px;border:0;border-radius:var(--r);background:none;cursor:pointer;padding:0;place-items:center}
.hamburger span{display:block;width:17px;height:1.5px;background:var(--inchiostro);position:relative;transition:.3s}
.hamburger span::before,.hamburger span::after{content:'';position:absolute;left:0;width:17px;height:1.5px;background:var(--inchiostro);transition:.3s}
.hamburger span::before{top:-5.5px}.hamburger span::after{top:5.5px}
.hamburger.aperto span{background:transparent}
.hamburger.aperto span::before{top:0;transform:rotate(45deg)}
.hamburger.aperto span::after{top:0;transform:rotate(-45deg)}

/* il pannello copre tutto lo schermo e sta sotto la testata (89 contro 90):
   scorrendo la testata si accorcia, e partendo dalla sua altezza piena
   resterebbe una fessura trasparente tra il logo e la prima voce */
.nav-mobile{
  position:fixed;inset:0;z-index:89;background:var(--osso);padding:calc(var(--testata) + 26px) var(--gutter) 40px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--transizione);overflow-y:auto;overscroll-behavior:contain;
}
.nav-mobile.aperto{opacity:1;pointer-events:auto}
.nav-mobile>a{display:block;padding:16px 0;border-bottom:1px solid var(--linea);font-family:var(--display);font-size:24px}
.nav-mobile .m-azioni{margin-top:26px;display:grid;gap:12px}
.nav-mobile .m-azioni .btn{font-size:16px;padding-block:15px}

/* =====================================================================
   Hero
   ===================================================================== */
/* Vetrina: la foto occupa tutta la larghezza, in cima anche dietro la testata
   (che col suo vetro la sfoca), e passa da un
   immobile all'altro, una foto vera per ognuno dei più belli in vendita
   (vetrina() in app.js). Il testo, chiaro, sta in basso a sinistra su un velo
   scuro che sale dal bordo basso e da sinistra e lascia pulito il resto della
   foto; in basso a destra la didascalia dell'immobile porta alla sua scheda.
   Su schermi stretti o verticali il testo torna nero sul crema e la foto
   scende sotto, con la didascalia sul suo bordo basso.
   Riempie sempre tutto lo schermo, anche sui monitor alti (niente tetto).
   --durata è quanto resta ferma ogni foto, --dissolvenza il passaggio. */
.hero{--durata:7s;--dissolvenza:1.8s;position:relative;z-index:6;display:flex;align-items:flex-end;height:100vh;height:100svh;min-height:calc(560px + var(--testata));color:var(--bianco);background:var(--osso);overflow-x:clip}
/* z-index: foto e velo restano un piano solo, sotto testo e didascalia */
.hero-sfondo{position:absolute;inset:0;z-index:0}
.hero-foto{position:absolute;inset:0;overflow:hidden;overflow:clip}
/* il velo sta sopra le foto e resta fermo mentre loro scorrono */
.hero-foto::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(18,15,11,.66) 0%,rgba(18,15,11,.34) 30%,rgba(18,15,11,0) 58%),
    linear-gradient(90deg,rgba(18,15,11,.36) 0%,rgba(18,15,11,0) 55%);
}
.hero-strato{position:absolute;inset:0}
/* la foto nuova si apre sopra la vecchia, che resta piena sotto di lei
   (uscente) finché non è coperta del tutto: nessun vuoto a metà passaggio */
.vetrina-foto{position:absolute;inset:0;display:block;opacity:0;transition:opacity var(--dissolvenza) var(--ease-io)}
.vetrina-foto.attiva{opacity:1;z-index:2}
.vetrina-foto.uscente{opacity:1;z-index:1}
/* la foto che arriva col dito resta sopra finché il gesto non si chiude */
.vetrina-foto.arriva{z-index:3}
.vetrina-foto img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
/* col dito: in verticale scorre la pagina, in orizzontale la vetrina (vetrina() in app.js) */
.hero{touch-action:pan-y pinch-zoom}
.hero-sfondo{-webkit-user-select:none;user-select:none}
.hero.trascina{cursor:grabbing;-webkit-user-select:none;user-select:none}
.hero-in{position:relative;z-index:1;width:100%;padding-bottom:clamp(40px,7vh,88px)}
.hero-testo{max-width:min(46vw,680px)}
.hero-eyebrow{
  display:flex;flex-wrap:wrap;gap:.4em 2em;margin:0 0 clamp(16px,1.6vw,26px);
  font-size:clamp(13px,1.2vw,19px);letter-spacing:.22em;text-transform:uppercase;font-weight:400;
}
.hero h1{font-size:clamp(40px,4.1vw,76px);font-weight:400;line-height:1.14;letter-spacing:-.03em}
.hero h1>span{display:block}
.hero h1 strong{font-weight:600}
.hero-sotto{margin:clamp(14px,1.4vw,22px) 0 0;font-size:clamp(18px,1.75vw,30px);line-height:1.35;letter-spacing:-.01em}
.hero-cta{
  display:inline-flex;align-items:center;gap:14px;margin-top:clamp(28px,3.4vw,56px);
  font-size:clamp(14px,1.3vw,21px);letter-spacing:.2em;text-transform:uppercase;
}
.hero-cta span{position:relative;padding-bottom:4px}
.hero-cta span::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor}
/* al passaggio la linea esce a destra e rientra da sinistra */
.hero-cta:hover span::after{animation:linea 1s var(--ease-io)}
@keyframes linea{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.hero-cta svg{width:1.15em;height:1.15em;flex:none;transition:transform .7s var(--ease)}
.hero-cta:hover svg{transform:translate(3px,-3px)}

/* didascalia: tipologia e comune, nome, prezzo; sotto una barretta per
   immobile, quella in corso si riempie nel tempo in cui la foto resta */
.vetrina-posto{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:flex-end;padding-bottom:clamp(40px,7vh,88px);pointer-events:none}
.vetrina{width:min(380px,32vw);pointer-events:auto;transition:opacity .9s var(--ease)}
.vetrina.vuota{opacity:0;visibility:hidden}
.vetrina-link{display:grid;justify-items:start;gap:5px;padding-bottom:18px}
.vetrina-link>*{transition:opacity .45s var(--ease),transform .7s var(--ease)}
.vetrina-link>:nth-child(2){transition-delay:.05s}
.vetrina-link>:nth-child(3){transition-delay:.1s}
.vetrina.cambia .vetrina-link>*{opacity:0;transform:translateY(8px);transition-duration:.3s;transition-delay:0s}
.vetrina-tipo{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.88}
.vetrina-nome{font-size:clamp(21px,1.75vw,28px);line-height:1.18;letter-spacing:-.02em}
.vetrina-prezzo{display:flex;align-items:center;gap:10px;font-size:15.5px;letter-spacing:.01em}
.vetrina-prezzo svg{flex:none;transition:transform .7s var(--ease)}
.vetrina-link:hover .vetrina-prezzo svg{transform:translate(3px,-3px)}
.vetrina-link:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:2px}
.vetrina-comandi{display:flex;align-items:center;gap:14px}
.vetrina-passi{flex:1;display:flex;gap:6px}
.vetrina-passi button{position:relative;flex:1;height:24px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.vetrina-passi button::before,.vetrina-passi i{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px}
.vetrina-passi button::before{background:currentColor;opacity:.32;transition:opacity .3s}
.vetrina-passi button:hover::before{opacity:.6}
.vetrina-passi i{background:currentColor;transform:scaleX(0);transform-origin:left}
.vetrina-passi .attivo i{transform:none}
.vetrina-passi button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.vetrina-tasti{flex:none;display:flex;align-items:center;margin-right:-7px}
.vetrina-tasti button{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.85;transition:opacity .2s}
.vetrina-tasti button:hover{opacity:1}
.vetrina-tasti button:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.vetrina-tasti .vetrina-freccia{transition:opacity .2s,transform .5s var(--ease)}
.vetrina-freccia[data-verso='-1']:hover{transform:translateX(-2px)}
.vetrina-freccia[data-verso='1']:hover{transform:translateX(2px)}
/* sui telefoni si scorre col dito: le frecce servono a mouse e tastiera */
@media (hover:none){.vetrina-tasti .vetrina-freccia{display:none}}
.vetrina-pausa .ico-avvia,.vetrina-pausa[aria-pressed='true'] .ico-pausa{display:none}
.vetrina-pausa[aria-pressed='true'] .ico-avvia{display:block}
/* senza movimento la vetrina non scorre da sola: si cambia foto dalle barrette */
html:not(.anim) .vetrina-pausa{display:none}


/* =====================================================================
   Tendine personalizzate
   Il <select> nativo resta nel DOM per semantica e invio del form,
   ma viene nascosto: l'interazione avviene sul listbox qui sotto.
   ===================================================================== */
.tendina{position:relative}
.tendina>select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
/* sui telefoni il <select> trasparente copre il bottone: il tocco apre il
   selettore del sistema, il bottone resta solo la parte visibile. 16px
   evitano lo zoom di iOS sul campo. */
.tendina--nativa>select{inset:0;width:100%;height:100%;z-index:1;pointer-events:auto;clip-path:none;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
.tendina--nativa .tendina-pannello{display:none}
.tendina--nativa:focus-within .tendina-btn{border-color:var(--blu)}

.tendina-btn{
  display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
  background:none;border:0;padding:0;text-align:left;color:inherit;
}
.tendina-btn .valore{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tendina-btn .frecciola{
  flex:none;color:var(--grigio);transition:transform .3s var(--transizione),color .2s;
}
.tendina[data-aperta='true'] .frecciola{transform:rotate(180deg);color:var(--blu)}

.tendina-pannello{
  position:absolute;z-index:60;top:calc(100% + 8px);left:0;min-width:100%;
  background:var(--bianco);border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--ombra-alta);padding:6px;max-height:min(52vh,330px);overflow-y:auto;
  opacity:0;transform:translateY(-7px) scale(.985);pointer-events:none;
  transition:opacity .2s var(--transizione),transform .24s var(--transizione);
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
}
.tendina[data-aperta='true'] .tendina-pannello{opacity:1;transform:none;pointer-events:auto}
/* se sotto non c'è spazio il pannello si apre verso l'alto */
.tendina.verso-alto .tendina-pannello{top:auto;bottom:calc(100% + 8px);transform:translateY(7px) scale(.985)}
.tendina.verso-alto[data-aperta='true'] .tendina-pannello{transform:none}
/* se a destra non c'è spazio si allinea al bordo opposto */
.tendina.verso-sinistra .tendina-pannello{left:auto;right:0}
.tendina-pannello::-webkit-scrollbar{width:8px}
.tendina-pannello::-webkit-scrollbar-thumb{background:var(--linea);border-radius:99px;border:2px solid #fff}

.tendina-voce{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:8px;
  background:none;cursor:pointer;font-size:14.5px;font-weight:500;color:var(--inchiostro-2);
  text-align:left;white-space:nowrap;transition:background .16s,color .16s;
}
.tendina-voce .spunta{flex:none;width:15px;opacity:0;color:var(--blu);transition:opacity .16s}
.tendina-voce:hover,.tendina-voce.evidenziata{background:var(--osso);color:var(--inchiostro)}
.tendina-voce[aria-selected='true']{color:var(--blu-scuro);font-weight:600}
.tendina-voce[aria-selected='true'] .spunta{opacity:1}
.tendina-voce[aria-selected='true']:hover,
.tendina-voce[aria-selected='true'].evidenziata{background:var(--blu-chiaro)}

/* variante "campo": dentro la barra di ricerca e nei moduli */
.tendina--campo .tendina-btn{font-size:15px;font-weight:500;padding:0}
.tendina--campo .tendina-btn .valore{color:var(--inchiostro)}

/* variante "modulo": look da input, usata nei form */
.tendina--modulo .tendina-btn{
  border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px;
  font-size:15px;background:var(--bianco);transition:.2s;
}
.tendina--modulo .tendina-btn:hover{border-color:#cfc9c0}
.tendina--modulo[data-aperta='true'] .tendina-btn{border-color:var(--blu)}

/* variante della barra filtri */
.tendina--pillola .tendina-btn{
  border:1px solid #d7dce2;background:var(--bianco);border-radius:var(--r);
  padding:9px 15px;font-size:13.8px;font-weight:500;transition:.2s;white-space:nowrap;
}
.tendina--pillola .tendina-btn:hover{border-color:var(--blu)}
.tendina--pillola[data-aperta='true'] .tendina-btn{border-color:var(--blu)}
.tendina--pillola.selezionata .tendina-btn{
  border-color:var(--blu);background:var(--blu-chiaro);color:var(--blu-scuro);font-weight:600;
}
.tendina--pillola.selezionata .frecciola{color:var(--blu)}
.tendina--pillola .tendina-pannello{min-width:max(100%,236px)}

.tendina-btn:focus-visible{outline:2px solid var(--blu);outline-offset:3px;border-radius:var(--r)}
.tendina--campo .tendina-btn:focus-visible,
.tendina--modulo .tendina-btn:focus-visible{border-radius:var(--r)}

/* numeri dell'agenzia: cifre fuori scala, sottili, che contano fino al valore
   quando entrano in vista; al passaggio ingrassano come le voci del menu */
.numeri{padding-block:clamp(48px,6.5vw,96px) clamp(8px,2vw,24px)}
.numeri-in{display:grid;grid-template-columns:repeat(3,1fr)}
.numero{display:flex;flex-direction:column;padding:6px clamp(20px,3vw,48px) 8px;min-width:0}
.numero:first-child{padding-left:0}
.numero:last-child{padding-right:0}
.numero+.numero{border-left:1px solid var(--linea)}
.numero .sopra{margin-bottom:clamp(10px,1.4vw,20px)}
.numero-cifra{
  display:flex;align-items:flex-start;font-family:var(--display);
  font-size:clamp(64px,8.4vw,138px);font-weight:250;line-height:.92;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;color:var(--inchiostro);white-space:nowrap;
  transition:font-weight .55s cubic-bezier(.32,.72,0,1);
}
.numero:hover .numero-cifra{font-weight:450}
/* il «+» centrato sulle cifre: centrato nel box cade un filo più in basso
   del loro centro visivo, da qui la piccola risalita */
.numero-cifra i{align-self:center;translate:0 -.08em;font-style:normal;font-size:.48em;line-height:1;letter-spacing:0;margin-left:.06em;color:var(--sabbia)}
.numero-testo{margin:clamp(14px,1.6vw,24px) 0 0;font-size:clamp(15px,1.15vw,17.5px);line-height:1.45;color:var(--inchiostro-2);max-width:25ch}
.numero-testo [data-anni]{color:var(--inchiostro);font-weight:600}

/* fondazione in home: la data enorme, riempita con il panorama di Ostuni.
   Quando entra in scena parte dall'anno in corso e i rulli scendono subito,
   anno per anno, fino a fermarsi sul 1987 (fondazione() in app.js). --p segue quella discesa: le cifre passano da un tratto sottile a
   uno pieno. Lo scorrimento muove
   solo la foto dentro le cifre (--s). --p vale 1 di partenza, così senza
   script o con il movimento ridotto si vede subito «Fondata nel 1987». */
.fondazione{--p:1;--s:.5;padding-block:clamp(56px,7vw,110px) clamp(24px,3vw,48px)}
.fondazione-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:end}
.fondazione .sopra{grid-column:1/-1}
/* occhiello: vuoto durante la discesa, «Fondata nel» all'arrivo sul 1987 */
.sopra-scambio{display:inline-block;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.fondazione.in-viaggio .sopra-scambio{opacity:0;transform:translateY(6px)}
/* la data si misura sulla sua colonna e non sulla finestra: a peso pieno è
   larga 2,29em, quindi 42cqi la tengono sempre lontana dal testo accanto */
.anno-box{container-type:inline-size;min-width:0}
.anno{
  display:flex;width:fit-content;margin:-.1em 0 -.08em;
  font-size:min(42cqi,330px);line-height:1;letter-spacing:-.06em;white-space:nowrap;
  font-weight:calc(200 + var(--p) * 380);font-variant-numeric:tabular-nums;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(180deg,rgba(20,20,20,0) 38%,rgba(20,20,20,.34)),url('../photos/hero-ostuni-bg-1440.jpg');
  background-size:cover;background-position:50% calc(10% + var(--s) * 60%);
  /* la finestra dei rulli: il testo che riempie la foto non rispetta
     l'overflow delle colonne, quindi si ritaglia la data intera all'altezza
     delle cifre (da .12em a .87em della riga) */
  clip-path:inset(.11em -.2em);
}
/* rulli: una colonna per cifra con 0-9 e di nuovo 0, che scorre di --d
   cifre. Si sposta con il margine e non con transform, così il testo resta
   dentro la foto dell'.anno. Celle alte .8em: con le metriche di Geist la
   cifra vi sta da .02em a .77em, e la finestra di .76em cade nello stesso
   punto della riga di testo. */
.rullo{display:block;height:.76em;margin-block:.12em;overflow:hidden}
.rullo>span{display:block;margin-top:calc(-.02em - var(--d) * .8em)}
.rullo i{display:block;height:.8em;line-height:.8em;font-style:normal}
.fondazione-testo{padding-bottom:clamp(8px,1.2vw,22px);min-width:0}
.fondazione-frase{margin:0;font-size:clamp(24px,2.5vw,40px);font-weight:300;line-height:1.12;letter-spacing:-.03em;max-width:15ch;text-wrap:balance}
.fondazione-anni{margin:clamp(14px,1.6vw,22px) 0 0;font-size:clamp(15.5px,1.2vw,18px);color:var(--inchiostro-2)}
.fondazione-anni b{color:var(--inchiostro);font-weight:600}

/* =====================================================================
   Sezioni
   ===================================================================== */
.sez{padding:clamp(64px,9vw,118px) 0}
.sez-osso{background:var(--osso)}
.sez-sabbia{background:var(--sabbia-chiara)}
.sez-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin-bottom:clamp(34px,4vw,54px);flex-wrap:wrap}
.sez-testa.centro{flex-direction:column;align-items:center;text-align:center}
/* invito a tutto il portafoglio in fondo a una selezione: sui telefoni prende
   il posto del bottone accanto al titolo, che stava tra il titolo e la ricerca */
.tutti-riga{display:none;align-items:center;gap:16px;margin-top:clamp(32px,8vw,44px);padding:20px 0;border-block:1px solid var(--linea);color:var(--inchiostro);-webkit-tap-highlight-color:transparent}
.tutti-riga-t{flex:1;min-width:0;font-size:22px;font-weight:400;letter-spacing:-.025em;line-height:1.1}
.tutti-n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--grigio);font-variant-numeric:tabular-nums}
.tutti-freccia{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--inchiostro);display:grid;place-items:center;transition:background .25s,color .25s}
.tutti-riga:active .tutti-freccia{background:var(--inchiostro);color:#fff}

/* =====================================================================
   Schede immobile
   ===================================================================== */
.griglia-immobili{display:grid;grid-template-columns:repeat(auto-fill,minmax(322px,1fr));gap:clamp(20px,2.6vw,34px);align-content:start}

.scheda{
  position:relative;background:var(--bianco);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--linea);display:flex;flex-direction:column;
  transition:.4s var(--transizione);
}
.scheda:hover{border-color:var(--inchiostro)}
.scheda-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--osso)}
.scheda-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.scheda:hover .scheda-foto img{transform:scale(1.045)}
.scheda-foto::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 42%,transparent 62%,rgba(0,0,0,.34))}

.tag{
  position:absolute;top:14px;left:14px;z-index:2;padding:6px 11px;border-radius:var(--r);
  background:rgba(255,255,255,.95);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--inchiostro);
}
.tag-blu{background:var(--blu);color:#fff}
.scheda-nfoto{
  position:absolute;bottom:12px;right:12px;z-index:2;display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--r);background:rgba(19,41,60,.62);backdrop-filter:blur(4px);
  color:#fff;font-size:11.5px;font-weight:600;
}
.scheda-prezzo{
  position:absolute;bottom:12px;left:14px;z-index:2;color:#fff;
  font-family:var(--display);font-size:24px;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.scheda-corpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.scheda-luogo{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blu);font-weight:700;margin-bottom:9px}
.scheda h3{font-size:22px;margin-bottom:7px;font-weight:500}
.scheda-occhiello{color:var(--inchiostro-2);font-size:14.5px;line-height:1.5;margin-bottom:16px;flex:1}
.dati{display:flex;gap:18px;padding-top:15px;border-top:1px solid var(--linea);flex-wrap:wrap;align-items:center}
.dati div{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--inchiostro-2);font-weight:500}
.dati svg{color:var(--grigio);flex:none}
/* affordance discreta: compare solo al passaggio del mouse */
.dati .vaialla{
  margin-left:auto;color:var(--blu);font-weight:600;opacity:0;transform:translateX(-5px);
  transition:opacity .3s var(--transizione),transform .3s var(--transizione);
}
.scheda:hover .dati .vaialla{opacity:1;transform:none}
@media (hover:none){.dati .vaialla{opacity:1;transform:none}}

.scheda-link{position:absolute;inset:0;z-index:1}

/* =====================================================================
   Chi siamo
   ===================================================================== */
.doppia{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(34px,6vw,86px);align-items:center}
.doppia.inv{direction:rtl}.doppia.inv>*{direction:ltr}
.figura{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ombra)}
.figura img{width:100%;aspect-ratio:4/3;object-fit:cover}
.figura-tag{
  position:absolute;left:0;bottom:0;background:var(--bianco);padding:18px 26px;border-top-right-radius:var(--r-lg);
}
/* l'agenzia in home (e la storia in agenzia.html): la vetrina ritoccata (vetrina-viva.jpg, più contrasto e
   luce calda), un po' più grande; il velo serve solo su telefono */
.agenzia-home .doppia{grid-template-columns:1.15fr 1fr}
.figura-viva img{height:auto;aspect-ratio:5/4;object-position:62% 50%}
.velo{display:none}
.figura-tag b{display:block;font-family:var(--display);font-size:34px;line-height:1;color:var(--blu)}
.figura-tag span{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--grigio);font-weight:600}

.citazione{
  border-left:2px solid var(--blu);padding:4px 0 4px 22px;margin:26px 0;
  font-family:var(--display);font-size:clamp(19px,2.2vw,23px);line-height:1.42;color:var(--inchiostro);
}
.firma{display:flex;align-items:center;gap:14px;margin-top:26px}
.firma .cerchio{flex:none;width:56px;height:56px;border-radius:999px;object-fit:cover;background:var(--osso);box-shadow:0 0 0 1px rgba(20,20,20,.06),0 6px 16px -8px rgba(20,20,20,.35)}
.firma b{display:block;font-size:15px}
.firma span{font-size:13px;color:var(--grigio)}

/* sulla stampa: il ritaglio di giornale composto in tipografia, accanto le
   parole del titolare e sotto tre cifre dell'articolo */
.stampa{border-top:1px solid var(--linea)}
.stampa-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(34px,6vw,86px);align-items:center}
.stampa-in .citazione{margin-top:0}
/* il ritaglio vero: testata ufficiale del giornale, poi rubrica, foto e
   titolo presi dalla pagina stampata. La carta è il bianco della pagina
   (#fefefe), così i ritagli non mostrano bordi; appena inclinata, si
   raddrizza e si solleva al passaggio */
.ritaglio{margin:0;justify-self:center;width:100%;max-width:480px}
.ritaglio-carta{
  background:#fefefe;padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,30px) clamp(24px,2.8vw,36px);
  rotate:-1.2deg;
  box-shadow:0 1px 1px rgba(60,45,20,.06),0 3px 8px -2px rgba(60,45,20,.08),0 28px 56px -30px rgba(60,45,20,.4);
  transition:rotate .9s var(--molla),transform .9s var(--molla),box-shadow .9s var(--ease);
}
.ritaglio:hover .ritaglio-carta{rotate:0deg;transform:translateY(-6px);box-shadow:0 1px 1px rgba(60,45,20,.05),0 6px 14px -4px rgba(60,45,20,.1),0 44px 80px -36px rgba(60,45,20,.46)}
.ritaglio img{width:100%;height:auto}
.ritaglio-testata{padding-bottom:12px;border-bottom:3px double #141414}
.ritaglio-riga{
  display:flex;justify-content:space-between;gap:12px;margin:9px 0 clamp(18px,2.2vw,26px);
  font-family:Georgia,'Times New Roman',serif;font-size:12.5px;line-height:1.2;color:#3d3d3e;
}
.ritaglio-riga span{font-weight:700}
.ritaglio-rubrica{width:92%!important;margin:0 auto clamp(14px,1.6vw,20px)}
.stampa-dati{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea)}
.stampa-dati li{padding:clamp(20px,2.4vw,30px) clamp(20px,3vw,48px) 0;min-width:0}
.stampa-dati li:first-child{padding-left:0}
.stampa-dati li:last-child{padding-right:0}
.stampa-dati li+li{border-left:1px solid var(--linea)}
.stampa-dati b{
  display:block;font-size:clamp(34px,3.6vw,54px);font-weight:250;line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:font-weight .55s cubic-bezier(.32,.72,0,1);
}
.stampa-dati li:hover b{font-weight:450}
.stampa-dati span{display:block;margin-top:12px;font-size:15px;line-height:1.45;color:var(--inchiostro-2);max-width:30ch}
@media (max-width:900px){
  .stampa-in{grid-template-columns:1fr}
  .stampa-dati{grid-template-columns:1fr}
  .stampa-dati li,.stampa-dati li:first-child,.stampa-dati li:last-child{padding:20px 0}
  .stampa-dati li+li{border-left:0;border-top:1px solid var(--linea)}
}
@media (prefers-reduced-motion:reduce){.ritaglio-carta,.ritaglio:hover .ritaglio-carta{transition:none;transform:none}}

.elenco-segni{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.elenco-segni li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--inchiostro-2)}
.elenco-segni svg{flex:none;margin-top:4px;color:var(--blu)}

/* =====================================================================
   Servizi
   ===================================================================== */
/* home: le quattro fasi come pannelli affiancati. Quello aperto si allarga e
   mostra la frase; gli altri tengono solo il nome, in verticale. Il testo
   del pannello aperto ha una larghezza fissa, così non si ricompone mentre
   il pannello cresce. */
.fasi{display:flex;gap:clamp(8px,1vw,14px);height:clamp(440px,44vw,620px)}
.fase{
  --pad:clamp(20px,2vw,30px);
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--r-lg);
  color:#fff;background:var(--inchiostro);transition:flex-grow .9s var(--ease);
}
.fase.aperta{flex-grow:2.6}
.fase img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s}
.fase:not(.aperta) img{opacity:.72}
.fase.aperta:hover img{transform:scale(1.04)}
.fase::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.26),transparent 28%,transparent 48%,rgba(0,0,0,.64))}
.fase-n,.fase-freccia,.fase-v,.fase-in{position:absolute;z-index:1}
.fase-n{top:var(--pad);left:var(--pad);font-size:14px;font-weight:600;letter-spacing:.14em;line-height:1}
.fase-freccia{top:calc(var(--pad) - 5px);right:var(--pad);opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .8s var(--ease)}
.fase.aperta .fase-freccia{opacity:1;transform:none}
.fase.aperta:hover .fase-freccia{transform:translate(3px,-3px)}
.fase-v{
  left:var(--pad);bottom:var(--pad);writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(22px,2vw,30px);font-weight:300;letter-spacing:-.02em;line-height:1;white-space:nowrap;transition:opacity .4s;
}
.fase.aperta .fase-v{opacity:0}
.fase-in{left:var(--pad);bottom:var(--pad);width:clamp(250px,24vw,400px);opacity:0;transform:translateY(12px);transition:opacity .35s,transform .8s var(--ease)}
.fase.aperta .fase-in{opacity:1;transform:none;transition-delay:.3s}
.fase-in h3{font-size:clamp(32px,3.4vw,54px);font-weight:300;letter-spacing:-.045em;line-height:1}
.fase-in p{margin:14px 0 0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.45;color:rgba(255,255,255,.88);max-width:30ch}

/* ---------- pagina servizi: dal terreno alle chiavi ---------- */
.intestazione-grande{padding-bottom:clamp(36px,5vw,64px)}
.intestazione.intestazione-grande h1{font-size:clamp(46px,8.2vw,132px);font-weight:300;letter-spacing:-.05em;line-height:.96}
.intestazione.intestazione-grande h1 + p{font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:40ch;margin-top:clamp(18px,2vw,28px)}

/* le quattro fasi come un binario: ogni tratto si traccia in sequenza */
.catena{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,22px);margin-top:clamp(36px,4.5vw,64px)}
.catena a{position:relative;padding-top:18px;font-size:clamp(15px,1.2vw,18px);letter-spacing:.02em;text-transform:uppercase;transition:color .3s}
.catena a::before,.catena a::after{content:'';position:absolute;top:0;left:0;right:0;transform-origin:left}
.catena a::before{height:1px;background:var(--inchiostro);opacity:.3}
.catena a::after{height:2px;top:-.5px;background:var(--inchiostro);transform:scaleX(0);transition:transform .8s var(--ease)}
.catena a:hover::after,.catena a:focus-visible::after{transform:none}
.anim .catena a{opacity:0;animation:affiora .9s var(--ease) forwards}
.anim .catena a::before{transform:scaleX(0);animation:traccia 1.1s var(--ease) forwards}
.catena a:nth-child(1),.catena a:nth-child(1)::before{animation-delay:.45s}
.catena a:nth-child(2),.catena a:nth-child(2)::before{animation-delay:.6s}
.catena a:nth-child(3),.catena a:nth-child(3)::before{animation-delay:.75s}
.catena a:nth-child(4),.catena a:nth-child(4)::before{animation-delay:.9s}
@keyframes traccia{to{transform:none}}
@keyframes affiora{to{opacity:1}}

/* filiera: foto ferma a sinistra, tappe a destra lungo una linea che si riempie */
.filiera{padding-block:clamp(56px,8vw,120px)}
.filiera-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,104px);align-items:start}
.filiera-foto{
  position:sticky;top:calc(var(--testata) + 24px);
  height:calc(100vh - var(--testata) - 48px);min-height:420px;max-height:800px;
  border-radius:var(--r-lg);overflow:hidden;background:var(--sabbia-chiara);
}
.filiera-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.08;transition:opacity 1s var(--ease-io),scale 2.4s var(--ease)}
.filiera-foto img.on{opacity:1;scale:1}
.filiera-foto::after{content:'';position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.42));pointer-events:none}
.filiera-conta{position:absolute;left:clamp(20px,2.4vw,32px);bottom:clamp(16px,2vw,26px);z-index:2;display:flex;align-items:baseline;gap:10px;color:#fff;font-size:16px;letter-spacing:.04em}
.filiera-conta b{font-size:clamp(44px,4.4vw,72px);font-weight:300;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.filiera-conta span{opacity:.75}

.passi{--avanza:0;--rientro:clamp(26px,3vw,52px);list-style:none;margin:0;padding:0 0 0 var(--rientro);position:relative}
.passi::before,.passi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:1px}
.passi::before{background:var(--linea)}
.passi::after{background:var(--inchiostro);transform:scaleY(var(--avanza));transform-origin:top}
.passo{display:flex;flex-direction:column;justify-content:center;min-height:min(78vh,720px);padding-block:40px}
.passo-n{font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--sabbia);font-variant-numeric:tabular-nums;margin-bottom:12px}
.passo h2{
  font-size:clamp(46px,6.4vw,104px);font-weight:300;letter-spacing:-.05em;line-height:.95;
  color:#cdc4b2;transition:color .7s var(--ease),font-weight .7s cubic-bezier(.32,.72,0,1);
}
.passo.attivo h2{color:var(--inchiostro);font-weight:400}
.passo p{margin:clamp(18px,2vw,28px) 0 0;font-size:clamp(18px,1.6vw,23px);line-height:1.4;color:var(--inchiostro-2);max-width:25ch}
.passo .passo-voci{margin-top:18px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--grigio);max-width:none}
.passo-foto{display:none}
/* invito: link in maiuscoletto con freccia, verso la pagina dove il discorso continua */
.invito{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:26px;
  font-size:13.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--inchiostro);
}
.invito span{position:relative;padding-bottom:4px}
.invito span::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor}
.invito:hover span::after{animation:linea 1s var(--ease-io)}
.invito svg{flex:none;transition:transform .7s var(--ease)}
.invito:hover svg{transform:translate(3px,-3px)}

/* manifesto: una frase sola, grande, sulla pietra */
.manifesto{position:relative;overflow:hidden;color:#fff;background:var(--inchiostro)}
.manifesto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.manifesto::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.12))}
.manifesto-in{position:relative;z-index:1;padding-block:clamp(110px,15vw,230px)}
.manifesto .sopra{color:#fff}
.manifesto .sopra::before{background:#fff}
.manifesto h2{font-size:clamp(38px,6.2vw,100px);font-weight:300;letter-spacing:-.045em;line-height:1.02;max-width:13ch;text-wrap:balance}

/* altri servizi: un elenco da indice, voci grandi che ingrassano al passaggio */
.altri{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.altri a{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:clamp(16px,3vw,48px);padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--linea)}
.altri-t{font-size:clamp(28px,4vw,58px);font-weight:300;letter-spacing:-.04em;line-height:1.05;transition:font-weight .55s cubic-bezier(.32,.72,0,1),transform .8s var(--ease)}
.altri-d{font-size:16px;color:var(--grigio);text-align:right}
.altri svg{flex:none;transition:transform .8s var(--ease)}
.altri a:hover .altri-t,.altri a:focus-visible .altri-t{font-weight:500;transform:translateX(12px)}
.altri a:hover svg{transform:translate(4px,-4px)}

/* =====================================================================
   Zone
   ===================================================================== */
.griglia-zone{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:clamp(16px,2vw,26px)}
.zona{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff}
.zona img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.zona:hover img{transform:scale(1.05)}
.zona::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,38,0) 30%,rgba(10,25,38,.82) 100%)}
.zona-in{position:relative;z-index:1;padding:28px}
.zona h3{font-size:26px;margin-bottom:7px;font-weight:500}
.zona p{font-size:14.5px;color:rgba(255,255,255,.86);margin:0 0 14px}
.zona .freccia{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.05em}
.zona .freccia svg{transition:transform .3s var(--transizione)}
.zona:hover .freccia svg{transform:translateX(4px)}

/* =====================================================================
   Fascia CTA
   ===================================================================== */
.fascia{position:relative;color:#fff;overflow:hidden;background:var(--inchiostro)}
.fascia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.fascia::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(19,41,60,.94) 30%,rgba(19,41,60,.55) 100%)}
.fascia-in{position:relative;z-index:1;padding-block:clamp(56px,7vw,96px);display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center}
.fascia h2{font-size:clamp(27px,3.6vw,42px);font-weight:400;max-width:20ch}
.fascia p{color:rgba(255,255,255,.8);max-width:52ch;margin:14px 0 0}

/* =====================================================================
   Pagina elenco
   ===================================================================== */
.intestazione{padding:calc(var(--testata) + clamp(40px,6vw,70px)) 0 clamp(30px,4vw,48px);background:var(--osso);border-bottom:1px solid var(--linea)}
.briciole{font-size:13px;color:var(--grigio);margin-bottom:16px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.briciole a:hover{color:var(--blu)}
.intestazione h1{font-size:clamp(34px,4.8vw,56px);font-weight:400;letter-spacing:-.025em}
.intestazione p{margin:14px 0 0;color:var(--inchiostro-2);max-width:60ch}

/* le tendine chiuse restano nel flusso: senza clip allargherebbero la pagina su mobile */
.barra-filtri{position:sticky;top:var(--testata);z-index:40;overflow-x:clip;background:var(--osso);border-bottom:1px solid var(--linea)}
.filtri{display:flex;gap:10px;padding:15px 0;align-items:center;flex-wrap:wrap}
.filtro{position:relative}
.filtri .spinta{margin-left:auto;display:flex;gap:10px;align-items:center}
.conteggio{font-size:13.5px;color:var(--grigio);font-weight:500}
.conteggio b{color:var(--inchiostro);font-weight:600}
.azzera{
  border:1px solid transparent;background:none;color:var(--blu);font-size:13.5px;font-weight:600;
  cursor:pointer;padding:7px 13px;border-radius:var(--r);display:none;align-items:center;gap:7px;transition:.2s;
}
.azzera.mostra{display:inline-flex}
.azzera:hover{background:var(--blu-chiaro);border-color:var(--blu-chiaro)}

/* =====================================================================
   Ricerca con frasi naturali (home e elenco, barraRicerca in app.js)
   Niente colore: profondità con ombre calde e morbide, e piccoli movimenti
   che rispondono a ogni gesto. --molla supera appena il segno e torna, per
   ciò che compare o si preme; il resto si posa con --ease.
   ===================================================================== */
:root{
  --molla:cubic-bezier(.34,1.45,.64,1);
  --ombra-campo:0 1px 1px rgba(40,30,15,.03),0 3px 8px -3px rgba(40,30,15,.06),0 14px 30px -18px rgba(40,30,15,.16);
  --ombra-campo-su:0 1px 2px rgba(40,30,15,.04),0 6px 14px -6px rgba(40,30,15,.09),0 22px 44px -22px rgba(40,30,15,.24);
  --ombra-campo-fuoco:0 0 0 4px rgba(20,20,20,.045),0 2px 4px rgba(40,30,15,.05),0 26px 56px -24px rgba(40,30,15,.32);
  --ombra-pop:0 1px 2px rgba(40,30,15,.05),0 12px 28px -10px rgba(40,30,15,.18),0 36px 70px -34px rgba(40,30,15,.3);
  --scintilla:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3c.5 4.6 2.4 6.5 7 7-4.6.5-6.5 2.4-7 7-.5-4.6-2.4-6.5-7-7 4.6-.5 6.5-2.4 7-7zM18.5 14c.2 2 1 2.8 3 3-2 .2-2.8 1-3 3-.2-2-1-2.8-3-3 2-.2 2.8-1 3-3z'/%3E%3C/svg%3E");
}
.cerca{max-width:900px;display:flex;gap:10px;align-items:stretch}
.sez-testa+.cerca-posto{margin-top:calc(-1 * clamp(10px,1.5vw,22px));margin-bottom:clamp(30px,3.4vw,44px)}
.intestazione .cerca-posto{margin-top:clamp(26px,3vw,38px)}

/* il campo poggia sulla pagina con un'ombra appena percettibile; al
   passaggio si solleva un poco, scrivendo di più, con un alone neutro */
.cerca-campo{
  position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:56px;padding:0 14px 0 18px;
  background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--ombra-campo);
  transition:border-color .3s,box-shadow .6s var(--ease);
}
.cerca-campo:hover{border-color:#d8d0bf;box-shadow:var(--ombra-campo-su)}
.cerca-campo:focus-within{border-color:rgba(20,20,20,.45);box-shadow:var(--ombra-campo-fuoco)}
.cerca-campo>svg{flex:none;color:var(--grigio);transition:color .3s,transform .55s var(--molla)}
.cerca-campo:focus-within>svg{color:var(--inchiostro);transform:scale(1.08)}
.cerca-scrivi{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center}
.cerca-campo input{width:100%;height:100%;border:0;padding:0;background:none;font:inherit;font-size:16px;color:var(--inchiostro);outline:0;text-overflow:ellipsis}
.cerca-campo input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* il segnaposto vero resta per i lettori di schermo; si vede quello che gira:
   una frase sale e sfuma, la successiva arriva da sotto */
.cerca-campo input::placeholder{color:transparent}
.cerca-ph{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;pointer-events:none;font-size:16px;color:var(--grigio);transition:opacity .35s var(--ease)}
.cerca-ph span{position:absolute;left:0;right:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:opacity .5s var(--ease),transform .8s var(--ease),filter .5s var(--ease)}
.cerca-ph span.arriva{opacity:0;transform:translateY(10px);filter:blur(3px);transition:none}
.cerca-ph span.va{opacity:0;transform:translateY(-10px);filter:blur(3px)}
.cerca-campo input:not(:placeholder-shown)+.cerca-ph{opacity:0;transition-duration:.08s}
.cerca-grande .cerca-campo,.cerca-grande .cerca-btn{height:64px}
.cerca-grande .cerca-campo input,.cerca-grande .cerca-ph{font-size:18px}

/* il badge: scintilla e sigla in inchiostro su un filo sottile. La scintilla
   (un elemento vero, la anima app.js) guizza quando si entra nel campo e
   quando l'AI comincia a leggere la frase in anticipo */
.cerca-ai{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 7px;border:1px solid var(--linea);border-radius:4px;background:var(--bianco);font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--inchiostro-2);cursor:help;transition:border-color .3s}
.cerca-ai b{font-weight:inherit}
.cerca-ai i,.capito-ai::before{content:'';flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:var(--scintilla) center/contain no-repeat;mask:var(--scintilla) center/contain no-repeat}
.cerca-campo:focus-within .cerca-ai{border-color:#d8d0bf}

/* il bottone: nero pieno con un filo di luce in alto, si solleva al passaggio
   e cede sotto il dito */
.cerca-btn,.cerca-btn:hover{position:relative;flex:none;padding-inline:24px;background:linear-gradient(180deg,#2c2b29,#121212)}
.cerca-btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.12),0 8px 18px -10px rgba(0,0,0,.4);
  transition:transform .55s var(--molla),box-shadow .45s var(--ease);
}
.cerca-btn::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.cerca-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.14),0 16px 28px -14px rgba(0,0,0,.5)}
.cerca-btn:hover::after{opacity:1}
.cerca-btn:active{transform:scale(.965);transition-duration:.12s;transition-timing-function:var(--ease)}
.cerca-btn-in{display:inline-flex;align-items:center;gap:9px;transition:opacity .25s var(--ease),transform .5s var(--ease),filter .3s var(--ease)}
.cerca-btn-in svg{transition:transform .3s var(--transizione)}
.cerca-btn:hover .cerca-btn-in svg{transform:translateX(3px)}
/* la rotella a otto raggi, come quella di sistema: gira a scatti */
.cerca-giro{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .5s var(--molla);pointer-events:none}
.cerca-giro svg{animation:cerca-giro .8s steps(8) infinite paused}

/* mentre l'AI legge: una luce passa sulla frase scritta (sul fondo bianco
   non si vede, sulle lettere sì), l'ombra respira, la scintilla pulsa e nel
   bottone la scritta lascia il posto alla rotella */
.cerca-luce{position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none}
.cerca-luce::before{content:'';position:absolute;top:0;bottom:0;left:0;width:42%;background:linear-gradient(100deg,rgba(255,253,248,0),rgba(255,253,248,.94) 50%,rgba(255,253,248,0));transform:translateX(-110%)}
.cerca.pensa .cerca-luce{opacity:1}
.cerca.pensa .cerca-luce::before{animation:cerca-luce 1.6s var(--ease-io) infinite}
.cerca.pensa .cerca-campo{animation:cerca-respira 1.9s var(--ease-io) infinite}
.cerca.pensa .cerca-ai i{animation:cerca-pulsa 1.2s var(--ease-io) infinite}
.cerca.pensa .cerca-btn{cursor:progress}
.cerca.pensa .cerca-btn-in{opacity:0;transform:scale(.82);filter:blur(2px)}
.cerca.pensa .cerca-giro{opacity:1;transform:none}
.cerca.pensa .cerca-giro svg{animation-play-state:running}
@keyframes cerca-luce{to{transform:translateX(260%)}}
@keyframes cerca-respira{50%{box-shadow:0 0 0 4px rgba(20,20,20,.06),0 2px 5px rgba(40,30,15,.06),0 32px 64px -22px rgba(40,30,15,.42)}}
@keyframes cerca-pulsa{50%{transform:scale(.7);opacity:.45}}
@keyframes cerca-giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .cerca.pensa .cerca-luce::before,.cerca.pensa .cerca-campo,.cerca.pensa .cerca-ai i{animation:none}
  /* la rotella resta: dice che si sta lavorando */
  .cerca.pensa .cerca-giro svg{animation-duration:.8s!important}
}

/* le frasi d'esempio: la riga chiara si ripassa in inchiostro da sinistra.
   Dopo la prima ricerca la fila si richiude in altezza invece di sparire */
.cerca-prova-w{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease),opacity .35s var(--ease)}
.cerca-prova{min-height:0;margin:0;padding-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;font-size:13.5px;color:var(--grigio)}
.cerca-prova button{
  border:0;padding:0 0 3px;cursor:pointer;font:inherit;line-height:1.35;color:var(--inchiostro);
  background:linear-gradient(var(--inchiostro),var(--inchiostro)) 0 100%/0 1px no-repeat,linear-gradient(#d6cfbf,#d6cfbf) 0 100%/100% 1px no-repeat;
  transition:background-size .6s var(--ease),transform .5s var(--molla);
}
.cerca-prova button:hover,.cerca-prova button:focus-visible{background-size:100% 1px,100% 1px}
.cerca-prova button:active{transform:scale(.97);transition-duration:.1s}
.cerca-posto.attiva .cerca-prova-w{grid-template-rows:0fr;opacity:0}
.cerca-posto.attiva .cerca-prova{overflow:hidden}
.cerca-stato{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* cosa ha capito: ogni etichetta si può togliere. La fila si apre in
   altezza, il numero conta fino al totale, le etichette affiorano una dopo
   l'altra con un piccolo rimbalzo. Alla chiusura la fila si richiude */
.capito-w{display:grid;grid-template-rows:1fr;margin-bottom:clamp(24px,2.6vw,34px)}
.capito-w>.capito{min-height:0}
.capito-w.apre{animation:capito-apre .65s var(--ease) both}
.capito-w.chiude{animation:capito-chiude .42s var(--ease-io) both}
.capito-w.apre>.capito,.capito-w.chiude>.capito{overflow:hidden}
@keyframes capito-apre{from{grid-template-rows:0fr;margin-bottom:0;opacity:0}}
@keyframes capito-chiude{to{grid-template-rows:0fr;margin-bottom:0;opacity:0}}
.capito{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--linea)}
.capito-n{margin:0;font-size:15px;color:var(--grigio)}
.capito-n b{display:inline-block;color:var(--inchiostro);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.capito-voci{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.capito-voci>span:first-child{font-size:13.5px;color:var(--grigio);margin-right:2px}
.capito-ai{display:inline-flex;align-items:center;gap:6px}
.capito-ai::before{background:var(--inchiostro)}
.capito-vuota{margin:0;font-size:14px;color:var(--grigio)}
.capito.entra .capito-n,.capito.entra .capito-voci>span:first-child,.capito.entra .capito-vuota,.capito.entra .capito-azioni{animation:capito-testo .7s var(--ease) both}
.capito.entra .capito-voci>span:first-child{animation-delay:.1s}
.capito.entra .capito-azioni{animation-delay:.25s}
@keyframes capito-testo{from{opacity:0;transform:translateY(6px)}}
.voce{
  display:inline-flex;align-items:center;gap:4px;padding:5px 5px 5px 11px;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--bianco);font-size:13.5px;color:var(--inchiostro);white-space:nowrap;
  box-shadow:0 1px 1px rgba(40,30,15,.03),0 4px 10px -6px rgba(40,30,15,.12);transition:border-color .3s,box-shadow .45s var(--ease);
}
.voce:hover{border-color:#d8d0bf;box-shadow:0 1px 2px rgba(40,30,15,.05),0 8px 18px -8px rgba(40,30,15,.2)}
.capito.entra .voce{animation:voce-entra .65s var(--molla) both;animation-delay:calc(.16s + var(--i) * 60ms)}
@keyframes voce-entra{from{opacity:0;transform:scale(.86) translateY(4px);filter:blur(3px)}}
.voce button{display:flex;padding:3px;border:0;border-radius:50%;background:none;color:var(--grigio);cursor:pointer;transition:color .2s,background-color .2s,transform .45s var(--molla)}
.voce button svg{width:13px;height:13px}
.voce button:hover{color:var(--inchiostro);background:var(--sabbia-chiara)}
.voce button:active{transform:scale(.78);transition-duration:.08s}
.capito-azioni{margin-left:auto;display:flex;align-items:center;gap:6px}
.capito .azzera svg{transition:transform .55s var(--molla)}
.capito .azzera:hover svg{transform:rotate(90deg)}
.cerca-vicini{grid-column:1/-1;margin:0;font-size:15px;color:var(--grigio)}
/* il caricamento dei risultati: le schede di prima se ne vanno (.esce),
   al loro posto schede finte con la forma delle vere e una luce che le
   attraversa; la luce parte una colonna dopo l'altra (--c), così sembra una
   sola che passa sulla griglia. È un velo che scorre (transform), non uno
   sfondo che si ridisegna. Poi le vere arrivano in fila (.arriva) salendo e
   mettendosi a fuoco, e la foto si posa. Uscite e arrivi sono animazioni,
   non transizioni, così prendono il posto di quelle ancora in corso */
html.anim .griglia-immobili.esce>*{animation:esce .3s var(--ease-io) forwards}
@keyframes esce{to{opacity:0;transform:translateY(-6px) scale(.985);filter:blur(5px)}}
.scheda-finta{position:relative;border:1px solid var(--linea);border-radius:var(--r-lg);background:var(--bianco);overflow:hidden;animation:finta-entra .4s var(--ease) backwards;animation-delay:calc(var(--k) * 20ms)}
.sf-foto{aspect-ratio:4/3}
.sf-corpo{padding:24px 22px 26px}
.sf-corpo i{display:block;height:11px;border-radius:4px}
.sf-corpo i:nth-child(1){width:36%;height:9px;margin-bottom:16px}
.sf-corpo i:nth-child(2){width:64%;height:20px;margin-bottom:14px}
.sf-corpo i:nth-child(3){width:86%;margin-bottom:34px}
.sf-corpo i:nth-child(4){width:52%}
.sf-foto,.sf-corpo i,.rs-finta i,.rs-finta-capito i{background:#f2ebdc}
.scheda-finta::after,.rs-carica::after{
  content:'';position:absolute;inset:0;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(100deg,rgba(255,253,248,0) 30%,rgba(255,253,248,.92) 50%,rgba(255,253,248,0) 70%);
  animation:finta-luce 1.7s var(--ease-io) infinite;animation-delay:calc(var(--c,0) * 150ms);
}
@keyframes finta-luce{to{transform:translateX(100%)}}
@keyframes finta-entra{from{opacity:0;transform:translateY(10px)}}
.anim .griglia-immobili .arriva{animation:arriva .95s var(--ease) backwards;animation-delay:calc(var(--k) * 75ms)}
.anim .griglia-immobili .scheda.arriva .scheda-foto img{animation:arriva-foto 1.6s var(--ease) backwards;animation-delay:calc(var(--k) * 75ms)}
@keyframes arriva{from{opacity:0;transform:translateY(26px) scale(.97);filter:blur(8px)}}
@keyframes arriva-foto{from{scale:1.12}}
@media (prefers-reduced-motion:reduce){.scheda-finta::after,.rs-carica::after{display:none}}
/* a una ricerca dopo l'altra, la fila di prima resta in attesa, attenuata */
.capito-w.in-attesa{opacity:.4;transition:opacity .4s var(--ease)}

.nessuno{text-align:center;padding:70px 20px;color:var(--grigio)}
.nessuno svg{color:var(--linea);margin-bottom:18px}
.nessuno h3{font-size:24px;color:var(--inchiostro);margin-bottom:8px}

/* =====================================================================
   Scheda dettaglio
   ===================================================================== */
/* galleria: su desktop un mosaico con gli angoli arrotondati, una foto grande
   e quattro piccole (.tre: due piccole, .una: una sola); sui telefoni diventa
   una fila da scorrere col dito (vedi Responsive). */
.dett-galleria{position:relative;height:clamp(360px,62vh,620px);margin-top:calc(var(--testata) + 6px)}
.gal-foto{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:100%;border-radius:var(--r-lg);overflow:hidden}
.dett-galleria.tre .gal-foto{grid-template-columns:2fr 1fr}
.dett-galleria.una .gal-foto{grid-template-columns:1fr;grid-template-rows:1fr}
.gal-f:first-child{grid-row:span 2}
.dett-galleria.una .gal-f:first-child{grid-row:auto}
.cinque .gal-f:nth-child(n+6),.tre .gal-f:nth-child(n+4),.una .gal-f:nth-child(n+2){display:none}
.gal-f{position:relative;display:block;min-width:0;border:0;padding:0;overflow:hidden;cursor:pointer;background:var(--sabbia-chiara);-webkit-tap-highlight-color:transparent}
.gal-f img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);-webkit-user-drag:none}
.gal-f::after{content:'';position:absolute;inset:0;background:#14100a;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.gal-f:hover img{transform:scale(1.035)}
.gal-f:hover::after{opacity:.08}
.gal-f:focus-visible{outline:2px solid var(--bianco);outline-offset:-5px}
.tutte-foto{
  position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:9px;height:42px;padding:0 18px;
  border:0;border-radius:999px;background:rgba(255,253,248,.94);color:var(--inchiostro);font:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,transform .6s var(--ease);
}
.tutte-foto:hover{background:#fff;transform:translateY(-1px)}
.tutte-foto:focus-visible{outline:2px solid var(--bianco);outline-offset:3px}
/* contatore della fila (solo telefoni) */
.gal-conta{
  position:absolute;right:12px;bottom:12px;display:none;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;
  background:rgba(14,13,11,.5);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;
}
.gal-conta b{font-weight:inherit}

.dett{display:grid;grid-template-columns:1fr 372px;gap:clamp(30px,4.5vw,62px);padding:clamp(34px,5vw,60px) 0 clamp(60px,8vw,100px);align-items:start}
.dett-testa{border-bottom:1px solid var(--linea);padding-bottom:26px;margin-bottom:30px}
.dett-testa h1{font-size:clamp(30px,4.2vw,46px);font-weight:400;letter-spacing:-.025em;margin-bottom:10px}
.dett-luogo{display:flex;align-items:center;gap:8px;color:var(--inchiostro-2);font-size:15.5px}
.dett-prezzo{font-family:var(--display);font-size:clamp(30px,4vw,42px);color:var(--blu);margin-top:18px;letter-spacing:-.02em}
.dett-prezzo small{display:block;font-family:var(--testo);font-size:13px;color:var(--grigio);letter-spacing:0;margin-top:2px;font-weight:500}

.specifiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;margin-bottom:34px}
.specifica{background:var(--bianco);padding:18px 20px}
.specifica svg{color:var(--blu);margin-bottom:9px}
.specifica b{display:block;font-family:var(--display);font-size:23px;font-weight:400;line-height:1.1}
.specifica span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio);font-weight:600}

.dett h2{font-size:26px;font-weight:500;margin:36px 0 16px}
.dett-testo p{color:var(--inchiostro-2);line-height:1.78;font-size:16px}
.dotazioni{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.dotazioni li{display:flex;gap:11px;align-items:center;padding:13px 16px;background:var(--osso);border-radius:var(--r);font-size:14.5px;font-weight:500}
.dotazioni svg{color:var(--blu);flex:none}

.pannello{
  position:sticky;top:100px;border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--ombra);background:var(--bianco);
}
.pannello .rif{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);font-weight:700}
.pannello h3{font-size:21px;margin:6px 0 4px;font-weight:500}
.pannello .sotto{font-size:14px;color:var(--inchiostro-2);margin-bottom:20px}
.campo-form{margin-bottom:13px}
.campo-form label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grigio);margin-bottom:6px}
.campo-form input,.campo-form textarea{
  width:100%;border:1px solid var(--linea);border-radius:var(--r);padding:12px 14px;font-size:15px;
  background:var(--bianco);transition:.2s;
}
.campo-form input:hover,.campo-form textarea:hover{border-color:#cfc9c0}
.campo-form input:focus,.campo-form textarea:focus{outline:0;border-color:var(--blu)}
.campo-form input::placeholder,.campo-form textarea::placeholder{color:#a8b3bf}
.campo-form textarea{resize:vertical;min-height:92px;font-family:inherit}
.campo-form .errore{color:#c0392b;font-size:12.5px;margin-top:5px;display:none}
.campo-form.ko input,.campo-form.ko textarea{border-color:#e0a0a0}
.campo-form.ko .errore{display:block}
.privacy{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--grigio);margin:14px 0 16px;line-height:1.5}
.privacy input{margin-top:2px;flex:none;accent-color:var(--blu)}
.esito{
  display:none;text-align:center;padding:30px 20px;background:var(--blu-chiaro);border-radius:var(--r);
}
.esito.mostra{display:block}
.esito .segno{width:52px;height:52px;border-radius:999px;background:var(--blu);color:#fff;display:grid;place-items:center;margin:0 auto 14px}
.esito h4{font-family:var(--display);font-size:21px;margin:0 0 6px;font-weight:500}
.esito p{font-size:14px;color:var(--inchiostro-2);margin:0}

.contatto-rapido{display:grid;gap:9px;margin-top:16px;padding-top:18px;border-top:1px solid var(--linea)}
.contatto-rapido a{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:500;padding:9px 0;transition:color .2s}
.contatto-rapido a:hover{color:var(--blu)}
.contatto-rapido svg{color:var(--blu);flex:none}

.mappa-box{margin-top:14px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linea);position:relative;aspect-ratio:16/9;background:var(--osso)}
.mappa-box iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}

/* simili */
.simili{border-top:1px solid var(--linea);padding:clamp(56px,7vw,90px) 0}

/* =====================================================================
   Racconto della scheda (app.js, racconto()): copertina, capitoli con le
   loro foto, frase in evidenza, mosaico e modulo. body.vista-testo riporta
   la scheda classica (.solo-testo); senza racconto nessuna delle due classi.
   ===================================================================== */
.vista-racconto .solo-testo,.vista-testo #racconto,.vista-testo .rc-barra{display:none}

/* scelta della vista: Racconto | Solo testo */
.vista-scelta{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--linea);border-radius:var(--r);background:var(--bianco);flex:none}
.vista-scelta button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:calc(var(--r) - 2px);background:none;font-size:13px;font-weight:500;color:var(--inchiostro-2);cursor:pointer;transition:background .25s,color .25s}
.vista-scelta button:hover{color:var(--inchiostro)}
.vista-scelta button[aria-pressed=true]{background:var(--inchiostro);color:#fff;cursor:default}
.dett-testa>.vista-scelta{float:right;margin:-8px 0 12px 16px}

/* le foto: si aprono nel visore; l'immagine riempie la cornice, che ha le sue proporzioni */
.rc-apri{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.rc-f{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--sabbia-chiara)}
.rc-f .rc-apri{position:absolute;inset:0}
.rc-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);-webkit-user-drag:none}
.rc-f:hover img{transform:scale(1.025)}
.rc-apri:focus-visible{outline:2px solid var(--bianco);outline-offset:-6px}

/* copertina: a tutta larghezza, lascia vedere sotto il titolo e la scelta della vista */
.rc-copertina{position:relative;margin:var(--testata) 0 0;height:clamp(380px,calc(100vh - var(--testata) - 170px),860px);height:clamp(380px,calc(100svh - var(--testata) - 170px),860px);overflow:hidden;background:var(--sabbia-chiara)}
.rc-copertina img{width:100%;height:100%;object-fit:cover}

/* testa: titolo grande, prezzo a destra, i dati in riga */
.rc-testa{padding-top:clamp(18px,2.2vw,28px)}
.rc-riga{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(30px,3.6vw,50px)}
.rc-riga .briciole{margin:0}
.rc-titolo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px 56px}
.rc-titolo .sopra{margin-bottom:clamp(14px,1.6vw,22px)}
.rc-titolo h1{font-size:clamp(40px,5.6vw,84px);line-height:1;letter-spacing:-.035em}
.rc-luogo{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--inchiostro-2);font-size:15.5px}
.rc-prezzo{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.rc-prezzo small{display:block;margin-top:6px;font-size:13px;letter-spacing:0;color:var(--grigio);font-weight:500}
.rc-dati{list-style:none;margin:clamp(28px,3vw,42px) 0 0;padding:0;display:flex;flex-wrap:wrap;border-block:1px solid var(--linea)}
.rc-dati li{display:flex;align-items:center;gap:10px;padding:18px clamp(18px,2.4vw,34px) 18px 0;margin-right:clamp(18px,2.4vw,34px);border-right:1px solid var(--linea)}
.rc-dati li:last-child{border-right:0;margin-right:0}
.rc-dati svg{color:var(--blu);flex:none}
.rc-dati b{font-weight:500;font-size:17px}
.rc-dati span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio);font-weight:600}

/* le sezioni del racconto stanno sulla stessa griglia a 12 colonne */
.rc-apertura,.rc-cap,.rc-dotazioni,.rc-dove,.rc-contatto{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,3vw,48px)}

/* apertura: il testo d'ingresso in grande, accanto i punti forti */
.rc-apertura{padding-top:clamp(48px,6vw,90px)}
.rc-lead{grid-column:1/span 7}
.rc-apertura.senza-breve .rc-lead{grid-column:1/span 9}
.rc-lead p{font-size:clamp(19px,1.75vw,24px);line-height:1.55;letter-spacing:-.01em;color:var(--inchiostro-2);margin-bottom:.85em}
.rc-lead p:first-child,.rc-lead .rc-occhiello{color:var(--inchiostro)}
.rc-lead .rc-occhiello{font-weight:500}
.rc-breve{grid-column:9/span 4;align-self:start;border-top:1px solid var(--inchiostro);padding-top:20px}
.rc-breve .sopra{margin-bottom:6px}
.rc-breve ul{list-style:none;margin:0;padding:0}
.rc-breve li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linea);font-size:16px;font-weight:500;line-height:1.4}
.rc-breve svg,.rc-dotazioni svg{color:var(--blu);flex:none;transform:translateY(2px)}

/* capitoli */
.rc-cap{max-width:1480px;margin:0 auto;padding:clamp(70px,9vw,140px) var(--gutter) 0;row-gap:clamp(28px,3.4vw,48px)}
.rc-num{display:block;margin-bottom:14px;font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--grigio);font-variant-numeric:tabular-nums}
.rc-cap h2{font-size:clamp(30px,3.4vw,50px);line-height:1.04;letter-spacing:-.03em}
.rc-cap-corpo p{font-size:17px;line-height:1.8;color:var(--inchiostro-2);max-width:64ch}
.rc-cap-corpo p:last-child{margin-bottom:0}
/* una foto accanto al testo, a turno a sinistra e a destra: resta ferma mentre si legge */
.rc-cap.lato .rc-cap-foto{grid-column:1/span 7;grid-row:1;align-self:start;position:sticky;top:calc(var(--testata) + 24px)}
.rc-cap.lato .rc-cap-testo{grid-column:9/span 4;grid-row:1;align-self:center}
.rc-cap.lato.inv .rc-cap-foto{grid-column:6/span 7}
.rc-cap.lato.inv .rc-cap-testo{grid-column:1/span 4}
.rc-cap.lato .rc-f{aspect-ratio:5/4}
.rc-cap.lato .rc-cap-testa{margin-bottom:26px}
/* negli altri il testo va sotto le foto: titolo a sinistra, paragrafi a destra */
.rc-cap:is(.pieno,.coppia,.trio,.solo) .rc-cap-testo{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:inherit;align-items:start}
.rc-cap:is(.pieno,.coppia,.trio,.solo) .rc-cap-testa{grid-column:1/span 4}
.rc-cap:is(.pieno,.coppia,.trio,.solo) .rc-cap-corpo{grid-column:6/span 7}
.rc-cap.solo .rc-cap-testo{border-top:1px solid var(--linea);padding-top:clamp(28px,3vw,40px)}
/* una foto a tutta larghezza */
.rc-cap.pieno .rc-cap-foto{grid-column:1/-1;width:100vw;margin-left:calc(50% - 50vw)}
.rc-cap.pieno .rc-f{height:clamp(420px,82vh,900px);border-radius:0}
/* due foto sfalsate */
.rc-cap:is(.coppia,.trio) .rc-cap-foto{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:inherit;row-gap:clamp(12px,1.4vw,20px);align-items:start}
.rc-cap.coppia .rc-f:first-child{grid-column:1/span 7;aspect-ratio:4/3}
.rc-cap.coppia .rc-f:last-child{grid-column:8/span 5;aspect-ratio:4/5;margin-top:clamp(40px,8vw,120px)}
/* tre foto: una grande e due una sull'altra */
.rc-cap.trio .rc-cap-foto{align-items:stretch}
.rc-cap.trio .rc-f:first-child{grid-column:1/span 8;grid-row:1/span 2;aspect-ratio:4/3}
.rc-cap.trio .rc-f:nth-child(n+2){grid-column:9/span 4}

/* la frase in evidenza */
.rc-citazione{margin:0 auto;padding-top:clamp(80px,10vw,150px);text-align:center}
.rc-citazione blockquote{margin:0 auto;max-width:21em;font-size:clamp(26px,3.3vw,46px);line-height:1.22;letter-spacing:-.025em;color:var(--inchiostro)}
.rc-citazione.lunga blockquote{max-width:30em;font-size:clamp(22px,2.3vw,32px);line-height:1.3}
.rc-citazione blockquote::before{content:'“';display:block;font-size:2.4em;line-height:.62;color:var(--grigio)}

/* dotazioni e posizione */
.rc-dotazioni,.rc-dove,.rc-contatto{padding-top:clamp(70px,9vw,140px);row-gap:24px}
.rc-dotazioni>div,.rc-dove>div:first-child{grid-column:1/span 4}
.rc-dotazioni ul{grid-column:6/span 7;list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(20px,3vw,48px)}
.rc-dotazioni li{display:flex;gap:11px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--linea);break-inside:avoid;font-size:15.5px}
.rc-dove h2{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;margin-bottom:10px}
.rc-dove p:not(.sopra){color:var(--inchiostro-2)}
.rc-dove .btn{margin-top:6px}
.rc-dove .mappa-box{grid-column:6/span 7;margin:0;aspect-ratio:16/10}

/* altre foto belle prima del modulo */
.rc-altre{padding-top:clamp(70px,9vw,140px)}
.rc-altre-testa{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.rc-altre-testa .sopra{margin:0}
.rc-mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.rc-mosaico .rc-f{grid-column:span 2;aspect-ratio:4/3}
.rc-mosaico.n4 .rc-f,.rc-mosaico.n5 .rc-f:nth-child(-n+2){grid-column:span 3;aspect-ratio:3/2}

/* modulo: a sinistra l'invito e i contatti, a destra il modulo della scheda */
.rc-contatto{padding-bottom:clamp(70px,9vw,120px);align-items:start}
.rc-contatto-testo{grid-column:1/span 5}
.rc-contatto-testo h2{font-size:clamp(30px,3.4vw,50px);line-height:1.05;letter-spacing:-.03em;margin-bottom:18px}
.rc-contatto-testo>p:not(.sopra){color:var(--inchiostro-2);max-width:42ch}
.rc-contatto-testo .contatto-rapido{margin-top:22px}
.rc-modulo{grid-column:7/span 6}
.rc-modulo .pannello{position:static}
.rc-modulo .pannello>.rif,.rc-modulo .pannello>h3,.rc-modulo .pannello>.sotto,.rc-modulo .pannello>.contatto-rapido{display:none}

/* barra in basso, come la testata: vetro crema */
.rc-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:80;padding-bottom:env(safe-area-inset-bottom);
  background:var(--osso);border-top:1px solid var(--linea);transform:translateY(105%);transition:transform .55s var(--ease);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .rc-barra{background:rgba(254,251,243,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
}
.rc-barra.su{transform:none}
.rc-barra-in{display:flex;align-items:center;gap:10px;height:68px}
.rc-barra-nome{display:flex;align-items:baseline;gap:14px;min-width:0;margin:0 auto 0 0}
.rc-barra-nome b{font-weight:500;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-barra-nome span{color:var(--inchiostro-2);font-size:15px;white-space:nowrap}

/* entrata: le foto si aprono dal centro come nel resto del sito */
.anim .rc-copertina img{opacity:0;scale:1.06;transition:opacity 1s var(--ease),scale 2.4s var(--ease)}
.anim .rc-copertina.mostra img{opacity:1;scale:1}
.anim .rc-copertina.mostra .tutte-foto{opacity:1;translate:none}
.anim .rc-f.rivela{opacity:1;transform:none;clip-path:inset(5% 5% 5% 5% round var(--r-lg));transition:clip-path 1.5s var(--ease)}
.anim .rc-f.rivela img{scale:1.12;transition:transform 1.2s var(--ease),scale 2.2s var(--ease)}
.anim .rc-f.rivela.visibile{clip-path:inset(0 round var(--r-lg))}
.anim .rc-f.rivela.visibile img{scale:1}
.anim .rc-cap.pieno .rc-f.rivela{clip-path:inset(6% 6% 6% 6%)}
.anim .rc-cap.pieno .rc-f.rivela.visibile{clip-path:inset(0)}
.rc-f:nth-child(2){transition-delay:.12s}
.rc-f:nth-child(3){transition-delay:.22s}

@media (max-width:900px){
  .dett-testa>.vista-scelta{float:none;display:flex;margin:0 0 18px}
  .rc-riga .vista-scelta{width:100%}
  .vista-scelta button{flex:1}
  .rc-copertina{height:auto;aspect-ratio:4/5;max-height:72vh;max-height:72svh}
  .rc-copertina .tutte-foto{display:flex;right:12px;bottom:12px;height:36px;padding:0 14px;font-size:12.5px}
  .rc-riga{margin-bottom:28px}
  .rc-titolo{grid-template-columns:1fr}
  .rc-prezzo{text-align:left}
  .rc-dati{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;border-bottom:0}
  .rc-dati li,.rc-dati li:last-child{display:grid;grid-template-columns:18px 1fr;column-gap:10px;align-items:center;padding:13px 0;margin:0;border-right:0;border-bottom:1px solid var(--linea)}
  .rc-dati svg{grid-row:1/span 2}
  .rc-dati b{white-space:nowrap;line-height:1.25}
  .rc-dati span{font-size:10.5px;line-height:1.3}
  .rc-apertura,.rc-cap,.rc-cap .rc-cap-testo,.rc-cap:is(.pieno,.coppia,.trio,.solo) .rc-cap-testo,.rc-dotazioni,.rc-dove,.rc-contatto{display:block}
  .rc-breve{margin-top:30px}
  .rc-cap{padding-top:64px}
  /* le foto vanno da bordo a bordo, sopra il testo */
  .rc-cap .rc-cap-foto,.rc-cap.pieno .rc-cap-foto{width:auto;margin:0 calc(-1 * var(--gutter)) 28px}
  .rc-cap.lato .rc-cap-foto{position:static}
  .rc-f{border-radius:0}
  .rc-cap .rc-f,.rc-cap.lato .rc-f,.rc-cap.pieno .rc-f{height:auto;aspect-ratio:4/3}
  .rc-cap:is(.coppia,.trio) .rc-cap-foto{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:4px}
  .rc-cap.coppia .rc-f:first-child,.rc-cap.coppia .rc-f:last-child{grid-column:auto;margin:0;aspect-ratio:4/5}
  .rc-cap.trio .rc-f:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .rc-cap.trio .rc-f:nth-child(n+2){grid-column:auto;aspect-ratio:1}
  .rc-cap-testa,.rc-cap.lato .rc-cap-testa{margin-bottom:18px}
  .rc-cap-corpo p{font-size:16.5px;line-height:1.75}
  .rc-citazione blockquote{font-size:23px;line-height:1.3}
  .rc-citazione.lunga blockquote{font-size:19px;line-height:1.4}
  .rc-dotazioni ul{columns:1;margin-top:6px}
  .rc-dove .mappa-box{margin-top:24px}
  .rc-mosaico{grid-template-columns:1fr 1fr;gap:4px;margin:0 calc(-1 * var(--gutter))}
  .rc-mosaico .rc-f,.rc-mosaico.n4 .rc-f,.rc-mosaico.n5 .rc-f:nth-child(-n+2){grid-column:auto;aspect-ratio:1}
  .rc-mosaico .rc-f:first-child,.rc-mosaico.n4 .rc-f:first-child,.rc-mosaico.n5 .rc-f:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .rc-mosaico.n4 .rc-f:last-child{grid-column:1/-1;aspect-ratio:4/3}
  .rc-altre-testa .btn{padding-inline:14px}
  .rc-contatto-testo{margin-bottom:30px}
  .rc-barra-in{height:auto;padding-block:10px}
  .rc-barra-nome{display:none}
  .rc-barra .btn{flex:1}
  .anim .rc-f.rivela,.anim .rc-cap.pieno .rc-f.rivela{clip-path:inset(4% 4% 4% 4%)}
  .anim .rc-f.rivela.visibile,.anim .rc-cap.pieno .rc-f.rivela.visibile{clip-path:inset(0)}
}
@media print{.rc-barra,.vista-scelta{display:none!important}}

/* =====================================================================
   Foto a tutto schermo
   ===================================================================== */
/* foto singola (desktop): testata, la foto al centro con le frecce ai lati,
   le miniature in fondo. Le due <img> si danno il cambio: la nuova entra dal
   lato verso cui si va, la vecchia esce dall'altro. Sopra il flusso, se si è
   arrivati da lì. */
.lightbox{
  --lato:clamp(80px,8vw,128px);
  position:fixed;inset:0;z-index:220;display:none;grid-template-rows:auto minmax(0,1fr) auto;
  background:#0e0d0b;color:#fff;opacity:0;transition:opacity .32s var(--ease);
}
.lightbox.aperto{display:grid}
.lightbox.dentro{opacity:1}
.lb-testa{display:flex;align-items:center;gap:12px;height:72px;padding:0 18px 0 clamp(20px,3vw,34px)}
.lb-titolo{flex:1;min-width:0;margin:0;display:flex;align-items:baseline;gap:16px}
.lb-nome{min-width:0;font-size:15px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-conta{flex:none;font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.lb-tutte{
  flex:none;display:flex;align-items:center;gap:9px;height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:none;color:#fff;font:inherit;font-size:13.5px;cursor:pointer;transition:background .2s,border-color .2s;
}
.lb-tutte:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}
.lb-chiudi{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.lb-chiudi:hover{background:rgba(255,255,255,.2)}
.lb-corpo{position:relative;min-height:0;touch-action:pinch-zoom;-webkit-user-select:none;user-select:none}
.lb-corpo.presa{cursor:grabbing}
.lb-img{
  position:absolute;top:0;left:var(--lato);width:calc(100% - 2 * var(--lato));height:100%;object-fit:contain;
  opacity:0;transition:opacity .5s var(--ease),translate .8s var(--ease);-webkit-user-drag:none;
}
.lb-img.on{opacity:1}
.lb-img:not([src]){visibility:hidden}
.lb-nav{
  position:absolute;top:50%;translate:0 -50%;z-index:1;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,border-color .2s;
}
.lb-nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.lb-nav svg{transition:transform .5s var(--ease)}
.lb-nav.prec{left:calc((var(--lato) - 52px) / 2)}
.lb-nav.succ{right:calc((var(--lato) - 52px) / 2)}
.lb-nav.prec:hover svg{transform:translateX(-2px)}
.lb-nav.succ:hover svg{transform:translateX(2px)}
.lb-strip{display:flex;gap:6px;padding:16px clamp(20px,3vw,34px) 20px;overflow-x:auto;scrollbar-width:none}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip button{
  flex:none;width:76px;height:52px;padding:0;border:0;border-radius:4px;overflow:hidden;background:#1a1815;cursor:pointer;
  opacity:.36;outline:1.5px solid transparent;outline-offset:2px;transition:opacity .25s,outline-color .25s;
}
/* poche miniature stanno al centro; tante scorrono */
.lb-strip button:first-child{margin-left:auto}
.lb-strip button:last-child{margin-right:auto}
.lb-strip button:hover{opacity:.75}
.lb-strip button.on{opacity:1;outline-color:#fff}
.lb-strip img{width:100%;height:100%;object-fit:cover}

/* flusso: tutte le foto da scorrere in verticale, staccate e con gli angoli
   appena arrotondati. Ogni cornice ha le proporzioni della sua foto
   (--rapporto, 3:2 finché non arriva); la testata sfocata resta sopra. Sui
   telefoni una colonna (un tocco nasconde la testata); su desktop righe
   alterne, una foto e poi due affiancate alla stessa altezza (la larghezza
   di ognuna è in proporzione al suo --rapporto), e un clic apre la foto. */
.flusso{position:fixed;inset:0;z-index:210;display:none;background:#0e0d0b;color:#fff;opacity:0;transition:opacity .38s var(--ease)}
.flusso.aperto{display:block}
.flusso.dentro{opacity:1}
.fl-scorri{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fl-scorri::-webkit-scrollbar{display:none}
.fl-foto{display:flex;flex-direction:column;gap:10px;padding:72px 10px 0;transform:translateY(40px);transition:transform 1s var(--ease)}
.flusso.dentro .fl-foto{transform:none}
.fl-riga{display:contents}
.fl-f{position:relative;margin:0;aspect-ratio:var(--rapporto,1.5);border-radius:var(--r-lg);background:#1a1815;overflow:hidden;-webkit-tap-highlight-color:transparent}
.fl-f::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.045) 50%,transparent 70%) 0 0/250% 100%;animation:fl-luccica 1.6s linear infinite;transition:opacity .5s}
.fl-f.pronta::after{opacity:0;animation:none}
@keyframes fl-luccica{from{background-position:100% 0}to{background-position:-150% 0}}
.fl-f img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .8s var(--ease),transform 1.4s var(--ease)}
.fl-f.pronta img{opacity:1;transform:none}
/* entrando dal basso ogni foto si apre appena, guidata dallo scorrimento */
@keyframes fl-entra{from{opacity:.3;scale:.94}}
@supports (animation-timeline:view()){
  .anim .fl-f{animation:fl-entra linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
}
@media (min-width:901px){
  .fl-foto{max-width:1240px;margin:0 auto;padding:96px 48px 0;gap:14px}
  .fl-riga{display:flex;gap:14px}
  .fl-f{flex:var(--rapporto,1.5) 1 0;min-width:0;cursor:zoom-in}
  /* da sola una foto verticale non supera l'altezza dello schermo */
  .fl-riga.una .fl-f.verticale{flex:none;width:min(100%,calc((100vh - 150px) * var(--rapporto)));margin-inline:auto}
  .fl-f.pronta img{transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
  .fl-f.pronta:hover img{transform:scale(1.02)}
}
.fl-testa{
  position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:14px;height:62px;
  padding:0 9px 0 var(--gutter);background:rgba(14,13,11,.7);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.07);transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.flusso.pulito .fl-testa{transform:translateY(-100%);opacity:0}
.fl-titolo{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:3px}
.fl-nome{font-size:15px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-conta{font-size:11px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.fl-chiudi{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.fl-chiudi:active,.fl-chiudi:hover{background:rgba(255,255,255,.2)}
.fl-linea{position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:#fff;transform:scaleX(var(--avanza,0));transform-origin:left}
.fl-fine{display:flex;flex-direction:column;align-items:center;gap:10px;padding:64px var(--gutter) calc(72px + env(safe-area-inset-bottom));text-align:center}
.fl-fine-n{margin:0;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fl-fine-t{margin:0 0 18px;font-size:27px;font-weight:300;letter-spacing:-.03em;line-height:1.12;max-width:16ch;text-wrap:balance}

/* =====================================================================
   Contatti
   ===================================================================== */
.griglia-contatti{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,70px);align-items:start}
.blocco-info{display:grid;gap:2px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden}
.info-riga{background:var(--bianco);padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.info-riga .ico{width:40px;height:40px;border-radius:999px;background:var(--blu-chiaro);color:var(--blu);display:grid;place-items:center;flex:none}
.info-riga b{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--grigio);margin-bottom:4px}
.info-riga p{margin:0;font-size:16px;font-weight:500}
.info-riga a:hover{color:var(--blu)}
.orari-tab{width:100%;border-collapse:collapse;font-size:14.8px}
.orari-tab td{padding:9px 0;border-bottom:1px solid var(--linea)}
.orari-tab tr:last-child td{border-bottom:0}
.orari-tab td:first-child{color:var(--inchiostro-2)}
.orari-tab td:last-child{text-align:right;font-weight:500}
.orari-tab tr.chiuso td:last-child{color:var(--grigio);font-weight:400}
.orari-tab tr.oggi td{color:var(--blu);font-weight:600}

.form-card{border:1px solid var(--linea);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,38px);box-shadow:var(--ombra)}
.due-col{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* =====================================================================
   Footer
   ===================================================================== */
.pie{background:var(--inchiostro);color:rgba(255,255,255,.72);padding:clamp(52px,6vw,78px) 0 0;margin-top:0}
.pie-griglia{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,54px);padding-bottom:48px}
.pie h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-family:var(--testo);font-weight:700;margin-bottom:18px}
.pie a{transition:color .2s}
.pie a:hover{color:#fff}
/* nel piede il marchio torna impilato come nel logo originale: stessa
   larghezza per segno e righe, distanze riprese in proporzione (32 e 16 px su 1121) */
.pie-logo{display:block;width:190px;margin-bottom:22px}
.pie-logo .marchio-mark{width:100%}
.pie-logo .marchio-testo{width:100%;margin-top:2.855%}
.pie-logo .marchio-testo .riga1{color:#fff}
.pie-logo .marchio-mark,.pie-logo .marchio-testo .riga2{color:var(--logo-blu-chiaro)}
.pie p{font-size:14.5px;line-height:1.7;margin:0 0 12px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px}
.pie-social{display:flex;gap:10px;margin-top:20px}
.pie-social a{width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:.25s}
.pie-social a:hover{background:#fff;color:var(--inchiostro);border-color:#fff}
/* spazio in coda: i pulsanti flottanti non devono coprire la riga legale */
.pie-basso{
  border-top:1px solid rgba(255,255,255,.13);padding:22px 0 28px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5);
}


/* =====================================================================
   Movimento
   Un solo linguaggio per tutto il sito: le foto si aprono come una finestra
   e si posano da un leggero ingrandimento, i titoli salgono da dietro il
   proprio bordo, il resto affiora. Sempre la stessa curva, decisa in
   partenza e lenta nel posarsi; niente rimbalzi né effetti vistosi.
   I contenuti sono nascosti solo sotto html.anim (vedi app.js).
   ===================================================================== */

/* cambio pagina: la pagina vecchia sfuma, la nuova sale appena; la testata
   resta ferma (Chrome, Edge, Safari 18.2+; altrove cambio normale) */
@view-transition{navigation:auto}
.testata{view-transition-name:testata}
::view-transition-old(root){animation:.3s var(--ease-io) both vt-esce}
::view-transition-new(root){animation:.85s var(--ease) .06s both vt-entra}
@keyframes vt-esce{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(16px)}}
/* dalla home a una tappa dei servizi: la foto del pannello scelto (nome dato
   al clic, vedi fasi() in app.js) vola nella cornice ferma della filiera */
.filiera:has(.passo:target) .filiera-foto{view-transition-name:fase-foto}
::view-transition-group(fase-foto){animation-duration:.95s;animation-timing-function:var(--ease);border-radius:var(--r-lg);overflow:clip}
::view-transition-old(fase-foto),::view-transition-new(fase-foto){height:100%;object-fit:cover}

/* affiorare: elementi generici allo scroll */
.anim .rivela{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.anim .rivela.visibile{opacity:1;transform:none}
.rivela.r1{transition-delay:.09s}.rivela.r2{transition-delay:.18s}.rivela.r3{transition-delay:.27s}
.rivela.r4{transition-delay:.36s}.rivela.r5{transition-delay:.45s}.rivela.r6{transition-delay:.54s}

/* foto che si posano: scale è separato da transform, quindi si somma
   all'ingrandimento al passaggio del mouse senza interferire */
.anim .figura.rivela img,.anim .zona.rivela img,.anim .scheda.rivela .scheda-foto img{scale:1.14;transition:transform 1.2s var(--ease),scale 2s var(--ease)}
.anim .rivela.visibile img,.anim .scheda.rivela.visibile .scheda-foto img{scale:1}
.anim .figura.rivela,.anim .zona.rivela{clip-path:inset(7% 7% 7% 7% round var(--r-lg));transition:opacity 1s var(--ease),transform 1.2s var(--ease),clip-path 1.5s var(--ease)}
.anim .figura.rivela.visibile,.anim .zona.rivela.visibile{clip-path:inset(0 round var(--r-lg))}

/* titoli: il testo sale da dietro il proprio bordo inferiore */
.m-riga{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.m-riga>span{display:block}
.anim .rivela-t .m-riga>span,.anim .hero .m-riga>span{transform:translateY(108%);transition:transform 1.25s var(--ease)}
.anim .rivela-t.visibile .m-riga>span{transform:none}
.sez-testa .rivela-t.visibile .m-riga>span,.sez-testa .rivela-t .m-riga>span{transition-delay:.12s}

/* occhielli: la lineetta si traccia, poi compare la parola */
.anim .rivela-s{opacity:0;transition:opacity .9s var(--ease) .15s}
.anim .rivela-s::before{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.anim .rivela-s.visibile{opacity:1}
.anim .rivela-s.visibile::before{transform:none}

/* ---------- velo d'apertura della home ----------
   Crema pieno, il segno del marchio che si mette a fuoco e sotto una barretta
   che avanza da sola verso il 90%, sempre più piano. Quando la pagina è pronta
   caricamento() in app.js la porta in fondo e aggiunge .via: segno e barra
   salgono appena e svaniscono, il velo si scioglie sul crema da cui affiora la
   hero. Senza JS o con il movimento ridotto non c'è; se lo script si ferma,
   dopo qualche secondo se ne va da solo. */
.caricamento{display:none}
.carica .caricamento{
  position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:22px;
  background:var(--osso);color:var(--inchiostro);
  animation:velo-via .8s var(--ease-io) 7s forwards;
  transition:opacity .85s var(--ease-io) .18s,visibility 0s 1.05s;
}
/* lo stesso segno della testata (maschera alfa, vedi .marchio-mark), senza logotipo */
.carica-segno{
  display:block;width:clamp(84px,8vw,100px);aspect-ratio:1121/588;background:currentColor;
  -webkit-mask:url('../brand/logo-segno.png') center/100% 100% no-repeat;mask:url('../brand/logo-segno.png') center/100% 100% no-repeat;
  animation:segno-entra 1.1s var(--ease) backwards;
  transition:opacity .55s var(--ease-io),transform .7s var(--ease-io),filter .55s var(--ease-io);
}
.carica-barra{
  position:relative;width:clamp(64px,7vw,80px);height:2px;border-radius:1px;overflow:hidden;
  background:rgba(20,20,20,.09);
  animation:barra-entra .7s var(--ease) .2s backwards;
  transition:opacity .45s var(--ease-io),transform .6s var(--ease-io);
}
.carica-barra i{
  position:absolute;inset:0;border-radius:inherit;background:currentColor;
  transform-origin:left;transform:scaleX(0);
  animation:barra-avanza 2.6s cubic-bezier(.3,.75,.25,1) .3s forwards;
}
.caricamento.via{opacity:0;visibility:hidden;pointer-events:none}
.caricamento.via .carica-segno{opacity:0;transform:translateY(-8px) scale(.985);filter:blur(3px)}
.caricamento.via .carica-barra{opacity:0;transform:translateY(-4px) scaleX(.7)}
@keyframes segno-entra{from{opacity:0;transform:translateY(6px) scale(.97);filter:blur(5px)}}
@keyframes barra-entra{from{opacity:0;transform:scaleX(.6)}}
@keyframes barra-avanza{to{transform:scaleX(.9)}}
@keyframes velo-via{to{opacity:0;visibility:hidden}}

/* ---------- ingresso della hero ---------- */
/* la foto affiora dal crema come una stampa che si sviluppa e intanto si
   posa lentamente da un leggero ingrandimento */
.anim .hero-foto{opacity:0;transition:opacity 1.8s var(--ease-io)}
.anim .hero-strato{scale:calc(var(--fs) + .09);transition:scale 3.4s var(--ease);will-change:transform}
.anim .hero.mostra .hero-foto{opacity:1}
.anim .hero.mostra .hero-strato{scale:var(--fs)}
/* testo: occhiello, titolo riga per riga, sottotitolo, invito */
.anim .hero-eyebrow span,.anim .hero-sotto,.anim .hero-cta{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.anim .hero.mostra .hero-eyebrow span,.anim .hero.mostra .hero-sotto,.anim .hero.mostra .hero-cta{opacity:1;transform:none}
.anim .hero.mostra .m-riga>span{transform:none}
.hero-eyebrow span:nth-child(1){transition-delay:.7s!important}
.hero-eyebrow span:nth-child(2){transition-delay:.78s!important}
.hero-eyebrow span:nth-child(3){transition-delay:.86s!important}
.hero h1 .m-riga:nth-child(1)>span{transition-delay:.85s}
.hero h1 .m-riga:nth-child(2)>span{transition-delay:.97s}
.anim .hero-sotto{transition-delay:1.2s}
.anim .hero-cta{transition-delay:1.35s}
.anim .hero-cta span::after{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) 1.6s}
.anim .hero.mostra .hero-cta span::after{transform:none}
/* la didascalia arriva per ultima, quando il titolo è già al suo posto */
.anim .vetrina-posto{opacity:0;transition:opacity 1.2s var(--ease) 1.5s}
.anim .hero.mostra .vetrina-posto{opacity:1}
/* Vetrina: ogni foto, finché è in scena, si avvicina piano verso un punto
   diverso (una a sinistra, una a destra); la barretta dell'immobile in corso
   si riempie nello stesso tempo. Ferma (pausa, puntatore sulla didascalia,
   hero fuori schermo) si fermano tutte e due, dove sono. */
.anim .vetrina-foto:is(.attiva,.uscente) img{animation:avvicina calc(var(--durata) + var(--dissolvenza) * 2) linear both}
.vetrina-foto:nth-child(odd) img{transform-origin:30% 60%}
.vetrina-foto:nth-child(even) img{transform-origin:70% 40%}
@keyframes avvicina{from{scale:1}to{scale:1.07}}
.anim .vetrina-passi i{transform:scaleX(0)}
.anim .vetrina-passi .attivo i{animation:avanza var(--durata) linear both}
@keyframes avanza{to{transform:none}}
.hero.ferma .vetrina-foto img,.hero.ferma .vetrina-passi i{animation-play-state:paused}

/* ---------- profondità della hero ----------
   Mentre la hero attraversa lo schermo la foto scorre nella sua cornice più
   lenta della pagina: --y0 è dove sta quando la hero entra dal basso, --y1
   quando esce in alto. Dove il browser lo sa fare (Safari 26, Chrome) è lo
   scroll stesso a guidare l'animazione, sullo stesso filo dello scorrimento:
   niente ritardi né scatti. Altrove app.js scrive translate a ogni
   fotogramma di scroll, leggendo questi stessi valori. */
.hero-sfondo{--fs:1.06}
.hero-strato{--y0:-14%;--y1:14%}
@keyframes profondita-foto{from{translate:0 var(--y0)}to{translate:0 var(--y1)}}
@supports (animation-timeline:view()){
  .anim .hero-sfondo{view-timeline:--foto block}
  .anim .hero-strato{animation:profondita-foto linear both;animation-timeline:--foto}
}

/* ---------- galleria del dettaglio: le finestre del mosaico in sequenza ---------- */
.anim .gal-f{clip-path:inset(6% 6% 6% 6% round var(--r-lg));opacity:0;transition:clip-path 1.5s var(--ease),opacity .9s var(--ease)}
.anim .gal-f img{scale:1.12;transition:transform 1.2s var(--ease),scale 2.2s var(--ease)}
.anim .dett-galleria.mostra .gal-f{clip-path:inset(0 round 0);opacity:1}
.anim .dett-galleria.mostra .gal-f img{scale:1}
.gal-f:nth-child(2){transition-delay:.1s}
.gal-f:nth-child(3){transition-delay:.18s}
.gal-f:nth-child(4){transition-delay:.26s}
.gal-f:nth-child(5){transition-delay:.34s}
.gal-f:nth-child(2) img{transition-delay:0s,.1s}
.gal-f:nth-child(3) img{transition-delay:0s,.18s}
.gal-f:nth-child(4) img{transition-delay:0s,.26s}
.gal-f:nth-child(5) img{transition-delay:0s,.34s}
.anim .tutte-foto{opacity:0;translate:0 8px;transition:opacity .8s var(--ease) .6s,translate 1s var(--ease) .6s,background .25s,transform .6s var(--ease)}
.anim .dett-galleria.mostra .tutte-foto{opacity:1;translate:none}

/* ---------- menu mobile: le voci entrano una dopo l'altra ---------- */
.nav-mobile>a,.nav-mobile .m-azioni{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.nav-mobile.aperto>a,.nav-mobile.aperto .m-azioni{opacity:1;transform:none}
.nav-mobile.aperto>a:nth-child(2){transition-delay:.05s}
.nav-mobile.aperto>a:nth-child(3){transition-delay:.1s}
.nav-mobile.aperto>a:nth-child(4){transition-delay:.15s}
.nav-mobile.aperto>a:nth-child(5){transition-delay:.2s}
.nav-mobile.aperto .m-azioni{transition-delay:.26s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
  @view-transition{navigation:none}
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1080px){
  .dett{grid-template-columns:1fr}
  .pannello{position:static}
  .pie-griglia{grid-template-columns:1fr 1fr}
  .griglia-contatti{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav,.testata-azioni .lingua{display:none}
  .hamburger{display:grid}
  /* ricerca: il campo prende il posto del marchio, fino all'hamburger che fa da ×;
     il foglio copre lo schermo e scorre da sé */
  .rs-campo{left:var(--gutter);right:calc(var(--gutter) + 48px);width:auto;height:42px;margin:-21px 0 0}
  .testata.cercando{background:var(--osso)}
  .testata.cercando .marchio{opacity:0;transform:translateX(-12px) scale(.96);filter:blur(3px);pointer-events:none}
  .testata.cercando .testata-cerca{opacity:0;transform:scale(.6);pointer-events:none}
  .rs-velo{display:none}
  .rs-foglio{
    bottom:0;height:auto!important;max-height:none;background:var(--osso);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s .5s;
  }
  .testata.cercando~.rs-foglio{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .6s var(--ease),visibility 0s}
  .rs-foglio.muove{overflow-y:auto}
  .rs-in{width:auto;padding:10px calc(var(--gutter) - 12px) 40px}
  :root{--testata:64px}
  .testata-in{grid-template-columns:1fr auto;gap:14px}
  .marchio{gap:10px}
  .marchio-mark{width:58px}
  .marchio-testo{width:108px}
  .intestazione{padding-top:calc(var(--testata) + 36px)}
  .hero-eyebrow{font-size:11px;letter-spacing:.26em;gap:.4em 1.5em;margin-bottom:22px}
  .doppia,.doppia.inv,.agenzia-home .doppia{grid-template-columns:1fr;direction:ltr}
  .fascia-in{grid-template-columns:1fr}
  /* fondazione: la data a tutta larghezza, la frase sotto */
  .fondazione-in{grid-template-columns:1fr}
  .fondazione-testo{padding-top:clamp(18px,3vw,28px)}
  /* fasi: diventano schede da scorrere col dito, tutte aperte */
  .fasi{
    height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);
  }
  .fasi::-webkit-scrollbar{display:none}
  .fase,.fase.aperta{flex:0 0 min(80%,380px);aspect-ratio:4/5;scroll-snap-align:start}
  .fase:not(.aperta) img{opacity:1}
  .fase-v{display:none}
  .fase .fase-in,.fase .fase-freccia{opacity:1;transform:none}
  .fase .fase-in{width:auto;right:var(--pad)}
  /* filiera: niente foto ferma, ogni tappa mostra la propria */
  .filiera-in{grid-template-columns:1fr}
  .filiera-foto{display:none}
  .passo{min-height:0;padding-block:28px 36px}
  .passo h2{color:var(--inchiostro)}
  .passo-foto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);margin-top:26px}
  /* galleria: da bordo a bordo, tutte le foto in fila da scorrere col dito,
     una alla volta, con il contatore; un tocco apre il flusso */
  .dett-galleria{height:auto;margin-top:var(--testata);margin-inline:calc(-1 * var(--gutter))}
  .gal-foto{
    display:flex;gap:0;height:auto;aspect-ratio:7/6;max-height:60vh;border-radius:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .gal-foto::-webkit-scrollbar{display:none}
  .dett-galleria .gal-f:nth-child(n){display:block;flex:0 0 100%;grid-row:auto;scroll-snap-align:center;scroll-snap-stop:always}
  .gal-f:hover img{transform:none}
  .gal-f:hover::after{opacity:0}
  .anim .gal-f{clip-path:none;opacity:1;transition:none}
  .anim .gal-f:first-child{clip-path:inset(4% round var(--r-lg));opacity:0;transition:clip-path 1.5s var(--ease),opacity .9s var(--ease)}
  .anim .dett-galleria.mostra .gal-f:first-child{clip-path:inset(0 round 0);opacity:1}
  .tutte-foto{display:none}
  .gal-conta{display:flex}
}
/* su schermi stretti o verticali il testo torna nero sul crema e la foto
   scende sotto; la didascalia, chiara, sta sul suo bordo basso (la hero
   finisce con la foto, quindi il fondo della hero è il fondo della foto) */
@media (max-width:900px),(max-aspect-ratio:5/4){
  .hero{flex-direction:column;align-items:stretch;margin-top:var(--testata);height:auto;min-height:0;max-height:none;color:var(--inchiostro)}
  .hero-in{order:1;padding-block:44px 36px}
  .hero-testo{max-width:none}
  .hero-sfondo{position:relative;order:2;aspect-ratio:16/10}
  .hero-foto::after{background:linear-gradient(0deg,rgba(18,15,11,.64) 0%,rgba(18,15,11,.28) 30%,rgba(18,15,11,0) 52%)}
  .vetrina-posto{color:var(--bianco);padding-bottom:clamp(12px,3vw,26px)}
  .vetrina{width:100%}
  .vetrina-link{padding-bottom:8px}
  /* la foto si vede per tutto il passaggio: ingrandita quanto basta perché
     scorrendo nella cornice non ne scopra mai i bordi */
  .hero-sfondo{--fs:1.1}
  .hero-strato{--y0:-4.5%;--y1:4.5%}
}
@media (max-width:620px){
  body{font-size:16px}
  /* foto appena più alta che larga e testo più raccolto: la foto, con la
     sua didascalia, arriva quasi in fondo alla prima schermata */
  .hero-in{padding-block:30px 26px}
  .hero-cta{margin-top:24px}
  .hero-sfondo{aspect-ratio:6/7;max-height:64vh}
  .vetrina-tipo{font-size:11px}
  .vetrina-nome{font-size:21px}
  .vetrina-prezzo{font-size:15px}
  .numeri-in{grid-template-columns:1fr}
  .numero,.numero:first-child,.numero:last-child{padding:24px 0 28px}
  .numero+.numero{border-left:0;border-top:1px solid var(--linea)}
  .numero-cifra{font-size:clamp(68px,22vw,104px)}
  .catena{grid-template-columns:1fr 1fr;row-gap:22px}
  .altri a{grid-template-columns:1fr auto;row-gap:6px}
  .altri-d{grid-row:2;text-align:left;font-size:15px}
  .altri svg{grid-row:1/3;grid-column:2}
  .due-col{grid-template-columns:1fr}
  .pie-griglia{grid-template-columns:1fr;gap:34px}
  .griglia-immobili{grid-template-columns:1fr}
  .sez-testa{flex-direction:column;align-items:flex-start}
  .sez-tutti .sez-testa>.btn{display:none}
  .tutti-riga{display:flex}
  /* ricerca: il bottone resta la sola freccia, il campo prende tutto il resto */
  .cerca-btn{padding-inline:18px}
  .cerca-btn-t,.cerca-ai b{display:none}
  /* del badge resta la sola scintilla */
  .cerca-ai{padding:0;border:0;background:none}
  .cerca-grande .cerca-campo,.cerca-grande .cerca-btn{height:58px}
  .cerca-grande .cerca-campo input,.cerca-grande .cerca-ph{font-size:16px}
  .cerca-campo{padding-left:14px;gap:10px}
  .capito-azioni{margin-left:0}
  .rs-imm{grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:1px}
  .rs-foto{grid-row:1/3;width:64px;height:48px}
  .rs-testo{grid-column:2;align-self:end}
  .rs-prezzo{grid-column:2;grid-row:2;align-self:start;font-size:13px}
  .rs-imm>svg{display:none}
  /* su touch la scheda è già interamente tappabile: l'invito è ridondante */
  .dati .vaialla{display:none}
  /* l'agenzia in home: foto verticale da bordo a bordo; il titolo sale sulla
     sua parte bassa, che si sfoca per gradi e sfuma nel crema. Ogni strato del
     velo sfoca il doppio del precedente e copre solo la propria fascia, così
     non si vedono gradini; la foto stessa svanisce sull'ultimo bordo, perché
     sotto il crema non resti un filo più scuro */
  .agenzia-home .doppia{row-gap:0}
  .figura-viva{margin-inline:calc(-1 * var(--gutter));border-radius:0}
  .figura-viva img{
    aspect-ratio:4/5;
    -webkit-mask-image:linear-gradient(#000 88%,transparent 99%);mask-image:linear-gradient(#000 88%,transparent 99%);
  }
  .anim .figura-viva.rivela.visibile{clip-path:inset(0)}
  .velo{display:block;position:absolute;inset:auto 0 0;height:56%;pointer-events:none}
  /* più in basso il velo schiarisce anche gli scuri (il bianco resta bianco):
     la porta si scioglie in una luce chiara, non in un'ombra grigia */
  .velo i{
    --f:brightness(1);
    position:absolute;inset:0;
    -webkit-backdrop-filter:blur(var(--b)) var(--f);backdrop-filter:blur(var(--b)) var(--f);
    -webkit-mask-image:var(--m);mask-image:var(--m);
  }
  .velo i:nth-child(1){--b:2px;--m:linear-gradient(transparent,#000 12%,#000 24%,transparent 36%)}
  .velo i:nth-child(2){--b:4px;--m:linear-gradient(transparent 12%,#000 24%,#000 36%,transparent 48%)}
  .velo i:nth-child(3){--b:7px;--f:contrast(.88) brightness(1.06);--m:linear-gradient(transparent 24%,#000 36%,#000 48%,transparent 60%)}
  .velo i:nth-child(4){--b:11px;--f:contrast(.72) brightness(1.14);--m:linear-gradient(transparent 36%,#000 48%,#000 64%,transparent 76%)}
  .velo i:nth-child(5){--b:16px;--f:contrast(.58) brightness(1.24);--m:linear-gradient(transparent 56%,#000 72%)}
  .velo::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(rgba(254,251,243,0),rgba(254,251,243,.34) 18%,rgba(254,251,243,.74) 40%,rgba(254,251,243,.94) 60%,var(--osso) 80%);
  }
  /* la foto è larga 100vw e alta 125vw: il testo ne copre l'ultimo terzo */
  .agenzia-testo{position:relative;margin-top:-41vw}
}

@media print{
  .testata,.wa,.pannello,.lightbox,.flusso,.barra-filtri,.rs-foglio,.rs-velo{display:none!important}
}
.invio-ko{color:#b03a2e;font-size:14px;line-height:1.5;margin:12px 0 0}

/* ---------------------------------------------------- privacy e cookie
   Testo lungo da leggere: colonna stretta, interlinea ampia. Le due lingue
   stanno nella stessa pagina e si mostra quella scelta (lang sull'html). */
html[lang="en"] .solo-it,html:not([lang="en"]) .solo-en{display:none}
.legale{padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px)}
.legale .wrap{max-width:760px}
.legale h2{font-size:clamp(20px,2vw,24px);font-weight:500;letter-spacing:-.01em;margin:clamp(34px,4vw,48px) 0 12px}
.legale p,.legale li{color:var(--inchiostro-2);line-height:1.7;font-size:16px}
.legale p{margin:0 0 14px}
.legale ul{margin:0 0 14px;padding-left:20px}
.legale li{margin-bottom:8px}
.legale b{color:var(--inchiostro);font-weight:600}
.legale a,.privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legale a:hover{color:var(--inchiostro)}
.tabella-legale{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-lg);margin:6px 0 14px}
.tabella-legale table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.tabella-legale th,.tabella-legale td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--linea);line-height:1.5}
.tabella-legale th{background:var(--osso);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)}
.tabella-legale tr:last-child td{border-bottom:0}
.tabella-legale td:first-child{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;white-space:nowrap;color:var(--inchiostro)}