/* ==========================================================================
   Better Together — Sistema d'Identità "Edizione Straordinaria"
   Foglio di stile del sito · derivato dalla proposta di design system
   ========================================================================== */

/* ---------- Font ---------- */
@font-face{font-family:"Fraunces";src:url(../font/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../font/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Raleway";src:url(../font/raleway.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Token ---------- */
:root{
  color-scheme:light;
  /* carta e inchiostro */
  --carta:#fffff0; --carta2:#f5eeda; --ink:#211a15;
  /* palette */
  --viola:#8c5d96; --prugna:#5c3f63;
  --oro:#e9a02e; --oro-t:#9c6413;
  --arancio:#e67b20; --arancio-t:#a8541a;
  --oliva:#a3a52e; --teal:#38758e;
  /* estrusione (dall'ombra del logo) */
  --xd1:1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink);
  --xd2:1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 5px 0 var(--ink),6px 6px 0 var(--ink);
  --xd3:1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 5px 0 var(--ink),6px 6px 0 var(--ink),7px 7px 0 var(--ink),8px 8px 0 var(--ink),9px 9px 0 var(--ink),10px 10px 0 var(--ink);
  /* movimento */
  --timbro:cubic-bezier(.34,1.56,.64,1);
  --t-fast:150ms; --t-base:400ms;
  /* tipografia */
  --f-disp:"Fraunces",Georgia,serif;
  --f-body:"Raleway",system-ui,sans-serif;
  --disp-var:'opsz' 144,'SOFT' 100,'WONK' 1;
  --maxw:1060px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-anchor:none;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--carta);color:var(--ink);
  font-family:var(--f-body);font-weight:500;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* grana di stampa */
body::after{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
img{max-width:100%;height:auto}
a{color:var(--prugna)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.stella{display:inline-block;fill:currentColor}

/* ---------- Utilità editoriali ---------- */
.filetto{border-top:3px solid var(--ink);box-shadow:0 6px 0 -5px var(--ink);height:8px}
.kicker{display:flex;align-items:center;gap:10px;font:700 13px/1 var(--f-body);
  letter-spacing:.14em;text-transform:uppercase;color:var(--oro-t)}
.kicker .stella{width:14px;height:14px;flex:none}
section.blocco{padding:76px 0 88px}
.testa-blocco{margin-bottom:44px}
.testa-blocco .filetto{margin-bottom:14px}
h2.titolone{font-family:var(--f-disp);font-weight:640;font-variation-settings:var(--disp-var);
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;letter-spacing:-.015em;
  margin:14px 0 10px;text-wrap:balance}
.lead{font-size:17.5px;max-width:62ch;margin:0}
.lead strong{font-weight:700}

/* rivelazione allo scorrimento (attiva solo se il JS c'e': html.js) */
html.js .sfoglio{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
html.js .sfoglio.in-vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .sfoglio{transform:none;transition:opacity .3s ease}}

/* ---------- Bottoni: l'insegna che si preme ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:800 16px/1 var(--f-body);letter-spacing:.02em;text-decoration:none;cursor:pointer;
  padding:16px 26px;border:3px solid var(--ink);border-radius:10px;color:var(--ink);
  box-shadow:var(--xd1);background:var(--carta);
  transition:transform var(--t-fast) var(--timbro),box-shadow var(--t-fast)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--xd2)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn--oro{background:var(--oro)}
.btn--viola{background:var(--viola);color:var(--carta)}
.btn .stella{width:14px;height:14px}
.btn--piccolo{padding:11px 18px;font-size:14px}

/* ---------- Barra di navigazione ---------- */
.barra{position:sticky;top:0;z-index:50;background:var(--viola);
  border-bottom:3px solid var(--ink)}
.barra .dentro{max-width:var(--maxw);margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:18px}
.barra .marchio{display:flex;align-items:center;flex:none}
.barra .marchio img{height:46px;width:auto;display:block}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.barra nav a{color:var(--carta);text-decoration:none;
  font:700 13px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.barra nav a:hover{text-decoration:underline;text-decoration-color:var(--oro);
  text-decoration-thickness:3px;text-underline-offset:6px}
.barra nav a.solo-mobile{display:none}
/* barra semplice delle pagine interne: resta una riga a tutte le larghezze */
.barra nav.nav-statica{display:flex;position:static;flex-direction:row;background:none;
  border:0;padding:0;margin-left:auto}
.barra nav.nav-statica a{width:auto;padding:0}
.barra .btn{flex:none}
.apri-menu{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:11px 14px}
.apri-menu span{display:block;width:26px;height:3px;background:var(--carta);margin:5px 0;border-radius:2px}
@media (max-width:820px){
  .barra nav{position:absolute;top:100%;left:0;right:0;background:var(--prugna);
    border-bottom:3px solid var(--ink);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 0;display:none}
  .barra nav.aperto{display:flex}
  .barra nav a{display:block;width:100%;padding:14px 24px}
  .barra nav a.solo-mobile{display:block;color:var(--carta);font-weight:800}
  .barra nav.nav-statica{display:flex;position:static;flex-direction:row;background:none;border:0;padding:0}
  .apri-menu{display:block}
  .barra .btn--nav{padding:10px 14px;font-size:13px}
}

/* ---------- Copertina (hero) ---------- */
.copertina{position:relative;padding:40px 0 76px;overflow:hidden}
.copertina::before{content:"";position:absolute;inset:-20% -30%;z-index:0;
  background:repeating-conic-gradient(from 0deg at 50% 58%,var(--oro) 0deg 5deg,transparent 5deg 11deg);
  opacity:.13;
  -webkit-mask-image:radial-gradient(closest-side at 50% 58%,#000 30%,transparent 72%);
  mask-image:radial-gradient(closest-side at 50% 58%,#000 30%,transparent 72%)}
.copertina .wrap{position:relative;z-index:1;text-align:center}
.claim{margin:34px 0 0;font-family:var(--f-disp);font-weight:680;font-variation-settings:var(--disp-var);
  font-size:clamp(2.6rem,11vw,7rem);line-height:.96;letter-spacing:-.02em;text-transform:uppercase}
.claim .riga{display:table;margin:0 auto;position:relative}
.claim .riga i{font-style:normal;position:relative;z-index:1}
.claim .riga::before{content:attr(data-text);content:attr(data-text) / "";position:absolute;z-index:0;
  color:var(--riga-fuori,var(--oro));transform:translate(-.038em,-.038em);white-space:nowrap}
.claim .riga{color:var(--viola);--riga-fuori:var(--oro)}
.claim .riga i{text-shadow:var(--xd2)}
.stella-claim{width:.35em;height:.35em;color:var(--oro);vertical-align:baseline;margin:0 .06em}
@media (prefers-reduced-motion:no-preference){
  .claim .riga::before{opacity:0;animation:passata .01s steps(1) forwards}
  .claim .riga i{opacity:0;animation:timbro .5s var(--timbro) forwards;display:inline-block}
  .r1::before{animation-delay:.15s}.r1 i{animation-delay:.3s}
  .r2::before{animation-delay:.5s}.r2 i{animation-delay:.65s}
  .r3::before{animation-delay:.85s}.r3 i{animation-delay:1s}
  .stella-claim{opacity:0;transform:scale(0);animation:scintilla .55s var(--timbro) 1.45s forwards}
}
@keyframes passata{to{opacity:1}}
@keyframes timbro{0%{opacity:0;transform:scale(1.06)}60%{opacity:1;transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
@keyframes scintilla{0%{opacity:0;transform:scale(0) rotate(-90deg)}70%{opacity:1;transform:scale(1.25) rotate(10deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.payoff{font-family:var(--f-disp);font-style:italic;font-weight:460;
  font-variation-settings:'opsz' 60,'SOFT' 80,'WONK' 1;
  font-size:clamp(1.25rem,3vw,1.7rem);margin:30px 0 0;color:var(--prugna)}
.copertina .sotto{max-width:56ch;margin:22px auto 0;font-size:17.5px}
.copertina .azioni{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.azioni-sec{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.link-testo{font:800 14px/1.4 var(--f-body);color:var(--prugna);text-decoration:underline;text-underline-offset:4px}
.prova-sociale{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;margin:24px auto 0;
  font:700 12px/1.6 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--oro-t)}
.prova-sociale .stella{width:10px;height:10px;align-self:center}

/* ---------- Striscione ---------- */
.striscione{background:var(--prugna);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  overflow:hidden;padding:14px 0}
.striscione .binario{display:flex;width:max-content}
.striscione span{font-family:var(--f-disp);font-weight:600;
  font-variation-settings:'opsz' 60,'SOFT' 100,'WONK' 0;
  font-size:clamp(1rem,2.2vw,1.35rem);letter-spacing:.06em;text-transform:uppercase;
  color:var(--carta);white-space:nowrap;padding-right:.5em}
.striscione .stella{width:.8em;height:.8em;color:var(--oro);margin:0 .5em;vertical-align:middle}
@media (prefers-reduced-motion:no-preference){
  .striscione .binario{animation:corsa 38s linear infinite}
  .striscione:hover .binario{animation-play-state:paused}
}
@keyframes corsa{to{transform:translateX(-50%)}}

/* ---------- Fascia fotografica ---------- */
.fascia-foto{border-bottom:3px solid var(--ink);overflow:hidden}
.fascia-foto img{display:block;width:100%;height:clamp(260px,38vw,460px);object-fit:cover;object-position:center 62%}

/* ---------- Passi (come funziona) ---------- */
.passi{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.passo{background:var(--carta2);border:3px solid var(--ink);border-radius:16px;
  box-shadow:var(--xd1);padding:30px 26px;position:relative}
.passo .numero{width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);
  box-shadow:var(--xd1);display:grid;place-items:center;
  font:800 24px/1 var(--f-body);margin-bottom:18px}
.passo:nth-child(1) .numero{background:radial-gradient(circle at 32% 28%,#b58cbd 0 36%,var(--viola) 36%);color:var(--carta)}
.passo:nth-child(2) .numero{background:radial-gradient(circle at 32% 28%,#f4c876 0 36%,var(--oro) 36%)}
.passo:nth-child(3) .numero{background:radial-gradient(circle at 32% 28%,#f0a86a 0 36%,var(--arancio) 36%)}
.passo h3{font-family:var(--f-disp);font-weight:640;font-variation-settings:var(--disp-var);
  font-size:1.6rem;margin:0 0 8px}
.passo p{margin:0;font-size:15.5px}
.passo .vignetta{position:relative;margin-bottom:30px}
.passo .vignetta .quadro{border:3px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--xd1)}
.passo .vignetta svg{display:block;width:100%;height:auto;aspect-ratio:340/150}
.passo .vignetta .numero{position:absolute;left:18px;bottom:-16px;margin:0}
.passo:nth-child(1) .quadro{background:repeating-conic-gradient(from 7deg at 50% 56%,#ece2f0 0 15deg,#e2d2e9 15deg 30deg)}
.passo:nth-child(2) .quadro{background:repeating-conic-gradient(from 7deg at 50% 56%,#f9eacb 0 15deg,#f3deaf 15deg 30deg)}
.passo:nth-child(3) .quadro{background:repeating-conic-gradient(from 7deg at 50% 56%,#f9e2cd 0 15deg,#f3d3b3 15deg 30deg)}
.dopo-passi{text-align:center;margin-top:40px}

/* ---------- Archi (cosa si fa) ---------- */
.attivita{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px}
.arco{margin:0;border:3px solid var(--ink);border-radius:999px 999px 14px 14px;
  overflow:hidden;box-shadow:var(--xd2);position:relative;background:var(--carta2)}
.arco img{display:block;width:100%;aspect-ratio:3/3.4;object-fit:cover}
.arco figcaption{border-top:3px solid var(--ink);padding:14px 16px 16px;background:var(--carta2)}
.arco .nome-att{display:flex;align-items:center;gap:9px;
  font-family:var(--f-disp);font-weight:640;font-variation-settings:var(--disp-var);font-size:1.25rem}
.arco .nome-att i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);flex:none}
.arco .desc{font-size:14px;margin:7px 0 0;line-height:1.55}

/* ---------- Giornata tipo ---------- */
.giornata-due{display:grid;grid-template-columns:minmax(0,720px) 250px;gap:48px;align-items:start}
.colonna-foto{display:flex;flex-direction:column;gap:26px;position:sticky;top:110px}
.arco-solo{margin:0;border:3px solid var(--ink);border-radius:999px 999px 14px 14px;
  overflow:hidden;box-shadow:var(--xd1)}
.arco-solo img{display:block;width:100%;aspect-ratio:3/3.6;object-fit:cover}
.arco-solo figcaption{border-top:3px solid var(--ink);background:var(--carta2);
  font:700 11px/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--oro-t);text-align:center;padding:8px 10px}
@media (max-width:860px){
  .giornata-due{grid-template-columns:1fr}
  /* una sotto l'altra, tutte della stessa dimensione */
  .colonna-foto{position:static;flex-direction:column;align-items:center;gap:24px}
  .colonna-foto .arco-solo{width:min(100%,250px)}
}

.giornata{max-width:720px}
.momento{display:flex;gap:22px;padding-bottom:30px;position:relative}
.momento:not(:last-child)::before{content:"";position:absolute;left:25px;top:56px;bottom:0;
  width:3px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.momento .tondo{width:52px;height:52px;flex:none;border-radius:50%;border:3px solid var(--ink);
  box-shadow:var(--xd1);display:grid;place-items:center;font:800 20px/1 var(--f-body)}
.momento .orario{font:700 13.5px/1 var(--f-body);letter-spacing:.08em;color:var(--oro-t);
  font-variant-numeric:tabular-nums;text-transform:uppercase}
.momento h3{font-family:var(--f-disp);font-weight:640;font-variation-settings:var(--disp-var);
  font-size:1.45rem;margin:6px 0 6px}
.momento p{margin:0;font-size:15px}
.nota-giornata{font-family:var(--f-disp);font-style:italic;font-weight:460;font-size:1.25rem;
  color:var(--prugna);text-align:center;max-width:52ch;margin:34px auto 0}
#giornata{padding-bottom:44px}

/* ---------- Citazioni ---------- */
.citazioni{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.citazione{background:var(--carta2);border:3px solid var(--ink);border-radius:16px;
  box-shadow:var(--xd1);padding:28px}
.citazione p{font-family:var(--f-disp);font-style:italic;font-weight:480;
  font-size:1.2rem;line-height:1.5;margin:0 0 16px}
.citazione footer{font:700 12.5px/1 var(--f-body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--oro-t);display:flex;align-items:center;gap:8px}
.citazione footer .stella{width:11px;height:11px}

/* ---------- Numeri (blocco viola) ---------- */
.quadro-viola{background:var(--viola);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:64px 0 72px;color:var(--carta)}
.quadro-viola .kicker{color:var(--carta)}
.quadro-viola .filetto{border-top-color:var(--carta);box-shadow:0 6px 0 -5px var(--carta)}
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;margin-top:44px}
.numero-grande{text-align:center}
.numero-grande .cifra{font-family:var(--f-disp);font-weight:680;font-variation-settings:var(--disp-var);
  font-size:clamp(2.8rem,6vw,4.4rem);line-height:1;text-shadow:3px 3px 0 var(--ink);
  font-variant-numeric:tabular-nums}
.numero-grande .voce{font:700 12.5px/1.5 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;margin-top:10px;color:color-mix(in srgb,var(--carta) 92%,transparent)}

/* ---------- Soglia + Tabellone ---------- */
.soglia{height:clamp(110px,20vw,200px);
  background:radial-gradient(circle at 50% 132%,
    transparent 0 30%, var(--viola) 30% 40%, var(--oro) 40% 49%,
    var(--arancio) 49% 58%, var(--ink) 58% 100%)}
.quadro-nero{background:var(--ink);color:var(--carta);padding:72px 0 90px}
.quadro-nero .kicker{color:var(--oro)}
.quadro-nero .filetto{border-top-color:var(--oro);box-shadow:0 6px 0 -5px var(--oro)}
.quadro-nero h2.titolone{color:var(--carta)}
.quadro-nero .lead{color:color-mix(in srgb,var(--carta) 88%,transparent)}
.mese{font-family:var(--f-disp);font-weight:600;font-variation-settings:'opsz' 60,'SOFT' 100,'WONK' 0;
  font-size:1.4rem;color:var(--oro);margin:34px 0 14px;display:flex;align-items:center;gap:10px}
.mese .stella{width:15px;height:15px}
.tabellone-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.tabellone{border:3px solid var(--carta);border-radius:14px;overflow:hidden;
  background:#181310;box-shadow:6px 6px 0 var(--prugna)}
.tabellone-testata{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 20px;border-bottom:2px solid color-mix(in srgb,var(--carta) 30%,transparent)}
.tabellone-testata .tt{font:700 12px/1.4 var(--f-body);letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro)}
.tabellone-testata .luce{width:10px;height:10px;border-radius:50%;background:var(--oliva);
  box-shadow:0 0 8px var(--oliva)}
@media (prefers-reduced-motion:no-preference){
  .tabellone-testata .luce{animation:respiro 2.4s ease-in-out infinite}
}
@keyframes respiro{50%{opacity:.35}}
.paletta{display:grid;grid-template-columns:120px minmax(210px,1.1fr) 90px minmax(230px,1fr) 36px;
  align-items:center;gap:12px;padding:14px 20px;position:relative;
  border-left:6px solid var(--riga-linea,var(--viola));
  border-bottom:1px solid color-mix(in srgb,var(--carta) 14%,transparent);
  font-variant-numeric:tabular-nums;background:#231b16}
.paletta::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.15)}
.paletta:last-child{border-bottom:none}
.paletta .gg{font:800 13.5px/1.4 var(--f-body);letter-spacing:.08em;color:var(--oro);text-transform:uppercase}
.paletta .dove{font-family:var(--f-disp);font-weight:560;
  font-variation-settings:'opsz' 30,'SOFT' 100,'WONK' 0;font-size:1.12rem;color:var(--carta)}
.paletta .dove small{display:block;font:600 11px/1.5 var(--f-body);letter-spacing:.06em;
  text-transform:uppercase;color:color-mix(in srgb,var(--carta) 60%,transparent)}
.paletta .hh{font:600 13.5px/1.5 var(--f-body);letter-spacing:.04em;color:var(--carta)}
.paletta .att{font:600 12.5px/1.65 var(--f-body);color:color-mix(in srgb,var(--carta) 78%,transparent)}
.paletta .att b{color:var(--carta);font-weight:700}
.paletta .binario{display:grid;place-items:center}
.paletta .binario .stella{width:15px;height:15px;color:var(--oro)}
@media (prefers-reduced-motion:no-preference){
  html.js .paletta{opacity:0;transform:perspective(600px) rotateX(-72deg);transform-origin:50% 0}
  html.js .in-vista .paletta{opacity:1;transform:none;transition:transform .55s var(--timbro),opacity .4s ease}
}
/* stato delle righe: gia' svolte, di oggi e prossima (classi aggiunte da bt.js) */
.tabellone .paletta.passato,html.js .in-vista .paletta.passato{opacity:.5}
.paletta.oggi .gg::after{content:"oggi";display:block;color:var(--oliva);letter-spacing:.16em;font-size:10.5px;margin-top:2px}
.paletta.prossimo{border-left-color:var(--oro)}
.paletta.prossimo .gg::after{content:"prossimo";display:block;color:var(--oro);letter-spacing:.16em;font-size:10.5px;margin-top:2px}
/* righe oltre le prime sei: collassate finche' non si chiede tutto il mese */
.paletta.compresso{display:none}
.btn-espandi{display:block;width:100%;background:#231b16;color:var(--oro);border:0;cursor:pointer;
  border-top:1px solid color-mix(in srgb,var(--carta) 14%,transparent);
  font:700 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:17px 20px}
.btn-espandi:hover{background:#2b211b}
/* sul telefono le palette si ripiegano in verticale: tutto visibile, si scorre solo in giu' */
@media (max-width:820px){
  .paletta{grid-template-columns:1fr auto 20px;gap:3px 10px;padding:15px 16px;
    grid-template-areas:"gg hh bin" "dove dove dove" "att att att"}
  .paletta::after{display:none}
  .paletta .gg{grid-area:gg;align-self:center}
  .paletta .hh{grid-area:hh;align-self:center}
  .paletta .binario{grid-area:bin;align-self:center}
  .paletta .dove{grid-area:dove;margin-top:3px}
  .paletta .att{grid-area:att}
}
.legenda-stato{display:flex;align-items:center;gap:8px;margin:18px 0 0;
  font:600 12.5px/1.5 var(--f-body);letter-spacing:.04em;
  color:color-mix(in srgb,var(--carta) 70%,transparent)}
.nota-prenota{font-family:var(--f-disp);font-style:italic;font-weight:480;
  font-size:1.2rem;color:var(--carta);margin:30px 0 0;text-align:center}
/* listino delle quote associative: informazione, non azione (card bordate, non pill) */
.titolo-quote{font:700 12.5px/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);margin:34px 0 0;display:flex;align-items:center;gap:10px}
.titolo-quote .stella{width:12px;height:12px}
.listino{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;align-items:stretch}
.quota-card{border:3px solid var(--carta);border-radius:14px;padding:20px 16px 18px;text-align:center;
  color:var(--carta);position:relative;display:flex;flex-direction:column;gap:4px;justify-content:center}
.quota-card .voce{font:700 12px/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.quota-card .cifra{font-family:var(--f-disp);font-weight:680;font-variation-settings:var(--disp-var);
  font-size:2.5rem;line-height:1.05;color:var(--oro);font-variant-numeric:tabular-nums}
.quota-card--top{background:var(--oro);color:var(--ink);border-color:var(--carta);
  box-shadow:4px 4px 0 rgba(0,0,0,.55);padding-top:26px}
.quota-card--top .cifra{color:var(--ink)}
.quota-card--top .sotto-cifra{font:700 11.5px/1.4 var(--f-body);letter-spacing:.06em;margin-top:2px}
.quota-card--top .bollino{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--oro);border:2px solid var(--carta);border-radius:999px;
  font:800 10.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;white-space:nowrap}
.quadro-nero .azione-finale{margin-top:36px;text-align:center}

/* ---------- FAQ ---------- */
.faq details{border:3px solid var(--ink);border-radius:14px;background:var(--carta2);
  box-shadow:var(--xd1);margin-bottom:18px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  padding:20px 24px;font-family:var(--f-disp);font-weight:600;
  font-variation-settings:'opsz' 60,'SOFT' 60,'WONK' 0;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .stella{width:14px;height:14px;color:var(--oro-t);flex:none;
  transition:transform var(--t-fast) var(--timbro)}
.faq details[open] summary .stella{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 24px 22px 52px;font-size:15.5px}

/* ---------- Chiusura (blocco prugna) ---------- */
.chiusura{background:var(--prugna);border-top:3px solid var(--ink);padding:76px 0;text-align:center;color:var(--carta)}
.chiusura h2{font-family:var(--f-disp);font-weight:660;font-variation-settings:var(--disp-var);
  font-size:clamp(2rem,5.5vw,3.4rem);line-height:1;letter-spacing:-.015em;margin:0 0 14px;
  text-transform:uppercase;text-shadow:3px 3px 0 var(--ink);text-wrap:balance}
.chiusura p{max-width:46ch;margin:0 auto 30px;font-size:17.5px}

/* ---------- Piede ---------- */
.piede{background:var(--ink);color:var(--carta);padding:56px 0 44px}
.piede .dentro{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.piede .colonna{min-width:200px}
.piede img.logo-piede{width:190px;display:block;margin-bottom:14px}
.piede p{font-size:14px;color:color-mix(in srgb,var(--carta) 75%,transparent);margin:0 0 6px}
.piede h4{font:700 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);margin:0 0 14px}
.piede ul{list-style:none;margin:0;padding:0}
.piede li{margin-bottom:9px}
.piede a{color:var(--carta);text-decoration:none;font-size:14.5px}
.piede a:hover{color:var(--oro)}
.piede .bollo{width:110px;height:110px;position:relative;margin-left:auto}
.piede .bollo svg{width:100%;height:100%;overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .piede .bollo svg{animation:girobollo 120s linear infinite}
}
@keyframes girobollo{to{transform:rotate(360deg)}}
.piede .bollo .cuore{position:absolute;inset:0;display:grid;place-items:center}
.piede .bollo .cuore .stella{width:26px;height:26px;color:var(--oro)}
.piede .fondo{border-top:1px solid color-mix(in srgb,var(--carta) 25%,transparent);
  margin-top:36px;padding-top:20px;font-size:13px;
  color:color-mix(in srgb,var(--carta) 60%,transparent);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ---------- Pagina manifesto ---------- */
.titolo-sfalsato{position:relative;display:table;font-family:var(--f-disp);font-weight:660;
  font-variation-settings:var(--disp-var);font-size:clamp(2.3rem,6.5vw,4.4rem);line-height:1;
  letter-spacing:-.015em;word-spacing:.12em;margin:14px 0 40px;text-transform:uppercase;color:var(--viola)}
.titolo-sfalsato::before{content:attr(data-text);content:attr(data-text) / "";position:absolute;z-index:0;
  color:var(--oro);transform:translate(-.035em,-.035em);white-space:nowrap}
.titolo-sfalsato i{font-style:normal;position:relative;z-index:1;text-shadow:var(--xd2)}
.prosa{max-width:60ch;font-size:18.5px;line-height:1.75}
.prosa p{margin:0 0 1.35em}
.prosa p:first-of-type::first-letter{
  font-family:var(--f-disp);font-weight:680;font-variation-settings:var(--disp-var);
  float:left;font-size:4.5em;line-height:.78;padding:.08em .12em 0 0;
  color:var(--viola);text-shadow:3px 3px 0 var(--oro)}
.prosa .risalto{font-family:var(--f-disp);font-style:italic;font-weight:480;
  font-variation-settings:'opsz' 60,'SOFT' 80,'WONK' 1;
  font-size:1.45rem;line-height:1.5;color:var(--prugna);margin:1.4em 0}
.manifesto-chiusa{margin-top:52px;padding-top:26px;border-top:3px solid var(--ink);
  box-shadow:inset 0 6px 0 -5px var(--ink)}
.manifesto-chiusa .grido{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:800 14px/1.6 var(--f-body);letter-spacing:.15em;text-transform:uppercase;margin-bottom:26px}
.manifesto-chiusa .grido .stella{width:13px;height:13px;color:var(--oro-t)}

/* ---------- Pagina trasparenza ---------- */
.pagina-interna{padding:64px 0 90px}
.pagina-interna .torna{display:inline-flex;align-items:center;gap:8px;
  font:700 13px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--oro-t);margin-bottom:30px}
.pagina-interna h1{font-family:var(--f-disp);font-weight:660;font-variation-settings:var(--disp-var);
  font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;margin:12px 0 24px}
.pagina-interna .pannello{background:var(--carta2);border:3px solid var(--ink);
  border-radius:16px;box-shadow:var(--xd2);padding:36px;margin-bottom:30px}
.pagina-interna .pannello h2{font-family:var(--f-disp);font-weight:640;
  font-variation-settings:var(--disp-var);font-size:1.7rem;margin:0 0 14px}
.pagina-interna .loghi{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:24px}
.pagina-interna .loghi img{max-height:74px;width:auto}

/* ---------- Telefono: testi centrati, spazi piu' raccolti ---------- */
@media (max-width:820px){
  section.blocco{padding:48px 0 56px}
  .testa-blocco{margin-bottom:32px}
  .dopo-passi{margin-top:26px}
  .copertina .sotto{font-size:16px;line-height:1.5}
  .testa-blocco,.lead{text-align:center}
  .lead{margin-left:auto;margin-right:auto}
  .testa-blocco .kicker{justify-content:center}
  .passo{text-align:center}
  /* le attivita' come pagina di locandine affiancate, non rullino */
  .attivita{grid-template-columns:1fr 1fr;gap:14px}
  .arco figcaption{text-align:center;padding:10px 10px 12px}
  .arco .nome-att{justify-content:center;font-size:15px}
  .arco .desc{font-size:12px;line-height:1.45;margin-top:5px}
  .citazioni{grid-template-columns:1fr}
  #giornata{padding-bottom:28px}
  .mese{justify-content:center}
  .legenda-stato{justify-content:center;text-align:center}
  .titolo-quote{justify-content:center}
  .listino{grid-template-columns:minmax(0,300px);justify-content:center;gap:22px}
  .nota-prenota{text-align:center}
  .quadro-nero .azione-finale{text-align:center}
  .quadro-viola .kicker{justify-content:center}
  .piede .dentro{justify-content:center;text-align:center}
  .piede img.logo-piede{margin-left:auto;margin-right:auto}
  .piede .bollo{margin:0 auto}
  /* la grana senza blend: stesso effetto visivo, niente ricompositing continuo */
  body::after{mix-blend-mode:normal;opacity:.04}
}