/* Teramo e le sue Valli — foglio unico del tema.
   Palette rev.3 (docs/VISUAL-DIRECTION.md). Vincolo di regia: rosso e blu
   non sono mai adiacenti — hanno rapporto di contrasto 1.19 e vibrerebbero. */

@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format('woff2');
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-700.woff2) format('woff2');
 font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-900.woff2) format('woff2');
 font-weight:900;font-style:normal;font-display:swap}


:root{
 --rosso:#C8102E; --rosso-scuro:#A4161A;
 --blu:#4238EC; --blu-chiaro:#C4C0F8;
 --ink:#41484D; --carta:#FFF6EC; --bianco:#FFFCF8; --neutro:#F2F4F6;
 --bosco:#1F5C4C; --terra:#8C4A2F; --ardesia:#3E4C59;
 --max:1180px; --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);
 background:var(--bianco);font-size:clamp(1.15rem,1.9vw,26px);line-height:1.5;
 -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}
.hero :focus-visible,.terr :focus-visible{outline-color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);width:100%}
section{padding-block:clamp(64px,9vw,124px)}
/* Titoli in nero pieno, corpo in #41484D: il divieto di VISUAL-DIRECTION
   riguarda il CORPO del testo, non i titoli. Il salto fra i due rinforza
   la gerarchia invece di appiattirla. */
h1,h2,h3{letter-spacing:-.03em;line-height:1;font-weight:900;color:#000}
/* sulle sezioni a fondo pieno i titoli restano bianchi */
.hero h1,.hero h2,.hero h3,.terr h1,.terr h2,.terr h3,.tema h3{color:#fff}
/* Titoli di sezione a 98px, corpo a 26px. La hero NON segue questa scala:
   ha la sua, più grande e in 900, e resta com'è.
   A 98px il nero 900 era un muro: i titoli di sezione scendono a 700. */
h2{font-size:clamp(2.6rem,7vw,98px);font-weight:700;letter-spacing:-.032em;line-height:1}
h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.022em;line-height:1.12}
.prosa p{max-width:34ch}
.prosa p+p{margin-top:1.05em}
.prosa--center p{margin-inline:auto}

.hd{display:flex;align-items:flex-start;gap:var(--mk-gap);margin-bottom:16px}
:root{--mk-gap:22px}
/* L'icona è alta quanto il titolo: stessa scala fluida dell'h2. */
.mk{width:clamp(2.6rem,7vw,98px);height:clamp(2.6rem,7vw,98px);flex:none;color:var(--rosso)}
.cand .mk{width:clamp(2.2rem,4.4vw,60px);height:clamp(2.2rem,4.4vw,60px)}
.terr .mk,.hero .mk{color:#fff}

.pill{display:inline-flex;align-items:center;gap:10px;border-radius:50px;font-weight:700;
 padding:16px 30px;min-height:52px;text-decoration:none;font-size:1rem;transition:background .18s,color .18s}
.pill--r{background:var(--rosso);color:#fff}
.pill--r:hover{background:var(--rosso-scuro)}
.pill--r.is-disabled{opacity:.5;cursor:not-allowed}
.pill--carta{background:var(--carta);color:var(--rosso)}
.pill--carta:hover{background:#fff}
.pill--out{border:2px solid rgba(255,255,255,.8);color:#fff;padding:14px 26px;min-height:48px;font-size:.95rem}
.pill--out:hover{background:rgba(255,255,255,.14)}
.pill--ghost{border:2px solid rgba(255,255,255,.75);color:#fff;padding:10px 20px;min-height:44px;
 font-size:.9rem;font-weight:600}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:14px;z-index:99;background:#fff;color:var(--rosso);
 padding:12px 22px;border-radius:50px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}

/* ── HERO ── */
.hero{background:var(--rosso);color:#fff;min-height:100vh;display:flex;flex-direction:column;
 padding-block:28px clamp(40px,7vw,72px)}
.hero>*{width:100%}
.nav{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;font-weight:700;font-size:.95rem}
.nav a{color:#fff;text-decoration:none;padding:11px 14px;border-radius:50px;
 display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{background:rgba(255,255,255,.14)}
/* Tutto il blocco sotto il wordmark è centrato. */
/* La hero ha il suo contenitore, più largo del resto: il wordmark su una riga
   a 96px non sta nei 1180px della griglia normale. */
.hero__b{flex:1;display:flex;flex-direction:column;justify-content:center;
 padding-block:6vh;text-align:center;align-items:center;max-width:1480px}
/* Una riga sola: la dimensione è legata alla viewport perché il testo non
   deve mai andare a capo. Sotto gli 860px una riga è impossibile e si torna
   a due, col capo esplicito del <br>. */
.wm{font-size:min(6.4vw,96px);font-weight:700;letter-spacing:-.03em;line-height:1;
 display:block;text-transform:uppercase;white-space:nowrap}
.wm br{display:none}
@media(max-width:860px){
 .wm{font-size:clamp(2.1rem,8.4vw,3.4rem);white-space:normal}
 .wm br{display:inline}
}
.wm > svg,.wm-inline > svg{width:.9em;height:.9em;transform:translateY(.095em);
 margin-inline:.01em .04em;flex:none}

/* Slot animato al posto della “O”. Il disco è qui e non nell'SVG: il segno da solo
   non è una forma chiusa e la parola smetterebbe di leggersi “Teramo”. */
/* Niente disco: il segno sostituisce la “O” da solo, e più grande.
   La “o” reale resta nel DOM in sr-only, quindi lo screen reader legge «Teramo». */
/* L'artwork del Lottie ha molta aria dentro il suo riquadro: il disegno visibile
   è ~45% del contenitore. Misurato sul vivo, serve 1,55× per portarlo appena
   sopra l'altezza delle maiuscole. Scalo il CONTENUTO e stringo il CONTENITORE,
   così il segno cresce senza allargare la parola. */
.lot.lot--o{position:relative;display:inline-block;width:1.12em;height:1.12em;flex:none;
 margin:0 .02em 0 -.02em;transform:translateY(.22em);vertical-align:baseline}
.lot.lot--o .lot__poster,.lot.lot--o .lot__box{transform:scale(1.62)}
.lot.lot--o .lot__poster,.lot.lot--o .lot__box{position:absolute;inset:0;display:block}
.lot.lot--o .lot__box{opacity:0;transition:opacity .35s ease}
.lot.lot--o.is-animato .lot__box{opacity:1}
.lot.lot--o.is-animato .lot__poster{opacity:0;transition:opacity .35s ease}
@media(prefers-reduced-motion:reduce){
 .lot.lot--o .lot__box{display:none}
 .lot.lot--o .lot__poster{opacity:1!important}
}

/* Il motivo righe-fiume torna qui, grande, sopra il numero del Territorio. */
.terr__mappa{margin:48px auto 0;width:100%;max-width:760px;padding-inline:var(--gut)}
.terr__mappa svg{width:100%;height:auto;display:block}
/* Mappa. I flag --on (in elenco) e --capo (capoluogo) arrivano da PHP:
   le custom property non si possono usare nei selettori, ma si possono
   leggere dentro i valori — così un solo blocco copre tutti i casi. */
/* --lit vale 1 se il Comune è in elenco OPPURE è il capoluogo. Tutto quello
   che "si accende" è moltiplicato per --lit, quindi i Comuni che non
   partecipano restano inerti anche al passaggio del mouse. */
.cg{--lit:max(var(--on,0),var(--capo,0));--hov:0}
.cg:hover,.cg:focus-visible{--hov:1}
.mappa-base .cm{
 fill:rgba(255,255,255,calc(.07 + var(--lit) * .17 + var(--lit) * var(--hov) * .22));
 stroke:rgba(255,255,255,calc(.30 + var(--lit) * .48 + var(--lit) * var(--hov) * .22));
 stroke-width:calc(.9px + var(--lit) * .8px + var(--lit) * var(--hov) * .8px);
 vector-effect:non-scaling-stroke;
 transition:fill .45s ease,stroke .45s ease,stroke-width .45s ease}
.mappa-base .pt{fill:var(--carta);opacity:var(--lit);
 transform-box:fill-box;transform-origin:center;
 transform:scale(calc(.85 + var(--capo,0) * .5));transition:opacity .35s ease}
.mappa-base .lb{
 fill:#fff;font-family:Inter,system-ui,sans-serif;font-size:26px;font-weight:700;
 paint-order:stroke;stroke:var(--blu);stroke-width:7;stroke-linejoin:round;
 opacity:0;transform:translateY(6px);pointer-events:none;
 transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1)}
/* l'etichetta compare solo sui Comuni accesi */
.cg:hover .lb,.cg:focus-visible .lb{opacity:var(--lit);transform:none}
@media(prefers-reduced-motion:reduce){
 .mappa-base .cm,.mappa-base .lb,.mappa-base .pt{transition:none}
 .mappa-base .lb{transform:none}
}
.terr__fonte{font-size:.7rem;font-weight:600;letter-spacing:.02em;color:#fff;opacity:.6;
 text-align:center;margin-top:14px}
@media(max-width:820px){.terr__mappa{margin-top:32px;max-width:none}}
.mappa{margin-top:46px;border:2px dashed rgba(255,255,255,.5);border-radius:20px;
 padding:34px 28px;text-align:center;display:grid;gap:12px;justify-items:center}
.mappa__t{font-weight:800;font-size:1.15rem}
.mappa__d{font-size:.9rem;max-width:52ch;color:#fff;opacity:.85}
.mappa iframe{width:100%;aspect-ratio:16/10;border:0;border-radius:16px;display:block}
.mappa.is-carica{border-style:solid;border-color:transparent;padding:0}
/* Il diagramma apre la sezione: rilievi, corsi d'acqua e centri, in astratto.
   Sotto arriva la mappa vera dei confini — prima il senso, poi il dato. */
/* Banda a tutta larghezza. Il disegno NON si ingrandisce: il viewBox è largo
   4000 unità e l'SVG usa preserveAspectRatio="xMinYMid slice" con altezza
   fissata da qui. Così la scala degli elementi resta quella disegnata e la
   banda si limita a mostrarne di più o di meno a seconda della larghezza. */
.banda{width:100%;--rilievo:var(--carta);--fiume:#8FD6E5;--centro:#fff}
.banda .rl,.banda .tr{stroke:var(--rilievo)}
.banda .fm{stroke:var(--fiume)}
.banda .pn,.banda .cp circle{fill:var(--centro)}
.banda .cp circle:not(:first-child){fill:none;stroke:var(--centro)}
/* Nella hero il fiume prende il blu del segno nel wordmark: sul rosso i due
   elementi blu si parlano. Nel Territorio non si può — il fondo È quel blu —
   quindi lì resta la tinta chiara. */
/* #8FD6E5 è il petrolio più scuro che regge su entrambi i fondi:
   rosso 3.62, blu 4.29. Il petrolio pieno #1D4E5F fa 1.55 sul rosso — invisibile. */
.banda--terr{margin:0 0 34px}
/* Nella hero la stessa banda, più piccola: l'altezza dimezzata dimezza la scala,
   quindi non è un altro disegno ma lo stesso a una distanza diversa. */
.banda.banda--hero{margin-top:auto;opacity:.85}
.banda.banda--hero svg{height:100px}
@media(max-width:820px){.banda.banda--hero svg{height:82px}}
/* 155px = la scala del disegno originale (viewBox alto 300 reso a 620px di
   larghezza → 0,517). L'altezza fissa la scala, quindi tenendola costante il
   tratto resta di 5,2px a qualunque larghezza e cambia solo QUANTO pattern
   entra nella banda. Il viewBox è lungo 6000 unità apposta. */
.banda svg{width:100%;height:155px;display:block}
@media(max-width:820px){.banda{margin-bottom:24px}}

/* ── Animazione del diagramma ────────────────────────────────────────────
   draw-on con stroke-dashoffset: nessuna libreria, nessun player.
   pathLength="1" nell'SVG normalizza ogni tracciato, così dasharray e
   dashoffset lavorano da 1 a 0 senza misurare nulla.
   Parte solo quando la sezione entra in viewport (.is-anim). */
@media (prefers-reduced-motion: no-preference) {
  .banda .rl,
  .banda .tr,
  .banda .fm { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .banda .pn,
  .banda .cp { opacity: 0; }

  /* i rilievi si disegnano uno dopo l'altro da sinistra: letti in fila
     sembrano un tratto unico che corre */
  /* il ritardo è proporzionale alla posizione orizzontale: il tratto corre
     da sinistra a destra a velocità costante, indipendente da quanti rilievi
     entrano nella banda */
  .banda.is-anim .rl {
    animation: tlv-traccia 1.1s cubic-bezier(.5,0,.25,1) forwards;
    animation-delay: var(--d);
  }
  .banda.is-anim .tr {
    animation: tlv-traccia 2.6s ease-out forwards; animation-delay: .2s;
  }
  /* i fiumi partono quando i rilievi sono a metà: l'acqua scorre sotto */
  .banda.is-anim .fm {
    animation: tlv-traccia 4.2s ease-in-out forwards;
    animation-delay: var(--d);
  }
  /* i centri si accendono a uno a uno, poi respirano fuori fase */
  .banda.is-anim .pn {
    animation: tlv-accendi .7s ease forwards,
               tlv-respira 5.5s ease-in-out infinite;
    animation-delay: var(--d), calc(var(--d) + .7s + var(--p));
  }
  .banda.is-anim .cp { animation: tlv-accendi .9s ease 3.2s forwards; }
  .banda.is-anim .cp .on1 { animation: tlv-onda 5.5s ease-out 4.2s infinite; }
  .banda.is-anim .cp .on2 { animation: tlv-onda 5.5s ease-out 4.9s infinite; }
}
/* I punti sui rilievi sono bianchi su un tratto bianco più spesso di loro:
   senza stacco spariscono dentro la linea. L'alone nel colore della sezione
   li fa "bucare" il tracciato e leggere come nodi. paint-order tiene lo
   stroke SOTTO il fill, così l'alone non mangia il punto. */
.banda .pn,
.banda .cp > circle:first-child {
  paint-order: stroke;
  stroke: var(--blu);
  stroke-width: 6;
}

@keyframes tlv-traccia { to { stroke-dashoffset: 0; } }
@keyframes tlv-ciclo {
  0%   { stroke-dashoffset: 1 }
  17%  { stroke-dashoffset: 0 }
  56%  { stroke-dashoffset: 0 }
  74%  { stroke-dashoffset: -1 }
  100% { stroke-dashoffset: -1 }
}
@keyframes tlv-accendi { from { opacity: 0; } to { opacity: 1; } }
@keyframes tlv-respira { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes tlv-onda {
  0%   { opacity: .75; transform: scale(.55); }
  70%  { opacity: 0;   transform: scale(1.15); }
  100% { opacity: 0;   transform: scale(1.15); }
}
.banda .cp circle { transform-box: fill-box; transform-origin: center; }

.terr__glifo{width:104px;margin:0 auto 26px}
.terr__glifo svg{width:100%;height:auto;display:block}
@media(max-width:820px){.terr__glifo{width:82px}}
.wm-inline{display:inline;text-transform:lowercase}
.hero__ist{font-weight:700;font-size:clamp(1rem,1.6vw,1.35rem);margin-top:20px;letter-spacing:-.01em}

/* L'anno in filigrana dietro il blocco: riempie la hero senza aggiungere un
   altro segno grafico. Sta sotto tutto e non è leggibile dagli screen reader
   (il 2027 è già nella riga istituzionale). */
.hero__anno{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);
 font-size:min(46vw,640px);font-weight:900;line-height:1;letter-spacing:-.06em;
 color:#fff;opacity:.07;pointer-events:none;user-select:none;z-index:0;white-space:nowrap;
 display:flex}
.hero__anno i{font-style:normal;display:block;will-change:transform}
/* Ogni cifra ha periodo, fase e ampiezza diversi: sommandosi sfasati il
   gruppo non respira mai all'unisono. Periodi lunghi e primi fra loro,
   così il ciclo complessivo non si ripete in modo riconoscibile. */
@media(prefers-reduced-motion:no-preference){
 .hero__anno i{animation:tlv-galleggia var(--t) ease-in-out var(--f) infinite alternate}
 .hero__anno i:nth-child(1){--t:6s;--f:-1s;--dy:-26px;--dx:6px;--rz:-1.6deg}
 .hero__anno i:nth-child(2){--t:8.5s;--f:-3s;--dy:20px;--dx:-8px;--rz:1.3deg}
 .hero__anno i:nth-child(3){--t:7s;--f:-2s;--dy:-16px;--dx:9px;--rz:1.8deg}
 .hero__anno i:nth-child(4){--t:10s;--f:-5s;--dy:24px;--dx:-5px;--rz:-1.2deg}
}
@keyframes tlv-galleggia{
 from{transform:translate3d(0,0,0) rotate(0)}
 to{transform:translate3d(var(--dx,0),var(--dy,0),0) rotate(var(--rz,0))}
}
.hero__b{position:relative}

/* ── Ingresso della hero ────────────────────────────────────────────────
   Lo stato di partenza vive SOLO dentro i keyframe, mai nella regola base:
   se le animazioni non girano — JS assente, CSS parziale, reduced-motion —
   gli elementi sono già al loro posto e non resta niente di invisibile.

   L'h1 è l'elemento LCP: animarne l'opacità da 0 lo farebbe contare come
   non dipinto e ritarderebbe la metrica. Per quello si muove SOLO di
   trasformazione, senza toccare l'opacità. */
@media (prefers-reduced-motion: no-preference) {
  .hero .nav      { animation: tlv-entra .7s ease-out .05s both }
  .hero .wm       { animation: tlv-sale .8s cubic-bezier(.2,.8,.3,1) .10s both }
  .hero__anno     { animation: tlv-vela 1.6s ease-out .15s both }
  .hero__ist      { animation: tlv-entra .7s ease-out .30s both }
  .hero__cta      { animation: tlv-entra .7s ease-out .44s both }
  .hero__loghi    { animation: tlv-entra .7s ease-out .58s both }
}
@keyframes tlv-entra { from { opacity:0; transform:translateY(16px) } }
/* niente opacità qui: solo spostamento, per non toccare l'LCP */
@keyframes tlv-sale  { from { transform:translateY(22px) } }
@keyframes tlv-vela  { from { opacity:0 } to { opacity:.07 } }
.hero__b>*:not(.hero__anno){position:relative;z-index:1}
@media(max-width:860px){.hero__anno{font-size:min(78vw,420px);opacity:.09}}
.hero__claim{font-size:clamp(1.2rem,2.4vw,2rem);font-weight:900;font-style:italic;
 color:#fff;margin-top:30px}
.hero__ph,.ph{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
 color:#fff;opacity:.85;margin-top:10px;display:block}
/* Pulsanti e loghi sulla stessa riga: i loghi riempiono il vuoto a destra
   invece di restare appesi in fondo alla hero. */
.hero__azioni{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:30px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero__loghi ul,.hero__loghi>div{display:flex;gap:22px;flex-wrap:wrap;align-items:center;
 justify-content:center}
.hero__loghi img{max-height:48px;width:auto}
/* I loghi usano currentColor: chiari sul rosso della hero, grigi sui fondi
   chiari. Grigio su rosso faceva 1.9 di contrasto: illeggibile. */
.loghi-ph{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;align-items:center;justify-content:center}
.loghi-ph svg{width:clamp(140px,13vw,186px);height:auto;display:block}
.hero .loghi-ph{color:var(--carta);opacity:.92}
footer .loghi-ph{color:#7d848a}
.lg svg{width:86%;height:auto;color:#7d848a}
.lgph{width:104px;height:44px;border:1.5px dashed rgba(255,255,255,.5);border-radius:8px;
 display:grid;place-items:center;font-size:.6rem;font-weight:700;color:#fff;
 letter-spacing:.04em;text-transform:uppercase}

/* ── sezioni ── */
.cand,.part{background:var(--bianco)}
/* ── La candidatura: due pannelli affiancati a colore pieno ──────────────
   Impianto della reference. Il pannello è full-bleed, quindi la sezione non
   ha padding né contenitore a griglia: lo spazio sta dentro i pannelli. */
.cand{background:var(--bianco);padding-block:0}
section.cand.foglio{padding-bottom:0}
.cand .pan{border-radius:inherit}
.cand__split{display:grid;grid-template-columns:1fr 1fr}
.pan{position:relative;overflow:hidden;color:#fff;
 padding:clamp(38px,4.4vw,72px) clamp(24px,3.4vw,56px)
         calc(clamp(38px,4.4vw,64px) + var(--foglio));
 min-height:clamp(300px,30vw,420px);display:flex;flex-direction:column}
.pan--blu{background:var(--blu)} .pan--bosco{background:var(--bosco)}
.pan--rosso{background:var(--rosso)} .pan--terra{background:var(--terra)}
.pan--ardesia{background:var(--ardesia)}
.pan h2{color:#fff;font-size:clamp(2.1rem,4.4vw,68px);font-weight:600;
 letter-spacing:-.034em;line-height:1}
.pan__p{margin-top:16px;max-width:34ch}
.pan__p p{font-size:clamp(1rem,1.25vw,1.25rem);line-height:1.5;color:rgba(255,255,255,.94);
 max-width:none}
.pan__p p+p{margin-top:.7em}
/* L'onda chiude il blocco: elemento di dimensione fissa (~300px) allineato al
   testo, non una banda a tutta larghezza. Sta nel flusso, in fondo al pannello. */
.pan__onde{margin-top:auto;padding-top:clamp(26px,3vw,44px);
 width:min(300px,100%);color:var(--carta);pointer-events:none}
.pan__onde svg{width:100%;height:auto;display:block}
@media(max-width:860px){
 .cand__split{grid-template-columns:1fr}
 .pan{min-height:0}
}

/* Riga introduttiva e REGOLA DEI RIENTRI.
   Queste regole erano state cancellate per sbaglio insieme al vecchio blocco
   della sezione Candidatura: stavano dentro il testo che ho sostituito.

   La regola: ogni paragrafo parte dove parte il TESTO del titolo, non dal
   bordo dell'icona. Il rientro è larghezza icona + gap, e l'icona ha la
   stessa scala fluida dell'h2 — quindi il rientro la segue da solo. */
.sez-rientro{margin-left:calc(clamp(2.6rem,7vw,98px) + var(--mk-gap))}
.sez__intro{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;max-width:46ch;
 margin-top:18px;color:#5b6368}
.temi .sez__intro,.part .sez__intro{margin-bottom:clamp(34px,4vw,54px)}
@media(max-width:820px){.sez-rientro{margin-left:0}}

.temi{background:var(--carta)}
.temi__g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:0}
.temi__g[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.temi__g[data-n="5"]{grid-template-columns:repeat(3,1fr)}
.temi__g[data-n="5"]>li:nth-child(4),.temi__g[data-n="5"]>li:nth-child(5){grid-column:span 1}
.tema{border-radius:22px;padding:30px 28px 24px;color:#fff;display:flex;flex-direction:column;min-height:330px}
.tema h3{margin-bottom:12px}
.tema p{font-size:1.05rem;line-height:1.45;color:#fff}
.tema__il{margin-top:auto;align-self:flex-end;padding-top:22px}
.tema__il svg,.tema__il img{width:96px;height:96px;display:block;object-fit:contain}
/* Le illustrazioni delle card si DISEGNANO, non compaiono in dissolvenza:
   stesso meccanismo della banda del territorio — pathLength="1" nell'SVG e
   stroke-dashoffset da 1 a 0. Il ritardo --d è dentro ogni tracciato, così
   le righe arrivano prima e l'acqua dopo; --c aggiunge lo scarto per colonna. */
@media(prefers-reduced-motion:no-preference){
 /* onde e illustrazione dei pannelli: stesso draw-on delle card */
 .pan .tl{stroke-dasharray:1;stroke-dashoffset:1}
 .pan.is-in .tl{animation:tlv-traccia 1s cubic-bezier(.45,0,.3,1) forwards;
   animation-delay:calc(var(--c,0s) + var(--d,0s))}
 .cand__split>.pan:nth-child(1){--c:.2s}
 .cand__split>.pan:nth-child(2){--c:.5s}
 /* Icone delle card in ciclo continuo, una dopo l'altra da sinistra.
    Il tratto entra (1 → 0), resta, poi ESCE dall'altro capo (0 → -1)
    invece di tornare indietro: sembra scorrere, che per un segno fatto di
    acqua è il movimento giusto. 1 e -1 sono entrambi invisibili, quindi il
    ritorno all'inizio del giro non si vede. Stessa durata per tutte: gli
    sfasamenti --c restano costanti e l'ordine non si perde mai. */
 .tema .tema__il .tl{stroke-dasharray:1;stroke-dashoffset:1}
 .tema.is-in .tema__il .tl{
   animation:tlv-ciclo 7.2s cubic-bezier(.45,0,.3,1) infinite;
   animation-delay:calc(var(--c,0s) + var(--d,0s))}
 .temi__g>li:nth-child(1){--c:0s}
 .temi__g>li:nth-child(2){--c:1.2s}
 .temi__g>li:nth-child(3){--c:2.4s}
 .temi__g>li:nth-child(4){--c:3.6s}
 .temi__g>li:nth-child(5){--c:4.8s}
}
.tema--rosso{background:var(--rosso)} .tema--blu{background:var(--blu)}
.tema--bosco{background:var(--bosco)} .tema--terra{background:var(--terra)}
.tema--ardesia{background:var(--ardesia)}

.terr{background:var(--blu);color:#fff;text-align:center;overflow:hidden}
.terr .num{font-size:clamp(4.4rem,15vw,11rem);font-weight:800;letter-spacing:-.05em;line-height:.88}
.terr .num small{display:block;font-size:clamp(1.1rem,2.6vw,2rem);font-weight:900;
 letter-spacing:-.02em;line-height:1.15;margin-top:18px}
.terr .prosa{margin-top:26px;color:#fff}
.comuni{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.terr__foto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:38px}
.terr__foto img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;width:100%}
.terr__il{margin-top:56px;width:100%}
.terr__il svg{width:100%;height:auto;display:block;overflow:hidden}

.dos{background:var(--carta)}
.dos__cta{margin-top:30px}
.dos__meta{font-size:.85rem;font-weight:600;color:#5b6368;margin-top:14px;max-width:60ch}
.dos__extra{margin-top:26px;display:grid;gap:8px}
.dos__extra a{display:inline-flex;align-items:center;gap:10px;color:var(--rosso);font-weight:700;
 text-decoration:none;padding:12px 14px;margin-left:-14px;border-radius:50px;min-height:44px;
 font-size:1rem}
.dos__extra a:hover{background:#efe6da}
.dos__peso{font-weight:600;color:#7d848a;font-size:.85rem}

#h-part{white-space:nowrap;font-size:clamp(1.6rem,5.2vw,84px)}
.part .cat{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 color:#000;margin:34px 0 14px;letter-spacing:.09em}
.part__g{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lg{aspect-ratio:5/2;background:var(--neutro);border-radius:12px;display:grid;place-items:center;
 font-size:.7rem;font-weight:600;color:#9aa0a4;padding:10px;text-align:center}
.lg img{max-height:100%;width:auto;filter:grayscale(1);opacity:.8}
.lg a{display:grid;place-items:center;width:100%;height:100%}

/* ── Sezioni come fogli sovrapposti ─────────────────────────────────────
   Ogni sezione ha gli angoli superiori arrotondati e risale di altrettanto
   sulla precedente: il cambio di colore avviene lungo un bordo curvo, non su
   una riga dritta, e la pila legge come fogli impilati.
   Il "colpo": entrando nel viewport il foglio si posa da 26px più in basso
   con una curva che sconfina appena oltre lo zero — è l'oltrepassare che dà
   la sensazione dell'appoggio, non la velocità. */
:root{--foglio:clamp(26px,4vw,52px)}
/* Ogni foglio risale di --foglio sul precedente: quello spazio va restituito
   in fondo alla sezione, o l'ultimo elemento resta nascosto sotto la curva. */
section.foglio{padding-bottom:calc(clamp(64px,9vw,124px) + var(--foglio))}
.foglio{position:relative;border-radius:var(--foglio) var(--foglio) 0 0;
 margin-top:calc(var(--foglio) * -1);overflow:hidden;
 box-shadow:0 -16px 34px rgba(24,20,16,.10)}
.cand{z-index:2} .temi{z-index:3} .terr{z-index:4}
.dos{z-index:5} .part{z-index:6} footer{z-index:7}

@media(prefers-reduced-motion:no-preference){
 .foglio{transform:translateY(26px)}
 .foglio.posato{transform:none;
  transition:transform .62s cubic-bezier(.18,1.3,.32,1)}
}

footer{background:var(--carta);padding:clamp(44px,6vw,72px) 0 34px}
.ft__top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start}
.ft__wm{font-weight:900;font-size:1.9rem;letter-spacing:-.03em;color:var(--ink)}
.ft__ist{font-weight:700;font-size:.9rem;margin-top:6px}
.ft__promo{font-size:.87rem;margin-top:10px;max-width:46ch}
.ft__lg{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ft__lg img{max-height:44px;width:auto}
.ft__lg .lgph{border-color:#b9b1a6;color:#5b6368}
.ft__bot{border-top:1px solid #e6ded3;margin-top:34px;padding-top:14px;display:flex;
 align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;
 font-size:.87rem;font-weight:600}
.ft__bot nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Il rientro negativo allinea il PRIMO link al bordo del contenitore.
   Applicato a tutti faceva sovrapporre le pillole di hover di 14px. */
.ft__bot nav{gap:8px}
.ft__bot a{color:var(--ink);text-decoration:none;padding:12px 14px;
 display:inline-flex;align-items:center;min-height:44px;border-radius:50px}
.ft__bot nav a:first-child{margin-left:-14px}
.ft__bot a:hover{background:#efe6da}
.ft__crediti{font-size:.72rem;font-weight:500;color:#656b71;flex-basis:100%;order:3;margin:2px 0 0}
.ft__cookie{font:inherit;background:none;border:0;color:var(--rosso);font-weight:700;cursor:pointer;
 padding:12px 16px;min-height:44px;border-radius:50px}
.ft__cookie:hover{background:#efe6da}

.pagina .prosa{margin-top:10px}
.pagina .prosa h2{font-size:1.6rem;margin-top:1.6em;margin-bottom:.4em}
.pagina .prosa ul{list-style:disc;margin:1em 0 1em 1.3em}

@media(max-width:820px){
 .temi__g,.temi__g[data-n="4"],.temi__g[data-n="5"]{grid-template-columns:1fr}
 .part__g{grid-template-columns:repeat(2,1fr)}
 .hd{flex-direction:column;align-items:flex-start;gap:10px}
 .terr{text-align:left}
 .terr .num{text-align:center}
 .comuni{justify-content:flex-start}
 .tema{min-height:0}
 .nav{gap:2px;font-size:.88rem;justify-content:flex-start}
 .nav a{padding:11px 10px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── Modale consensi ── */
.cns{position:fixed;inset:auto 0 0 0;z-index:90;display:flex;justify-content:center;
 padding:16px;pointer-events:none}
.cns[hidden]{display:none}
.cns__box{pointer-events:auto}
.cns__box{background:var(--bianco);border-radius:24px;max-width:680px;width:100%;
 padding:28px 28px 24px;position:relative;box-shadow:0 10px 44px rgba(0,0,0,.22);
 border:1px solid #e4e1dc;max-height:calc(100vh - 32px);overflow-y:auto}
.cns__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;
 background:none;font-size:26px;line-height:1;color:var(--ink);cursor:pointer;border-radius:50%}
.cns__x:hover{background:var(--carta)}
.cns__t{font-size:1.5rem;font-weight:900;letter-spacing:-.025em;margin-bottom:10px;padding-right:44px}
.cns__d{font-size:.95rem;line-height:1.5;max-width:none}
.cns__d a{color:var(--rosso);font-weight:700}
.cns__cat{margin:20px 0 22px;display:grid;gap:12px}
.cns__cat label{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.45;
 cursor:pointer;background:var(--carta);border-radius:14px;padding:14px 16px;min-height:44px}
.cns__cat input{margin-top:2px;width:20px;height:20px;flex:none;accent-color:var(--rosso)}
.cns__cat input:disabled{opacity:.55}
.cns__btn{display:flex;gap:10px;flex-wrap:wrap}
.pill--bordo{border:2px solid var(--ink);color:var(--ink);padding:14px 26px;min-height:48px}
.pill--bordo:hover{background:var(--ink);color:#fff}
.pill--testo{color:var(--ink);text-decoration:underline;padding:14px 20px;min-height:48px;font-weight:600}
.pill--testo:hover{color:var(--rosso)}
/* ATTENZIONE: qui stava un `background:none` generico su .cns__btn button che,
   avendo specificità maggiore di .pill--r, ne cancellava il fondo rosso e lasciava
   testo bianco su bianco. Il reset va applicato SOLO ai bottoni che devono essere
   trasparenti, mai a tutti. */
/* NON `font:inherit`: la scorciatoia reimposta anche la dimensione, e col
   corpo a 26px i pulsanti diventavano alti 75px. Serve solo la famiglia. */
.cns__btn button{font-family:inherit;font-size:1rem;line-height:1.2;cursor:pointer}
.cns__btn .pill--r{background:var(--rosso);color:#fff;border:2px solid var(--rosso)}
.cns__btn .pill--r:hover{background:var(--rosso-scuro);border-color:var(--rosso-scuro)}
.cns__btn .pill--bordo{background:none;border:2px solid var(--ink);color:var(--ink)}
.cns__btn .pill--bordo:hover{background:var(--ink);color:#fff}
.cns__btn .pill--testo{background:none;border:0;color:var(--ink)}
.cns__btn .pill--testo:hover{color:var(--rosso)}

@media(max-width:520px){.cns__btn{flex-direction:column}.cns__btn button{width:100%;justify-content:center}}

/* ── Reveal on scroll (sobrio, sotto prefers-reduced-motion) ── */
@media(prefers-reduced-motion:no-preference){
 .rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
 .rv.is-in{opacity:1;transform:none}
}

/* ── Blocco Lottie con poster ── */
.lot{position:relative;width:132px;height:132px;margin:0 auto 26px;display:block}
.lot__poster,.lot__box{position:absolute;inset:0;display:grid;place-items:center}
.lot__poster svg,.lot__box svg{width:100%;height:100%;display:block}
.lot__box{opacity:0;transition:opacity .35s ease}
.lot.is-animato .lot__box{opacity:1}
.lot.is-animato .lot__poster{opacity:0;transition:opacity .35s ease}
@media(prefers-reduced-motion:reduce){
 .lot__box{display:none}
 .lot__poster{opacity:1!important}
}
@media(max-width:820px){.lot{width:104px;height:104px}}