/* ═══════════════════════════════════════════════════════════════
   IMMOBILIARE LAGO MAGGIORE — versione 4 · "CASA PER CASA"
   Il taglio scuro della v2 con la mappa e i contenuti della v1.
   Dark cinematografico · carta notturna del Verbano · ricerca rapida
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* 01/10/2026: Francesco fatica a leggere, «salire di tono su tutte le
     scritte». Grigi schiariti: --mist-2 da #a0a7b4 a #c4c9d2, --mist-3 da
     #6a717e (4,1:1 sul blu notte) a #a6adb9 (8,4:1); sul fondo carta il
     testo scuro sale di opacita'. Tutte le scritte sotto .7rem alzate di
     .12rem, cosi' la gerarchia resta la stessa. */
  --nero:#01071d;
  --notte:#040d27;
  --notte-2:#091631;
  --notte-3:#12203c;
  --notte-4:#1b2945;

  --carta:#ece9e3;
  --carta-2:#dedad2;

  --mist:#eceae5;
  --mist-2:#c4c9d2;
  --mist-3:#a6adb9;

  --bordo:rgba(236,234,229,.115);
  --bordo-2:rgba(236,234,229,.055);
  --bordo-3:rgba(236,234,229,.22);

  --rosso:#ef020d;
  --rosso-h:#ff3a30;
  --blu:#1a3ae0;
  --blu-h:#4b6bff;
  --sole:#ffab5e;
  --luce:#f6dcae;

  --wrap:1360px;
  --gut:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-o:cubic-bezier(.16,1,.3,1);

  --ff-d:"Anek Latin","Helvetica Neue",Arial,sans-serif;
  --ff-b:"Onest",system-ui,-apple-system,sans-serif;
  --ff-m:"Reddit Mono",ui-monospace,SFMono-Regular,monospace;

  --hdr:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 18px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--nero);color:var(--mist);
  font-family:var(--ff-b);font-size:16.5px;line-height:1.65;font-weight:350;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
[hidden]{display:none !important}
::selection{background:var(--rosso);color:#fff}
svg{display:block}

/* grana filmica sull'intero documento */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto;position:relative}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── tipografia ─────────────────────────────────────────── */
.mono{
  font-family:var(--ff-m);font-size:.78rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
}
.eyebrow{
  font-family:var(--ff-m);font-size:.765rem;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mist-3);
  display:flex;align-items:center;gap:.85em;margin:0 0 1.7em;
}
.eyebrow::before{
  content:"";width:34px;height:1px;background:var(--rosso);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease-o) .12s;
}
.rv.in .eyebrow::before{transform:scaleX(1)}
.eyebrow.c{justify-content:center}

h1,h2,h3,h4{
  font-family:var(--ff-d);font-weight:700;
  font-variation-settings:"wdth" 112,"wght" 700;
  letter-spacing:-.012em;line-height:1.02;margin:0;
  text-transform:uppercase;
}
.h-xl{font-size:clamp(2.6rem,7.6vw,6.4rem);line-height:.92;letter-spacing:-.028em}
.h-l{font-size:clamp(2rem,4.4vw,3.5rem);line-height:.98;letter-spacing:-.02em;margin:0 0 .42em;
  clip-path:inset(0 0 106% 0);transition:clip-path 1.05s var(--ease-o) .08s}
.rv.in .h-l{clip-path:inset(-16% 0 -16% 0)}
.h-m{font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.06;letter-spacing:-.012em}
.h-s{font-size:1.02rem;line-height:1.18;letter-spacing:.005em}
.thin{font-variation-settings:"wdth" 118,"wght" 300}
.hot{color:var(--rosso-h)}
.lead{font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.62;color:var(--mist-2);font-weight:330;max-width:56ch}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

/* ── bottoni ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.72em;
  font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.98em 1.5em;border:1px solid var(--bordo-3);color:var(--mist);
  position:relative;overflow:hidden;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--mist);z-index:1;
  transform:translateY(101%);transition:transform .48s var(--ease-o);
}
.btn:hover{color:var(--nero);border-color:var(--mist)}
.btn:hover::before{transform:translateY(0)}
.btn.red{border-color:var(--rosso);color:#fff;background:var(--rosso)}
.btn.red::before{background:#fff}
.btn.red:hover{color:var(--rosso);border-color:#fff}
.btn .ar{width:14px;height:9px;position:relative;z-index:2;flex:none}
.btn.sm{padding:.72em 1.05em;font-size:.75rem}

/* ══ HEADER ════════════════════════════════════════════════ */
.hdr{
  position:fixed;left:0;right:0;top:0;z-index:80;height:var(--hdr);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;
}
.hdr.stuck{
  background:rgba(4,13,39,.86);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--bordo-2);
}
.hdr-in{
  width:min(100% - (var(--gut) * 2),1560px);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;flex:none}
.brand img{width:38px;height:auto}
/* Il logo originale (17/09/2026: Francesco lo trovava piccolo e ritoccato).
   La targhetta bianca c'e' perche' la scritta e' blu come la barra. */
.brand .brand-logo{width:clamp(150px,15vw,214px);height:auto;background:#fff;padding:7px 11px;border-radius:3px;box-sizing:content-box}
@media(max-width:480px){.brand .brand-logo{width:138px;padding:5px 8px}}
.brand-t{display:flex;flex-direction:column;line-height:1}
.brand-t b{
  font-family:var(--ff-d);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:.87rem;letter-spacing:.055em;text-transform:uppercase;
}
/* La riga sotto il nome era in mist-3 a 8,5 px: 3,92 di contrasto sul fondo
   della barra, sotto il minimo di 4,5, e Giovanni ha segnalato il 02/09/2026
   che non si leggeva. Con mist-2 sale a 7,95. Alzata anche di mezzo punto e
   stretta la spaziatura: a quel corpo 0,24em di tracking allontana le lettere
   piu' di quanto il maiuscoletto regga. */
.brand-t s{
  text-decoration:none;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mist-2);margin-top:4px;
}
.nav{display:flex;gap:clamp(12px,1.8vw,26px);align-items:center}
.nav a{
  font-family:var(--ff-m);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mist-2);position:relative;padding:.5em 0;transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--rosso);
  transition:right .4s var(--ease-o);
}
.nav a:hover,.nav a.act{color:var(--mist)}
.nav a:hover::after,.nav a.act::after{right:0}
@media(max-width:1240px){.nav{display:none}}

.lang{display:flex;gap:1px;border:1px solid var(--bordo);flex:none}
.lang button{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.55em .62em;color:var(--mist-3);transition:.3s;
}
.lang button.on{background:var(--mist);color:var(--nero)}
.lang button:not(.on):hover{color:var(--mist)}

.hdr-tel{
  display:flex;align-items:center;gap:.55em;flex:none;
  font-family:var(--ff-m);font-size:.78rem;letter-spacing:.09em;color:var(--mist);
  border:1px solid var(--bordo-3);padding:.62em .95em;transition:.35s var(--ease);
}
.hdr-tel:hover{background:var(--rosso);border-color:var(--rosso);color:#fff}
.hdr-tel svg{width:12px;height:12px;flex:none}
@media(max-width:760px){.hdr-tel span{display:none}.hdr-tel{padding:.62em .7em}}

.burger{display:none;flex:none;width:38px;height:38px;border:1px solid var(--bordo);position:relative}
.burger i{
  position:absolute;left:11px;width:16px;height:1px;background:var(--mist);transition:.35s var(--ease);
}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:22px}
.burger.x i:nth-child(1){top:18.5px;transform:rotate(45deg)}
.burger.x i:nth-child(2){top:18.5px;transform:rotate(-45deg)}
@media(max-width:1240px){.burger{display:block}}

.mnav{
  position:fixed;inset:0;z-index:79;background:var(--notte);
  display:flex;flex-direction:column;justify-content:center;padding:var(--hdr) var(--gut) 0;
  transform:translateY(-100%);transition:transform .6s var(--ease-o);
}
.mnav.on{transform:translateY(0)}
.mnav a{
  font-family:var(--ff-d);font-variation-settings:"wdth" 115,"wght" 600;
  font-size:clamp(1.6rem,7vw,2.6rem);text-transform:uppercase;letter-spacing:-.01em;
  padding:.28em 0;border-bottom:1px solid var(--bordo-2);display:flex;justify-content:space-between;align-items:baseline;
}
.mnav a em{font-family:var(--ff-m);font-size:.72rem;font-style:normal;color:var(--mist-3);letter-spacing:.15em}

/* ══ HERO ══════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:var(--hdr);overflow:hidden;
}
/* la foto è più alta della sezione: la parte in eccesso è la corsa
   che ha a disposizione mentre la pagina le scorre davanti */
.hero-bg{position:absolute;left:0;right:0;top:-16%;height:132%;z-index:0;will-change:transform}
.hero-bg img{
  /* L'Eremo sta nella meta' alta della foto e a sinistra del centro: il
     ritaglio sale e si sposta li', se no resta solo acqua. */
  width:100%;height:100%;object-fit:cover;object-position:42% 30%;
  transform:scale(1.07);animation:kb 26s var(--ease) forwards;
  filter:saturate(.88) contrast(1.06) brightness(.82);
}
@keyframes kb{to{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(1,7,29,.84) 0%,rgba(1,7,29,.3) 24%,rgba(1,7,29,.24) 44%,rgba(1,7,29,.8) 78%,var(--nero) 100%),
    linear-gradient(96deg,rgba(1,7,29,.88) 0%,rgba(1,7,29,.62) 34%,rgba(1,7,29,.2) 62%,transparent 80%);
}
/* riga d'orizzonte: la quota del lago, tirata attraverso la foto */
.horizon{
  position:absolute;left:0;right:0;top:clamp(118px,20vh,215px);z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:0;
}
.horizon i{
  flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(246,220,174,.55) 18%,rgba(246,220,174,.55) 82%,transparent);
  transform:scaleX(0);transform-origin:left;animation:hz 1.7s .55s var(--ease-o) forwards;
}
@keyframes hz{to{transform:scaleX(1)}}
.horizon b{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--luce);padding:0 14px;white-space:nowrap;flex:none;font-weight:400;
  opacity:0;animation:fadein .8s 1.5s forwards;
  text-shadow:0 1px 14px rgba(0,0,0,.9);
}
@keyframes fadein{to{opacity:1}}
/* sotto i 760px la riga finirebbe dentro il titolo: si toglie */
@media(max-width:760px){.horizon{display:none}}
/* su mobile l'eccedenza costerebbe un ritaglio troppo stretto della foto:
   corsa dimezzata, e la geometria si stringe di conseguenza */
@media(max-width:760px){.hero-bg{top:-10%;height:120%}}
/* su schermo stretto il testo copre tutta la foto: serve più velo */
@media(max-width:760px){
  .hero::after{
    background:linear-gradient(180deg,rgba(1,7,29,.86) 0%,rgba(1,7,29,.58) 20%,rgba(1,7,29,.6) 48%,rgba(1,7,29,.88) 76%,var(--nero) 100%);
  }
}

.hero-in{position:relative;z-index:3;padding-bottom:clamp(26px,4vh,46px)}
.hero-kick{
  font-family:var(--ff-m);font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mist-2);display:flex;align-items:center;gap:.9em;margin:0 0 1.5em;flex-wrap:wrap;
}
.hero-kick s{text-decoration:none;color:var(--rosso-h)}
.hero-h{margin:0 0 .58em;max-width:17ch}
.hero-h .ln{display:block;overflow:hidden}
.hero-h .ln > i{
  display:block;font-style:normal;
  transform:translateY(105%);animation:up 1.05s var(--ease-o) forwards;
}
.hero-h .ln:nth-child(1) > i{animation-delay:.18s}
.hero-h .ln:nth-child(2) > i{animation-delay:.3s}
.hero-h .ln:nth-child(3) > i{animation-delay:.42s}
@keyframes up{to{transform:translateY(0)}}
.hero-sub{
  max-width:44ch;color:var(--mist-2);font-size:clamp(.98rem,1.3vw,1.1rem);font-weight:330;
  opacity:0;animation:fadein .9s .8s forwards;margin:0 0 2em;
}
/* ricerca rapida, dentro l'hero */
.qs{
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;
  background:var(--bordo-2);border:1px solid var(--bordo-3);
  max-width:1060px;margin:0 0 14px;
  opacity:0;animation:fadein .9s .95s forwards;
}
.qs-f{position:relative;display:flex;align-items:center;background:rgba(9,14,20,.82);backdrop-filter:blur(10px)}
.qs-f label{
  position:absolute;left:15px;top:9px;font-family:var(--ff-m);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mist-3);pointer-events:none;
}
.qs-f select{width:100%;padding:25px 30px 11px 15px;font-size:.88rem;font-weight:350;appearance:none;cursor:pointer}
.qs-f select option{background:var(--notte-2);color:var(--mist)}
.qs-f select:focus{outline:none}
.qs-f::after{
  content:"";position:absolute;right:15px;bottom:17px;width:7px;height:7px;
  border-right:1px solid var(--mist-3);border-bottom:1px solid var(--mist-3);
  transform:rotate(45deg);pointer-events:none;
}
.qs-f:focus-within{background:rgba(17,24,31,.92)}
.qs-f:focus-within label{color:var(--rosso-h)}
.qs-go{
  background:var(--rosso);color:#fff;padding:0 34px;
  font-family:var(--ff-m);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.qs-go:hover{background:#fff;color:var(--rosso)}
@media(max-width:900px){
  .qs{grid-template-columns:1fr 1fr}
  .qs-go{grid-column:1/-1;padding:16px}
}
@media(max-width:480px){.qs{grid-template-columns:1fr}}
.hero-alt{margin:0;opacity:0;animation:fadein .9s 1.1s forwards}
.hero-alt a{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-2);border-bottom:1px solid var(--bordo-3);padding-bottom:2px;transition:.3s var(--ease);
}
.hero-alt a:hover{color:var(--luce);border-color:var(--luce)}

.hero-strip{
  position:relative;z-index:3;border-top:1px solid var(--bordo-2);
  display:grid;grid-template-columns:repeat(4,1fr);
  opacity:0;animation:fadein 1s 1.25s forwards;
}
.hero-strip div{
  padding:20px 0 24px;border-left:1px solid var(--bordo-2);padding-left:18px;
}
.hero-strip div:first-child{border-left:none;padding-left:0}
.hero-strip b{
  display:block;font-family:var(--ff-d);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(1.3rem,2.5vw,2rem);line-height:1;letter-spacing:-.02em;
}
.hero-strip s{
  text-decoration:none;display:block;margin-top:7px;
  font-family:var(--ff-m);font-size:.705rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-3);
}
@media(max-width:700px){
  .hero-strip{grid-template-columns:repeat(2,1fr)}
  .hero-strip div:nth-child(3){border-left:none;padding-left:0}
  .hero-strip div:nth-child(-n+2){border-bottom:1px solid var(--bordo-2)}
}


/* i numeri salgono da sotto, uno dopo l'altro */
.facts b,.studio-nums b{
  clip-path:inset(0 0 112% 0);transform:translateY(.16em);
  transition:clip-path .8s var(--ease-o),transform .8s var(--ease-o);
}
.rv.in .facts b,.rv.in .studio-nums b{clip-path:inset(-16% 0);transform:none}
.facts div:nth-child(1) b,.studio-nums div:nth-child(1) b{transition-delay:.18s}
.facts div:nth-child(2) b,.studio-nums div:nth-child(2) b{transition-delay:.27s}
.facts div:nth-child(3) b,.studio-nums div:nth-child(3) b{transition-delay:.36s}
.facts div:nth-child(4) b,.studio-nums div:nth-child(4) b{transition-delay:.45s}
@keyframes numin{
  from{clip-path:inset(0 0 112% 0);transform:translateY(.16em)}
  to{clip-path:inset(-16% 0);transform:none}
}
.hero-strip b{animation:numin .85s var(--ease-o) backwards}
.hero-strip div:nth-child(1) b{animation-delay:1.35s}
.hero-strip div:nth-child(2) b{animation-delay:1.44s}
.hero-strip div:nth-child(3) b{animation-delay:1.53s}
.hero-strip div:nth-child(4) b{animation-delay:1.62s}

/* le schede del catalogo entrano sfalsate a ogni filtro */
@keyframes cardin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card{animation:cardin .6s var(--ease-o) backwards}
/* La griglia ridisegnata all'arrivo del catalogo dal database non rigioca
   l'ingresso: sarebbe un lampeggio che l'utente non ha chiesto. */
.grid.muta .card{animation:none}

/* la riga del servizio si sottolinea al passaggio */
.serv-l li::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--rosso);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-o);
}
.serv-l li:hover::after{transform:scaleX(1)}

/* la mappa di Ispra si disegna anche lei */
.ct-map svg path{transition:stroke-dashoffset 1.6s var(--ease-o)}

/* la riga della scheda lampeggia quando cambia */
@keyframes schit{from{background:rgba(255,171,94,.16)}to{background:transparent}}
.sc-l.hit{animation:schit 1s var(--ease)}

/* il pannello della scheda immobile sale a scaglioni */
@keyframes panin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sch.on .sch-pan > *{animation:panin .62s var(--ease-o) backwards}
.sch.on .sch-pan > *:nth-child(1){animation-delay:.12s}
.sch.on .sch-pan > *:nth-child(2){animation-delay:.18s}
.sch.on .sch-pan > *:nth-child(3){animation-delay:.24s}
.sch.on .sch-pan > *:nth-child(4){animation-delay:.3s}
.sch.on .sch-pan > *:nth-child(5){animation-delay:.36s}
.sch.on .sch-pan > *:nth-child(6){animation-delay:.42s}
.sch.on .sch-pan > *:nth-child(7){animation-delay:.48s}

/* ══ reveal generico ═══════════════════════════════════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-o),transform .85s var(--ease-o)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}

/* ══ sezioni base ══════════════════════════════════════════ */
section{position:relative}
.sec{padding:clamp(74px,10vh,130px) 0}
.sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(34px,5vh,60px)}
.sec-hd p{max-width:40ch;color:var(--mist-2);font-size:.96rem;margin:0}
@media(max-width:840px){.sec-hd{flex-direction:column;align-items:flex-start}}
.rule{height:1px;background:var(--bordo-2);border:none;margin:0}

/* ══ MANIFESTO ═════════════════════════════════════════════ */
.mani{background:var(--notte);border-top:1px solid var(--bordo-2)}
.mani-g{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,6vw,90px);align-items:start}
@media(max-width:940px){.mani-g{grid-template-columns:1fr;gap:34px}}
.mani-q{
  font-family:var(--ff-d);font-variation-settings:"wdth" 108,"wght" 400;
  font-size:clamp(1.55rem,3.3vw,2.65rem);line-height:1.14;letter-spacing:-.014em;
  text-transform:none;margin:0;color:var(--mist);
}
.mani-q b{font-variation-settings:"wdth" 112,"wght" 700;color:var(--luce)}
.mani-q em{font-style:italic;color:var(--rosso-h);font-variation-settings:"wdth" 105,"wght" 500}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bordo-2);margin-top:34px;border:1px solid var(--bordo-2)}
.facts div{background:var(--notte);padding:20px 18px}
.facts b{
  display:block;font-family:var(--ff-d);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:1.7rem;line-height:1;letter-spacing:-.02em;color:var(--mist);
}
.facts s{text-decoration:none;display:block;margin-top:8px;font-family:var(--ff-m);font-size:.695rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mist-3)}

/* ══ LA SPONDA — la carta del Verbano, di notte ════════════
   I paesi in cui l'agenzia ha immobili sono luci accese
   sulla riva; gli altri restano punti grigi di contesto.   */
.sponda{background:linear-gradient(180deg,var(--nero),#020926 52%,var(--nero));border-top:1px solid var(--bordo-2)}
.sponda-g{display:grid;grid-template-columns:1.42fr .58fr;gap:clamp(26px,4vw,58px);align-items:start}
@media(max-width:940px){.sponda-g{grid-template-columns:1fr}}

.mappa-box{position:relative;border:1px solid var(--bordo-2);background:rgba(8,13,20,.72);padding:clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px) 34px}
.mappa{width:100%;height:auto;position:relative;z-index:1}
/* il canvas dell'acqua sta sotto alla carta e non intercetta il mouse */
.lago-gl{position:absolute;z-index:0;pointer-events:none}
/* quando l'acqua è vera, le bande dipinte a mano si tolgono di mezzo */
.gl-on .acqua,.gl-on .fondali,.gl-on .acqua-hatch,.gl-on .fondo{display:none}
.mappa .acqua use{fill:var(--blu);fill-opacity:.11}

/* reticolo di carta: sta sotto a tutto e non si fa notare */
.mappa .reticolo{color:#4b6bff;opacity:.07}

/* i fondali. Ogni banda è la stessa riva ingrossata e ritagliata dentro
   allo specchio d'acqua: sommandosi, la secca resta chiara e il largo
   sprofonda. È il modo in cui una carta racconta la profondità. */
.mappa .fondali use{fill:none;stroke:var(--blu);stroke-opacity:.075}
.mappa .acqua-hatch use{fill:none;stroke:url(#hatch)}

/* la rosa: solo il nord, che è furniture onesta e non ornamento */
.mappa .nord path{fill:#7f9bff;fill-opacity:.4}
.mappa .nord text{font-family:var(--ff-m);font-size:9px;letter-spacing:.2em;fill:#7f9bff;fill-opacity:.5;text-anchor:middle}

/* la carta entra come se la stessero tracciando:
   prima il profilo della riva, poi l'acqua, poi le luci */
.mappa .acqua{opacity:0;transition:opacity .9s var(--ease) 1.15s}
.mappa .fondali{opacity:0;transition:opacity 1.1s var(--ease) 1.3s}
.mappa .reticolo{opacity:0;transition:opacity 1.2s var(--ease) .2s}
.mappa.lit .reticolo{opacity:.07}
.mappa .nord{opacity:0;transition:opacity .8s var(--ease) 1.7s}
.mappa.lit .nord{opacity:1}
.mappa .acqua-hatch{color:#4b6bff;opacity:0;transition:opacity .95s var(--ease) 1.35s}
.mappa .lab-acqua{opacity:0;transition:opacity .8s var(--ease) 1.55s}
.mappa.lit .acqua,.mappa.lit .fondali{opacity:1}
.mappa.lit .acqua-hatch{opacity:.22}
.mappa.lit .lab-acqua{opacity:1}
.mappa .acqua-linea{filter:drop-shadow(0 0 3px rgba(75,107,255,.45))}
.mappa .acqua-linea use{fill:none;stroke:#8fb0ff;stroke-opacity:.72;stroke-width:1.4}

.lab-lago{
  font-family:var(--ff-m);font-size:13px;letter-spacing:.34em;fill:#7f9bff;fill-opacity:.6;
  transform:rotate(-64deg);transform-origin:150px 230px;
}
.lab-lag{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.22em;fill:#7f9bff;fill-opacity:.55;text-anchor:middle}
.mappa-note{position:absolute;right:16px;bottom:12px;color:var(--mist-3);font-size:.67rem}

#pins .pin{opacity:0}
#pins.lit .pin{opacity:1;animation:accendi .6s var(--ease) backwards;animation-delay:var(--d,0s)}
/* i paesi con immobili sono lampade: partono con lo sfarfallio, poi tengono */
#pins.lit .pin:not(.mute){animation:lampada .75s var(--ease) backwards;animation-delay:var(--d,0s)}
#pins.lit .pin:not(.mute) .c{animation:filamento 1.5s var(--ease-o) backwards;animation-delay:var(--d,0s)}
@keyframes accendi{from{opacity:0}to{opacity:1}}
@keyframes lampada{0%{opacity:0}60%,100%{opacity:1}}
/* l'alone entra un po' più largo e si posa: è quello che dice "acceso" */
#pins.lit .pin:not(.mute) .g{animation:alone 1.3s var(--ease-o) backwards;animation-delay:var(--d,0s)}
@keyframes alone{
  0%{opacity:0;transform:scale(1.55)}
  30%{opacity:.58}
  100%{opacity:.4;transform:scale(1)}
}
@keyframes filamento{0%,25%{fill:#fff}100%{fill:var(--sole)}}
.pin{cursor:pointer}
/* niente respiro perpetuo: dieci aloni che pulsano sono un albero di
   Natale. Si accendono una volta, poi restano fermi. */
.pin .g{fill:url(#gLamp);opacity:.4;
  transform-box:fill-box;transform-origin:center;
  transition:opacity .35s var(--ease),transform .5s var(--ease-o)}
.pin .b{fill:none;stroke:var(--sole);stroke-opacity:.5;stroke-width:1.1;transition:.32s var(--ease)}
.pin .c{fill:var(--sole);transition:.32s var(--ease)}
.pin text{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;fill:var(--mist);transition:fill .32s var(--ease)}
.pin text.n{font-size:8px;letter-spacing:.1em;fill:var(--sole);fill-opacity:.8}
.pin.mute{pointer-events:none}
.pin.mute .b{stroke:rgba(236,234,229,.26)}
.pin.mute .c{fill:rgba(236,234,229,.3)}
.pin.mute text{font-size:8px;letter-spacing:.14em;fill:var(--mist-3)}
.pin:hover .g,.pin.hi .g,.pin.on .g{opacity:.92;animation:none;transform:scale(1.2)}
.pin:hover .b,.pin.hi .b,.pin.on .b{stroke:#fff;stroke-opacity:1;stroke-width:1.4}
.pin:hover .c,.pin.hi .c{fill:#fff}
.pin:hover text,.pin.hi text{fill:#fff}
.pin.on .c{fill:var(--rosso-h)}
.pin.on .b{stroke:var(--rosso-h)}
.pin.on text{fill:var(--rosso-h)}
/* il paese scelto batte, come il pin dell'ufficio nella mappa dei contatti */
.pin .ring{fill:none;stroke:var(--rosso-h);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.pin.on .ring{animation:battito 2.4s var(--ease) infinite}
@keyframes battito{0%{transform:scale(.42);opacity:.75}72%,100%{transform:scale(1.5);opacity:0}}
.pin:focus{outline:none}
.pin:focus-visible .b{stroke:#fff;stroke-width:2}

.sponda-l .sl-h{color:var(--mist-3);margin:0 0 4px}
.sponda-l ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--bordo-2)}
.sponda-l li button{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:13px 4px;border-bottom:1px solid var(--bordo-2);text-align:left;
  transition:padding-left .35s var(--ease),color .3s var(--ease);
}
.sponda-l li button:hover,.sponda-l li button.on{padding-left:12px}
.sponda-l .cn{
  font-family:var(--ff-d);font-variation-settings:"wdth" 110,"wght" 500;
  font-size:1.02rem;text-transform:uppercase;letter-spacing:.008em;line-height:1.1;
}
.sponda-l .cq{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-3);white-space:nowrap;transition:color .3s}
.sponda-l li button:hover .cq{color:var(--sole)}
.sponda-l li button.on{color:var(--rosso-h)}
.sponda-l li button.on .cq{color:var(--rosso-h)}
.sl-foot{margin:20px 0 0;font-size:.78rem;line-height:1.55;color:var(--mist-3)}

/* ══ CATALOGO ══════════════════════════════════════════════ */
.cat{background:var(--nero);border-top:1px solid var(--bordo-2)}
.tools{
  display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:1px;background:var(--bordo-2);
  border:1px solid var(--bordo-2);margin-bottom:26px;
}
@media(max-width:1000px){.tools{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tools{grid-template-columns:1fr}}
.tool{background:var(--notte);position:relative;display:flex;align-items:center}
.tool label{
  position:absolute;left:15px;top:9px;font-family:var(--ff-m);font-size:.65rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mist-3);pointer-events:none;
}
.tool select,.tool input{
  width:100%;padding:26px 15px 12px;font-size:.9rem;font-weight:350;
  appearance:none;cursor:pointer;color:var(--mist);
}
.tool input{cursor:text}
.tool select option{background:var(--notte-2);color:var(--mist)}
.tool::after{
  content:"";position:absolute;right:15px;bottom:17px;width:7px;height:7px;
  border-right:1px solid var(--mist-3);border-bottom:1px solid var(--mist-3);
  transform:rotate(45deg);pointer-events:none;
}
.tool.no::after{display:none}
.tool:focus-within{background:var(--notte-2)}
.tool:focus-within label{color:var(--rosso-h)}
.tool input:focus,.tool select:focus{outline:none}

.cat-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.cat-cnt{font-family:var(--ff-m);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-2)}
.cat-cnt b{color:var(--luce);font-weight:500}
.cat-rst{font-family:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso-h);border-bottom:1px solid currentColor;margin-left:14px;padding-bottom:1px;transition:color .3s}
.cat-rst:hover{color:#fff}
.chips{display:flex;gap:7px;flex-wrap:wrap}
/* Chip delle tipologie: erano a .6rem in --mist-3 con il bordo quasi
   invisibile, e sul blu notte non si leggevano (Francesco, 01/10/2026). */
.chip{
  font-family:var(--ff-m);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.7em 1em;border:1px solid var(--bordo-3);color:var(--mist-2);transition:.3s var(--ease);
}
.chip:hover{color:var(--mist);border-color:var(--bordo-3)}
.chip.on{background:var(--mist);border-color:var(--mist);color:var(--nero)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

.card{
  position:relative;cursor:pointer;background:var(--notte);overflow:hidden;
  border:1px solid var(--bordo-2);transition:border-color .45s var(--ease),transform .55s var(--ease-o);
  display:block;width:100%;text-align:left;
}
.card:hover{border-color:var(--bordo-3);transform:translateY(-4px)}
.card-ph{position:relative;aspect-ratio:4/4.6;overflow:hidden;background:var(--notte-2)}
/* Scheda ancora senza fotografie: succede fra il momento in cui l'agenzia la
   crea e quello in cui carica le foto. Meglio un riquadro muto che l'icona di
   immagine rotta del browser. */
.card-nof{
  position:absolute;inset:0;background:var(--notte-2);
  background-image:
    linear-gradient(135deg,rgba(236,234,229,.045) 25%,transparent 25%,transparent 50%,
                    rgba(236,234,229,.045) 50%,rgba(236,234,229,.045) 75%,transparent 75%);
  background-size:14px 14px;
}
.card-ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-o),filter .6s;
  filter:saturate(.9) brightness(.92);
}
.card:hover .card-ph img{transform:scale(1.06);filter:saturate(1) brightness(1)}
.card-ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,7,29,.5) 0%,transparent 30%,transparent 44%,rgba(1,7,29,.9) 100%);
}
.card-n{
  position:absolute;left:14px;top:12px;z-index:2;
  font-family:var(--ff-m);font-size:.705rem;letter-spacing:.18em;color:var(--mist);
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.card-bg{
  position:absolute;right:12px;top:11px;z-index:2;
  font-family:var(--ff-m);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.42em .68em;background:rgba(1,7,29,.7);border:1px solid var(--bordo-3);backdrop-filter:blur(6px);
}
.card-bg.tr{background:var(--rosso);border-color:var(--rosso);color:#fff}
.card-bg.rent{background:var(--sole);border-color:var(--sole);color:var(--nero)}
.card-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 16px 16px}
.card-com{
  font-family:var(--ff-m);font-size:.695rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--luce);margin-bottom:8px;display:flex;gap:.7em;align-items:center;
}
.card-com i{font-style:normal;color:var(--mist-3);letter-spacing:.1em}
.card-t{
  font-family:var(--ff-d);font-variation-settings:"wdth" 108,"wght" 500;
  font-size:1.06rem;line-height:1.16;text-transform:none;letter-spacing:-.004em;
  margin:0 0 12px;color:#fff;
}
.card-ft{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-top:1px solid rgba(236,234,229,.16);padding-top:11px}
.card-pr{
  font-family:var(--ff-d);font-variation-settings:"wdth" 115,"wght" 600;
  font-size:1.08rem;letter-spacing:-.01em;color:#fff;white-space:nowrap;
}
.card-pr.tbd{font-size:.78rem;font-variation-settings:"wdth" 112,"wght" 400;color:var(--mist-2);text-transform:uppercase;letter-spacing:.1em}
.card-d{display:flex;gap:.85em;font-family:var(--ff-m);font-size:.695rem;letter-spacing:.08em;color:var(--mist-2)}
.card-d s{text-decoration:none}
.card-sw{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rosso);z-index:3;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-o);
}
.card:hover .card-sw{transform:scaleX(1)}

.empty{
  grid-column:1/-1;padding:70px 20px;text-align:center;border:1px dashed var(--bordo);
}
.empty p{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-3)}

/* ══ BANDA PARALLASSE ══════════════════════════════════════ */
.band{
  position:relative;min-height:64svh;display:grid;place-items:center;overflow:hidden;
  text-align:center;padding:80px var(--gut);
}
.band-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.band-bg img{
  position:absolute;left:0;top:-26%;width:100%;height:152%;object-fit:cover;
  filter:saturate(.8) brightness(.6) contrast(1.05);will-change:transform;
}
.band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--nero) 0%,rgba(1,7,29,.35) 30%,rgba(1,7,29,.35) 70%,var(--nero) 100%)}
.band-in{position:relative;z-index:2;max-width:26ch}
.band-q{
  font-family:var(--ff-d);font-variation-settings:"wdth" 110,"wght" 400;
  font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.13;letter-spacing:-.016em;text-transform:none;
  margin:0 0 20px;color:#fff;
}
.band-q b{font-variation-settings:"wdth" 114,"wght" 700}

/* ══ STUDIO — pannello invertito, chiaro ═══════════════════ */
.studio{background:var(--carta);color:var(--nero)}
.studio .eyebrow{color:rgba(1,7,29,.72)}
.studio-g{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:940px){.studio-g{grid-template-columns:1fr}}
.studio-ph{position:relative}
/* `height:auto` e' quello che fa valere il 4/3: senza, l'attributo height
   dell'<img> vince e su telefono la foto usciva 350x1086, una striscia
   verticale. E' il difetto della terza schermata di Francesco del 02/09. */
.studio-ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.95)}
.studio-ph .fr{position:absolute;inset:14px -14px -14px 14px;border:1px solid rgba(1,7,29,.28);z-index:-1}
.studio-ph .mk{
  position:absolute;right:-16px;bottom:-16px;width:clamp(72px,9vw,104px);
  background:var(--carta);padding:11px;
}
.studio h2{color:var(--nero)}
.studio p{color:rgba(1,7,29,.86);max-width:52ch}
.studio-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(1,7,29,.14);border:1px solid rgba(1,7,29,.14);margin-top:32px}
.studio-nums div{background:var(--carta);padding:18px 14px}
.studio-nums b{
  display:block;font-family:var(--ff-d);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1;color:var(--nero);letter-spacing:-.02em;
}
.studio-nums s{text-decoration:none;display:block;margin-top:7px;font-family:var(--ff-m);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(1,7,29,.72)}
@media(max-width:620px){.studio-nums{grid-template-columns:1fr 1fr}}
.studio .btn{border-color:rgba(1,7,29,.3);color:var(--nero)}
.studio .btn::before{background:var(--nero)}
.studio .btn:hover{color:var(--carta);border-color:var(--nero)}
.people{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:1px;background:rgba(1,7,29,.14);border:1px solid rgba(1,7,29,.14)}
.people li{background:var(--carta);padding:13px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.people b{font-family:var(--ff-d);font-variation-settings:"wdth" 112,"wght" 600;text-transform:uppercase;font-size:.95rem;letter-spacing:.01em}
.people a{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.09em;color:rgba(1,7,29,.78);overflow-wrap:anywhere;transition:color .3s}
.people a:hover{color:var(--rosso)}
.studio-tag{
  display:inline-flex;align-items:center;gap:.6em;margin-top:26px;
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(1,7,29,.75);border-top:1px solid rgba(1,7,29,.2);padding-top:14px;
}

/* ══ SERVIZI ═══════════════════════════════════════════════ */
.serv{background:var(--nero)}
.serv-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--bordo-2)}
.serv-l li{
  position:relative;border-bottom:1px solid var(--bordo-2);display:grid;
  grid-template-columns:62px minmax(180px,.9fr) 1.6fr;gap:clamp(14px,2.4vw,40px);
  padding:22px 6px;align-items:baseline;transition:background .4s var(--ease),padding-left .4s var(--ease);
}
.serv-l li:hover{background:var(--notte);padding-left:16px}
.serv-l .sn{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.14em;color:var(--mist-3);transition:color .4s}
.serv-l li:hover .sn{color:var(--rosso-h)}
.serv-l .st{font-family:var(--ff-d);font-variation-settings:"wdth" 114,"wght" 600;font-size:1.08rem;text-transform:uppercase;letter-spacing:.005em;margin:0}
.serv-l .sp{font-size:.9rem;color:var(--mist-2);margin:0;line-height:1.55}
@media(max-width:780px){
  .serv-l li{grid-template-columns:46px 1fr;gap:12px 14px}
  .serv-l .sp{grid-column:2/-1}
}

/* ══ RECENSIONI ════════════════════════════════════════════ */
.rec{background:var(--notte);border-top:1px solid var(--bordo-2)}
.rec-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:34px}
.rec-score{
  display:flex;align-items:baseline;gap:.4em;
  font-family:var(--ff-d);font-variation-settings:"wdth" 118,"wght" 700;font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1;letter-spacing:-.03em;color:var(--luce);
}
.rec-score em{font-style:normal;font-family:var(--ff-m);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-3)}
.stars{display:flex;gap:3px}
.stars svg{width:14px;height:14px;fill:var(--sole)}
.rec-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bordo-2);border:1px solid var(--bordo-2)}
@media(max-width:1000px){.rec-g{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.rec-g{grid-template-columns:1fr}}
.rec-c{background:var(--notte);padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.rec-c .qm{font-family:var(--ff-d);font-size:2.4rem;line-height:.6;color:var(--rosso);font-variation-settings:"wght" 700}
.rec-c p{font-size:.92rem;color:var(--mist);line-height:1.55;margin:0;flex:1}
.rec-c .who{border-top:1px solid var(--bordo-2);padding-top:13px}
.rec-c .who b{display:block;font-size:.86rem;font-weight:500}
.rec-c .who s{text-decoration:none;font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;color:var(--mist-3)}

/* ══ VALUTAZIONE ═══════════════════════════════════════════ */
.valuta{background:linear-gradient(180deg,var(--nero),#030d2a 55%,var(--nero))}
.val-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:960px){.val-g{grid-template-columns:1fr}}
.val-lh{
  margin:30px 0 0;font-family:var(--ff-d);font-variation-settings:"wdth" 112,"wght" 650;
  font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);
}
.val-lh + .val-l{margin-top:12px}
.val-l{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--bordo-2)}
.val-online{margin-top:26px;padding:18px 20px;border:1px solid var(--bordo-2);border-left:2px solid var(--rosso)}
.val-online p{font-size:.9rem;color:var(--mist-2);line-height:1.55;margin:0 0 14px}
.val-l li{
  position:relative;padding:13px 0 13px 32px;border-bottom:1px solid var(--bordo-2);
  font-size:.92rem;color:var(--mist-2);line-height:1.5;
}
.val-l li::before{content:"";position:absolute;left:2px;top:22px;width:14px;height:2px;background:var(--rosso)}
.val-right{position:relative}
.val-form{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bordo-2);border:1px solid var(--bordo-2)}
.val-form .w2{grid-column:1/-1}
@media(max-width:560px){.val-form{grid-template-columns:1fr}}

.fld{background:var(--notte);position:relative}
.fld input,.fld textarea,.fld select{width:100%;padding:26px 15px 12px;font-size:.9rem;font-weight:350}
.fld select{appearance:none;cursor:pointer}
.fld select option{background:var(--notte-2);color:var(--mist)}
.fld textarea{resize:vertical;min-height:80px}
.fld label{position:absolute;left:15px;top:9px;font-family:var(--ff-m);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-3);pointer-events:none}
.fld:focus-within{background:var(--notte-2)}
.fld:focus-within label{color:var(--rosso-h)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none}
.fld.err{box-shadow:inset 0 0 0 1px var(--rosso)}

/* la scheda che si compila mentre si scrive */
.scheda{
  margin-top:20px;border:1px solid var(--bordo);background:var(--notte);
  padding:22px 22px 18px;position:relative;overflow:hidden;
}
.scheda::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--blu),var(--rosso),var(--sole))}
.sc-h{color:var(--mist-3);margin:0 0 12px}
.sc-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding:9px 0;border-bottom:1px dashed var(--bordo-2)}
.sc-l i{font-style:normal;font-family:var(--ff-m);font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-3);flex:none}
.sc-l b{
  font-family:var(--ff-d);font-variation-settings:"wdth" 110,"wght" 500;
  font-size:1rem;text-transform:uppercase;letter-spacing:.006em;color:#fff;text-align:right;line-height:1.15;
}
.sc-l b.na{color:var(--mist-3);font-family:var(--ff-b);font-size:.86rem;font-weight:330;text-transform:none;letter-spacing:0}
.sc-ref{display:flex;justify-content:space-between;gap:14px;margin:14px 0 0;color:var(--mist-3)}
.sc-ref b{color:var(--luce);font-weight:400}

/* la trappola per i bot: fuori dallo schermo ma non display:none, perche'
   un campo nascosto del tutto certi automi lo saltano */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* il consenso. Senza spunta il modulo non parte, quindi deve vedersi:
   in errore prende il filetto rosso come i campi obbligatori */
.frm-priv{display:flex;align-items:flex-start;gap:10px;margin-top:16px;cursor:pointer;
  font-size:.83rem;line-height:1.55;color:var(--mist-2)}
.frm-priv input{appearance:none;flex:0 0 auto;width:17px;height:17px;margin-top:2px;
  border:1px solid var(--bordo-3);background:var(--notte-2);cursor:pointer;transition:.2s var(--ease)}
.frm-priv input:checked{background:var(--rosso);border-color:var(--rosso)}
.frm-priv input:checked::after{content:"";display:block;width:5px;height:9px;margin:2px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.frm-priv input:focus-visible{outline:2px solid var(--blu-h);outline-offset:2px}
.frm-priv a{color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.frm-priv.err input{border-color:var(--rosso);box-shadow:0 0 0 3px rgba(239,2,13,.18)}

.frm-fail{margin-top:14px;padding:12px 14px;border-left:2px solid var(--rosso);
  background:var(--notte-2);color:var(--mist-2);font-size:.85rem;line-height:1.55}

.frm-act{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.frm-act .btn[disabled]{opacity:.55;pointer-events:none}
.frm-note{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.1em;color:var(--mist-3);text-transform:uppercase}

.sent{
  position:absolute;inset:0;background:var(--notte);display:grid;place-items:center;text-align:center;
  padding:30px;opacity:0;pointer-events:none;transition:opacity .5s;z-index:5;
}
.sent.on{opacity:1;pointer-events:auto}
.sent .sg{width:74px;height:74px;margin:0 auto 18px}
.sent .sg circle{fill:none;stroke:var(--rosso);stroke-width:1.5;stroke-dasharray:220;stroke-dashoffset:220}
.sent.on .sg circle{animation:draw 1s .1s var(--ease-o) forwards}
.sent .sg path{fill:none;stroke:var(--rosso);stroke-width:2;stroke-linecap:square;stroke-dasharray:40;stroke-dashoffset:40}
.sent.on .sg path{animation:draw2 .5s .75s var(--ease-o) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes draw2{to{stroke-dashoffset:0}}
.sent h3{font-size:1.3rem;margin-bottom:10px}
.sent p{font-size:.88rem;color:var(--mist-2);max-width:34ch;margin-inline:auto}

/* ══ CONTATTI ══════════════════════════════════════════════ */
.cont{background:var(--notte);border-top:1px solid var(--bordo-2)}
.cont-g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,70px)}
@media(max-width:940px){.cont-g{grid-template-columns:1fr}}
.coord{
  font-family:var(--ff-m);font-size:.75rem;letter-spacing:.18em;color:var(--mist-3);
  display:flex;gap:1.4em;flex-wrap:wrap;border-top:1px solid var(--bordo-2);padding-top:16px;margin-top:26px;
}
.cnt-l{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:1px;background:var(--bordo-2);border:1px solid var(--bordo-2)}
.cnt-l li{background:var(--notte);padding:0}
.cnt-l a,.cnt-l div{display:flex;align-items:center;gap:16px;padding:17px 18px;transition:background .35s}
.cnt-l a:hover{background:var(--notte-2)}
.cnt-l .ic{width:17px;height:17px;flex:none;stroke:var(--mist-3);fill:none;stroke-width:1.4}
.cnt-l a:hover .ic{stroke:var(--rosso-h)}
.cnt-l .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.cnt-l .tx s{text-decoration:none;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-3)}
.cnt-l .tx b{font-weight:400;font-size:.95rem;overflow-wrap:anywhere}

.orari{border:1px solid var(--bordo);background:var(--notte-2)}
.orari-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--bordo-2)}
.orari-h .mono{color:var(--mist-2)}
.live{display:inline-flex;align-items:center;gap:.55em;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.live i{width:7px;height:7px;border-radius:50%;background:var(--mist-3);flex:none}
.live.open{color:#4ade80}
.live.open i{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18);animation:pulse 2.4s infinite}
.live.shut{color:var(--mist-3)}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
.orari-l{list-style:none;margin:0;padding:6px 0}
.orari-l li{display:flex;justify-content:space-between;gap:14px;padding:8px 18px;font-size:.87rem}
.orari-l li span:first-child{color:var(--mist-2)}
.orari-l li.today{color:var(--luce)}
.orari-l li.today span:first-child{color:var(--luce)}
.orari-l li span:last-child{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.05em}


.orari{margin-top:26px}
.cnt-soc{display:flex;gap:10px;margin-top:22px}
.cnt-soc a{
  font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-3);border:1px solid var(--bordo);padding:.62em 1em;transition:.32s var(--ease);
}
.cnt-soc a:hover{color:var(--nero);background:var(--mist);border-color:var(--mist)}

.ct-map{border:1px solid var(--bordo-2);background:rgba(8,13,20,.72);padding:10px}
.ct-map{position:relative}
.ct-map svg{width:100%;height:auto;position:relative;z-index:1}
/* stessa lingua della carta grande, alla scala del paese */
.ct-map .reticolo{color:#4b6bff;opacity:.075}
.ct-map .acqua use{fill:var(--blu);fill-opacity:.11}
.ct-map .fondali use{fill:none;stroke:var(--blu);stroke-opacity:.075}
.ct-map .acqua-hatch{color:#4b6bff;opacity:.22}
.ct-map .acqua-hatch use{fill:none;stroke:url(#hatch)}
.ct-map .acqua-linea{filter:drop-shadow(0 0 3px rgba(75,107,255,.45))}
.ct-map .acqua-linea use{fill:none;stroke:#8fb0ff;stroke-opacity:.72;stroke-width:1.4}

.ct-map .strade path{fill:none;stroke:rgba(236,234,229,.13);stroke-width:1.2;stroke-linecap:round}
.ct-map .strade .lung{stroke:rgba(236,234,229,.2);stroke-width:1.8}
.ct-map .strade .main{stroke:rgba(246,220,174,.34);stroke-width:2.6}
.ct-map .blocchi rect{fill:rgba(236,234,229,.05);stroke:rgba(236,234,229,.07);stroke-width:.7}

.ct-map .mp-acqua{font-family:var(--ff-m);font-size:9px;letter-spacing:.26em;fill:#7f9bff;fill-opacity:.55}
.ct-map .mp-via{font-family:var(--ff-m);font-size:7.5px;letter-spacing:.26em;fill:var(--luce);fill-opacity:.5}
.ct-map .nord path{fill:#7f9bff;fill-opacity:.4}
.ct-map .nord text{font-family:var(--ff-m);font-size:8px;letter-spacing:.2em;fill:#7f9bff;fill-opacity:.5;text-anchor:middle}
.mp-us{font-family:var(--ff-m);font-size:8px;letter-spacing:.2em;fill:var(--mist-2);text-anchor:middle}
.pin-us .pulse{fill:none;stroke:var(--rosso);stroke-width:1.4;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:ping 3s var(--ease) infinite}
.pin-us .p2{animation-delay:1.5s}
@keyframes ping{0%{transform:scale(.35);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.ct-map [data-draw]{transition:stroke-dashoffset 1.6s var(--ease-o)}
.map-btn{margin-top:12px;width:100%;justify-content:center}

/* ══ FOOTER ════════════════════════════════════════════════ */
.ftr{background:var(--nero);border-top:1px solid var(--bordo-2);padding:52px 0 34px}
.ftr-g{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.ftr-b{display:flex;align-items:center;gap:13px}
.ftr-b img{width:44px}
.ftr-soc{display:flex;gap:9px}
.ftr-soc a{
  width:36px;height:36px;border:1px solid var(--bordo);display:grid;place-items:center;transition:.35s var(--ease);
}
.ftr-soc a:hover{background:var(--mist);border-color:var(--mist)}
.ftr-soc svg{width:15px;height:15px;fill:var(--mist-2)}
.ftr-soc a:hover svg{fill:var(--nero)}
.ftr-bot{
  border-top:1px solid var(--bordo-2);margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--ff-m);font-size:.69rem;letter-spacing:.11em;color:var(--mist-3);text-transform:uppercase;
}
.ftr-bot a:hover{color:var(--mist)}
.demo-note{
  margin-top:22px;border:1px dashed var(--bordo);padding:14px 16px;
  font-size:.76rem;color:var(--mist-3);line-height:1.5;
}
.demo-note b{color:var(--mist-2);font-weight:500}

/* ══ SCHEDA IMMOBILE (overlay) ═════════════════════════════ */
/* Su iPhone `inset:0` si ferma sopra la barra di Safari, che e' trasparente:
   in quella striscia si vedeva la pagina sotto, cioe' la copertina
   dell'immobile seguente nella griglia (Francesco, 24/09/2026). Con l'altezza
   del viewport grande (lvh) la scheda arriva fino al bordo fisico dello
   schermo, e il pannello aggiunge in fondo lo stesso spazio, cosi' i
   pulsanti di contatto non finiscono sotto la barra. */
.sch{
  position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:120;background:var(--nero);
  display:grid;grid-template-columns:1.22fr .78fr;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.sch.on{opacity:1;pointer-events:auto}
/* Seconda difesa per la striscia sotto la barra di Safari: con la scheda
   aperta la pagina sotto si nasconde, cosi' anche dove la scheda non
   arrivasse non c'e' niente da vedere. Il ritardo uguale alla dissolvenza
   evita il lampo nero mentre la scheda compare; alla chiusura torna subito. */
main,.ftr{transition:visibility 0s}
body.sch-aperta main,body.sch-aperta .ftr{visibility:hidden;transition:visibility 0s .4s}
/* Su telefono la scheda NON e' una griglia. Con righe "auto 1fr" la galleria,
   che ha overflow:hidden e quindi un minimo automatico di zero, veniva
   schiacciata a 0 px dal testo lungo della colonna sotto: le foto c'erano,
   caricate, ma stavano sotto il pannello. Misurato il 23/09/2026 a 390 px:
   righe "0px 2468px". In flusso normale ognuna prende l'altezza sua. */
@media(max-width:940px){.sch{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}}
.sch-gal{position:relative;background:#000;overflow:hidden;display:flex;flex-direction:column}
.sch-stage{position:relative;flex:1;min-height:0;cursor:zoom-in;touch-action:pan-y pinch-zoom}
.sch-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.sch-stage img.on{opacity:1}
@media(max-width:940px){.sch-stage{height:56vw;min-height:260px;flex:none}}
.sch-arw{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:56px;background:rgba(1,7,29,.6);backdrop-filter:blur(8px);
  border:1px solid var(--bordo);display:grid;place-items:center;transition:.3s var(--ease);
}
.sch-arw:hover{background:var(--rosso);border-color:var(--rosso)}
.sch-arw svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.5}
.sch-arw.p{left:14px}.sch-arw.n{right:14px}
.sch-cnt{
  position:absolute;left:16px;top:14px;z-index:4;
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.16em;color:#fff;
  background:rgba(1,7,29,.6);backdrop-filter:blur(8px);padding:.45em .75em;border:1px solid var(--bordo);
}
.sch-th{display:flex;gap:5px;padding:9px;background:#000;overflow-x:auto;flex:none;scrollbar-width:thin}
.sch-th button{width:66px;height:44px;flex:none;opacity:.42;transition:opacity .3s;position:relative}
.sch-th button.on{opacity:1;outline:1px solid var(--rosso);outline-offset:-1px}
.sch-th img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.sch-th button{width:52px;height:36px}}

.sch-pan{
  overflow-y:auto;padding:clamp(24px,3.6vw,48px);background:var(--notte);
  border-left:1px solid var(--bordo-2);position:relative;
}
@media(max-width:940px){.sch-pan{border-left:none;border-top:1px solid var(--bordo-2);overflow:visible;
  padding-bottom:calc(clamp(24px,3.6vw,48px) + 100lvh - 100svh + env(safe-area-inset-bottom,0px))}}
.sch-x{
  position:fixed;right:calc(var(--gut) / 1.4);top:20px;z-index:130;
  width:42px;height:42px;border:1px solid var(--bordo-3);background:rgba(1,7,29,.65);backdrop-filter:blur(10px);
  display:grid;place-items:center;transition:.3s var(--ease);
}
.sch-x:hover{background:var(--rosso);border-color:var(--rosso);transform:rotate(90deg)}
.sch-x svg{width:14px;height:14px;stroke:#fff;stroke-width:1.6}
.sch-ref{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.sch-ref .r{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.18em;color:var(--rosso-h)}
.sch-ref .b{
  font-family:var(--ff-m);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.36em .62em;border:1px solid var(--bordo-3);color:var(--mist);
}
.sch-ref .b.tr{background:var(--rosso);border-color:var(--rosso);color:#fff}
.sch-t{
  font-family:var(--ff-d);font-variation-settings:"wdth" 108,"wght" 600;
  font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.1;text-transform:none;letter-spacing:-.014em;margin:0 0 12px;
}
.sch-loc{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--luce);margin-bottom:22px}
.sch-pr{
  font-family:var(--ff-d);font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;letter-spacing:-.028em;color:#fff;
  padding-bottom:22px;border-bottom:1px solid var(--bordo-2);margin-bottom:22px;
}
.sch-pr.tbd{font-size:1.05rem;font-variation-settings:"wdth" 112,"wght" 400;color:var(--mist-2);text-transform:uppercase;letter-spacing:.1em}
.sch-tb{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bordo-2);border:1px solid var(--bordo-2);margin-bottom:24px}
.sch-tb div{background:var(--notte);padding:13px 15px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
/* Etichette della tabella piu' grandi e piu' chiare: a .55rem in --mist-3 sul
   blu notte non si leggevano (Francesco, 28/09/2026). */
.sch-tb s{text-decoration:none;font-family:var(--ff-m);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist-2)}
.sch-tb b{font-weight:500;font-size:1rem}
@media(max-width:520px){.sch-tb{grid-template-columns:1fr}}
.sch-bd{font-size:.98rem;line-height:1.68;color:#dadde3}
.sch-bd p{margin-bottom:1em}
.sch-bd .intro{color:var(--mist);font-size:.98rem}
.sch-orig{
  font-family:var(--ff-m);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist-2);
  border-left:2px solid var(--bordo);padding-left:12px;margin:0 0 18px;line-height:1.6;
}
.sch-cta{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--bordo-2)}

/* zoom lightbox */
.zoom{
  position:fixed;inset:0;z-index:140;background:rgba(1,7,29,.97);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s;
}
.zoom.on{opacity:1;pointer-events:auto}
.zoom{touch-action:pan-y pinch-zoom}
.zoom img{max-width:94vw;max-height:90vh;object-fit:contain}
.zoom .sch-x{position:absolute;right:20px;top:20px}

/* ══ MEDIA DELL'IMMOBILE ═══════════════════════════════════
   Virtual tour, video e planimetrie, chiesti dall'agenzia il 2/9/2026. */
.sch-mdb{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 24px}
.sch-md{
  display:inline-flex;align-items:center;gap:.55em;padding:.62em .9em;
  background:var(--notte);border:1px solid var(--bordo-3);color:inherit;cursor:pointer;
  font-family:var(--ff-m);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.sch-md:hover,.sch-md.on{background:var(--rosso);border-color:var(--rosso);color:#fff}
.sch-md svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.4}
.sch-md.on svg,.sch-md:hover svg{stroke:#fff}

/* le planimetrie vanno lette, non ritagliate: si mostrano intere su fondo chiaro */
.sch-stage.plan{background:#f4f2ee}
.sch-stage.plan img{object-fit:contain;padding:18px}

/* i segnalini sulla scheda della griglia */
/* Sotto il riferimento, non sopra: alla stessa altezza coprivano "Rif. 1814"
   (segnalato da Francesco il 24/09/2026, su computer e su telefono). */
.card-md{position:absolute;left:12px;top:34px;z-index:2;display:flex;gap:5px}
.card-md .md{
  width:24px;height:24px;display:grid;place-items:center;
  background:rgba(1,7,29,.7);border:1px solid var(--bordo-3);backdrop-filter:blur(6px);
}
.card-md svg{width:12px;height:12px;stroke:var(--luce);fill:none;stroke-width:1.4}

/* il riquadro che ospita Matterport e YouTube */
.mediaov{
  position:fixed;inset:0;z-index:150;background:rgba(1,7,29,.97);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s;
}
.mediaov.on{opacity:1;pointer-events:auto}
.mediaov-in{width:min(94vw,1280px);aspect-ratio:16/9;max-height:86vh;background:#000}
.mediaov-in iframe{width:100%;height:100%;border:0;display:block}
.mediaov .sch-x{position:absolute;right:20px;top:20px}
@media(max-width:600px){.mediaov-in{width:96vw}}

/* ══ FAB ═══════════════════════════════════════════════════ */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;
}
.fab a{
  width:50px;height:50px;display:grid;place-items:center;border-radius:50%;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8);transition:transform .35s var(--ease);
}
.fab a:hover{transform:scale(1.08)}
.fab .wa{background:#25d366}
.fab .tl{background:var(--rosso)}
.fab svg{width:24px;height:24px;fill:#fff}
.fab .tl svg{width:20px;height:20px}
@media(max-width:600px){.fab a{width:46px;height:46px}}

/* ══ shot mode ═════════════════════════════════════════════ */
html[data-shot="1"] *{animation:none !important;transition:none !important}
html[data-shot="1"] .rv{opacity:1 !important;transform:none !important}
html[data-shot="1"] .hero{min-height:880px}
html[data-shot="1"] .hero-h .ln > i{transform:none}
html[data-shot="1"] .horizon i{transform:scaleX(1)}
html[data-shot="1"] .horizon b,html[data-shot="1"] .hero-sub,
html[data-shot="1"] .qs,html[data-shot="1"] .hero-alt,html[data-shot="1"] .hero-strip{opacity:1}
html[data-shot="1"] .band{min-height:440px}
html[data-shot="1"] .hero-bg,html[data-shot="1"] .band-bg img{transform:none !important}
html[data-shot="1"] .eyebrow::before{transform:scaleX(1)}
html[data-shot="1"] .h-l{clip-path:none}
html[data-shot="1"] .facts b,html[data-shot="1"] .studio-nums b,
html[data-shot="1"] .hero-strip b{clip-path:none;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .eyebrow::before{transform:scaleX(1)}
  .h-l{clip-path:none}
  .facts b,.studio-nums b,.hero-strip b{clip-path:none;transform:none}
  .mappa .acqua,.mappa .fondali,.mappa .lab-acqua,.mappa .nord,#pins .pin{opacity:1}
  .mappa .reticolo{opacity:.07}
  .pin .ring{display:none}
  .mappa .acqua-hatch{opacity:.22}
  .hero-bg,.band-bg img{transform:none !important}
}

/* la mappa dell'immobile: parte da un pulsante, vedi mappaBox() in app.js */
.sch-map{margin:0 0 24px}
.sch-map-h{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-2);margin:0 0 10px}
.sch-map-f{position:relative;aspect-ratio:16/10;background:#030d2a;border:1px solid var(--bordo-2);display:grid;place-items:center}
.sch-map-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sch-mapb{
  display:inline-flex;align-items:center;gap:9px;padding:.8em 1.2em;border:1px solid var(--bordo-3);
  font-family:var(--ff-m);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);
  transition:.3s var(--ease);
}
.sch-mapb:hover{background:var(--rosso);border-color:var(--rosso);color:#fff}
.sch-mapb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}
.sch-map-n{font-size:.86rem;color:var(--mist-2);margin:9px 0 0;line-height:1.5}
.sch-map-n a{color:var(--luce);text-decoration:underline;text-underline-offset:2px}