@font-face{font-family:Gloock;src:url(../font/gloock-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Karla;src:url(../font/karla-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Karla;src:url(../font/karla-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --notte:#0f1630; --notte-2:#1a2450; --notte-3:#26326a;
  --panna:#fbf5e9; --pergamena:#f3e8d3; --sabbia:#e7d6b6;
  --oro:#e9b44c; --oro-chiaro:#f7d993; --oro-scuro:#b9842a;
  --bordeaux:#8f2234; --bordeaux-scuro:#6f1726;
  --oliva:#5f6f35; --muschio:#2d3820;
  --inchiostro:#24190f; --grigio:#6e6252;
  --wa:#1f8f4e;
  --display:Gloock,"Times New Roman",serif;
  --testo:Karla,system-ui,sans-serif;
  --largo:1920px;
  --lato:clamp(.9rem,2.6vw,3rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--testo);font-size:1.1rem;line-height:1.6;color:var(--inchiostro);background:var(--panna);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.salta{position:absolute;left:-999px;top:8px;background:var(--notte);color:#fff;padding:.6rem 1rem;z-index:99}
.salta:focus{left:8px}
.largo{max-width:var(--largo);margin:0 auto;padding:0 var(--lato)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.012em}
em{font-style:italic}
.timbro{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bordeaux);border:1.5px solid currentColor;padding:.32rem .7rem .26rem;transform:rotate(-1.5deg);margin-bottom:1.4rem}
.timbro-chiaro{color:var(--oro)}

/* bottoni: cartellini con l'angolo tagliato */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.6rem;font-weight:700;text-decoration:none;border:0;cursor:pointer;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:background .25s,transform .25s,box-shadow .25s}
.bottone:hover{transform:translateY(-2px)}
.bottone-pieno{background:var(--bordeaux);color:#fff}
.bottone-pieno:hover{background:var(--bordeaux-scuro)}
.bottone-oro{background:linear-gradient(135deg,var(--oro-chiaro),var(--oro) 55%,var(--oro-scuro));color:var(--notte)}
.bottone-oro:hover{filter:brightness(1.06)}
.bottone-vetro{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.bottone-vetro:hover{background:rgba(255,255,255,.22)}
.bottone-wa{background:var(--wa);color:#fff}
.bottone-wa:hover{background:#17733e}
.bottone-wa svg{width:1.3rem;height:1.3rem}
.bottone.grande{font-size:1.12rem;padding:1.15rem 1.9rem}
.bottone-testo{background:none;border:0;font-weight:700;color:var(--bordeaux);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* testata: trasparente sopra l'apertura, poi carta */
.testata{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:2rem;padding:1rem var(--lato);color:#fff;transition:background .4s,color .4s,padding .4s,box-shadow .4s}
.testata.solida{background:rgba(251,245,233,.94);color:var(--notte);backdrop-filter:blur(10px);padding-top:.65rem;padding-bottom:.65rem;box-shadow:0 1px 0 rgba(36,25,15,.1)}
.marchio{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marchio-segno{width:42px;height:42px}
.marchio-segno .stella{fill:var(--oro)}
.marchio-nome{font-family:var(--display);font-size:1.5rem;line-height:1}
.marchio-nome small{display:block;font-family:var(--testo);font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin-bottom:.2rem}
.testata.solida .marchio-nome small{color:var(--bordeaux)}
.menu{display:flex;gap:1.8rem;margin-left:auto}
.menu a{text-decoration:none;font-weight:700;font-size:.98rem;padding:.3rem 0;border-bottom:2px solid transparent}
.menu a:hover{border-color:var(--oro)}
.chiave{display:flex;align-items:center;gap:.45rem;background:none;border:1.5px solid currentColor;padding:.45rem .85rem;cursor:pointer;font-size:.86rem;font-weight:700;opacity:.85}
.chiave svg{width:20px;height:20px}
.chiave:hover{opacity:1;color:var(--oro)}

/* 1. apertura */
.eroe{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--notte);color:#fff;display:flex;align-items:flex-end}
.eroe-scena{position:absolute;inset:0}
.eroe-foto{width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.08);animation:avvicina 26s ease-out forwards;transition:filter 2.6s ease}
@keyframes avvicina{to{transform:scale(1)}}
.eroe-velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,22,48,.6) 0%,rgba(15,22,48,.15) 50%,rgba(15,22,48,0) 70%),linear-gradient(180deg,rgba(15,22,48,.55) 0%,rgba(15,22,48,0) 30%,rgba(15,22,48,.15) 55%,rgba(15,22,48,.9) 100%);transition:background 2.6s}
.eroe-cielo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.eroe.notte .eroe-foto{filter:brightness(.42) saturate(.75) contrast(1.12) hue-rotate(-8deg)}
.eroe.notte .eroe-velo{background:linear-gradient(180deg,rgba(10,16,44,.88) 0%,rgba(15,22,60,.35) 38%,rgba(15,22,48,.2) 60%,rgba(10,14,32,.95) 100%)}
.eroe-testo{position:relative;z-index:2;width:100%;max-width:var(--largo);margin:0 auto;padding:0 var(--lato) clamp(5rem,11vh,8rem)}
.eroe-sopra{text-shadow:0 2px 12px rgba(0,0,0,.6);font-size:.82rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--oro-chiaro);margin-bottom:1rem}
.eroe-titolo{font-size:clamp(4.2rem,13.5vw,13.5rem);line-height:.86;letter-spacing:-.03em;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.eroe-titolo .riga{display:block;overflow:hidden;padding-bottom:.06em}
.eroe-titolo .riga>span{display:inline-block;transform:translateY(105%);animation:sale 1.2s cubic-bezier(.2,.8,.2,1) forwards}
.eroe-titolo .riga:nth-child(2)>span{animation-delay:.15s;padding-left:clamp(1rem,9vw,9rem)}
.eroe-titolo em{color:var(--oro-chiaro)}
@keyframes sale{to{transform:none}}
.eroe-sotto{max-width:34rem;font-size:clamp(1.05rem,1.4vw,1.28rem);color:#f0ead9;margin:1.6rem 0 2rem;opacity:0;animation:appare 1s .7s forwards}
.eroe-azioni{display:flex;flex-wrap:wrap;gap:1rem;opacity:0;animation:appare 1s .9s forwards}
@keyframes appare{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.interruttore{position:absolute;z-index:3;right:var(--lato);bottom:clamp(5rem,11vh,8rem);display:flex;align-items:center;gap:.8rem;background:rgba(15,22,48,.45);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);color:#fff;padding:.6rem 1rem .6rem .7rem;cursor:pointer;font-weight:700;font-size:.92rem}
.interruttore-pista{width:52px;height:28px;border-radius:14px;background:rgba(255,255,255,.25);position:relative;transition:background .4s}
.interruttore-pomello{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .4s,background .4s,box-shadow .4s}
.interruttore[aria-pressed=true] .interruttore-pista{background:var(--oro-scuro)}
.interruttore[aria-pressed=true] .interruttore-pomello{transform:translateX(24px);background:var(--oro-chiaro);box-shadow:0 0 14px var(--oro)}
.eroe-credito{position:absolute;z-index:2;right:var(--lato);bottom:1rem;font-size:.7rem;color:rgba(255,255,255,.55)}
.eroe-giu{position:absolute;z-index:2;left:50%;bottom:1.2rem;width:22px;margin-left:-11px;color:rgba(255,255,255,.7)}
.eroe-giu circle{animation:rotella 1.8s infinite}
@keyframes rotella{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* nastro */
.nastro{background:var(--bordeaux);color:var(--oro-chiaro);overflow:hidden;padding:1rem 0;border-top:1px solid rgba(247,217,147,.3)}
.nastro-scorre{display:flex;gap:2rem;width:max-content;animation:scorre 38s linear infinite;font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2.2rem);white-space:nowrap;align-items:center}
.nastro-scorre i{font-style:normal;font-size:.7em;color:var(--oro)}
@keyframes scorre{to{transform:translateX(-50%)}}

/* 2. vero o miniatura */
.indovina{padding:clamp(5rem,9vw,8rem) var(--lato);text-align:center;position:relative;background:var(--pergamena)}
.indovina>*{max-width:calc(var(--largo) - 2*3rem);margin-left:auto;margin-right:auto}
.indovina-testa h2{font-size:clamp(2.6rem,5.5vw,5.2rem);color:var(--notte)}
.indovina-testa h2 em{color:var(--oliva)}
.indovina-scena{position:relative;margin:3rem auto 0;max-width:none;aspect-ratio:16/9;display:grid;place-items:center}
.banco{position:absolute;inset:0;background:
  repeating-linear-gradient(92deg,rgba(0,0,0,.05) 0 2px,transparent 2px 22px),
  repeating-linear-gradient(88deg,rgba(255,255,255,.05) 0 1px,transparent 1px 37px),
  linear-gradient(180deg,#8a5a34,#6e4526);opacity:0;transition:opacity 1s .3s;box-shadow:inset 0 40px 80px rgba(0,0,0,.35)}
.indovina-foto{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.6,0,.2,1),box-shadow 1.4s;transform-origin:50% 100%;box-shadow:0 40px 80px -40px rgba(15,22,48,.6)}
.indovina-foto img{width:100%;height:100%;object-fit:cover}
.indovina-statuina{position:absolute;bottom:9%;left:79%;height:0;fill:var(--notte);transition:height .9s 1.2s cubic-bezier(.3,1.4,.5,1);filter:drop-shadow(0 6px 4px rgba(0,0,0,.35))}
.indovina-scelte{position:absolute;bottom:2rem;left:0;right:0;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;z-index:2;transition:opacity .4s}
.indovina-scena.svelato .banco{opacity:1}
.indovina-scena.svelato .indovina-foto{transform:translateY(-14%) scale(.5);box-shadow:0 30px 30px -10px rgba(0,0,0,.6),0 0 0 10px #f6efe2}
.indovina-scena.svelato .indovina-statuina{height:15%}
.indovina-scena.svelato .indovina-scelte{opacity:0;pointer-events:none}
.indovina-esito{max-width:40rem;margin:2.2rem auto 0;animation:appare .8s both}
.esito-grande{font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);color:var(--bordeaux);line-height:1.1;margin-bottom:.8rem}
.indovina-esito>p:not(.esito-grande){color:#4a3c2c;font-size:1.15rem}
.esito-azioni{display:flex;gap:1.4rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.6rem}

/* 3. storia */
.storia{position:relative;overflow:hidden;background:radial-gradient(ellipse at 70% 0%,var(--notte-3),var(--notte) 60%);color:#e9e6dc;padding:clamp(5rem,9vw,8rem) 0}
.cielo-storia{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cielo-storia circle{fill:#fff}
.storia-testa{position:relative;margin-bottom:4rem;max-width:62rem}
.storia-testa h2{font-size:clamp(2.8rem,6vw,5.4rem);color:#fff}
.storia-testa p{margin-top:1rem;color:#bfc4d9;font-size:1.15rem}
.storia-testa .storia-intro{font-size:clamp(1.15rem,1.5vw,1.4rem);color:#e6e2d6;max-width:52rem;line-height:1.55}
.storia-intro b{color:var(--oro-chiaro);font-weight:700}
.storia-testa .firma{font-family:var(--display);font-style:italic;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--oro-chiaro);margin-top:1.2rem;transform:rotate(-2deg);display:inline-block}
.firma small{font-family:var(--testo);font-style:normal;font-size:.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bfc4d9}
.storia-testa .firma::before{content:"";display:inline-block;width:2.4rem;border-top:2px solid var(--oro);vertical-align:middle;margin-right:.8rem}
.sentiero{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.4vw,2.6rem)}
.sentiero::before{content:"";position:absolute;left:0;right:0;top:1.6rem;border-top:2px dashed rgba(233,180,76,.45)}
.sentiero::after{content:"";position:absolute;top:calc(1.6rem - 11px);left:var(--cometa,0%);width:22px;height:22px;background:var(--oro-chiaro);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 12px var(--oro));transition:left .15s linear}
.tappa{position:relative;padding-top:4.2rem}
.tappa-num{position:absolute;top:0;left:0;width:3.2rem;height:3.2rem;display:grid;place-items:center;font-family:var(--display);font-size:1.25rem;color:var(--notte);background:var(--pergamena);border-radius:50%;opacity:.4;transition:opacity .5s,background .5s,box-shadow .5s}
.tappa.accesa .tappa-num{opacity:1;background:var(--oro);box-shadow:0 0 26px rgba(233,180,76,.6)}
.tappa-foto{aspect-ratio:4/3;overflow:hidden;margin-bottom:1.2rem;filter:grayscale(.7) brightness(.6);transition:filter 1s}
.tappa.accesa .tappa-foto{filter:none}
.tappa-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.tappa:hover .tappa-foto img{transform:scale(1.05)}
.tappa h3{font-size:1.75rem;color:#fff;margin-bottom:.6rem}
.tappa p{color:#c9cbd8;font-size:1.02rem}
.tappa:nth-child(even){margin-top:3.5rem}
.nota-esempio{position:relative;margin-top:3rem;font-size:.85rem;color:#8d93ab;font-style:italic}

/* 3b. stili, corsi e mondo */
.stili{padding:clamp(5rem,9vw,8rem) 0;background:var(--panna)}
.stili-testa{margin-bottom:3rem}
.stili-testa h2{font-size:clamp(2.8rem,6vw,5.6rem);color:var(--notte)}
.stili-testa h2 em{color:var(--bordeaux)}
.stili-griglia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,3rem)}
.stile{position:relative;overflow:hidden;background:var(--notte);color:#fff;min-height:clamp(420px,38vw,640px);display:flex;align-items:flex-end}
.stile figure{position:absolute;inset:0}
.stile img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.stile:hover img{transform:scale(1.06)}
.stile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,48,0) 35%,rgba(15,22,48,.92) 100%)}
.stile-testo{position:relative;z-index:1;padding:clamp(1.6rem,3vw,3rem);max-width:40rem}
.stile-num{font-family:var(--display);font-size:1.1rem;color:var(--oro-chiaro);display:block;margin-bottom:.4rem}
.stile h3{font-size:clamp(2.2rem,3.6vw,3.6rem);margin-bottom:.7rem}
.stile p{color:#e8e3d4;font-size:1.08rem}
.mondo{margin-top:clamp(1.4rem,3vw,3rem);background:var(--bordeaux);color:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.6rem,4vw,4rem);align-items:center;padding:clamp(1.8rem,3.5vw,3.2rem) clamp(1.6rem,3.5vw,3.5rem);position:relative;overflow:hidden}
.mondo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 50%,rgba(247,217,147,.25),transparent 40%);pointer-events:none}
.mondo-numero{display:flex;align-items:center;gap:1.2rem;position:relative}
.mondo-numero b{font-family:var(--display);font-weight:400;font-size:clamp(4rem,8vw,7.5rem);line-height:.9;color:var(--oro-chiaro)}
.mondo-numero span{font-weight:700;line-height:1.3;font-size:1.05rem}
.mondo-titolo{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-chiaro);margin-bottom:.9rem}
.paesi{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem}
.paesi li{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(247,217,147,.35);padding:.5rem .9rem;font-weight:700;font-size:1.02rem}
.paesi li span{font-size:1.2rem;line-height:1}
.mondo .bottone{position:relative}
.stili .credito-piccolo{margin-top:1rem}

/* 4. lente */
.lente-sez{padding:clamp(5rem,9vw,8rem) 0;background:var(--panna)}
.lente-griglia{display:grid;grid-template-columns:minmax(18rem,.55fr) 1.8fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.lente-testo h2{font-size:clamp(2.6rem,5vw,4.6rem);color:var(--notte);margin-bottom:1.2rem}
.lente-testo h2 em{color:var(--bordeaux)}
.lente-testo p{color:#4a3c2c}
.credito-piccolo{font-size:.78rem;margin-top:1.4rem;color:var(--grigio)!important}
.lente-foto{position:relative;cursor:none;touch-action:none;box-shadow:0 50px 90px -50px rgba(15,22,48,.7)}
.lente-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lente{position:absolute;left:0;top:0;width:clamp(150px,18vw,260px);height:clamp(150px,18vw,260px);border-radius:50%;pointer-events:none;border:4px solid var(--oro-chiaro);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 30px rgba(0,0,0,.25);background-repeat:no-repeat;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .25s,transform .25s}
.lente-foto.attiva .lente{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lente-suggerimento{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(15,22,48,.7);color:#fff;font-weight:700;padding:.7rem 1.2rem;border-radius:2rem;font-size:.95rem;transition:opacity .4s;animation:pulsa 2.2s infinite}
.lente-foto.attiva .lente-suggerimento,.lente-foto.usata .lente-suggerimento{opacity:0}
@keyframes pulsa{50%{box-shadow:0 0 0 12px rgba(233,180,76,.25)}}

/* 5. vetrina */
.vetrina{padding:clamp(5rem,9vw,8rem) 0 4rem}
.vetrina-testa{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 3rem;margin-bottom:2rem}
.vetrina-testa h2{font-size:clamp(3.4rem,9vw,8.5rem);color:var(--notte);line-height:.85}
.vetrina-testa p{max-width:30rem;color:#4a3c2c;font-size:1.2rem}
.schede-categoria{display:flex;border-bottom:2px solid var(--inchiostro);margin-bottom:2.4rem;overflow-x:auto}
.schede-categoria button{background:none;border:0;padding:.85rem 1.5rem .75rem;font-weight:700;font-size:1.04rem;cursor:pointer;white-space:nowrap}
.schede-categoria button[aria-selected=true]{background:var(--notte);color:var(--oro-chiaro)}
.schede-categoria button:not([aria-selected=true]):hover{color:var(--bordeaux)}
.scaffale{display:grid;grid-template-columns:repeat(12,1fr);gap:2.2rem 1.8rem}
.pezzo{grid-column:span 4;background:#fff;display:flex;flex-direction:column;position:relative;box-shadow:0 1px 0 rgba(36,25,15,.08),0 24px 50px -36px rgba(15,22,48,.5);transition:transform .4s,box-shadow .4s}
.pezzo:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(36,25,15,.08),0 34px 60px -30px rgba(15,22,48,.55)}
.pezzo.grande{grid-column:span 8;flex-direction:row}
.pezzo.grande .pezzo-foto{flex:1.4;aspect-ratio:auto;min-height:100%}
.pezzo.grande .pezzo-corpo{flex:1;padding:2rem}
.pezzo.grande h3{font-size:2.6rem}
.pezzo-foto{aspect-ratio:4/3;overflow:hidden;background:#e6dcc8;position:relative}
.pezzo-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.pezzo:hover .pezzo-foto img{transform:scale(1.06)}
.pezzo-corpo{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pezzo-cat{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--oliva)}
.pezzo h3{font-size:1.7rem}
.pezzo p{font-size:.98rem;color:#4a3c2c}
.pezzo-prezzo{margin-top:auto;padding-top:.6rem;font-weight:700;font-size:1.05rem}
.pezzo-prezzo b{font-family:var(--display);font-weight:400;font-size:1.8rem;color:var(--notte)}
.pezzo-azioni{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.pezzo-azioni .bottone{padding:.7rem 1.1rem;font-size:.94rem}
.etichetta{position:absolute;top:.9rem;left:.9rem;z-index:1;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem}
.etichetta-vero{background:var(--oro);color:var(--notte)}
.etichetta-esempio{background:rgba(15,22,48,.75);color:#fff;backdrop-filter:blur(4px)}
.etichetta-nuovo{background:var(--bordeaux);color:#fff}
.vuoto{grid-column:span 8;border:2px dashed rgba(36,25,15,.25);padding:2.4rem 2rem;display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.vuoto svg{width:84px;height:84px;color:var(--oro-scuro)}
.vuoto h3{font-size:1.8rem;margin-bottom:.4rem}
.vuoto p{color:#4a3c2c;margin-bottom:1rem;max-width:40rem}

/* 6. ulivo */
.ulivo{padding:3rem 0 clamp(5rem,8vw,7rem);overflow-x:clip}
.ulivo-griglia{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.ulivo-foto{position:relative}
.ulivo-foto img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:40% 70%}
.ulivo-foto::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px solid var(--oro);z-index:-1}
.ulivo-bollo{position:absolute;right:-1.4rem;top:-1.4rem;width:8.5rem;height:8.5rem;border-radius:50%;background:var(--bordeaux);color:var(--oro-chiaro);display:grid;place-items:center;text-align:center;font-family:var(--display);font-size:1.15rem;line-height:1.1;transform:rotate(10deg);box-shadow:0 14px 30px -10px rgba(0,0,0,.45);outline:2px dashed rgba(247,217,147,.6);outline-offset:-8px}
.ulivo-scheda h2{font-size:clamp(2.8rem,5vw,4.6rem);color:var(--notte)}
.ulivo-sottotitolo{font-family:var(--display);font-size:1.4rem;color:var(--oliva);margin:.6rem 0 1.2rem;line-height:1.25}
.ulivo-scheda>p:not(.timbro):not(.ulivo-sottotitolo):not(.prezzo-grande){color:#4a3c2c}
.dati{margin:1.6rem 0 1.6rem;border-top:1px solid rgba(36,25,15,.2)}
.dati div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.65rem 0;border-bottom:1px solid rgba(36,25,15,.2)}
.dati dt{font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio)}
.prezzo-grande{font-size:1.15rem;margin:0 0 1.4rem}
.prezzo-grande b{font-family:var(--display);font-weight:400;font-size:3.2rem;color:var(--bordeaux);margin-right:.2rem}
.prezzo-grande span{color:var(--grigio);font-size:1rem}
.pagamenti{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.pagamenti li,.metodi span{font-size:.8rem;font-weight:700;padding:.38rem .7rem;border:1.5px solid rgba(36,25,15,.2);background:#fff;display:inline-flex;align-items:center;gap:.45rem}
.pg-carta::before{content:"";width:18px;height:12px;border-radius:2px;background:linear-gradient(180deg,#24190f 0 30%,#d8cdb8 30% 50%,#24190f 50%)}
.pg-bonifico::before{content:"€";font-family:var(--display);font-size:1rem;line-height:1}
.pg-klarna::before{content:"K";background:#ffb3c7;color:#17120f;font-weight:700;padding:0 .3rem}
.pg-satispay::before{content:"";width:12px;height:12px;background:#f94c43;transform:rotate(45deg)}

/* 7. metro */
.metro{background:radial-gradient(ellipse at 20% 0%,#3d4b2b,var(--muschio) 65%);color:#efe9d6;padding:clamp(5rem,8vw,7rem) 0}
.metro-griglia{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.metro h2{font-size:clamp(2.6rem,5vw,4.4rem);color:#fff}
.metro-testo>p{margin:1rem 0 1.8rem;color:#d6d3bf;max-width:32rem}
.statuine{border:0;margin-bottom:1.6rem}
.statuine legend{font-weight:700;margin-bottom:.7rem}
.statuine-scelte{display:flex;flex-wrap:wrap;gap:.5rem}
.statuine-scelte input{position:absolute;opacity:0}
.statuine-scelte span{display:block;padding:.55rem 1rem;border:1.5px solid rgba(239,233,214,.45);font-weight:700;cursor:pointer}
.statuine-scelte input:checked+span{background:var(--oro);color:var(--notte);border-color:var(--oro)}
.statuine-scelte input:focus-visible+span{outline:3px solid var(--oro);outline-offset:3px}
.cursore-etichetta{display:block;font-weight:700;margin-bottom:.5rem}
.cursore-etichetta output{font-family:var(--display);font-size:1.7rem;font-weight:400;color:var(--oro-chiaro);margin-left:.3rem}
#altezza{width:100%;max-width:32rem;accent-color:var(--oro);height:2rem}
.consiglio{min-height:3.2rem;margin:.8rem 0 1.6rem;color:#d6d3bf;max-width:32rem}
.consiglio b{color:#fff}
.metro-scena{position:relative;background:linear-gradient(180deg,#fbf4e4 0%,#efe1c3 100%);height:clamp(400px,40vw,700px);padding:1.4rem 1.4rem 2.6rem 4.2rem;color:var(--inchiostro);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.righello{position:absolute;left:1rem;top:1.4rem;bottom:2.6rem;width:2.4rem;border-right:2px solid var(--inchiostro)}
.righello span{position:absolute;right:0;font-size:.72rem;font-weight:700;transform:translateY(50%);padding-right:.5rem;white-space:nowrap}
.righello span::after{content:"";position:absolute;right:-1px;top:50%;width:6px;border-top:2px solid var(--inchiostro)}
.scena-terra{position:absolute;left:4.2rem;right:1.4rem;top:1.4rem;bottom:2.6rem;border-bottom:3px solid #a9764a;display:flex;align-items:flex-end;justify-content:center;gap:4%}
.scena-ulivo{height:var(--h-ulivo,60%);width:auto;object-fit:contain;object-position:bottom;transition:height .25s ease;filter:drop-shadow(0 10px 8px rgba(0,0,0,.18))}
.scena-statuina{height:var(--h-stat,20%);width:auto;fill:var(--notte);transition:height .25s ease;flex:none}
.scena-nota{position:absolute;left:4.2rem;bottom:.6rem;font-size:.82rem;color:var(--grigio)}

/* 8. contatti */
.contatti{position:relative;padding:clamp(6rem,11vw,10rem) var(--lato);overflow:hidden;background:var(--notte)}
.contatti-sfondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9)}
.biglietto{position:relative;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:0 4rem;align-items:end;background:var(--panna);padding:clamp(2rem,5vw,4rem);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.biglietto::before{content:"";position:absolute;top:-14px;left:50%;width:130px;height:28px;margin-left:-65px;background:rgba(233,180,76,.55);transform:rotate(-2deg)}
.biglietto h2{font-size:clamp(2.4rem,4.6vw,3.8rem);color:var(--notte);margin-bottom:1rem}
.biglietto>p{color:#4a3c2c;margin-bottom:2rem;max-width:34rem}
.biglietto h2,.biglietto>p{grid-column:1}
.biglietto>.bottone{grid-column:1;justify-self:start}
.biglietto .recapiti{grid-column:2;grid-row:1/4;grid-template-columns:1fr;margin:0;border-top:0;border-left:1px solid rgba(36,25,15,.2);padding:0 0 0 2.4rem;gap:1.4rem;align-self:center}
.biglietto .recapiti a,.biglietto .recapiti em{font-size:1.25rem}
.recapiti{list-style:none;margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid rgba(36,25,15,.2);padding-top:1.4rem}
.recapiti span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.recapiti a{font-weight:700;text-decoration:none}
.recapiti em{color:var(--grigio)}

/* piede */
.piede{background:var(--notte);color:#bfc4d9;padding:3rem 0;font-size:.92rem}
.piede-griglia{display:grid;grid-template-columns:1fr 1.4fr auto;gap:2rem;align-items:start}
.piede-marchio{font-family:var(--display);font-size:2rem;color:#fff;margin-bottom:.3rem}
.link-piede{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer}
.crediti summary{cursor:pointer;font-weight:700;color:#e3e5ef}
.crediti ul{list-style:none;margin-top:.8rem;display:grid;gap:.3rem;font-size:.78rem;max-height:14rem;overflow:auto}
.crediti a{color:var(--oro-chiaro)}
.credito a{color:var(--oro)}

/* finestre */
.finestra{margin:auto;width:min(560px,94vw);max-height:92vh;border:0;background:var(--panna);padding:2.2rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.finestra::backdrop{background:rgba(15,22,48,.72);backdrop-filter:blur(4px)}
.chiudi-form{position:absolute;top:.6rem;right:.8rem}
.chiudi{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--grigio)}
.finestra h2{font-size:2.3rem;color:var(--notte);margin-bottom:.4rem}
.finestra h3{font-size:1.4rem;margin:1.8rem 0 .8rem}
.finestra form{display:grid;gap:.9rem;margin-top:1.2rem}
.finestra label{display:grid;gap:.3rem;font-weight:700;font-size:.92rem}
.finestra input,.finestra select,.finestra textarea{font-weight:400;padding:.7rem .8rem;border:1.5px solid rgba(36,25,15,.3);background:#fff;font-size:1rem}
.finestra input[type=file]{padding:.5rem}
.errore{color:var(--bordeaux-scuro);font-weight:700;min-height:1.2rem;font-size:.92rem}
.nota-anteprima{margin-top:1.2rem;font-size:.85rem;color:var(--grigio);background:#efe4cf;padding:.7rem .9rem}
.pannello-testa{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.elenco-prodotti{list-style:none;display:grid;gap:.5rem}
.elenco-prodotti li{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid rgba(36,25,15,.15);padding:.5rem .7rem}
.elenco-prodotti img{width:52px;height:40px;object-fit:cover;background:#e6dcc8}
.elenco-prodotti b{flex:1;font-weight:700;font-size:.95rem}
.elenco-prodotti small{color:var(--grigio)}
.elenco-prodotti button{background:none;border:0;color:var(--bordeaux-scuro);font-weight:700;cursor:pointer;font-size:.85rem}
.cassa{width:min(660px,96vw)}
.cassa-riga{display:flex;gap:1rem;align-items:center;margin:1rem 0 .4rem;background:#fff;border:1px solid rgba(36,25,15,.15);padding:.6rem}
.cassa-riga img{width:84px;height:64px;object-fit:cover}
.cassa-riga b{display:block;font-family:var(--display);font-weight:400;font-size:1.4rem}
.cassa-riga span{color:var(--grigio);font-size:.95rem}
.cassa-due{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.metodi{border:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.metodi legend{font-weight:700;font-size:.92rem;margin-bottom:.4rem}
.metodi label{display:block;font-weight:400}
.metodi input{position:absolute;opacity:0}
.metodi span{display:flex;width:100%;padding:.8rem .85rem;font-size:.95rem;cursor:pointer}
.metodi input:checked+span{border-color:var(--bordeaux);box-shadow:inset 0 0 0 1.5px var(--bordeaux);background:#fff7f2}
.metodi input:focus-visible+span{outline:3px solid var(--oro);outline-offset:2px}
.conto{border-top:1px solid rgba(36,25,15,.2);margin-top:.4rem}
.conto div{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid rgba(36,25,15,.12)}
.conto dt{color:var(--grigio)}
.conto-tot{font-size:1.25rem;font-weight:700}
.conto-tot dt{color:var(--inchiostro)}

/* comparsa */
.compare{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.compare.visto{opacity:1;transform:none}

@media (max-width:1100px){
  .menu{display:none}
  .sentiero{grid-template-columns:1fr 1fr;gap:3rem 2rem}
  .sentiero::before,.sentiero::after{display:none}
  .tappa:nth-child(even){margin-top:0}
  .tappa-num{opacity:1;background:var(--oro)}
  .tappa-foto{filter:none}
  .pezzo,.pezzo.grande{grid-column:span 6}
  .vuoto{grid-column:1/-1}
  .pezzo.grande{flex-direction:column}
  .pezzo.grande .pezzo-foto{aspect-ratio:4/3}
  .lente-griglia,.ulivo-griglia,.metro-griglia{grid-template-columns:1fr}
  .mondo{grid-template-columns:1fr}
  .mondo .bottone{justify-self:start}
  .piede-griglia{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:1.04rem}
  .testata{gap:.8rem}
  .chiave span{display:none}
  .marchio-nome{font-size:1.25rem}
  .eroe-titolo .riga:nth-child(2)>span{padding-left:0}
  .interruttore{left:var(--lato);right:auto;bottom:auto;top:5.2rem}
  .eroe-credito{right:auto;left:var(--lato)}
  .sentiero{grid-template-columns:1fr}
  .stili-griglia{grid-template-columns:1fr}
  .pezzo,.pezzo.grande{grid-column:1/-1}
  .indovina-scena{aspect-ratio:4/5}
  .indovina-scelte{bottom:1rem;padding:0 1rem}
  .indovina-scena.svelato .indovina-foto{transform:translateY(-12%) scale(.62)}
  .indovina-statuina{left:76%}
  .vuoto{grid-template-columns:1fr}
  .recapiti,.cassa-due,.metodi{grid-template-columns:1fr}
  .biglietto{display:block}
  .biglietto .recapiti{border-left:0;border-top:1px solid rgba(36,25,15,.2);padding:1.4rem 0 0;margin-top:2.4rem}
  .ulivo-foto::after{inset:10px -8px -10px 10px}
  .ulivo-bollo{width:6.5rem;height:6.5rem;font-size:.95rem;right:-.4rem}
  .metro-scena{padding-left:3.4rem}
  .scena-terra{left:3.4rem}
  .scena-nota{left:1rem}
  .lente-foto{cursor:default}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .compare{opacity:1;transform:none}
  .nastro-scorre{animation:none}
}