/* =========================================================================
   COMITES · Italiani nel Mondo
   Sistema di design. Alternativa Popolare + tricolore, usato con misura.
   Palette derivata dal marchio Alternativa Popolare (blu #1B3D6B, blu #115AA5,
   oro/giallo #F2921C > #F1E632) e dai colori della bandiera italiana.
   ========================================================================= */

/* ---------- 1. Token ---------------------------------------------------- */
:root{
  /* superfici */
  --notte:        #0A1A2F;   /* fondo principale: blu profondo, mai nero puro */
  --notte-2:      #0E2440;   /* fondo alternato */
  --blu-ap:       #1B3D6B;   /* blu del marchio Alternativa Popolare */
  --blu-vivo:     #1E6FC4;   /* blu di struttura e link */
  --pannello:     #12294A;   /* superfici rialzate su fondo scuro */
  --carta:        #F6F3EC;   /* superficie chiara: informazione istituzionale */
  --carta-2:      #EDE8DE;

  /* accento */
  --oro:          #F3B21A;
  --oro-chiaro:   #F7D34B;
  --oro-scuro:    #C98A0C;
  --fiamma:       linear-gradient(112deg,#F2921C 0%,#F1E632 100%);

  /* tricolore */
  --verde:        #109E5B;   /* tricolore grafico */
  --verde-scuro:  #0C7A45;   /* verde per testo su fondo chiaro */
  --verde-chiaro: #22B872;   /* verde per testo su fondo scuro */
  --bianco:       #F6F3EC;
  --rosso:        #CE2B37;
  --tricolore:    linear-gradient(90deg,var(--verde) 0 33.33%,var(--bianco) 33.33% 66.66%,var(--rosso) 66.66% 100%);
  /* su fondo chiaro la banda bianca sparirebbe: usiamo un grigio caldo */
  --tricolore-carta: linear-gradient(90deg,var(--verde) 0 33.33%,#CFC7B6 33.33% 66.66%,var(--rosso) 66.66% 100%);
  --tricolore-v:  linear-gradient(180deg,var(--verde) 0 33.33%,var(--bianco) 33.33% 66.66%,var(--rosso) 66.66% 100%);

  /* testo */
  --testo:        #EDF3FA;
  --testo-2:      #A9BDD6;
  --testo-3:      #7E93AF;
  --testo-carta:  #10233D;
  --testo-carta-2:#42566F;

  /* bordi */
  --linea:        rgba(169,189,214,.20);
  --linea-forte:  rgba(169,189,214,.42);
  --linea-carta:  rgba(16,35,61,.16);

  /* tipografia */
  --display: "Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --testo-font: "Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono: "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* misure */
  --h-nav: 96px;          /* altezza della barra: da qui dipendono ancore e spaziature */
  --maxw: 1220px;
  --gutter: clamp(20px,5vw,64px);
  --sezione: clamp(76px,10vw,148px);
  --raggio: 14px;
  --raggio-s: 9px;

  /* movimento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--h-nav) + 18px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--notte);color:var(--testo);
  font-family:var(--testo-font);font-size:clamp(16px,.42vw + 15px,18px);
  line-height:1.62;font-weight:400;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.024em;margin:0}
h1{font-size:clamp(2.55rem,6.4vw,5.1rem)}
h2{font-size:clamp(2rem,4.3vw,3.5rem)}
h3{font-size:clamp(1.22rem,1.7vw,1.6rem);font-weight:700;letter-spacing:-.014em;line-height:1.18}
h4{font-size:1.02rem;font-weight:700;letter-spacing:-.008em;line-height:1.3}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:700;color:#fff}
::selection{background:var(--oro);color:#0A1A2F}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--oro);color:#0A1A2F;
  padding:.85rem 1.3rem;font-weight:700;border-radius:0 0 var(--raggio-s) 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:3px}

/* ---------- 3. Ambiente (un solo strato di fondo per tutto il sito) ----- */
.ambiente{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambiente__alone{
  position:absolute;width:min(115vw,1500px);aspect-ratio:1;left:50%;top:-38vh;translate:-50% 0;
  background:
    radial-gradient(circle at 42% 40%,rgba(30,111,196,.20),transparent 58%),
    radial-gradient(circle at 62% 58%,rgba(243,178,26,.09),transparent 55%);
  filter:blur(12px);animation:deriva 96s var(--ease) infinite;
}
.ambiente__grana{
  position:absolute;inset:-50%;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes deriva{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,4%,0) scale(1.08)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
main,.piede{position:relative;z-index:1}

/* ---------- 4. Impianto ------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sezione{padding-block:var(--sezione);position:relative}
.sezione--carta{background:var(--carta);color:var(--testo-carta)}
.sezione--carta h1,.sezione--carta h2,.sezione--carta h3,.sezione--carta h4{color:var(--testo-carta)}
.sezione--carta strong{color:#000}
.sezione--notte2{background:var(--notte-2)}

/* etichetta di sezione + filo tricolore corto */
.occhiello{
  font-family:var(--mono);font-size:.735rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--testo-3);display:flex;align-items:center;gap:.85rem;margin-bottom:1.4rem;
}
.sezione--carta .occhiello{color:var(--testo-carta-2)}
.sezione--carta .occhiello::before,.passi-intro::before,.sezione--carta .tema::after{background:var(--tricolore-carta)}
.occhiello::before{
  content:"";width:34px;height:3px;border-radius:2px;background:var(--tricolore);flex:none;
}
.lede{font-size:clamp(1.06rem,1.35vw,1.26rem);line-height:1.55;color:var(--testo-2);max-width:60ch}
.sezione--carta .lede{color:var(--testo-carta-2)}

/* ---------- 5. Navigazione --------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(10,26,47,0);backdrop-filter:blur(0px);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-fissa{background:rgba(10,26,47,.86);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--linea)}
.nav__barra{display:flex;align-items:center;gap:1.1rem;height:var(--h-nav)}
.nav__marchio{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:none;margin-right:auto}
.nav__sigla{
  font-family:var(--display);font-weight:800;font-size:1.09rem;letter-spacing:-.022em;line-height:1.12;color:#fff;
}
.nav__sotto{display:block;font-family:var(--mono);font-size:.645rem;letter-spacing:.12em;color:var(--testo-3);text-transform:uppercase;margin-top:4px}
.nav__scudo{width:26px;height:34px;flex:none}
.nav__menu{display:flex;align-items:center;gap:.15rem;flex:none}
.nav__link{
  font-size:.815rem;font-weight:600;text-decoration:none;color:var(--testo-2);
  padding:.55rem .5rem;border-radius:8px;position:relative;transition:color .22s var(--ease);white-space:nowrap;
}
.nav__link:hover{color:#fff}
.nav__link::after{
  content:"";position:absolute;left:.5rem;right:.5rem;bottom:.3rem;height:2px;border-radius:2px;
  background:var(--tricolore);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{transform:scaleX(1)}
.nav__link[aria-current="true"]{color:#fff}
.nav__cta{margin-left:.7rem;white-space:nowrap;flex:none}
.nav__hamburger{
  display:none;background:none;border:1px solid var(--linea-forte);border-radius:9px;
  width:44px;height:44px;color:#fff;cursor:pointer;align-items:center;justify-content:center;flex:none;
}
.nav__hamburger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.3s var(--ease)}
.nav__hamburger span::before,.nav__hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:.3s var(--ease)}
.nav__hamburger span::before{top:-6px}
.nav__hamburger span::after{top:6px}
.nav.is-aperta .nav__hamburger span{background:transparent}
.nav.is-aperta .nav__hamburger span::before{top:0;transform:rotate(45deg)}
.nav.is-aperta .nav__hamburger span::after{top:0;transform:rotate(-45deg)}
/* barra di avanzamento tricolore */
.nav__avanzamento{height:2px;background:var(--tricolore);width:0;transition:width .1s linear;opacity:.9}

@media (max-width:1240px){
  .nav__hamburger{display:flex}
  .nav__menu{
    position:fixed;inset:var(--h-nav) 0 auto;background:var(--notte);box-shadow:0 24px 48px -24px rgba(0,0,0,.7);
    flex-direction:column;align-items:stretch;gap:0;padding:1rem var(--gutter) 2rem;
    border-bottom:1px solid var(--linea);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.32s var(--ease);
    max-height:calc(100dvh - var(--h-nav));overflow-y:auto;
  }
  .nav.is-aperta .nav__menu{transform:none;opacity:1;visibility:visible}
  .nav__link{padding:1.02rem .2rem;font-size:1.05rem;border-bottom:1px solid var(--linea)}
  .nav__link::after{display:none}
  .nav__cta{margin:1.1rem 0 0;justify-content:center;width:100%}
}

/* ---------- 6. Bottoni -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--testo-font);font-size:.925rem;font-weight:700;letter-spacing:-.005em;
  padding:.86rem 1.5rem;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  background:transparent;color:inherit;-webkit-appearance:none;appearance:none;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
  line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--oro{background:var(--oro);color:#0A1A2F;box-shadow:0 8px 24px -12px rgba(243,178,26,.85)}
.btn--oro:hover{background:var(--oro-chiaro);box-shadow:0 14px 32px -12px rgba(243,178,26,.95)}
.btn--linea{border-color:var(--linea-forte);color:var(--testo)}
.btn--linea:hover{border-color:var(--oro);color:var(--oro)}
.sezione--carta .btn--linea{border-color:var(--linea-carta);color:var(--testo-carta)}
.sezione--carta .btn--linea:hover{border-color:var(--blu-ap);color:var(--blu-ap)}
.btn--scuro{background:var(--blu-ap);color:#fff}
.btn--scuro:hover{background:#24507f}
.btn__freccia{transition:transform .3s var(--ease)}
.btn:hover .btn__freccia{transform:translateX(3px)}
@media (pointer:coarse){
  .btn{min-height:48px;padding-inline:1.6rem}
  .nav__link{min-height:44px;display:flex;align-items:center}
}

/* ---------- 7. Il filo (elemento firma) --------------------------------- */
.filo{position:absolute;pointer-events:none;overflow:visible}
.filo path{fill:none;stroke-linecap:round}
.js .filo__tratto{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.is-visibile .filo__tratto{transition:stroke-dashoffset 1.9s var(--ease-out)}
.is-visibile .filo__tratto{stroke-dashoffset:0}

/* ---------- 8. Entrate al scroll --------------------------------------- */
.js .rivela{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js .rivela--sx{transform:translateX(-26px)}
.js .rivela--scala{transform:scale(.965)}
.js .rivela--sfuma{transform:none;filter:blur(6px);transition:opacity .9s var(--ease-out),filter .9s var(--ease-out)}
/* lo stato finale deve battere ogni variante: due classi piu' .js, mai meno specifico */
.js .rivela.is-visibile,.rivela.is-visibile{opacity:1;transform:none;filter:none}
[data-ritardo="1"]{transition-delay:.09s}
[data-ritardo="2"]{transition-delay:.18s}
[data-ritardo="3"]{transition-delay:.27s}
[data-ritardo="4"]{transition-delay:.36s}
[data-ritardo="5"]{transition-delay:.45s}
[data-ritardo="6"]{transition-delay:.54s}

/* righe di testo che salgono */
.riga-mask{display:block;overflow:hidden;padding-bottom:.06em}
.js .riga-mask>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease-out)}
.is-visibile .riga-mask>span{transform:none}
.is-visibile .riga-mask:nth-child(2)>span{transition-delay:.1s}
.is-visibile .riga-mask:nth-child(3)>span{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .rivela,.riga-mask>span,.filo__tratto{transition:none!important}
  .rivela{opacity:1!important;transform:none!important;filter:none!important}
  .riga-mask>span{transform:none!important}
  .filo__tratto{stroke-dashoffset:0!important}
  .ambiente__alone{animation:none}
  .btn:hover{transform:none}
  *{scroll-behavior:auto!important}
}

/* ---------- 9. Eroe ----------------------------------------------------- */
.eroe{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--h-nav) + 58px);overflow:hidden;isolation:isolate;
}
.eroe__mappa{
  position:absolute;z-index:-1;top:48%;left:50%;translate:calc(-50% + 9vw) -50%;
  width:min(1720px,150vw);opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 52% 50%,#000 42%,transparent 82%);
  mask-image:radial-gradient(ellipse 62% 78% at 52% 50%,#000 42%,transparent 82%);
}
.eroe__mappa img{width:100%}
.eroe__velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--notte) 6%,rgba(10,26,47,.82) 38%,rgba(10,26,47,.24) 64%,rgba(10,26,47,.6) 100%);
}
.eroe__corpo{padding-bottom:clamp(38px,6vw,74px);flex:1;display:flex;align-items:center}
.eroe__testo{max-width:min(100%,50rem)}
.eroe h1{max-width:15ch;font-size:clamp(2.55rem,5.5vw,4.5rem)}

.eroe__occhiello{
  align-items:flex-start;font-family:var(--mono);font-size:.735rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);
  display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem;font-weight:500;
}
.eroe__occhiello::before{content:"";width:44px;height:3px;border-radius:2px;background:var(--tricolore);margin-top:.5em;flex:none}
.eroe h1{color:#fff;text-wrap:balance}
.eroe h1 em{font-style:normal;color:var(--oro);position:relative}
.eroe__lede{
  margin-top:1.65rem;font-size:clamp(1.06rem,1.25vw,1.235rem);line-height:1.58;color:var(--testo-2);
  max-width:52ch;
}
.eroe__azioni{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* striscia scadenze */
.striscia{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:rgba(10,26,47,.5);backdrop-filter:blur(6px)}
.striscia__griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea)}
.striscia__cella{background:var(--notte);padding:1.35rem clamp(1rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.28rem}
.striscia__et{font-family:var(--mono);font-size:.685rem;letter-spacing:.13em;text-transform:uppercase;color:var(--testo-3)}
.striscia__val{font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.32rem);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2}
.striscia__val--oro{color:var(--oro)}
.striscia__nota{font-size:.79rem;color:var(--testo-3);line-height:1.4}
@media (max-width:860px){
  .striscia__griglia{grid-template-columns:1fr}
  .eroe__testo{max-width:100%}
  .eroe__mappa{opacity:.42;width:300vw;translate:calc(-50% + 34vw) -50%;top:46%}
}

/* ---------- 10. Manifesto ---------------------------------------------- */
.manifesto{padding-block:clamp(72px,9vw,128px);background:var(--notte-2);position:relative;overflow:hidden}
.manifesto__filo{position:absolute;left:50%;top:0;width:2px;height:clamp(56px,7vw,104px);translate:-50% 0;opacity:.75;
  background:linear-gradient(180deg,var(--verde),var(--bianco) 50%,var(--rosso))}
.manifesto__filo::after{content:"";position:absolute;left:50%;top:100%;translate:-50% 0;width:1px;height:26px;
  background:linear-gradient(180deg,var(--rosso),transparent)}
.manifesto h2{
  font-size:clamp(2.1rem,5.1vw,4.1rem);text-align:center;text-wrap:balance;color:#fff;max-width:19ch;margin-inline:auto;
}
.manifesto .numero__fonte{font-family:var(--testo-font);font-size:.78rem;letter-spacing:0;margin-top:1.4rem;max-width:52ch}
.manifesto p{
  margin:1.9rem auto 0;text-align:center;color:var(--testo-2);max-width:56ch;
  font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.62;
}
.manifesto__cifra{
  display:block;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(3.4rem,9vw,7rem);line-height:1;text-align:center;margin-bottom:.35rem;
  background:var(--fiamma);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 11. Pilastri (cosa sono) ------------------------------------ */
.due-colonne{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.colonna-fissa{position:sticky;top:calc(var(--h-nav) + 28px)}
@media (max-width:940px){
  .due-colonne{grid-template-columns:1fr;gap:2.6rem}
  .colonna-fissa{position:static}
}
.pilastri{display:flex;flex-direction:column}
.pilastro{
  border-top:1px solid var(--linea);padding:clamp(1.6rem,2.6vw,2.2rem) 0;display:grid;
  grid-template-columns:auto 1fr;gap:clamp(1.1rem,2vw,1.8rem);align-items:start;
  transition:border-color .4s var(--ease);
}
.pilastro:last-child{border-bottom:1px solid var(--linea)}
.pilastro__num{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--testo-3);padding-top:.42rem;
  transition:color .4s var(--ease);
}
.pilastro h3{margin-bottom:.5rem;color:#fff;transition:color .35s var(--ease)}
.pilastro p{margin:0;color:var(--testo-2);max-width:52ch}
.pilastro__segno{
  width:38px;height:38px;flex:none;color:var(--oro);opacity:.85;margin-bottom:.7rem;
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.pilastro:hover .pilastro__segno,.pilastro:focus-within .pilastro__segno{transform:translateY(-3px) rotate(-4deg);opacity:1}
.pilastro:hover h3{color:var(--oro-chiaro)}
.pilastro:hover{border-color:var(--linea-forte)}

/* citazione istituzionale */
.citazione{
  background:var(--carta);color:var(--testo-carta);border-radius:var(--raggio);
  padding:clamp(1.6rem,3vw,2.3rem);position:relative;overflow:hidden;
}
.citazione::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tricolore-v)}
.citazione blockquote{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(1.12rem,1.6vw,1.42rem);line-height:1.34}
.sezione--carta .tag-fonte,.citazione .tag-fonte{color:var(--verde-scuro);border-color:rgba(12,122,69,.4)}
.citazione cite{display:block;margin-top:1.05rem;font-style:normal;
  font-size:.82rem;color:var(--testo-carta-2);line-height:1.55;max-width:46ch}
.tag-fonte{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--verde-chiaro);border:1px solid rgba(34,184,114,.45);
  padding:.28rem .6rem;border-radius:999px;margin-bottom:1rem;font-weight:500;
}
.tag-fonte::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag-fonte--politica,.sezione--carta .tag-fonte--politica{color:var(--oro-scuro);border-color:rgba(201,138,12,.5)}
.sezione:not(.sezione--carta) .tag-fonte--politica{color:var(--oro);border-color:rgba(243,178,26,.45)}
.testata .tag-fonte--politica{color:var(--oro);border-color:rgba(243,178,26,.45)}
.tag-fonte--politica::before{background:var(--oro)}

/* fatti in riga */
.fatti{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden;margin-top:clamp(2.4rem,5vw,4rem)}
.fatto{background:var(--notte);padding:clamp(1.15rem,2vw,1.6rem)}
.sezione--carta .fatti{background:var(--linea-carta);border-color:var(--linea-carta)}
.sezione--carta .fatto{background:var(--carta)}
.fatto__val{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.15rem);
  letter-spacing:-.03em;color:var(--oro);line-height:1.05}
.sezione--carta .fatto__val{color:var(--blu-ap)}
.fatto__et{font-size:.845rem;color:var(--testo-2);margin-top:.4rem;line-height:1.4}
.sezione--carta .fatto__et{color:var(--testo-carta-2)}
@media (max-width:760px){.fatti{grid-template-columns:repeat(2,1fr)}}

/* ---------- 12. Temi (perché contano) ---------------------------------- */
.temi{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:clamp(.9rem,1.5vw,1.15rem);margin-top:clamp(2.6rem,5vw,3.8rem)}
.tema{
  background:rgba(255,255,255,.62);border:1px solid var(--linea-carta);border-radius:var(--raggio);
  padding:clamp(1.25rem,2vw,1.6rem);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.tema::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tricolore);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.tema:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(16,35,61,.55);border-color:rgba(16,35,61,.28)}
.tema:hover::after{transform:scaleX(1)}
.tema__icona{width:30px;height:30px;color:var(--blu-vivo);margin-bottom:.95rem}
.tema h3{font-size:1.06rem;margin-bottom:.42rem}
.tema p{margin:0;font-size:.925rem;line-height:1.55;color:var(--testo-carta-2)}
.nota-riquadro{
  margin-top:clamp(2rem,4vw,2.8rem);border-left:3px solid var(--blu-vivo);padding:.3rem 0 .3rem 1.15rem;
  font-size:.95rem;color:var(--testo-carta-2);max-width:66ch;
}
.sezione:not(.sezione--carta) .nota-riquadro{color:var(--testo-2);border-color:var(--oro)}

/* ---------- 13. Il mondo ------------------------------------------------ */
.mondo{position:relative;overflow:hidden}
.mappa{position:relative;margin-top:clamp(2.4rem,4vw,3.4rem)}
.mappa__tela{position:relative;width:100%}
.mappa__punti{width:100%;opacity:.55;filter:saturate(.6)}
.mappa__strato{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arco{fill:none;stroke:url(#gradArco);stroke-width:1.6;opacity:.8;stroke-linecap:round}
.perno{cursor:pointer}
.perno__alone{fill:var(--oro);opacity:.14}
.perno__punto{fill:var(--oro);stroke:var(--notte);stroke-width:1.5}
.perno__testo{
  font-family:var(--mono);font-size:15px;font-weight:500;fill:#fff;letter-spacing:.02em;
  paint-order:stroke;stroke:var(--notte);stroke-width:4px;stroke-linejoin:round;
}
.perno:hover .perno__alone{opacity:.34}
.perno:hover .perno__punto{fill:var(--oro-chiaro)}
.perno--roma .perno__punto{fill:var(--bianco)}
.perno--roma .perno__testo{fill:var(--oro)}
.mappa__legenda{
  display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--testo-3);
}
.mappa__legenda b{color:var(--testo);font-weight:500}
.numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(2.6rem,5vw,3.6rem)}
.numero__cifra{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.3rem,4.6vw,3.6rem);color:#fff;
}
.numero__cifra span{color:var(--oro)}
.numero__et{margin-top:.6rem;font-size:.925rem;color:var(--testo-2);line-height:1.5;max-width:32ch}
.numero__fonte{margin-top:.55rem;font-family:var(--mono);font-size:.665rem;letter-spacing:.04em;color:var(--testo-3);line-height:1.6;max-width:64ch}
.numero__fonte a{color:var(--testo-3);text-decoration:underline;text-underline-offset:2px}
.numero__fonte a:hover{color:var(--oro)}
@media (max-width:820px){
  .numeri{grid-template-columns:1fr;gap:1.9rem}
  .perno__testo{font-size:22px;stroke-width:5px}
  .mappa__tela{width:172%;margin-left:-36%}
}

/* ---------- 14. Percorso (come funzionano) ----------------------------- */
.percorso{position:relative;margin-top:clamp(2.8rem,5vw,4rem)}
.percorso__linea{position:absolute;left:0;top:34px;width:100%;height:2px;overflow:visible}
.percorso__tratto{stroke:url(#gradPercorso)}
.percorso__tappe{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.9rem,2vw,1.6rem);position:relative}
.tappa{position:relative;padding-top:0}
.tappa__nodo{
  width:68px;height:68px;border-radius:50%;border:1px solid var(--linea-forte);background:var(--notte);
  display:flex;align-items:center;justify-content:center;color:var(--oro);position:relative;z-index:2;
  transition:border-color .4s var(--ease),transform .5s var(--ease),background .4s var(--ease);
}
.tappa:hover .tappa__nodo{border-color:var(--oro);transform:scale(1.06);background:var(--pannello)}
.tappa__nodo svg{width:28px;height:28px}
.tappa h3{font-size:1.02rem;margin:1.3rem 0 .45rem;color:#fff}
.tappa p{margin:0;font-size:.9rem;line-height:1.55;color:var(--testo-2)}
.tappa__idx{position:absolute;right:6px;top:-2px;font-family:var(--mono);font-size:.68rem;color:var(--testo-3);z-index:3}
@media (max-width:900px){
  .percorso__tappe{grid-template-columns:1fr;gap:0}
  .percorso__linea{display:none}
  .tappa{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:1.35rem;row-gap:.15rem;
    padding-bottom:2.2rem;align-items:start}
  .tappa__nodo{grid-column:1;grid-row:1/3}
  .tappa__idx{grid-column:2;grid-row:1;position:static;padding-top:.15rem}
  .tappa>div:last-child{grid-column:2;grid-row:2;min-width:0}
  .tappa::after{content:"";position:absolute;left:34px;top:76px;bottom:4px;width:2px;
    background:linear-gradient(180deg,var(--linea-forte),transparent)}
  .tappa:last-child::after{display:none}
  .tappa h3{margin:.15rem 0 .4rem}
}

/* ---------- 15. Partecipare / elezioni --------------------------------- */
.avviso{
  display:flex;gap:1rem;align-items:flex-start;background:rgba(243,178,26,.09);
  border:1px solid rgba(243,178,26,.34);border-radius:var(--raggio);padding:clamp(1.1rem,2vw,1.5rem);
  margin-top:clamp(1.8rem,3vw,2.4rem);
}
.avviso svg{width:24px;height:24px;flex:none;color:var(--oro);margin-top:2px}
.avviso p{margin:0;font-size:.985rem;line-height:1.58}
.sezione--carta .avviso{background:rgba(206,43,55,.055);border-color:rgba(206,43,55,.28)}
.sezione--carta .avviso svg{color:var(--rosso)}

.passi{display:flex;flex-direction:column;gap:1px;background:var(--linea-carta);
  border:1px solid var(--linea-carta);border-radius:var(--raggio);overflow:hidden;margin-top:clamp(2.2rem,4vw,3rem)}
.passo{background:var(--carta);padding:clamp(1.25rem,2.4vw,1.75rem);display:grid;
  grid-template-columns:auto 1fr auto;gap:clamp(1rem,2vw,1.6rem);align-items:start;
  transition:background .35s var(--ease)}
.passo:hover{background:#fff}
.passo__num{
  width:38px;height:38px;border-radius:50%;background:var(--blu-ap);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.86rem;font-weight:600;
}
.passo h3{font-size:1.1rem;margin-bottom:.4rem}
.passo p{margin:0;font-size:.955rem;line-height:1.58;color:var(--testo-carta-2);max-width:62ch}
.passo__data{
  font-family:var(--mono);font-size:.735rem;letter-spacing:.05em;color:#B01F2B;white-space:nowrap;
  border:1px solid rgba(176,31,43,.32);border-radius:999px;padding:.32rem .7rem;background:rgba(176,31,43,.05);
}
.passo__data--neutro{color:var(--testo-carta-2);border-color:var(--linea-carta);background:transparent}
.passo__spunta{
  width:26px;height:26px;border-radius:7px;border:1.5px solid var(--linea-carta);background:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:transparent;flex:none;
  transition:.3s var(--ease);
}
.passo__spunta[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.passo__spunta svg{width:15px;height:15px}
.passo.is-fatto h3{text-decoration:line-through;text-decoration-color:rgba(16,158,91,.6);text-decoration-thickness:2px}
.passo__testa{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center;margin-bottom:.4rem}
.passo__testa h3{margin:0}
.passo__lato{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
@media (max-width:720px){
  .passo{grid-template-columns:auto 1fr;gap:.9rem 1rem}
  .passo__lato{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start}
}
.passi-intro{display:flex;align-items:center;gap:.6rem;margin-top:clamp(2.2rem,4vw,3rem);margin-bottom:-.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--testo-carta-2)}
.passi-intro::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--tricolore-carta)}
.passi-intro + .passi{margin-top:1.2rem}
.avanzamento-passi{
  display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.06em;color:var(--testo-carta-2);
}
.avanzamento-passi__barra{flex:1;height:5px;border-radius:3px;background:var(--linea-carta);overflow:hidden;max-width:280px}
.avanzamento-passi__pieno{height:100%;width:0;background:var(--tricolore);transition:width .5s var(--ease)}

/* ---------- 16. Alternativa Popolare ----------------------------------- */
.ap{background:var(--notte);position:relative;overflow:hidden}
.ap__pannello{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:center;background:var(--pannello);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:clamp(1.8rem,4vw,3.4rem);position:relative;overflow:hidden;
}
.ap__pannello::before{
  content:"";position:absolute;right:-14%;top:-46%;width:56%;aspect-ratio:1;border-radius:50%;
  background:var(--fiamma);opacity:.12;filter:blur(48px);
}
.ap__marchio{display:flex;align-items:center;gap:1rem}
.ap__scudo{width:64px;height:82px;flex:none}
.ap__nome{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.022em;line-height:1.12;color:#fff}
.ap__nome span{display:block;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oro);margin-top:.4rem}
.ap p{color:var(--testo-2)}
.ap p:last-of-type{margin-bottom:0}
@media (max-width:860px){.ap__pannello{grid-template-columns:1fr;gap:2rem}}

/* ---------- 17. FAQ ----------------------------------------------------- */
.faq{max-width:860px;margin-inline:auto}
.faq__voce{border-bottom:1px solid var(--linea)}
.faq__voce:first-child{border-top:1px solid var(--linea)}
.faq__bottone{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;color:inherit;
  display:flex;align-items:flex-start;gap:1.2rem;padding:clamp(1.15rem,2vw,1.5rem) 0;
  font-family:var(--display);font-weight:700;letter-spacing:-.014em;line-height:1.3;
  font-size:clamp(1.02rem,1.35vw,1.2rem);transition:color .3s var(--ease);
}
.faq__bottone:hover{color:var(--oro)}
.faq__segno{
  margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--linea-forte);
  display:flex;align-items:center;justify-content:center;position:relative;transition:.35s var(--ease);margin-top:2px;
}
.faq__segno::before,.faq__segno::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:.35s var(--ease)}
.faq__segno::before{width:11px;height:1.5px}
.faq__segno::after{width:1.5px;height:11px}
.faq__bottone[aria-expanded="true"] .faq__segno{background:var(--oro);border-color:var(--oro);color:#0A1A2F;transform:rotate(90deg)}
.faq__bottone[aria-expanded="true"] .faq__segno::after{opacity:0}
.faq__risposta{overflow:hidden}
.js .faq__risposta{height:0;transition:height .45s var(--ease)}
@media (prefers-reduced-motion:reduce){.faq__risposta{transition:none}}
.faq__risposta>div{padding-bottom:1.6rem;padding-right:3rem;color:var(--testo-2);font-size:.985rem;line-height:1.66;max-width:70ch}
.faq__risposta a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.faq__risposta p:last-child{margin-bottom:0}
@media (max-width:640px){.faq__risposta>div{padding-right:0}}

/* ---------- 18. Chiusura ------------------------------------------------ */
.chiusura{position:relative;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,var(--notte) 0%,var(--blu-ap) 190%)}
.chiusura h2{font-size:clamp(2.1rem,5vw,4rem);color:#fff;max-width:17ch;margin-inline:auto;text-wrap:balance}
.chiusura p{margin:1.6rem auto 0;max-width:52ch;color:var(--testo-2);font-size:clamp(1rem,1.2vw,1.14rem)}
.chiusura__azioni{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.3rem}
.chiusura__filo{position:absolute;left:50%;top:0;translate:-50% 0;width:2px;height:clamp(50px,8vw,92px);
  background:linear-gradient(180deg,var(--rosso),transparent)}

/* ---------- 19. Piede --------------------------------------------------- */
.piede{background:#07131F;border-top:1px solid var(--linea);padding-block:clamp(3rem,6vw,4.6rem) 2rem}
.piede__alto{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);padding-bottom:clamp(2.4rem,4vw,3.4rem);border-bottom:1px solid var(--linea)}
.piede__frase{font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;color:#fff;margin:1.15rem 0 .8rem;line-height:1.25}
.piede__nota{font-size:.85rem;color:var(--testo-3);line-height:1.6;max-width:42ch}
.piede__titolo{font-family:var(--mono);font-size:.685rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--testo-3);margin-bottom:1.05rem;line-height:1.4}
.piede__lista li{margin-bottom:.62rem}
.piede__lista a{font-size:.9rem;color:var(--testo-2);text-decoration:none;transition:color .25s var(--ease)}
.piede__lista a:hover{color:var(--oro)}
.piede__basso{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;padding-top:1.8rem}
.piede__legale{font-size:.775rem;color:var(--testo-3);max-width:74ch;line-height:1.6}
.piede__tricolore{height:3px;width:52px;border-radius:2px;background:var(--tricolore);margin-bottom:1.4rem}
@media (max-width:860px){.piede__alto{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.piede__alto{grid-template-columns:1fr;gap:2.2rem}}

/* ---------- 20. Pagine interne ----------------------------------------- */
.testata{padding-top:clamp(164px,17vw,212px);padding-bottom:clamp(2.6rem,5vw,4rem);position:relative;overflow:hidden}
.testata h1{font-size:clamp(2.15rem,5vw,3.9rem);max-width:18ch;color:#fff;text-wrap:balance}
.testata .lede{margin-top:1.4rem}
.briciole{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--testo-3);margin-bottom:1.5rem}
.briciole a{color:var(--testo-3);text-decoration:none}
.briciole a:hover{color:var(--oro)}
.prosa{max-width:70ch}
.prosa h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:clamp(2.4rem,4vw,3.2rem) 0 1rem}
.prosa h3{margin:2rem 0 .7rem}
.prosa p,.prosa li{color:var(--testo-2)}
.prosa ul{list-style:none;margin:0 0 1.2rem}
.prosa ul li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
.prosa ul li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--oro)}
.prosa a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.prosa strong{color:#fff}
.elenco-fonti{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden;margin-top:2rem}
.fonte-riga{background:var(--notte);padding:1.25rem 1.4rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.fonte-riga h3{font-size:1rem;margin-bottom:.3rem;color:#fff}
.fonte-riga p{margin:0;font-size:.885rem;color:var(--testo-2)}
.fonte-riga a{white-space:nowrap}
@media (max-width:640px){.fonte-riga{grid-template-columns:1fr}}

/* ---------- 21. Utilità ------------------------------------------------- */
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.aggiornato{font-family:var(--mono);font-size:.7rem;line-height:1.7;letter-spacing:.04em;color:var(--testo-3);margin-top:1.6rem;max-width:78ch}
.sezione--carta .aggiornato{color:var(--testo-carta-2)}

/* ---------- 22. Archi e perni animati ---------------------------------- */
.js .arco{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.js .is-visibile .arco{transition:stroke-dashoffset 2.4s var(--ease-out),opacity .5s var(--ease),stroke-width .3s var(--ease);stroke-dashoffset:0}
.js .is-visibile .arco:nth-of-type(2){transition-delay:.12s}
.js .is-visibile .arco:nth-of-type(3){transition-delay:.24s}
.js .is-visibile .arco:nth-of-type(4){transition-delay:.36s}
.js .is-visibile .arco:nth-of-type(5){transition-delay:.48s}
.js .is-visibile .arco:nth-of-type(6){transition-delay:.6s}
.js .is-visibile .arco:nth-of-type(7){transition-delay:.72s}
.js .is-visibile .arco:nth-of-type(8){transition-delay:.84s}
.js .is-visibile .arco:nth-of-type(n+9){transition-delay:.96s}
.arco.is-acceso{stroke-width:3;opacity:1}
.perno__punto,.perno__alone{transition:r .35s var(--ease),fill .3s var(--ease),opacity .3s var(--ease)}
.perno.is-acceso .perno__punto{fill:var(--oro-chiaro);r:7}
.perno.is-acceso .perno__alone{opacity:.4;r:20}
.js .perno{opacity:0;transition:opacity .6s var(--ease)}
.js .is-visibile .perno{opacity:1;transition-delay:1.1s}
.js .is-visibile .perno--roma{transition-delay:.2s}

/* pulsazione discreta su Roma */
@keyframes battito{0%,100%{opacity:.16;r:17}50%{opacity:.32;r:22}}
.is-visibile .perno--roma .perno__alone{animation:battito 4.5s var(--ease) 1.6s infinite}

/* ---------- 23. Elenco citta' ------------------------------------------ */
.citta-elenco{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.9rem}
.citta{
  font-family:var(--mono);font-size:.775rem;letter-spacing:.03em;color:var(--testo-2);
  background:transparent;border:1px solid var(--linea);border-radius:999px;padding:.46rem .92rem;
  cursor:pointer;transition:.28s var(--ease);
}
.citta:hover,.citta.is-attiva,.citta.is-bloccata{color:#0A1A2F;background:var(--oro);border-color:var(--oro)}
@media (pointer:coarse){.citta{min-height:44px;padding-inline:1.1rem}}

/* ---------- 24. Meno movimento (interruttore in tempo reale) ------------ */
.meno-movimento .ambiente__alone{animation:none}
.meno-movimento .arco{stroke-dashoffset:0!important;transition:none!important}
.meno-movimento .perno{opacity:1!important;transition:none!important}
.meno-movimento .perno--roma .perno__alone{animation:none}
.meno-movimento .rivela,.meno-movimento .riga-mask>span{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
.meno-movimento .faq__risposta{transition:none}

/* ---------- 25. Calendario elettorale ---------------------------------- */
.calendario{position:relative;margin-top:clamp(2.2rem,4vw,3rem);padding-left:clamp(30px,4vw,44px)}
.calendario::before{
  content:"";position:absolute;left:9px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--verde),var(--bianco) 50%,var(--rosso));opacity:.85;
}
.tappa-cal{position:relative;padding-bottom:clamp(1.6rem,3vw,2.2rem)}
.tappa-cal::before{
  content:"";position:absolute;left:calc(-1 * clamp(30px,4vw,44px) + 4px);top:8px;
  width:12px;height:12px;border-radius:50%;background:var(--notte);border:2px solid var(--linea-forte);
}
.tappa-cal--chiave::before{background:var(--oro);border-color:var(--oro);box-shadow:0 0 0 5px rgba(243,178,26,.16)}
.tappa-cal__data{
  font-family:var(--mono);font-size:.775rem;letter-spacing:.06em;color:var(--oro);display:block;margin-bottom:.35rem;
}
.tappa-cal--neutra .tappa-cal__data{color:var(--testo-3)}
.tappa-cal h3{font-size:1.1rem;margin-bottom:.4rem;color:#fff}
.tappa-cal p{margin:0;color:var(--testo-2);font-size:.965rem;line-height:1.6;max-width:64ch}

/* ---------- 26. Modulo di contatto ------------------------------------- */
.modulo{display:grid;gap:1.1rem;max-width:560px;margin-top:2rem}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo label{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--testo-3)}
.campo input,.campo textarea{
  font-family:var(--testo-font);font-size:1rem;color:var(--testo);background:rgba(255,255,255,.035);
  border:1px solid var(--linea-forte);border-radius:var(--raggio-s);padding:.8rem .95rem;width:100%;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.campo input:focus,.campo textarea:focus{border-color:var(--oro);background:rgba(255,255,255,.06);outline:none}
.campo textarea{min-height:132px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--testo-3)}
.modulo__nota{font-size:.83rem;color:var(--testo-3);line-height:1.6;margin:0}

/* ---------- 27. Griglie delle pagine interne --------------------------- */
.griglia-due{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.6rem,3vw,2.6rem);margin-top:clamp(2rem,4vw,3rem)}
.scheda{
  background:var(--pannello);border:1px solid var(--linea);border-radius:var(--raggio);
  padding:clamp(1.3rem,2.4vw,1.85rem);
}
.scheda h3{margin-bottom:.6rem;color:#fff}
.scheda p:last-child{margin-bottom:0}
.scheda p{color:var(--testo-2);font-size:.95rem;line-height:1.6}
.legenda-tag{display:grid;gap:.9rem;margin-top:1.8rem}
.legenda-tag li{display:flex;gap:.9rem;align-items:flex-start;font-size:.94rem;color:var(--testo-2);line-height:1.6}
.legenda-tag .tag-fonte{margin:0;flex:none;white-space:nowrap}

/* ---------- 28. Fotografie della comunità ------------------------------
   Componente pronto per le foto reali della lista. Istruzioni d'uso nel
   file LEGGIMI.md, sezione "Aggiungere le fotografie".
   ---------------------------------------------------------------------- */
.galleria{display:grid;gap:clamp(.9rem,1.6vw,1.25rem);margin-top:clamp(2.4rem,4vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.galleria--tre{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.ritratto{position:relative;overflow:hidden;border-radius:var(--raggio);background:var(--pannello);
  border:1px solid var(--linea);isolation:isolate}
.ritratto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  filter:saturate(.86) contrast(1.04);transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.ritratto--largo img{aspect-ratio:16/10}
.ritratto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(190deg,rgba(10,26,47,0) 34%,rgba(10,26,47,.86) 100%)}
.ritratto::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:var(--tricolore);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.ritratto:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.ritratto:hover::before,.ritratto:focus-within::before{transform:scaleX(1)}
.ritratto figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.15rem 1.25rem;color:#fff}
.ritratto__luogo{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--oro);display:block;margin-bottom:.3rem}
.ritratto__testo{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.014em;line-height:1.25;margin:0}

/* ---------- 29. Stemma della lista -------------------------------------
   Emblema circolare "Italiani in Europa con Massimo Romagnoli".
   Sostituisce il segno tricolore nella barra, nel piede e nel pannello.
   ---------------------------------------------------------------------- */
.stemma{
  flex:none;border-radius:50%;display:block;object-fit:contain;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.14),rgba(255,255,255,.04) 62%,transparent 72%);
}
.nav__marchio .stemma{width:64px;height:64px}
.piede .stemma{width:66px;height:66px}
.ap__stemma{
  width:clamp(208px,27vw,352px);height:auto;aspect-ratio:1;border-radius:50%;
  box-shadow:0 18px 46px -20px rgba(0,0,0,.75),0 0 0 1px rgba(169,189,214,.16);
  transition:transform .6s var(--ease);
}
.ap__pannello:hover .ap__stemma{transform:rotate(-3deg) scale(1.02)}
.ap__marchio{gap:1.25rem}
@media (prefers-reduced-motion:reduce){.ap__pannello:hover .ap__stemma{transform:none}}
@media (max-width:1240px){ :root{ --h-nav:84px } .nav__marchio .stemma{width:56px;height:56px} }
@media (max-width:520px){
  :root{ --h-nav:78px }
  .nav__marchio .stemma{width:50px;height:50px}
  .nav__sigla{font-size:1rem}
  .piede .stemma{width:58px;height:58px}
}

/* ---------- 30. Una vita accanto agli italiani all'estero --------------- */
.vita{position:relative;overflow:hidden}
.vita__griglia{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.4rem,5vw,5.5rem);align-items:center;
}
.vita__testo{max-width:56ch}
.vita h2{font-size:clamp(2.6rem,5.6vw,4.6rem);color:#fff;letter-spacing:-.032em;line-height:.98}
.vita__ruolo{
  margin-top:1.1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oro);
}
.vita__lede{margin-top:1.5rem;font-size:clamp(1.04rem,1.25vw,1.2rem);line-height:1.62;color:var(--testo-2);max-width:54ch}
.vita__azioni{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}

/* il ritratto: cornice editoriale con il filo tricolore sul fianco */
.ritratto-grande{position:relative;isolation:isolate}
.ritratto-grande::before{
  content:"";position:absolute;left:-14px;top:8%;bottom:8%;width:3px;border-radius:2px;
  background:var(--tricolore-v);opacity:.9;
}
.ritratto-grande::after{
  content:"";position:absolute;inset:-8%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(30,111,196,.28),transparent 65%);filter:blur(30px);
}
.ritratto-grande img,.ritratto-vuoto{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  filter:saturate(.95) contrast(1.02);
  border-radius:var(--raggio);border:1px solid var(--linea);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
}
/* segnaposto elegante finche' non arriva la fotografia vera */
.ritratto-vuoto{
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 34%,rgba(30,111,196,.30),transparent 62%),
    linear-gradient(168deg,var(--pannello),var(--notte) 78%);
}
.ritratto-vuoto__sigla{
  font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,7vw,5.6rem);
  letter-spacing:-.04em;color:rgba(237,243,250,.13);line-height:1;
}
.ritratto-vuoto__nota{
  position:absolute;bottom:1rem;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--testo-3);
}

/* le tappe: anni grandi, descrizioni brevi */
.tappe-vita{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(3rem,5vw,4.4rem);
}
.tappa-vita{padding-top:1.05rem;border-top:1px solid var(--linea);transition:border-color .45s var(--ease)}
.tappa-vita:hover{border-top-color:var(--oro)}
.tappa-vita__anno{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.7rem,3vw,2.6rem);
  background:var(--fiamma);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tappa-vita h3{font-size:1.06rem;margin:.75rem 0 .45rem;color:#fff}
.tappa-vita p{margin:0;font-size:.9rem;line-height:1.58;color:var(--testo-2);max-width:32ch}

/* la frase manifesto, quasi a tutta larghezza */
.frase-manifesto{
  margin-top:clamp(4rem,8vw,7rem);position:relative;padding-top:clamp(2.4rem,4vw,3.4rem);
  border-top:1px solid var(--linea);
}
.frase-manifesto p{
  font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:1.08;
  font-size:clamp(1.85rem,4.6vw,3.6rem);color:#fff;max-width:26ch;margin:0;text-wrap:balance;
}
.frase-manifesto p em{font-style:normal;background:var(--fiamma);-webkit-background-clip:text;background-clip:text;color:transparent}
.frase-manifesto p.frase-manifesto__firma{
  margin-top:1.7rem;font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.14em;
  line-height:1.6;text-transform:uppercase;color:var(--testo-3);max-width:none;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
}

@media (max-width:980px){
  .vita__griglia{grid-template-columns:1fr;gap:2.4rem}
  .ritratto-grande{max-width:420px}
  .ritratto-grande::before{left:-10px}
  .tappe-vita{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.2rem}
}
@media (max-width:520px){
  .tappe-vita{grid-template-columns:1fr;gap:0}
  .tappa-vita{padding:1.05rem 0}
  .tappa-vita:last-child{border-bottom:1px solid var(--linea)}
  .ritratto-grande{max-width:none}
}

/* ---------- 31. Le persone ---------------------------------------------
   COMPONENTE PRONTO, AL MOMENTO NON USATO IN PAGINA.
   Il markup della sezione si trova in sezione-persone-modello.html, fuori
   dalla cartella del sito. Serve a presentare i candidati quando la lista
   sara' definitiva. Non rimuovere questo blocco: senza, la sezione non si
   vedrebbe correttamente una volta reinserita.
   ---------------------------------------------------------------------- */
.persone{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem) clamp(1.1rem,2.2vw,2rem);
  margin-top:clamp(2.6rem,5vw,3.8rem);
}
/* sfalsamento editoriale: la griglia non e' mai piatta */
.persona:nth-child(3n+2){margin-top:clamp(1.4rem,3.4vw,3.4rem)}
.persona:nth-child(3n){margin-top:clamp(.7rem,1.7vw,1.7rem)}
.persona__foto{position:relative;overflow:hidden;border-radius:var(--raggio);border:1px solid var(--linea)}
.persona__foto img,.persona__vuoto{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  filter:saturate(.9);transition:transform 1s var(--ease),filter .6s var(--ease);
}
.persona__vuoto{
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 32%,rgba(30,111,196,.24),transparent 64%),
             linear-gradient(168deg,var(--pannello),var(--notte) 80%);
}
.persona__vuoto span{
  font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,2.9rem);
  letter-spacing:-.04em;color:rgba(237,243,250,.14);
}
.persona:hover .persona__foto img{transform:scale(1.04);filter:saturate(1)}
.persona__foto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tricolore);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.persona:hover .persona__foto::after,.persona:focus-within .persona__foto::after{transform:scaleX(1)}
.persona__luogo{
  display:block;margin-top:1.05rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro);
}
.persona h3{font-size:1.16rem;margin:.42rem 0 .18rem;color:#fff}
.persona__ruolo{font-size:.85rem;color:var(--testo-3);margin:0 0 .5rem}
.persona p:last-child{margin:0;font-size:.9rem;line-height:1.58;color:var(--testo-2);max-width:34ch}
@media (max-width:860px){
  .persone{grid-template-columns:repeat(2,minmax(0,1fr))}
  .persona:nth-child(3n+2),.persona:nth-child(3n){margin-top:0}
  .persona:nth-child(2n){margin-top:clamp(1.2rem,4vw,2.4rem)}
}
@media (max-width:520px){
  .persone{grid-template-columns:1fr;gap:2.2rem}
  .persona:nth-child(2n){margin-top:0}
  .persona__foto img,.persona__vuoto{aspect-ratio:4/3}
}

/* ---------- 32. Eventi -------------------------------------------------- */
.eventi-elenco{margin-top:clamp(2.4rem,4.5vw,3.4rem);border-top:1px solid var(--linea)}
.evento{
  display:grid;grid-template-columns:auto 232px minmax(0,1fr) auto;
  gap:clamp(1.2rem,2.4vw,2.2rem);align-items:center;
  padding:clamp(1.4rem,2.6vw,2rem) 0;border-bottom:1px solid var(--linea);
  position:relative;text-decoration:none;color:inherit;
  transition:border-color .45s var(--ease);
}
.evento::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--tricolore);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.evento:hover::before,.evento:focus-visible::before{transform:scaleX(1)}
.evento:hover .evento__titolo{color:var(--oro-chiaro)}
.evento:hover .evento__figura img{transform:scale(1.05)}
.evento:hover .evento__vai{background:var(--oro);color:#0A1A2F;border-color:var(--oro)}

/* il blocco data, elemento grafico riconoscibile */
.data-blocco{
  width:76px;flex:none;text-align:center;border-radius:var(--raggio-s);
  padding:.72rem .3rem .6rem;background:rgba(255,255,255,.035);
  border:1px solid var(--linea);transition:border-color .4s var(--ease),background .4s var(--ease);
}
.evento:hover .data-blocco{border-color:rgba(243,178,26,.5);background:rgba(243,178,26,.07)}
.data-blocco__giorno{
  display:block;font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:1.95rem;color:var(--oro);
}
.data-blocco__mese{
  display:block;margin-top:.2rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--testo-2);
}
.data-blocco__anno{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--testo-3);margin-top:.14rem;
}

.evento__figura{
  position:relative;overflow:hidden;border-radius:var(--raggio-s);border:1px solid var(--linea);
  aspect-ratio:16/10;background:var(--pannello);
}
.evento__figura img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;
  filter:saturate(.92);transition:transform 1s var(--ease)}
/* quando la fotografia manca, una lastra disegnata invece di un buco */
.evento__lastra{
  width:100%;height:100%;display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(circle at 30% 20%,rgba(30,111,196,.34),transparent 62%),
             linear-gradient(150deg,var(--pannello),var(--notte) 82%);
}
.evento__lastra::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tricolore);opacity:.55;
}
.evento__lastra span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(169,189,214,.55);
}
.evento__corpo{min-width:0}
.evento__meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;margin-bottom:.5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--testo-3);
}
.evento__categoria{color:var(--oro);border:1px solid rgba(243,178,26,.36);border-radius:999px;padding:.2rem .55rem}
.evento__titolo{
  font-family:var(--display);font-weight:700;letter-spacing:-.018em;line-height:1.2;
  font-size:clamp(1.12rem,1.7vw,1.42rem);color:#fff;margin:0 0 .45rem;
  transition:color .3s var(--ease);
}
.evento__breve{margin:0;font-size:.93rem;line-height:1.58;color:var(--testo-2);max-width:56ch}
.evento__vai{
  width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--linea-forte);
  display:grid;place-items:center;color:var(--testo-2);transition:.35s var(--ease);
}
.evento__vai svg{width:17px;height:17px}
.eventi__coda{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:clamp(2rem,3.6vw,2.8rem)}
.eventi__vuoto{
  padding:clamp(2rem,4vw,3rem);text-align:center;color:var(--testo-2);
  border:1px dashed var(--linea-forte);border-radius:var(--raggio);margin-top:2rem;
}

@media (max-width:1080px){ .evento{grid-template-columns:auto 180px minmax(0,1fr) auto} }
@media (max-width:860px){
  .evento{grid-template-columns:auto minmax(0,1fr);gap:1rem 1.15rem;align-items:start}
  .evento__figura{grid-column:1/-1;grid-row:1;aspect-ratio:16/9;margin-bottom:.3rem}
  .data-blocco{grid-column:1;grid-row:2}
  .evento__corpo{grid-column:2;grid-row:2}
  .evento__vai{display:none}
}
@media (max-width:520px){ .evento__breve{font-size:.9rem} .data-blocco{width:66px} }

/* ---------- 33. Pagina eventi ------------------------------------------ */
.barra-viste{
  display:flex;gap:.3rem;padding:.28rem;border:1px solid var(--linea);border-radius:999px;
  background:rgba(255,255,255,.03);width:max-content;
}
.barra-viste button{
  border:0;background:none;cursor:pointer;color:var(--testo-2);font-family:var(--testo-font);
  font-size:.85rem;font-weight:600;padding:.55rem 1.1rem;border-radius:999px;
  transition:.3s var(--ease);display:inline-flex;align-items:center;gap:.5rem;
}
.barra-viste button svg{width:16px;height:16px}
.barra-viste button[aria-selected="true"]{background:var(--oro);color:#0A1A2F}
.barra-viste button:not([aria-selected="true"]):hover{color:#fff}
@media (pointer:coarse){ .barra-viste button{min-height:44px} }

.testa-eventi{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  margin-top:clamp(1.8rem,3vw,2.6rem)}
.pagina-eventi{padding-top:0}
.pagina-eventi .gruppo-mese:first-child,.pagina-eventi .calendario-mese{margin-top:clamp(1.4rem,2.6vw,2rem)}
.gruppo-mese{margin-top:clamp(2.4rem,4vw,3.4rem)}
.gruppo-mese__titolo{
  font-weight:500;font-family:var(--mono);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--oro);
  display:flex;align-items:center;gap:.9rem;margin-bottom:.4rem;
}
.gruppo-mese__titolo::after{content:"";height:1px;flex:1;background:var(--linea)}

/* calendario mensile */
.calendario-mese{margin-top:clamp(1.8rem,3vw,2.4rem)}
.calendario-mese__testa{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
h2.calendario-mese__nome{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2vw,1.6rem);color:#fff;letter-spacing:-.02em}
.calendario-mese__frecce{display:flex;gap:.5rem}
.calendario-mese__frecce button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--linea-forte);background:none;
  color:var(--testo-2);cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease);
}
.calendario-mese__frecce button:hover:not(:disabled){border-color:var(--oro);color:var(--oro)}
.calendario-mese__frecce button:disabled{opacity:.35;cursor:default}
.calendario-mese__frecce svg{width:16px;height:16px}
.griglia-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden}
.griglia-cal__intestazione{
  background:var(--notte-2);padding:.7rem .4rem;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-3);
}
.cella-cal{background:var(--notte);min-height:104px;padding:.55rem .5rem;position:relative;display:flex;flex-direction:column;gap:.32rem;min-width:0;overflow:hidden}
.cella-cal--fuori{background:rgba(10,26,47,.55)}
.cella-cal--fuori .cella-cal__numero{color:var(--testo-3);opacity:.5}
.cella-cal__numero{font-family:var(--mono);font-size:.74rem;color:var(--testo-2)}
.cella-cal--oggi .cella-cal__numero{
  color:#0A1A2F;background:var(--oro);border-radius:999px;width:23px;height:23px;
  display:grid;place-items:center;font-weight:600;
}
.pillola-cal{
  display:block;text-align:left;width:100%;max-width:100%;min-width:0;border:0;cursor:pointer;
  background:rgba(30,111,196,.24);border-left:2px solid var(--oro);
  color:var(--testo);font-family:var(--testo-font);font-size:.7rem;line-height:1.28;
  padding:.28rem .4rem;border-radius:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.28s var(--ease);
}
.pillola-cal:hover{background:var(--oro);color:#0A1A2F}
.pillola-cal--passato{background:rgba(169,189,214,.13);border-left-color:var(--testo-3);color:var(--testo-2)}

/* ---------- 34. Scheda evento (finestra) -------------------------------- */
.modale{position:fixed;inset:0;z-index:200;display:none;padding:clamp(.8rem,3vw,2.4rem);overflow-y:auto}
.modale[open]{display:block}
.modale__velo{position:fixed;inset:0;background:rgba(4,12,22,.82);backdrop-filter:blur(6px);border:0}
.modale__foglio{
  position:relative;max-width:760px;margin:clamp(1rem,5vh,4rem) auto;background:var(--notte-2);
  border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9);
}
.modale__chiudi{
  position:absolute;top:.85rem;right:.85rem;z-index:3;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--linea-forte);background:rgba(10,26,47,.8);backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:.3s var(--ease);
}
.modale__chiudi:hover{border-color:var(--oro);color:var(--oro)}
.modale__chiudi svg{width:16px;height:16px}
.modale__figura{background:#08131F;overflow:hidden;display:grid;place-items:center;
  max-height:min(70vh,620px);border-bottom:1px solid var(--linea)}
.modale__figura img{max-width:100%;max-height:min(70vh,620px);width:auto;height:auto;object-fit:contain;display:block}
.modale__corpo{padding:clamp(1.4rem,3.4vw,2.4rem)}
.modale__corpo h2{font-size:clamp(1.5rem,3vw,2.15rem);color:#fff;margin-bottom:1rem;letter-spacing:-.024em}
.scheda-righe{display:grid;gap:.9rem;margin:1.4rem 0;padding:1.2rem 0;border-block:1px solid var(--linea)}
.scheda-riga{display:grid;grid-template-columns:104px minmax(0,1fr);gap:1rem;align-items:baseline}
.scheda-riga dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--testo-3)}
.scheda-riga dd{margin:0;font-size:.96rem;color:var(--testo);line-height:1.55}
.modale__testo{color:var(--testo-2);font-size:.99rem;line-height:1.68;white-space:pre-line}
.modale__azioni{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
@media (max-width:560px){ .scheda-riga{grid-template-columns:1fr;gap:.2rem} }

/* ---------- 35. Apertura a due colonne: stemma e appuntamento ----------- */
.eroe__griglia{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(1.6rem,3.2vw,2.8rem);align-items:center;width:100%;
}
.eroe__lato{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.3rem,2.4vw,2rem);min-width:0;
}

/* lo stemma: profondita', non un secondo marchio da leggere */
.eroe__stemma{
  /* variante attuale: stemma nitido, in colonna sopra la scheda.
     La versione sfocata e sovrapposta era:
     position:absolute; right:-10%; top:clamp(-193px,-13.4vw,-120px);
     width:clamp(240px,27vw,390px); filter:blur(4px) saturate(.85); opacity:.46; */
  width:clamp(190px,20vw,282px);height:auto;flex:none;
  filter:none;opacity:1;pointer-events:none;
}

/* la scheda dell'appuntamento */
.carta-evento{
  position:relative;z-index:1;display:block;text-decoration:none;color:inherit;
  background:rgba(14,36,64,.8);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(243,178,26,.16);border-radius:var(--raggio);
  padding:clamp(1.3rem,2.3vw,1.85rem);overflow:hidden;width:100%;
  box-shadow:0 34px 70px -40px rgba(0,0,0,.9);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);
}
.carta-evento__luce{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  padding:2px;overflow:hidden;background:rgba(243,178,26,.20);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.carta-evento__luce::before{
  content:"";position:absolute;left:50%;top:50%;width:210%;aspect-ratio:1;
  background:conic-gradient(from 0turn,
    transparent 0 .48turn,
    rgba(243,178,26,.35) .60turn,
    #F3B21A .72turn,
    #FFF8E6 .79turn,
    #F3B21A .86turn,
    rgba(243,178,26,.35) .96turn,
    transparent 1turn);
  filter:drop-shadow(0 0 5px rgba(243,178,26,.75));
  animation:giro-luce 4.5s linear infinite;
}
@keyframes giro-luce{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
/* senza movimento resta un bordo dorato fermo, non sparisce l'evidenza */
.meno-movimento .carta-evento__luce::before{animation:none;background:none}
.meno-movimento .carta-evento__luce{background:rgba(243,178,26,.55)}
@media (prefers-reduced-motion:reduce){
  .carta-evento__luce::before{animation:none;background:none}
  .carta-evento__luce{background:rgba(243,178,26,.55)}
}
.carta-evento:hover{border-color:rgba(243,178,26,.4);background:rgba(14,36,64,.9)}
.carta-evento:hover .carta-evento__titolo{color:var(--oro-chiaro)}

.carta-evento__vai:hover .btn__freccia{transform:translateX(3px)}
.carta-evento__et{
  display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--oro);
}
.carta-evento__punto{
  width:7px;height:7px;flex:none;border-radius:50%;background:var(--oro);
  animation:battito-evento 2.8s var(--ease) infinite;
}
@keyframes battito-evento{
  0%{box-shadow:0 0 0 0 rgba(243,178,26,.5)}
  70%{box-shadow:0 0 0 8px rgba(243,178,26,0)}
  100%{box-shadow:0 0 0 0 rgba(243,178,26,0)}
}
.carta-evento__riga{display:flex;align-items:flex-start;gap:1rem;margin-top:1.05rem}
.carta-evento__data{
  flex:none;text-align:center;border-radius:var(--raggio-s);padding:.62rem .75rem;line-height:1;
  border:1px solid rgba(243,178,26,.42);background:rgba(243,178,26,.1);
}
.carta-evento__data b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.95rem;
  letter-spacing:-.035em;color:var(--oro);
}
.carta-evento__data span{
  display:block;margin-top:.18rem;font-family:var(--mono);font-size:.57rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--testo-2);
}
.carta-evento__testo{min-width:0;display:flex;flex-direction:column;gap:.22rem}
.carta-evento__titolo{
  font-family:var(--display);font-weight:700;letter-spacing:-.016em;line-height:1.24;
  font-size:clamp(1.05rem,1.45vw,1.3rem);color:#fff;transition:color .3s var(--ease);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.carta-evento__dove{
  font-size:.87rem;line-height:1.5;color:var(--testo-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.carta-evento__azioni{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--linea);
}
.carta-evento__registrati{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--oro);color:#0A1A2F;text-decoration:none;
  font-family:var(--testo-font);font-size:.83rem;font-weight:700;letter-spacing:-.004em;
  padding:.5rem 1.05rem;border-radius:999px;
  box-shadow:0 8px 20px -12px rgba(243,178,26,.9);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.carta-evento__registrati:hover{background:var(--oro-chiaro);transform:translateY(-1px)}
.carta-evento__vai{
  display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;text-decoration:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--testo-3);transition:color .3s var(--ease);
}
.carta-evento__vai:hover{color:var(--oro)}
.carta-evento__vai .btn__freccia{transition:transform .3s var(--ease)}

@media (max-width:980px){
  .eroe__griglia{grid-template-columns:1fr;gap:1.9rem}
  /* su schermo stretto lo stemma esce dal flusso: resta come profondita'
     dietro la scheda, senza rubare altezza alla prima schermata */
  .eroe__lato{align-items:flex-start;position:relative;gap:0}
  .eroe__stemma{display:none}
  .carta-evento{position:relative;z-index:1;max-width:520px;width:100%;margin-top:0}
}
@media (max-width:760px){
  .eroe{padding-top:calc(var(--h-nav) + 30px)}
  .eroe__corpo{padding-bottom:clamp(26px,4vw,44px)}
}
/* schermi bassi (iPhone SE e simili): stringo perche' l'appuntamento
   resti dentro la prima schermata */
@media (max-width:760px) and (max-height:820px){
  .eroe{padding-top:calc(var(--h-nav) + 16px)}
  .eroe h1{font-size:clamp(2rem,8.6vw,2.5rem)}
  .eroe__lede{font-size:.95rem;margin-top:1.05rem;line-height:1.5}
  .eroe__azioni{margin-top:1.35rem;gap:.6rem}
  .eroe__griglia{gap:1.2rem}
  .eroe__occhiello{margin-bottom:.9rem}
  .carta-evento{padding:.95rem 1rem}
  .carta-evento__riga{margin-top:.7rem;gap:.8rem}
  .carta-evento__vai{margin-top:.75rem;padding-top:.65rem}
  .carta-evento__titolo{font-size:1rem;-webkit-line-clamp:2}
  .carta-evento__data{padding:.45rem .55rem}
  .carta-evento__data b{font-size:1.5rem}
  .carta-evento__dove{font-size:.8rem;-webkit-line-clamp:1}
  .carta-evento__azioni{margin-top:.75rem;padding-top:.7rem}
  .carta-evento__registrati{padding:.44rem .95rem;font-size:.81rem}
}
@media (max-width:760px) and (max-height:700px){
  .eroe__corpo{padding-bottom:4px}
  .eroe__azioni{margin-top:1.1rem;gap:.5rem}
  .eroe__lede{margin-top:.9rem;font-size:.9rem;line-height:1.45}
  .eroe h1{font-size:clamp(1.9rem,8.2vw,2.35rem)}
  .eroe__azioni .btn{padding:.62rem 1.25rem;min-height:44px}
  .carta-evento__azioni{margin-top:.6rem;padding-top:.6rem}
  .carta-evento__riga{margin-top:.6rem}
}
@media (pointer:coarse){ .carta-evento__registrati,.carta-evento__vai{min-height:44px} }
.meno-movimento .carta-evento__punto{animation:none}
@media (prefers-reduced-motion:reduce){ .carta-evento__punto{animation:none} }