:root{
  --ink:#143A22;
  --ink-2:#1C4A2C;
  --field:#FFFFFF;
  --paper:#F3F5EE;
  --leaf:#2E7D4F;
  --fresh:#A6CE39;
  --sun:#E07B21;
  --stone:#6B7A6F;
  --line:rgba(20,58,34,.14);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --display:"Outfit",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --pad:clamp(20px,4.4vw,108px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--field);color:var(--ink);font-family:var(--body);
  font-size:clamp(15px,.95vw,18.5px);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
/* l'ombra viene applicata solo a immagine decodificata: prima il browser
   non conosce il contorno ritagliato e disegnerebbe un rettangolo */
img:not(.ld){filter:none!important}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:2px}

/* ---------- utility ---------- */
.wrap{max-width:1760px;margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);display:flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.dark .eyebrow{color:var(--fresh)}
h2.big{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,6vw,6.6rem);line-height:.96;letter-spacing:-.025em;
}
.lead{font-size:clamp1rem,1.4vw,1.4rem);color:var(--stone);max-width:46ch}
.dark .lead{color:rgba(241,243,234,.72)}

/* reveal */
.r{opacity:0;transform:translateY(26px);
   transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.r.in{opacity:1;transform:none}
.r-img{clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-in-out)}
.r-img.in{clip-path:inset(0 0 0 0)}
.lines span{display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em}
.lines span i{
  display:block;font-style:normal;transform:translateY(105%);
  transition:transform .6s var(--ease-out)
}
.lines.in span i{transform:none}
.lines.in span:nth-child(2) i{transition-delay:.09s}
.lines.in span:nth-child(3) i{transition-delay:.18s}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:13px var(--pad);
  
  mix-blend-mode:normal;
}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);opacity:0;
  transition:opacity .2s var(--ease-out)}
.hdr.solid::before{opacity:1}
.hdr.menuopen::before{opacity:0}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand img{width:auto;height:clamp(24px,2.5vw,32px);display:block}
.brand b{font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:1.22rem;text-transform:lowercase}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px)}
.nav a{font-size:.83rem;font-weight:500;color:var(--ink);
  position:relative;padding-block:4px;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--sun);transform:scaleX(0);transform-origin:left;
  transition:transform .2s var(--ease-out)}
.nav a:hover{color:var(--sun)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:inherit}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;
  transition:transform .22s var(--ease-out),opacity .18s var(--ease-out)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.pill{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid currentColor;border-radius:100px;padding:9px 16px;
  transition:background .3s,color .3s,border-color .3s
}
.nav .pill{color:var(--leaf)}
.nav .pill:hover{background:var(--leaf);border-color:var(--leaf);color:var(--field)}
.nav .pill::after{display:none}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;background:var(--field);color:var(--ink);
  display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(40px,7vh,90px)
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 85% at 78% 18%,rgba(46,125,79,.13),transparent 62%),
             radial-gradient(90% 70% at 8% 92%,rgba(224,123,33,.10),transparent 60%);
}
.hero-grid{position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(rgba(20,58,34,.12) 1px,transparent 1px);
  background-size:100% 96px;
  mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent)}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2.9rem,10.2vw,12rem);line-height:.86;text-transform:lowercase
}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero-sub{display:flex;flex-wrap:wrap;gap:26px 60px;align-items:flex-end;
  margin-top:clamp(24px,4vh,46px)}
.hero-sub p{max-width:38ch;color:var(--stone);font-size:clamp(.95rem,1.25vw,1.32rem)}
.specs{display:flex;gap:26px;flex-wrap:wrap}
.spec b{display:block;font-family:var(--display);font-size:clamp(1.5rem,1.9vw,2.2rem);font-weight:600;
  letter-spacing:-.02em}
.spec span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leaf)}
.hero-pack{position:absolute;z-index:2;pointer-events:none;
  right:clamp(4px,2.4vw,72px);top:clamp(52px,8vh,104px);
  width:min(53%,980px);height:min(72%,860px)}
.hero-pack img{position:absolute;display:block;height:auto}
.p-scarola{left:0;top:5%;width:47%;
  filter:drop-shadow(0 26px 36px rgba(20,58,34,.2))}
.p-zucca{right:1%;top:0;width:46%;
  filter:drop-shadow(0 32px 44px rgba(20,58,34,.26))}
.p-anguria{left:11%;bottom:0;width:68%;
  filter:drop-shadow(0 30px 40px rgba(20,58,34,.3))}
.scrollcue{position:absolute;left:var(--pad);bottom:22px;z-index:4;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone);display:flex;align-items:center;gap:10px}
.scrollcue i{display:block;width:1px;height:34px;background:rgba(20,58,34,.18);
  position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--leaf);
  animation:cue 2.1s infinite var(--ease-in-out)}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:var(--field);padding:15px 0;overflow:hidden}
.marquee ul{display:flex;gap:56px;list-style:none;width:max-content;
  animation:slide 34s linear infinite}
.marquee li{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;display:flex;align-items:center;gap:56px;white-space:nowrap}
.marquee li::after{content:"●";font-size:.5em;opacity:.55}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sezione gamme ---------- */
.gamme{padding:clamp(70px,11vh,140px) 0 clamp(50px,8vh,100px)}
.sec-head{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;
  align-items:flex-end;margin-bottom:clamp(34px,5vh,64px)}
.cards{display:grid;gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(6,1fr)}
.card{
  position:relative;grid-column:span 2;background:var(--paper);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  min-height:clamp(300px,32vw,560px);display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(18px,2vw,30px);isolation:isolate;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)
}

.card.wide{grid-column:span 3}
.card figure{position:absolute;inset:0;display:grid;place-items:center;z-index:-1;
  padding:14% 12% 26%}
.card figure img{width:100%;height:100%;object-fit:contain;
  transition:transform .25s var(--ease-out)}

.card::before{content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:-1;
  background:linear-gradient(to top,var(--paper) 26%,rgba(251,252,247,.75) 55%,transparent)}
.card h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.25rem,2vw,2.35rem);line-height:1.05}
.card p{color:var--stone);font-size:clamp.9rem,1vw,1.08rem);margin-top:7px;max-width:34ch}
.tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--leaf);margin-bottom:10px;display:block}
.card .go{margin-top:16px;display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:600;color:var(--leaf)}
.card .go svg{transition:transform .18s var(--ease-out)}

.card.dark{background:var(--ink-2);border-color:transparent;color:var(--field)}
.card.dark::before{background:linear-gradient(to top,var(--ink-2) 26%,rgba(19,41,28,.7) 55%,transparent)}
.card.dark p{color:rgba(241,243,234,.7)}
.card.dark .tag,.card.dark .go{color:var(--fresh)}

/* ---------- filiera (scroll orizzontale) ---------- */
.filiera{background:var(--ink);color:var(--field);position:relative}
.filiera .eyebrow{color:var(--fresh)}
.filiera .stage{height:100svh;position:sticky;top:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.filiera .top p.sott{color:rgba(241,243,234,.72);margin-top:14px;max-width:60ch;
  font-size:clamp(.92rem,1.05vw,1.12rem)}
.filiera .top{padding:0 var(--pad);margin-bottom:clamp(22px,4vh,44px)}
.filiera h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.8rem,4.4vw,4.6rem);line-height:1;margin-top:12px}
.track{display:flex;gap:clamp(14px,1.6vw,26px);padding-inline:var(--pad);
  will-change:transform}
.step{
  flex:none;width:clamp(272px,30vw,540px);
  border:1px solid rgba(241,243,234,.14);border-radius:18px;color:var(--field);
  padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(155deg,rgba(241,243,234,.13),rgba(241,243,234,.04));
  min-height:clamp(370px,56vh,620px);
  transition:border-color .22s var(--ease-out),transform .22s var(--ease-out)
}

.step .n{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;color:var(--fresh)}
.step h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.2rem,1.9vw,2rem);line-height:1.05;margin-top:auto}
.step p{color:rgba(241,243,234,.7);font-size:clamp(.88rem,1vw,1.06rem)}
.step .val{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  border-top:1px solid rgba(241,243,234,.16);padding-top:13px;color:var(--fresh)}
.bar{height:2px;background:rgba(241,243,234,.18);margin:clamp(20px,3.5vh,38px) var(--pad) 0;
  position:relative}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--fresh);display:block}

/* ---------- horeca ---------- */
.horeca{background:var(--paper);color:var(--ink);overflow:hidden}
.horeca .inner{display:grid;grid-template-columns:1fr 1.02fr;align-items:center;
  gap:clamp(30px,5vw,80px);padding-block:clamp(60px,9vh,120px)}
.horeca ul{list-style:none;margin-top:26px;display:grid;gap:2px}
.horeca li{border-top:1px solid var(--line);padding:14px 0;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.horeca li span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--leaf);text-transform:uppercase;flex:none}
.horeca .art{position:relative}
.horeca .art img{border-radius:18px}
.btn{display:inline-flex;align-items:center;gap:11px;margin-top:32px;
  background:var(--leaf);color:#fff;border-radius:100px;
  padding:15px 26px;font-weight:600;font-size:.88rem;
  transition:transform .18s var(--ease-out),background .18s var(--ease-out)}

.ft .btn{background:var(--fresh);color:var(--ink)}
.ft .btn:hover{background:var(--sun);color:#fff}

/* ---------- numeri ---------- */
.numeri{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--line)}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.num b{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.4rem,5.4vw,5.8rem);line-height:.9;display:block;color:var(--leaf)}
.num span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);display:block;margin-top:12px;
  border-top:1px solid var(--line);padding-top:12px}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:var(--field);padding:clamp(56px,8vh,100px) 0 30px}
.ft-top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;
  align-items:flex-end;padding-bottom:44px;border-bottom:1px solid rgba(241,243,234,.16)}
.ft h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2rem,5.8vw,5.8rem);line-height:.92;text-transform:lowercase}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:38px;
  font-size:.86rem;color:rgba(241,243,234,.7)}
.ft-cols h5{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fresh);margin-bottom:14px;font-weight:400}
.ft-cols a{display:block;padding:4px 0;transition:color .3s}
.ft-cols a:hover{color:var(--sun)}
.ft-btm .bc{display:flex;align-items:center;gap:15px}
.ft-btm .bc img{height:clamp(34px,4vw,46px);width:auto;display:block;opacity:.92}
.ft-btm{margin-top:44px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  color:rgba(241,243,234,.45);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}


/* ---------- animazioni dei 5 passaggi (assonometria) ---------- */
.anim{height:clamp150px,21vh,280px);margin:8px 0 4px;perspective:820px}
.anim svg{width:100%;height:100%;display:block;overflow:visible}
.anim *{animation-play-state:paused}
.step.live .anim *{animation-play-state:running}

/* materiali: ogni faccia prende una luce diversa */
.f-top{fill:rgba(255,255,255,.93)}
.f-left{fill:rgba(255,255,255,.5)}
.f-right{fill:rgba(255,255,255,.27)}
.f-dark{fill:rgba(8,28,16,.55)}
.f-acc{fill:var(--fresh)}
.f-acc2{fill:#8CB235}
.hi{fill:#fff;opacity:.5}

/* la scena ruota lentamente su sé stessa: è ciò che dà il volume */
@keyframes vt-tilt{0%,100%{transform:rotateY(-9deg) rotateX(2deg)}
  50%{transform:rotateY(9deg) rotateX(-2deg)}}
.s3d{transform-style:preserve-3d;animation:vt-tilt 12s infinite ease-in-out}

/* 01 · conferimento */
@keyframes vt-fall3{
  0%{opacity:0;transform:translate(var(--dx),-160px) rotate(var(--r0)) scale(.78)}
  14%{opacity:1}
  56%{transform:translate(0,0) rotate(var(--r1)) scale(1)}
  66%{transform:translate(0,7px) rotate(var(--r1)) scale(1.14,.86)}
  78%{transform:translate(0,-4px) rotate(var(--r1)) scale(.97,1.05)}
  100%{opacity:1;transform:translate(0,0) rotate(var(--r1)) scale(1)}}
.drop3{animation:vt-fall3 3s infinite var(--ease-in-out)}
.dA{--dx:-20px;--r0:-42deg;--r1:-9deg}
.dB{--dx:14px;--r0:36deg;--r1:7deg;animation-delay:.45s}
.dC{--dx:-5px;--r0:62deg;--r1:12deg;animation-delay:.9s}
@keyframes vt-crate3{0%,48%{transform:none}56%{transform:translateY(5px) scaleY(.97)}
  66%,100%{transform:none}}
.crate3{transform-box:fill-box;transform-origin:center bottom;
  animation:vt-crate3 3s infinite}

/* 02 · cernita */
@keyframes vt-belt3{
  0%{opacity:0;transform:translate(-56px,29px) scale(1.18)}
  10%{opacity:1}86%{opacity:1}
  100%{opacity:0;transform:translate(126px,-66px) scale(.76)}}
.it3{animation:vt-belt3 3.8s infinite linear}
.b2{animation-delay:.95s}
.b4{animation-delay:2.85s}
@keyframes vt-rej3{
  0%{opacity:0;transform:translate(-56px,29px) scale(1.18)}
  10%{opacity:1}
  46%{transform:translate(26px,-13px) scale(1)}
  68%{transform:translate(56px,-64px) scale(1.04)}
  84%,100%{opacity:0;transform:translate(78px,-104px) scale(1.1)}}
.it3.bad{animation:vt-rej3 3.8s 1.9s infinite var(--ease-in-out)}
@keyframes vt-scan3{0%,100%{opacity:.16}50%{opacity:.8}}
.scan3{animation:vt-scan3 1.2s infinite}
@keyframes vt-run3{to{stroke-dashoffset:-60}}
.beltline{stroke-dasharray:15 15;animation:vt-run3 .95s infinite linear}

/* 03 · taglio e lavaggio */
@keyframes vt-blade3{0%,18%{transform:translateY(-46px)}
  32%{transform:translateY(34px)}46%,100%{transform:translateY(-46px)}}
.blade3{animation:vt-blade3 3s infinite var(--ease-in-out)}
@keyframes vt-hl3{0%,30%{transform:none}44%,84%{transform:translate(-19px,-10px)}
  100%{transform:none}}
@keyframes vt-hr3{0%,30%{transform:none}44%,84%{transform:translate(19px,10px)}
  100%{transform:none}}
.hl3{animation:vt-hl3 3s infinite var(--ease-out)}
.hr3{animation:vt-hr3 3s infinite var(--ease-out)}
@keyframes vt-bub3{0%{transform:translateY(0) scale(.6);opacity:0}
  25%{opacity:.9}100%{transform:translateY(-58px) scale(1);opacity:0}}
.bub3{animation:vt-bub3 2.4s infinite ease-out}
.u2{animation-delay:.7s}
.u3{animation-delay:1.4s}

/* 04 · atmosfera protettiva */
@keyframes vt-breathe3{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.bag3{transform-box:fill-box;transform-origin:center;
  animation:vt-breathe3 3.6s infinite ease-in-out}
@keyframes vt-orbit{
  0%{transform:translate(0,0) scale(1)}
  25%{transform:translate(38px,-10px) scale(.66)}
  50%{transform:translate(0,-19px) scale(.52)}
  75%{transform:translate(-38px,-10px) scale(.7)}
  100%{transform:translate(0,0) scale(1)}}
.mol3{animation:vt-orbit 5s infinite linear}
.o2{animation-delay:-1.25s}
.o3{animation-delay:-2.5s}
.o4{animation-delay:-3.75s}
@keyframes vt-shine3{0%{opacity:0;transform:translateX(-60px)}
  40%{opacity:.75}100%{opacity:0;transform:translateX(70px)}}
.shine3{animation:vt-shine3 3.6s infinite ease-in-out}

/* 05 · consegna */
@keyframes vt-road3{to{stroke-dashoffset:-96}}
.road3{stroke-dasharray:24 24;animation:vt-road3 1.1s infinite linear}
@keyframes vt-bob3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
.truck3{animation:vt-bob3 .85s infinite ease-in-out}
@keyframes vt-wheel3{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9)}}
.wh3{transform-box:fill-box;transform-origin:center;animation:vt-wheel3 .44s infinite}
@keyframes vt-speed{0%{opacity:0;transform:translateX(26px)}
  30%{opacity:.85}100%{opacity:0;transform:translateX(-40px)}}
.sp{animation:vt-speed 1s infinite linear}
.sp2{animation-delay:.33s}
.sp3{animation-delay:.66s}
@keyframes vt-cold3{0%,100%{opacity:.35;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.12)}}
.snow3{transform-box:fill-box;transform-origin:center;
  animation:vt-cold3 2.4s infinite ease-in-out}


/* ---------- scheda I gamma: composizione a due livelli ---------- */
.card--gamma{overflow:visible}
.card--gamma .scene{position:absolute;inset:0;z-index:-2;pointer-events:none}
.card--gamma .lay{position:absolute;opacity:0}
.card--gamma .lay img{width:100%;height:auto;display:block;
  transition:transform .22s var(--ease-out),filter .22s var(--ease-out)}
.l-lattuga{left:-2%;top:26%;width:62%}
.l-lattuga img{filter:drop-shadow(0 26px 30px rgba(20,58,34,.26))}
.l-scarola{right:-1%;top:2%;width:46%}
.l-scarola img{filter:drop-shadow(0 18px 26px rgba(20,58,34,.14))}

@keyframes vt-entra-a{from{opacity:0;transform:translate(-26px,34px) rotate(-9deg) scale(.94)}
  to{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1)}}
@keyframes vt-entra-b{from{opacity:0;transform:translate(30px,-40px) rotate(8deg) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(2deg) scale(1)}}
@keyframes vt-gal-a{0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-11px) rotate(-1.6deg)}}
@keyframes vt-gal-b{0%,100%{transform:translateY(0) rotate(2deg)}
  50%{transform:translateY(-16px) rotate(3.4deg)}}
.card--gamma.in .l-lattuga{animation:vt-entra-a 1.05s .1s both var(--ease-out),
  vt-gal-a 7.5s 1.2s infinite ease-in-out}
.card--gamma.in .l-scarola{animation:vt-entra-b 1.05s .3s both var(--ease-out),
  vt-gal-b 6.2s 1.4s infinite ease-in-out}




@media(max-width:1000px){
  .l-lattuga{left:-4%;top:30%;width:70%}
  .l-scarola{right:-3%;top:4%;width:52%}
}
@media (prefers-reduced-motion: reduce){
  /* si tengono opacità e colore, si tolgono spostamenti e cicli continui */
  *{animation-iteration-count:1!important}
  .s3d,.marquee ul,.scrollcue i::after,.anim *,
  .pack,.hero-pack img{animation:none!important}
  .r,.lines span i,.card--gamma .lay,.card--classici .lay,.card--mix .lay,
  .card--evoluta .lay,.card--frutta .lay,.hscene .lv{
    opacity:1!important;transform:none!important;animation:none!important}
  .r-img{clip-path:none!important}
  .card:hover,.rec-card:hover,.step:hover{transform:none!important}
}


/* ---------- linea professionale: chef + due vasconi GN ---------- */
.hscene{position:relative;aspect-ratio:1/.84}
.hscene .lv{position:absolute;opacity:0}
.hscene .lv img{width:100%;height:auto;display:block;
  transition:transform .22s var(--ease-out),filter .22s var(--ease-out)}
.h-chef{left:4%;top:0;width:90%;z-index:1}
.h-mel{right:-5%;top:33%;width:54%;z-index:2}
.h-mel img{filter:drop-shadow(0 16px 26px rgba(20,58,34,.24))}
.h-cia{left:-7%;bottom:0;width:68%;z-index:3}
.h-cia img{filter:drop-shadow(0 22px 32px rgba(20,58,34,.3))}

@keyframes vt-h1{from{opacity:0;transform:translate(24px,-22px) scale(.95)}
  to{opacity:1;transform:none}}
@keyframes vt-h2{from{opacity:0;transform:translate(34px,26px) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(1.5deg) scale(1)}}
@keyframes vt-h3{from{opacity:0;transform:translate(-32px,30px) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(-1.5deg) scale(1)}}
@keyframes vt-hg2{0%,100%{transform:translateY(0) rotate(1.5deg)}
  50%{transform:translateY(-10px) rotate(2.4deg)}}
@keyframes vt-hg3{0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-14px) rotate(-2.6deg)}}
.hscene.in .h-chef{animation:vt-h1 1s .05s both var(--ease-out)}
.hscene.in .h-mel{animation:vt-h2 1s .28s both var(--ease-out),
  vt-hg2 7s 1.3s infinite ease-in-out}
.hscene.in .h-cia{animation:vt-h3 1s .48s both var(--ease-out),
  vt-hg3 5.8s 1.5s infinite ease-in-out}




@media(max-width:1000px){.hscene{aspect-ratio:1/.78;margin-top:20px}
  .h-chef{left:2%;width:86%}.h-mel{right:-6%;top:36%}.h-cia{left:-8%}}
@media (prefers-reduced-motion: reduce){
  /* si tengono opacità e colore, si tolgono spostamenti e cicli continui */
  *{animation-iteration-count:1!important}
  .s3d,.marquee ul,.scrollcue i::after,.anim *,
  .pack,.hero-pack img{animation:none!important}
  .r,.lines span i,.card--gamma .lay,.card--classici .lay,.card--mix .lay,
  .card--evoluta .lay,.card--frutta .lay,.hscene .lv{
    opacity:1!important;transform:none!important;animation:none!important}
  .r-img{clip-path:none!important}
  .card:hover,.rec-card:hover,.step:hover{transform:none!important}
}


/* ---------- scheda classici pronti da cuocere ---------- */
.card--classici{overflow:visible}
.card--classici .scene{position:absolute;inset:0;z-index:-2;pointer-events:none}
.card--classici .lay{position:absolute;opacity:0}
.card--classici .lay img{width:100%;height:auto;display:block;
  transition:transform .22s var(--ease-out),filter .22s var(--ease-out)}
.c-zucchine{left:-6%;top:2%;width:60%;z-index:1}
.c-zucchine img{filter:drop-shadow(0 18px 26px rgba(20,58,34,.2))}
.c-zucca{right:-6%;top:16%;width:64%;z-index:2}
.c-zucca img{filter:drop-shadow(0 24px 32px rgba(20,58,34,.3))}

@keyframes vt-c1{from{opacity:0;transform:translate(-28px,-24px) rotate(-11deg) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(-6deg) scale(1)}}
@keyframes vt-c2{from{opacity:0;transform:translate(30px,28px) rotate(10deg) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(5deg) scale(1)}}
@keyframes vt-cg1{0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-12px) rotate(-4.4deg)}}
@keyframes vt-cg2{0%,100%{transform:translateY(0) rotate(5deg)}
  50%{transform:translateY(-16px) rotate(6.6deg)}}
.card--classici.in .c-zucchine{animation:vt-c1 1s .1s both var(--ease-out),
  vt-cg1 7.2s 1.2s infinite ease-in-out}
.card--classici.in .c-zucca{animation:vt-c2 1s .3s both var(--ease-out),
  vt-cg2 6s 1.4s infinite ease-in-out}



@media (prefers-reduced-motion: reduce){
  /* si tengono opacità e colore, si tolgono spostamenti e cicli continui */
  *{animation-iteration-count:1!important}
  .s3d,.marquee ul,.scrollcue i::after,.anim *,
  .pack,.hero-pack img{animation:none!important}
  .r,.lines span i,.card--gamma .lay,.card--classici .lay,.card--mix .lay,
  .card--evoluta .lay,.card--frutta .lay,.hscene .lv{
    opacity:1!important;transform:none!important;animation:none!important}
  .r-img{clip-path:none!important}
  .card:hover,.rec-card:hover,.step:hover{transform:none!important}
}


/* ---------- scheda mix pronti da cuocere (rotazioni speculari) ---------- */
.card--mix{overflow:visible}
.card--mix .scene{position:absolute;inset:0;z-index:-2;pointer-events:none}
.card--mix .lay{position:absolute;opacity:0}
.card--mix .lay img{width:100%;height:auto;display:block;
  transition:transform .22s var(--ease-out),filter .22s var(--ease-out)}
.m-benessere{right:-6%;top:2%;width:60%;z-index:1}
.m-benessere img{filter:drop-shadow(0 18px 26px rgba(20,58,34,.2))}
.m-cianfotta{left:-6%;top:16%;width:64%;z-index:2}
.m-cianfotta img{filter:drop-shadow(0 24px 32px rgba(20,58,34,.3))}

@keyframes vt-m1{from{opacity:0;transform:translate(28px,-24px) rotate(11deg) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(6deg) scale(1)}}
@keyframes vt-m2{from{opacity:0;transform:translate(-30px,28px) rotate(-10deg) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(-5deg) scale(1)}}
@keyframes vt-mg1{0%,100%{transform:translateY(0) rotate(6deg)}
  50%{transform:translateY(-13px) rotate(4.4deg)}}
@keyframes vt-mg2{0%,100%{transform:translateY(0) rotate(-5deg)}
  50%{transform:translateY(-17px) rotate(-6.6deg)}}
.card--mix.in .m-benessere{animation:vt-m1 1s .1s both var(--ease-out),
  vt-mg1 6.6s 1.2s infinite ease-in-out}
.card--mix.in .m-cianfotta{animation:vt-m2 1s .3s both var(--ease-out),
  vt-mg2 5.4s 1.4s infinite ease-in-out}



@media (prefers-reduced-motion: reduce){
  /* si tengono opacità e colore, si tolgono spostamenti e cicli continui */
  *{animation-iteration-count:1!important}
  .s3d,.marquee ul,.scrollcue i::after,.anim *,
  .pack,.hero-pack img{animation:none!important}
  .r,.lines span i,.card--gamma .lay,.card--classici .lay,.card--mix .lay,
  .card--evoluta .lay,.card--frutta .lay,.hscene .lv{
    opacity:1!important;transform:none!important;animation:none!important}
  .r-img{clip-path:none!important}
  .card:hover,.rec-card:hover,.step:hover{transform:none!important}
}


/* ---------- scheda I gamma evoluta (fondo scuro) ---------- */
.card--evoluta{overflow:visible}
.card--evoluta .scene{position:absolute;inset:0;z-index:-2;pointer-events:none}
.card--evoluta .lay{position:absolute;opacity:0}
.card--evoluta .lay img{width:100%;height:auto;display:block;
  transition:transform .22s var(--ease-out),filter .22s var(--ease-out)}
.e-brodo{right:0;top:8%;width:52%;z-index:1}
.e-brodo img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))}
.e-sedano{left:2%;top:34%;width:56%;z-index:2}
.e-sedano img{filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}

@keyframes vt-e1{from{opacity:0;transform:translate(30px,-26px) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(2deg) scale(1)}}
@keyframes vt-e2{from{opacity:0;transform:translate(-30px,30px) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(-2.5deg) scale(1)}}
@keyframes vt-eg1{0%,100%{transform:translateY(0) rotate(2deg)}
  50%{transform:translateY(-12px) rotate(3.2deg)}}
@keyframes vt-eg2{0%,100%{transform:translateY(0) rotate(-2.5deg)}
  50%{transform:translateY(-16px) rotate(-3.8deg)}}
.card--evoluta.in .e-brodo{animation:vt-e1 1s .1s both var(--ease-out),
  vt-eg1 7.4s 1.2s infinite ease-in-out}
.card--evoluta.in .e-sedano{animation:vt-e2 1s .3s both var(--ease-out),
  vt-eg2 6.1s 1.4s infinite ease-in-out}



/* ---------- scheda frutta tagliata ---------- */
.card--frutta{overflow:visible}
.card--frutta .scene{position:absolute;inset:0;z-index:-2;pointer-events:none}
.card--frutta .lay{position:absolute;left:2%;top:24%;width:96%;opacity:0;z-index:1}
.card--frutta .lay img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 34px rgba(20,58,34,.32));
  transition:transform .22s var(--ease-out),filter .22s var(--ease-out)}
@keyframes vt-f1{from{opacity:0;transform:translateY(38px) rotate(-5deg) scale(.9)}
  to{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}}
@keyframes vt-fg1{0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-14px) rotate(-.6deg)}}
.card--frutta.in .lay{animation:vt-f1 1.05s .12s both var(--ease-out),
  vt-fg1 6.4s 1.25s infinite ease-in-out}


@media (prefers-reduced-motion: reduce){
  /* si tengono opacità e colore, si tolgono spostamenti e cicli continui */
  *{animation-iteration-count:1!important}
  .s3d,.marquee ul,.scrollcue i::after,.anim *,
  .pack,.hero-pack img{animation:none!important}
  .r,.lines span i,.card--gamma .lay,.card--classici .lay,.card--mix .lay,
  .card--evoluta .lay,.card--frutta .lay,.hscene .lv{
    opacity:1!important;transform:none!important;animation:none!important}
  .r-img{clip-path:none!important}
  .card:hover,.rec-card:hover,.step:hover{transform:none!important}
}


/* ---------- ricette: striscia scorrevole ---------- */
.ricette{padding:clamp(64px,10vh,124px) 0;background:var(--paper);overflow:hidden}
.rec-head{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,3.5vw,70px);align-items:end;
  padding-bottom:clamp(24px,3vh,40px);border-bottom:1px solid var(--line);
  margin-bottom:clamp(24px,4vh,46px)}
.rec-head .side{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2vw,28px)}
.rec-head .side .lead{max-width:32ch;font-size:clamp(1.05rem,1.55vw,1.62rem);
  color:var(--ink);opacity:.72}
@media(max-width:900px){.rec-head{grid-template-columns:1fr}}
.rec-strip{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab;padding-bottom:26px;margin-bottom:-10px}
.rec-strip::-webkit-scrollbar{display:none}
.rec-strip.drag{cursor:grabbing;scroll-snap-type:none}
.rec-track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;
  padding:34px var(--pad) 0}
.rec-card{flex:none;position:relative;display:block;scroll-snap-align:start;
  width:clamp(206px,21vw,348px);aspect-ratio:3/4.15;border-radius:20px;
  overflow:hidden;background:var(--ink);isolation:isolate;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.rec-track .rec-card:nth-child(even){margin-top:36px}

.rec-card .ph{position:absolute;inset:0;z-index:0}
.rec-card .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s var(--ease-out)}

.rec-card.prod .ph{display:grid;place-items:center;padding:12% 16% 34%}
.rec-card.prod .ph img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.35))}
.rec-card.g1{background:linear-gradient(165deg,#3E9A5C,#16452A)}
.rec-card.g2{background:linear-gradient(165deg,#F0A03F,#B4560F)}
.rec-card.g3{background:linear-gradient(165deg,#7FB03A,#255A2E)}
.rec-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,32,19,.94) 6%,rgba(11,32,19,.42) 42%,transparent 68%)}
.rec-card .mark{position:absolute;top:13px;left:13px;z-index:3;
  width:36px;height:36px;border-radius:50%;background:#fff;display:grid;
  place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.rec-card .mark img{width:24px;height:24px;display:block}
.rec-card .go2{position:absolute;top:13px;right:13px;z-index:3;
  width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  display:grid;place-items:center;opacity:0;transform:scale(.7) rotate(-30deg);
  transition:.22s cubic-bezier(.2,1.4,.4,1);color:#fff}

.rec-card .info{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(15px,1.6vw,20px);color:#fff}
.rec-card .meta{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fresh);margin-bottom:8px;display:block}
.rec-card h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1rem,1.45vw,1.6rem);line-height:1.08}
.rec-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.chip{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.42);border-radius:100px;padding:4px 9px;
  color:rgba(255,255,255,.85)}
.rec-bar{height:2px;background:rgba(20,58,34,.13);position:relative;margin-top:8px}
.rec-bar i{position:absolute;inset:0 auto 0 0;width:14%;background:var(--leaf);display:block}
.rec-hint{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);margin-top:12px}

@media(max-width:760px){
  .rec-track .rec-card:nth-child(even){margin-top:22px}
  .rec-card{width:64vw}
}

/* ---------- schermi grandi (27" 2K e oltre) ---------- */
@media(min-width:1900px){
  .cards{gap:24px}
  .rec-track{gap:24px}
  .track{gap:30px}
  .horeca .inner{gap:clamp(60px,6vw,120px)}
  .ft-cols{gap:48px}
}


/* confezione del prodotto usato, appoggiata sulla foto della ricetta */
.rec-card .pack{position:absolute;right:9px;bottom:9px;z-index:3;width:33%;
  height:auto;display:block;transform:rotate(4deg);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));
  transition:transform .22s var(--ease-out)}
.rec-card.wp .info{padding-right:38%}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero-pack{width:60%;height:58%;top:clamp(46px,7vh,86px)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card,.card.wide{grid-column:span 1}
  .horeca .inner{grid-template-columns:1fr}
  .num-grid{grid-template-columns:repeat(2,1fr)}
  .ft-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .hero-pack{right:-3%;top:7vh;width:84%;height:36vh}
  .p-scarola{width:44%;top:2%}
  .p-zucca{width:43%}
  .p-anguria{width:64%;left:14%}
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;
    justify-content:center;gap:22px;transform:translateY(-100%);
    transition:transform .55s var(--ease-in-out);z-index:59}
  .nav.open{transform:none}
  .nav a{font-size:1.35rem;font-family:var(--display);font-weight:600;
    color:var(--field)!important}
  .nav .pill{font-family:var(--mono);font-size:.7rem;color:var(--fresh)!important}
  .burger{display:block;z-index:61;position:relative;color:var(--ink)}
  .hdr.solid .burger{color:var(--ink)}
  .hdr.menuopen .burger{color:var(--field)}
  .rec-grid{grid-template-columns:1fr;gap:12px}
  .rec{aspect-ratio:4/3.4}
  .step{width:80vw}
}
@media (prefers-reduced-motion: reduce){
  /* si tengono opacità e colore, si tolgono spostamenti e cicli continui */
  *{animation-iteration-count:1!important}
  .s3d,.marquee ul,.scrollcue i::after,.anim *,
  .pack,.hero-pack img{animation:none!important}
  .r,.lines span i,.card--gamma .lay,.card--classici .lay,.card--mix .lay,
  .card--evoluta .lay,.card--frutta .lay,.hscene .lv{
    opacity:1!important;transform:none!important;animation:none!important}
  .r-img{clip-path:none!important}
  .card:hover,.rec-card:hover,.step:hover{transform:none!important}
}

/* le animazioni al passaggio del mouse valgono solo con un puntatore vero:
   sul telefono un tocco genera un hover fasullo */
@media (hover: hover) and (pointer: fine){
  .rec-card:hover .pack{transform:rotate(0deg) translateY(-5px) scale(1.07)}
  .card:hover{transform:translateY(-7px);box-shadow:0 26px 50px -22px rgba(11,26,17,.4);
  border-color:transparent}
  .card:hover figure img{transform:scale(1.07) rotate(-1.5deg)}
  .card:hover .go svg{transform:translateX(6px)}
  .step:hover{border-color:var(--sun);transform:translateY(-6px)}
  .btn:hover{transform:translateY(-3px);background:var(--sun);color:#fff}
  /* al passaggio del mouse i due livelli si allontanano */
.card--gamma:hover .l-lattuga img{transform:translate(-14px,8px) scale(1.04);
  filter:drop-shadow(0 34px 38px rgba(20,58,34,.34))}
  .card--gamma:hover .l-scarola img{transform:translate(16px,-16px) scale(1.07);
  filter:drop-shadow(0 26px 34px rgba(20,58,34,.2))}
  .hscene:hover .h-cia img{transform:translate(-12px,6px) scale(1.05);
  filter:drop-shadow(0 30px 40px rgba(20,58,34,.36))}
  .hscene:hover .h-mel img{transform:translate(14px,-10px) scale(1.04)}
  .hscene:hover .h-chef img{transform:translate(8px,-10px) scale(1.03)}
  .card--classici:hover .c-zucchine img{transform:translate(-13px,-8px) scale(1.05);
  filter:drop-shadow(0 26px 32px rgba(20,58,34,.28))}
  .card--classici:hover .c-zucca img{transform:translate(15px,10px) scale(1.06);
  filter:drop-shadow(0 32px 40px rgba(20,58,34,.36))}
  .card--mix:hover .m-benessere img{transform:translate(13px,-8px) scale(1.05);
  filter:drop-shadow(0 26px 32px rgba(20,58,34,.28))}
  .card--mix:hover .m-cianfotta img{transform:translate(-15px,10px) scale(1.06);
  filter:drop-shadow(0 32px 40px rgba(20,58,34,.36))}
  .card--evoluta:hover .e-brodo img{transform:translate(14px,-10px) scale(1.05)}
  .card--evoluta:hover .e-sedano img{transform:translate(-14px,10px) scale(1.06);
  filter:drop-shadow(0 34px 42px rgba(0,0,0,.6))}
  .card--frutta:hover .lay img{transform:scale(1.07) rotate(1deg);
  filter:drop-shadow(0 34px 44px rgba(20,58,34,.4))}
  .rec-card:hover{transform:translateY(-10px);
  box-shadow:0 30px 50px -22px rgba(20,58,34,.5)}
  .rec-card:hover .ph img{transform:scale(1.09)}
  .rec-card:hover .go2{opacity:1;transform:none}
  .nav a:hover::after{transform:scaleX(1)}
}

/* ---------- rete di sicurezza ----------
   Se per qualsiasi motivo il JavaScript non parte, i contenuti restano
   visibili: le animazioni sono un di piu', non una condizione. */
html:not(.js) .r,
html:not(.js) .r-img,
html:not(.js) .lines span i,
html:not(.js) .lay,
html:not(.js) .lv,
html:not(.js) .tile,
html:not(.js) .hslide,
html:not(.js) .pscene .lv,
html:not(.js) .rec-card,
html:not(.js) .step{
  opacity:1!important;transform:none!important;visibility:visible!important;
  animation:none!important;clip-path:none!important}
html:not(.js) .track{flex-wrap:wrap}
html:not(.js) .filiera .stage{height:auto;position:static}
html:not(.js) .rec-strip{overflow-x:auto}

/* ---------- movimento ridotto ----------
   La sezione della filiera non viene piu' bloccata: le cinque schede
   diventano una striscia che si scorre a mano, cosi' i contenuti
   restano raggiungibili anche senza animazioni. */
html.mr .filiera .stage{height:auto;position:static;
  padding-block:clamp(52px,8vh,100px)}
html.mr .track{overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:22px;scrollbar-width:none;cursor:grab}
html.mr .track::-webkit-scrollbar{display:none}
html.mr .track .step{scroll-snap-align:start}
html.mr .bar{display:none}
html.mr .filiera{height:auto!important}

/* ---------- riquadro immagine con misure definite ----------
   Niente griglia e niente percentuali di altezza: il riquadro e' posizionato
   con coordinate esplicite e l'immagine lo riempie interamente, lasciando a
   object-fit il compito di rispettare le proporzioni. Cosi' Safari e Chrome
   calcolano la stessa dimensione. */
.card figure{position:absolute;display:block;padding:0;
  left:3%;right:3%;top:1%;bottom:29%;z-index:-1}
.card figure img{width:100%;height:100%;object-fit:contain;object-position:center;
  display:block;max-height:none;max-width:none}
@media(max-width:760px){
  .card figure{left:2%;right:2%;top:0;bottom:32%}
}

/* ---------- telefono: apertura e schede prodotto ----------
   Le composizioni su piu' livelli erano tarate sul monitor. Qui vengono
   alzate e ingrandite, e il gruppo in apertura viene stretto e portato
   piu' in alto per non finire dietro al titolo. */
@media(max-width:760px){
  /* gruppo delle tre confezioni in apertura */
  .hero-pack{right:-4%;top:3vh;width:104%;height:30vh}
  .p-scarola{left:-2%;top:0;width:40%}
  .p-zucca{right:-2%;top:1%;width:39%}
  .p-anguria{left:22%;bottom:0;width:56%}

  /* le schede hanno bisogno di piu' altezza per separare foto e testo */
  .card{min-height:clamp(330px,76vw,430px)}
  .card::before{height:52%}

  /* I gamma */
  .l-scarola{right:-7%;top:-3%;width:60%}
  .l-lattuga{left:-8%;top:16%;width:78%}

  /* I gamma evoluta */
  .e-brodo{right:-8%;top:-2%;width:68%}
  .e-sedano{left:-9%;top:18%;width:74%}

  /* classici e mix */
  .c-zucchine{left:-9%;top:-4%;width:70%}
  .c-zucca{right:-9%;top:6%;width:74%}
  .m-benessere{right:-9%;top:-4%;width:70%}
  .m-cianfotta{left:-9%;top:6%;width:74%}

  /* frutta tagliata: solo un po' piu' in alto */
  .card--frutta .lay{left:0;top:12%;width:100%}
}