/* MUTO — sistema: carta calda, inchiostro quasi nero, legno; Cormorant per la voce, Jost per l'interfaccia */
:root{
  --carta:#F3EEE4;
  --carta-2:#EAE3D6;
  --inchiostro:#1C1A17;
  --notte:#161513;
  --notte-2:#1F1D1A;
  --grigio:#7A7369;
  --legno:#D6B68C;
  --legno-2:#C29A6A;
  --bruciato:#3A2416;
  --serif:"Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans:"Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --gut:max(20px, 5vw);
  --ease:cubic-bezier(.22,.61,.12,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--carta);color:var(--inchiostro);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic;font-weight:300}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(40px,6vw,92px);letter-spacing:-.01em}
h3{font-size:32px}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;margin:0 0 22px;font-weight:400;color:var(--grigio)}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;padding:18px 34px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.btn:hover{background:var(--inchiostro);color:var(--carta)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
svg[aria-label="MUTO"]{display:block;width:100%;height:auto}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--notte);color:var(--carta);display:grid;place-items:center;pointer-events:none}
.intro-logo{width:min(420px,64vw)}
.intro .logo-o{stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.intro path[fill="currentColor"]{opacity:0}
.no-js .intro{display:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gut) 22px;color:var(--carta);mix-blend-mode:difference;transition:background-color .6s var(--ease),padding .6s var(--ease),backdrop-filter .6s var(--ease)}
/* durante lo scroll: barra scura leggera e sfocata, testo sempre leggibile */
.nav.is-scrolled{mix-blend-mode:normal;background:rgba(22,21,19,.62);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);padding-top:calc(15px + env(safe-area-inset-top,0px));padding-bottom:15px;box-shadow:0 1px 0 rgba(243,238,228,.06)}
.nav-logo{width:104px;justify-self:start}
.nav-links{display:flex;gap:36px;font-size:12px;letter-spacing:.26em;text-transform:uppercase}
.nav-links a,.nav-cart{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .6s var(--ease)}
.nav-links a:hover::after{right:0}
.nav-cart{justify-self:end;font-size:12px;letter-spacing:.26em;text-transform:uppercase}
.cart-count{display:inline-grid;place-items:center;min-width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:11px;letter-spacing:0;margin-left:6px}
@media (max-width:860px){.nav-links{display:none}.nav{grid-template-columns:1fr 1fr}}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--notte);color:var(--carta);display:grid;align-items:end}
.hero-media{position:absolute;inset:-6% 0 0 0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:30% 50%;filter:saturate(.75) contrast(1.05)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,21,19,.82) 0%,rgba(22,21,19,.45) 42%,rgba(22,21,19,0) 70%),linear-gradient(180deg,rgba(22,21,19,.5) 0%,rgba(22,21,19,0) 30%,rgba(22,21,19,.7) 100%)}
.hero-copy{position:relative;padding:0 var(--gut) clamp(56px,10vh,120px);max-width:1100px}
.hero .eyebrow{color:rgba(243,238,228,.7)}
.hero-title{font-size:clamp(56px,10.5vw,176px);letter-spacing:-.02em;line-height:.92}
.hero-title span,.hero-title em{display:inline-block}
.hero-sub{max-width:46ch;margin:28px 0 36px;color:rgba(243,238,228,.82)}
.hero-scroll{position:absolute;right:var(--gut);bottom:40px;width:1px;height:72px;background:rgba(243,238,228,.25);overflow:hidden}
.hero-scroll span{position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--carta);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{to{top:110%}}

/* ---------- manifesto ---------- */
.manifesto{padding:clamp(120px,22vh,240px) var(--gut);display:grid;place-items:center;color:var(--carta);position:relative;overflow:hidden;isolation:isolate;background:#1E140D}
/* noce scuro: scorre più lento del testo (parallasse) e si scurisce mentre si legge */
.manifesto::before{content:"";position:absolute;inset:-18% 0;z-index:-2;background:url("../assets/legno/noce-scuro.webp") center/cover no-repeat;transform:translate3d(0,var(--py,0%),0);will-change:transform}
.manifesto::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 45%,rgba(10,6,3,calc(var(--buio,.2) * .6)),rgba(10,6,3,calc(var(--buio,.2) + .25)))}
.manifesto-text{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.4vw,68px);line-height:1.18;max-width:20ch;margin:0;text-align:center;text-wrap:balance}
.manifesto-text .w{opacity:.2;transition:none}

/* ---------- stage 3D ---------- */
.stage{background:var(--notte);color:var(--carta)}
.stage-pin{height:100svh;min-height:640px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:4vw;padding:0 var(--gut);overflow:hidden}
.stage .eyebrow{color:rgba(243,238,228,.55)}
.stage-title{font-size:clamp(40px,5.2vw,84px)}
.stage-month{font-family:var(--serif);font-size:28px;margin:34px 0 26px;display:flex;gap:14px;align-items:baseline}
.stage-month .m-year{font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:rgba(243,238,228,.5)}
.coll-switch{display:flex;flex-wrap:wrap;gap:8px}
.coll-switch button{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;padding:12px 18px;background:transparent;color:rgba(243,238,228,.6);border:1px solid rgba(243,238,228,.2);cursor:pointer;transition:all .4s var(--ease)}
.coll-switch button[aria-selected="true"],.coll-switch button:hover{color:var(--carta);border-color:var(--carta)}

.scene{background:radial-gradient(46% 52% at 50% 46%,rgba(214,182,140,.16),rgba(214,182,140,0) 70%);--W:330px;--CW:330px;--CH:465px;perspective:1800px;display:grid;place-items:center;height:100%}
.obj{position:relative;width:var(--W);height:calc(var(--CH) + 40px);transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-24deg);will-change:transform}
.base{position:absolute;left:50%;bottom:0;width:0;height:0;transform-style:preserve-3d}
/* facce dei volumi: texture ricavate dalle foto del prototipo */
.face{position:absolute;left:0;top:0;transform-origin:50% 50%;backface-visibility:hidden;background-color:#C9AE8A;background-repeat:repeat-x}
.face::after{content:"";position:absolute;inset:0;background:var(--shade,transparent);pointer-events:none}
.face.f-top{background-image:linear-gradient(rgba(214,170,110,.18),rgba(214,170,110,.18)),url("../assets/legno/venatura-top.jpg");background-size:auto,auto 100%;--shade:linear-gradient(180deg,rgba(255,246,230,.10),rgba(0,0,0,.04))}
.face.f-front{background-image:url("../assets/legno/venatura-front.jpg");background-size:auto 100%;--shade:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.16))}
.face.f-back{background-image:url("../assets/legno/venatura-front.jpg");background-size:auto 100%;--shade:rgba(0,0,0,.42)}
.face.f-end{background-image:linear-gradient(90deg,rgba(150,104,60,.35),rgba(150,104,60,.35)),url("../assets/legno/venatura-top.jpg");background-size:auto,auto 300%;--shade:rgba(0,0,0,.30)}
.face.f-end.r{--shade:rgba(0,0,0,.12)}
.face.f-in{--shade:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.72))}
.face.f-floor{background:#3b2817}
.face.f-front.lip{display:grid;place-items:center}
.nfc-hole{position:absolute;border-radius:50%;background:radial-gradient(circle at 50% 50%,#c98a3c 0 22%,#b9772f 23% 60%,#8a5a2a 61% 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.18);opacity:.9}
/* incisione: il file laser da 30 mm usato come maschera, colore legno bruciato */
.engrave{display:block;justify-self:start;aspect-ratio:30/4.979;background:var(--bruciato);opacity:.88;mix-blend-mode:multiply;filter:blur(.2px);position:relative;z-index:1;-webkit-mask:url("../assets/logo-muto-laser-30mm.svg?v=3") center/contain no-repeat;mask:url("../assets/logo-muto-laser-30mm.svg?v=3") center/contain no-repeat}
.cards{position:absolute;left:calc((var(--W) - var(--CW))/2);bottom:0;width:var(--CW);height:var(--CH);transform-style:preserve-3d}
.card{position:absolute;inset:0;transform-origin:50% 100%;transform:rotateX(10deg);backface-visibility:hidden;box-shadow:0 0 0 1px rgba(243,238,228,.10),0 30px 60px -20px rgba(0,0,0,.7)}
.card,.card img{border-radius:calc(var(--CW) * .038)}  /* cartoncini con angoli smussati (~4 mm su 105) */
.card img{width:100%;height:100%;object-fit:cover}
.shadow{position:absolute;left:-10%;right:-10%;bottom:-60px;height:120px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,0));transform:rotateX(90deg);transform-origin:50% 100%;filter:blur(10px);pointer-events:none}
@media (max-width:860px){
  .stage-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding-top:100px;gap:0}
  .stage-month{margin:18px 0 14px}
  .scene{--W:210px;--CW:210px;--CH:296px}
}

/* ---------- suggerimento di scorrimento + avanzamento mesi ---------- */
.stage-pin{position:relative}
.m-count{font-family:var(--sans);font-size:11px;letter-spacing:.24em;color:rgba(243,238,228,.45);margin-left:auto}
.m-count b{font-weight:400;color:var(--carta)}
.stage-month{max-width:340px}
.m-prog{max-width:340px;height:1px;background:rgba(243,238,228,.16);margin:-14px 0 30px;overflow:hidden}
.m-prog i{display:block;height:100%;width:100%;background:var(--legno);transform-origin:0 50%;transform:scaleX(calc(1/12))}
.scroll-hint{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;color:rgba(243,238,228,.75);font-size:11px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease);z-index:3}
.scroll-hint.is-hidden{opacity:0;transform:translateX(-50%) translateY(10px)}
.hint-mouse{position:relative;width:20px;height:32px;border:1px solid currentColor;border-radius:11px;flex:none}
.hint-mouse i{position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:currentColor;animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px)}25%{opacity:1}70%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(11px)}}
.hint-touch{display:none;position:relative;width:22px;height:40px;flex:none}
.hint-touch::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:linear-gradient(rgba(243,238,228,.5),rgba(243,238,228,0))}
.hint-touch i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:1px solid currentColor;background:rgba(243,238,228,.22);animation:swipe 1.9s var(--ease) infinite}
@keyframes swipe{0%{opacity:0;transform:translateY(14px) scale(.8)}20%{opacity:1;transform:translateY(12px) scale(1)}75%{opacity:1;transform:translateY(-12px) scale(1)}100%{opacity:0;transform:translateY(-14px) scale(.9)}}
.h-mob{display:none}
@media (hover:none) and (pointer:coarse){
  .hint-mouse,.h-desk{display:none}
  .hint-touch{display:block}
  .h-mob{display:inline}
}
@media (max-width:860px){
  .stage-pin{grid-template-rows:auto auto 1fr}
  .scroll-hint{position:static;transform:none;margin-top:22px;font-size:10px;letter-spacing:.2em}
  .scroll-hint.is-hidden{transform:translateY(6px)}
  .m-prog{margin:-8px 0 18px}
}
@media (prefers-reduced-motion:reduce){.hint-mouse i,.hint-touch i{animation:none}}

/* ---------- collezione ---------- */
.collection,.refill{padding:clamp(110px,16vh,200px) var(--gut)}
.sec-head{max-width:900px;margin-bottom:72px}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.product{display:grid;gap:26px;grid-template-rows:auto 1fr}
.p-img{aspect-ratio:4/5;background:var(--carta-2);display:grid;place-items:center;overflow:hidden}
.p-img img{width:58%;border-radius:6px;box-shadow:0 30px 60px -30px rgba(28,26,23,.45);transition:transform 1.2s var(--ease)}
.product:hover .p-img img{transform:translateY(-8px) rotate(-1deg)}
/* scheda con foto vera: riempie il riquadro, al passaggio un lento avvicinamento */
.p-img.photo img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;transition:transform 1.6s var(--ease)}
.product:hover .p-img.photo img{transform:scale(1.04)}
/* seconda angolazione che compare al passaggio */
.p-img.has-alt{position:relative}
.p-img.has-alt .alt{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.product:hover .p-img.has-alt .alt{opacity:1}
.p-info{display:grid;gap:10px;grid-template-rows:auto 1fr auto auto;align-content:start}  /* prezzo e pulsante allineati tra le schede */
.p-info p{margin:0;color:var(--grigio);max-width:38ch}
.p-info .price{font-family:var(--serif);font-size:24px;color:var(--inchiostro);margin:6px 0 10px}
.p-info .btn{justify-self:start;padding:14px 26px}
@media (max-width:860px){.products{grid-template-columns:1fr}}

/* ---------- carte ---------- */
.papers{display:grid;grid-template-columns:1fr 1fr}
.paper{padding:clamp(70px,12vh,140px) var(--gut);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:40px;align-items:center}
.paper img{border-radius:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.paper p{color:inherit;opacity:.72;max-width:34ch}
.paper-ham p{opacity:.9}
.paper-black{background:var(--notte-2) url("../assets/foto/carta-nera.webp?v=3") center/cover no-repeat;color:var(--carta)}  /* cartoncino nero vero come sfondo */
.paper-ham{background:var(--carta-2) url("../assets/foto/carta-martellato.webp") center/cover no-repeat}  /* la carta martellata vera come sfondo */
@media (max-width:1000px){.papers{grid-template-columns:1fr}}
@media (max-width:520px){.paper{grid-template-columns:1fr}.paper img{width:70%}}

/* ---------- nfc ---------- */
.nfc{background:var(--notte);color:var(--carta);padding:clamp(110px,16vh,200px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6vw;align-items:center}
.nfc{position:relative;overflow:hidden;isolation:isolate}
.nfc::before{content:"";position:absolute;z-index:-1;left:76%;top:50%;width:max(1500px,115vw);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg));background:url("../assets/legno/anelli-tronco.svg") center/contain no-repeat;opacity:.5;-webkit-mask:radial-gradient(closest-side,#000 35%,transparent 100%);mask:radial-gradient(closest-side,#000 35%,transparent 100%);pointer-events:none}  /* sezione di tronco dietro al telefono */
.nfc .eyebrow{color:rgba(243,238,228,.55)}
.nfc-copy p:not(.eyebrow){max-width:46ch;opacity:.78;margin-top:30px}
.phone{width:290px;aspect-ratio:9/19;border-radius:44px;padding:12px;background:#0d0c0b;box-shadow:0 0 0 1px rgba(243,238,228,.12),0 60px 120px -40px rgba(0,0,0,.9)}
.phone-screen{width:100%;height:100%;border-radius:34px;background:var(--carta);color:var(--inchiostro);overflow:hidden;display:grid;align-items:center}
.cert{padding:30px 26px;display:grid;gap:16px;text-align:center}
.cert-logo{width:120px;margin:0 auto}
.cert-n{font-family:var(--serif);font-size:26px;margin:4px 0}
.cert dl{margin:0;display:grid;gap:10px;text-align:left;border-top:1px solid #d9d1c3;padding-top:16px}
.cert dl div{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.cert dt{color:var(--grigio)}
.cert dd{margin:0}
.cert-care{font-size:12px;color:var(--grigio);margin:0;border-top:1px solid #d9d1c3;padding-top:14px}
.cert-btn{font-size:10px;letter-spacing:.24em;text-transform:uppercase;border:1px solid currentColor;padding:12px}
@media (max-width:860px){.nfc{grid-template-columns:1fr}.phone{justify-self:center}}

/* ---------- atelier ---------- */
.atelier{display:grid;grid-template-columns:1.1fr 1fr;min-height:90vh}
.atelier-img{position:relative;overflow:hidden}
.atelier-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.ph{background:repeating-linear-gradient(135deg,var(--carta-2) 0 14px,#e3dbcc 14px 15px);display:grid;place-items:center;color:var(--grigio);font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:20px}
.atelier-copy{padding:clamp(80px,12vh,160px) var(--gut);align-self:center}
.atelier-copy p:not(.eyebrow){max-width:44ch;color:var(--grigio);margin-top:30px}
@media (max-width:860px){.atelier{grid-template-columns:1fr}.atelier-img{min-height:60vh}}

/* ---------- ricariche ---------- */
.refill{background:var(--carta-2)}
.refill-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.refill-card{background:var(--carta);border:1px solid rgba(28,26,23,.08);display:grid;grid-template-rows:auto 1fr}
.refill-visual{height:clamp(300px,30vw,420px);position:relative;overflow:hidden;background:#E3DACB}
/* calendari a ventaglio */
.refill-cal img{position:absolute;left:50%;top:54%;width:clamp(150px,13vw,200px);border-radius:7px;box-shadow:0 26px 50px -26px rgba(28,26,23,.6);transform:translate(-50%,-50%) rotate(var(--r)) translateX(var(--x));transition:transform .9s var(--ease)}
.refill-cal img:nth-child(1){--r:-11deg;--x:-58%}
.refill-cal img:nth-child(2){--r:9deg;--x:58%}
.refill-cal img:nth-child(3){--r:0deg;--x:0%}
.refill-card:hover .refill-cal img:nth-child(1){--r:-15deg;--x:-78%}
.refill-card:hover .refill-cal img:nth-child(2){--r:13deg;--x:78%}
/* blocchi to-do in fila */
.refill-todo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);align-items:center;padding:0 clamp(18px,2.4vw,34px)}
.refill-todo figure{margin:0;display:grid;gap:10px;transition:transform .7s var(--ease)}
.refill-todo img{background:#fff;border-radius:6px;box-shadow:0 20px 40px -24px rgba(28,26,23,.55)}
.refill-todo figure:hover{transform:translateY(-8px)}
.refill-todo figcaption{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio);text-align:center}
.refill-copy{padding:clamp(28px,3vw,48px)}
.refill-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--legno-2);margin:0 0 16px;font-weight:400}
.refill-copy h3{font-size:clamp(28px,2.6vw,40px)}
.refill-copy > p:not(.refill-kicker){color:var(--grigio);max-width:44ch;margin:18px 0 0}
.refill-tags{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.refill-tags li{font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border:1px solid rgba(28,26,23,.25);border-radius:999px}
.refill-spec{margin:28px 0 0;border-top:1px solid rgba(28,26,23,.12)}
.refill-spec div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid rgba(28,26,23,.12);font-size:15px}
.refill-spec dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio);padding-top:3px}
.refill-spec dd{margin:0}
@media (max-width:900px){.refill-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{background:var(--notte);color:var(--carta);padding:120px var(--gut) calc(60px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;gap:10px;text-align:center}
.foot-logo{width:min(560px,80vw);margin-bottom:30px}
.foot p{margin:0;font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
.foot .foot-small{letter-spacing:.1em;text-transform:none;opacity:.35}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro{display:none}
  .manifesto-text .w{opacity:1!important}
}

/* ---------- calendario personalizzato (home) ---------- */
.custom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center;padding:clamp(110px,16vh,190px) var(--gut);background:var(--carta)}
.custom-visual{position:relative;height:clamp(380px,40vw,560px)}
.custom-visual img{position:absolute;left:50%;top:50%;width:clamp(190px,17vw,250px);border-radius:8px;box-shadow:0 34px 60px -30px rgba(28,26,23,.55),0 1px 3px rgba(28,26,23,.08);transform:translate(-50%,-50%) rotate(var(--r)) translateX(var(--x));transition:transform 1s var(--ease)}
.custom-visual img:nth-child(1){--r:12deg;--x:62%}
.custom-visual img:nth-child(2){--r:-10deg;--x:-62%}
.custom-visual img:nth-child(3){--r:0deg;--x:0%}
.custom:hover .custom-visual img:nth-child(1){--r:15deg;--x:76%}
.custom:hover .custom-visual img:nth-child(2){--r:-13deg;--x:-76%}
.custom-copy p:not(.eyebrow){color:var(--grigio);max-width:44ch;margin:28px 0 36px}
@media (max-width:900px){.custom{grid-template-columns:1fr}.custom-visual{height:420px}}