:root{
  --carta:#f7f3ec; --carta-2:#fffdf9; --inchiostro:#1f1b16; --tenue:#6b6257; --linea:#e6ddd0;
  --lago:#1f7f7a; --lago-scuro:#145c58; --larice:#cf8a2e; --larice-chiaro:#f3d9b1;
  --bordeaux:#4a0b10; --bordeaux-2:#6b141b; --oro:#c9a25a; --oro-chiaro:#ead6a8;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --r:18px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --carta:#14120f; --carta-2:#1d1a16; --inchiostro:#f1ebe1; --tenue:#a99e8f; --linea:#332d26;
  --lago:#4bb3ac; --lago-scuro:#2f8f89; --larice:#e3a24a; --larice-chiaro:#4a3418;
}}
:root[data-theme="dark"]{
  --carta:#14120f; --carta-2:#1d1a16; --inchiostro:#f1ebe1; --tenue:#a99e8f; --linea:#332d26;
  --lago:#4bb3ac; --lago-scuro:#2f8f89; --larice:#e3a24a; --larice-chiaro:#4a3418;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inchiostro);font:17px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0}
h2{font-size:clamp(34px,5vw,54px);text-align:center}
h3{font-size:26px}

/* testata */
.testata{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:20px;padding:14px max(16px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--carta) 72%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--linea) 60%,transparent)}
.marchio{display:flex;align-items:center;gap:10px;text-decoration:none}
.marchio-nome{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:.01em}
.marchio-tessere{display:grid;grid-template-columns:repeat(2,11px);gap:2px}
.marchio-tessere i{width:11px;height:11px;border-radius:2px;background:var(--lago)}
.marchio-tessere i:nth-child(2){background:var(--larice)}.marchio-tessere i:nth-child(3){background:#5e9bd6}.marchio-tessere i:nth-child(4){background:#7da34a}
.menu{display:flex;gap:22px;margin-left:auto;font-size:15px}
.menu a{text-decoration:none;color:var(--tenue)}.menu a:hover{color:var(--inchiostro)}
.lingua select{font:500 14px var(--sans);color:var(--inchiostro);background:var(--carta-2);border:1px solid var(--linea);border-radius:999px;padding:7px 12px;max-width:160px}
@media (max-width:720px){.menu{display:none}.lingua{margin-left:auto}}

/* eroe */
.eroe{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.eroe-sfondo{position:absolute;inset:0;z-index:-2}
.eroe-sfondo img{width:100%;height:100%;object-fit:cover;transform-origin:60% 50%;animation:respiro 28s ease-in-out infinite alternate}
@keyframes respiro{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@media (prefers-reduced-motion:reduce){.eroe-sfondo img{animation:none}}
.eroe-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,12,.05) 30%,rgba(20,16,12,.62) 100%)}
.eroe-testo{padding:0 max(20px,6vw) max(56px,9vh);color:#fffaf2;max-width:980px}
.sopra{font:600 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.85;margin:0 0 14px}
.eroe h1{font-size:clamp(46px,9vw,112px);font-weight:500;letter-spacing:-.01em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.eroe .sotto{font-family:var(--serif);font-size:clamp(21px,2.6vw,30px);line-height:1.35;margin:18px 0 28px;max-width:720px}
.bottoni{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 15px var(--sans);text-decoration:none;border-radius:999px;padding:14px 24px;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn.pieno{background:var(--lago);color:#fff}.btn.pieno:hover{background:var(--lago-scuro)}
.btn.vuoto{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn.oro{background:var(--oro);color:#2a0507}
.contatore{margin:26px 0 0;font:500 15px var(--sans);display:inline-flex;align-items:center;gap:10px;opacity:.95}
.contatore:not(:empty)::before{content:"";width:9px;height:9px;border-radius:50%;background:#7fe0b0;box-shadow:0 0 0 0 rgba(127,224,176,.6);animation:pulsa 2.4s infinite}
@keyframes pulsa{70%{box-shadow:0 0 0 10px rgba(127,224,176,0)}100%{box-shadow:0 0 0 0 rgba(127,224,176,0)}}

/* manifesto */
.manifesto{padding:clamp(80px,14vw,170px) max(20px,8vw);text-align:center}
.manifesto blockquote{margin:0 auto;max-width:900px;font:italic 400 clamp(28px,4.2vw,50px)/1.25 var(--serif);color:var(--inchiostro)}

/* come */
.come{padding:0 max(16px,5vw) clamp(70px,10vw,130px)}
.passi{list-style:none;margin:44px auto 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1100px}
.passi li{background:var(--carta-2);border:1px solid var(--linea);border-radius:var(--r);padding:28px 24px}
.passo-num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--larice-chiaro);color:var(--larice);font:600 17px var(--sans);margin-bottom:16px}
.passi p{color:var(--tenue);margin:10px 0 0}

/* quadro */
.quadro{padding:clamp(60px,8vw,110px) max(16px,4vw);background:linear-gradient(180deg,var(--carta),var(--carta-2))}
.quadro-testa{text-align:center;max-width:720px;margin:0 auto 32px}
.quadro-testa p{color:var(--tenue)}
.visore{position:relative;max-width:1200px;margin:0 auto;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:#d9d2c6;touch-action:none;cursor:grab;box-shadow:0 30px 60px -30px rgba(40,30,20,.45);outline:none}
.visore:active{cursor:grabbing}
.visore-tela{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
.visore-tela img{width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.anello{position:absolute;border-radius:6px;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--larice),0 0 30px 6px rgba(255,220,150,.8);animation:anello 1.6s ease-in-out infinite}
@keyframes anello{50%{box-shadow:0 0 0 3px #fff,0 0 0 9px var(--larice),0 0 50px 12px rgba(255,220,150,.9)}}
.visore-comandi{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.visore-comandi button{width:42px;height:42px;border-radius:12px;border:0;background:rgba(255,253,249,.88);color:#1f1b16;font:500 20px var(--sans);cursor:pointer;backdrop-filter:blur(6px)}
.trova{max-width:560px;margin:30px auto 0;text-align:center}
.trova label{font-family:var(--serif);font-size:22px}
.trova-riga{display:flex;gap:10px;margin-top:12px}
.trova input{flex:1;min-width:0;font:600 18px var(--sans);letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:12px 14px;border-radius:999px;border:1px solid var(--linea);background:var(--carta-2);color:var(--inchiostro)}
.trova-esito{min-height:1.6em;color:var(--tenue);margin:10px 0 0}

/* regole */
.regole{padding:clamp(70px,10vw,120px) max(16px,6vw);text-align:center}
.regole ul{list-style:none;padding:0;margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px}
.regole li{background:var(--carta-2);border:1px solid var(--linea);border-radius:999px;padding:10px 18px;font-size:15px}

/* app */
.app{padding:0 max(16px,6vw) clamp(70px,10vw,120px)}
.app-scheda{max-width:640px;margin:0 auto;text-align:center;background:var(--carta-2);border:1px solid var(--linea);border-radius:28px;padding:42px 26px}
.app-icona{width:96px;height:96px;border-radius:22px;margin:0 auto 20px;box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.app-scheda p{color:var(--tenue);margin:14px auto 22px;max-width:480px}
.badge{display:inline-block;background:var(--inchiostro);color:var(--carta);border-radius:12px;padding:12px 20px;font:600 15px var(--sans)}

/* sponsor LB26 */
.sponsor{background:radial-gradient(120% 140% at 20% 0%,var(--bordeaux-2),var(--bordeaux));color:#f7efe2;padding:clamp(56px,8vw,90px) max(16px,6vw)}
.sponsor-dentro{display:flex;gap:26px;align-items:center;max-width:820px;margin:0 auto;text-decoration:none}
.sponsor-dentro img{width:88px;height:88px;border-radius:20px;flex:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.sponsor-nome{font:500 40px/1 var(--serif);letter-spacing:.06em;margin:0 0 8px;color:var(--oro-chiaro)}
.sponsor p{margin:0 0 16px}.sponsor .sopra{color:var(--oro-chiaro);margin-bottom:6px}
@media (max-width:560px){.sponsor-dentro{flex-direction:column;text-align:center}}

.piede{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;padding:28px 16px 40px;color:var(--tenue);font-size:14px}
.piede a{text-decoration:none}.piede a:hover{color:var(--inchiostro)}

.rivela{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.rivela.vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rivela{opacity:1;transform:none;transition:none}}

/* pagine di testo */
.testo{max-width:760px;margin:0 auto;padding:110px 20px 60px}
.testo h1{font-size:clamp(40px,6vw,60px);margin-bottom:24px}
.testo h2{text-align:left;font-size:28px;margin:34px 0 8px}
.testo p,.testo li{color:var(--inchiostro)}

/* ?anteprima: per le foto a pagina intera (niente comparse, eroe ad altezza fissa) */
.anteprima .rivela{opacity:1;transform:none;transition:none}
.anteprima .eroe{min-height:0;height:860px}.anteprima .eroe-testo{padding-bottom:80px}
.anteprima .eroe-sfondo img{animation:none}