/* ==========================================================================
   Associazione fra Genitori del Mugello e Alto Mugello contro l'Emarginazione APS
   Foglio di stile unico. Nessuna dipendenza esterna, nessun font remoto.

   I colori derivano dal logo ufficiale. Le varianti "scuro" servono a garantire
   il contrasto minimo 4.5:1 richiesto dalle linee guida WCAG 2.1 livello AA:
   i colori pieni del logo, da soli, non lo raggiungerebbero sul testo.
   ========================================================================== */

/* --- 1. Variabili di progetto ------------------------------------------- */

:root {
  /* Colori del logo */
  --verde:        #3AAA35;
  --azzurro:      #009FE3;
  --giallo:       #FFDE00;
  --rosso:        #E30613;

  /* Varianti accessibili (contrasto verificato su fondo avorio) */
  --verde-medio:  #1F7A1B;  /* 4,97:1 con testo bianco  -> pulsanti */
  --verde-scuro:  #196B16;  /* 6,33:1 su avorio         -> titoli e link */
  --azzurro-scuro:#00699A;  /* 5,73:1 su avorio         -> link secondari */
  --rosso-scuro:  #C10510;  /* 5,5:1  con testo bianco  -> avvisi */

  /* Neutri */
  --avorio:       #FBF9F5;
  --avorio-scuro: #F2EDE4;
  --carta:        #FFFFFF;
  --inchiostro:   #1F2421;  /* 15:1 su avorio */
  --grigio:       #5A6360;  /* 5,9:1 su avorio */
  --bordo:        #E2DCD0;

  /* Tipografia */
  --font-testo:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-titoli:  Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  /* Spaziature */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;

  --larghezza:    1180px;
  --larghezza-testo: 68ch;
  --raggio:       14px;
  --ombra:        0 2px 4px rgba(31,36,33,.05), 0 8px 24px rgba(31,36,33,.07);
  --ombra-alta:   0 4px 8px rgba(31,36,33,.07), 0 16px 40px rgba(31,36,33,.11);
}

/* --- 2. Reset essenziale ------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* l'intestazione fissa non deve coprire le ancore */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--avorio);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 1.125rem;   /* 18px: corpo del testo generoso, richiesta di leggibilita' */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  color: var(--verde-scuro);
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p, ul, ol { margin: 0 0 var(--sp-2); }
p, li { max-width: var(--larghezza-testo); }

a { color: var(--verde-scuro); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--azzurro-scuro); }

strong { font-weight: 700; }
abbr[title] { text-decoration-style: dotted; cursor: help; }

/* Focus sempre visibile e ad alto contrasto: requisito WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--azzurro-scuro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 3. Utilita' --------------------------------------------------------- */

.contenitore { width: min(100% - 2.5rem, var(--larghezza)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salta-al-contenuto {
  position: absolute; top: -100px; left: var(--sp-2); z-index: 200;
  background: var(--verde-medio); color: #fff;
  padding: var(--sp-1) var(--sp-3); border-radius: 0 0 var(--raggio) var(--raggio);
  font-weight: 600; text-decoration: none;
}
.salta-al-contenuto:focus { top: 0; color: #fff; }

.sezione   { padding-block: var(--sp-6); }
.sezione-s { padding-block: var(--sp-5); }
.sezione--avorio { background: var(--avorio-scuro); }
.sezione--carta  { background: var(--carta); }

.occhiello {
  font-family: var(--font-testo);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--azzurro-scuro);
  margin: 0 0 var(--sp-1);
}

.testo-guida { font-size: 1.22rem; color: var(--grigio); max-width: 62ch; }

/* --- 4. Pulsanti --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px;                 /* area tattile ampia: WCAG 2.5.5 */
  padding: .7em 1.5em;
  font: inherit; font-weight: 650;
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primario   { background: var(--verde-medio); color: #fff; box-shadow: var(--ombra); }
.btn--primario:hover { background: var(--verde-scuro); color: #fff; }

.btn--secondario { background: transparent; color: var(--verde-scuro); border-color: var(--verde-medio); }
.btn--secondario:hover { background: var(--verde-medio); color: #fff; }

.btn--rosso { background: var(--rosso-scuro); color: #fff; box-shadow: var(--ombra); }
.btn--rosso:hover { background: #9E040D; color: #fff; }

.btn--chiaro { background: #fff; color: var(--verde-scuro); box-shadow: var(--ombra); }
.btn--chiaro:hover { background: var(--avorio); color: var(--verde-scuro); }

/* Le CTA sono sempre centrate, anche quando il testo sopra e' allineato a sinistra */
.gruppo-btn {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2); margin-top: var(--sp-3);
}

/* --- 5. Intestazione e navigazione --------------------------------------- */

.intestazione {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--bordo);
}

.intestazione__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-block: .7rem;
}

.marchio { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.marchio img { width: 58px; height: 58px; flex: none; }
.marchio__nome {
  font-family: var(--font-titoli); font-size: 1.02rem; font-weight: 700;
  color: var(--verde-scuro); line-height: 1.15; display: block; max-width: 20ch;
}
.marchio__sotto { display: block; font-size: .74rem; color: var(--grigio); letter-spacing: .06em; text-transform: uppercase; }

.nav-lista {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-lista li { max-width: none; }
.nav-lista a {
  display: block; padding: .6rem .72rem; border-radius: 10px;
  font-size: .98rem; font-weight: 550; text-decoration: none; color: var(--inchiostro);
}
.nav-lista a:hover { background: var(--avorio-scuro); color: var(--verde-scuro); }
/* :not(.btn) e' necessario: senza, questa regola vincerebbe per specificita'
   su .btn--primario e renderebbe il pulsante "Sostienici" verde su verde */
.nav-lista a[aria-current="page"]:not(.btn) {
  color: var(--verde-scuro); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--verde);   /* non solo colore: anche una sottolineatura */
}
.nav-lista .btn[aria-current="page"] {
  background: var(--verde-scuro); color: #fff;
  box-shadow: 0 0 0 3px rgba(58,170,53,.35);
}
.nav-lista .btn { margin-left: .5rem; }
/* .nav-lista a e' piu' specifico di .btn--primario e ne sovrascriverebbe il colore:
   il testo del pulsante resterebbe scuro su fondo verde (contrasto 2,9:1) */
.nav-lista a.btn--primario,
.nav-lista a.btn--primario:hover { color: #fff; }

.apri-menu {
  display: none;
  align-items: center; gap: .5rem;
  min-height: 48px; padding: .5rem .9rem;
  background: var(--avorio-scuro); color: var(--inchiostro);
  border: 1px solid var(--bordo); border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.apri-menu__barre { display: grid; gap: 4px; }
.apri-menu__barre span { display: block; width: 20px; height: 2px; background: currentColor; }

/* --- 6. Copertina -------------------------------------------------------- */

.copertina {
  position: relative; overflow: hidden;
  background:
    radial-gradient(58rem 38rem at 88% -18%, rgba(0,159,227,.13), transparent 62%),
    radial-gradient(48rem 34rem at 6% 105%, rgba(58,170,53,.15), transparent 60%),
    var(--avorio);
  padding-block: clamp(var(--sp-5), 7vw, 6rem);
}
.copertina__griglia {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-5); align-items: center;
}
.copertina h1 { margin-bottom: var(--sp-3); }
/* Il logo si compone dal centro verso l'esterno e poi si ferma: sono i quattro
   strati di colore del marchio originale, separati dal file ufficiale.
   Lo strato verde e' in flusso e definisce l'ingombro; gli altri gli stanno sopra,
   cosi' il riquadro ha la sua altezza anche senza "aspect-ratio". */
.emblema-animato { position: relative; width: min(100%, 400px); margin-inline: auto; }
.emblema-animato .strato { display: block; width: 100%; height: auto; transform-origin: 50% 50%; }
.emblema-animato .strato-verde { position: relative; }
.emblema-animato .strato-azzurro,
.emblema-animato .strato-giallo,
.emblema-animato .strato-rosso { position: absolute; top: 0; left: 0; }

@keyframes emblema-cuore  { from { opacity: 0; transform: scale(.15); }
                            60% { opacity: 1; transform: scale(1.12); }
                            to   { opacity: 1; transform: scale(1); } }
@keyframes emblema-stella { from { opacity: 0; transform: scale(.5) rotate(-30deg); }
                            to   { opacity: 1; transform: none; } }
@keyframes emblema-archi  { from { opacity: 0; transform: scale(1.2) rotate(24deg); }
                            to   { opacity: 1; transform: none; } }
@keyframes emblema-fiore  { from { opacity: 0; transform: scale(1.32) rotate(-14deg); }
                            to   { opacity: 1; transform: none; } }

/* "both" tiene lo stato iniziale prima del ritardo e quello finale dopo:
   finita l'animazione il logo resta esattamente il logo. */
.emblema-animato .strato-rosso   { animation: emblema-cuore  .60s cubic-bezier(.34,1.56,.64,1) .15s both; }
.emblema-animato .strato-giallo  { animation: emblema-stella .75s cubic-bezier(.22,1,.36,1)    .40s both; }
.emblema-animato .strato-azzurro { animation: emblema-archi  .80s cubic-bezier(.22,1,.36,1)    .65s both; }
.emblema-animato .strato-verde   { animation: emblema-fiore  .90s cubic-bezier(.22,1,.36,1)    .85s both; }

.numeri {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); margin-top: var(--sp-5);
  border-top: 1px solid var(--bordo); padding-top: var(--sp-3);
}
.numeri__voce strong {
  display: block; font-family: var(--font-titoli);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  color: var(--verde-scuro); line-height: 1;
}
.numeri__voce span { font-size: .95rem; color: var(--grigio); }

/* --- 7. Schede ----------------------------------------------------------- */

.griglia { display: grid; gap: var(--sp-3); }
.griglia--2 { grid-template-columns: repeat(2, 1fr); }
.griglia--3 { grid-template-columns: repeat(3, 1fr); }
.griglia--4 { grid-template-columns: repeat(4, 1fr); }

.scheda {
  --accento: var(--verde);
  --accento-tenue: rgba(58,170,53,.13);
  display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-3);
  box-shadow: var(--ombra);
  border-top: 5px solid var(--accento);
  transition: transform .18s ease, box-shadow .18s ease;
}
.scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); }
.scheda h2, .scheda h3 { margin-bottom: var(--sp-1); }
.scheda p { font-size: 1rem; color: var(--grigio); flex: 1; }
.scheda__link { margin-top: var(--sp-2); font-weight: 650; text-decoration: none; }
.scheda__link:hover { text-decoration: underline; }
.scheda__link::after { content: " \2192"; }

.scheda--azzurro { --accento: var(--azzurro); --accento-tenue: rgba(0,159,227,.13); }

/* Sulle schede dei progetti il colore non e' decorativo: dice a che punto e'
   il progetto. Lo stato resta comunque scritto per esteso nell'etichetta,
   perche' l'informazione non puo' dipendere dal solo colore. */
.scheda--attivo { --accento: var(--verde);   --accento-tenue: rgba(58,170,53,.13); }
.scheda--corso  { --accento: var(--azzurro); --accento-tenue: rgba(0,159,227,.13); }
.scheda--futuro { --accento: var(--giallo);  --accento-tenue: rgba(255,222,0,.22); }
.scheda--giallo  { --accento: var(--giallo);  --accento-tenue: rgba(255,222,0,.22); }
.scheda--rosso   { --accento: var(--rosso);   --accento-tenue: rgba(227,6,19,.10); }

/* --- Schede dei progetti ---------------------------------------------------
   Sono il cuore del sito e devono pesare piu' delle altre schede: bordo
   superiore doppio, alone di colore, testo piu' grande e scuro, e il rimando
   trasformato da link di testo in pulsante. Le altre sezioni restano com'erano,
   cosi' la differenza di importanza si vede a colpo d'occhio. */

.scheda--progetto {
  position: relative; overflow: hidden;
  border-top-width: 9px;
  border-radius: 18px;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  box-shadow: var(--ombra-alta);
}
.scheda--progetto::before {           /* alone di colore, puramente decorativo */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: linear-gradient(to bottom, var(--accento-tenue), transparent);
  pointer-events: none;
}
/* Il contenuto deve stare sopra l'alone di colore, ma NON deve essere "positioned":
   se lo fosse, il rettangolo cliccabile del titolo (.scheda__titolo::after) si
   ancorerebbe all'h2 invece che alla scheda, e sarebbe cliccabile solo il titolo.
   Le schede sono contenitori flex, e sui flex item lo z-index funziona anche
   senza position. */
.scheda--progetto > * { z-index: 1; }
/* Il titolo porta il rettangolo cliccabile che copre tutta la scheda: deve stare
   sopra gli elementi che lo seguono nel documento (testo, etichetta, "Scopri di
   piu'"), altrimenti sarebbero loro a intercettare il clic. */
.scheda--progetto > h2 { z-index: 2; }
.scheda--progetto { isolation: isolate; }

.scheda--progetto .etichetta { background: var(--carta); box-shadow: 0 0 0 1px var(--bordo); }
.scheda--progetto h2, .scheda--progetto h3 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); margin-bottom: var(--sp-2);
}
.scheda--progetto p  { color: var(--inchiostro); font-size: 1.05rem; }

.scheda--progetto .scheda__link {
  align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 46px;
  margin-top: var(--sp-3); padding: .45em 1.3em;
  border: 2px solid var(--verde-medio); border-radius: 999px;
  color: var(--verde-scuro); background: var(--carta);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.scheda--progetto .scheda__link:hover {
  background: var(--verde-medio); color: #fff; text-decoration: none;
}
.scheda--progetto:hover { transform: translateY(-6px); }

.etichetta {
  display: inline-block; align-self: flex-start;
  padding: .2em .75em; margin-bottom: var(--sp-1);
  border-radius: 999px; background: var(--avorio-scuro);
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grigio);
}
.etichetta--attivo  { background: #E3F3E2; color: #145711; }
.etichetta--corso   { background: #DCF0FA; color: #005378; }
.etichetta--futuro  { background: #FFF6CC; color: #6B5300; }

/* --- 7a. I tre pilastri (chi siamo e cosa facciamo) -----------------------
   Niente riquadri intorno al testo: a dare struttura sono la barra di colore
   in cima a ogni colonna, l'icona e il divisore verticale fra una e l'altra. */

.pilastri {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-4);
}
.pilastro {
  --accento: var(--verde); --accento-forte: var(--verde-scuro);
  padding: var(--sp-3) var(--sp-4) 0;
  border-top: 4px solid var(--accento);
}
.pilastro:first-child { padding-left: 0; }
.pilastro:last-child  { padding-right: 0; }
.pilastro + .pilastro { border-left: 1px solid var(--bordo); }

.pilastro--azzurro { --accento: var(--azzurro); --accento-forte: var(--azzurro-scuro); }
.pilastro--giallo  { --accento: var(--giallo);  --accento-forte: #6B5300; }

.pilastro__icona { display: block; color: var(--accento-forte); margin-bottom: var(--sp-2); }
.pilastro__icona svg { width: 54px; height: 54px; stroke-width: 2; }
.pilastro h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.pilastro > p { color: var(--grigio); font-size: 1rem; }

@media (max-width: 860px) {
  .pilastri { grid-template-columns: 1fr; }
  .pilastro { padding: var(--sp-3) 0 0; }
  .pilastro + .pilastro { border-left: 0; margin-top: var(--sp-3); }
}

/* --- 7a-bis. Organigramma del Consiglio ----------------------------------
   Le righe a tutta larghezza sprecavano spazio: qui i ruoli stanno su tre
   livelli, con i collegamenti fra la presidenza e le cariche esecutive. */

.organigramma { margin-top: var(--sp-4); }
.organigramma__livello { display: grid; gap: var(--sp-2); justify-content: center; }
.organigramma__livello--vertice { grid-template-columns: minmax(0, 260px); }
.organigramma__livello--tre     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.organigramma__livello--consiglieri { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* connettori fra il primo e il secondo livello */
.organigramma__giunzione { position: relative; height: var(--sp-4); }
.organigramma__giunzione::before {         /* discesa dal vertice */
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 50%;
  background: var(--bordo);
}
.organigramma__giunzione::after {          /* traversa verso le tre cariche */
  content: ""; position: absolute; top: 50%; height: 2px; background: var(--bordo);
  left: 16.6%; right: 16.6%;
}
.organigramma__livello--tre .nodo { position: relative; }
.organigramma__livello--tre .nodo::before {
  content: ""; position: absolute; left: 50%; top: calc(-1 * var(--sp-4) / 2);
  width: 2px; height: calc(var(--sp-4) / 2); background: var(--bordo);
}

.nodo {
  --nodo-accento: var(--verde);
  display: flex; flex-direction: column; gap: .15rem; text-align: center;
  background: var(--carta); border: 1px solid var(--bordo);
  border-top: 3px solid var(--nodo-accento);
  border-radius: 12px; padding: .9rem 1rem;
  box-shadow: var(--ombra);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nodo:hover, .nodo:focus-within { transform: translateY(-3px); box-shadow: var(--ombra-alta); }

.nodo--azzurro { --nodo-accento: var(--azzurro); }
.nodo--rosso   { --nodo-accento: var(--rosso); }
.nodo--giallo  { --nodo-accento: var(--giallo); }

.nodo__ruolo {
  font-size: .74rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--grigio);
}
.nodo__nome { font-weight: 650; }

.nodo--vertice { border-top-width: 5px; padding-block: 1.15rem; }
.nodo--vertice .nodo__nome { font-size: 1.15rem; }

/* Banda di richiamo sotto l'organigramma: il verde e' opaco e non semitrasparente,
   cosi' il contrasto del testo resta lo stesso su qualunque sfondo di sezione. */
.organigramma__nota {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: #E6F1E2;
  border-radius: var(--raggio);
  box-shadow: inset 0 0 0 1px rgba(25,107,22,.14);
  text-align: center; text-wrap: balance;
  color: var(--inchiostro); font-size: 1.05rem;
  max-width: none;
}
.organigramma__nota a { font-weight: 650; }

.organigramma__gruppo {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo);
}
.organigramma__gruppo > h3 {
  font-family: var(--font-testo); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grigio);
  text-align: center; margin-bottom: var(--sp-2);
}

@media (max-width: 860px) {
  .organigramma__livello--tre,
  .organigramma__livello--consiglieri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organigramma__giunzione::after { left: 25%; right: 25%; }
}
@media (max-width: 560px) {
  .organigramma__livello--tre,
  .organigramma__livello--consiglieri { grid-template-columns: 1fr; }
  /* impilati, i connettori non avrebbero piu' senso */
  .organigramma__giunzione { height: var(--sp-2); }
  .organigramma__giunzione::after { display: none; }
  .organigramma__livello--tre .nodo::before { display: none; }
}

/* --- 7b. Finalita' statutarie in quattro colonne -------------------------- */

.finalita__voce {
  --accento-tenue: rgba(58,170,53,.14);
  --accento-forte: var(--verde-scuro);
  display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-3);
  box-shadow: var(--ombra);
}
.finalita__voce--azzurro { --accento-tenue: rgba(0,159,227,.14); --accento-forte: var(--azzurro-scuro); }
.finalita__voce--giallo  { --accento-tenue: rgba(255,222,0,.28); --accento-forte: #6B5300; }
.finalita__voce--rosso   { --accento-tenue: rgba(227,6,19,.11);  --accento-forte: var(--rosso-scuro); }

.finalita__icona {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center; margin-bottom: var(--sp-2);
  background: var(--accento-tenue); color: var(--accento-forte);
}
.finalita__icona svg { width: 32px; height: 32px; }
.finalita__voce h3 { font-size: 1.16rem; margin: 0 0 .6rem; }
.finalita__voce p  { font-size: 1rem; color: var(--grigio); margin: 0; }

/* --- 7c. Schede dei partner ----------------------------------------------- */

/* La classe sta direttamente sull'<img>, non su un contenitore. Servono quindi
   sia il riquadro di dimensioni fisse (per allineare loghi di forma diversa) sia
   object-fit: contain, altrimenti l'immagine viene stirata per riempirlo. */
.partner__logo {
  display: block;
  width: 100%; height: 88px;
  object-fit: contain; object-position: center;
  margin-bottom: var(--sp-2);
}
.segnaposto-logo {
  display: grid; place-items: center; height: 88px; width: 100%;
  margin-bottom: var(--sp-2); padding: .5rem;
  border: 2px dashed var(--bordo); border-radius: 10px;
  background: var(--avorio); color: var(--grigio);
  font-size: .84rem; text-align: center; line-height: 1.35;
}
.scheda--partner .scheda__link { margin-top: var(--sp-3); }

/* --- 7b-bis. Schede progetto cliccabili, briciole e salti ------------------ */

/* Tutta la scheda e' cliccabile, ma il collegamento vero e' uno solo, sul titolo:
   cosi' chi naviga da tastiera incontra una sola tabulazione per scheda e lo
   screen reader legge un link con un nome sensato invece di "Scopri di piu'". */
.scheda--progetto { position: relative; }
.scheda__titolo { color: inherit; text-decoration: none; }
.scheda__titolo::after { content: ""; position: absolute; inset: 0; }
.scheda--progetto:focus-within {
  outline: 3px solid var(--azzurro-scuro); outline-offset: 3px;
}
.scheda__titolo:focus-visible { outline: none; }
.scheda--progetto:hover .scheda__titolo { color: var(--verde-scuro); }

/* .temi e' un <p>, quindi eredita ".scheda p { flex: 1 }" e crescerebbe fino a
   riempire la scheda, stirando le pillole in altezza: flex 0 0 auto lo impedisce. */
.temi {
  display: flex; flex-wrap: wrap; gap: .4rem;
  align-items: flex-start; flex: 0 0 auto;
  margin: 0 0 var(--sp-1); max-width: none;
}
.tema {
  font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--azzurro-scuro); background: #E4F2FA;
  border-radius: 999px; padding: .25em .8em;
}
.scheda--progetto .etichetta { margin: var(--sp-2) 0 0; }
/* Nella scheda "Scopri di piu'" e' decorativo: il collegamento e' il titolo */
.scheda--progetto span.scheda__link { border: 0; padding: 0; background: none; margin-top: .6rem; }
.scheda--progetto span.scheda__link::after { content: " \2192"; }

.briciole {
  font-size: .95rem; color: var(--grigio);
  margin-bottom: var(--sp-3); display: flex; flex-wrap: wrap; gap: .5rem;
}
.briciole a { color: var(--verde-scuro); }
.briciole [aria-current] { color: var(--grigio); }

.salti {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.salti a {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-2) var(--sp-3);
  text-decoration: none; box-shadow: var(--ombra);
}
.salti a:hover { border-color: var(--verde-medio); }
.salti span { font-size: .82rem; font-weight: 700; letter-spacing: .08em;
              text-transform: uppercase; color: var(--grigio); }
.salti strong { color: var(--verde-scuro); font-family: var(--font-titoli); font-size: 1.05rem; }
.salto--succ { text-align: right; align-items: flex-end; }
.salti a:only-child { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .salti { grid-template-columns: 1fr; }
  .salto--succ { text-align: left; align-items: flex-start; }
}

/* --- 7c-bis. Carosello fotografico ---------------------------------------- */

/* Senza JavaScript resta una striscia che si scorre col dito, con la rotella o
   con le frecce (la pista e' focalizzabile): i comandi avanti/indietro vengono
   aggiunti da main.js solo quando puo' effettivamente farli funzionare. */

.carosello { position: relative; margin: var(--sp-2) 0 var(--sp-4); }

.carosello__pista {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 0 var(--sp-1);
}
.carosello__pista:focus-visible { outline: 3px solid var(--azzurro-scuro); outline-offset: 4px; }

.carosello__slide {
  flex: 0 0 100%; scroll-snap-align: center;
  margin: 0; max-width: none;
}
/* object-fit: contain e non cover: le foto sono verticali e orizzontali insieme,
   e ritagliare significherebbe tagliare i volti. */
.carosello__slide img {
  display: block; width: 100%; height: clamp(260px, 52vh, 460px);
  object-fit: contain; object-position: center;
  background: var(--avorio-scuro); border-radius: var(--raggio);
}

.carosello__comandi {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); margin-top: var(--sp-2);
}
.carosello__btn {
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  background: var(--carta); color: var(--verde-scuro);
  border: 2px solid var(--verde-medio); border-radius: 50%;
  font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.carosello__btn:hover:not(:disabled) { background: var(--verde-medio); color: #fff; }
.carosello__btn:disabled { opacity: .35; cursor: default; border-color: var(--bordo); color: var(--grigio); }
.carosello__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                      stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.carosello__conta {
  margin: 0; min-width: 7ch; text-align: center;
  font-size: .95rem; font-weight: 650; color: var(--grigio);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 760px) {
  .carosello__slide { flex-basis: 66%; }
}
@media (prefers-reduced-motion: reduce) {
  .carosello__pista { scroll-behavior: auto; }
}

/* --- 7d. Striscia dei loghi partner --------------------------------------- */

.loghi-partner {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3);
}
.loghi-partner li {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center; max-width: none;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-2);
}
/* Altezza fissa e object-fit: i loghi hanno proporzioni molto diverse fra loro
   e senza questo si vedrebbero uno grande il doppio dell'altro. */
.loghi-partner img { height: 74px; width: 100%; object-fit: contain; }
.loghi-partner span { font-size: .88rem; color: var(--grigio); line-height: 1.35; }

/* --- 7e. Servizi per comune ----------------------------------------------- */

.comune {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-4);
  margin-bottom: var(--sp-3); box-shadow: var(--ombra);
  border-top: 6px solid var(--verde);
  scroll-margin-top: 6rem;
}
.comune h2 { margin-bottom: var(--sp-3); }

.gestore { padding-left: var(--sp-3); border-left: 3px solid var(--avorio-scuro); }
.gestore + .gestore { margin-top: var(--sp-3); }
.gestore h3 { font-family: var(--font-testo); font-size: 1.05rem; color: var(--azzurro-scuro);
              margin-bottom: .2rem; }
.gestore__nota { font-size: .9rem; color: var(--grigio); margin-bottom: .6rem; }

.elenco-servizi { list-style: none; padding: 0; margin: 0; }
.elenco-servizi li {
  position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: 1.02rem;
}
.elenco-servizi li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--azzurro);
}

/* --- 8. Riquadri di richiamo --------------------------------------------- */

.richiamo {
  background: var(--carta); border: 1px solid var(--bordo);
  border-left: 6px solid var(--azzurro);
  border-radius: var(--raggio); padding: var(--sp-3);
  box-shadow: var(--ombra);
}
.richiamo--verde  { border-left-color: var(--verde); }
.richiamo--giallo { border-left-color: var(--giallo); background: #FFFDF2; }
.richiamo--rosso  { border-left-color: var(--rosso); }
.richiamo > :last-child { margin-bottom: 0; }

.da-completare {
  display: inline-block;
  background: #FFF3CD; color: #6B5300;
  border: 1px dashed #C9A227; border-radius: 6px;
  padding: .1em .55em; font-size: .92em; font-weight: 650;
}

/* Blocco 5x1000: il codice fiscale deve saltare all'occhio */
.cinque-mille {
  background: linear-gradient(135deg, #14601A, #0E4A14);
  color: #fff; border-radius: var(--raggio);
  padding: var(--sp-4); box-shadow: var(--ombra-alta);
}
.cinque-mille h2, .cinque-mille h3 { color: #fff; }
.cinque-mille p { color: rgba(255,255,255,.92); }
/* La regola .cinque-mille p e' piu' specifica di .codice-fiscale: senza
   ridichiarare qui il colore, il codice resterebbe bianco su fondo giallo. */
.cinque-mille .codice-fiscale { color: #1F2421; }

.codice-fiscale {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--giallo); color: #1F2421;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem); font-weight: 700;
  letter-spacing: .06em; padding: .45em .75em; border-radius: 10px;
  margin: var(--sp-2) 0;
}
.copia-btn {
  min-height: 44px; padding: .35em 1em;
  font: inherit; font-size: .82rem; font-weight: 700;
  background: #1F2421; color: #fff; border: 0; border-radius: 999px; cursor: pointer;
}
.copia-btn:hover { background: #000; }

/* --- 9. Elenchi e tabelle ------------------------------------------------ */

.elenco-spuntato { list-style: none; padding: 0; }
.elenco-spuntato li {
  position: relative; padding-left: 2rem; margin-bottom: var(--sp-2);
}
.elenco-spuntato li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--verde);
}

.elenco-comuni {
  display: flex; flex-wrap: wrap; gap: .6rem;
  list-style: none; padding: 0;
}
.elenco-comuni li {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 999px; padding: .45em 1.1em; font-weight: 600; font-size: .98rem;
}

/* Quando le pillole sono collegamenti, l'area cliccabile deve essere tutta la
   pillola e non solo il testo: per questo lo stile passa dal <li> all'<a>. */
.elenco-comuni--link li { padding: 0; background: none; border: 0; }
.elenco-comuni--link a {
  display: flex; align-items: center; min-height: 44px;
  padding: .45em 1.2em;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 999px;
  font-weight: 600; font-size: .98rem;
  color: var(--inchiostro); text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.elenco-comuni--link a:hover {
  background: var(--verde-medio); border-color: var(--verde-medio); color: #fff;
}

.tabella-avvolta { overflow-x: auto; margin-bottom: var(--sp-3); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; background: var(--carta); }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { background: var(--avorio-scuro); font-weight: 700; color: var(--verde-scuro); }
caption { text-align: left; padding-bottom: var(--sp-1); color: var(--grigio); font-size: .95rem; }

/* --- 9b. Bilancio e coordinate bancarie ----------------------------------- */

.voce-dettaglio {
  display: block; margin-top: .25rem;
  font-weight: 400; font-size: .88rem; color: var(--grigio);
}
/* Queste regole valgono SOLO per le tabelle di conti: applicate a tutte le tabelle
   mandavano a destra e su una riga sola anche le celle di testo discorsivo, che
   diventavano larghissime e uscivano dal contenitore. */
.tabella-conti td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella-conti td.negativo { color: var(--rosso-scuro); font-weight: 600; }
.tabella-conti tfoot th, .tabella-conti tfoot td { font-weight: 700; background: var(--avorio-scuro); }
.tabella-conti tfoot th { color: var(--inchiostro); }
.tabella-conti th[scope="col"]:not(:first-child) { text-align: right; }

.iban {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem; font-weight: 600; letter-spacing: .04em;
  background: var(--avorio-scuro); border-radius: 6px; padding: .25em .6em;
}

/* --- 10. Cronologia (storia) --------------------------------------------- */

.cronologia { list-style: none; padding: 0; margin: 0; position: relative; }
.cronologia li { position: relative; padding-left: 3rem; margin-bottom: var(--sp-3); max-width: none; }

/* Il filo non e' piu' un'unica riga di sfondo: ogni tappa porta il proprio
   segmento verso quella successiva. Cosi', scorrendo, il percorso si costruisce
   un pezzo alla volta invece di essere gia' tutto disegnato. */
.cronologia li::after {
  content: ""; position: absolute; left: 9px; top: 1.4rem;
  width: 3px; height: calc(100% - .9rem + var(--sp-3));
  background: linear-gradient(var(--verde), var(--azzurro));
  border-radius: 2px; transform-origin: top center;
}
.cronologia li:last-child::after { display: none; }

.cronologia li::before {
  content: ""; position: absolute; left: 2px; top: .45rem;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--carta); border: 4px solid var(--verde);
}

/* Lo stato di partenza dell'animazione esiste solo se il JavaScript ha aggiunto
   la classe: senza JavaScript, o con "riduci animazioni" attivo, la cronologia
   e' semplicemente gia' tutta visibile. */
.cronologia--anima li::after  { transform: scaleY(0); transition: transform .6s ease .12s; }
.cronologia--anima li::before { transform: scale(.2); opacity: 0; transition: transform .45s ease, opacity .45s ease; }
.cronologia--anima li > *     { opacity: 0; transform: translateY(14px);
                                transition: opacity .5s ease .08s, transform .5s ease .08s; }

.cronologia--anima li.visibile::after  { transform: scaleY(1); }
.cronologia--anima li.visibile::before { transform: scale(1); opacity: 1; }
.cronologia--anima li.visibile > *     { opacity: 1; transform: none; }
.cronologia .anno {
  display: block; font-family: var(--font-titoli); font-weight: 700;
  font-size: 1.3rem; color: var(--verde-scuro);
}

/* --- 11. Progetti (pagina attivita') ------------------------------------- */

.progetto {
  scroll-margin-top: 6rem;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-4);
  margin-bottom: var(--sp-4); box-shadow: var(--ombra);
}
.progetto__testa { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.progetto h2 { margin-bottom: var(--sp-2); }
.progetto__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  margin: var(--sp-3) 0 0; padding-top: var(--sp-2);
  border-top: 1px solid var(--bordo); font-size: .95rem; color: var(--grigio);
}
.progetto__meta div { max-width: none; }
.progetto__meta dt { font-weight: 700; color: var(--inchiostro); }
.progetto__meta dd { margin: 0; }

.indice-progetti { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.indice-progetti a {
  display: block; background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 999px; padding: .5em 1.1em; text-decoration: none;
  font-weight: 600; font-size: .96rem; color: var(--inchiostro);
}
.indice-progetti a:hover { background: var(--verde-medio); color: #fff; border-color: var(--verde-medio); }

/* --- 12. News ------------------------------------------------------------ */

.notizia {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--sp-3);
  box-shadow: var(--ombra); display: flex; flex-direction: column;
}
.notizia time { font-size: .9rem; font-weight: 700; color: var(--azzurro-scuro); letter-spacing: .04em; }
.notizia h3 { margin: .35rem 0 var(--sp-1); }
.notizia p { font-size: 1rem; color: var(--grigio); }

/* --- 14. Piede ----------------------------------------------------------- */

.piede { background: #16211B; color: #DDE5DF; padding-block: var(--sp-5) var(--sp-3); margin-top: var(--sp-6); }
.piede a { color: #A8E3A2; }
.piede a:hover { color: #FFDE00; }
.piede h2, .piede h3 { color: #fff; font-size: 1.05rem; font-family: var(--font-testo); letter-spacing: .04em; text-transform: uppercase; }
.piede__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-4); }
.piede ul { list-style: none; padding: 0; }
.piede li { margin-bottom: .45rem; }
.piede p, .piede li { color: #C6D2CB; font-size: .98rem; }
.piede__logo { width: 74px; margin-bottom: var(--sp-2); }
.piede__coda {
  margin-top: var(--sp-4); padding-top: var(--sp-2);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); justify-content: space-between;
  font-size: .88rem; color: #9FAEA6;
}
.piede__coda p { color: #9FAEA6; font-size: .88rem; margin: 0; }

/* --- 15. Adattamento agli schermi piccoli -------------------------------- */

@media (max-width: 980px) {
  .copertina__griglia { grid-template-columns: 1fr; }
  .emblema-animato { display: none; }   /* decorativo: si puo' togliere */
  .griglia--3, .griglia--4 { grid-template-columns: repeat(2, 1fr); }
  .loghi-partner { grid-template-columns: repeat(2, 1fr); }
  .piede__griglia { grid-template-columns: 1fr 1fr; }

  .apri-menu { display: inline-flex; }
  .nav-principale {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--carta); border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra-alta); padding: var(--sp-2);
  }
  .nav-principale.aperto { display: block; }
  .nav-lista { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav-lista a { padding: .85rem 1rem; font-size: 1.05rem; }
  .nav-lista .btn { margin: var(--sp-1) 0 0; }
  /* Senza JavaScript il menu resta sempre visibile invece di sparire */
  html.no-js .nav-principale { display: block; position: static; box-shadow: none; border: 0; padding: 0; }
  html.no-js .apri-menu { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 1.06rem; }
  .griglia--2, .griglia--3, .griglia--4 { grid-template-columns: 1fr; }
  .comune { padding: var(--sp-3); }
  .gestore { padding-left: var(--sp-2); }
  .numeri { grid-template-columns: 1fr; text-align: left; gap: var(--sp-2); }
  .piede__griglia { grid-template-columns: 1fr; }
  .progetto { padding: var(--sp-3); }
  /* Sul telefono lo spazio fra logo e pulsante Menu e' poco: senza questi
     limiti il nome va a capo tre volte e l'intestazione occupa mezzo schermo. */
  .marchio__nome { font-size: .86rem; max-width: 12ch; }
  .marchio__sotto { display: none; }
  .marchio img { width: 46px; height: 46px; }
  .marchio { gap: .55rem; }
  .intestazione__interno { gap: var(--sp-1); padding-block: .55rem; }
  .apri-menu { padding: .5rem .75rem; }
}

/* --- 16. Preferenze dell'utente ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .scheda:hover, .btn:hover { transform: none; }
  .emblema-animato .strato { animation: none !important; opacity: 1; transform: none; }
  .cronologia--anima li::after  { transform: scaleY(1); }
  .cronologia--anima li::before { transform: scale(1); opacity: 1; }
  .cronologia--anima li > *     { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --grigio: #3C4442; --bordo: #9AA39E; }
  .scheda, .richiamo, .notizia, .progetto { border-width: 2px; }
}

@media print {
  .intestazione, .piede, .gruppo-btn, .apri-menu, .salta-al-contenuto { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* --- 17. Il significato del logo (Chi siamo) ------------------------------ */

.logo-significato {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-5); align-items: center;
}
.logo-significato__figura { margin: 0; }
/* Il ritaglio e' quadrato su fondo bianco: tondo diventa un sigillo che
   non mostra spigoli bianchi sul fondo avorio della sezione. */
.logo-significato__figura img {
  display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto;
  border-radius: 50%; background: var(--carta); box-shadow: var(--ombra-alta);
}
.logo-significato h2 { margin-top: 0; }
.logo-significato__motto {
  font-family: var(--font-titoli); font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.4;
  color: var(--verde-scuro); margin: var(--sp-2) 0;
}
.logo-significato p { max-width: 58ch; }

.logo-significato__nota { font-size: .95rem; color: var(--grigio); margin-top: var(--sp-3); }

@media (max-width: 980px) {
  .logo-significato { grid-template-columns: 1fr; gap: var(--sp-4); }
  .logo-significato__figura img { max-width: 300px; }
}