@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url(font/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-display:swap;src:url(font/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-display:swap;src:url(font/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:700;font-display:swap;src:url(font/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Serif';font-weight:400;font-display:swap;src:url(font/noto-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Serif';font-weight:600;font-display:swap;src:url(font/noto-serif-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Serif';font-weight:700;font-display:swap;src:url(font/noto-serif-latin-700-normal.woff2) format('woff2')}

:root{
  --blu:#0F2444; --oro:#C9A24A; --blu-chiaro:#183462; --ottone:#A9822F; --ottone-chiaro:#E9DCC0; --granito:#ECEEF1; --grigio:#5B6575; --linea:#D9DDE3; --bianco:#fff;
  --serif:'Noto Serif',Georgia,serif; --sans:'Montserrat',system-ui,sans-serif;
  --largo:1200px; --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
/* ciò che lo script nasconde (filtri dell'elenco, schedina della mappa) resta nascosto anche se ha un suo "display" */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bianco);color:var(--blu);font:400 16.5px/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ottone);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.3rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
h3{font-size:1.2rem}
p{margin:0}
.largo{max-width:var(--largo);margin-inline:auto;padding-inline:var(--gutter)}
.salta{position:absolute;left:-999px;top:8px;background:var(--blu);color:#fff;padding:8px 12px;z-index:10}
.salta:focus{left:8px}
.piccolo{font-size:.82rem;color:var(--grigio)}
.nascosto{position:absolute;left:-9999px}
.ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* testata */
.testata{background:var(--blu);color:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid rgba(255,255,255,.08)}
.testata-in{display:flex;align-items:center;gap:32px;height:78px}
.marchio{display:block;color:#fff;flex:none}
.logo{height:64px;width:auto;display:block}
.menu{display:flex;gap:26px;margin-left:auto;font-weight:500;font-size:.95rem}
.menu a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{border-color:rgba(255,255,255,.35)}
.menu a[aria-current]{border-color:var(--oro)}
.menu a.menu-vendi{color:var(--oro)}
.menu a.menu-vendi:hover{border-color:var(--oro)}
.lingue{display:flex;gap:10px;font-size:.82rem;font-weight:600;color:#9fb0c8}
.lingue a{text-decoration:none}
.lingue a:hover{color:#fff}
.lingue [aria-current]{color:#fff;border-bottom:2px solid var(--oro)}
.social{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;flex:none}
.social:hover{background:rgba(255,255,255,.1)}
.social .ico{width:17px;height:17px}

/* apertura */
.apertura{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;padding-top:clamp(36px,6vw,72px);padding-bottom:clamp(28px,4vw,44px)}
.apertura p{color:var(--grigio);font-size:1.05rem;max-width:46ch}
.apertura.stretta{grid-template-columns:1fr;gap:10px}
.apertura.messaggio{padding-bottom:120px}
.apertura.messaggio p{margin-top:8px}
.apertura.messaggio .bottone{margin-top:20px}

/* in evidenza */
.evidenza{position:relative;margin-top:clamp(40px,6vw,72px);margin-bottom:clamp(40px,6vw,72px)}
.evidenza-foto img{width:100%;height:auto;aspect-ratio:16/8.5;object-fit:cover;border-radius:3px}
.evidenza-testo{position:absolute;left:calc(var(--gutter) + 28px);bottom:28px;background:var(--bianco);padding:26px 30px 28px;max-width:440px;border-top:3px solid var(--ottone)}
.sopra{font-size:.85rem;color:var(--grigio);font-weight:500;margin-bottom:8px}
.evidenza h2 a{text-decoration:none}
.evidenza-dati{color:var(--grigio);font-size:.92rem;margin-top:10px}
.evidenza-prezzo{font-family:var(--serif);font-size:1.45rem;margin:14px 0 18px}
.evidenza-prezzo small,.card-prezzo small,.scheda-prezzo small{font-family:var(--sans);font-size:.62em;color:var(--grigio)}
s{color:var(--grigio);font-size:.8em}

/* bottoni e moduli */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid var(--blu);background:transparent;color:var(--blu);padding:12px 20px;font:600 .92rem var(--sans);text-decoration:none;cursor:pointer;border-radius:2px}
.bottone:hover{background:var(--granito)}
.bottone.pieno{background:var(--blu);color:#fff}
.bottone.pieno:hover{background:#1c3560}
.bottone.oro{background:var(--oro);border-color:var(--oro);color:var(--blu)}
.bottone.oro:hover{background:#d8b45e}

/* apertura della home: l'isola */
/* Il cielo dell'apertura segue l'ora vera dell'Elba (lo script in testa scrive data-cielo sulla pagina):
   i colori cambiano lentissimi, in quaranta secondi. Senza script resta il blu di sempre. */
@property --cielo-alto{syntax:'<color>';inherits:true;initial-value:#0F2444}
@property --cielo-basso{syntax:'<color>';inherits:true;initial-value:#0F2444}
@property --bagliore{syntax:'<color>';inherits:true;initial-value:#14305a}
.eroe{--cielo-alto:#0F2444;--cielo-basso:#0F2444;--bagliore:#14305a;transition:--cielo-alto 40s linear,--cielo-basso 40s linear,--bagliore 40s linear;background:radial-gradient(760px 460px at 74% 48%,var(--bagliore) 0%,rgba(20,48,90,0) 72%),linear-gradient(180deg,var(--cielo-alto),var(--cielo-basso));color:#fff;padding:clamp(40px,6vw,76px) 0 clamp(36px,5vw,64px);overflow:hidden}
.eroe.con-foto{background:linear-gradient(90deg,rgba(15,36,68,.94) 0%,rgba(15,36,68,.78) 45%,rgba(15,36,68,.55) 100%),var(--foto) center/cover}
.eroe-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center}
:root[data-cielo=notte] .eroe{--cielo-alto:#091629;--cielo-basso:#0D1F3D;--bagliore:#173158}
:root[data-cielo=alba] .eroe{--cielo-alto:#12274B;--cielo-basso:#3E385E;--bagliore:#4B4570}
:root[data-cielo=giorno] .eroe{--cielo-alto:#0F2444;--cielo-basso:#143260;--bagliore:#1D477C}
:root[data-cielo=oro] .eroe{--cielo-alto:#0F2444;--cielo-basso:#2B3253;--bagliore:#4A4752}
:root[data-cielo=tramonto] .eroe{--cielo-alto:#13234A;--cielo-basso:#52304A;--bagliore:#6A4547}
.eroe-testo>.oggi{margin:0 0 18px;max-width:none;font-size:.76rem;font-weight:600;letter-spacing:.07em;line-height:1.7;text-transform:uppercase;color:var(--oro);opacity:0;transition:opacity .8s ease}
.eroe-testo>.oggi.pronta{opacity:.95}
.oggi span{color:rgba(255,255,255,.4);margin:0 .2em}
.oggi b{font-weight:600;white-space:nowrap}
.eroe h1{font-size:clamp(2.2rem,1.3rem + 2.8vw,3.7rem);color:#fff}
.eroe-testo>p{color:rgba(255,255,255,.78);font-size:1.06rem;margin-top:18px;max-width:44ch}
.ricerca{margin-top:28px;background:#fff;padding:10px;border-radius:3px;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.ricerca label{display:flex;flex-direction:column;gap:4px;font-size:.75rem;font-weight:600;color:var(--grigio);padding:2px 4px 0}
.ricerca select{border-color:transparent;background-color:var(--granito);padding:10px 34px 10px 10px}
.ricerca .bottone{height:44px}
.eroe-conti{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem}
.eroe-conti a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.eroe-conti a:hover{color:#fff;border-color:var(--oro)}
.eroe-vendi{margin:26px 0 0;font-size:.92rem;color:rgba(255,255,255,.72)}
.eroe-vendi a{color:var(--oro);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(201,162,74,.5)}
.eroe-vendi a:hover{text-decoration-color:var(--oro)}
.eroe-vendi a span{display:inline-block;color:var(--oro);transition:transform .25s ease}
.eroe-vendi a:hover span{transform:translateX(4px)}
.eroe-conti b{color:var(--oro);font-weight:700;margin-left:2px}
.eroe-mappa{margin:0;position:relative}
.eroe-mappa figcaption{font-size:.85rem;color:rgba(255,255,255,.6);text-align:right;margin-top:6px}
.elba{width:100%;height:auto;display:block;overflow:visible}
.elba .costa path{fill:none;stroke:var(--oro);stroke-width:3.2;stroke-linejoin:round}
.elba .terra path{fill:#244a7d;stroke:none}
.elba .confini path{fill:none;stroke:rgba(255,255,255,.13);stroke-width:.8;stroke-dasharray:3 3}
.elba .rif circle{fill:rgba(255,255,255,.45)}
.elba .rif-t{fill:rgba(255,255,255,.5);font:500 11.5px var(--sans)}
.elba .punto{cursor:pointer;outline:none}
.elba .punto .alone{fill:rgba(201,162,74,.22);transition:r .2s ease}
.elba .punto .centro{fill:var(--oro);stroke:var(--blu);stroke-width:2}
.elba .punto-t{fill:#fff;font:600 13px var(--sans);paint-order:stroke;stroke:var(--blu);stroke-width:4px;stroke-linejoin:round}
.elba .filo{stroke:rgba(255,255,255,.55);stroke-width:1}
.elba .t-s{display:none}
.elba .punto-t.t-s{font-size:18px}
.elba .rif-t.t-s{font-size:14px}
.elba .punto:hover .alone,.elba .punto:focus-visible .alone{r:22;fill:rgba(201,162,74,.38)}
.elba .punto:focus-visible .centro{stroke:#fff}
/* di notte le località si accendono come piccole luci di paese */
:root[data-cielo=notte] .elba .punto .centro{fill:#F2C766;filter:drop-shadow(0 0 3px rgba(255,210,120,.95)) drop-shadow(0 0 9px rgba(255,186,84,.55))}
:root[data-cielo=notte] .elba .punto .alone{fill:rgba(255,200,110,.2)}
:root[data-cielo=notte] .elba .rif circle{fill:rgba(255,218,150,.85);filter:drop-shadow(0 0 3px rgba(255,200,120,.8))}
@media (prefers-reduced-motion:no-preference){
  :root[data-cielo=notte] .elba .punto .alone{animation:luce 4.5s ease-in-out infinite alternate}
  :root[data-cielo=notte]:not(.mappa-vista) .elba .punto .alone{animation:punto .6s cubic-bezier(.3,1.45,.5,1) var(--r,1.4s) forwards,luce 4.5s ease-in-out calc(var(--r,1.4s) + .6s) infinite alternate}
}
@keyframes luce{from{opacity:.45}to{opacity:1}}

/* La mappa prende vita (una volta per visita): la costa si disegna in oro, l'isola si colora,
   le località compaiono da ovest a est. Chi ha chiesto meno movimento la vede subito ferma. */
@media (prefers-reduced-motion:no-preference){
  :root:not(.mappa-vista) .elba .costa path{stroke-dasharray:1;stroke-dashoffset:1;animation:costa 2.1s cubic-bezier(.45,.05,.25,1) .15s forwards}
  :root:not(.mappa-vista) .elba .terra{opacity:0;animation:compari 1.1s ease .9s forwards}
  :root:not(.mappa-vista) .elba .confini,:root:not(.mappa-vista) .elba .rif{opacity:0;animation:compari .8s ease 1.5s forwards}
  :root:not(.mappa-vista) .elba .punto circle{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:punto .6s cubic-bezier(.3,1.45,.5,1) var(--r,1.4s) forwards}
  :root:not(.mappa-vista) .elba .punto text,:root:not(.mappa-vista) .elba .punto line{opacity:0;animation:compari .5s ease calc(var(--r,1.4s) + .2s) forwards}
}
@keyframes costa{to{stroke-dashoffset:0}}
@keyframes compari{to{opacity:1}}
@keyframes punto{to{transform:scale(1)}}

/* schedina che si apre passando sopra una località (solo con il mouse) */
.mappa-scheda{position:absolute;left:0;top:0;z-index:3;width:240px;background:var(--bianco);color:var(--blu);border-radius:3px;overflow:hidden;box-shadow:0 18px 44px rgba(6,16,34,.42);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.mappa-scheda.su{opacity:1;transform:none}
.mappa-scheda img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--granito)}
.mappa-scheda .ms-testo{padding:12px 15px 14px}
.mappa-scheda p{margin:0}
.mappa-scheda .ms-nome{font:600 1.02rem/1.25 var(--serif)}
.mappa-scheda .ms-dati{font-size:.78rem;color:var(--grigio);margin-top:5px;line-height:1.45}
.mappa-scheda .ms-prezzo{font:600 1rem var(--serif);margin-top:6px}

/* Passaggio fluido tra le pagine: dissolvenza breve; la foto cliccata nell'elenco si allarga fino a
   diventare la foto principale della scheda (e torna al suo posto con "indietro"). */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.28s}
::view-transition-group(foto){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.8,.24,1);overflow:clip;border-radius:3px}
::view-transition-old(foto),::view-transition-new(foto){height:100%;object-fit:cover}
::view-transition-old(foto){animation:none}
::view-transition-new(foto){animation:vt-entra .35s ease .12s both;mix-blend-mode:normal}
/* se la foto non ha dove arrivare (per esempio tornando a un elenco dove non si vede), sparisce piano */
::view-transition-old(foto):only-child{animation:vt-esce .25s ease both}
@keyframes vt-entra{from{opacity:0}}
@keyframes vt-esce{to{opacity:0}}
@media (min-width:721px){.testata{view-transition-name:testata}}
/* durante il passaggio la foto arriva volando: niente anteprima già ferma al suo posto */
:active-view-transition .galleria .g-0{background-image:none!important}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* fascia blu delle pagine interne */
.fascia{background:var(--blu);color:#fff;padding:clamp(34px,5vw,56px) 0 clamp(28px,4vw,40px);margin-bottom:clamp(28px,4vw,44px)}
.fascia p{color:rgba(255,255,255,.72);margin-top:8px}

.condividi{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.88rem;font-weight:500;color:var(--grigio)}
.condividi:hover{color:var(--blu)}
.piede-social a{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:#fff}
.piede-fonte{margin-top:28px}
/* l'hotel della stessa proprietà: una riga nel piede, un riquadro negli affitti estivi, una riga nelle schede */
.piede-struttura{margin-top:32px}
.piede-struttura p{margin:0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);color:#b9c3d2}
.piede-struttura a{color:var(--oro);font-weight:600}
.piede-struttura span{color:#8f9bb0}
.struttura{padding-bottom:clamp(48px,7vw,88px)}
.struttura-carta{display:grid;grid-template-columns:1fr;border:1px solid var(--linea);border-left:3px solid var(--oro);border-radius:3px;overflow:hidden;background:var(--bianco)}
.struttura-carta.con-foto{grid-template-columns:1.1fr 1fr}
.struttura-foto{display:grid;gap:4px;height:clamp(400px,36vw,480px)}
.con-foto .struttura-testo{align-self:center}
.struttura-foto.n2{grid-template-rows:1fr 1fr}
.struttura-foto img:first-child{object-position:center 30%}
.struttura-foto img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.struttura-testo{padding:clamp(26px,4vw,48px);max-width:720px}
.struttura-testo .sopra{color:var(--ottone);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem}
.struttura-testo h2{margin:4px 0 10px}
.struttura-domanda{font:600 1.08rem var(--serif);margin:0 0 8px}
.struttura-testo p{color:var(--grigio);margin:0 0 22px}
.struttura-testo .struttura-domanda{color:var(--blu)}
.struttura-testo .bottone span{transition:transform .25s ease;display:inline-block}
.struttura-testo .bottone:hover span{transform:translateX(4px)}
.soggiorno{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linea);font-size:.86rem;line-height:1.55;color:var(--grigio)}
.soggiorno a{color:var(--blu);font-weight:600;text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:3px}
.piede-fonte .piccolo{color:#7e8ba0;font-size:.75rem}

/* filtri */
.filtri{display:flex;flex-direction:column;gap:18px;padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--linea)}
.segmenti{display:flex;flex-wrap:wrap;gap:8px}
.segmenti button{font:500 .92rem var(--sans);color:var(--blu);background:var(--bianco);border:1px solid var(--linea);padding:9px 16px;border-radius:999px;cursor:pointer}
.segmenti button[aria-pressed="true"]{background:var(--blu);border-color:var(--blu);color:#fff}
.campi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.campi label,.modulo label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--grigio)}
select,input,textarea{font:400 1rem var(--sans);color:var(--blu);background:var(--bianco);border:1px solid var(--linea);border-radius:2px;padding:11px 12px;width:100%}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grigio) 50%),linear-gradient(135deg,var(--grigio) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
select:focus,input:focus,textarea:focus{border-color:var(--blu);outline:none;box-shadow:0 0 0 3px rgba(15,36,68,.12)}
.conteggio{font-size:.9rem;color:var(--grigio)}

/* griglia schede */
.elenco{padding-bottom:clamp(48px,7vw,96px)}
.griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
.scheda-card{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.card-foto{position:relative;overflow:hidden;border-radius:3px;background:var(--granito)}
.card-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.scheda-card:hover .card-foto img{transform:scale(1.03)}
.senza-foto{aspect-ratio:4/3}
.scheda-card[data-venduto="1"] .card-foto img{filter:grayscale(.7);opacity:.85}
.bollino{position:absolute;left:12px;top:12px;background:var(--blu);color:#fff;font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:2px}
.bollino.grande{font-size:.95rem;padding:8px 14px;left:16px;top:16px}
.card-luogo{font-size:.85rem;color:var(--grigio);font-weight:500;display:flex;justify-content:space-between;gap:10px}
.card-luogo span{color:var(--ottone)}
.scheda-card h3{font-size:1.28rem}
.scheda-card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card-dati{font-size:.88rem;color:var(--grigio);display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.card-dati i{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--linea);margin:0 9px}
.card-prezzo{font-family:var(--serif);font-size:1.18rem;font-weight:600}
.vuoto{padding:40px 0;color:var(--grigio);max-width:60ch}

/* agenzia */
/* "Vendi con noi": fascia blu con il profilo dell'isola appena accennato, e pagina per i proprietari */
.vendi-fascia,.vendi-testa{position:relative;overflow:hidden;background:var(--blu);color:#fff}
.vendi-fascia{padding:clamp(48px,6vw,80px) 0}
.vendi-testa{padding:clamp(52px,7vw,100px) 0 clamp(44px,6vw,76px)}
.vendi-isola{position:absolute;right:-4%;top:50%;width:min(760px,68%);height:auto;transform:translateY(-50%);pointer-events:none}
.vendi-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 56px}
.vendi-in>div{max-width:640px}
.vendi-fascia h2,.vendi-testa h1{color:#fff}
.vendi-fascia h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem)}
.vendi-in p{color:rgba(255,255,255,.8);margin:14px 0 0;max-width:56ch}
.vendi-in .sopra-oro{margin:0 0 12px;color:var(--oro);font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.vendi-corpo{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,84px);padding-top:clamp(44px,6vw,76px);padding-bottom:clamp(52px,7vw,92px)}
.vendi-corpo h2{margin-bottom:30px}
.passi{list-style:none;padding:0;margin:0;counter-reset:passo;display:flex;flex-direction:column;gap:28px}
.passi li{counter-increment:passo;display:grid;grid-template-columns:54px 1fr;column-gap:14px}
.passi li::before{content:counter(passo);grid-row:1/3;font:600 2.3rem/1 var(--serif);color:var(--oro)}
.passi h3{margin:2px 0 6px}
.passi p{margin:0;color:var(--grigio)}
.vendi-voce{margin-top:36px;padding-top:24px;border-top:1px solid var(--linea);color:var(--grigio)}
.vendi-voce a{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:600 1.15rem var(--serif);color:var(--blu);text-decoration:none}
.vendi-modulo{align-self:start;background:var(--granito);padding:clamp(22px,3vw,34px);border-radius:3px}
.campi-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:14px}
.agenzia{background:var(--granito);padding:clamp(48px,7vw,88px) 0}
.agenzia-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px)}
.agenzia-intro{margin:14px 0 26px;color:var(--grigio);max-width:46ch}
.agenzia h3{margin-bottom:18px}
.recapiti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.recapiti li{display:flex;gap:12px;align-items:flex-start}
.recapiti .ico{color:var(--ottone);margin-top:3px}
.modulo{display:flex;flex-direction:column;gap:14px}
.modulo .bottone{align-self:flex-start}

/* pagina scheda */
.pagina-scheda{padding-top:28px}
.galleria{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:min(62vh,560px);position:relative}
.galleria button{padding:0;border:0;background:var(--granito);cursor:zoom-in;overflow:hidden;border-radius:3px}
.galleria img{width:100%;height:100%;object-fit:cover}
.galleria .g-0{grid-row:1/3;background-size:cover;background-position:center}
.galleria.n1{grid-template-columns:1fr}
.galleria.n2 .g-1{grid-row:1/3}
.galleria .tutte{position:absolute;right:16px;bottom:16px;background:var(--bianco);color:var(--blu);font:600 .88rem var(--sans);padding:9px 14px;cursor:pointer}
.scheda-colonne{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,5vw,72px);padding:36px 0 72px}
.scheda-principale>*+*{margin-top:22px}
.scheda-principale section h2{font-size:1.4rem;margin:34px 0 12px}
.scheda-principale section p{max-width:68ch}
.scheda-principale section p+p{margin-top:12px}
.scheda-prezzo{font-family:var(--serif);font-size:1.7rem;font-weight:600}
.scheda-prezzo .nota{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--ottone);margin-left:6px}
.scheda-dati{list-style:none;padding:16px 0;margin:0;display:flex;flex-wrap:wrap;gap:10px 28px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-weight:500}
.elenco-car{list-style:none;padding:0;margin:0;columns:2;column-gap:32px}
.elenco-car li{display:flex;gap:10px;align-items:flex-start;break-inside:avoid;padding:5px 0}
.elenco-car .ico{color:var(--ottone);margin-top:3px}
.scheda-meta{display:flex;gap:40px;margin:34px 0 0;padding-top:18px;border-top:1px solid var(--linea)}
.scheda-meta dt{font-size:.8rem;color:var(--grigio);font-weight:600}
.scheda-meta dd{margin:4px 0 0;display:flex;align-items:center;gap:8px}
.ape{display:inline-block;background:var(--ape);color:#fff;font-weight:700;padding:2px 10px;border-radius:2px;min-width:34px;text-align:center}
.ape-ipe{font-size:.85rem;color:var(--grigio)}
.scheda-contatti{position:sticky;top:104px;align-self:start;border:1px solid var(--linea);padding:26px}
.scheda-contatti h2{font-size:1.15rem;margin:24px 0 14px}
.bottoni{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.altri{padding-bottom:80px}
.barra-mobile{display:none}
.altri>h2{margin-bottom:26px}

/* visore foto */
.visore{border:0;padding:0;background:rgba(8,16,30,.96);width:100vw;height:100vh;max-width:none;max-height:none;margin:0}
.visore::backdrop{background:rgba(8,16,30,.96)}
.visore[open]{display:flex;align-items:center;justify-content:center}
.visore img{max-width:92vw;max-height:84vh;object-fit:contain}
.visore button{position:absolute;background:transparent;border:0;color:#fff;cursor:pointer;font:500 1rem var(--sans)}
.v-chiudi{top:18px;right:22px;padding:8px}
.v-prec,.v-succ{top:50%;transform:translateY(-50%);font-size:3rem!important;padding:10px 20px}
.v-prec{left:8px}.v-succ{right:8px}
.v-conta{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#c9d0da;font-size:.9rem}

/* piede */
.piede{background:var(--blu);color:#d7dde7;padding:48px 0;font-size:.92rem}
.piede-in{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:32px;align-items:start}
.piede a{text-decoration:none}
.piede a:hover{text-decoration:underline}
.piede strong{color:#fff;font-weight:600}
.logo-piede{height:74px;width:auto;color:#fff}
.piede .piccolo{color:#9aa6b8;margin-top:10px}

@media (max-width:980px){
  .struttura-carta.con-foto{grid-template-columns:1fr}
  .struttura-foto{order:-1;height:240px}
  .struttura-foto.n2{grid-template-rows:1fr}
  .struttura-foto.n2 img+img{display:none}
  .vendi-corpo{grid-template-columns:1fr}
  .vendi-isola{width:110%;right:-30%;opacity:.7}
  .menu{gap:18px;font-size:.9rem}
  .eroe-in{grid-template-columns:1fr}
  .eroe-mappa figcaption{text-align:left}
  .griglia{grid-template-columns:repeat(2,1fr)}
  .campi{grid-template-columns:1fr 1fr}
  .scheda-colonne{grid-template-columns:1fr}
  .scheda-contatti{position:static}
  .piede-in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .campi-due{grid-template-columns:1fr}
  .testata{position:static}
  .testata-in{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:0;gap:10px 16px}
  .logo{height:46px}
  .lingue{margin-left:0}
  .social{margin-left:auto;width:30px;height:30px}
  .ricerca{grid-template-columns:1fr}
  .elba .t-l{display:none}
  .elba .t-s{display:inline}
  .menu{order:3;width:100%;margin:0;overflow-x:auto;gap:20px;padding:6px 0 10px;white-space:nowrap}
  .apertura{grid-template-columns:1fr;gap:12px}
  .evidenza-foto img{aspect-ratio:4/3}
  .evidenza-testo{position:static;max-width:none;padding:20px 0 0;border-top:0}
  .griglia{grid-template-columns:1fr;gap:36px}
  .campi{grid-template-columns:1fr 1fr;gap:10px}
  .agenzia-in{grid-template-columns:1fr}
  .galleria{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .galleria .g-0{grid-row:auto}
  .galleria .g-0 img{aspect-ratio:4/3}
  .galleria .g-1,.galleria .g-2{display:none}
  .elenco-car{columns:1}
  .barra-mobile{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bianco);border-top:1px solid var(--linea);z-index:6}
  .barra-mobile .bottone{background:var(--bianco)}
  .barra-mobile .bottone.pieno{background:var(--blu)}
  .pagina-scheda~.piede,body:has(.barra-mobile) .piede{padding-bottom:96px}
  .piede-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}