/* ==========================================================================
   lasciti.megliolegale.it — «Lascia qualcosa di meglio.»
   Riscritto l'8 set 2026: scala tipografica più grande, layout desktop/mobile,
   header sticky con menu mobile, animazioni (rispettano prefers-reduced-motion).
   ========================================================================== */
@font-face{font-family:Montserrat;src:url('assets/montserrat-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --green:#1ed75f;--green-2:#45ee80;--green-dark:#128f40;--green-ink:#0f6b32;
  --ink:#101212;--ink-2:#2b2e2c;--muted:#5b6157;
  --paper:#f5f3ec;--paper-2:#edeee6;--line:#d7d8cd;--line-2:#b7bfb1;--teal:#143c4c;
  --max:1400px;
  --pad:clamp(20px,5vw,80px);
  --gutter:max(var(--pad),calc((100% - var(--max)) / 2));
  --section:clamp(64px,8vw,120px);
  --text:clamp(17px,1.05vw,19px);
  --text-lg:clamp(19px,1.35vw,22px);
  --text-sm:15px;
  --header-h:88px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Montserrat,Arial,sans-serif;font-size:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:850;letter-spacing:-.05em;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
picture{display:contents}
::selection{background:var(--green);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #2476ef;outline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ico-fill{fill:currentColor;stroke:none}
.star{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.skip-link{position:fixed;top:-120px;left:16px;background:#fff;color:var(--ink);padding:16px 20px;z-index:100;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.skip-link:focus{top:12px}

/* ---------- pulsanti ---------- */
.button{--bg:var(--ink);--fg:#fff;position:relative;min-height:60px;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:16px 24px;font-size:16px;font-weight:750;letter-spacing:-.01em;line-height:1.2;background:var(--bg);color:var(--fg);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s,color .3s}
.button:hover{transform:translateY(-3px);box-shadow:0 18px 32px -14px rgba(16,18,18,.55)}
.button:active{transform:translateY(0) scale(.98);box-shadow:none}
.button .ico{transition:transform .35s var(--ease)}
.button:hover .ico{transform:translate(3px,-3px)}
.button-dark{--bg:var(--ink);--fg:#fff}
.button-dark:hover{--bg:var(--teal)}
.button-green{--bg:var(--green);--fg:var(--ink)}
.button-green:hover{--bg:var(--green-2)}
.text-button{display:inline-flex;align-items:center;gap:14px;font-size:16px;font-weight:750;padding:8px 0;transition:color .2s}
.text-button:hover{color:var(--green-dark)}
.text-button .round{width:38px;height:38px;border:1.5px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:transform .35s var(--ease),border-color .2s,background .2s}
.text-button:hover .round{transform:translateY(3px);border-color:var(--green-dark);background:#fff}
.small-link{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:700;padding:6px 0;border-bottom:2px solid currentColor;transition:color .2s,gap .3s var(--ease)}
.small-link:hover{color:var(--green-dark);gap:16px}

/* ---------- header ---------- */
/* header: altezza fissa e sfondo pieno. Niente cambi di altezza allo scroll e niente sfondo
   sfocato: facevano tremare la barra e tutto il contenuto sotto, soprattutto su iPhone */
.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s;transform:translateZ(0)}
.header.scrolled{box-shadow:0 10px 30px -10px rgba(16,18,18,.15)}
.header-inner{height:var(--header-h);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand img{width:clamp(170px,15vw,220px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,40px);font-size:16px;font-weight:650}
.nav>a{position:relative;padding:8px 0;white-space:nowrap}
.nav>a:after{content:'';position:absolute;left:0;bottom:2px;height:2px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav>a:hover:after,.nav>a.active:after{transform:scaleX(1)}
.nav-actions{display:none}
.header-actions{display:flex;align-items:center;gap:12px;position:relative;z-index:45}
.brand{position:relative;z-index:45}
.nav-cta{min-height:50px;padding:12px 20px;font-size:15px;gap:18px}
.nav-toggle{display:none;width:50px;height:50px;place-items:center;border:1.5px solid var(--ink);border-radius:50%}
.nav-toggle .ico{width:24px;height:24px}
.nav-toggle .ico-close{display:none}
.menu-open .nav-toggle .ico-menu{display:none}
.menu-open .nav-toggle .ico-close{display:block}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);min-height:min(calc(100vh - var(--header-h)),800px)}
.hero-copy{padding:clamp(40px,6vw,88px) clamp(24px,4vw,64px) clamp(40px,6vw,72px) var(--gutter);display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero h1{font-size:clamp(58px,7.4vw,132px);line-height:.92;letter-spacing:-.06em;font-weight:900;margin-bottom:clamp(22px,2.6vw,34px)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.hero h1 .line>span{display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.09s}
.hero h1 .line:nth-child(3)>span{animation-delay:.18s}
.green-word{color:var(--green);font-style:normal}
.period{color:var(--ink);font-style:normal}
.hero-description{font-size:var(--text-lg);line-height:1.55;font-weight:500;letter-spacing:-.02em;max-width:44ch;animation:fade .8s .35s var(--ease) both}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:clamp(26px,3vw,36px) 0 24px;animation:fade .8s .5s var(--ease) both}
.hero .text-button{align-self:flex-start;animation:fade .8s .62s var(--ease) both}
.hero-art{--mx:0;--my:0;position:relative;isolation:isolate;overflow:hidden;background:var(--green);min-height:600px}
.hero-art:before{content:'';position:absolute;inset:0;z-index:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.leaf{position:absolute;pointer-events:none;user-select:none;transition:translate .7s var(--ease)}
.leaf img{width:100%;height:auto;filter:drop-shadow(4px 10px 9px rgba(6,46,25,.17))}
.leaf-top{width:46%;right:-11%;top:-10%;z-index:1;translate:calc(var(--mx) * -16px) calc(var(--my) * -12px)}
.leaf-top img{transform:rotate(-30deg);animation:sway 9s ease-in-out infinite alternate}
.leaf-bottom{width:40%;left:-8%;bottom:-8%;z-index:3;translate:calc(var(--mx) * 12px) calc(var(--my) * 10px)}
.leaf-bottom img{transform:rotate(32deg);animation:sway 11s ease-in-out infinite alternate-reverse}
.envelope-scene{position:absolute;z-index:2;width:75%;height:360px;top:50%;left:13%;margin-top:-165px;transform:rotate(-10deg);filter:drop-shadow(10px 26px 13px rgba(0,53,19,.22));transition:transform .7s var(--ease);animation:float 7s ease-in-out infinite}
.hero-art:hover .envelope-scene{transform:rotate(-7deg)}
.envelope-back{position:absolute;left:0;right:0;top:160px;bottom:0;background:#d9d4c5;border-radius:4px}
.envelope-back:before{content:'';position:absolute;top:-125px;left:0;width:100%;height:128px;background:linear-gradient(155deg,#c4bda9,#e1ddd0);clip-path:polygon(0 100%,50% 0,100% 100%)}
.letter{position:absolute;left:7%;width:86%;height:305px;top:-35px;padding:30px 28px;background:linear-gradient(115deg,#faf9f2,#e9e7dc);box-shadow:0 0 15px rgba(0,0,0,.13);transform:rotate(3deg)}
.letter:after{content:'';position:absolute;left:22px;right:22px;bottom:18px;border-top:1px solid #c5c3b7}
.letter p{font-size:clamp(28px,3.1vw,50px);font-weight:500;line-height:1.04;letter-spacing:-.055em;margin:6px 0 16px}
.letter p strong{font-weight:850}
.letter-sign{font-family:Georgia,'Times New Roman',serif;font-size:19px;font-style:italic}
.letter-star{position:absolute;right:26px;bottom:44px;width:40px;height:40px;color:var(--green)}
.envelope-front{position:absolute;inset:160px 0 0;background:linear-gradient(145deg,#ebe7d9 30%,#dad4c3);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border-radius:2px}
.envelope-fold{position:absolute;inset:160px 0 0;background:linear-gradient(0deg,#efeade,#e5dfcf);clip-path:polygon(0 100%,50% 35%,100% 100%)}
.seal{position:absolute;right:45px;bottom:32px;width:60px;height:60px;border-radius:50%;border:1px solid #0e7b3c;background:#118b42;color:#073c22;box-shadow:2px 5px 7px rgba(0,0,0,.2),inset 0 0 0 5px #1a984d;display:grid;place-items:center;transform:rotate(20deg)}
.seal .star{width:30px;height:30px;stroke-width:3.5}

/* ---------- storia / spot ---------- */
.story{background:var(--ink);color:var(--paper);padding:var(--section) var(--gutter)}
.video-intro{max-width:1200px;margin:0 auto clamp(28px,4vw,48px);display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.video-intro h2{font-size:clamp(38px,5vw,82px);line-height:1;letter-spacing:-.05em}
.outlined{color:transparent;-webkit-text-stroke:1.5px #eeeee5}
.video-intro p{font-size:var(--text-lg);line-height:1.5;color:#c9cec4;padding-bottom:8px}
.video-embed{max-width:1200px;margin:0 auto;aspect-ratio:16/9;position:relative;background:#000;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,22px);background:#000;color:#fff}
.video-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .9s var(--ease),opacity .4s}
.video-play:hover img{transform:scale(1.03);opacity:1}
.play-badge{flex:none;position:relative;width:clamp(76px,8vw,112px);height:clamp(76px,8vw,112px);border-radius:50%;background:var(--green);color:var(--ink);display:grid;place-items:center;box-shadow:0 24px 60px -12px rgba(30,215,95,.7);transition:transform .4s var(--ease)}
.play-badge:before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(30,215,95,.6);animation:ping 2.2s var(--ease) infinite}
.play-badge .ico{width:38%;height:38%;margin-left:7%}
.video-play:hover .play-badge{transform:scale(1.08)}
.play-label{flex:none;position:relative;font-weight:750;font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.7);white-space:nowrap}

/* ---------- manifesto ---------- */
.manifesto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(24px,5vw,64px);align-items:center;padding:var(--section) var(--gutter);border-bottom:1px solid var(--line)}
.manifesto-side{display:flex;justify-content:center}
.manifesto-leaves{width:min(100%,270px);height:auto;transform:rotate(-15deg);filter:drop-shadow(8px 14px 9px rgba(14,50,21,.12));animation:sway 10s ease-in-out infinite alternate;pointer-events:none;user-select:none}
.manifesto h2{font-size:clamp(30px,3.9vw,64px);line-height:1.12;font-weight:700;letter-spacing:-.04em}
.manifesto h2 span{background-image:linear-gradient(transparent 70%,var(--green) 70%,var(--green) 93%,transparent 93%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.manifesto-body{margin-top:clamp(22px,3vw,36px);font-size:var(--text-lg);line-height:1.6;max-width:56ch}

/* ---------- la causa ---------- */
.cause{background:var(--paper-2);padding:var(--section) var(--gutter)}
.section-top{margin-bottom:clamp(28px,4vw,48px)}
.cause-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.cause h2{font-size:clamp(38px,4.8vw,78px);line-height:1;letter-spacing:-.05em}
.cause h2 span{color:var(--green-ink)}
.cause-heading>p{max-width:42ch;font-size:var(--text);line-height:1.6;color:var(--ink-2)}
.cause-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,5vw,56px)}
.cause-card{background:var(--paper);border:1px solid #c9cec0;padding:clamp(26px,3vw,40px);min-height:320px;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.cause-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(16,18,18,.35);border-color:var(--green)}
.card-top{display:flex;justify-content:flex-end;margin-bottom:auto;padding-bottom:36px}
.card-top svg{width:50px;height:50px;color:var(--green-ink);transition:transform .45s var(--ease),color .3s}
.cause-card:hover .card-top svg{color:var(--green-dark);transform:rotate(-8deg) scale(1.08)}
.cause-card h3{font-size:clamp(24px,2vw,31px);line-height:1.05;letter-spacing:-.035em;margin-bottom:16px}
.cause-card p{font-size:var(--text);line-height:1.65;color:var(--ink-2)}

/* ---------- il tuo lascito ---------- */
.legacy{padding:var(--section) var(--gutter)}
.legacy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,7vw,110px);align-items:start}
.legacy h2{font-size:clamp(54px,6.6vw,108px);line-height:.92;letter-spacing:-.06em;margin-bottom:clamp(22px,2.5vw,30px)}
.legacy h2 span{color:var(--green-ink)}
.legacy-copy>p{font-size:var(--text-lg);line-height:1.6;max-width:42ch;margin-bottom:30px}
.legacy-details{display:grid}
.legacy-details article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;padding:26px 0;border-bottom:1px solid var(--line-2)}
.legacy-details article:first-child{border-top:1px solid var(--line-2)}
.legacy-details article>span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:600;color:var(--green-ink);padding-top:7px}
.legacy-details h3{font-size:clamp(20px,1.6vw,25px);letter-spacing:-.025em;margin-bottom:8px}
.legacy-details p{font-size:var(--text);line-height:1.65;color:var(--ink-2)}
.legacy-details>.small-link{margin-top:28px;justify-self:start}

/* ---------- fascia guida (verde) ---------- */
/* fondo piatto, esattamente il verde dello sprite del nonnino: qualsiasi texture
   o sfumatura sotto il disegno ne farebbe vedere il rettangolo */
.guide-band{position:relative;background:#1dd75f;color:var(--ink);padding:var(--section) var(--gutter);overflow:hidden}
.guide-band-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,6vw,90px);max-width:1280px;margin:0 auto}
.guide-band-art{padding:12px 24px 24px 12px}
.guide-band-art img{width:100%;height:auto;object-fit:contain}
.guide-band-lead{font-size:var(--text-lg);font-weight:600;margin-bottom:14px}
.guide-band h2{font-size:clamp(40px,4.8vw,76px);line-height:1;letter-spacing:-.055em}
.guide-band-text{font-size:var(--text-lg);line-height:1.5;margin:26px 0 30px}

/* ---------- finale (nero) ---------- */
/* stesso motivo: nero piatto identico allo sprite del nonno in poltrona */
.finale{position:relative;background:#101211;color:var(--paper);padding:var(--section) var(--gutter);overflow:hidden}
.finale-inner{position:relative;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.finale-copy{padding-bottom:0}
.finale h2{font-size:clamp(48px,5.6vw,96px);line-height:.96;letter-spacing:-.06em}
.finale h2 span{color:var(--green);font-size:1.2em}
.finale-punchline{font-size:clamp(26px,2.7vw,42px);line-height:1.15;margin-top:30px;letter-spacing:-.035em}
.finale-punchline strong{color:var(--green);font-weight:800}
.finale-support{font-size:var(--text-lg);line-height:1.6;color:#c3c8bd;margin-top:22px;max-width:40ch}
.finale-actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}
.finale-actions .button{min-width:220px}
.finale-share{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:700;padding:14px 0;color:var(--paper);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.finale-share:hover{color:var(--green);border-color:var(--green)}
.finale-art{position:relative;align-self:center;padding:28px 28px 24px 12px}
.finale-art img{width:100%;height:auto;object-fit:contain;margin:0 auto}
.comic-bubble{position:absolute;top:0;right:0;z-index:1;background:var(--paper);color:var(--ink);padding:16px 22px;border:3px solid var(--ink);box-shadow:4px 5px 0 var(--green);font-size:clamp(17px,1.4vw,21px);line-height:1.1;font-weight:850;letter-spacing:-.04em;transform:rotate(8deg);animation:wobble 5s ease-in-out infinite}
.comic-bubble:after{content:'';position:absolute;bottom:-17px;left:36px;width:23px;height:23px;background:var(--paper);clip-path:polygon(0 0,100% 0,0 100%)}

/* ---------- nonnini: otto disegni in sequenza, loop di 3,08 secondi ---------- */
/* cornice da vignetta: il rettangolo dello sprite diventa una foto appoggiata sulla fascia,
   così nessuna differenza di resa del colore tra schermi può far vedere il bordo */
.nonno-loop{position:relative;margin:0 auto;overflow:hidden;border:4px solid var(--ink);border-radius:8px;background:#1dd75f;box-shadow:16px 16px 0 var(--paper);transform:rotate(-2.5deg)}
.nonno-loop--poltrona{border-color:var(--paper);background:#101211;box-shadow:16px 16px 0 var(--green);transform:rotate(2deg)}
.nonno-loop picture,.nonno-loop img{display:block}
.nonno-loop--lasciti{max-width:600px;aspect-ratio:1}
.nonno-loop--poltrona{max-width:460px;aspect-ratio:2/3}
.nonno-frames{display:none;position:absolute;inset:0;background-size:400% 200%;background-repeat:no-repeat;pointer-events:none;animation:nonno-cartoon 3.08s steps(1,end) infinite}
.nonno-loop.is-ready picture{visibility:hidden}
.nonno-loop.is-ready .nonno-frames{display:block}
.nonno-loop.is-paused .nonno-frames{animation-play-state:paused}
@keyframes nonno-cartoon{
  0%{background-position:0% 0%}
  21.103896%{background-position:33.333333% 0%}
  27.597403%{background-position:66.666667% 0%}
  36.688312%{background-position:100% 0%}
  48.051948%{background-position:0% 100%}
  54.545455%{background-position:33.333333% 100%}
  69.155844%{background-position:66.666667% 100%}
  80.519481%{background-position:100% 100%}
  100%{background-position:100% 100%}
}
@media (max-width:900px){
  :root{--section:clamp(56px,10vw,80px)}
  .nonno-loop{border-width:3px;box-shadow:11px 11px 0 var(--paper)}
  .nonno-loop--poltrona{box-shadow:11px 11px 0 var(--green)}
  .nonno-loop--lasciti{max-width:420px}
  .nonno-loop--poltrona{max-width:340px}
}
@media (prefers-reduced-motion:reduce){
  .nonno-loop.is-ready picture{visibility:visible}
  .nonno-loop.is-ready .nonno-frames{display:none}
}

/* ---------- FAQ ---------- */
.faq{padding:var(--section) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,90px);align-items:start}
.faq h2{font-size:clamp(34px,4vw,64px);line-height:1.02;letter-spacing:-.05em;margin-bottom:16px}
.faq-head p{font-size:var(--text-lg);color:var(--ink-2)}
.faq-list{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:clamp(18px,1.4vw,22px);font-weight:700;letter-spacing:-.02em;line-height:1.3;transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--green-dark)}
.faq-item .plus{width:36px;height:36px;padding:8px;border:1.5px solid var(--ink);border-radius:50%;transition:transform .4s var(--ease),background .3s,color .3s}
.faq-item[open] .plus{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
.faq-body{overflow:hidden}
.faq-body p{font-size:var(--text);line-height:1.7;padding:0 60px 26px 0;color:var(--ink-2)}
.faq-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.faq-source{font-size:var(--text-sm);color:var(--muted);margin-top:24px;line-height:1.7}
.faq-source a{text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
.footer{padding:clamp(36px,5vw,56px) var(--gutter);border-top:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px 40px;align-items:center;font-size:var(--text-sm)}
.footer-brand img{width:170px;height:auto}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;font-weight:650;font-size:16px}
.footer-nav a{border-bottom:1.5px solid transparent;padding:2px 0;transition:border-color .2s}
.footer-nav a:hover{border-color:currentColor}
.footer small{font-size:14px;color:var(--muted);white-space:nowrap}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:16px 24px;font-size:16px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.3s var(--ease);max-width:90vw;text-align:center}
#toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- reveal e animazioni ---------- */
.js [data-reveal]{opacity:0;translate:0 28px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--i,0) * .12s)}
.js [data-reveal].in{opacity:1;translate:0 0}
@keyframes rise{to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes sway{from{rotate:-2deg}to{rotate:2deg}}
@keyframes wobble{0%,100%{rotate:0deg}50%{rotate:-3deg}}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}

/* ==========================================================================
   barra compatta (due pulsanti + quattro voci): sotto i 1300px niente frecce e testi un po' più piccoli
   ========================================================================== */
@media (max-width:1300px){
  .brand img{width:170px}
  .nav{gap:22px;font-size:15px}
  .nav-cta{padding:12px 16px;gap:12px;font-size:14px}
  .nav-cta .ico{display:none}
}

/* ==========================================================================
   header con menu a panino (fino a 1100px: con due pulsanti la barra non ci starebbe)
   ========================================================================== */
@media (max-width:1100px){
  :root{--header-h:72px}
  html{scroll-padding-top:calc(var(--header-h) + 8px)}
  .header-inner{gap:12px}
  .brand img{width:150px}
  .nav-toggle{display:grid;width:46px;height:46px}
  .nav-cta{display:none}  /* in barra solo logo e panino: i due pulsanti stanno nel menu (scelta dell'utente) */
  .js .nav{position:fixed;inset:0;z-index:40;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:calc(var(--header-h) + 24px) 24px 40px;background:var(--paper);opacity:0;pointer-events:none;translate:0 -10px;transition:opacity .35s var(--ease),translate .35s var(--ease);overflow:auto}
  .js .menu-open .nav{opacity:1;pointer-events:auto;translate:0 0}
  .js .nav>a{font-size:clamp(28px,8vw,36px);font-weight:800;letter-spacing:-.04em;padding:18px 0;border-bottom:1px solid var(--line)}
  .js .nav>a:after{display:none}
  .js .nav-actions{display:flex;flex-direction:column;gap:12px;margin-top:32px}
  .js .nav-actions .button{width:100%}
}

/* ==========================================================================
   tablet
   ========================================================================== */
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hero h1{font-size:clamp(52px,7vw,100px)}
  .hero-art{min-height:560px}
  .envelope-scene{width:80%;left:10%;height:330px;margin-top:-150px}
  .letter{height:285px;padding:24px 22px}
  .envelope-back,.envelope-front,.envelope-fold{top:140px}
  .cause-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .cause-card{min-height:280px;padding:24px}
  .finale-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}

/* ==========================================================================
   mobile e tablet stretti
   ========================================================================== */
@media (max-width:900px){

  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:36px 24px 34px}
  .hero h1{font-size:clamp(50px,14.2vw,96px);line-height:.94}
  .hero-description{font-size:18px;max-width:none}
  .hero-actions{margin:26px 0 18px}
  .hero-actions .button{width:100%;min-height:62px}
  .hero-art{min-height:470px}
  .leaf-top{width:44%;right:-9%;top:-12%}
  .leaf-bottom{width:38%;left:-7%;bottom:-8%}
  .envelope-scene{width:68%;max-width:380px;left:16%;height:300px;margin-top:-140px}
  .letter{height:270px;top:-40px;padding:22px 20px}
  .letter p{font-size:clamp(28px,8.5vw,36px);margin-top:4px}
  .letter-sign{font-size:16px}
  .letter-star{width:32px;height:32px;bottom:36px;right:20px}
  .envelope-back,.envelope-front,.envelope-fold{top:112px}
  .seal{right:26px;bottom:24px;width:50px;height:50px}
  .seal .star{width:26px;height:26px}

  .video-intro{display:block}
  .video-intro h2{font-size:clamp(34px,9.2vw,54px)}
  .video-intro p{margin-top:16px;padding:0}
  .play-label{font-size:13px}

  .manifesto{grid-template-columns:1fr;gap:20px;align-items:start}
  .manifesto-side{justify-content:flex-start}
  .manifesto-leaves{width:120px;margin-left:6px;transform:rotate(-18deg)}
  .manifesto h2{font-size:clamp(27px,7.4vw,44px);line-height:1.18}
  .manifesto h2 br{display:none}
  .manifesto-body{font-size:18px}
  .manifesto-body br{display:none}

  .cause-heading{display:block}
  .cause h2{font-size:clamp(38px,10.5vw,60px)}
  .cause-heading>p{margin-top:22px;max-width:none;font-size:17px}
  .cause-cards{grid-template-columns:1fr;gap:14px}
  .cause-card{min-height:0;padding:26px}
  .card-top{padding-bottom:22px}
  .card-top svg{width:42px;height:42px}
  .cause-card h3{font-size:26px}
  .cause-card p{font-size:17px}

  .legacy-grid{grid-template-columns:1fr;gap:36px}
  .legacy h2{font-size:clamp(56px,16vw,88px)}
  .legacy-copy>p{font-size:18px;max-width:none}
  .legacy-copy .button{width:100%}
  .legacy-details article{padding:22px 0;gap:16px}
  .legacy-details h3{font-size:21px}
  .legacy-details p{font-size:17px}

  .guide-band-inner{grid-template-columns:1fr;gap:30px}
  .guide-band-copy{order:0}
  .guide-band-art{order:1;max-width:460px;margin:0 auto;padding:8px 20px 16px 8px}
  .guide-band h2{font-size:clamp(36px,10.5vw,60px)}
  .guide-band-text{font-size:19px;margin:22px 0 26px}
  .guide-band .button{width:100%}

  .finale-inner{grid-template-columns:1fr;gap:26px}
  .finale-copy{padding-bottom:0}
  .finale h2{font-size:clamp(40px,11.5vw,66px);line-height:1}
  .finale-punchline{font-size:clamp(26px,7.5vw,34px);margin-top:24px}
  .finale-support{font-size:18px;margin-top:18px}
  .finale-actions{gap:18px;margin-top:26px}
  .finale-actions .button{width:100%;min-width:0}
  .finale-art{width:min(100%,420px);margin:8px auto 0;padding:26px 20px 16px 8px}
  .comic-bubble{top:0;font-size:17px;padding:14px 18px}

  .faq{grid-template-columns:1fr;gap:24px}
  .faq h2{font-size:clamp(34px,10vw,56px)}
  .faq-item summary{font-size:18px;padding:20px 0}
  .faq-item .plus{width:34px;height:34px}
  .faq-body p{padding-right:0;font-size:17px}

  .footer{grid-template-columns:1fr;gap:22px;text-align:left}
  .footer-nav{justify-content:flex-start;gap:20px}
}

@media (max-width:380px){
  .brand img{width:138px}
  .hero h1{font-size:14.5vw}
  .hero-art{min-height:430px}
  .envelope-scene{width:76%;left:12%;height:280px;margin-top:-130px}
  .letter p{font-size:30px}
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .hero h1 .line>span{transform:none}
  .hero-description,.hero-actions,.hero .text-button{opacity:1;transform:none}
  .js [data-reveal]{opacity:1;translate:0 0}
}

/* ---------- stampa ---------- */
@media print{
  .header,.hero-art,.video-embed,.guide-band-art,.finale-art,.finale-share,#toast{display:none}
  .hero,.manifesto,.legacy-grid,.guide-band-inner,.finale-inner,.faq{display:block}
  .story,.finale{background:#fff;color:#000}
  .outlined{color:#000;-webkit-text-stroke:0}
  .js [data-reveal]{opacity:1;translate:0 0}
  .hero h1 .line>span{transform:none}
  section,.footer{padding:24px}
}

/* ---------- niente stati hover appiccicosi su touch ---------- */
@media (hover:none){
  .button:hover{transform:none;box-shadow:none}
  .button:hover .ico{transform:none}
  .cause-card:hover{transform:none;box-shadow:none;border-color:#c9cec0}
  .cause-card:hover .card-top svg{transform:none;color:var(--green-ink)}
  .faq-item summary:hover,.small-link:hover,.text-button:hover{color:inherit}
  .small-link:hover{gap:12px}
  .text-button:hover .round{transform:none;background:none;border-color:var(--line-2)}
  .finale-share:hover{color:var(--paper);border-color:transparent}
}
.menu-open .header{transform:none}