/* ==========================================================================
   libro.megliolegale.it — «Mamma mi faccio le canne.» Il libro, gratis.
   Base: style.css di lasciti.megliolegale.it (8-9 set 2026). Stessa scala tipografica, header,
   fasce e animazioni; al posto di busta e nonnini ci sono libro, numeri, biglietto e chat.
   ========================================================================== */
@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}

/* ---------- storia / spot ---------- */
.story{background:var(--ink);color:var(--paper);padding:var(--section) var(--gutter)}
.outlined{color:var(--ink);-webkit-text-stroke:1.6px #eeeee5;paint-order:stroke fill}

/* ---------- 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) ---------- */
.guide-band{position:relative;background:var(--green);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-lead{font-size:var(--text-lg);font-weight:600;margin-bottom:14px}
.guide-band h2{font-size:clamp(38px,4.4vw,70px);line-height:1;letter-spacing:-.055em}
.guide-band-text{font-size:var(--text-lg);line-height:1.5;margin:26px 0 30px}

/* ---------- finale (nero) ---------- */
.finale{position:relative;background:var(--ink);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}

/* ---------- 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}}

/* ==========================================================================
   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}
  .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%}


  .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}

  .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}
}

/* ---------- 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,.guide-band-art,.finale-art,.finale-share,#toast{display:none}
  .hero,.manifesto,.legacy-grid,.guide-band-inner,.finale-inner,.faq,.stats{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}
}

/* ==========================================================================
   componenti del libro (16 set 2026): eyebrow, libro 3D, numeri, biglietto, chat
   ========================================================================== */
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink);margin-bottom:clamp(16px,2vw,24px);animation:fade .8s .1s var(--ease) both}
.hero-eyebrow .star{width:16px;height:16px}

/* ---------- libro 3D nella hero ---------- */
.book-scene{position:absolute;inset:0;z-index:2;display:grid;place-items:center;perspective:1600px;transition:translate .7s var(--ease);translate:calc(var(--mx) * 6px) calc(var(--my) * 6px)}
.book{--w:clamp(240px,24vw,340px);--d:34px;position:relative;width:var(--w);aspect-ratio:2/3;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(4deg);animation:book-float 7s ease-in-out infinite;filter:drop-shadow(18px 34px 22px rgba(0,53,19,.32))}
.hero-art:hover .book{animation-play-state:paused;transform:rotateY(-16deg) rotateX(2deg)}
.book-cover{position:absolute;inset:0;background:var(--ink);color:#fff;border-radius:3px 12px 12px 3px;overflow:hidden;transform:translateZ(calc(var(--d) / 2));box-shadow:inset 6px 0 14px -6px rgba(255,255,255,.15)}
.book-cover:before{content:'';position:absolute;top:0;bottom:0;left:0;width:10px;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent);z-index:2}
.book-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.book-type{position:absolute;inset:0;padding:11% 10% 10%;display:flex;flex-direction:column;gap:6px}
.book-author{font-size:clamp(11px,1vw,14px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c9cec4}
.book-title{margin-top:auto;font-size:clamp(28px,3.1vw,44px);line-height:.94;font-weight:900;letter-spacing:-.05em;color:var(--green)}
.book-sub{margin-top:14px;font-size:clamp(11px,1vw,14px);line-height:1.35;font-weight:600;color:#e6e8e1}
.book-badge{position:absolute;top:9%;right:-9%;transform:rotate(12deg);background:var(--green);color:var(--ink);font-size:13px;font-weight:900;letter-spacing:.06em;padding:8px 26px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.book-spine{position:absolute;top:0;bottom:0;left:0;width:var(--d);background:linear-gradient(90deg,#0b0d0c,#242826);transform:rotateY(-90deg) translateZ(calc(var(--d) / -2)) translateX(calc(var(--d) / -2));transform-origin:center;border-radius:3px 0 0 3px}
.book-pages{position:absolute;top:1.5%;bottom:1.5%;right:-2px;width:var(--d);background:repeating-linear-gradient(90deg,#f4f1e6 0 2px,#d9d5c5 2px 3px);transform:rotateY(90deg) translateZ(calc(var(--d) / 2)) translateX(calc(var(--d) / 2));transform-origin:center}
@keyframes book-float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- fascia nera: intro e numeri ---------- */
.story-intro{max-width:1200px;margin:0 auto clamp(28px,4vw,52px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:40px}
.story-intro h2{font-size:clamp(38px,5vw,82px);line-height:1;letter-spacing:-.05em}
.story-intro p{font-size:var(--text-lg);line-height:1.5;color:#c9cec4;padding-bottom:8px}
.stats{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stat{border:1px solid #2f3431;padding:clamp(24px,2.6vw,36px);background:#161918;transition:border-color .3s,transform .45s var(--ease)}
.stat:hover{border-color:var(--green);transform:translateY(-4px)}
.stat b{display:block;font-size:clamp(56px,6vw,96px);line-height:.9;letter-spacing:-.06em;font-weight:900;color:var(--green);margin-bottom:18px}
.stat b i{font-style:normal;font-size:.42em;letter-spacing:-.03em;margin-left:.1em}
.stat p{font-size:var(--text);line-height:1.55;color:#d7dbd2}

/* ---------- fascia verde: biglietto dell'autrice ---------- */
.author-note{position:relative;max-width:520px;margin:0 auto;aspect-ratio:1;background:linear-gradient(115deg,#faf9f2,#e9e7dc);color:var(--ink);padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;border:4px solid var(--ink);border-radius:8px;box-shadow:16px 16px 0 var(--paper);transform:rotate(-2.5deg);overflow:hidden}
.author-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.author-note:has(.author-photo) .author-note-text,.author-note:has(.author-photo) .author-note-star{display:none}
.author-note:has(.author-photo) .author-note-sign{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 20px;background:var(--ink);color:var(--paper);font-family:Montserrat,Arial,sans-serif;font-style:normal;font-weight:800;font-size:16px;letter-spacing:-.02em}
.author-note-text{font-size:clamp(30px,3.6vw,54px);line-height:1.02;font-weight:500;letter-spacing:-.05em}
.author-note-text strong{font-weight:900}
.author-note-sign{margin-top:26px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(19px,1.6vw,24px);font-style:italic;color:#33382e}
.author-note-star{position:absolute;right:28px;bottom:28px;width:44px;height:44px;color:var(--green)}
.guide-band-who{margin-top:22px;font-size:var(--text-sm);font-weight:600;color:var(--green-ink)}

/* ---------- finale: la chat ---------- */
.chat{position:relative;width:min(100%,400px);margin:0 auto;background:#1a1d1c;border:4px solid var(--paper);border-radius:28px;padding:18px 16px 22px;box-shadow:16px 16px 0 var(--green);transform:rotate(2deg);display:flex;flex-direction:column;gap:10px;color:var(--ink);font-size:clamp(16px,1.3vw,19px);line-height:1.3}
.chat-head{display:flex;align-items:center;gap:12px;padding:0 4px 14px;border-bottom:1px solid #2f3431;margin-bottom:6px;color:var(--paper)}
.chat-avatar{width:40px;height:40px;border-radius:50%;background:var(--green);color:var(--ink);display:grid;place-items:center;font-weight:900}
.chat-name{font-weight:750;letter-spacing:-.02em}
.chat-body{display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:82%;padding:12px 14px 9px;border-radius:18px;display:flex;flex-direction:column;gap:4px;font-weight:600;letter-spacing:-.015em;opacity:0;translate:0 12px;scale:.96}
.chat-msg.show{animation:chat-in .45s var(--ease) forwards}
.chat-msg small{align-self:flex-end;font-size:11px;font-weight:500;opacity:.55}
.chat-out{align-self:flex-end;background:var(--green);border-bottom-right-radius:4px}
.chat-in{align-self:flex-start;background:var(--paper);border-bottom-left-radius:4px}
.chat-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--paper);border-radius:18px;border-bottom-left-radius:4px;animation:chat-in .3s var(--ease) both}
.chat-typing[hidden]{display:none}
.chat-typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:typing 1.2s ease-in-out infinite}
.chat-typing i:nth-child(2){animation-delay:.2s}
.chat-typing i:nth-child(3){animation-delay:.4s}
@keyframes chat-in{to{opacity:1;translate:0 0;scale:1}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

@media (max-width:1100px){
  .book{--w:clamp(220px,24vw,300px)}
  .story-intro{grid-template-columns:1fr;gap:18px}
}
@media (max-width:900px){
  .book{--w:min(58vw,250px);--d:26px;transform:rotateY(-18deg) rotateX(3deg)}
  .book-title{font-size:clamp(26px,8.5vw,34px)}
  .story-intro h2{font-size:clamp(34px,9.2vw,54px)}
  .story-intro p{font-size:18px;padding:0}
  .story-intro p br{display:none}
  .stats{grid-template-columns:1fr;gap:12px}
  .stat{padding:24px}
  .stat b{font-size:clamp(52px,16vw,72px);margin-bottom:12px}
  .stat p{font-size:17px}
  .author-note{max-width:420px;border-width:3px;box-shadow:11px 11px 0 var(--paper);padding:26px}
  .author-note-text{font-size:clamp(30px,9vw,40px)}
  .chat{width:min(100%,360px);border-width:3px;box-shadow:11px 11px 0 var(--green);font-size:16px}
}
@media (max-width:380px){
  .book{--w:62vw}
}
@media (prefers-reduced-motion:reduce){
  .book{animation:none;transform:rotateY(-18deg)}
  .chat-msg{opacity:1;translate:0 0;scale:1;animation:none}
  .chat-typing{display:none!important}
}
@media (hover:none){
  .stat:hover{transform:none;border-color:#2f3431}
}

/* ==========================================================================
   effetti (16 set 2026): barra di avanzamento, nastro, titoli a parole, libro che segue il mouse,
   pulsanti magnetici, card inclinate, biglietto a macchina. Tutto spento con prefers-reduced-motion.
   ========================================================================== */
.progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--green);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}

/* nastro */
.ribbon{overflow:hidden;background:var(--green);color:var(--ink);border-top:1px solid #16b34f;border-bottom:1px solid #16b34f;padding:14px 0;font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ribbon-track{display:flex;width:max-content;animation:ribbon 28s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon span{display:inline-block;padding-right:.5em}
.ribbon i{font-style:normal;display:inline-block;margin:0 14px;animation:spin 6s linear infinite}
@keyframes ribbon{to{transform:translateX(-50%)}}
@keyframes spin{to{rotate:360deg}}

/* titoli parola per parola */
.js [data-words] .w,.js [data-words] .w>b{font-weight:inherit;font-size:inherit;color:inherit}
.js [data-words] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.js [data-words] .w>b{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--w) * .06s)}
.js [data-words].in .w>b,.js .in [data-words] .w>b{transform:none}

/* libro: inclinazione con il mouse e riflesso */
@media (hover:hover) and (pointer:fine){
  .hero-art:hover .book{animation:none;transform:rotateY(calc(-22deg + var(--mx) * 16deg)) rotateX(calc(4deg - var(--my) * 12deg));transition:transform .25s ease-out}
  .book-cover:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(calc(105deg + var(--mx) * 30deg),transparent 40%,rgba(255,255,255,.14) 50%,transparent 62%);opacity:0;transition:opacity .4s}
  .hero-art:hover .book-cover:after{opacity:1}
  /* card che si inclinano */
  .cause-card,.stat{transform-style:preserve-3d;will-change:transform}
  .tilt{transition:transform .15s ease-out!important;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)!important}
  /* pulsanti magnetici */
  .button{will-change:transform}
  .button.magnet{transform:translate(var(--dx,0),var(--dy,0)) translateY(-3px);transition:transform .2s ease-out,box-shadow .35s var(--ease),background-color .3s,color .3s}
}

/* biglietto: cursore che lampeggia mentre scrive */
.author-note-text.typing:after{content:'';display:inline-block;width:.06em;height:.9em;margin-left:.06em;background:var(--ink);vertical-align:-.1em;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .ribbon-track{animation:none}
  .ribbon i{animation:none}
  .js [data-words] .w>b{transform:none;transition:none}
  .progress{display:none}
}

/* copertina vera (assets/copertina.jpg, 16 set 2026): via i testi CSS, resta solo il bollino GRATIS; dorso rosa come la copertina */
.book-cover:has(.book-photo) .book-type>:not(.book-badge){display:none}
.book-cover:has(.book-photo) .book-type{z-index:2}
.book:has(.book-photo) .book-spine{background:linear-gradient(90deg,#c9899c,#f0aec3)}
.book:has(.book-photo) .book-cover{background:#f4b1c6}

/* ---------- libro in hero, versione 2 (16 set 2026): più grande, dorso e retro veri, adesivo GRATIS, ombra a terra ---------- */
.book-scene{--w:clamp(250px,22vw,330px);perspective:1800px;transform-style:preserve-3d}
.book{--d:42px;transform:rotateY(-26deg) rotateX(5deg);filter:none;position:relative;z-index:2}
.book-cover{border-radius:3px 10px 10px 3px;box-shadow:inset 8px 0 16px -8px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.08)}
.book-cover:before{width:16px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 60%,rgba(255,255,255,.12) 80%,rgba(0,0,0,0))}
.book-cover:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.16) 48%,rgba(255,255,255,0) 60%);opacity:.9}
.book-photo{filter:saturate(1.05) contrast(1.02)}
.book-spine{width:var(--d);background:linear-gradient(90deg,#b9788b 0%,#f0aec3 45%,#d795aa 100%);border-radius:3px 0 0 3px;box-shadow:inset 0 0 12px rgba(0,0,0,.12)}
.book-pages{width:var(--d);top:1.2%;bottom:1.2%;right:-1px;background:repeating-linear-gradient(90deg,#fbfaf4 0 1.5px,#d8d4c6 1.5px 2.5px);box-shadow:inset -4px 0 8px rgba(0,0,0,.08)}
.book-back{position:absolute;inset:0;background:#e5a3b9;border-radius:3px 10px 10px 3px;transform:translateZ(calc(var(--d) / -2))}
.book-badge{display:none}
.book-sticker{position:absolute;z-index:4;left:calc(50% + var(--w) * .28);top:calc(50% - var(--w) * .78);width:118px;height:118px;border-radius:50%;background:var(--ink);color:var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900;font-size:22px;letter-spacing:-.03em;line-height:1;transform:translateZ(120px) rotate(12deg);box-shadow:0 14px 30px -12px rgba(0,0,0,.55);outline:3px dashed var(--green);outline-offset:-9px;animation:sticker 7s ease-in-out infinite;transition:translate .7s var(--ease);translate:calc(var(--mx) * -10px) calc(var(--my) * -8px)}
.book-sticker small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.book-shadow{position:absolute;z-index:1;left:50%;top:calc(50% + var(--w) * .82);width:calc(var(--w) * 1.1);height:calc(var(--w) * .16);translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,53,19,.42),rgba(0,53,19,0) 70%);animation:shadow-breathe 7s ease-in-out infinite}
@keyframes sticker{0%,100%{rotate:0deg;translate:0 0}50%{rotate:-6deg;translate:0 -8px}}
@keyframes shadow-breathe{0%,100%{scale:1;opacity:1}50%{scale:.88;opacity:.7}}
@media (hover:hover) and (pointer:fine){
  .hero-art:hover .book{transform:rotateY(calc(-26deg + var(--mx) * 18deg)) rotateX(calc(5deg - var(--my) * 12deg))}
  .book-cover:after{background:linear-gradient(calc(112deg + var(--mx) * 30deg),rgba(255,255,255,0) 35%,rgba(255,255,255,.22) 48%,rgba(255,255,255,0) 60%)}
}
@media (max-width:1100px){.book-scene{--w:clamp(230px,24vw,300px)}}
@media (max-width:900px){
  .hero-art{min-height:520px}
  .book-scene{--w:min(56vw,250px)}
  .book{--d:30px;transform:rotateY(-20deg) rotateX(4deg)}
  .book-sticker{width:92px;height:92px;font-size:17px;left:calc(50% + var(--w) * .3);top:calc(50% - var(--w) * .8)}
  .book-sticker small{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.book-sticker,.book-shadow{animation:none}}

/* ==========================================================================
   spettacolo, seconda mandata (16 set 2026): parola gigante dietro il libro, faro che segue il mouse
   sulle fasce scure, cursore, nastro scuro, numeri che «scattano», barra mobile, libro legato allo scroll
   ========================================================================== */
/* parola gigante in parallasse dietro il libro */
.bg-word{position:absolute;left:0;right:0;top:50%;z-index:1;display:flex;gap:.25em;white-space:nowrap;font-size:clamp(150px,22vw,330px);font-weight:900;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(16,18,18,.16);pointer-events:none;user-select:none;translate:calc(-8% + var(--sy,0) * -220px) -50%;rotate:-6deg;transition:translate .15s linear}
/* il libro si inclina scorrendo la pagina */
.book-scene{translate:calc(var(--mx) * 6px) calc(var(--my) * 6px + var(--sy,0) * 120px)}
.hero-art .book{transform:rotateY(calc(-26deg + var(--sy,0) * 40deg)) rotateX(calc(5deg + var(--sy,0) * 10deg))}
.leaf-top{translate:calc(var(--mx) * -16px) calc(var(--my) * -12px + var(--sy,0) * 160px)}
.leaf-bottom{translate:calc(var(--mx) * 12px) calc(var(--my) * 10px + var(--sy,0) * -120px)}

/* faro: alone verde che segue il mouse sulle fasce scure */
.story,.finale{--lx:50%;--ly:50%}
.story:before,.finale:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--lx) var(--ly),rgba(30,215,95,.13),transparent 60%);opacity:0;transition:opacity .6s}
.story{position:relative}
.story:hover:before,.finale:hover:before{opacity:1}
.story>*,.finale>*{position:relative}

/* numeri: scatto finale dopo il conteggio */
.stat b span.done{display:inline-block;animation:pop .5s var(--ease)}
@keyframes pop{0%{scale:1}40%{scale:1.12;color:#fff}100%{scale:1}}

/* nastro scuro prima delle FAQ */
.ribbon-dark{background:var(--ink);color:var(--paper);border-color:#2f3431}
.ribbon-dark i{color:var(--green)}
.ribbon-track-reverse{animation-direction:reverse}

/* capitoli: rivelazione uno alla volta */
.legacy-details .small-link{margin-top:28px;justify-self:start}

/* barra fissa in basso su mobile, compare dopo la hero */
.float-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:48;translate:0 120%;transition:translate .5s var(--ease);pointer-events:none}
.float-cta.on{translate:0 0;pointer-events:auto}
.float-cta .button{width:100%;min-height:58px;box-shadow:0 20px 40px -14px rgba(16,18,18,.6)}
@media (min-width:901px){.float-cta{display:none}}
.guide-modal-open .float-cta,.menu-open .float-cta{translate:0 120%;pointer-events:none}

/* cursore: anello verde che segue il mouse (solo desktop con mouse) */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block;position:fixed;left:0;top:0;z-index:200;width:28px;height:28px;border:2px solid var(--green);border-radius:50%;pointer-events:none;translate:-50% -50%;transform:translate(var(--cx,-100px),var(--cy,-100px)) scale(var(--cs,1));transition:transform .12s linear,opacity .3s,background-color .3s,border-color .3s;mix-blend-mode:difference;opacity:0}
  .cursor.on{opacity:1}
  .cursor.hot{--cs:2.2;background:rgba(30,215,95,.35);border-color:transparent}
  .cursor.down{--cs:.7}
}
@media (max-width:900px){
  .bg-word{font-size:36vw;translate:calc(-6% + var(--sy,0) * -120px) -50%}
}
@media (prefers-reduced-motion:reduce){
  .bg-word,.book-scene,.leaf-top,.leaf-bottom{translate:0 0}
  .story:before,.finale:before,.cursor{display:none}
  .float-cta{transition:none}
}