/* Glicine · template location e matrimoni (creativi). Chiaro, glicine e salvia; lo sfondo passa dal giorno alla sera. */
@font-face{font-family:'Marcellus';src:url('../_font/marcellus/marcellus-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('../_font/jost/jost-var.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
  --p:#6b5a8e;   /* glicine */
  --s:#f4f2f6;   /* bianco lilla */
  --t:#2b2432;   /* inchiostro melanzana */
  --a:#9caf8b;   /* salvia */
  --f-titoli:'Marcellus', 'Palatino Linotype', Georgia, serif;
  --f-testo:'Jost', system-ui, sans-serif;

  --muto:color-mix(in oklab, var(--t) 68%, var(--s));
  --riga:color-mix(in oklab, var(--t) 16%, var(--s));
  --velo:color-mix(in oklab, var(--p) 9%, var(--s));
  --bordo:clamp(16px, 3.4vw, 56px);
  --ease:cubic-bezier(.22,1,.36,1);
  --salvia:color-mix(in oklab, var(--a) 30%, var(--s));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--s);color:var(--t);font-family:var(--f-testo);font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titoli);font-weight:400;margin:0;line-height:1.1;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--p);outline-offset:3px}
.salta{position:absolute;left:-9999px;top:8px;background:var(--p);color:var(--s);padding:10px 16px;z-index:100}
.salta:focus{left:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--p);color:var(--s);font-weight:500;font-size:16px;letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background .4s var(--ease), transform .4s var(--ease)}
.btn:hover{background:var(--t)}
.btn:active{transform:scale(.98)}
.btn-piccolo{min-height:44px;padding:0 22px;font-size:15px}
.link-sottile{font-size:16px;text-decoration:none;border-bottom:1px solid currentColor;padding:6px 0}
.link-sottile:hover{color:var(--p)}

/* testata */
.testata{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:16px var(--bordo);transition:background .4s, box-shadow .4s}
.testata.piena{background:color-mix(in oklab, var(--s) 90%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--riga)}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;font-size:15px;letter-spacing:.02em;padding:10px 0;white-space:nowrap}
.nav a:hover{color:var(--p)}
.logo{font-family:var(--f-titoli);font-weight:400;font-size:23px;letter-spacing:.04em;line-height:1.1;text-decoration:none;text-align:center;max-width:15ch}
.nav-dx{display:flex;align-items:center;justify-content:flex-end;gap:28px}
.hamburger{display:none;width:48px;height:48px;border:1px solid var(--riga);border-radius:50%;background:none;cursor:pointer;position:relative}
.hamburger span{position:absolute;left:15px;right:15px;height:1.5px;background:currentColor;transition:transform .45s var(--ease), opacity .3s}
.hamburger span:nth-child(1){top:18px}.hamburger span:nth-child(2){top:23px}.hamburger span:nth-child(3){top:28px}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.pannello{position:fixed;inset:0;z-index:40;background:var(--velo);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:48px;text-align:center;padding:100px 24px 40px}
.pannello[hidden]{display:none}
.pannello nav{display:flex;flex-direction:column;gap:4px}
.pannello nav a{font-family:var(--f-titoli);font-size:clamp(2.4rem,10vw,3.6rem);line-height:1.15;text-decoration:none;overflow:hidden;display:block}
.pannello nav a span{display:inline-block}
.pannello-piede{color:var(--muto);line-height:1.9}

/* HERO: editoriale centrato con striscia di foto */
.hero{position:relative;overflow:hidden;min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vh,48px);padding:clamp(104px,15vh,150px) var(--bordo) 0}
.hero-testo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.occhiello{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--muto)}
.hero-titolo{font-size:clamp(2.4rem,5.3vw,5.6rem);line-height:1.06;max-width:21ch}
.hero-sotto{font-size:18px;max-width:46ch;color:var(--muto)}
.azioni{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 28px;margin-top:6px}
.striscia{display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,18px);height:clamp(220px,36vh,380px)}
.striscia figure{margin:0;flex:1;min-width:0;overflow:hidden;border-radius:4px 4px 0 0;background:var(--velo)}
.striscia img{width:100%;height:100%;object-fit:cover}
.striscia .f1{height:52%}
.striscia .f2{height:82%;flex:1.1}
.striscia .f3{height:100%;flex:1.5}
.striscia .f4{height:76%;flex:1.1}
.striscia .f5{height:58%}

/* LA VILLA */
.villa{padding:clamp(100px,12vw,180px) var(--bordo) clamp(80px,9vw,140px)}
.villa-testo{max-width:900px;margin:0 auto 64px;text-align:center}
.villa-testo h2{font-size:clamp(2.2rem,4.4vw,4.2rem)}
.villa-testo p{margin:26px auto 0;max-width:56ch;color:var(--muto);font-size:18px}
.villa-foto{margin:0;height:min(80svh,720px);overflow:hidden;border-radius:4px}
.villa-foto img{width:100%;height:100%;object-fit:cover}
.villa-numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:56px 0 0}
.villa-numeri div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.villa-numeri dd{order:-1;margin:0;font-family:var(--f-titoli);font-size:clamp(2.8rem,4.6vw,4.4rem);line-height:1;color:var(--p)}
.villa-numeri dt{font-size:15px;letter-spacing:.04em;color:var(--muto)}

/* GLI SPAZI */
.spazi{padding:clamp(80px,10vw,150px) var(--bordo);background:var(--salvia)}
.spazi h2{font-size:clamp(2.6rem,5vw,4.8rem);margin-bottom:48px}
.fisarmonica{display:flex;gap:16px;height:min(78svh,720px)}
.spazio{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:4px;cursor:pointer;transition:flex-grow .9s var(--ease);outline-offset:4px;isolation:isolate}
.spazio.aperto{flex:2.6}
.spazio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.spazio:hover img{transform:scale(1.04)}
.spazio::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top, color-mix(in oklab, var(--t) 82%, transparent) 0%, color-mix(in oklab, var(--t) 30%, transparent) 42%, transparent 70%)}
.spazio-testo{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,36px);color:var(--s)}
.spazio h3{font-size:clamp(1.6rem,2.2vw,2.3rem);color:var(--s)}
.spazio p{margin-top:10px;max-width:36ch;font-size:16px;opacity:0;transform:translateY(10px);transition:opacity .5s .15s, transform .6s .15s var(--ease)}
.spazio.aperto p{opacity:1;transform:none}
.capienza{display:inline-block;margin-top:14px;font-size:14px;letter-spacing:.04em;border:1px solid color-mix(in oklab, var(--s) 60%, transparent);border-radius:999px;padding:5px 14px}

/* IL GIORNO */
.giorno{background:var(--t);color:var(--s);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px clamp(40px,7vw,120px);padding:clamp(100px,12vw,170px) var(--bordo);align-items:start}
.giorno-fisso{position:sticky;top:110px}
.giorno-fisso h2{font-size:clamp(2.3rem,4vw,3.9rem)}
.giorno .orario li{border-color:color-mix(in oklab, var(--s) 18%, var(--t))}
.giorno p{color:color-mix(in oklab, var(--s) 72%, var(--t))}
.giorno-fisso > p{margin-top:18px;max-width:40ch}
.giorno-foto{margin:36px 0 0;aspect-ratio:16/10;overflow:hidden;border-radius:4px}
.giorno-foto img{width:100%;height:100%;object-fit:cover}
.orario{list-style:none;margin:0;padding:0}
.orario li{display:grid;grid-template-columns:clamp(110px,11vw,170px) 1fr;gap:24px;padding:40px 0;border-top:1px solid var(--riga)}
.orario li:last-child{border-bottom:1px solid var(--riga)}
.orario time{font-family:var(--f-titoli);font-size:clamp(2.1rem,3.2vw,3.2rem);line-height:1;color:var(--a)}
.orario h3{font-size:clamp(1.45rem,1.9vw,1.8rem);margin-bottom:8px}
.orario p{max-width:44ch}

/* PACCHETTI */
.pacchetti{padding:clamp(40px,5vw,80px) var(--bordo) clamp(90px,11vw,160px);background:var(--t);color:var(--s)}
.pacchetti h2{font-size:clamp(2.4rem,4.6vw,4.4rem);margin-bottom:52px;color:var(--s)}
.pacchetti-griglia{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:auto auto;gap:18px}
.pacchetto{border:1px solid color-mix(in oklab, var(--s) 20%, var(--t));border-radius:6px;padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:14px}
.pacchetto h3{font-size:clamp(1.7rem,2.2vw,2.2rem);color:var(--s)}
.pacchetto p{color:color-mix(in oklab, var(--s) 74%, var(--t))}
.pacchetto .prezzo{font-family:var(--f-titoli);font-size:clamp(2.2rem,3vw,3rem);line-height:1;color:var(--s)}
.prezzo span{font-family:var(--f-testo);font-size:15px;color:color-mix(in oklab, var(--s) 65%, var(--t))}
.pacchetto.grande{grid-row:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden;background:color-mix(in oklab, var(--s) 6%, var(--t))}
.pacchetto.grande figure{margin:0;min-height:100%}
.pacchetto.grande figure img{width:100%;height:100%;object-fit:cover}
.pacchetto-testo{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:16px}
.pacchetto ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.pacchetto li{padding-left:26px;position:relative;color:color-mix(in oklab, var(--s) 84%, var(--t))}
.pacchetto li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:1px;background:var(--a)}
.pacchetti-nota{margin-top:28px;font-size:15px;color:color-mix(in oklab, var(--s) 65%, var(--t))}

/* RECENSIONI */
.recensioni{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:40px clamp(40px,7vw,120px);align-items:center;padding:clamp(100px,12vw,170px) var(--bordo)}
.rec-foto{margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.rec-foto img{width:100%;height:100%;object-fit:cover}
.rec-testo h2{font-size:clamp(2.3rem,4vw,3.9rem)}
.stelle{margin-top:14px;color:var(--muto);font-size:15px}
.stelle span{color:var(--p);letter-spacing:3px;margin-right:6px}
.rec-testo blockquote{margin:40px 0 0;padding-top:32px;border-top:1px solid var(--riga)}
.rec-testo blockquote p{font-family:var(--f-titoli);font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.3}
.rec-testo footer{margin-top:16px;font-weight:500}
.rec-testo footer span{color:var(--muto);font-weight:400;margin-left:8px}

/* VISITE */
.visite{padding:0 var(--bordo) clamp(90px,10vw,150px)}
.visite h2{font-size:clamp(2.1rem,3.4vw,3.2rem);margin-bottom:36px}
.visite-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.appuntamenti{list-style:none;margin:0;padding:0;display:grid;gap:18px;align-content:start}
.appuntamenti li{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:start;padding:26px;background:var(--velo);border-radius:6px}
.appuntamenti time{font-size:15px;letter-spacing:.04em;color:var(--muto);text-align:center;line-height:1.2}
.appuntamenti time b{display:block;font-family:var(--f-titoli);font-weight:400;font-size:3rem;line-height:1;color:var(--p)}
.appuntamenti h3{font-size:1.6rem}
.appuntamenti p{color:var(--muto);margin-top:6px}
.giro{position:relative;display:block;min-height:320px;border-radius:6px;overflow:hidden;text-decoration:none;isolation:isolate}
.giro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.giro:hover img{transform:scale(1.05)}
.giro::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top, color-mix(in oklab, var(--t) 80%, transparent), transparent 65%)}
.giro-testo{position:absolute;left:28px;right:28px;bottom:26px;color:var(--s);display:flex;flex-direction:column}
.giro-testo strong{font-family:var(--f-titoli);font-weight:400;font-size:1.9rem;line-height:1.15}

/* CONTATTI */
.contatti{padding:clamp(90px,11vw,160px) var(--bordo);background:var(--velo)}
.contatti > h2{font-size:clamp(2.8rem,6vw,6rem);letter-spacing:-.01em;margin-bottom:48px}
.date-modulo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,100px);margin-bottom:64px}
.calendario-titolo{font-weight:500;margin-bottom:12px}
.mese{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--riga)}
.mese span{font-family:var(--f-titoli);font-size:1.5rem}
.mese div{display:flex;flex-wrap:wrap;gap:10px}
.mese button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid color-mix(in oklab, var(--p) 45%, var(--s));background:var(--s);cursor:pointer;font-size:15px;transition:background .3s, color .3s}
.mese button:hover{border-color:var(--p)}
.mese button[aria-pressed="true"]{background:var(--p);color:var(--s);border-color:var(--p)}
.calendario-nota{margin-top:14px;padding-top:14px;border-top:1px solid var(--riga);color:var(--muto);font-size:15px}
.modulo{display:grid;gap:22px;background:var(--s);border-radius:6px;padding:clamp(24px,3vw,44px);align-content:start}
.campo{display:flex;flex-direction:column;gap:8px}
.campo-doppio{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.campo label{font-size:14px;font-weight:500;letter-spacing:.02em}
.campo input,.campo select{font:inherit;font-size:17px;color:var(--t);background:var(--s);border:1px solid color-mix(in oklab, var(--t) 30%, var(--s));border-radius:4px;padding:10px 14px;min-height:50px}
.campo input:focus,.campo select:focus{outline:2px solid var(--p);outline-offset:0;border-color:var(--p)}
.modulo .btn{justify-self:start}
.recapiti{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:0;padding-top:32px;border-top:1px solid var(--riga)}
.recapiti dt{font-size:14px;letter-spacing:.04em;color:var(--muto);margin-bottom:6px}
.recapiti dd{margin:0;font-weight:500}
.recapiti a{text-decoration:none}

/* PIEDE */
.piede{background:var(--velo);padding:64px var(--bordo) 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.piede-logo{font-family:var(--f-titoli);font-size:clamp(2.4rem,5.4vw,5rem);letter-spacing:.02em;line-height:1;max-width:100%;overflow-wrap:anywhere}
.piede-righe{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:15px;color:var(--muto)}
.piede-righe a{text-decoration:none}
.piede-righe a:hover{color:var(--p)}

.whatsapp{position:fixed;right:20px;bottom:20px;z-index:45;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 18px;border-radius:999px;background:var(--p);color:var(--s);text-decoration:none;font-weight:500;box-shadow:0 14px 30px color-mix(in oklab, var(--p) 35%, transparent);transition:transform .5s var(--ease)}
.whatsapp:hover{transform:translateY(-3px)}
.whatsapp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

.js .hero-testo > *{opacity:0}
.js .striscia img{transform:translateY(101%)}
.in-anteprima .hero-testo > *{opacity:1}
.in-anteprima .striscia img{transform:none}

/* fondale che cambia colore (solo con JS) */
.fondale{position:fixed;inset:0;z-index:-1;background:var(--s);pointer-events:none}
.fondo-vivo .hero,.fondo-vivo .villa,.fondo-vivo .spazi,.fondo-vivo .recensioni,.fondo-vivo .visite,.fondo-vivo .contatti,.fondo-vivo .piede{background:transparent}
/* le sezioni di sera restano sempre col loro fondo scuro: il contrasto non dipende dallo scorrimento */
.avanzamento{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.avanzamento i{display:block;height:100%;background:var(--p);transform-origin:0 50%;transform:scaleX(0)}

/* APERTURA: le lucine del giardino si accendono una per una, poi il buio sale e scopre il sito */
.ap-lucine{--m:0%;background:var(--t);-webkit-mask-image:linear-gradient(to top, transparent calc(var(--m) - 25%), #000 var(--m));mask-image:linear-gradient(to top, transparent calc(var(--m) - 25%), #000 var(--m))}
.ap-filo{position:absolute;left:0;top:26%;width:100%;height:18vh;overflow:visible}
.ap-filo path{fill:none;stroke:color-mix(in oklab, var(--s) 30%, var(--t));stroke-width:1.5}
.ap-lampadine{position:absolute;inset:0}
.ap-lampadine b{position:absolute;width:14px;height:14px;margin:-2px 0 0 -7px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:color-mix(in oklab, var(--s) 25%, var(--t));transition:none}
.ap-lampadine b.accesa{background:var(--s);box-shadow:0 0 12px 4px color-mix(in oklab, var(--s) 70%, transparent), 0 0 40px 12px color-mix(in oklab, var(--p) 45%, transparent)}
.ap-nome{position:absolute;left:0;right:0;top:56%;margin:0;padding:0 16px;text-align:center;font-family:var(--f-titoli);font-size:clamp(1.8rem,6vw,4.4rem);letter-spacing:.03em;color:var(--s);opacity:0}

@media (max-width:1100px){
  .nav{display:none}
  .hamburger{display:block}
  .testata{grid-template-columns:auto 1fr;}
  .logo{text-align:left;grid-column:1;grid-row:1}
  .nav-dx{grid-column:2}
}
@media (max-width:1024px){
  .pacchetti-griglia{grid-template-columns:1fr}
  .pacchetto.grande{grid-row:auto}
  .giorno{grid-template-columns:1fr}
  .giorno-fisso{position:static}
  .recapiti{grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  body{font-size:16px}
  .testata .btn-piccolo{display:none}
  .logo{font-size:23px}
  .hero{padding-top:104px}
  .hero-titolo{font-size:clamp(2.2rem,9.4vw,3.2rem)}
  .hero-sotto{font-size:17px}
  .striscia{height:34svh}
  .striscia .f1,.striscia .f5{display:none}
  .villa-testo{text-align:left}
  .villa-foto{height:56svh}
  .villa-numeri{grid-template-columns:1fr 1fr;row-gap:36px}
  .fisarmonica{flex-direction:column;height:auto;gap:14px}
  .spazio,.spazio.aperto{flex:none;height:min(110vw,480px)}
  .spazio p{opacity:1;transform:none}
  .orario li{grid-template-columns:1fr;gap:10px;padding:30px 0}
  .pacchetto.grande{grid-template-columns:1fr}
  .pacchetto.grande figure{aspect-ratio:4/3}
  .recensioni{grid-template-columns:1fr}
  .rec-foto{max-width:420px}
  .date-modulo{grid-template-columns:1fr}
  .mese{grid-template-columns:1fr;gap:8px}
  .campo-doppio{grid-template-columns:1fr}
  .recapiti{grid-template-columns:1fr}
  .appuntamenti li{grid-template-columns:1fr;gap:10px;padding:22px}
  .appuntamenti time{text-align:left}
  .whatsapp span{display:none}
  .whatsapp{width:56px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .hero-testo > *{opacity:1}
  .js .striscia img{transform:none}
  *{transition-duration:.01ms !important}
}