/* =========================================================
   GNOMI FIORE — Carta, Giardino, Luce
   ========================================================= */
:root{
  --paper:#FAF4E9;
  --paper-2:#F2E8D8;
  --paper-3:#EFE4D2;
  --white:#FFFDF8;

  --ink:#2C3A33;
  --ink-2:#5E6E64;
  --ink-3:#8C9890;

  --forest:#2E4A3C;
  --forest-2:#3F6350;
  --teal:#2E6C7E;
  --blush:#DE9AA6;
  --blush-2:#F7E1E3;
  --sage:#A9C8C3;
  --gold:#B08339;
  --gold-2:#E3C489;

  --line:rgba(44,58,51,.14);
  --line-2:rgba(44,58,51,.28);

  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --arch:999px 999px 18px 18px / 240px 240px 18px 18px;
  --pad: clamp(20px, 5vw, 86px);

  --serif:'Fraunces', 'Times New Roman', serif;
  --sans:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:'Petit Formal Script', 'Segoe Script', cursive;

  --sh-1:0 2px 6px rgba(52,64,52,.04), 0 16px 40px -22px rgba(52,64,52,.28);
  --sh-2:0 6px 18px rgba(52,64,52,.07), 0 42px 80px -40px rgba(52,64,52,.42);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  overflow-x:clip; scroll-padding-top:96px; background:var(--paper);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important} }

body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--sans); font-weight:300;
  font-size:clamp(15px,1.05vw,17px); line-height:1.76; letter-spacing:.004em;
  overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
[hidden]{display:none!important}
::selection{background:var(--blush-2); color:var(--forest)}

/* grana di carta */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* =========================================================
   TIPOGRAFIA
   ========================================================= */
.display{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 120;
  font-size:clamp(2.3rem, 5.6vw, 4.6rem); line-height:1.02;
  letter-spacing:-.028em; margin:.14em 0 .44em; color:var(--forest);
  text-wrap:balance;
}
.display em{font-style:italic; font-weight:300; color:var(--blush)}
.display--sm{font-size:clamp(1.9rem,3.4vw,2.9rem); margin:.05em 0 .22em}
.display--inv{color:#FFFDF6; text-shadow:0 6px 34px rgba(24,36,28,.5)}
.display--inv em{color:var(--gold-2)}

.script{
  font-family:var(--script); font-size:clamp(1.15rem,2.2vw,1.65rem);
  color:var(--blush); margin:0 0 .3em; letter-spacing:.01em;
}
.band .script{color:var(--gold-2); text-shadow:0 4px 22px rgba(24,36,28,.6)}

.eyebrow{
  font-family:var(--sans); font-size:.66rem; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.15em; display:flex; align-items:center; gap:.9em;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--line-2)}
.eyebrow--c{justify-content:center}
.eyebrow--c::after{content:''; width:26px; height:1px; background:var(--line-2)}

.lede{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.18rem,2vw,1.6rem); line-height:1.6; color:var(--ink-2);
  text-wrap:pretty;
}
.lede em{font-style:italic; color:var(--teal)}

/* =========================================================
   BOTTONI
   ========================================================= */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1em 2.1em; border-radius:999px; border:1px solid var(--forest); cursor:pointer;
  background:var(--forest); color:#F7F2E6;
  font-family:var(--sans); font-size:.76rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 12px 30px -16px rgba(46,74,60,.9);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, background .35s, color .35s;
  overflow:hidden;
}
.btn::after{
  content:''; position:absolute; inset:0; translate:-130% 0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transition:translate .8s cubic-bezier(.3,.7,.3,1);
}
.btn:hover{transform:translateY(-3px); box-shadow:0 20px 40px -18px rgba(46,74,60,.95)}
.btn:hover::after{translate:130% 0}
.btn--ghost{background:transparent; color:var(--forest); border-color:var(--line-2); box-shadow:none}
.btn--ghost:hover{background:rgba(46,74,60,.06); border-color:var(--forest); box-shadow:none}
.band .btn--ghost{color:#FFF8E8; border-color:rgba(255,255,255,.5)}
.btn--sm{padding:.76em 1.5em; font-size:.68rem}
.btn--wide{width:100%}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:clamp(12px,2.4vw,36px);
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--pad) 12px;
  transition:background .5s, box-shadow .5s, backdrop-filter .5s;
}
.nav.is-stuck{
  background:rgba(250,244,233,.9); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 var(--line);
}
.nav__logo img{height:clamp(42px,5vw,58px); width:auto; transition:transform .4s}
.nav__logo:hover img{transform:scale(1.04)}
.nav__links{display:flex; gap:clamp(12px,1.8vw,26px); margin-left:auto}
.nav__links a{
  position:relative; font-size:.72rem; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); padding-bottom:4px; white-space:nowrap;
  transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--teal); transition:right .4s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover{color:var(--teal)}
.nav__links a:hover::after{right:0}
.nav__burger{
  display:none; margin-left:auto; width:46px; height:46px; border:0; background:none;
  cursor:pointer; flex-direction:column; justify-content:center; gap:7px; align-items:center;
}
.nav__burger span{display:block; width:24px; height:1.5px; background:var(--forest); transition:.35s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:99; display:flex; flex-direction:column;
  justify-content:center; padding:0 var(--pad);
  background:rgba(250,244,233,.98); backdrop-filter:blur(20px);
  animation:fade .35s ease both;
}
.drawer a{
  font-family:var(--serif); font-weight:300; font-size:clamp(1.55rem,6.6vw,2.3rem);
  padding:.24em 0; border-bottom:1px solid var(--line); color:var(--forest);
}
.drawer a:last-child{border:0}
@keyframes fade{from{opacity:0} to{opacity:1}}
@media (max-width:1140px){ .nav__links, .nav > .btn{display:none} .nav__burger{display:flex} }
@media (min-width:1141px){ .drawer{display:none!important} }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  overflow:hidden; isolation:isolate; background:var(--paper-2);
}
.hero__world{
  position:absolute; inset:-3%; z-index:0; will-change:transform;
  transform:scale(1.08);
  animation:worldIn 2.4s cubic-bezier(.2,.8,.2,1) both;
}
.hero__world picture, .hero__world img{width:100%; height:100%; object-fit:cover; object-position:50% 45%}
@keyframes worldIn{from{opacity:0; filter:blur(10px) saturate(.6)} to{opacity:1; filter:none}}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(46% 52% at 50% 52%, rgba(255,250,240,.9) 0%, rgba(255,248,236,.72) 46%, rgba(255,246,232,0) 100%),
    linear-gradient(to bottom, rgba(250,244,233,.5) 0%, transparent 20%, transparent 70%, var(--paper) 100%);
}
@media (max-width:760px){
  .hero__veil{
    background:
      radial-gradient(90% 46% at 50% 50%, rgba(255,250,240,.9) 0%, rgba(255,248,236,.66) 55%, rgba(255,246,232,.1) 100%),
      linear-gradient(to bottom, rgba(250,244,233,.55) 0%, transparent 18%, transparent 72%, var(--paper) 100%);
  }
}
.hero__inner{
  position:relative; z-index:2; text-align:center;
  padding:calc(100px + env(safe-area-inset-top,0px)) var(--pad) 108px;
  max-width:900px; margin:0 auto;
}
.hero__logo{
  width:clamp(190px,25vw,320px); margin:0 auto .1em;
  filter:drop-shadow(0 16px 40px rgba(46,108,126,.22));
  animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.hero .eyebrow{animation:rise 1.1s .14s cubic-bezier(.2,.8,.2,1) both}
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 144;
  font-size:clamp(2.5rem,7.4vw,5.9rem); line-height:.98; letter-spacing:-.035em;
  margin:.06em 0 .42em; color:var(--forest);
  animation:rise 1.2s .24s cubic-bezier(.2,.8,.2,1) both;
}
.hero__title em{font-style:italic; color:var(--blush); display:inline-block}
.hero__sub{
  max-width:33em; margin:0 auto 2.3em; color:var(--ink-2);
  font-size:clamp(1rem,1.35vw,1.12rem);
  animation:rise 1.2s .34s cubic-bezier(.2,.8,.2,1) both;
}
.hero__cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; animation:rise 1.2s .44s cubic-bezier(.2,.8,.2,1) both}
.hero__scroll{
  position:absolute; bottom:calc(22px + env(safe-area-inset-bottom,0px)); left:50%; translate:-50% 0;
  z-index:2; font-size:.58rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hero__scroll span{display:block; width:1px; height:50px; background:linear-gradient(var(--teal),transparent); animation:drop 2.4s ease-in-out infinite}
@keyframes rise{from{opacity:0; transform:translateY(32px)} to{opacity:1; transform:none}}
@keyframes drop{0%,100%{transform:scaleY(.35); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top}}

@media (max-width:680px){
  .hero__inner{padding-top:calc(86px + env(safe-area-inset-top,0px)); padding-bottom:96px}
  .hero__logo{width:clamp(160px,46vw,220px)}
  .hero__title{font-size:clamp(2.2rem,10vw,3.2rem)}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%}
}

/* =========================================================
   SEZIONI
   ========================================================= */
.section{padding:clamp(76px,10vw,158px) var(--pad); position:relative}
.sec-head{max-width:820px; margin:0 auto clamp(44px,6vw,76px); text-align:center}
.sec-sub{color:var(--ink-2); max-width:56ch; margin:0 auto}
.reveal{opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}

.section--fam{background:var(--paper)}
.section--sole{background:linear-gradient(180deg,var(--paper) 0%, #FBF1E0 45%, var(--paper) 100%); overflow:hidden}
.section--silenzio{background:linear-gradient(180deg,var(--paper) 0%, #EEF3EC 48%, var(--paper) 100%)}
.section--arcobaleno{background:var(--paper-2)}
.atelier{background:linear-gradient(180deg,var(--paper) 0%, #F0E9DC 100%)}
.nascita{background:var(--white)}
.galleria{background:var(--paper)}
.prezzi{background:var(--paper-2)}
.faq{background:var(--white)}
.dono{background:var(--paper)}

/* fotografia d'appoggio a lato sezione */
.sec-aside{
  position:absolute; top:6%; right:-6%; width:min(320px,26vw); aspect-ratio:3/4;
  object-fit:cover; border-radius:var(--arch); opacity:.5; pointer-events:none;
  transform:rotate(3deg); filter:saturate(.8);
  mask-image:linear-gradient(200deg,#000 30%,transparent 88%);
  -webkit-mask-image:linear-gradient(200deg,#000 30%,transparent 88%);
}
@media (max-width:1100px){ .sec-aside{display:none} }

/* disegni botanici nei margini */
.botanic{
  position:absolute; width:clamp(90px,10vw,160px); height:auto;
  color:var(--forest); opacity:.2; pointer-events:none;
}
.botanic--l{left:1.5vw; top:16%}
.botanic--r{right:1.5vw; top:26%; transform:scaleX(-1)}
@media (max-width:900px){ .botanic{display:none} }

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{
  padding:clamp(86px,11vw,180px) var(--pad); text-align:center;
  max-width:1060px; margin:0 auto; position:relative;
}
.manifesto .lede{max-width:44ch; margin:1.7em auto 0}
.facts{
  list-style:none; margin:clamp(54px,8vw,92px) 0 0; padding:clamp(32px,4vw,50px) 0 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,28px);
  border-top:1px solid var(--line);
}
.facts li{display:flex; flex-direction:column; gap:.25em}
.facts b{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.3rem,5vw,3.9rem);
  line-height:1; color:var(--teal);
}
.facts span{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); line-height:1.6}
@media (max-width:640px){ .facts{grid-template-columns:repeat(2,1fr); gap:30px 14px} }

/* =========================================================
   BANDE FOTOGRAFICHE A TUTTA PAGINA
   ========================================================= */
.band{
  position:relative; display:grid; place-items:center; overflow:hidden;
  min-height:clamp(340px,54vw,600px); padding:clamp(48px,8vw,110px) var(--pad);
  isolation:isolate;
}
.band--tall{min-height:clamp(420px,66vw,760px)}
.band img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.band::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,38,30,.46) 0%, rgba(26,38,30,.22) 42%, rgba(26,38,30,.6) 100%);
}
.band picture{position:absolute; inset:0; z-index:-2}
.band img.band__img--fungo{object-position:50% 30%}
.band__txt{text-align:center; max-width:900px; position:relative}
.band__txt--l{text-align:center}
.band__txt .display{margin-bottom:0}

/* =========================================================
   VILLAGGIO
   ========================================================= */
.villaggio{
  padding:clamp(76px,10vw,150px) 0 clamp(60px,8vw,120px);
  background:linear-gradient(180deg,var(--paper) 0%, #EDF2EA 40%, var(--paper) 100%);
  position:relative;
}
.villaggio .sec-head{padding:0 var(--pad)}
.vill{
  position:relative; width:min(1500px, 94vw); margin:0 auto;
  aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:#DCE9EC; box-shadow:var(--sh-2);
  border:1px solid rgba(255,255,255,.7); touch-action:pan-y;
}
.vill canvas{position:absolute; inset:0; width:100%; height:100%; cursor:grab}
.vill canvas:active{cursor:grabbing}
.vill__paint{position:absolute; inset:0; z-index:1; overflow:hidden; transition:opacity .8s ease}
.vill__paint picture, .vill__paint img{width:100%; height:100%; object-fit:cover}
.vill__paint img{transform:scale(1.2); will-change:transform}
.vill.is-3d .vill__paint{opacity:0; pointer-events:none}
.vill .vis-toggle{bottom:auto; top:16px; left:auto; right:16px; translate:none; z-index:3}
.vill .vill__hint{opacity:0; transition:opacity .5s}
.vill.is-3d .vill__hint{opacity:1}
.vill__hint{
  position:absolute; bottom:16px; left:50%; translate:-50% 0; margin:0; z-index:2;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--forest);
  background:rgba(255,253,248,.82); padding:8px 16px; border-radius:999px;
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.8);
}
.vill__notes{
  list-style:none; margin:clamp(34px,4.5vw,58px) auto 0; padding:0 var(--pad);
  max-width:1280px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,44px);
}
.vill__notes i{font-style:normal; color:var(--blush); font-size:1.1rem; display:block; margin-bottom:.5em}
.vill__notes h3{font-family:var(--serif); font-weight:400; font-size:1.4rem; margin:0 0 .4em; color:var(--forest)}
.vill__notes p{font-size:.92rem; color:var(--ink-2); margin:0}
@media (max-width:820px){
  .vill{aspect-ratio:4/3.4; width:100%; border-radius:0; border-left:0; border-right:0}
  .vill__notes{grid-template-columns:1fr; gap:26px}
}

/* =========================================================
   ABITANTI — due file di ritratti che scorrono
   ========================================================= */
.abitanti{
  padding:clamp(70px,9vw,140px) 0 clamp(60px,8vw,110px); overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%, #F7EBDD 50%, var(--paper) 100%);
}
.abitanti .sec-head{padding:0 var(--pad)}
.ab__filters{justify-content:center; margin:0 var(--pad) clamp(26px,3vw,40px)}
.ab__rows{display:flex; flex-direction:column; gap:clamp(14px,1.8vw,24px); padding:12px 0}
.ab__row{display:flex; overflow:hidden; padding:12px 0}
.ab__track{display:flex; width:max-content; animation:scorri 90s linear infinite}
.ab__row--r .ab__track{animation-direction:reverse}
.ab__rows:hover .ab__track, .ab__rows:focus-within .ab__track{animation-play-state:paused}
.ab__track ul{list-style:none; margin:0; padding:0 clamp(14px,1.8vw,24px) 0 0; display:flex; gap:clamp(14px,1.8vw,24px)}
.ab__track li{flex:0 0 auto}
.ab__card{
  display:flex; flex-direction:column; width:clamp(170px,17vw,240px); padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.9); border-radius:var(--r-md); overflow:hidden;
  background:var(--white); box-shadow:var(--sh-1); text-align:left; font-family:var(--sans); color:var(--ink);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
}
.ab__track ul li:nth-child(3n+2) .ab__card{border-radius:var(--arch)}
.ab__card:hover, .ab__card:focus-visible{transform:translateY(-10px) rotate(-1deg); box-shadow:var(--sh-2)}
.ab__card img{width:100%; aspect-ratio:4/4.3; object-fit:cover; object-position:50% 30%}
.ab__info{display:flex; flex-direction:column; gap:2px; padding:12px 16px 16px}
.ab__info small{
  display:flex; align-items:center; gap:7px;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.ab__info small::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:inset 0 -2px 3px rgba(0,0,0,.2)}
.ab__info b{font-family:var(--serif); font-weight:400; font-size:1.3rem; line-height:1.15; color:var(--forest)}
.ab__info em{font-family:var(--serif); font-style:italic; font-size:.98rem; color:var(--blush); line-height:1.3}
@keyframes scorri{to{transform:translateX(-50%)}}

/* =========================================================
   ENTRARE — sezioni ferme che si attraversano scorrendo
   ========================================================= */
.dive{--p:0; position:relative; height:280vh; background:#1f2a22}
.dive__sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate}
.dive__poster, .dive__end, .dive__vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* senza video: zoom verso la porta, poi dissolvenza sull'interno */
.dive__poster{
  transform-origin:var(--focus, 50% 55%);
  transform:scale(calc(1 + var(--p) * 1.6));
  will-change:transform;
}
.dive__end{opacity:clamp(0, calc((var(--p) - .62) * 3.2), 1)}
.dive__vid{opacity:0; transition:opacity .6s ease}
.has-video .dive__vid{opacity:1}
.has-video .dive__poster, .has-video .dive__end{visibility:hidden}
.dive__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(20,30,24,calc(.42 - var(--p) * .4)) 0%, transparent 75%),
    linear-gradient(180deg, rgba(20,30,24,.35) 0%, transparent 30%, transparent 70%, rgba(20,30,24,.45) 100%);
}
.dive__veil--light{
  background:
    radial-gradient(60% 60% at 50% 48%, rgba(250,244,233,calc(.9 - var(--p) * 3)) 0%, rgba(250,244,233,calc(.55 - var(--p) * 2)) 60%, transparent 100%),
    linear-gradient(180deg, rgba(20,30,24,.2) 0%, transparent 30%, transparent 72%, rgba(20,30,24,.35) 100%);
}
.dive__txt{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--pad); pointer-events:none;
}
.dive__txt--in{
  opacity:clamp(0, calc(1 - var(--p) * 3.4), 1);
  transform:translateY(calc(var(--p) * -120px)) scale(calc(1 - var(--p) * .2));
}
.dive__txt--in .sec-sub{max-width:52ch}
.dive__txt--out{
  opacity:clamp(0, calc((var(--p) - .8) * 6), 1);
  transform:translateY(calc((1 - var(--p)) * 60px));
  justify-content:flex-end; padding-bottom:14vh;
}
.dive__hint{
  margin-top:2.4em; font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:#FFF6E4;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.dive__hint::after{content:''; width:1px; height:44px; background:linear-gradient(currentColor,transparent); animation:drop 2.4s ease-in-out infinite}
.dive__txt--paper .dive__hint{color:var(--forest)}
.dive--fungo{--focus:47% 62%}
.dive--vill{--focus:46% 60%}
.dive--static{height:auto}
.dive--static .dive__sticky{position:relative; height:clamp(420px,70vw,760px)}
.dive--static .dive__txt--out, .dive--static .dive__end, .dive--static .dive__hint{display:none}
@media (max-width:760px){
  .dive{height:230vh}
  .dive__txt--in .sec-sub{font-size:.92rem}
}
.villaggio > .dive{margin-bottom:clamp(40px,6vw,80px)}
.ab__note{
  max-width:62ch; margin:clamp(30px,4vw,48px) auto 0; padding:0 var(--pad); text-align:center;
  font-size:.8rem; line-height:1.7; color:var(--ink-3); font-style:italic;
}
@media (prefers-reduced-motion:reduce){
  .ab__row{overflow-x:auto} .ab__track{animation:none}
}

/* =========================================================
   I GUARDIANI — il bosco al crepuscolo
   ========================================================= */
.guardiani{--dusk:#2B2442; --dusk-2:#3A3159; --glow:#FFD98A; background:var(--dusk)}
.band--guard{min-height:clamp(380px,56vw,640px)}
.band--guard img{object-position:50% 60%}
.band--guard::after{background:linear-gradient(180deg, rgba(30,24,50,.5) 0%, rgba(30,24,50,.15) 45%, var(--dusk) 100%)}
.g__body{background:linear-gradient(180deg,var(--dusk) 0%, var(--dusk-2) 55%, var(--dusk) 100%); color:#EDE6F7}
.g__body .display{color:#FFF6E8}
.g__body .display em{color:var(--glow)}
.g__body .sec-sub{color:#CFC6E3}
.g__body .eyebrow{color:var(--glow)}
.g__body .eyebrow::before, .g__body .eyebrow::after{background:rgba(255,217,138,.4)}
.g__rules{
  list-style:none; margin:0 auto clamp(40px,5vw,64px); padding:0; max-width:1100px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px);
}
.g__rules li{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px); text-align:center;
}
.g__rules i{font-style:normal; font-size:2rem; display:block; margin-bottom:.3em}
.g__rules h3{font-family:var(--serif); font-weight:400; font-size:1.4rem; margin:0 0 .35em; color:#FFF6E8}
.g__rules p{margin:0; font-size:.92rem; color:#CFC6E3}
@media (max-width:760px){ .g__rules{grid-template-columns:1fr} }

.quiz{
  max-width:980px; margin:0 auto clamp(46px,6vw,80px); border-radius:var(--r-lg); overflow:hidden;
  background:var(--white); color:var(--ink); box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.quiz__head{text-align:center; padding:clamp(24px,3vw,36px) clamp(20px,3vw,40px) 0}
.quiz__head .eyebrow{justify-content:center}
.quiz__head h3{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.6vw,2.6rem); margin:0; color:var(--forest); letter-spacing:-.02em}
.quiz__head > p:last-child{color:var(--ink-2); margin:.4em auto 0; max-width:48ch}
.quiz__stage{padding:clamp(20px,3vw,36px)}
.quiz__card{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(18px,3vw,36px); align-items:center; animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.quiz__card img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--arch)}
.quiz__n{font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin:0}
.quiz__q h4{font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4vw,3rem); margin:.1em 0 0; color:var(--forest); line-height:1.05}
.quiz__q > p:nth-of-type(2){font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--blush); margin:.2em 0 1em}
.quiz__btns{display:flex; gap:10px; flex-wrap:wrap}
.quiz__b{
  flex:1 1 180px; padding:1em 1.2em; border-radius:999px; cursor:pointer; font-family:var(--sans); font-size:.95rem;
  border:2px solid var(--line-2); background:var(--paper); color:var(--ink); transition:.3s;
}
.quiz__b:hover:not(:disabled){transform:translateY(-3px); border-color:var(--forest)}
.quiz__b:disabled{cursor:default; opacity:.55}
.quiz__b.is-right{opacity:1; background:#E3F2E4; border-color:#4E9A5B}
.quiz__b.is-wrong{opacity:1; background:#FBE4E4; border-color:#C65A5A}
.quiz__fb{margin:1.2em 0 0; padding:16px 18px; border-radius:var(--r-md); font-size:.95rem; animation:rise .5s both}
.quiz__fb.is-right{background:#EEF7EE}
.quiz__fb.is-wrong{background:#FCF0EE}
.quiz__fb b{font-family:var(--serif); font-size:1.15rem}
.quiz__fb .btn{display:flex; width:max-content; margin-top:12px}
.quiz__end{text-align:center; padding:clamp(20px,4vw,50px) 0; animation:rise .6s both}
.quiz__end h4{font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 .3em; color:var(--forest)}
.quiz__end p{color:var(--ink-2); max-width:44ch; margin:0 auto 1.6em}
@media (max-width:640px){ .quiz__card{grid-template-columns:1fr} .quiz__card img{max-width:260px; margin:0 auto} }

.g__strip{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 4px 20px;
  max-width:1400px; margin:0 auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent;
}
.g__card{flex:0 0 clamp(170px,17vw,220px); margin:0; scroll-snap-align:start; border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)}
.g__card img{width:100%; aspect-ratio:4/4.4; object-fit:cover; object-position:50% 30%}
.g__card figcaption{display:flex; flex-direction:column; gap:2px; padding:12px 14px 16px}
.g__card b{font-family:var(--serif); font-weight:400; font-size:1.2rem; color:#FFF6E8}
.g__card em{font-size:.78rem; color:#B9AED3}
.g__card span{font-size:.76rem; color:var(--glow); margin-top:4px; line-height:1.45}
.g__body .ab__note{color:#B9AED3}

/* =========================================================
   OCCASIONI — San Valentino e bomboniere
   ========================================================= */
.occ--love{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(560px,52vw,760px); display:flex; align-items:center;
  padding:clamp(60px,8vw,120px) var(--pad);
}
.occ__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; z-index:-2}
.occ--love::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(70,18,34,.72) 0%, rgba(70,18,34,.45) 40%, rgba(70,18,34,0) 70%);
}
.occ__card{
  max-width:560px; padding:clamp(26px,3.4vw,46px); border-radius:var(--r-lg);
  background:rgba(255,250,246,.92); backdrop-filter:blur(10px); box-shadow:var(--sh-2);
}
.occ__card .eyebrow{color:#B0485F}
.occ__card .display em{color:#C8475F}
.occ__quote{font-family:var(--serif); font-style:italic; font-size:1.15rem; color:#8E3A4E; border-left:2px solid #E7A2B0; padding-left:1em; margin:0 0 1em}
.occ__card > p{color:var(--ink-2)}
.occ__list{list-style:none; margin:0 0 1.6em; padding:0; display:flex; flex-direction:column; gap:.55em}
.occ__list li{padding-left:1.5em; position:relative; font-size:.9rem; color:var(--ink-2)}
.occ__list li::before{content:'♥'; position:absolute; left:0; color:#D25A72}
.occ__cta{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:760px){
  .occ--love{align-items:flex-end; padding-top:44vh}
  .occ--love::after{background:linear-gradient(180deg, rgba(70,18,34,0) 20%, rgba(70,18,34,.6) 60%)}
  .occ__bg{object-position:65% 30%}
  .occ__cta .btn{width:100%}
}

.occ--bomb{background:linear-gradient(180deg,var(--paper) 0%, #F6EEF4 50%, var(--paper) 100%)}
.occ__split{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px); align-items:center}
.occ__vis img{width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--sh-2)}
.occ__txt > p{color:var(--ink-2)}
.occ__txt b{color:var(--teal); font-weight:400}
.occ__steps{margin:1.4em 0; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:.8em}
.occ__steps li{counter-increment:s; position:relative; padding-left:2.6em; font-size:.92rem; color:var(--ink-2)}
.occ__steps li::before{
  content:counter(s); position:absolute; left:0; top:-.1em; width:1.8em; height:1.8em; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); color:#fff;
  background:conic-gradient(#FF4D6D,#FF8A3D,#FFD23F,#4FC98E,#4FD1E8,#4A6BFF,#A46BFF,#FF7FB0,#FF4D6D);
}
.occ__steps b{color:var(--forest)!important}
.occ__small{font-family:var(--serif); font-style:italic; color:var(--teal)!important; font-size:1.08rem}
.occ--bomb .dono__tags{margin-top:clamp(30px,4vw,50px)}
@media (max-width:900px){ .occ__split{grid-template-columns:1fr} }

/* =========================================================
   PAGINE — intestazioni, voce attiva, assaggi in home
   ========================================================= */
.nav__links a[aria-current="page"]{color:var(--teal)}
.nav__links a[aria-current="page"]::after{right:0}
.drawer a[aria-current="page"]{color:var(--teal)}
.drawer a.drawer__sub{font-size:clamp(1.1rem,4.6vw,1.5rem); padding-left:1.1em; color:var(--ink-2)}
.drawer{overflow-y:auto; justify-content:flex-start; padding-top:calc(90px + env(safe-area-inset-top,0px)); padding-bottom:40px}

.pagehead{
  text-align:center; padding:calc(140px + env(safe-area-inset-top,0px)) var(--pad) clamp(30px,4vw,56px);
  background:linear-gradient(180deg,#F3ECDD 0%, var(--paper) 100%);
}
.pagehead .sec-sub{margin-bottom:1.6em}
.pagehead__chips{justify-content:center}
.pagehead__chips .chip{text-decoration:none}
.section.is-first{padding-top:calc(130px + env(safe-area-inset-top,0px))}
.guardiani > .band--guard{min-height:clamp(460px,62vw,700px)}
.cta-atl{background:var(--paper)}
.cta-atl .btn{margin-top:1.4em}

.assaggi{background:linear-gradient(180deg,var(--paper) 0%, #F2EADB 100%)}
.assaggi__grid{max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px)}
.assaggio{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/4.6;
  box-shadow:var(--sh-1); isolation:isolate; transition:transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s;
}
.assaggio:nth-child(2){border-radius:var(--arch)}
.assaggio img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.assaggio::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 35%, rgba(24,34,28,.82) 100%)}
.assaggio:hover{transform:translateY(-8px); box-shadow:var(--sh-2)}
.assaggio:hover img{transform:scale(1.06)}
.assaggio__t{position:absolute; inset:auto 0 0 0; padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:4px; color:#FFF8E8}
.assaggio__t small{font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2)}
.assaggio__t b{font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.1}
.assaggio__t em{font-family:var(--serif); font-size:1rem; opacity:.9}
@media (max-width:900px){ .assaggi__grid{grid-template-columns:1fr} .assaggio{aspect-ratio:16/11} .assaggio:nth-child(2){border-radius:var(--r-lg)} }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  border:0; padding:0; background:transparent; max-width:100vw; max-height:100svh;
  width:100vw; height:100svh; display:none; place-items:center;
}
.lightbox[open]{display:grid; animation:fade .35s ease both}
.lightbox::backdrop{background:rgba(22,34,28,.86); backdrop-filter:blur(8px)}
.lightbox__card{
  margin:0; width:min(92vw,980px); max-height:88svh; overflow:auto;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--white); border-radius:var(--r-lg); box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.lightbox__card img{width:100%; height:100%; min-height:100%; object-fit:cover; object-position:50% 30%}
.lightbox__card figcaption{padding:clamp(24px,3.4vw,48px); display:flex; flex-direction:column; justify-content:center}
.lightbox__fam{font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 .6em}
.lightbox__card h3{font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4vw,2.9rem); line-height:1.05; margin:0; color:var(--forest); letter-spacing:-.02em}
.lightbox__m{font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--blush); margin:.2em 0 1em}
.lightbox__t{color:var(--ink-2); font-size:.95rem; margin:0 0 1.6em}
.lightbox__card .btn{align-self:flex-start}
@media (max-width:700px){
  .lightbox__card{grid-template-columns:1fr}
  .lightbox__card img{aspect-ratio:1/1; height:auto; min-height:0}
}
.lightbox__x, .lightbox__nav{
  position:fixed; border:0; cursor:pointer; color:#FFF6E4; background:rgba(255,255,255,.12);
  width:52px; height:52px; border-radius:50%; font-size:1.8rem; line-height:1; font-family:var(--sans); font-weight:200;
  transition:background .3s;
}
.lightbox__x:hover, .lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__x{top:calc(16px + env(safe-area-inset-top,0px)); right:16px}
.lightbox__nav{top:50%; translate:0 -50%}
.lightbox__nav--p{left:16px}
.lightbox__nav--n{right:16px}
@media (max-width:600px){ .lightbox__nav{top:auto; bottom:calc(20px + env(safe-area-inset-bottom,0px)); translate:none} }

/* =========================================================
   CARD BASE
   ========================================================= */
.fam, .decan-card, .sil, .arc__panel, .atl__panel, .tier, .dono__card{
  background:var(--white);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-1);
}

/* =========================================================
   TRE FAMIGLIE
   ========================================================= */
.fam-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,28px); max-width:1320px; margin:0 auto}
.fam{
  position:relative; border-radius:var(--arch); padding:clamp(28px,3vw,44px);
  display:flex; flex-direction:column; justify-content:flex-start;
  overflow:hidden; color:var(--ink);
  transition:transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s;
}
.fam:hover{transform:translateY(-10px); box-shadow:var(--sh-2)}
.fam__orb{
  position:absolute; width:150%; aspect-ratio:1; border-radius:50%; top:-64%; left:-25%;
  filter:blur(18px); opacity:.42; transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .7s;
}
.fam:hover .fam__orb{transform:scale(1.14) translateY(4%); opacity:.55}
.fam__img{
  position:relative; display:block; max-width:none; width:calc(100% + 2 * clamp(28px,3vw,44px));
  margin:calc(-1 * clamp(28px,3vw,44px)) calc(-1 * clamp(28px,3vw,44px)) 22px;
  aspect-ratio:4/3.3; object-fit:cover; object-position:50% 32%;
  mask-image:linear-gradient(#000 62%, transparent);
  -webkit-mask-image:linear-gradient(#000 62%, transparent);
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.fam:hover .fam__img{transform:scale(1.04)}
.fam__n{font-family:var(--serif); font-weight:300; font-size:.95rem; letter-spacing:.5em; color:var(--gold); position:relative; display:block}
.fam h3{
  font-family:var(--serif); font-weight:400; font-variation-settings:'SOFT' 45,'WONK' 1;
  font-size:clamp(1.8rem,2.8vw,2.5rem); line-height:1.04; margin:.28em 0 .32em;
  position:relative; color:var(--forest); letter-spacing:-.022em;
}
.fam p{position:relative; color:var(--ink-2); font-size:.94rem; margin:0 0 1.5em}
.fam__claim{font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--teal); margin-bottom:.7em!important}
.fam__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; border-top:1px solid var(--line); padding-top:18px}
.fam__price{font-family:var(--serif); font-size:1.65rem; color:var(--forest)}
.fam__price small{font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); display:block; font-family:var(--sans)}
@media (max-width:900px){ .fam-grid{grid-template-columns:1fr} .fam{min-height:0; border-radius:var(--r-lg)} }

/* =========================================================
   SOLE
   ========================================================= */
.birth{max-width:540px; margin:0 auto clamp(46px,6vw,74px); text-align:center; position:relative}
.birth label{display:block; font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.1em}
.birth__row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.birth input{
  font-family:var(--sans); font-size:.95rem; padding:.86em 1.2em; border-radius:999px;
  border:1px solid var(--line-2); background:var(--white); color:var(--ink); min-width:200px;
}
.birth input:focus{border-color:var(--teal); outline:none}

.zodiac{max-width:1280px; margin:0 auto; position:relative}
.zodiac__wheel{display:flex; gap:8px; overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x proximity; scrollbar-width:thin}
.zodiac__wheel::-webkit-scrollbar{height:4px}
.zodiac__wheel::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:9px}
.sign{
  flex:1 0 auto; scroll-snap-align:center; min-width:100px;
  border:1px solid var(--line); background:var(--white); border-radius:var(--r-md);
  padding:15px 10px; cursor:pointer; text-align:center; font-family:var(--sans); color:var(--ink-2);
  transition:.4s cubic-bezier(.2,.8,.2,1);
}
.sign i{display:block; font-style:normal; font-size:1.65rem; color:var(--ink-3); line-height:1.15; transition:.4s}
.sign b{display:block; font-weight:400; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; margin-top:5px}
.sign:hover{border-color:var(--teal); color:var(--ink); transform:translateY(-4px)}
.sign:hover i{color:var(--teal)}
.sign.is-on{background:var(--forest); border-color:var(--forest); color:#F7F2E6; box-shadow:0 14px 30px -16px rgba(46,74,60,.9)}
.sign.is-on i{color:var(--gold-2)}

.zodiac__decans{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,20px); margin-top:clamp(22px,3vw,34px)}
@media (max-width:760px){ .zodiac__decans{grid-template-columns:1fr} }
.decan{
  text-align:left; border:1px solid var(--line); background:var(--white); border-radius:var(--r-md);
  padding:22px 24px; cursor:pointer; font-family:var(--sans); color:var(--ink);
  transition:.5s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden;
}
.decan > *{display:block}
.decan:hover{transform:translateY(-5px); box-shadow:var(--sh-1); border-color:transparent}
.decan.is-on{border-color:var(--teal); box-shadow:var(--sh-1)}
.decan__dot{width:30px; height:30px; border-radius:50%; margin-bottom:14px; box-shadow:inset 0 -5px 10px rgba(0,0,0,.18)}
.decan__face{
  width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 30%;
  margin-bottom:12px; border:2px solid; box-shadow:0 8px 18px -8px rgba(52,64,52,.5);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.decan:hover .decan__face{transform:scale(1.08) rotate(-3deg)}
.decan__d{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}
.decan__f{font-family:var(--serif); font-weight:400; font-size:1.65rem; line-height:1.12; margin:.16em 0 .06em; color:var(--forest)}
.decan__m{font-family:var(--serif); font-style:italic; color:var(--blush); font-size:1.05rem}

.decan-card{
  max-width:1280px; margin:clamp(28px,4vw,46px) auto 0; border-radius:var(--r-lg);
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(20px,3vw,48px); align-items:center;
  padding:clamp(20px,2.6vw,40px); box-shadow:var(--sh-2);
  animation:rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.decan-card__vis{
  border-radius:var(--r-md); aspect-ratio:1/1; position:relative; overflow:hidden;
  background:#EFEAE0;
}
.decan-card__vis canvas{position:absolute; inset:0; width:100%; height:100%}
.decan-card__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; z-index:1; animation:fade .6s ease both}
.vis-toggle{
  position:absolute; bottom:14px; left:50%; translate:-50% 0; z-index:2; cursor:pointer;
  font-family:var(--sans); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--forest);
  background:rgba(255,253,248,.88); padding:9px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(8px); transition:background .3s, transform .3s;
}
.vis-toggle:hover{background:#FFF; transform:translateY(-2px)}
.decan-card__txt .eyebrow{font-size:.62rem}
.decan-card__meaning{font-family:var(--serif); font-style:italic; font-size:1.45rem; color:var(--blush); margin:0 0 .12em}
.decan-card__date{font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin:.3em 0 1.3em}
#dcText{color:var(--ink-2); margin:0}
.decan-card__sign{
  font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--teal);
  border-left:2px solid var(--blush); padding-left:1.1em; margin:1.6em 0;
}
.decan-card__foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px}
.price{font-family:var(--serif); font-size:1.95rem; color:var(--forest)}
@media (max-width:880px){ .decan-card{grid-template-columns:1fr} .decan-card__vis{aspect-ratio:4/3} }

/* =========================================================
   SILENZIO
   ========================================================= */
.sil-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:clamp(14px,2vw,26px); max-width:1340px; margin:0 auto}
.sil{
  border-radius:var(--arch); padding:0 0 26px; overflow:hidden;
  transition:transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s;
  display:flex; flex-direction:column;
}
.sil:hover{transform:translateY(-8px); box-shadow:var(--sh-2)}
.sil__vis{aspect-ratio:1.25/1; position:relative; overflow:hidden}
.sil--face .sil__vis{aspect-ratio:1/1.05}
.sil__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.sil:hover .sil__img{transform:scale(1.05)}
.sil__b{padding:22px 28px 0; text-align:center}
.sil h3{font-family:var(--serif); font-weight:400; font-size:1.6rem; margin:.1em 0 .04em; line-height:1.1; color:var(--forest); letter-spacing:-.015em}
.sil__m{font-family:var(--serif); font-style:italic; color:var(--blush); font-size:1.08rem; margin:0 0 1em}
.sil p.sil__t{font-size:.89rem; color:var(--ink-2); margin:0 0 1.1em; text-align:left; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.sil.is-open p.sil__t{-webkit-line-clamp:unset}
.sil__dono{
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--teal);
  background:#F1F6F3; border-radius:var(--r-sm); padding:14px 18px; margin:0 28px;
}
.sil__more{
  margin:16px auto 0; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid var(--line-2); padding:0 0 4px; transition:.3s;
}
.sil__more:hover{color:var(--forest); border-color:var(--forest)}
.sil__tag{
  position:absolute; top:16px; right:16px; z-index:3;
  background:var(--forest); color:#F7F2E6;
  font-size:.55rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
}

/* =========================================================
   ARCOBALENO
   ========================================================= */
.arc{max-width:1120px; margin:0 auto}
.arc__strip{display:flex; gap:clamp(10px,2vw,18px); justify-content:center; flex-wrap:wrap; margin-bottom:clamp(44px,5vw,58px)}
.chip-col{
  width:clamp(56px,7.6vw,76px); aspect-ratio:1; border-radius:50%; border:0; cursor:pointer; position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.22), 0 10px 24px -12px rgba(52,64,52,.6);
}
.chip-col::after{
  content:attr(data-n); position:absolute; left:50%; top:calc(100% + 11px); translate:-50% 0;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; transition:color .3s;
}
.chip-col:hover{transform:translateY(-7px) scale(1.08)}
.chip-col:hover::after{color:var(--ink)}
.chip-col.is-on{
  transform:translateY(-7px) scale(1.15);
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.22), 0 0 0 2px var(--paper-2), 0 0 0 3.4px var(--forest);
}
.chip-col.is-on::after{color:var(--forest); font-weight:500}
.arc__panel{
  margin-top:40px; border-radius:var(--r-lg); padding:clamp(30px,4.5vw,64px); text-align:center;
  transition:background .8s, box-shadow .8s;
}
.arc__panel h3{font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.2vw,3.2rem); margin:.1em 0 .18em; letter-spacing:-.028em}
.arc__panel .arc__m{font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--blush); margin:0 0 1.2em}
.arc__panel p{max-width:58ch; margin:0 auto; color:var(--ink-2)}
.arc__panel .btn{margin-top:2em}

/* =========================================================
   ATELIER
   ========================================================= */
.atl{max-width:1340px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(16px,2.6vw,42px); align-items:start}
.atl__stage{
  border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1;
  background:#F3EDE2; border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-2); position:sticky; top:100px; touch-action:pan-y;
}
.atl__stage canvas{position:absolute; inset:0; width:100%; height:100%; cursor:grab}
.atl__stage canvas:active{cursor:grabbing}
.atl__hint{
  position:absolute; bottom:18px; left:50%; translate:-50% 0; margin:0; z-index:2;
  font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-2);
  background:rgba(255,253,248,.82); padding:8px 16px; border-radius:999px; backdrop-filter:blur(8px);
}
.atl__panel{border-radius:var(--r-lg); padding:clamp(24px,3vw,42px); box-shadow:var(--sh-2)}
.atl__step{border:0; padding:0; margin:0 0 clamp(24px,3vw,32px)}
.atl__step legend{
  display:flex; align-items:baseline; gap:.8em; padding:0; margin-bottom:1em;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink);
}
.atl__step legend i{font-style:normal; font-family:var(--serif); font-size:1.35rem; color:var(--blush); letter-spacing:0}
.chips{display:flex; gap:9px; flex-wrap:wrap}
.chip{
  border:1px solid var(--line-2); background:transparent; border-radius:999px; cursor:pointer;
  padding:.68em 1.25em; font-family:var(--sans); font-size:.76rem; color:var(--ink-2); transition:.35s;
}
.chip:hover{border-color:var(--teal); color:var(--ink)}
.chip.is-on{background:var(--forest); border-color:var(--forest); color:#F7F2E6}
.atl__select{position:relative}
.atl__select::after{content:'▾'; position:absolute; right:18px; top:50%; translate:0 -50%; pointer-events:none; color:var(--teal)}
.atl__panel select, .atl__panel input[type=text]{
  width:100%; font-family:var(--sans); font-size:.94rem; font-weight:300; color:var(--ink);
  padding:.92em 1.15em; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--paper); appearance:none;
}
.atl__panel select:focus, .atl__panel input[type=text]:focus{border-color:var(--teal); outline:none}
.atl__meaning{font-family:var(--serif); font-style:italic; font-size:1.08rem; color:var(--teal); margin:.9em 0 0; min-height:1.6em}
.swatches{display:flex; gap:10px; flex-wrap:wrap}
.sw{width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; box-shadow:inset 0 -6px 12px rgba(0,0,0,.24); transition:.35s}
.sw:hover{transform:scale(1.14)}
.sw.is-on{box-shadow:inset 0 -6px 12px rgba(0,0,0,.24), 0 0 0 2px var(--white), 0 0 0 3.4px var(--forest)}
.checks{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.checks label{display:flex; align-items:flex-start; gap:11px; font-size:.85rem; color:var(--ink-2); cursor:pointer; line-height:1.55}
.checks input{margin-top:.34em; accent-color:var(--forest); width:16px; height:16px; flex:0 0 auto}
.checks b{color:var(--gold); font-weight:500; white-space:nowrap}
.atl__total{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; margin-bottom:22px;
}
.atl__totlabel{display:block; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3)}
.atl__total strong{display:block; font-family:var(--serif); font-weight:400; font-size:1.7rem; line-height:1.2; color:var(--forest)}
.atl__total em{display:block; font-family:var(--serif); font-style:italic; color:var(--blush); font-size:1rem}
.atl__price{font-family:var(--serif); font-size:clamp(2.1rem,4.2vw,3rem); white-space:nowrap; color:var(--forest)}
.atl__note{font-size:.78rem; color:var(--ink-3); margin:1.2em 0 0; line-height:1.65}
@media (max-width:940px){ .atl{grid-template-columns:1fr} .atl__stage{position:relative; top:0; aspect-ratio:4/4.3; max-height:64svh} }

/* =========================================================
   NASCITA
   ========================================================= */
.steps{list-style:none; margin:0 auto; padding:0; max-width:1240px; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,34px)}
.steps li{position:relative; padding-top:28px; border-top:1px solid var(--line)}
.steps li::before{content:''; position:absolute; top:-1px; left:0; width:38%; height:1px; background:var(--blush)}
.steps i{font-style:normal; font-family:var(--serif); font-size:2.5rem; line-height:1; display:block; margin-bottom:.32em; color:var(--blush)}
.steps h3{font-family:var(--serif); font-weight:400; font-size:1.45rem; margin:0 0 .5em; color:var(--forest); letter-spacing:-.015em}
.steps p{font-size:.9rem; color:var(--ink-2); margin:0}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* =========================================================
   GALLERIA
   ========================================================= */
.gal{columns:4 260px; column-gap:clamp(10px,1.6vw,18px); max-width:1480px; margin:0 auto}
.gal figure{
  break-inside:avoid; margin:0 0 clamp(10px,1.6vw,18px); border-radius:var(--r-md); overflow:hidden;
  position:relative; background:var(--white); box-shadow:var(--sh-1);
  transition:transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .8s;
}
.gal figure:nth-child(3n+1){border-radius:var(--arch)}
.gal figure:hover{transform:translateY(-8px); box-shadow:var(--sh-2)}
.gal__btn{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in}
.gal img{width:100%; height:auto; transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.gal figcaption{pointer-events:none}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:38px 22px 18px; color:#FFF8E8; z-index:2;
  background:linear-gradient(transparent, rgba(30,44,34,.86));
  font-family:var(--serif); font-style:italic; font-size:1.04rem;
  opacity:0; transform:translateY(10px); transition:.55s;
}
.gal figure:hover figcaption{opacity:1; transform:none}
@media (hover:none){ .gal figcaption{opacity:1; transform:none} }

/* =========================================================
   DONO
   ========================================================= */
.dono__card{
  max-width:1060px; margin:0 auto; text-align:center; border-radius:var(--r-lg);
  padding:clamp(46px,7vw,100px) clamp(24px,5vw,82px); position:relative; overflow:hidden;
  box-shadow:var(--sh-2);
}
.dono__card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(56% 74% at 10% 0%, rgba(222,154,166,.18), transparent 62%),
    radial-gradient(56% 74% at 94% 100%, rgba(169,200,195,.3), transparent 62%);
}
.dono__card > *{position:relative}
.dono__card p{max-width:54ch; margin:0 auto 1.2em; color:var(--ink-2)}
.dono__card b{color:var(--teal); font-weight:400}
.dono__tags{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:2.2em}
.dono__tags span{
  border:1px solid var(--line); border-radius:999px; padding:.55em 1.2em;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--forest);
}

/* =========================================================
   PREZZI
   ========================================================= */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); max-width:1380px; margin:0 auto}
.tier{
  border-radius:var(--r-lg); padding:clamp(26px,2.8vw,38px); position:relative;
  display:flex; flex-direction:column;
  transition:transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s;
}
.tier:hover{transform:translateY(-8px); box-shadow:var(--sh-2)}
.tier--hi{background:linear-gradient(170deg,#FFFBF2,#FBF0DE); border-color:rgba(176,131,57,.24); box-shadow:var(--sh-2)}
.tier--atelier{background:linear-gradient(170deg,#FDF6F7,#F5EDF2)}
.tier__badge{
  position:absolute; top:-11px; left:clamp(26px,2.8vw,38px);
  background:var(--forest); color:#F7F2E6;
  font-size:.55rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
}
.tier__badge--alt{background:var(--blush); color:#3A2129}
.tier h3{font-family:var(--serif); font-weight:400; font-size:1.55rem; margin:0 0 .08em; color:var(--forest)}
.tier__p{font-family:var(--serif); font-size:2.8rem; margin:0 0 .4em; line-height:1; color:var(--teal)}
.tier > p{font-size:.89rem; color:var(--ink-2); margin:0 0 1.4em}
.tier ul{list-style:none; margin:0 0 1.8em; padding:0; display:flex; flex-direction:column; gap:.7em}
.tier li{font-size:.84rem; color:var(--ink-2); padding-left:1.5em; position:relative}
.tier li::before{content:'✦'; position:absolute; left:0; color:var(--blush); font-size:.8em; top:.2em}
.tier li b{color:var(--gold); font-weight:400}
.tier .btn{margin-top:auto; align-self:flex-start}
.tiers__note{text-align:center; max-width:58ch; margin:clamp(32px,4vw,50px) auto 0; font-size:.86rem; color:var(--ink-3)}
.tiers__note b{color:var(--forest); font-weight:400}
@media (max-width:1080px){ .tiers{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .tiers{grid-template-columns:1fr} }

/* =========================================================
   FAQ
   ========================================================= */
.faq__list{max-width:860px; margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.3em 2.6em 1.3em 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.2rem,2.3vw,1.6rem); font-weight:400;
  color:var(--forest); transition:color .3s; letter-spacing:-.015em;
}
.faq summary:hover{color:var(--teal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; translate:0 -50%;
  font-size:1.65rem; color:var(--blush); transition:.4s; font-family:var(--sans); font-weight:200;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1.8em; color:var(--ink-2); max-width:64ch; padding-right:2em}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--forest);
  padding:clamp(70px,9vw,124px) var(--pad) calc(38px + env(safe-area-inset-bottom,0px));
}
.foot__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  opacity:.3; filter:saturate(.7);
}
.foot::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(30,48,38,.82), rgba(24,40,32,.94));
}
.foot__in{max-width:1220px; margin:0 auto; text-align:center; position:relative}
.foot__logo{
  width:clamp(170px,22vw,250px); margin:0 auto 1.6em;
  /* logo tutto bianco: le forme restano, i colori spariscono */
  filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(0,0,0,.35));
  opacity:.95;
}
.foot__claim{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,3.2vw,2.4rem); line-height:1.34;
  margin:0 0 clamp(46px,6vw,78px); color:#FFF7E7; text-wrap:balance;
}
.foot__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px; text-align:left;
  border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18);
  padding:clamp(32px,4vw,52px) 0; margin-bottom:30px;
}
.foot h4{font-family:var(--sans); font-weight:500; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-2); margin:0 0 1.2em}
.foot__cols p{margin:0 0 .6em; font-size:.94rem}
.foot__cols a{color:rgba(247,242,230,.8); transition:.3s}
.foot__cols a:hover{color:#FFF}
.foot__legal{font-size:.72rem; color:rgba(247,242,230,.5); margin:0; line-height:1.9}
.foot__legal small{font-size:.9em; opacity:.75}
@media (max-width:680px){ .foot__cols{grid-template-columns:1fr; gap:28px; text-align:center} }

/* =========================================================
   Pagine legali (privacy, cookie) + link nel footer
   ========================================================= */
.foot__links{display:flex; flex-wrap:wrap; justify-content:center; gap:.4em 1.6em; margin:0 0 1.1em; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase}
.foot__links a{color:rgba(247,242,230,.72); transition:.3s}
.foot__links a:hover{color:#FFF}
.atl__note a, .occ__privacy a{color:var(--teal); text-decoration:underline; text-underline-offset:3px}
.occ__privacy{font-size:.76rem; color:var(--ink-3); margin:1em 0 0; line-height:1.6}

.legal{max-width:760px; margin:0 auto; padding:0 var(--pad) clamp(70px,9vw,120px)}
.legal__sum{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px); margin:0 0 clamp(36px,5vw,56px); box-shadow:var(--sh-1);
}
.legal__sum h2{font-family:var(--serif); font-weight:400; font-size:1.35rem; margin:0 0 .7em}
.legal__sum ul{margin:0; padding-left:1.2em; color:var(--ink-2)}
.legal__sum li{margin:.35em 0}
.legal h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.7rem); margin:2.1em 0 .6em; color:var(--forest)}
.legal h3{font-family:var(--sans); font-weight:500; font-size:.95rem; margin:1.6em 0 .4em}
.legal p, .legal li{color:var(--ink-2); line-height:1.75}
.legal ul{padding-left:1.2em}
.legal a{color:var(--teal); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.legal table{width:100%; border-collapse:collapse; font-size:.9rem; margin:1em 0}
.legal th, .legal td{text-align:left; vertical-align:top; padding:.7em .6em; border-bottom:1px solid var(--line)}
.legal th{font-weight:500; color:var(--ink)}
.legal__upd{font-size:.8rem; color:var(--ink-3); margin-top:3em}
@media (max-width:600px){
  .legal table, .legal tbody, .legal tr, .legal td{display:block}
  .legal thead{display:none}
  .legal tr{border-bottom:1px solid var(--line); padding:.4em 0}
  .legal td{border:0; padding:.25em 0}
  .legal td:first-child{font-weight:500; color:var(--ink)}
}