/* ---------- HERO ---------- */
.hero{position:relative;height:340vh}
.hero__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage-local{position:absolute;inset:0}
.stage-local canvas{width:100%;height:100%}
.vignette-local{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(12,12,13,.78) 0%,rgba(12,12,13,.25) 42%,transparent 60%),
  linear-gradient(0deg,rgba(12,12,13,.9) 0%,transparent 26%),
  radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
.hero__chapter{position:absolute;left:var(--gutter);bottom:clamp(90px,14vh,150px);max-width:min(620px,86vw);display:grid;gap:22px;opacity:0;visibility:hidden}
.hero__chapter[data-chapter="0"]{opacity:1;visibility:visible}
.hero__chapter--right{left:auto;right:var(--gutter);bottom:auto;top:50%;transform:translateY(-50%);width:min(560px,40vw);max-width:none}
.hero__name{font-size:clamp(52px,4.9vw,100px);letter-spacing:.01em;white-space:nowrap}
.hero__scroll{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero__scroll span{width:1px;height:38px;background:linear-gradient(var(--yellow),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.facts li{padding:14px 12px 0 0;display:grid;gap:4px}
.facts b{font-size:clamp(20px,2vw,28px);font-weight:700;color:var(--ink)}
.facts span{font-size:11px;color:var(--muted);line-height:1.3}
.hero__buy{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}
.price{display:grid;gap:2px}
.price span{font-size:28px;font-weight:700}
.price small{font:500 11px var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.hero__progress{position:absolute;right:var(--gutter);bottom:36px;list-style:none;margin:0;padding:0;display:flex;gap:6px}
.hero__progress li{width:34px;height:2px;background:var(--line);overflow:hidden;position:relative}
.hero__progress li::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(var(--p,0));transform-origin:left}
@media (max-width:760px){
  .vignette-local{background:linear-gradient(0deg,rgba(12,12,13,.95) 0%,rgba(12,12,13,.6) 34%,transparent 60%)}
  .hero__chapter,.hero__chapter--right{left:16px;right:16px;top:auto;bottom:88px;transform:none;max-width:none;width:auto;gap:16px}
  .facts b{font-size:18px}
}

/* ---------- LINK ---------- */
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;border-bottom:1px solid var(--yellow);padding-bottom:6px;width:max-content}
.link-arrow svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
.link-arrow.is-off{border-color:var(--line);color:var(--dim);font-weight:500}
.is-tbd{color:var(--dim)}

/* ---------- COLLEZIONE: traccia orizzontale ---------- */
.family{position:relative;background:var(--void)}
.family__pin{height:100vh;height:100svh;overflow:hidden;position:relative;display:flex;flex-direction:column}
.family__head{padding:110px var(--gutter) 0;display:grid;gap:14px;position:relative;z-index:2}
.track{display:flex;flex:1;will-change:transform}
.slide{flex:0 0 100vw;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--gutter);gap:40px}
.slide__ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(90px,21vw,360px);white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(244,244,242,.09);pointer-events:none;
  background:url(../img/traforo-fori.png) center/260px auto repeat;-webkit-background-clip:text;background-clip:text;opacity:.06}
.slide__img{height:min(68vh,640px);width:auto;justify-self:center;position:relative;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));transform-style:preserve-3d;transition:transform .6s var(--ease)}
.slide__txt{position:relative;z-index:1;display:grid;gap:16px;max-width:440px}
.slide__txt h3{font-size:clamp(40px,4.4vw,72px)}
.slide__txt .cat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)!important}
.slide__img--sm{height:min(52vh,470px)}
.slide__img--wide{height:auto;width:min(40vw,640px);max-height:66vh;object-fit:contain}
.slide__txt p{color:#cfcfcb}
.spec{font-size:13px;color:var(--muted)!important}
.slide__price{font-size:15px}
.slide__price .mono{font-size:22px;font-weight:700;color:var(--ink)}
.track__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;height:1px;background:var(--line)}
.track__bar span{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left}
@media (max-width:760px){
  .family__head{padding-top:84px}
  .slide{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:10px;padding-bottom:60px}
  .slide__img,.slide__img--sm{height:36vh}
  .slide__img--wide{height:auto;width:82vw;max-height:36vh}
  .slide__ghost{display:none}
  .slide__txt{gap:10px}
  .slide__txt p:not(.spec):not(.slide__price){font-size:15px}
}

/* ---------- PELLET ---------- */
.pellet{position:relative;min-height:100vh;background:#100f0e;overflow:hidden;display:grid}
.pellet__canvas{position:absolute;inset:0;width:100%;height:100%}
.pellet__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr minmax(320px,480px);gap:40px;align-items:end;padding:140px var(--gutter) 100px;background:linear-gradient(90deg,rgba(16,15,14,.85),transparent 55%)}
.pellet__intro{display:grid;gap:22px;align-self:start}
.ladder{background:rgba(16,15,14,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);padding:28px;display:grid;gap:22px}
.ladder__q{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ladder__opts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.ladder__opts button{padding:14px 8px;font-weight:700;font-size:14px;transition:background .3s,color .3s}
.ladder__opts button+button{border-left:1px solid var(--line)}
.ladder__opts button[aria-checked="true"]{background:var(--yellow);color:var(--yellow-ink)}
.ladder__out{display:grid;gap:10px}
.ladder__out div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px}
.ladder__out .lbl{font-size:12px;color:var(--muted)}
.ladder__out div{gap:12px}
.ladder__out b{font-size:clamp(22px,2.2vw,30px);white-space:nowrap} /* il prezzo non va mai a capo */
.ladder__out div:first-child b{color:var(--yellow);font-size:clamp(30px,3.2vw,44px)}
.ladder__bars{display:flex;gap:6px;align-items:end;height:46px}
.ladder__bars i{flex:1;height:calc(var(--h)*100%);background:var(--steel-2);transition:background .3s}
.ladder__bars i.is-on{background:var(--yellow)}
.ladder__cta{display:flex;flex-wrap:wrap;gap:10px}
.ladder__cta .btn{height:50px;padding:0 18px;font-size:14px}
/* acquisto sospeso: pulsanti visibili ma spenti, prezzi invariati */
.ladder__cta .btn:disabled{background:transparent;color:var(--muted);border:1px dashed rgba(244,244,242,.28);cursor:not-allowed}
.ladder__cta .btn:disabled::before{display:none}
.ladder__off{font:500 13px/1.5 var(--mono);color:#cfcfcb;border-left:2px solid var(--yellow);padding:2px 0 2px 12px;margin:0}
.ladder__off a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;display:inline-block;padding:4px 0}
@media (max-width:900px){
  .pellet__inner{grid-template-columns:1fr;padding-top:110px;background:linear-gradient(0deg,rgba(16,15,14,.95) 40%,transparent)}
  .ladder{padding:20px}
}

/* ---------- PERCORSI ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;min-height:90vh;background:var(--void)}
.path{position:relative;overflow:hidden;display:grid;align-content:end;gap:16px;padding:80px var(--gutter);border-right:1px solid var(--line);transition:background .5s}
.path img{position:absolute;right:-4%;top:8%;height:70%;width:auto;opacity:.22;transition:opacity .6s,transform .8s var(--ease);filter:grayscale(.3)}
.path:hover img{opacity:.55;transform:translateY(-12px) scale(1.03)}
.path>*:not(img){position:relative}
.path p:not(.kicker){max-width:40ch;color:#cfcfcb}
.path:hover{background:#121214}
.path--pro .kicker::before{background:var(--ink)}
.path__links{display:flex;flex-wrap:wrap;gap:14px 24px}
.path__links .link-arrow{padding-top:6px}
@media (max-width:760px){.paths{grid-template-columns:1fr}.path{min-height:70vh;border-right:0;border-bottom:1px solid var(--line)}}