/* =====================================================================
   SCUOLA DI SOCIOCRAZIA — foglio di stile unico
   ---------------------------------------------------------------------
   Come è organizzato:
   1. Variabili (colori, misure)      6. Sezioni e griglie
   2. Base e tipografia               7. Schede e componenti
   3. Bottoni e badge                 8. Pagine specifiche
   4. Barra di navigazione            9. Articoli
   5. Hero                           10. Footer e responsive

   Per cambiare un colore in tutto il sito, modifica il valore in :root.
   ===================================================================== */

/* ============ 1. VARIABILI ============ */
:root {
  /* Testo */
  --navy: #183562;            /* titoli */
  --testo: #2d3543;           /* corpo del testo */
  --testo-tenue: #4e5c74;     /* testi secondari, didascalie */
  --link: #2b5cab;
  --link-hover: #224887;

  /* Sfondi. Tre superfici, non di più:
     bianco → il fondo di base
     tinta  → l'alternanza, per dare ritmo alle sezioni
     scuro  → uno o due momenti per pagina (la richiesta finale, il footer)
     Le tinte verde, gialla e rosa NON si usano come sfondo di sezione:
     hanno fra loro un contrasto di 1,02-1,05, cioè non si distinguono.
     Restano solo dove codificano dati con una legenda (il calendario). */
  --sfondo: #ffffff;
  --sfondo-tinta: #eff3fb;
  --scuro: #183562;
  --card: #ffffff;
  --bordo: #dae5f6;
  --placeholder: #eff3fb;

  /* Bottoni e UI */
  --btn-primario: #2b5cab;
  --btn-primario-hover: #224887;
  --btn-cta: #ab2b5c;
  --btn-cta-hover: #872248;
  --badge: #bed0ef;
  --focus: rgba(92, 139, 214, .4);

  --brand: #5c8bd6;

  /* Palette standard SoFA, per intero.
     Le colonne sono scale di luminosità: 50 e 200 servono da sfondo e
     decorazione, 400 per decorazioni e testo grande, 600 e 800 per il testo
     (800 ha contrasto AAA su bianco). Da usare quando serve distinguere
     categorie fra loro, come i tipi di sessione nel calendario. */
  --blu-50:  #eff3fb;  --blu-200:  #bed0ef;  --blu-400:  #5c8bd6;  --blu-600:  #2b5cab;  --blu-800:  #183562;
  --rosso-50:#fbeff3;  --rosso-200:#efbed0;  --rosso-400:#d65c8b;  --rosso-600:#ab2b5c;  --rosso-800:#621835;
  --verde-50:#f3fbef;  --verde-200:#d0efbe;  --verde-400:#8bd65c;  --verde-600:#5cab2b;  --verde-800:#356218;
  --giallo-50:#fbf6ef; --giallo-200:#efdcbe; --giallo-400:#d6a75c; --giallo-600:#ab7a2b; --giallo-800:#624618;
  /* Grigio neutro, fuori dalla scala blu: usato per "orientamento e ripasso"
     nel calendario, perché col blu si confondeva con le sessioni decisionali. */
  --neutro-50:#f2f3f4; --neutro-200:#c9ced6; --neutro-800:#414855;

  --max: 1200px;
  --raggio: 16px;
  --ombra: 0 10px 30px -18px rgba(24, 53, 98, .35);
  /* Altezza della barra in alto: 14px di padding sopra e sotto, il marchio
     da 48px e il filo del bordo. Serve a due cose che devono restare
     d'accordo fra loro: lo stacco delle ancore e i calcoli di ingombro. */
  --altezza-testa: 77px;
}

/* ============ 2. BASE E TIPOGRAFIA ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* La barra in alto è sticky: senza scroll-padding il browser porta l'ancora
   a filo della finestra e il titolo finisce nascosto dietro la barra.
   Lo spazio in più stacca il titolo dal bordo invece di incollarcelo. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altezza-testa) + 24px); }
body {
  font-family: "Helvetica Neue", Helvetica, Arial,
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--testo);
  background: var(--sfondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto serve perché gli attributi width/height nell'HTML (che servono a
   evitare i salti di impaginazione durante il caricamento) non impongano poi
   una proporzione sbagliata. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; letter-spacing: -.015em; }
strong, b { color: var(--navy); }

.contenitore { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* Colonna di lettura: un testo lungo non deve superare le ~68 battute per riga */
.prosa { max-width: 68ch; }
.prosa p { margin-bottom: 18px; }
.prosa p:last-child { margin-bottom: 0; }

/* Testo che serve solo a chi usa uno screen reader: presente, ma non visibile */
.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Accessibilità: anello di messa a fuoco per chi naviga da tastiera */
a:focus-visible, button:focus-visible, input:focus-visible,
.btn:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px;
}

/* Scala dei titoli. Tre gradini distinti: il titolo di pagina deve vedersi
   che è il titolo di pagina, e non confondersi con quelli di sezione. */
/* text-wrap: balance distribuisce le righe di un titolo invece di riempirne
   una e lasciare una parola sola sull'ultima. Il browser lo fa solo sui
   blocchi corti, che è esattamente il caso dei titoli. */
.mega { font-weight: 800; letter-spacing: -.032em; line-height: 1.06;
        font-size: clamp(2.1rem, 4.2vw, 3.1rem); text-wrap: balance; }   /* h1 */
.sezione-testa h2, h2.mega { font-size: clamp(1.55rem, 2.5vw, 2rem);
        letter-spacing: -.025em; line-height: 1.12; }      /* h2 di sezione */
.hero h1.mega, .page-hero h1.mega { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }
.meta { color: var(--testo-tenue); }
.meta b { color: var(--navy); }
.lead { font-weight: 800; color: var(--navy); }
/* Sui testi di servizio (sottotitoli, occhielli) "pretty" evita che l'ultima
   riga resti con una parola sola, senza ribilanciare tutto il blocco. */
.sottotitolo, .sezione-testa p { text-wrap: pretty; }

/* Chi ha chiesto al sistema operativo di ridurre il movimento non deve
   ricevere né lo scorrimento animato né le transizioni: per chi soffre di
   vertigini o emicrania quell'impostazione non è una preferenza estetica. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Segnaposto immagine: riquadro tratteggiato con l'indicazione di cosa va messo */
.ph {
  background: var(--placeholder); border: 1px dashed #b0c4e2;
  border-radius: var(--raggio); display: flex; align-items: center;
  justify-content: center; color: var(--testo-tenue); font-size: .85rem;
  text-align: center; padding: 16px; min-height: 120px;
}

/* ============ 3. BOTTONI E BADGE ============ */
.btn {
  /* Senza questo, un <button class="btn"> tiene l'aspetto nativo del sistema
     (grigio, testo nero) e ignora sfondo e colore: succede al modulo newsletter. */
  -webkit-appearance: none; appearance: none;
  display: inline-block; padding: 13px 24px; border-radius: 10px;
  font-weight: 700; font-size: 1rem; cursor: pointer; border: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-blu { background: var(--btn-primario); color: #fff; }
.btn-blu:hover { background: var(--btn-primario-hover); color: #fff; }
/* CTA: una sola volta per pagina, sull'azione più importante */
.btn-cta { background: var(--btn-cta); color: #fff; }
.btn-cta:hover { background: var(--btn-cta-hover); color: #fff; }
.btn-bordo { background: var(--card); color: var(--link); border-color: var(--bordo); }
.btn-bordo:hover { background: var(--card); color: var(--link-hover); border-color: var(--link); }
/* Bottone con un'icona a sinistra del testo, per "Aggiungi al calendario".
   L'icona è un SVG scritto nella pagina, non un'immagine di Google: così il
   sito non fa partire richieste a terzi solo per mostrare un pulsante. */
.btn-ico { display: inline-flex; align-items: center; gap: 9px; }
.btn-ico svg { width: 19px; height: 19px; flex: none; }

/* --- "Aggiungi al calendario": il bottone apre un pannellino con due scelte ---
   È un <details>: si apre da tastiera e con lo screen reader senza che noi
   si debba scrivere nulla, e resta un bottone anche se il JavaScript non
   parte. Lo script si limita a chiuderlo quando si clicca fuori o si preme
   Esc, che è l'unica cosa che <details> non fa da solo. */
.menu-cal { position: relative; display: inline-block; }
.menu-cal > summary { list-style: none; cursor: pointer; }
.menu-cal > summary::-webkit-details-marker { display: none; }
.menu-cal > summary::marker { content: ""; }
/* La freccina segue l'apertura del pannello */
.menu-cal > summary::after {
  content: ""; width: 13px; height: 13px; flex: none; margin-left: 2px;
  background-color: currentColor; transition: transform .15s;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat center / contain;
}
.menu-cal[open] > summary::after { transform: rotate(180deg); }

.menu-cal-pannello {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 250px; padding: 6px;
  background: var(--card); border: 1px solid var(--bordo);
  border-radius: 14px; box-shadow: 0 16px 34px -14px rgba(24, 53, 98, .45);
}
.menu-cal-pannello a {
  display: block; padding: 11px 13px; border-radius: 10px;
  text-decoration: none; color: var(--navy); font-weight: 700; font-size: .97rem;
}
.menu-cal-pannello a:hover, .menu-cal-pannello a:focus-visible {
  background: var(--sfondo-tinta); text-decoration: none; }
.menu-cal-pannello a span {
  display: block; font-weight: 400; font-size: .85rem;
  color: var(--testo-tenue); margin-top: 2px; }
/* Sul telefono il pannello si appoggia al bordo destro se non ci sta */
@media (max-width: 420px) {
  .menu-cal-pannello { left: auto; right: 0; min-width: 0; width: max(250px, 70vw); }
}
.btn-testo { background: transparent; color: var(--link); font-weight: 700; padding: 0; }
.btn-testo:hover { color: var(--link-hover); }
/* La freccia è un'icona, non il carattere "→": stessa famiglia degli altri
   segni del sito (tratto arrotondato, spesso 2px) invece del glifo del font,
   che cambia spessore e allineamento da un sistema all'altro. */
.btn-testo::after {
  content: ""; display: inline-block; width: 15px; height: 15px;
  margin-left: 5px; vertical-align: -2px; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>') no-repeat center / contain;
  transition: transform .15s;
}
a.scheda:hover .btn-testo::after, .btn-testo:hover::after { transform: translateX(3px); }

.azioni { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
/* Una riga di servizio subito sotto i bottoni va staccata, altrimenti si legge
   come didascalia del bottone invece che come frase a sé. */
.azioni + .meta { margin-top: 20px; }

.badge {
  display: inline-block; background: var(--badge); color: var(--navy);
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 5px 12px; border-radius: 999px;
}

/* ============ 4. BARRA DI NAVIGAZIONE ============ */
.topnav { position: sticky; top: 0; z-index: 50; background: var(--sfondo);
          border-bottom: 1px solid var(--bordo); }
.topnav-inner { display: flex; align-items: center; justify-content: space-between;
                gap: 24px; padding: 14px 0; }
.logo { font-weight: 800; font-size: 1.3rem; color: var(--navy);
        display: inline-flex; align-items: center; gap: 10px; }
.logo:hover { text-decoration: none; color: var(--navy); }
.logo .marchio { width: 48px; height: 48px; flex: none; }
/* Niente flex-wrap: se le voci non ci stanno più in riga, deve intervenire
   il menu a tendina (sotto i 900px), non un secondo rigo scomposto. */
.topnav-link { display: flex; flex-wrap: nowrap; align-items: center; gap: 26px; font-weight: 700; }
.topnav-link a { color: var(--navy); }
.topnav-link a.attivo { color: var(--link); }
/* Nel menu nessuna voce si colora: il rosa #AB2B5C segnala una cosa sola,
   il CTA della pagina. La voce corrente si distingue con il blu di .attivo. */
.nav-toggle, .nav-burger { display: none; }

/* --- Sottomenu di "Risorse", l'unico del sito --- */
.topnav-menu { position: relative; display: flex; align-items: center; }
.topnav-menu > a { display: inline-flex; align-items: center; gap: 5px; }
.topnav-menu > a::after {
  content: ""; width: 10px; height: 10px; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') no-repeat center / contain;
  transition: transform .15s;
}
.topnav-menu:hover > a::after,
.topnav-menu:focus-within > a::after { transform: rotate(180deg); }
.topnav-sub {
  position: absolute; top: 100%; left: -12px; margin-top: 14px; padding: 6px;
  min-width: 168px; background: var(--card); border: 1px solid var(--bordo);
  border-radius: 12px; box-shadow: var(--ombra); z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
/* Un ponte invisibile fra il link e il pannello: senza, il mouse che scende
   in diagonale esce dall'area attiva e il sottomenu si chiude troppo presto. */
.topnav-menu::after { content: ""; position: absolute; top: 100%; left: 0;
                      width: 100%; height: 14px; }
.topnav-menu:hover .topnav-sub,
.topnav-menu:focus-within .topnav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.topnav-sub a { padding: 8px 12px; border-radius: 8px; font-weight: 600;
                font-size: .93rem; white-space: nowrap; }
.topnav-sub a:hover { background: var(--sfondo-tinta); color: var(--link-hover); }

/* --- Barra di ricerca --- */
.ricerca { position: relative; flex: none; }
.ricerca-campo { position: relative; display: flex; align-items: center; }
.ricerca-campo svg { position: absolute; left: 11px; width: 17px; height: 17px;
                     color: var(--testo-tenue); pointer-events: none; }
.ricerca input {
  width: 190px; padding: 9px 12px 9px 34px; font-size: .95rem; font-family: inherit;
  color: var(--testo); background: var(--card);
  border: 1px solid var(--bordo); border-radius: 999px;
  transition: width .18s, border-color .15s;
}
.ricerca input::placeholder { color: var(--testo-tenue); font-weight: 400; }
.ricerca input:focus { width: 250px; border-color: var(--link); outline: none;
                       box-shadow: 0 0 0 3px var(--focus); }

.ricerca-esiti {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(440px, 88vw);
  background: var(--card); border: 1px solid var(--bordo); border-radius: 14px;
  box-shadow: 0 20px 44px -16px rgba(24, 53, 98, .35);
  max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; z-index: 80;
}
.ricerca-esiti[hidden] { display: none; }
.ricerca-esiti a { display: block; padding: 11px 13px; border-radius: 9px; font-weight: 400; }
.ricerca-esiti a:hover, .ricerca-esiti a.evidenziato { background: var(--blu-50); text-decoration: none; }
.ricerca-esiti .et { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase;
                     letter-spacing: .06em; color: var(--testo-tenue); }
.ricerca-esiti .ti { display: block; font-weight: 700; color: var(--navy); margin-top: 2px; }
.ricerca-esiti .sn { display: block; font-size: .88rem; color: var(--testo-tenue);
                     margin-top: 3px; line-height: 1.45; }
.ricerca-esiti mark { background: var(--giallo-200); color: inherit; border-radius: 3px; padding: 0 1px; }
.ricerca-vuoto { padding: 16px 13px; color: var(--testo-tenue); font-size: .93rem; }

/* ============ 5. HERO ============ */
.hero { padding: 52px 0 60px; }
.hero-griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.hero .sottotitolo { margin-top: 18px; font-size: 1.2rem; color: var(--testo-tenue); max-width: 42ch; }
.hero-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; max-width: 460px; }
.video-card { display: flex; align-items: center; gap: 16px; background: var(--card);
              border-radius: 14px; padding: 12px 20px 12px 12px; box-shadow: var(--ombra);
              transition: box-shadow .15s; }
.video-card:hover { text-decoration: none; }
.video-thumb { width: 96px; height: 64px; border-radius: 9px; position: relative;
               padding: 0; flex: none; min-height: 0; }
.video-thumb .play { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px;
                     background: rgba(255,255,255,.92); border-radius: 50%;
                     display: flex; align-items: center; justify-content: center; color: var(--testo); }
.video-card .label { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--navy); }

/* Intestazione delle pagine interne */
/* Il fondo generoso serve: senza, i bottoni finiscono appiccicati al bordo
   della sezione che segue e l'occhio li legge come parte di quella. */
.page-hero { padding: 52px 0 52px; }
.page-hero .sottotitolo { margin-top: 16px; font-size: 1.2rem; color: var(--testo-tenue); max-width: 60ch; }

/* ============ 6. SEZIONI E GRIGLIE ============ */
/* Ogni sezione: intestazione a tutta larghezza, poi il contenuto sotto.
   (Prima titolo a sinistra e testo a destra: allungava troppo le pagine.) */
.sezione { padding: 64px 0; }
.sezione-testa { max-width: 62ch; margin-bottom: 36px; }
.sezione-testa .mega { margin-bottom: 14px; }
.sezione-testa p { font-size: 1.12rem; color: var(--testo-tenue); }

/* --- Le tre superfici ---
   .sezione senza classe = bianca. Si alterna con .sez-tinta per dare ritmo;
   .sez-scura chiude la pagina e regge la richiesta finale. */
.sez-tinta { background: var(--sfondo-tinta); }

/* Le schede restano bianche con bordo su qualunque sfondo, tinto o bianco:
   sul bianco è il bordo a staccarle, sul tinto è il proprio bianco. */

/* I segnaposto immagine hanno il colore della tinta: sulle sezioni tinte,
   dove la tinta è già il fondo, si invertono in bianco per restare visibili. */
.sez-tinta .ph { background: #fff; }

/* --- Sezione scura --- */
.sez-scura { background: var(--scuro); color: rgba(255,255,255,.82); }
.sez-scura h1, .sez-scura h2, .sez-scura h3, .sez-scura h4,
.sez-scura strong, .sez-scura b { color: #fff; }
.sez-scura .sezione-testa p, .sez-scura p, .sez-scura .meta { color: rgba(255,255,255,.82); }
.sez-scura a:not(.btn) { color: var(--blu-200); }
.sez-scura a:not(.btn):hover { color: #fff; }
/* Sul fondo scuro i bottoni si invertono: il bianco diventa il colore forte */
.sez-scura .btn-cta, .sez-scura .btn-blu { background: #fff; color: var(--scuro); }
.sez-scura .btn-cta:hover, .sez-scura .btn-blu:hover { background: var(--blu-200); color: var(--scuro); }
.sez-scura .btn-bordo { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.sez-scura .btn-bordo:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.sez-scura .form-nl input { background: #fff; border-color: transparent; }
.sez-scura .badge { background: rgba(255,255,255,.16); color: #fff; }

/* Le schede dentro una sezione scura restano bianche: dentro di loro il testo
   torna scuro, altrimenti eredita il bianco della sezione e sparisce. */
.sez-scura .scheda, .sez-scura .prezzo { background: var(--card); border-color: transparent; }
.sez-scura .scheda h1, .sez-scura .scheda h2, .sez-scura .scheda h3, .sez-scura .scheda h4,
.sez-scura .scheda strong, .sez-scura .scheda b,
.sez-scura .prezzo .cifra { color: var(--navy); }
.sez-scura .scheda p, .sez-scura .scheda li,
.sez-scura .prezzo p, .sez-scura .prezzo .fascia { color: var(--testo-tenue); }
.sez-scura .scheda a:not(.btn) { color: var(--link); }
.sez-scura .scheda a:not(.btn):hover { color: var(--link-hover); }
.sez-scura .scheda .btn-cta { background: var(--btn-cta); color: #fff; }
.sez-scura .scheda .btn-cta:hover { background: var(--btn-cta-hover); }
.sez-scura .scheda .btn-blu { background: var(--link); color: #fff; }
.sez-scura .scheda .btn-bordo { background: #fff; color: var(--link); border-color: var(--bordo); }
/* I ritratti su fondo scuro: un filo di bianco attorno li stacca */
.sez-scura .membro .nome { color: #fff; }
.sez-scura .membro .avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

/* --- Sezione scura, variante amaranto ---
   Si scrive insieme a .sez-scura (class="sezione sez-scura sez-amaranto"):
   tutto il comportamento del fondo scuro resta quello, qui cambia solo il
   colore. Serve all'Accademia, che sul sito ha il suo rosa scuro: la sezione
   in home e la locandina si richiamano fra loro senza dover leggere il
   titolo. I due colori vengono dalla scala rossa della palette. */
.sez-amaranto { background: var(--rosso-800); }
.sez-amaranto a:not(.btn) { color: var(--rosso-200); }
.sez-amaranto a:not(.btn):hover { color: #fff; }
.sez-amaranto .btn-cta, .sez-amaranto .btn-blu { color: var(--rosso-800); }
.sez-amaranto .btn-cta:hover, .sez-amaranto .btn-blu:hover {
  background: var(--rosso-200); color: var(--rosso-800); }

/* Bottone spento: la cosa esiste ma non è ancora pronta (es. una pagina in
   arrivo). Resta leggibile, ma non invita a cliccare. */
.btn.disattivo, .sez-scura .btn.disattivo {
  background: var(--sfondo-tinta); color: var(--testo-tenue);
  border-color: transparent; cursor: default; box-shadow: none;
}
.sez-tinta .btn.disattivo { background: #fff; }

/* Elenchi dentro una scheda */
.scheda ul { margin: 4px 0 0 20px; color: var(--testo-tenue); font-size: .98rem; }
.scheda li { margin-bottom: 7px; }
/* Il badge dentro una scheda cliccabile della griglia dei livelli */
.art-card .badge { margin-bottom: 10px; }

.griglia { display: grid; gap: 22px; }
/* Senza questo, un contenuto largo (una locandina, una tabella) impone la
   propria dimensione naturale alla colonna e sfonda la griglia. */
.griglia > * { min-width: 0; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ============ 7. SCHEDE E COMPONENTI ============ */
/* Scheda con icona in alto: il mattone principale del sito */
.scheda {
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 26px; display: flex; flex-direction: column;
}
.scheda h3 { font-size: 1.15rem; margin-bottom: 8px; }
.scheda p { color: var(--testo-tenue); font-size: .98rem; }
.scheda p + p { margin-top: 12px; }
.scheda .btn, .scheda .btn-testo { align-self: flex-start; margin-top: 18px; }
.scheda .btn-testo { margin-top: auto; padding-top: 18px; }
/* La riga di bottoni va in fondo alla scheda: così due schede affiancate con
   testi di lunghezza diversa hanno comunque i bottoni allineati. */
.scheda .azioni { margin-top: auto; padding-top: 20px; }
.scheda .azioni .btn { margin-top: 0; }
/* Sulle tinte di sezione la scheda resta bianca: è quello che le stacca dallo sfondo */

/* Quando l'unica azione della scheda è "leggi di più", è tutta la scheda a
   essere il link, non solo la freccia in fondo: stessa logica di .art-card.
   La scheda bianca con bordo e ombra è il segno di "questa si apre": quello
   che non si apre non è una scheda, è una .colonna (qui sotto). Il bordo da
   solo non basterebbe a dirlo — nemmeno il #BED0EF arriva al contrasto di
   3:1 che servirebbe — ma insieme all'ombra stacca la scheda dal fondo,
   e quella differenza di forma si vede anche da fermo, senza il cursore. */
a.scheda { border-color: var(--badge); box-shadow: var(--ombra); }
a.scheda { text-decoration: none; color: inherit; cursor: pointer;
           transition: border-color .15s; }
a.scheda:hover { border-color: var(--link); text-decoration: none; }
a.scheda:hover h3 { color: var(--link-hover); }
a.scheda:hover .btn-testo { color: var(--link-hover); }
/* Dentro una scheda-link la freccia diventa una pastiglia: da sola, in fondo
   a una scheda che ha già l'aria del link, si legge come parte del testo. */
a.scheda .btn-testo {
  background: var(--sfondo-tinta); border-radius: 999px;
  padding: 9px 16px; font-size: .95rem;
}
a.scheda:hover .btn-testo { background: var(--badge); }
/* Lo stacco fra il testo e la pastiglia sta sull'elemento sopra, non sulla
   pastiglia: il suo margine automatico serve ad allinearla in fondo alla
   scheda, e un margine solo non può fare anche da distanza minima. Con la
   freccia senza sfondo bastava il padding, ma qui il padding sta dentro il
   colore e allargherebbe la pastiglia invece di staccarla. */
a.scheda:has(> .btn-testo:last-child) > :nth-last-child(2) { margin-bottom: 18px; }

/* Colonna: stessi contenuti di una scheda, senza il guscio. Serve dove il
   blocco non porta da nessuna parte e si legge e basta — gli scenari, i modi
   di lavorare insieme. Toglie sei riquadri bianchi dalla home e restituisce
   respiro al fondo tinto delle sezioni. */
.colonna { display: flex; flex-direction: column; }
.colonna h3 { font-size: 1.15rem; margin-bottom: 8px; }
.colonna p { color: var(--testo-tenue); font-size: .98rem; }
.colonna p + p { margin-top: 12px; }
/* L'immagine tiene la stessa misura e lo stesso taglio della .figura dentro
   una scheda, ma arrotondata su tutti e quattro gli angoli: non ha un guscio
   a cui appoggiarsi in alto. */
.colonna .figura { width: 100%; max-width: none; height: auto; margin: 0 0 18px;
                   aspect-ratio: 16/9; object-fit: cover;
                   border-radius: var(--raggio); display: block; }

.ico-badge { flex: none; width: 46px; height: 46px; border-radius: 12px;
             background: var(--badge); color: var(--navy);
             display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ico-badge svg { width: 24px; height: 24px; }
/* Variante in linea, per le righe con icona a sinistra */
.riga-ico { display: flex; gap: 16px; align-items: flex-start; }
.riga-ico .ico-badge { margin-bottom: 0; }

.lista-check { list-style: none; }
.lista-check li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.lista-check li:last-child { margin-bottom: 0; }
/* La spunta è un'icona Lucide, non il carattere "✓": stessa ragione della
   freccia di .btn-testo, cioè che il glifo del font cambia spessore,
   dimensione e allineamento da un sistema all'altro. */
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 16px; height: 16px; background-color: var(--link);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') no-repeat center / contain;
}

/* Card orizzontale: immagine a sinistra, testo a destra */
.card-h { display: flex; align-items: stretch; background: var(--card);
          border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.card-h .media { flex: none; width: 220px; background: #fff;
                 display: flex; align-items: center; justify-content: center; }
.card-h .media img { width: 100%; height: 100%; object-fit: cover; }
.card-h .media img.contain { object-fit: contain; padding: 12px; }
.card-h .media .ph { width: 100%; height: 100%; border: none; border-radius: 0; }
.card-h .corpo { padding: 24px; display: flex; flex-direction: column; }
.card-h .corpo h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card-h .corpo p { color: var(--testo-tenue); font-size: .98rem; }
.card-h .corpo .btn { align-self: flex-start; margin-top: auto; padding-top: 13px; }

/* Riquadro-data degli eventi */
.chip-data { width: 62px; flex: none; border-radius: 10px; overflow: hidden;
             border: 1px solid var(--bordo); background: #fff; text-align: center; }
.chip-data .mese { background: var(--link); color: #fff; font-size: .68rem; font-weight: 800;
                   text-transform: uppercase; letter-spacing: .06em; padding: 4px 0; }
.chip-data .giorno { font-size: 1.45rem; font-weight: 800; padding: 5px 0; line-height: 1; color: var(--navy); }

/* Team */
.membro { text-align: center; }
.membro .avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; }
.membro .nome { font-weight: 700; color: var(--navy); }
.membro .ruolo { color: var(--testo-tenue); font-size: .9rem; }

/* Newsletter */
.form-nl { display: flex; gap: 12px; margin: 20px 0 16px; flex-wrap: wrap; max-width: 520px; }
.form-nl input { -webkit-appearance: none; appearance: none;
                 flex: 1; min-width: 220px; padding: 14px 18px; border: 1px solid var(--bordo);
                 border-radius: 10px; font-size: 1rem; background: #fff; color: var(--testo); }

/* Pulsante fisso in basso a destra */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 60;
       box-shadow: 0 14px 34px -10px rgba(0,0,0,.45); }

/* Popup video */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center;
         justify-content: center; padding: 24px; }
.modal.aperto { display: flex; }
.modal-overlay { position: absolute; inset: 0; background: rgba(15,25,45,.6); }
.modal-box { position: relative; width: min(900px, 100%); background: #fff;
             border-radius: 16px; padding: 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); }
.modal-chiudi { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px;
                border-radius: 50%; border: none; background: #fff; color: var(--navy);
                font-size: 1.7rem; line-height: 1; cursor: pointer; }
.modal-video { position: relative; aspect-ratio: 16/9; border-radius: 10px;
               overflow: hidden; background: var(--placeholder); }
.modal-video iframe, .modal-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-ph { position: absolute; inset: 0; display: flex; align-items: center;
            justify-content: center; color: var(--testo-tenue); font-weight: 600; padding: 16px; }

/* ============ 8. PAGINE SPECIFICHE ============ */
/* --- Risorse: indice di scorciatoie --- */
.indice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.indice a { display: inline-block; background: var(--card); border: 1px solid var(--bordo);
            border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .95rem; }
.indice a:hover { border-color: var(--link); text-decoration: none; }

/* --- Risorse: griglia degli articoli --- */
.gruppo { margin-bottom: 40px; }
.gruppo:last-child { margin-bottom: 0; }
.gruppo > h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .07em;
               color: var(--testo-tenue); font-weight: 800; margin-bottom: 16px;
               padding-bottom: 8px; border-bottom: 1px solid var(--bordo); }
.griglia-articoli { display: grid; gap: 16px;
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* Anche la .art-card è tutta un link: stesso bordo marcato e stessa ombra
   della scheda-link, per la stessa ragione (vedi a.scheda più sopra). */
.art-card { display: block; background: var(--card); border: 1px solid var(--badge);
            border-radius: 14px; padding: 20px; box-shadow: var(--ombra);
            transition: border-color .15s; }
.art-card:hover { border-color: var(--link); text-decoration: none; }
/* Stesso trucco delle .scheda: l'immagine sfonda il padding e arriva ai bordi. */
.art-card .figura { width: calc(100% + 40px); max-width: none; height: auto;
                    margin: -20px -20px 16px; aspect-ratio: 16/9; object-fit: cover;
                    border-radius: 13px 13px 0 0; display: block; }
.art-card .ico-badge { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; }
.art-card .ico-badge svg { width: 20px; height: 20px; }
.art-card .titolo { font-weight: 700; color: var(--navy); display: block; line-height: 1.3; }
.art-card:hover .titolo { color: var(--link-hover); }
.art-card .desc { color: var(--testo-tenue); font-size: .92rem; display: block; margin-top: 6px; }

/* --- Risorse: pillole --- */
.pillola .data { font-size: .78rem; font-weight: 800; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--testo-tenue); display: block; margin-bottom: 8px; }

/* --- Eventi --- */
.evento { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio);
          overflow: hidden; display: flex; flex-direction: column; }
.evento .locandina { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid var(--bordo); }
/* Le stesse locandine, in piccolo, dentro le schede eventi della home */
.scheda .locandina { width: calc(100% + 52px); max-width: none; height: auto;
                     margin: -26px -26px 18px; aspect-ratio: 16/9; object-fit: cover;
                     border-radius: var(--raggio) var(--raggio) 0 0; display: block; }
/* Immagine in testa a una scheda, a filo dei bordi. La stessa misura vale per
   il segnaposto, così lo spazio è già quello giusto prima che l'immagine
   arrivi e la pagina non si riassesta quando la mettiamo. */
.scheda .figura { width: calc(100% + 52px); max-width: none; height: auto;
                  margin: -26px -26px 18px; aspect-ratio: 16/9; object-fit: cover;
                  border-radius: var(--raggio) var(--raggio) 0 0; display: block; }
.scheda .ph.figura { display: flex; min-height: 0; border-width: 0 0 1px;
                     border-radius: var(--raggio) var(--raggio) 0 0; }
.evento .corpo { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.evento .testa { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.evento h3 { font-size: 1.15rem; margin-bottom: 4px; }
.evento .quando { color: var(--testo-tenue); font-size: .92rem; }
.evento p { color: var(--testo); font-size: .97rem; }
.evento .azioni { margin-top: auto; padding-top: 18px; gap: 10px; }
.evento.da-definire { background: transparent; border-style: dashed; }

/* --- Accademia: il calendario delle venticinque settimane ---
   Un blocco per mese, una riga per settimana: la data a sinistra, il tema al
   centro, il numero di settimana a destra. Il colore sta nel fondo della riga
   e distingue il tipo di sessione; le pause sono tratteggiate, i due
   traguardi di certificazione attraversano il blocco del mese in cui cadono. */
.calendario-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px;
                      padding: 0; list-style: none; }
.calendario-legenda button {
  display: inline-flex; align-items: center; gap: 8px; font: inherit;
  font-size: .88rem; color: var(--testo-tenue); background: none;
  border: 1px solid transparent; border-radius: 999px; padding: 5px 13px 5px 8px;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.calendario-legenda button:hover { border-color: var(--bordo); color: var(--navy); }
.calendario-legenda button[aria-pressed="true"] { border-color: var(--link);
                                                  color: var(--navy); font-weight: 700; }
.calendario-legenda i { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; }
.l-tappa     { background: var(--neutro-200); }
.l-decisioni { background: var(--blu-200); }
.l-struttura { background: var(--giallo-200); }
.l-feedback  { background: var(--rosso-200); }
.l-pratica   { background: var(--verde-200); }

.calendario-mesi { display: grid; gap: 22px; align-items: start;
                   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.calendario-mesi .mese { border: 1px solid var(--bordo); border-radius: var(--raggio);
        padding: 16px 16px 14px; background: var(--card); }
.calendario-mesi .mese h3 { font-size: 1.02rem; color: var(--navy); letter-spacing: -.01em;
           display: flex; align-items: baseline; gap: 7px;
           padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--bordo); }
.calendario-mesi .mese h3 .anno { font-size: .82rem; font-weight: 600; color: var(--testo-tenue); }
.calendario-mesi .mese ol { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.sett { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
        border: 1px solid var(--bordo); border-radius: 9px;
        transition: opacity .15s, transform .15s; }
.sett:hover { transform: translateX(2px); }
.sett .giorno { flex: 0 0 40px; text-align: center; line-height: 1.1; }
.sett .giorno .gg { display: block; font-size: 1rem; font-weight: 800; }
.sett .giorno .gs { display: block; font-size: .62rem; font-weight: 700;
                    text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.sett .tema { font-size: .87rem; font-weight: 600; color: var(--navy); line-height: 1.25; }
.sett .n { margin-left: auto; flex: 0 0 auto; font-size: .68rem; font-weight: 700;
           background: rgba(255, 255, 255, .75); border-radius: 6px; padding: 1px 6px; }

.sett.tappa     { background: var(--neutro-50); border-color: var(--neutro-200); }
.sett.tappa .giorno, .sett.tappa .tema, .sett.tappa .n { color: var(--neutro-800); }
.sett.decisioni { background: var(--blu-50); border-color: var(--blu-200); }
.sett.decisioni .giorno, .sett.decisioni .tema, .sett.decisioni .n { color: var(--blu-800); }
.sett.struttura { background: var(--giallo-50); border-color: var(--giallo-200); }
.sett.struttura .giorno, .sett.struttura .tema, .sett.struttura .n { color: var(--giallo-800); }
.sett.feedback  { background: var(--rosso-50); border-color: var(--rosso-200); }
.sett.feedback .giorno, .sett.feedback .tema, .sett.feedback .n { color: var(--rosso-800); }
.sett.pratica   { background: var(--verde-50); border-color: var(--verde-200); }
.sett.pratica .giorno, .sett.pratica .tema, .sett.pratica .n { color: var(--verde-800); }

/* La pausa è una settimana senza lezione: tratteggiata e in corsivo */
.sett.pausa { background: none; border-style: dashed; border-color: #b8c4d6;
              color: var(--testo-tenue); font-style: italic; }
.sett.pausa .giorno { color: var(--testo-tenue); font-style: normal; }
.sett.pausa .tema { font-weight: 600; font-size: .82rem; }

/* I due traguardi di certificazione, dentro il blocco del mese in cui cadono */
.mese .traguardo { display: flex; align-items: center; gap: 12px; margin-top: 8px;
                   padding: 11px 12px; border-radius: 9px;
                   background: var(--scuro); color: #fff; }
.mese .traguardo img { flex: 0 0 auto; width: 42px; height: 42px; display: block; }
.mese .traguardo .titolo { font-size: .85rem; font-weight: 800; line-height: 1.2; }

.calendario.filtra .sett:not(.acceso) { opacity: .2; }

/* Prezzi */
.prezzi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 16px; margin: 4px 0 18px; max-width: 560px; }
.prezzo { background: var(--card); border: 1px solid var(--bordo); border-radius: 12px; padding: 20px; }
.prezzo .cifra { font-size: 1.7rem; font-weight: 800; color: var(--navy); line-height: 1; }
.prezzo .fascia { color: var(--testo-tenue); font-size: .9rem; margin-top: 6px; }

/* --- Certificazione --- */
.badge-livello { width: 120px; height: 120px; display: block; margin: 0 auto 16px; }
.mappa-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--raggio);
               overflow: hidden; border: 1px solid var(--bordo); }
.mappa-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Home: la striscia di dati e il calendario ridotto dell'Accademia --- */
/* Date, durata, prezzo e certificazione stavano dentro due paragrafi: chi valuta
   se iscriversi doveva rileggerli per trovarli. Qui sono quattro dati in fila. */
.dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 20px 32px; margin: 26px 0 0; }
.dati > div { border-left: 3px solid var(--bordo); padding-left: 16px; }
.dati dt { font-weight: 800; font-size: 1.3rem; line-height: 1.25; color: var(--navy); }
.dati dd { margin: 0; font-size: .93rem; color: var(--testo-tenue); }
.sez-scura .dati > div { border-left-color: rgba(255,255,255,.32); }
.sez-scura .dati dt { color: #fff; }
.sez-scura .dati dd { color: rgba(255,255,255,.72); }

/* Il calendario dell'Accademia in piccolo: sette mesi per quattro settimane.
   Per farlo stare in una matrice regolare le due pause di dicembre valgono una
   casella sola; il calendario settimana per settimana resta in accademia.html. */
.mini-cal { display: flex; flex-direction: column; gap: 16px; }
.mini-cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mc-anno { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
           color: rgba(255,255,255,.55); padding-bottom: 6px; margin-bottom: 2px;
           border-bottom: 1px solid rgba(255,255,255,.22); }
.mc-mese { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
           color: rgba(255,255,255,.75); text-align: center; margin-bottom: 2px; }
/* Ogni settimana è un bottone: così il tema si apre anche da tastiera e da
   telefono, dove il passaggio del cursore non esiste. */
.mc-sett { -webkit-appearance: none; appearance: none; font: inherit; padding: 0; border: 0;
           position: relative; height: 50px; border-radius: 10px; background: none;
           display: flex; align-items: center; justify-content: center;
           font-weight: 800; font-size: .95rem; cursor: pointer; transition: box-shadow .15s; }
.mc-sett .cancelletto { font-weight: 700; opacity: .55; margin-right: 1px; }
.mc-sett:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.mc-tappa     { background: var(--neutro-200); color: var(--neutro-800); }
.mc-decisioni { background: var(--blu-200);    color: var(--blu-800); }
.mc-struttura { background: var(--giallo-200); color: var(--giallo-800); }
.mc-feedback  { background: var(--rosso-200);  color: var(--rosso-800); }
.mc-pratica   { background: var(--verde-200);  color: var(--verde-800); }
.mc-pausa { border: 1px dashed rgba(255,255,255,.32); color: rgba(255,255,255,.6); }
.mc-cert  { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.mc-pausa svg, .mc-cert svg { width: 22px; height: 22px; }

/* Il tema della settimana: compare al passaggio del cursore e quando la casella
   prende il fuoco, cioè anche al clic e al tocco. */
.mc-tip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translate(-50%, -3px);
          width: min(210px, 46vw); background: var(--card); color: var(--testo);
          border-radius: 10px; padding: 10px 12px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55);
          display: flex; flex-direction: column; gap: 2px; text-align: left;
          font-weight: 400; font-size: .85rem; line-height: 1.35;
          opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
          transition: opacity .15s, transform .15s, visibility .15s; }
/* Sulle colonne di bordo il riquadro si allinea al lato, per non uscire dalla pagina */
.mc-tip-inizio { left: 0; transform: translate(0, -3px); }
.mc-tip-fine { left: auto; right: 0; transform: translate(0, -3px); }
.mc-sett:hover .mc-tip, .mc-sett:focus .mc-tip { opacity: 1; visibility: visible;
          transform: translate(-50%, 0); }
.mc-sett:hover .mc-tip-inizio, .mc-sett:focus .mc-tip-inizio,
.mc-sett:hover .mc-tip-fine, .mc-sett:focus .mc-tip-fine { transform: translate(0, 0); }
.mc-data { font-size: .74rem; font-weight: 800; text-transform: uppercase;
           letter-spacing: .05em; color: var(--testo-tenue); }
.mc-tema { font-weight: 700; color: var(--navy); }

.mini-cal-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 16px;
                    margin: 0; padding-top: 12px; font-size: .82rem;
                    color: rgba(255,255,255,.82); border-top: 1px solid rgba(255,255,255,.18); }
.mini-cal-legenda li { display: inline-flex; align-items: center; gap: 7px; }
.mini-cal-legenda i { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; }

/* Striscia: due blocchi sulla stessa riga, titolo a sinistra e azioni a destra.
   Serve a spezzare il ritmo delle sezioni tutte uguali (intestazione + griglia). */
.striscia { display: flex; flex-wrap: wrap; align-items: center;
            justify-content: space-between; gap: 20px 40px; }
.striscia > div { min-width: 0; }
.striscia .sezione-testa { margin-bottom: 0; }
.striscia .azioni { margin-top: 0; }

/* ============ 9. ARTICOLI ============ */
.briciole { font-size: .9rem; color: var(--testo-tenue); margin-bottom: 18px; }
.briciole a { color: var(--testo-tenue); }
.briciole a:hover { color: var(--link); }

/* Gli articoli e il glossario sono il contenuto per cui si torna sul sito, e
   si leggono dall'inizio alla fine: meritano un corpo più grande dei 16 px
   che bastano a una scheda dentro una griglia. La colonna resta a 70 battute,
   perché il "ch" cresce insieme al carattere. */
.articolo { max-width: 70ch; padding-bottom: 40px;
            font-size: 1.06rem; line-height: 1.7; }
.articolo > p { margin-bottom: 20px; }
.articolo h2 { font-size: 1.5rem; margin: 40px 0 14px; }
.articolo h3 { font-size: 1.18rem; margin: 28px 0 10px; }
.articolo ul, .articolo ol { margin: 0 0 20px 22px; }
.articolo li { margin-bottom: 8px; }
.articolo blockquote {
  border-left: 3px solid var(--badge); background: var(--card);
  padding: 18px 22px; margin: 0 0 22px; border-radius: 0 10px 10px 0;
}
.articolo blockquote p { margin-bottom: 10px; }
.articolo blockquote p:last-child { margin-bottom: 0; }
/* Una tabella con tre o più colonne non ci sta in 375 px. Invece di far
   scorrere di lato tutta la pagina, la tabella scorre dentro il suo
   contenitore: il resto del testo resta fermo. */
.tabella-scorrevole { overflow-x: auto; margin: 0 0 24px; }
.tabella-scorrevole table { margin-bottom: 0; min-width: 440px; }
.articolo table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: .96rem; }
.articolo th, .articolo td { text-align: left; padding: 10px 14px;
                             border-bottom: 1px solid var(--bordo); vertical-align: top; }
.articolo th { color: var(--navy); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.articolo .tabella-wrap { overflow-x: auto; }
.articolo hr { border: none; border-top: 1px solid var(--bordo); margin: 36px 0; }

/* Le illustrazioni degli articoli.
   Lo schema ha gia' il suo fondo chiaro dentro l'immagine, percio' qui non
   serve ne' cornice ne' ombra: basta lasciarla larga quanto la colonna del
   testo e darle un po' d'aria sopra e sotto. */
.fig-articolo { margin: 30px 0; }
.fig-articolo img { display: block; width: 100%; height: auto; border-radius: 14px; }
/* Gli schemi sono fitti, e nella colonna del testo — larga 70 caratteri — le
   etichette piccole diventano illeggibili. A destra della colonna c'e' spazio
   vuoto: da 1000 px in su la figura se lo prende, senza mai uscire dal
   contenitore. Sotto quella soglia resta larga quanto il testo. */
@media (min-width: 1000px) {
  .articolo .fig-articolo { width: min(940px, 140%, calc(100vw - 120px)); }
}

/* Segnaposto delle illustrazioni ancora da produrre.
   Restano nascosti finché l'illustrazione non c'è: sul sito pubblicato il
   riquadro tratteggiato esce vuoto, senza la scritta che dice cosa manca, e
   chi legge lo scambia per un'immagine che non si è caricata. L'elenco di
   quello che manca sta in IMMAGINI-DA-FARE.md, che è il posto giusto.
   Quando l'illustrazione arriva si toglie il segnaposto dalla pagina; per
   rivederli tutti in una volta basta commentare la riga qui sotto. */
.ph-figura { display: none; }
.ph-figura { margin: 0 0 24px; }
.ph-figura .ph { min-height: 150px; }

/* Blocco "Continua a leggere" in fondo all'articolo */
.continua { border-top: 1px solid var(--bordo); padding-top: 26px; margin-top: 8px; }
.continua h2 { font-size: 1.1rem; margin: 0 0 14px; }
.continua ul { list-style: none; margin: 0; display: grid; gap: 8px; }
.continua li { margin: 0; }
.continua a { font-weight: 700; }

/* ============ 10. FOOTER ============ */
/* Il footer è scuro e prosegue senza stacco dalla sezione finale:
   insieme fanno la base della pagina. */
footer.sito { background: var(--scuro); color: rgba(255,255,255,.75); padding: 60px 0 36px; }
footer.sito .logo, footer.sito .logo span { color: #fff; }
/* Niente filtro sul marchio: il PNG ha già il fondo bianco, e schiarirlo
   appiattirebbe il fiore in un disco pieno. */
.footer-aff { max-width: 62ch; margin: 16px 0 28px; color: rgba(255,255,255,.75); }
.footer-aff b { color: #fff; }
.footer-link { display: flex; flex-wrap: wrap; gap: 22px; font-weight: 700; margin-bottom: 30px; }
.footer-link a { color: #fff; }
.footer-link a:hover { color: var(--blu-200); }
.footer-bar { border-top: 1px solid rgba(255,255,255,.18); padding-top: 20px; display: flex;
              justify-content: space-between; flex-wrap: wrap; gap: 14px;
              font-size: .9rem; color: rgba(255,255,255,.6); }
.footer-bar a { color: rgba(255,255,255,.75); }
.footer-bar a:hover { color: #fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero-griglia { grid-template-columns: 1fr; gap: 36px; }
  .sezione { padding: 52px 0; }
}
/* Il menu collassa nel kebab appena logo e voci non ci stanno più su una
   riga sola (971px di contenuto + il padding del contenitore): prima si
   sforma su due righe, cosa che qui non deve succedere mai. */
@media (max-width: 1050px) {
  .topnav-inner { flex-wrap: wrap; }
  /* Il menu è l'unico modo di girare il sito da telefono, quindi tutto quello
     che si tocca sta in un riquadro di 44px: sotto quella misura il dito
     sbaglia bersaglio. L'altezza si fa con lo spazio attorno, non ingrandendo
     il carattere. Lo stacco fra le voci scende da 16 a 6 perché adesso sono
     le voci stesse a tenersi distanti: in tutto il menu cresce di poco. */
  .nav-burger { display: flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; cursor: pointer; background: none;
                border: none; border-radius: 10px; color: var(--navy); padding: 0; }
  .nav-burger svg { width: 26px; height: 26px; }
  .topnav-link { display: none; width: 100%; flex-direction: column; align-items: stretch;
                 gap: 6px; padding: 10px 0 6px; }
  .topnav-link > a, .topnav-menu > a {
    display: flex; align-items: center; min-height: 44px; }
  .topnav-sub a { display: flex; align-items: center; min-height: 44px; }
  .nav-toggle:checked ~ .topnav-link { display: flex; }
  /* Su schermo stretto la ricerca occupa tutta la riga e il pannello si allarga */
  .ricerca input, .ricerca input:focus { width: 100%; padding-top: 12px; padding-bottom: 12px; }
  .ricerca-esiti { width: 100%; right: auto; left: 0; }

  /* Dentro il menu a tendina il sottomenu di Risorse resta sempre aperto,
     rientrato sotto la voce padre: l'hover non esiste su schermo touch. */
  .topnav-menu { flex-direction: column; align-items: stretch; }
  .topnav-menu::after { display: none; }
  .topnav-sub { position: static; opacity: 1; visibility: visible; transform: none;
                box-shadow: none; border: none; background: none; margin: 4px 0 0 14px;
                padding: 0; }
}
@media (max-width: 700px) {
  .contenitore { padding: 0 20px; }
  .mini-cal-griglia { gap: 5px; }
  /* 44px: ogni casella è un <button> che si tocca per vedere il tema della
     settimana, quindi vale la stessa soglia delle voci di menu. */
  .mc-sett { height: 44px; font-size: .85rem; border-radius: 8px; }
  .mc-mese { font-size: .62rem; letter-spacing: .04em; }
  .mc-anno { font-size: .6rem; letter-spacing: .06em; }
  .mc-pausa svg, .mc-cert svg { width: 16px; height: 16px; }
  .card-h { flex-direction: column; }
  .card-h .media { width: 100%; height: 170px; }
  .modulo-sessioni li { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
  .fab { right: 14px; bottom: 14px; padding: 11px 16px; font-size: .95rem; }
}